/* ============================================================================ DARK THEME Palette lifted from the release-notes mock (GitHub-dark family, orange accent). Everything is scoped under html[data-theme="dark"], so the light theme is untouched. The Syncfusion theme link is swapped separately to bootstrap5-dark.css by scripts/theme-switcher.js — Phase 2 (docs/dark-theme/plan-dark-theme.md, P2.1) formally adopted this runtime-swap mechanism (no bootstrap5.3 attribute-based theme exists for the installed Syncfusion.Blazor.Themes version); the rules here retint Syncfusion's generic dark greys to this palette and counter the hardcoded light-theme overrides in site.css / Navbar.razor. Palette values themselves live in tokens.css (--surface/--text/--border/ --accent/--status-*, light + dark) — load tokens.css before this file. ========================================================================== */ /* ------------------------------------------------------------------ page */ /* Blazor Server's built-in reconnection UI (#components-reconnect-modal) -- injected directly by blazor.server.js at runtime, not part of this app's markup/CSS at all, so it has never had any styling of its own here. Its background comes from the framework's own default (light, fixed), while its text inherited this app's dark-mode body color (light), producing near-invisible light-on-light text. data-theme is a plain attribute set independently of the SignalR circuit (theme-switcher.js's pre-paint script), so it's still correctly present even while the connection itself is down. */ html[data-theme="dark"] #components-reconnect-modal { background-color: var(--surface-raised) !important; color: var(--text) !important; } html[data-theme="dark"] body { background-color: var(--surface) !important; color: var(--text); /* Phase 9 P9.3: light text on a dark surface renders visibly heavier than the same weight on a light surface (a browser anti-aliasing artifact, not an actual font-weight change) -- most pronounced at this app's 12px Nunito Sans base size. Antialiased smoothing is the standard correction; scoped to dark mode only since light mode's dark-on-light text doesn't have this perceived-bolding effect. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html[data-theme="dark"] .main-content, html[data-theme="dark"] .main-part { background-color: var(--surface); } /* Gap G3 (2026-08-19, plan-dark-theme-gap-remediation.md Step 4): this used to be `html[data-theme="dark"] h1, ... p { color: var(--text); }`, specificity (0,1,2) -- higher than a typical component-scoped rule like `.unauthorized-card h1 { color: #0f172a; }` (0,1,1), so it silently overrode heading/paragraph color on screens the dark-theme rollout never touched, leaving them half-applied (text flipped, background unchanged). Wrapping the tag list in :where() drops this rule's specificity to that of the bare `html[data-theme="dark"]` prefix, so any component-scoped rule with at least a class now wins regardless of load order. */ html[data-theme="dark"] :where(h1, h2, h3, h4, h5, h6, label, p) { color: var(--text); } html[data-theme="dark"] a:not(.btn):not(.nb-nav-item):not(.nav-link) { color: var(--accent); } html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--surface-hover); border-radius: 5px; } /* --------------------------------------------------------- navbar chrome */ /* counters hardcoded #fff / slate greys in Navbar.razor's