/* ───────────────────────────────────────────────────────────────────────── DARK THEME — opt-in via , toggled from the avatar menu and persisted in localStorage. Light mode is the default and is left completely untouched (every rule here is scoped under [data-theme="dark"]). Strategy: flip the semantic token layer (handles all token-based surfaces built in Phases 1–4), then override the specific high-traffic components that hardcode light colors (white backgrounds, rgba(0,0,0,x) borders). ───────────────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --bg-base: #0b1120; --bg-surface: #151f31; --bg-elevated: #1c2740; --surface-sunken: #0f1727; --surface-hover: rgba(255,255,255,0.06); --text-primary: rgba(255,255,255,0.92); --text-secondary: rgba(226,232,240,0.66); --text-tertiary: rgba(226,232,240,0.45); --text-disabled: rgba(226,232,240,0.30); --border-subtle: rgba(255,255,255,0.07); --border-default: rgba(255,255,255,0.12); --border-strong: rgba(255,255,255,0.20); --header-bg: #070b14; --shadow-sm: 0 1px 3px rgba(0,0,0,0.40); --shadow-md: 0 6px 16px rgba(0,0,0,0.50); --shadow-lg: 0 12px 32px rgba(0,0,0,0.60); --shadow-hover: 0 8px 22px rgba(0,0,0,0.55); --shadow-xl: 0 20px 50px rgba(0,0,0,0.65); --shadow-focus-ring: 0 0 0 3px rgba(var(--brand-primary-rgb),0.45); } /* ── Surfaces that hardcode white ── */ [data-theme="dark"] .drawer, [data-theme="dark"] .modal-box, [data-theme="dark"] .avatar-menu, [data-theme="dark"] .cmd-box, [data-theme="dark"] .crm-compose-box, [data-theme="dark"] .notif-panel, [data-theme="dark"] .empty-state, [data-theme="dark"] .dash-empty { background: var(--bg-surface); } [data-theme="dark"] .avatar-menu { border-color: var(--border-default); } /* ── Inputs & selects (dark field, visible border) ── */ [data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .form-textarea, [data-theme="dark"] .search-box, [data-theme="dark"] .page-size-select, [data-theme="dark"] .crm-search, [data-theme="dark"] .crm-type-select, [data-theme="dark"] .quotes-search, [data-theme="dark"] .pos-search, [data-theme="dark"] .dist-search, [data-theme="dark"] .spec-row-input input, [data-theme="dark"] .cell-edit-input, [data-theme="dark"] .mfr-sidebar-search input { background: var(--surface-sunken); border-color: var(--border-default); color: var(--text-primary); } [data-theme="dark"] .search-box, [data-theme="dark"] .page-size-select { box-shadow: none; } /* ── Glassmorphic toolbar ── */ [data-theme="dark"] .toolbar { background: rgba(11,17,32,0.82); border-bottom-color: var(--border-subtle); } /* ── Toolbar buttons / pills that hardcode white ── */ [data-theme="dark"] .btn-import-file, [data-theme="dark"] .btn-toolbar { background: var(--bg-surface); border-color: var(--border-default); color: var(--text-secondary); } [data-theme="dark"] .btn-import-file:hover, [data-theme="dark"] .btn-toolbar:hover { color: var(--text-primary); border-color: rgba(var(--brand-primary-rgb),0.5); } /* ── Shared data table: hovers/selection (hardcoded light blues) ── */ [data-theme="dark"] thead th:hover { background: var(--bg-elevated); } [data-theme="dark"] tbody tr:hover, [data-theme="dark"] .table-wrap tbody tr:hover td:first-child { background: rgba(var(--brand-primary-rgb),0.12); } [data-theme="dark"] tbody tr.selected, [data-theme="dark"] .table-wrap tbody tr.selected td:first-child { background: rgba(var(--brand-primary-rgb),0.18); } [data-theme="dark"] .crm-data-table tbody tr:hover .crm-td-name { color: #6bb7e8; } /* ── Manufacturer sidebar ── */ [data-theme="dark"] .mfr-sidebar { border-right-color: var(--border-subtle); } [data-theme="dark"] .mfr-card:hover { background: var(--surface-hover); } /* ── Card-title tint bars that used near-black washes ── */ [data-theme="dark"] .rec-card-h { background: rgba(255,255,255,0.03); } [data-theme="dark"] .rec-count, [data-theme="dark"] .crm-tag { background: rgba(255,255,255,0.08); color: var(--text-secondary); } /* ── Skeletons ── */ [data-theme="dark"] .skeleton { background: linear-gradient(90deg, var(--surface-sunken) 25%, #223049 37%, var(--surface-sunken) 63%); background-size: 200% 100%; } /* ── Misc washes that assumed a light backdrop ── */ [data-theme="dark"] .crm-entry-form, [data-theme="dark"] .drawer-footer { background: var(--bg-elevated); } [data-theme="dark"] .dash-funnel-bar-wrap { background: rgba(255,255,255,0.06); } /* ── Table/Map segmented toggle (hardcoded light track + white slider) ── */ [data-theme="dark"] .dist-view-toggle { background: var(--surface-sunken); } [data-theme="dark"] .dist-view-toggle::before { background: var(--bg-elevated); box-shadow: 0 1px 3px rgba(0,0,0,0.5); } [data-theme="dark"] .dist-toggle-btn { color: var(--text-tertiary); } [data-theme="dark"] .dist-toggle-btn:hover, [data-theme="dark"] .dist-toggle-btn.active { color: var(--text-primary); } /* ── Map filter chips + their popover menus ── */ [data-theme="dark"] .dist-chip { background: var(--bg-surface); border-color: var(--border-default); color: var(--text-secondary); } [data-theme="dark"] .dist-chip:hover { background: var(--bg-elevated); border-color: var(--border-strong); } [data-theme="dark"] .dist-chip.active-chip { background: rgba(var(--brand-primary-rgb),0.18); color: #6bb7e8; border-color: rgba(var(--brand-primary-rgb),0.4); } [data-theme="dark"] .dist-chip-menu { background: var(--bg-surface); border-color: var(--border-default); color: var(--text-primary); } [data-theme="dark"] .dist-chip-menu label:hover { background: var(--surface-hover); } [data-theme="dark"] .dist-map-status, [data-theme="dark"] .dist-map-gate { background: rgba(21,31,49,0.86); } [data-theme="dark"] .dist-map-status { border-color: var(--border-default); color: var(--text-secondary); } /* ── Links that fall back to the default UA blue on dark ── */ [data-theme="dark"] .dash-kpi-sub a { color: #6bb7e8; } /* ── Keyboard hint chips / small bordered bits ── */ [data-theme="dark"] .cmd-kbd { border-color: var(--border-default); color: var(--text-tertiary); } [data-theme="dark"] .cmd-search { border-bottom-color: var(--border-subtle); } [data-theme="dark"] .notif-panel { border-color: var(--border-default); }