:root{ --navy-950:#050b1a; --navy-900:#0a1330; --blue-800:#123a9e; --blue-700:#123a9e; --blue-600:#1547c9; --blue-500:#1d5fe0; --blue-100:#e6efff; --ink:#0b1327; --gray-700:#33415e; --gray-600:#5a6a8c; --gray-500:#7c88a8; --gray-300:#c7d0e2; --gray-100:#eef1f8; --gray-50:#f5f7fc; --bg-light:#f3f6fc; --white:#ffffff; --radius:14px; --shadow:0 14px 34px rgba(10,19,48,0.12); --green:#16a34a; --amber:#d97706; --red:#dc2626; } /* Donkere modus: overschrijft alleen de kleur-variabelen hierboven. Omdat vrijwel alle componenten in dit bestand via var(--xxx) werken (panels, tabellen, knoppen, sidebar, modals, kalender...) volstaat dit voor het overgrote deel van de UI, zonder elke losse regel te hoeven aanpassen. Een klein aantal losse, inline gekleurde meldingsboxen in de templates (groene/rode succes-/foutmeldingen) gebruikt geen variabelen en blijft dus zijn eigen vaste kleur houden -- die blijven prima leesbaar, maar zijn geen exacte thema-match. [data-theme="dark"] staat op , zodat dit overal cascadeert zonder dat elke pagina zijn eigen class nodig heeft. */ [data-theme="dark"]{ --navy-950:#03060f; --navy-900:#070d1e; --blue-800:#3b6fe0; --blue-700:#4c7ce8; --blue-600:#3f7ae0; --blue-500:#5a8ff0; --blue-100:#16264d; --ink:#e7ecf7; --gray-700:#c2cbe3; --gray-600:#9aa6c4; --gray-500:#8892b3; --gray-300:#2b3556; --gray-100:#182142; --gray-50:#141b38; --bg-light:#080d1c; --white:#101833; --shadow:0 14px 34px rgba(0,0,0,0.45); --green:#22c55e; --amber:#f59e0b; --red:#f87171; } [data-theme="dark"] body{background:var(--bg-light);} /* Statuspillen (groen/amber/rood/paars) en de zon/maan-iconen gebruiken vaste pastelkleuren, niet de bovenstaande variabelen -- die worden hier apart iets gedimd zodat ze niet te fel afsteken tegen de donkere achtergrond. */ [data-theme="dark"] .pill-green{background:#0f2e1c;color:#4ade80;} [data-theme="dark"] .pill-amber{background:#3a2708;color:#fbbf24;} [data-theme="dark"] .pill-red{background:#3a1212;color:#fca5a5;} [data-theme="dark"] .pill-purple{background:#241a42;color:#c4b5fd;} [data-theme="dark"] .pill-blue{background:var(--blue-100);color:#9db8f5;} /* Functiebadges (rol-labels), notificatie-iconen, overdracht-banner en de gemarkeerde logboek-rij gebruiken dezelfde vaste-pastelkleur-aanpak -- ook hier alleen gedimd voor donkere modus, niet vervangen. */ [data-theme="dark"] .role-beheerder{background:#241a42;color:#c4b5fd;} [data-theme="dark"] .role-regiecentralist{background:#16264d;color:#93b4f5;} [data-theme="dark"] .role-planner{background:#0d3339;color:#67e8f9;} [data-theme="dark"] .role-teamleider{background:#0f2e1c;color:#4ade80;} [data-theme="dark"] .role-projectleider{background:#3a2708;color:#fbbf24;} [data-theme="dark"] .role-controleur{background:#3a1230;color:#f472b6;} [data-theme="dark"] .role-klant{background:#0c2a3d;color:#7dd3fc;} [data-theme="dark"] .role-onderaannemer{background:#3a2010;color:#fdba74;} [data-theme="dark"] .notif-item.unread{background:#12193a;} [data-theme="dark"] .notif-ico.green{background:#0f2e1c;} [data-theme="dark"] .notif-ico.red{background:#3a1212;} [data-theme="dark"] .notif-ico.amber{background:#3a2708;} [data-theme="dark"] .notif-ico.purple{background:#241a42;} [data-theme="dark"] .handover-banner{background:#2b1d08;border-color:#5c3d0f;} [data-theme="dark"] .handover-banner-head h3,[data-theme="dark"] .handover-meta{color:#fbbf24;} [data-theme="dark"] .handover-text,[data-theme="dark"] .handover-history-item{color:#fcd9a8;} [data-theme="dark"] .handover-history{border-color:#5c3d0f;} [data-theme="dark"] .handover-history-item{border-color:#4a3110;} [data-theme="dark"] .handover-history summary{color:#fbbf24;} [data-theme="dark"] .numlist-row.heeft-logboek{background:#1c1533;border-left-color:#a78bfa;} [data-theme="dark"] .modal-danger-btn{background:#dc2626;} [data-theme="dark"] .modal-danger-btn:hover{background:#b91c1c;} /* Losse inline gekleurde meldingsboxen (succes/fout/waarschuwing/info) in de templates zelf -- die gebruiken geen variabelen, dus deze substring- attribuutselectors vangen ze allemaal in één keer af zonder dat elk van de tientallen templates aangepast hoeft te worden. !important is hier bewust nodig: een inline style wint anders altijd van een los stylesheet, ongeacht specificiteit. */ [data-theme="dark"] [style*="background:#dcfce7"]{background:#0f2e1c !important;color:#4ade80 !important;} [data-theme="dark"] [style*="background:#fef3c7"]{background:#3a2708 !important;color:#fbbf24 !important;} [data-theme="dark"] [style*="background:#fee2e2"]{background:#3a1212 !important;color:#fca5a5 !important;} [data-theme="dark"] [style*="background:#fef2f2"]{background:#3a1212 !important;color:#fca5a5 !important;} [data-theme="dark"] [style*="background:#eef2ff"]{background:#1c2145 !important;color:#a5b4fc !important;} [data-theme="dark"] [style*="background:#ede9fe"]{background:#241a42 !important;color:#c4b5fd !important;} /* De bel en de thema-schakelaar staan altijd in de donkere navy sidebar (ook in donkere modus): een net iets lichter, duidelijk begrensd cirkeltje houdt hier meer contrast dan de algemene --white/--gray-100-variabelen. */ [data-theme="dark"] .notif-bell,[data-theme="dark"] .theme-toggle{ background:#182142;border-color:#2b3556;color:#c2cbe3; } [data-theme="dark"] .notif-bell:hover,[data-theme="dark"] .theme-toggle:hover{ border-color:var(--blue-500);color:var(--blue-500); } *{box-sizing:border-box;} body{ margin:0;font-family:"Inter",Arial,Helvetica,sans-serif;color:var(--ink); background:var(--bg-light);line-height:1.6;-webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none;} ul{margin:0;padding:0;list-style:none;} h1,h2,h3,h4{margin:0 0 .4em;font-weight:800;} p{margin:0;color:var(--gray-600);} img{max-width:100%;display:block;} .proto-banner{ background:var(--navy-950);color:#ffd580;font-size:12.5px;font-weight:700; text-align:center;padding:8px 16px;letter-spacing:.02em; } /* App shell */ .app-shell{display:flex;min-height:100vh;} .sidebar{ width:320px;flex:none;background:var(--navy-950);color:#93a4c9; display:flex;flex-direction:column;padding:20px 16px; } /* Logo + de 3 topbar-knoppen (zoeken/thema/bel) op 1 rij naast elkaar -- de sidebar is met opzet verbreed naar 320px (was 230px) om hier ruimte voor te maken. De knoppen zelf zijn iets kleiner gemaakt (34px i.p.v. 38px, kleinere tussenruimte) en de merknaam krijgt ellipsis (...) i.p.v. lelijk af te breken/over te lopen als het toch een keer krap wordt, bijv. bij een extra lange rolnaam. De brand-blok had voorheen een extra grote padding-bottom (22px), waardoor hij hoger was dan de knoppen-rij en de knoppen (door align-items:center) lager uitkwamen dan de logo -- nu gelijke padding rondom zodat alles op 1 lijn staat. */ .sidebar-topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;} .sidebar .brand{display:flex;align-items:center;gap:10px;padding:6px 8px;flex:1;min-width:0;} .sidebar .brand img{width:34px;height:34px;border-radius:9px;flex:none;} .sidebar .brand-name{color:#fff;font-weight:800;font-size:14.5px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sidebar .brand-sub{font-size:9px;letter-spacing:.08em;color:#6e7ea3;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sidebar-topbar-icons{display:flex;align-items:center;gap:6px;flex:none;} /* Hamburger-menuknop: alleen zichtbaar op mobiel (zie media query onderaan). Op desktop blijft de volledige navigatie altijd zichtbaar, dus daar is geen knop nodig -- display:none hier zorgt dat 'ie het middelste kind van .sidebar-topbar niet meetelt in de flex-verdeling op desktop. */ .mobile-menu-toggle{ display:none;align-items:center;justify-content:center; width:34px;height:34px;border-radius:9px;border:1px solid #2b3556;background:#141d3d; color:#c2cbe3;cursor:pointer;flex:none; } .mobile-menu-toggle svg{width:19px;height:19px;} /* display:contents = deze wrapper telt niet mee in de layout: sidebar-nav en sidebar-foot gedragen zich op desktop precies als vóór deze wrapper werd toegevoegd (rechtstreekse flex-children van .sidebar, verticaal gestapeld). Pas in de mobiele media query wordt dit een echt in-/uitklap- paneel. */ .mobile-menu-panel{display:contents;} .sidebar-legal-links{margin-top:10px;font-size:10.5px;line-height:1.8;} .sidebar-legal-links a{color:#8792a8;} /* Rodapé met juridische links -- staat wel altijd in de DOM (voor SEO/ toegankelijkheid), maar is op desktop verborgen omdat diezelfde links daar al in de sidebar-voet staan (.sidebar-legal-links hierboven). */ .mobile-legal-footer{display:none;} .sidebar-nav{flex:1;display:flex;flex-direction:column;gap:4px;} .sidebar-nav a{ display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px; font-size:13.5px;font-weight:600;color:#93a4c9; } .sidebar-nav a svg{width:18px;height:18px;flex:none;} .sidebar-nav a:hover{background:rgba(255,255,255,.06);color:#fff;} .sidebar-nav a.active{background:var(--blue-600);color:#fff;} /* Submenu's (Rooster/Personeel/Klanten/Uren & financieel/Beheer) -- het beheerder-menu was uitgegroeid naar ~19 losse items, dit groepeert ze thematisch. De toggle-knop hergebruikt exact de opmaak van .sidebar-nav a (zelfde padding/kleur/hover), maar is een