/* ============================================================================ SFC Pulse dark theme — override layer for the prebuilt Tailwind app.css. Scoped under [data-theme="dark"] on ; every rule is more specific than the single-class utilities it overrides, so it wins without !important. The app uses a consistent utility vocabulary (bg-white cards, text-slate-* text, border-slate-* borders), so ~30 remaps flip the vast majority of UI. ========================================================================== */ /* smooth flip on the main surfaces */ [data-theme="dark"] body, [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-slate-50, [data-theme="dark"] .bg-slate-100 { transition: background-color .2s ease, border-color .2s ease, color .2s ease; } /* ---- page + surfaces ---- */ [data-theme="dark"] body { background-color:#0e1218; color:#c8d2df; } [data-theme="dark"] .bg-white { background-color:#161c26; } [data-theme="dark"] .bg-white\/95, [data-theme="dark"] .bg-white\/90, [data-theme="dark"] .bg-white\/80 { background-color:rgba(22,28,38,.92); } [data-theme="dark"] .bg-slate-50 { background-color:#1b2230; } [data-theme="dark"] .bg-slate-50\/60, [data-theme="dark"] .bg-slate-50\/40 { background-color:rgba(27,34,48,.6); } [data-theme="dark"] .bg-slate-100 { background-color:#212a38; } [data-theme="dark"] .bg-slate-200 { background-color:#2a3444; } [data-theme="dark"] .bg-\[\#f5f6fb\] { background-color:#0e1218; } /* ---- text ---- */ [data-theme="dark"] .text-slate-900 { color:#eaf0f8; } [data-theme="dark"] .text-slate-800 { color:#dbe3ee; } [data-theme="dark"] .text-slate-700 { color:#c4cedb; } [data-theme="dark"] .text-slate-600 { color:#aeb9c8; } [data-theme="dark"] .text-slate-500 { color:#94a1b2; } [data-theme="dark"] .text-slate-400 { color:#7b8899; } /* faint-hint tier: make it the dimmest muted grey (was #8a95a5, which read brighter than slate-400 above it), and map the two stray Tailwind gray-* hints onto the same tone. */ [data-theme="dark"] .text-slate-300, [data-theme="dark"] .text-gray-400, [data-theme="dark"] .text-gray-500 { color:#707c8b; } /* Global heading rule (h1–h4 forced to a branded dark blue with !important) — needs !important to flip. Light indigo keeps the heading's brand identity while staying readable on dark. */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color:#c3cffb !important; } [data-theme="dark"] .text-gray-600 { color:#aeb9c8; } [data-theme="dark"] .text-gray-500 { color:#94a1b2; } [data-theme="dark"] .text-gray-400 { color:#7b8899; } /* ---- borders + dividers ---- */ [data-theme="dark"] .border-slate-200 { border-color:#2b3442; } [data-theme="dark"] .border-slate-100 { border-color:#232c3a; } [data-theme="dark"] .border-slate-300 { border-color:#33404f; } [data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color:#232c3a; } [data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color:#2b3442; } /* ---- frozen first column (.stick1) — app.css hardcodes #fff / #f1f5f9 backgrounds so the sticky left column stays white on dark; repaint it to match the card + header ---- */ [data-theme="dark"] .stick1 thead th:first-child, [data-theme="dark"] .stick1 tfoot td:first-child { background:#1b2230; } [data-theme="dark"] .stick1 tbody td:first-child { background:#161c26; box-shadow:1px 0 0 #2b3442; } [data-theme="dark"] .stick1 tbody tr:hover td:first-child, [data-theme="dark"] .stick1 tbody tr[data-parent] td:first-child { background:#1f2836; } /* ---- hover states ---- */ [data-theme="dark"] .hover\:bg-slate-50:hover { background-color:#1f2836; } [data-theme="dark"] .hover\:bg-slate-100:hover { background-color:#26303f; } [data-theme="dark"] .hover\:bg-white:hover { background-color:#1c2331; } /* ---- accent (indigo) light tints ---- */ [data-theme="dark"] .bg-indigo-50 { background-color:#1e2340; } [data-theme="dark"] .hover\:bg-indigo-50:hover { background-color:#242a4a; } [data-theme="dark"] .text-indigo-700 { color:#a5b4fc; } [data-theme="dark"] .text-indigo-600 { color:#8b95f5; } /* ---- status light backgrounds (keep the hue, darken) ---- */ [data-theme="dark"] .bg-emerald-50 { background-color:#0f2a20; } [data-theme="dark"] .bg-green-50 { background-color:#0f2a1c; } [data-theme="dark"] .bg-rose-50 { background-color:#2c1620; } [data-theme="dark"] .bg-amber-50, [data-theme="dark"] .bg-amber-50\/60 { background-color:#2a2210; } [data-theme="dark"] .bg-red-50 { background-color:#2a1d10; } [data-theme="dark"] .bg-danger-50 { background-color:#2b1418; } [data-theme="dark"] .bg-sky-50 { background-color:#0e2532; } [data-theme="dark"] .bg-orange-50 { background-color:#2a1c10; } [data-theme="dark"] .border-amber-100 { border-color:#3a2f13; } [data-theme="dark"] .border-rose-200 { border-color:#432028; } [data-theme="dark"] .border-emerald-100 { border-color:#123a2a; } /* ---- status text: brighten one step so it reads on dark cards ---- */ [data-theme="dark"] .text-emerald-700 { color:#34d399; } [data-theme="dark"] .text-emerald-600 { color:#34d399; } [data-theme="dark"] .text-rose-700, [data-theme="dark"] .text-rose-600 { color:#fb7185; } [data-theme="dark"] .text-rose-800 { color:#fda4af; } [data-theme="dark"] .text-amber-700, [data-theme="dark"] .text-amber-800 { color:#fbbf24; } [data-theme="dark"] .text-red-600 { color:#fb923c; } /* red==orange in this theme */ [data-theme="dark"] .text-danger-700, [data-theme="dark"] .text-danger-600 { color:#f87171; } [data-theme="dark"] .text-orange-600 { color:#fb923c; } /* ---- form controls ---- */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background-color:#0f141c; color:#dbe3ee; border-color:#33404f; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color:#67717f; } [data-theme="dark"] option { background-color:#161c26; color:#dbe3ee; } /* ---- misc ---- */ [data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow-md { box-shadow:0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.4); } [data-theme="dark"] * { scrollbar-color:#3a4757 transparent; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background:#3a4757; } [data-theme="dark"] hr { border-color:#2b3442; } /* ── COMPLETENESS: every light status/accent background + dark colored text used in the app ── */ /* Light -100 backgrounds (badges, pills, chips, avatar) -> dark tint of the same hue */ [data-theme="dark"] .bg-amber-100 { background-color:#3a2f12; } [data-theme="dark"] .bg-emerald-100 { background-color:#123a2a; } [data-theme="dark"] .bg-green-100 { background-color:#123a20; } [data-theme="dark"] .bg-indigo-100 { background-color:#242c4e; } [data-theme="dark"] .bg-red-100, [data-theme="dark"] .bg-orange-100 { background-color:#3a2612; } [data-theme="dark"] .bg-rose-100 { background-color:#3a1a26; } [data-theme="dark"] .bg-sky-100 { background-color:#123241; } [data-theme="dark"] .bg-purple-100, [data-theme="dark"] .bg-violet-100 { background-color:#2a2148; } [data-theme="dark"] .bg-indigo-200 { background-color:#2e3860; } [data-theme="dark"] .bg-slate-200 { background-color:#2a3444; } /* Dark colored text (600–900, every hue used) -> a bright readable shade of the same hue */ [data-theme="dark"] .text-indigo-600, [data-theme="dark"] .text-indigo-700, [data-theme="dark"] .text-indigo-800, [data-theme="dark"] .text-indigo-900, [data-theme="dark"] .text-blue-600, [data-theme="dark"] .text-blue-700 { color:#a5b4fc; } [data-theme="dark"] .text-emerald-600, [data-theme="dark"] .text-emerald-700, [data-theme="dark"] .text-emerald-800 { color:#34d399; } [data-theme="dark"] .text-green-600, [data-theme="dark"] .text-green-700, [data-theme="dark"] .text-green-800 { color:#4ade80; } [data-theme="dark"] .text-rose-600, [data-theme="dark"] .text-rose-700, [data-theme="dark"] .text-rose-800 { color:#fb7185; } [data-theme="dark"] .text-red-600, [data-theme="dark"] .text-red-700, [data-theme="dark"] .text-red-800, [data-theme="dark"] .text-orange-600, [data-theme="dark"] .text-orange-700, [data-theme="dark"] .text-orange-800 { color:#fb923c; } [data-theme="dark"] .text-amber-600, [data-theme="dark"] .text-amber-700, [data-theme="dark"] .text-amber-800, [data-theme="dark"] .text-amber-900 { color:#fbbf24; } [data-theme="dark"] .text-sky-600, [data-theme="dark"] .text-sky-700, [data-theme="dark"] .text-sky-800 { color:#38bdf8; } [data-theme="dark"] .text-purple-600, [data-theme="dark"] .text-purple-700, [data-theme="dark"] .text-purple-800, [data-theme="dark"] .text-violet-700 { color:#c4b5fd; } [data-theme="dark"] .text-teal-600, [data-theme="dark"] .text-teal-700 { color:#2dd4bf; } [data-theme="dark"] .text-danger-600, [data-theme="dark"] .text-danger-700 { color:#f87171; } /* ── KPI icon chips + big numbers (inline light styles → dark tints; needs !important to beat the inline style attribute) ── */ [data-theme="dark"] .kpi-chip[data-hue="indigo"] { background:#242c4e !important; color:#a5b4fc !important; } [data-theme="dark"] .kpi-chip[data-hue="orange"] { background:#3a2612 !important; color:#fb923c !important; } [data-theme="dark"] .kpi-chip[data-hue="teal"] { background:#0f2e2a !important; color:#2dd4bf !important; } [data-theme="dark"] .kpi-chip[data-hue="purple"] { background:#2a2148 !important; color:#c4b5fd !important; } [data-theme="dark"] .kpi-chip[data-hue="blue"] { background:#1e2340 !important; color:#93b4fc !important; } [data-theme="dark"] .kpi-num[data-hue="indigo"] { color:#a5b4fc !important; } [data-theme="dark"] .kpi-num[data-hue="orange"] { color:#fb923c !important; } [data-theme="dark"] .kpi-num[data-hue="teal"] { color:#2dd4bf !important; } [data-theme="dark"] .kpi-num[data-hue="purple"] { color:#c4b5fd !important; } [data-theme="dark"] .kpi-num[data-hue="blue"] { color:#93b4fc !important; } /* theme-toggle button glyphs: show the icon for the OTHER mode */ #themeToggle .sun { display:none; } [data-theme="dark"] #themeToggle .sun { display:inline; } [data-theme="dark"] #themeToggle .moon { display:none; }