/* ── Dark Mode Overrides ─────────────────────────────────────────────────────── Applied when has class "dark-mode". Colour hierarchy (darkest → lightest): Nav bar #1e2a3a (set via Python inline style — CSS just preserves it) Tab bar #0a0f1a (chrome behind inactive tabs) Page background #0f1b2d (main canvas) Filter row #0a1520 (control surface, dropdown menus) Table surface #1a2a3d (raised content area) Table header #0f1b2d (step back from body) Borders #1e3048 (separation without contrast) Selector strategy: - Class-based (.page-wrapper) where className is set in Python - Structural (#tab-content > div) for page content panels - rgb() for scattered white/light inline-style divs (React serialises `backgroundColor: "#f5f5f5"` as `background-color: rgb(245, 245, 245)` in the DOM attribute — camelCase hex selectors never match.) ──────────────────────────────────────────────────────────────────────────── */ /* ── Page wrapper (outermost layout div, className set in dashboard.py) ───── */ body.dark-mode .page-wrapper, body.dark-mode #_dash-app-content > div { background-color: #0f1b2d !important; color: #e8f0f8 !important; } /* Fallback: catch the f0f2f5 wrapper by its rgb serialisation */ body.dark-mode [style*="background-color: rgb(240, 242, 245)"] { background-color: #0f1b2d !important; } /* ── Tab content panels (the #f5f5f5 div returned by each tab callback) ───── */ body.dark-mode #tab-content > div, body.dark-mode #nsw-tab-content > div { background-color: #0f1b2d !important; } /* rgb fallback for any other #f5f5f5 divs */ body.dark-mode [style*="background-color: rgb(245, 245, 245)"] { background-color: #0f1b2d !important; } /* ── White card / panel divs ──────────────────────────────────────────────── */ /* React normalises "white" → rgb(255,255,255) in DOM style attribute */ body.dark-mode [style*="background-color: rgb(255, 255, 255)"], body.dark-mode [style*="background-color: white"], body.dark-mode [style*="backgroundColor: white"], body.dark-mode [style*="backgroundColor: rgb(255, 255, 255)"] { background-color: #1a2a3d !important; color: #e8f0f8 !important; } /* ── Stat cards (Player Profile summary row) ──────────────────────────────── */ /* Structural selector — immune to React style serialisation quirks */ body.dark-mode .stat-cards-row > div { background-color: #1a2a3d !important; border-color: #1e3048 !important; color: #e8f0f8 !important; } body.dark-mode .stat-cards-row > div h3, body.dark-mode .stat-cards-row > div p { color: inherit !important; } /* ── Trend chart wrappers (Player Profile bottom row) ─────────────────────── */ body.dark-mode .trend-charts-row > div { background-color: #1a2a3d !important; } /* ── Borders ──────────────────────────────────────────────────────────────── */ body.dark-mode [style*="border: 1px solid #e0e0e0"], body.dark-mode [style*="border: 1px solid #ddd"] { border-color: #1e3048 !important; } /* ── Primary text ─────────────────────────────────────────────────────────── */ body.dark-mode [style*="color: #1a1a1a"], body.dark-mode [style*="color: rgb(26, 26, 26)"] { color: #e8f0f8 !important; } /* Secondary / muted text */ body.dark-mode [style*="color: #666"], body.dark-mode [style*="color: #555"], body.dark-mode [style*="color: #888"], body.dark-mode [style*="color: rgb(102, 102, 102)"], body.dark-mode [style*="color: rgb(85, 85, 85)"] { color: #5c7a99 !important; } body.dark-mode label { color: #c8dae8 !important; } body.dark-mode h3, body.dark-mode h4, body.dark-mode p { color: #c8dae8 !important; } /* Keep intentional coloured headings */ body.dark-mode [style*="color: #1d4ed8"] { color: #60a5fa !important; } body.dark-mode [style*="color: #00b894"] { color: #00b894 !important; } body.dark-mode [style*="color: #ff9900"] { color: #ff9900 !important; } /* Column legend abbreviation labels — React converts #1e2a3a → rgb(30, 42, 58) in DOM */ body.dark-mode [style*="color: rgb(30, 42, 58)"] { color: #7eb8d4 !important; } /* ── Dash Tabs ────────────────────────────────────────────────────────────── */ /* Selected tab + nav header preserve their dark background */ body.dark-mode .tab--selected, body.dark-mode [style*="backgroundColor: #1e2a3a"], body.dark-mode [style*="background-color: #1e2a3a"] { background-color: #1e2a3a !important; } /* Inactive tabs */ body.dark-mode .tab:not(.tab--selected) { background-color: #0a0f1a !important; color: #5c7a99 !important; border-color: #1e3048 !important; } /* ── Dropdowns (React-Select) ──────────────────────────────────────────────── */ body.dark-mode .Select-control, body.dark-mode .Select--single > .Select-control { background-color: #0a1520 !important; border-color: #1e3048 !important; color: #c8dae8 !important; } /* Selected value and placeholder text */ body.dark-mode .Select-value, body.dark-mode .Select-value-label, body.dark-mode .Select-placeholder, body.dark-mode .Select-input input { color: #c8dae8 !important; background-color: transparent !important; } body.dark-mode .Select-menu-outer { background-color: #0a1520 !important; border: 1px solid #1e3048 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important; } body.dark-mode .Select-option, body.dark-mode .VirtualizedSelectOption { background-color: #0a1520 !important; color: #c8dae8 !important; } body.dark-mode .Select-option.is-focused, body.dark-mode .VirtualizedSelectOption.is-focused { background-color: #1a2a3d !important; color: #1d9e75 !important; } body.dark-mode .Select-option.is-selected, body.dark-mode .VirtualizedSelectOption.is-selected { background-color: #1d9e75 !important; color: white !important; } /* Catch-all: any text inside the dropdown menu */ body.dark-mode .Select-menu-outer *, body.dark-mode .Select-menu * { color: #c8dae8 !important; background-color: #0a1520 !important; } body.dark-mode .Select-arrow { border-top-color: #5c7a99 !important; } /* DataTable native page-size