/* dark-mode.css — gedeelde donkere modus voor login.html, admin.html en super-admin.html (het "backend"-deel dat jij en je restaurants gebruiken). Bewuste keuze: widget.html (de publieke boekingswidget) krijgt GEEN donkere modus. Die widget wordt ingebed op de website van het restaurant zelf en volgt hun eigen huisstijl (styling-instellingen) — een los te schakelen dark/light-modus daarin zou juist inconsistent aanvoelen met de rest van hun site. Techniek: i.p.v. overal los `dark:`-Tailwind-varianten toe te voegen aan honderden bestaande elementen, overschrijven we hier de bestaande utility-classes onder de `.dark`-klasse op . Dat is minder "puur", maar wél haalbaar om in één keer compleet en consistent te maken op een bestaande, al geschreven codebase. */ html.dark body { background-color: #0f172a !important; color: #e2e8f0; } /* Kaarten en panelen die normaal wit/lichtgrijs zijn */ html.dark .bg-white { background-color: #1e293b !important; } html.dark .bg-slate-50 { background-color: #0f172a !important; } html.dark .bg-slate-100 { background-color: #1e293b !important; } html.dark .bg-slate-200 { background-color: #334155 !important; } html.dark .bg-slate-600 { background-color: #475569 !important; } html.dark .bg-slate-700 { background-color: #1e293b !important; } /* Randen */ html.dark .border, html.dark .border-slate-100, html.dark .border-slate-200 { border-color: #334155 !important; } html.dark .border-slate-600 { border-color: #475569 !important; } html.dark .border-slate-800 { border-color: #1e293b !important; } html.dark .divide-y > * + * { border-color: #334155 !important; } /* Tekstkleuren op lichte kaarten */ html.dark .text-slate-900 { color: #f1f5f9 !important; } html.dark .text-slate-800 { color: #e2e8f0 !important; } html.dark .text-slate-700 { color: #cbd5e1 !important; } html.dark .text-slate-600 { color: #94a3b8 !important; } html.dark .text-slate-500 { color: #94a3b8 !important; } html.dark .text-slate-400 { color: #64748b !important; } /* text-slate-300 blijft ongemoeid: die wordt alleen gebruikt als lichte tekst BINNEN de altijd-donkere tijdlijn-kaartjes, niet op witte kaarten. */ /* Formuliervelden */ html.dark input, html.dark select, html.dark textarea { background-color: #0f172a !important; color: #e2e8f0 !important; border-color: #334155 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b !important; } html.dark input:disabled, html.dark select:disabled { opacity: 0.6; } /* Statuskleuren-badges — iets gedempter maar met behoud van betekenis */ html.dark .bg-blue-50 { background-color: #1e3a5f !important; } html.dark .text-blue-700, html.dark .text-blue-600 { color: #93c5fd !important; } html.dark .bg-emerald-50 { background-color: #064e3b !important; } html.dark .bg-emerald-100 { background-color: #065f46 !important; } html.dark .text-emerald-700, html.dark .text-emerald-600 { color: #6ee7b7 !important; } html.dark .text-emerald-800 { color: #a7f3d0 !important; } html.dark .border-emerald-200 { border-color: #065f46 !important; } html.dark .bg-rose-50 { background-color: #4c0519 !important; } html.dark .bg-rose-100 { background-color: #881337 !important; } html.dark .text-rose-700, html.dark .text-rose-600, html.dark .text-rose-500 { color: #fda4af !important; } html.dark .text-rose-800 { color: #fecdd3 !important; } html.dark .border-rose-200 { border-color: #881337 !important; } html.dark .bg-amber-50 { background-color: #451a03 !important; } html.dark .bg-amber-100 { background-color: #78350f !important; } html.dark .text-amber-800, html.dark .text-amber-700, html.dark .text-amber-600 { color: #fcd34d !important; } html.dark .text-amber-900 { color: #fde68a !important; } html.dark .border-amber-200 { border-color: #78350f !important; } /* Knoppen die normaal grijs/licht zijn (niet de zwarte primaire knop) */ html.dark .bg-slate-100.hover\:bg-slate-200:hover { background-color: #334155 !important; } /* Modals/backdrops */ html.dark .bg-black\/50, html.dark .bg-black\/60 { background-color: rgba(0,0,0,0.7) !important; } /* Scrollbar iets minder schel in donkere modus (optioneel, cosmetisch) */ html.dark ::-webkit-scrollbar { background-color: #0f172a; } html.dark ::-webkit-scrollbar-thumb { background-color: #334155; border-radius: 8px; } /* Navigatietabbladen bovenin: gebruiken een losse, hardgecodeerde kleur (#0f172a) in de