/* ── Dark mode overrides ──────────────────────────────────────────────────── Applied when is set by theme-init.js. Uses !important to override Tailwind CDN's generated styles. Color scale: Slate (900 → page, 800 → surface, 700 → elevated, 600 → border) ─────────────────────────────────────────────────────────────────────────── */ html.dark { color-scheme: dark; } /* ── Base ── */ html.dark body { background-color: #0f172a; } html.dark .bg-gradient-to-br { background: #0f172a !important; } /* ── Backgrounds ── */ html.dark .bg-gray-50 { background-color: #0f172a !important; } html.dark .bg-white { background-color: #1e293b !important; } html.dark .bg-gray-100 { background-color: #334155 !important; } /* ── Text ── */ html.dark .text-gray-900 { color: #f1f5f9 !important; } html.dark .text-gray-800 { color: #e2e8f0 !important; } html.dark .text-gray-700 { color: #cbd5e1 !important; } html.dark .text-gray-600 { color: #94a3b8 !important; } html.dark .text-gray-500 { color: #64748b !important; } html.dark .text-gray-400 { color: #475569 !important; } /* ── Borders ── */ html.dark .border-gray-100 { border-color: #1e293b !important; } html.dark .border-gray-200 { border-color: #334155 !important; } html.dark .border-gray-300 { border-color: #475569 !important; } html.dark .border-dashed { border-color: #334155 !important; } html.dark .border-b { border-color: #1e293b !important; } html.dark .border-r { border-color: #1e293b !important; } html.dark .border-t { border-color: #1e293b !important; } /* ── Inputs ── */ html.dark input:not([type="checkbox"]), html.dark select, html.dark textarea { background-color: #334155 !important; border-color: #475569 !important; color: #f1f5f9 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #475569 !important; } /* ── Hover states ── */ html.dark .hover\:bg-gray-50:hover { background-color: #1e293b !important; } html.dark .hover\:bg-gray-100:hover { background-color: #334155 !important; } html.dark .hover\:text-gray-900:hover { color: #f1f5f9 !important; } /* ── Indigo tints (active nav, info, avatar bg) ── */ html.dark .bg-indigo-50 { background-color: #1e1b4b !important; } html.dark .bg-indigo-100 { background-color: #312e81 !important; } html.dark .text-indigo-700 { color: #a5b4fc !important; } html.dark .text-indigo-600 { color: #818cf8 !important; } html.dark .hover\:bg-indigo-100:hover { background-color: #312e81 !important; } /* ── Info box (blue) ── */ html.dark .bg-blue-50 { background-color: #0c1a2e !important; } html.dark .bg-blue-100 { background-color: #0c1a2e !important; } html.dark .text-blue-800 { color: #93c5fd !important; } /* ── Error box ── */ html.dark .bg-red-50 { background-color: #1f0a0a !important; } html.dark .border-red-200 { border-color: #7f1d1d !important; } html.dark .text-red-800 { color: #fca5a5 !important; } html.dark .text-red-600 { color: #f87171 !important; } html.dark .hover\:bg-red-50:hover { background-color: #2d0f0f !important; } /* ── Status badges ── */ html.dark .bg-amber-100 { background-color: #3d1f00 !important; } html.dark .text-amber-800 { color: #fbbf24 !important; } html.dark .bg-orange-100 { background-color: #3d1500 !important; } html.dark .text-orange-800 { color: #fb923c !important; } html.dark .bg-emerald-100 { background-color: #022c22 !important; } html.dark .text-emerald-800 { color: #34d399 !important; } /* ── Table ── */ html.dark thead { background-color: #1e293b !important; } /* ── Dividers ── */ html.dark .divide-y > * + * { border-color: #1e293b !important; } html.dark .divide-gray-100 > * + * { border-color: #1e293b !important; } /* ── Shadows ── */ html.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,.5) !important; } html.dark .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,.6) !important; } html.dark .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,.7) !important; } /* ── Scrollbar ── */ html.dark ::-webkit-scrollbar { width: 6px; height: 6px; } html.dark ::-webkit-scrollbar-track { background: #1e293b; } html.dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }