/* ============================================================ Dark theme overrides for the admin panel. The panel is built with Tailwind utility classes, so instead of rewriting hundreds of elements we repaint those utilities when carries .dark. Purely additive — no markup changes. ============================================================ */ html.dark { color-scheme: dark; } /* --- surfaces --- */ html.dark body { background: #0B1220; color: #E9F0FA; } html.dark .bg-slate-100 { background-color: #0B1220 !important; } html.dark .bg-white { background-color: #131F38 !important; } html.dark .bg-slate-50 { background-color: #16223C !important; } html.dark .bg-slate-50\/60 { background-color: rgba(22,34,60,.6) !important; } html.dark .bg-slate-200 { background-color: #1E2D4A !important; } html.dark .bg-slate-300 { background-color: #24365A !important; } html.dark .bg-slate-900 { background-color: #070D18 !important; } html.dark .bg-slate-900\/30 { background-color: rgba(7,13,24,.55) !important; } /* --- borders / rings / dividers --- */ html.dark .border-slate-200 { border-color: #22304E !important; } html.dark .border-slate-100 { border-color: #1C2941 !important; } html.dark .border-slate-50 { border-color: #1A2740 !important; } html.dark .ring-slate-200 { --tw-ring-color: #22304E !important; } html.dark .ring-slate-100 { --tw-ring-color: #1C2941 !important; } html.dark .divide-slate-50 > :not([hidden]) ~ :not([hidden]) { border-color: #1A2740 !important; } html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1C2941 !important; } /* --- text --- */ html.dark .text-slate-900 { color: #E9F0FA !important; } html.dark .text-slate-800 { color: #DCE6F5 !important; } html.dark .text-slate-700 { color: #C7D5EA !important; } html.dark .text-slate-600 { color: #A9BBD6 !important; } html.dark .text-slate-500 { color: #8CA0C0 !important; } html.dark .text-slate-400 { color: #7387A8 !important; } html.dark .text-slate-300 { color: #64789A !important; } /* --- accent tints: keep the hue, drop the brightness --- */ html.dark .bg-indigo-50 { background-color: rgba(99,102,241,.16) !important; } html.dark .bg-emerald-50 { background-color: rgba(16,185,129,.14) !important; } html.dark .bg-red-50 { background-color: rgba(239,68,68,.14) !important; } html.dark .bg-amber-50 { background-color: rgba(245,158,11,.14) !important; } html.dark .bg-emerald-100 { background-color: rgba(16,185,129,.2) !important; } html.dark .bg-indigo-100 { background-color: rgba(99,102,241,.22) !important; } html.dark .text-indigo-700, html.dark .text-indigo-600 { color: #A5B4FC !important; } html.dark .text-emerald-700, html.dark .text-emerald-600 { color: #6EE7B7 !important; } html.dark .text-red-700, html.dark .text-red-600 { color: #FCA5A5 !important; } html.dark .text-amber-700, html.dark .text-amber-600 { color: #FCD34D !important; } html.dark .border-indigo-300 { border-color: rgba(99,102,241,.45) !important; } html.dark .border-emerald-300 { border-color: rgba(16,185,129,.42) !important; } html.dark .border-red-300 { border-color: rgba(239,68,68,.42) !important; } html.dark .border-amber-300 { border-color: rgba(245,158,11,.42) !important; } /* --- hover states --- */ html.dark .hover\:bg-slate-50:hover { background-color: #1B2842 !important; } html.dark .hover\:bg-slate-100:hover { background-color: #1E2D4A !important; } html.dark .hover\:bg-slate-200:hover { background-color: #24365A !important; } html.dark .hover\:bg-indigo-50:hover { background-color: rgba(99,102,241,.24) !important; } html.dark .hover\:bg-emerald-100:hover { background-color: rgba(16,185,129,.26) !important; } html.dark .hover\:bg-red-100:hover { background-color: rgba(239,68,68,.24) !important; } html.dark .hover\:bg-slate-50\/60:hover { background-color: rgba(27,40,66,.75) !important; } /* --- form controls: Tailwind doesn't reach these --- */ html.dark input, html.dark select, html.dark textarea { background-color: #16223C !important; border-color: #22304E !important; color: #E9F0FA !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #6B7F9F !important; } html.dark option { background: #16223C; color: #E9F0FA; } /* --- app chrome --- */ html.dark .sidebar, html.dark aside { background-color: #070D18 !important; } html.dark .table-wrap { background: transparent; } html.dark ::-webkit-scrollbar-track { background: #0F1A2E; } html.dark ::-webkit-scrollbar-thumb { background: #2A3B5C; } html.dark ::-webkit-scrollbar-thumb:hover { background: #3A4E75; } /* --- Leaflet reads as a bright rectangle otherwise --- */ html.dark .leaflet-container { background: #0B1220 !important; } html.dark .leaflet-popup-content-wrapper, html.dark .leaflet-popup-tip { background: #16223C !important; color: #E9F0FA !important; } html.dark .leaflet-bar a { background: #16223C !important; color: #E9F0FA !important; border-color: #22304E !important; } html.dark .leaflet-bar a:hover { background: #22304E !important; } /* dim raster tiles so a light basemap doesn't glare in dark mode */ html.dark .leaflet-tile-pane { filter: brightness(.72) contrast(1.05); } /* --- theme toggle button: show the icon for the theme you'd switch TO --- */ .theme-ico-dark { display: none; } html.dark .theme-ico-dark { display: inline; } html.dark .theme-ico-light { display: none; } /* --- theme toggle button ------------------------------------------------- */ .theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; cursor: pointer; background: #fff; color: #64748b; border: 1px solid #e2e8f0; transition: background .15s, color .15s; } .theme-btn:hover { background: #f1f5f9; color: #334155; } html.dark .theme-btn { background: #182744; color: #FCD34D; border-color: #22304E; } html.dark .theme-btn:hover { background: #22304E; }