/* ============================================================================ * SUHAREX — Dark Mode (redwine brand) * Toggle via [data-theme="dark"] on * ============================================================================ */ [data-theme="dark"] { --sx-wine: #c45a6a; --sx-wine-dark: #8b1e2e; --sx-wine-mid: #a83848; --sx-wine-soft: #d47884; --sx-wine-light: #e8a8b0; --sx-wine-muted: #2a1418; /* Keep chrome gradients dark enough for white label text */ --qb-navy: #c45a6a; --qb-navy-dark: #f0c8ce; --qb-navy-mid: #a83848; --qb-blue: #a83848; --qb-blue-light: #8b1e2e; --qb-blue-accent: #a83848; --qb-teal: #7abfbf; --qb-green: #4caf7a; --qb-green-dark: #3d9065; --qb-gold: #e0b040; --qb-red: #e87884; --qb-orange: #e08050; --invoice-bg: #221418; --estimate-bg: #1a2018; --form-bg: #1a1416; --toolbar-bg: #241618; --toolbar-border: #4a3034; --content-bg: #120a0c; --panel-bg: #1c1214; --panel-border: #3a282c; --input-border: #5a4044; --input-focus: #c45a6a; --text-primary: #f4e8ea; --text-secondary: #c8b0b4; --text-muted: #9a8084; --text-light: #7a6064; --text-on-dark: #f4e8ea; --text-on-navy: #f4e8ea; --heading-color: #f0c8ce; --primary-light: #2a1418; --gray-50: #160e10; --gray-100: #241618; --gray-200: #3a282c; --gray-300: #4a3538; --gray-400: #7a6064; --gray-500: #9a8084; --gray-600: #c8b0b4; --success: #4caf7a; --warning: #e0b040; --danger: #e87884; } [data-theme="dark"] body, [data-theme="dark"] #content, [data-theme="dark"] #page-content { background: var(--content-bg) !important; color: var(--text-primary) !important; } [data-theme="dark"] #topbar { background: linear-gradient(180deg, #2a161a 0%, #1a0e10 100%) !important; border-bottom-color: #4a3034 !important; color: var(--text-primary) !important; } [data-theme="dark"] .tb-btn { color: var(--text-secondary) !important; } [data-theme="dark"] .tb-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: #5a4044; color: var(--text-primary) !important; } [data-theme="dark"] .tb-btn-primary { background: #8b1e2e !important; border-color: #8b1e2e !important; color: #fff !important; } [data-theme="dark"] .tb-search { background: #120a0c !important; border-color: #5a4044 !important; color: var(--text-primary) !important; } [data-theme="dark"] #theme-toggle { color: #ffc94a !important; } [data-theme="dark"] #sidebar { background: linear-gradient(180deg, #2a0a10 0%, #140508 100%) !important; } [data-theme="dark"] #sidebar .sidebar-header h1 { color: #f0c8ce !important; } [data-theme="dark"] #sidebar .nav-section { color: #9a8084 !important; } [data-theme="dark"] #sidebar .nav-link { color: #e0c8cc !important; } [data-theme="dark"] #sidebar .nav-link:hover, [data-theme="dark"] #sidebar .nav-link.active { color: #fff !important; background: rgba(196, 90, 106, 0.22) !important; border-left-color: #c45a6a !important; } [data-theme="dark"] #sidebar .sidebar-footer { color: #7a6064 !important; } [data-theme="dark"] #statusbar { background: #1a0e10 !important; border-top-color: #4a3034 !important; color: var(--text-secondary) !important; } [data-theme="dark"] .page-header { background: var(--panel-bg) !important; border-color: var(--panel-border) !important; color: var(--text-primary) !important; } [data-theme="dark"] .page-header h2, [data-theme="dark"] #content h1, [data-theme="dark"] #content h2, [data-theme="dark"] #content h3 { color: var(--heading-color) !important; } [data-theme="dark"] .card, [data-theme="dark"] .sx-card, [data-theme="dark"] .sx-kpi, [data-theme="dark"] .pos-product, [data-theme="dark"] .pos-cart, [data-theme="dark"] .mapcn-panel, [data-theme="dark"] .sx-chat, [data-theme="dark"] .modal, [data-theme="dark"] .table-container, [data-theme="dark"] .search-dropdown, [data-theme="dark"] .hf-cmd-panel { background: var(--panel-bg) !important; border-color: var(--panel-border) !important; color: var(--text-primary) !important; } [data-theme="dark"] .card-header, [data-theme="dark"] .card-value, [data-theme="dark"] .sx-kpi .value, [data-theme="dark"] .sx-kpi .label { color: var(--heading-color) !important; } [data-theme="dark"] thead th { background: #241618 !important; color: var(--text-secondary) !important; border-color: var(--panel-border) !important; } [data-theme="dark"] tbody td { background: var(--panel-bg) !important; color: var(--text-primary) !important; border-color: var(--panel-border) !important; } [data-theme="dark"] tbody tr:nth-child(even) td { background: #160e10 !important; } [data-theme="dark"] tbody tr:hover td { background: #2a1418 !important; } [data-theme="dark"] .mapcn-list-item { background: #241618 !important; border-color: #4a3034 !important; color: var(--text-primary) !important; } [data-theme="dark"] .mapcn-list-item:hover, [data-theme="dark"] .mapcn-list-item.active { border-color: #c45a6a !important; background: #2a1418 !important; } [data-theme="dark"] .mapcn-frame { background: #0a0608 !important; border-color: #4a3034 !important; } [data-theme="dark"] .mapcn-ctrl, [data-theme="dark"] .mapcn-toolbar select, [data-theme="dark"] .mapcn-toolbar button { background: #1c1214 !important; border-color: #5a4044 !important; color: var(--text-primary) !important; } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #120a0c !important; color: var(--text-primary) !important; border-color: var(--input-border) !important; } [data-theme="dark"] .btn { background: #241618 !important; border-color: #5a4044 !important; color: var(--text-primary) !important; } [data-theme="dark"] .btn-primary, [data-theme="dark"] .sx-btn-primary { background: #8b1e2e !important; border-color: #8b1e2e !important; color: #fff !important; } [data-theme="dark"] .btn-secondary, [data-theme="dark"] .sx-btn { background: #241618 !important; border-color: #5a4044 !important; color: var(--text-primary) !important; } [data-theme="dark"] .btn-danger { background: #a11020 !important; color: #fff !important; } [data-theme="dark"] .modal-header { background: #8b1e2e !important; color: #fff !important; } [data-theme="dark"] .modal-header h2, [data-theme="dark"] .modal-close { color: #fff !important; } [data-theme="dark"] #content label, [data-theme="dark"] #content p, [data-theme="dark"] #content td, [data-theme="dark"] #content th, [data-theme="dark"] #content li { color: var(--text-primary); } [data-theme="dark"] .splash-overlay { background: rgba(18, 10, 12, 0.96) !important; } [data-theme="dark"] .splash-box { background: #1c1214 !important; color: var(--text-primary) !important; border-color: #4a3034 !important; } [data-theme="dark"] .splash-title { color: #f0c8ce !important; } [data-theme="dark"] .splash-subtitle { color: #9a8084 !important; } [data-theme="dark"] .splash-info, [data-theme="dark"] .splash-legal { color: var(--text-secondary) !important; } /* ---- Light theme hard lock (beats leftovers) ---- */ html:not([data-theme="dark"]), html[data-theme="light"] { color-scheme: light; } html:not([data-theme="dark"]) #content, html[data-theme="light"] #content, html:not([data-theme="dark"]) #page-content, html[data-theme="light"] #page-content { background: #f5f2f3 !important; color: #1a0a0c !important; } html:not([data-theme="dark"]) #content h1, html:not([data-theme="dark"]) #content h2, html:not([data-theme="dark"]) #content h3, html:not([data-theme="dark"]) .page-header h2, html[data-theme="light"] #content h1, html[data-theme="light"] #content h2, html[data-theme="light"] #content h3, html[data-theme="light"] .page-header h2 { color: #600010 !important; } html:not([data-theme="dark"]) .page-header, html[data-theme="light"] .page-header, html:not([data-theme="dark"]) .card, html:not([data-theme="dark"]) .sx-card, html:not([data-theme="dark"]) .sx-kpi, html:not([data-theme="dark"]) .table-container, html:not([data-theme="dark"]) .modal, html:not([data-theme="dark"]) .mapcn-panel, html[data-theme="light"] .page-header, html[data-theme="light"] .card, html[data-theme="light"] .sx-card, html[data-theme="light"] .sx-kpi, html[data-theme="light"] .table-container, html[data-theme="light"] .modal, html[data-theme="light"] .mapcn-panel { background: #ffffff !important; color: #1a0a0c !important; border-color: #e0d4d6 !important; } html:not([data-theme="dark"]) #content label, html:not([data-theme="dark"]) #content p, html:not([data-theme="dark"]) #content td, html:not([data-theme="dark"]) #content th, html:not([data-theme="dark"]) #content li, html[data-theme="light"] #content label, html[data-theme="light"] #content p, html[data-theme="light"] #content td, html[data-theme="light"] #content th, html[data-theme="light"] #content li { color: #1a0a0c !important; } html:not([data-theme="dark"]) thead th, html[data-theme="light"] thead th { background: #f3f0f1 !important; color: #4a3034 !important; } html:not([data-theme="dark"]) tbody td, html[data-theme="light"] tbody td { background: #ffffff !important; color: #1a0a0c !important; } html:not([data-theme="dark"]) tbody tr:nth-child(even) td, html[data-theme="light"] tbody tr:nth-child(even) td { background: #faf8f8 !important; } html:not([data-theme="dark"]) .btn:not(.btn-primary):not(.btn-danger), html[data-theme="light"] .btn:not(.btn-primary):not(.btn-danger) { color: #1a0a0c !important; } html:not([data-theme="dark"]) .btn-primary, html[data-theme="light"] .btn-primary { background: #600010 !important; color: #ffffff !important; } html:not([data-theme="dark"]) .splash-box, html[data-theme="light"] .splash-box { background: #ffffff !important; color: #1a0a0c !important; } html:not([data-theme="dark"]) .splash-title, html[data-theme="light"] .splash-title { color: #600010 !important; } html:not([data-theme="dark"]) .splash-info, html:not([data-theme="dark"]) .splash-legal, html[data-theme="light"] .splash-info, html[data-theme="light"] .splash-legal { color: #4a3034 !important; } html:not([data-theme="dark"]) #topbar, html[data-theme="light"] #topbar { color: #1a0a0c !important; } html:not([data-theme="dark"]) .tb-btn:not(.tb-btn-primary), html[data-theme="light"] .tb-btn:not(.tb-btn-primary) { color: #4a3034 !important; } html:not([data-theme="dark"]) .tb-btn-primary, html[data-theme="light"] .tb-btn-primary { color: #ffffff !important; }