/* ============================================================================ * Dark theme for the Unified Dashboard. * * Approach: the UI is built from hard-coded Tailwind utility classes (bg-white, * text-slate-*, border-slate-*, accent-*-50 pills). Rather than retrofit `dark:` * variants across ~4000 lines of markup, we override just the palette the app * actually uses, scoped under `html.dark`. `.dark .bg-white` (specificity 0,2,0) * out-ranks Tailwind's `.bg-white` (0,1,0), so no `!important` is needed. * * `dark` is toggled on by app.js (persisted in localStorage; defaults to * the OS preference) and applied pre-paint by an inline script in . * The left sidebar is already dark in both themes and uses its own classes * (bg-slate-900 / bg-white/10), so it is intentionally untouched here. * ==========================================================================*/ :root { color-scheme: light; } html.dark { color-scheme: dark; /* native form controls, scrollbars, date pickers */ } /* ---- Page + surfaces (depth ramp: page → card → raised) ---- */ html.dark body { background-color: #0f172a; } .dark .bg-white { background-color: #1e293b; } /* cards, header, inputs */ .dark .bg-slate-50 { background-color: #0f172a; } /* page-level / recessed fills */ .dark .bg-slate-100 { background-color: #1e2637; } /* subtle fills, segmented nav */ .dark .bg-slate-200 { background-color: #334155; } .dark .bg-slate-300 { background-color: #475569; } /* ---- Text (primary → muted) ---- */ .dark .text-slate-900 { color: #f1f5f9; } .dark .text-slate-800 { color: #eef2f7; } .dark .text-slate-700 { color: #dbe3ec; } .dark .text-slate-600 { color: #cbd5e1; } .dark .text-slate-500 { color: #94a3b8; } .dark .text-slate-400 { color: #7c8ba1; } .dark .text-slate-300 { color: #64748b; } /* ---- Borders + dividers ---- */ .dark .border-slate-100 { border-color: #22304a; } .dark .border-slate-200 { border-color: #334155; } .dark .border-slate-300 { border-color: #46566d; } .dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #22304a; } .dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #334155; } /* ---- Form controls ---- */ .dark input, .dark select, .dark textarea { background-color: #1e293b; color: #f1f5f9; border-color: #334155; } .dark ::placeholder { color: #64748b; } /* ---- Accent pills (bg-*-50/100): dark tint + lightened accent text ---- */ .dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.16); } .dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.24); } .dark .text-indigo-700 { color: #a5b4fc; } .dark .text-indigo-600 { color: #a5b4fc; } .dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.16); } .dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.24); } .dark .text-emerald-700 { color: #6ee7b7; } .dark .text-emerald-600 { color: #6ee7b7; } .dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.16); } .dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.24); } .dark .text-red-700 { color: #fca5a5; } .dark .text-red-600 { color: #fca5a5; } .dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.16); } .dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.24); } .dark .text-amber-700 { color: #fcd34d; } .dark .text-amber-600 { color: #fcd34d; } /* Deeper amber rungs are used for warning-banner headings/body (e.g. the roster review card's "Identity matching degraded" notice). Unmapped they render as near-black on the dark amber tint, so give them the same lightened treatment. */ .dark .text-amber-800 { color: #fcd34d; } .dark .text-amber-900 { color: #fde68a; } /* Orange = Anthropic/Claude accent (active tenant, sub-tab pill, primary actions). Historically the app used indigo/emerald/amber, so orange had no dark mapping — the tenant switcher, context banner and Claude actions need one to stay readable in dark. */ .dark .bg-orange-50 { background-color: rgba(234, 88, 12, 0.16); } .dark .bg-orange-100 { background-color: rgba(234, 88, 12, 0.24); } .dark .text-orange-700 { color: #fdba74; } .dark .text-orange-600 { color: #fdba74; } .dark .border-orange-100 { border-color: rgba(234, 88, 12, 0.28); } .dark .border-orange-200 { border-color: rgba(234, 88, 12, 0.35); } .dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.16); } .dark .text-blue-700 { color: #93c5fd; } .dark .bg-violet-50 { background-color: rgba(139, 92, 246, 0.16); } .dark .text-violet-700 { color: #c4b5fd; } .dark .bg-green-50 { background-color: rgba(16, 185, 129, 0.16); } .dark .text-green-700 { color: #6ee7b7; } /* Accent hairlines. Same reasoning as the orange rungs above: unmapped, a `border-*-200` stays at its LIGHT value and paints a bright pastel hairline on a dark tint. The Access Review include/exclude chips and the "Admin" access marker are bordered accent pills, so give indigo/red/amber the orange treatment. */ .dark .border-indigo-200 { border-color: rgba(99, 102, 241, 0.35); } .dark .border-red-200 { border-color: rgba(239, 68, 68, 0.35); } .dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.35); } .dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.35); } /* The `-100` rung is the same trap one step lighter, and it is what the roster review card's summary tiles use (`bg-emerald-50 border-emerald-100`). Unmapped, the "New (will add)" and "Would offboard" tiles drew a near-white pastel hairline around a dark tint while their slate siblings drew a correct dark one — the row of tiles looked broken in dark mode. Map them a rung fainter than the `-200` values. */ .dark .border-emerald-100 { border-color: rgba(16, 185, 129, 0.28); } .dark .border-amber-100 { border-color: rgba(245, 158, 11, 0.28); } /* Violet is the Chargeback Activity table's "CSV commit" event tag — the one event that is about a FILE rather than a typed figure, so it needs a colour none of the money events uses. `bg-violet-50` / `text-violet-700` were already mapped above; the tag is a BORDERED pill like its four siblings, and an unmapped `border-violet-200` would draw the light #ddd6fe hairline around a dark tint — the same trap the block above documents. */ .dark .border-violet-200 { border-color: rgba(139, 92, 246, 0.35); } /* Deeper accent rungs used as the PRIMARY label on an accent tint — the Users tool picker's tri-state rows put the tool name at `-800` and its "Must have" / "Must not have" tag at `-600`, so the name must read brighter than the tag. Unmapped, `-800` keeps its light value (#065f46 / #991b1b) and goes near-black on the dark tint. Map to the `-200` rung so the name out-ranks the `-600` tag (#6ee7b7 / #fca5a5) instead of colliding with it. The `-500` rung is the chip's dismiss glyph, deliberately dimmer than the state glyph beside it. */ .dark .text-emerald-800 { color: #a7f3d0; } .dark .text-red-800 { color: #fecaca; } /* Same rule for indigo: the tool picker's "Only these tools" switch puts its heading at `-800` over the `bg-indigo-50` tint, with the explanatory line under it at `-600` (#a5b4fc). Unmapped, `-800` keeps its light value #3730a3 and goes near-black on the dark tint; mapping it to the `-200` rung also keeps the heading brighter than the sentence beneath it instead of both landing on the same #a5b4fc. */ .dark .text-indigo-800 { color: #c7d2fe; } .dark .text-emerald-500 { color: #34d399; } .dark .text-red-500 { color: #f87171; } /* ---- Hover states that assume a light surface ---- */ /* Tailwind emits each hover variant as its OWN class (`.hover\:bg-indigo-100:hover`), so the solid `.dark .bg-indigo-100` override above does NOT match it — the same trap as the opacity variants below. Left unmapped, an accent chip's hover paints the LIGHT `#e0e7ff` under text that dark mode has already lightened to `#a5b4fc`: light-on-light, ~1.6:1, the label disappears under the pointer. Map the accent hovers to the same tint the non-hover rung uses, one step stronger. */ .dark .hover\:bg-slate-50:hover { background-color: #172033; } .dark .hover\:bg-slate-100:hover { background-color: #1e2637; } .dark .hover\:bg-white:hover { background-color: #1e293b; } .dark .hover\:bg-indigo-50:hover { background-color: rgba(99, 102, 241, 0.24); } .dark .hover\:bg-indigo-100:hover { background-color: rgba(99, 102, 241, 0.32); } .dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.24); } .dark .hover\:bg-red-100:hover { background-color: rgba(239, 68, 68, 0.32); } /* Same trap for the tool picker's green rows: an unmapped `hover:bg-emerald-100` paints the LIGHT #d1fae5 under a name dark mode has lightened to #a7f3d0 — the row's label vanishes under the pointer. */ .dark .hover\:bg-emerald-50:hover { background-color: rgba(16, 185, 129, 0.24); } .dark .hover\:bg-emerald-100:hover { background-color: rgba(16, 185, 129, 0.32); } .dark .hover\:bg-amber-50:hover { background-color: rgba(245, 158, 11, 0.24); } .dark .hover\:bg-amber-100:hover { background-color: rgba(245, 158, 11, 0.32); } /* ---- Custom components from index.html's inline