/* * Dark mode (added 2026-08-31) — a global override stylesheet, NOT a per-page redesign. * * How this works: every page in the Hub already uses a small, consistent set of Tailwind * utility classes (bg-white, text-zinc-900, border-zinc-200, etc.) instead of one-off inline * styles. Rather than editing every .cshtml view to add `dark:` variants (a huge undertaking * across 85+ files), this file re-targets those SAME class names directly with a `html.dark` * ancestor selector — so toggling one class on re-skins the entire app at once, with * zero view-file changes. `!important` on every rule guarantees these always beat Tailwind's * own (non-!important) utility classes regardless of injection order, since Tailwind's CDN * script keeps generating/injecting CSS reactively as new classes appear in the DOM. * * Palette: deep charcoal background (#09090b, literally Tailwind's own zinc-950), a single * sky-blue accent for CTAs/active states (swapped in from the user's original "amber" request * after feedback — same luxury-minimal structure, different accent hue), zinc-100 headers, * zinc-400 body text, subtle ambient radial glows, no purple/pink (that's a possible future * "theme" option, not part of this rollout). * * Loaded after custom.css in _Layout.cshtml. Toggled via the header's dark-mode button * (wwwroot/js/custom.js, initDarkMode()) which adds/removes `dark` on and persists * the choice in localStorage — same pattern already used for sidebar-collapsed/header-collapsed. */ /* ── Design tokens (kept here as CSS custom properties for anything added later) ── */ html.dark { --dark-bg: #09090b; --dark-surface: #131316; --dark-surface-recessed: #0c0c0e; --dark-fill: #1c1c1f; --dark-fill-strong: #242427; --dark-border: #26262a; --dark-border-soft: #1a1a1d; --dark-border-strong: #333338; --dark-text-heading: #f4f4f5; --dark-text-body: #a1a1aa; --dark-text-faint: #52525b; --dark-accent: #38bdf8; --dark-accent-solid: #0284c7; --dark-accent-hover: #0ea5e9; /* Feeds custom.css's app-wide input/select/textarea focus ring — see the comment there for why this is a variable instead of a hardcoded color now. */ --focus-accent: var(--dark-accent); --focus-ring: rgb(56 189 248 / 0.25); /* Tells the browser this whole subtree prefers a dark UI — the real hook (beyond just styling our own elements) for native browser chrome the app can't restyle directly: date/time picker popups, form-fill highlight color, autofill, the default scrollbar track color on non-Chromium engines. Belt-and-suspenders alongside the more targeted per-input rule further down (some browsers only consult the nearest element, others walk up to the document) — see the date/time-picker section below for the bug this fixes. */ color-scheme: dark; } /* Safety-net default text color — catches the rare element with no explicit text-* class at all (inherits from body otherwise, e.g. the "AScend" wordmark on the standalone Login page, which stayed near-invisible dark-on-dark until this was added). Anything with its own text-zinc-* class still wins via the more specific rules below. */ html.dark body { color: var(--dark-text-heading); } /* ── Page background + ambient glow (body only — cards below get a flat elevated tone) ── */ html.dark body.bg-white { background-color: var(--dark-bg) !important; background-image: radial-gradient(circle at 12% -10%, rgba(56, 189, 248, 0.07), transparent 45%), radial-gradient(circle at 90% 110%, rgba(2, 132, 199, 0.06), transparent 45%); background-attachment: fixed; } /* ── Surfaces ── */ html.dark .bg-white { background-color: var(--dark-surface) !important; } html.dark .bg-zinc-50 { background-color: var(--dark-surface-recessed) !important; } html.dark .bg-zinc-100 { background-color: var(--dark-fill) !important; } html.dark .bg-zinc-200 { background-color: var(--dark-fill-strong) !important; } /* bg-zinc-700/800/900 are the app's "primary dark" surface — used for CTA buttons, the active sidebar pill, the notification badge, and the profile avatar circle. On an already-dark page a near-black button disappears, so these become the single accent color instead — this is also exactly the "one accent for CTAs/active states" the luxury brief asked for, just satisfied via the existing classes instead of new dark: variants. */ html.dark .bg-zinc-900 { background-color: var(--dark-accent-solid) !important; } html.dark .bg-zinc-700, html.dark .bg-zinc-800 { background-color: var(--dark-accent-hover) !important; } html.dark .bg-black { background-color: #000000 !important; } html.dark .bg-transparent { background-color: transparent !important; } /* Opacity-modified surfaces (Tailwind escapes "/" as "\/" in the generated class name) */ html.dark .bg-zinc-50\/40, html.dark .bg-zinc-50\/50, html.dark .bg-zinc-50\/60 { background-color: rgba(14, 165, 233, 0.06) !important; } html.dark .bg-zinc-200\/60 { background-color: rgba(14, 165, 233, 0.12) !important; } html.dark .bg-zinc-900\/40 { background-color: rgba(0, 0, 0, 0.55) !important; } /* modal backdrops */ /* ── Text ── */ /* Headers/prominent text — spec: "headers must be zinc-100" */ html.dark .text-zinc-700, html.dark .text-zinc-800, html.dark .text-zinc-900 { color: var(--dark-text-heading) !important; } /* Body/secondary text — spec: "body text must be zinc-400" */ html.dark .text-zinc-500, html.dark .text-zinc-600 { color: var(--dark-text-body) !important; } /* Faintest tier (placeholders, tiny labels) — was already the dimmest tone in light mode */ html.dark .text-zinc-300, html.dark .text-zinc-400 { color: var(--dark-text-faint) !important; } html.dark .placeholder\:text-zinc-400::placeholder { color: var(--dark-text-faint) !important; } /* text-white and the saturated 400/500-shade icon colors (IconColorMap etc.) are left untouched on purpose — they already read as vivid accent pops against a dark background without any change, which is exactly the desired "luxury dark" look. */ /* ── Borders / rings / dividers ── */ html.dark .border-zinc-100 { border-color: var(--dark-border-soft) !important; } /* Real bug caught via screenshot (Attendance's row dividers looking bright/thick instead of a subtle hairline): Tailwind's `divide-y`/`divide-zinc-100` utilities don't apply border-color to the `.divide-zinc-100` element itself — they apply it to `.divide-zinc-100 > :not([hidden]) ~ :not([hidden])` (every child but the first). The old plain `.divide-zinc-100 { border-color: ... }` rule above therefore targeted an element Tailwind's own generated CSS never touches, so it could never actually win — divider rows silently kept the light-mode zinc-100 color (near-white) in dark mode regardless of `!important`. Fixed by matching Tailwind's own selector shape exactly. Affects every `divide-y divide-zinc-100` list/table in the app (Attendance, Aging Metrics, System Settings, CAPA Dashboard/Responsible Users, Biometrics Logs/Devices, the Home activity list, Purchase Order Masterlist, every History panel), not just the one that got reported. */ html.dark .divide-zinc-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dark-border-soft) !important; } html.dark .border-zinc-200 { border-color: var(--dark-border) !important; } html.dark .border-zinc-300 { border-color: var(--dark-border-strong) !important; } html.dark .border-zinc-500 { border-color: #45454b !important; } /* border-zinc-400 is almost always a `focus:border-zinc-400` state — turning that into the accent color gives every input a soft accent glow on focus, a free "smooth micro-interaction". */ html.dark .border-zinc-400 { border-color: var(--dark-accent) !important; } /* border-zinc-900 marks an active/selected state (e.g. the underlined active sub-tab) — same accent treatment as the bg-zinc-900 buttons/pills above, for the same reason. */ html.dark .border-zinc-900 { border-color: var(--dark-accent-solid) !important; } html.dark .ring-zinc-100 { --tw-ring-color: rgba(255, 255, 255, 0.08) !important; } html.dark .ring-zinc-500\/10 { --tw-ring-color: rgba(56, 189, 248, 0.18) !important; } html.dark .ring-zinc-900\/10 { --tw-ring-color: rgba(56, 189, 248, 0.25) !important; } /* ── Status/badge colors (bg-{c}-50 text-{c}-700 ring-{c}-600/20 pattern) ── The pale -50 background and dark -700/-800 text that read fine on white go nearly invisible or muddy on #09090b, so each gets a translucent tint + a brighter text shade instead. The already-vivid -400/-500 text/icon shades elsewhere are left alone (see note above). */ html.dark .bg-amber-50, html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.14) !important; } html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-800 { color: #fbbf24 !important; } html.dark .border-amber-200, html.dark .border-amber-300 { border-color: rgba(245, 158, 11, 0.35) !important; } html.dark .bg-amber-50\/40 { background-color: rgba(245, 158, 11, 0.08) !important; } html.dark .bg-amber-50\/30 { background-color: rgba(245, 158, 11, 0.06) !important; } html.dark .bg-amber-100\/40 { background-color: rgba(245, 158, 11, 0.08) !important; } html.dark .bg-amber-50\/60 { background-color: rgba(245, 158, 11, 0.12) !important; } html.dark .bg-blue-50, html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.14) !important; } html.dark .text-blue-600, html.dark .text-blue-700, html.dark .text-blue-800 { color: #60a5fa !important; } html.dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.35) !important; } html.dark .bg-emerald-50, html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.14) !important; } html.dark .text-emerald-600, html.dark .text-emerald-700, html.dark .text-emerald-800 { color: #34d399 !important; } html.dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.35) !important; } html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.14) !important; } html.dark .text-indigo-600 { color: #818cf8 !important; } html.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.14) !important; } html.dark .text-orange-600, html.dark .text-orange-700 { color: #fb923c !important; } html.dark .border-orange-200, html.dark .border-orange-400 { border-color: rgba(249, 115, 22, 0.35) !important; } html.dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.14) !important; } html.dark .text-purple-700 { color: #c084fc !important; } html.dark .bg-red-50, html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.14) !important; } html.dark .text-red-600, html.dark .text-red-700 { color: #f87171 !important; } html.dark .border-red-200, html.dark .border-red-300, html.dark .border-red-400 { border-color: rgba(239, 68, 68, 0.35) !important; } html.dark .bg-red-50\/40 { background-color: rgba(239, 68, 68, 0.08) !important; } html.dark .bg-rose-50 { background-color: rgba(244, 63, 94, 0.14) !important; } html.dark .text-rose-600 { color: #fb7185 !important; } html.dark .bg-sky-50 { background-color: rgba(14, 165, 233, 0.14) !important; } html.dark .text-sky-600 { color: #38bdf8 !important; } html.dark .bg-teal-50 { background-color: rgba(20, 184, 166, 0.14) !important; } html.dark .text-teal-600, html.dark .text-teal-700 { color: #2dd4bf !important; } html.dark .bg-violet-50 { background-color: rgba(139, 92, 246, 0.14) !important; } html.dark .text-violet-600, html.dark .text-violet-700 { color: #a78bfa !important; } /* ── Hover / focus state variants ── Tailwind compiles `hover:bg-zinc-50` to a DISTINCT selector, `.hover\:bg-zinc-50:hover` — none of the plain `.bg-zinc-50` etc. rules above match it. This section was added after a real bug caught via an actual screenshot test: the dark-mode toggle button itself rendered as a stray light-gray box, because its `hover:bg-zinc-100` state was still using the light value while everything else had already gone dark. `focus:border-zinc-400` alone is used on nearly every text input across every module (this is the app's one standard input style), so this section matters as much as the base rules above, not just as a hover nicety. */ /* Hover backgrounds — every neutral "zinc" hover (regardless of exact shade/opacity Tailwind class) gets the same translucent accent-blue tint instead of a gray wash, per user feedback: a flat light-gray hover was measurably low-contrast against light hover text (see below) and looked inconsistent with the accent-driven rest of the theme — one blue tint, used at two strengths (subtle for table rows, a bit stronger for the sidebar), reads better and matches the same blue already used for the active/selected state. */ html.dark .hover\:bg-zinc-50:hover, html.dark .hover\:bg-zinc-100:hover, html.dark .hover\:bg-zinc-200:hover, html.dark .hover\:bg-zinc-50\/40:hover, html.dark .hover\:bg-zinc-50\/50:hover, html.dark .hover\:bg-zinc-50\/60:hover { background-color: rgba(14, 165, 233, 0.09) !important; } /* hover:bg-zinc-200/60 is specifically the sidebar/nav-link hover (see LinkCls in _Layout.cshtml) — a real contrast bug caught from a screenshot: the light-gray wash this used to render as (zinc-200 at 60% alpha) measured well under WCAG AA against the light hover text on top. A darker, on-brand accent tint fixes both the look and the contrast. */ html.dark .hover\:bg-zinc-200\/60:hover { background-color: rgba(14, 165, 233, 0.16) !important; } /* `has-[:checked]:bg-zinc-50`/`bg-zinc-100` — same root cause as the hover section above (Tailwind compiles it to its own distinct selector the plain .bg-zinc-* rules don't match), caught 2026-09-02: every "selectable card" built from a