/* ═══════════════════════════════════════════════════════════════════════ SG MODULE KLEUREN v2.0 — volledig uniek palet, geen dubbelen ═══════════════════════════════════════════════════════════════════════ Elk module heeft één vaste kleur die doorloopt in: 1. Sidebar nav-icoon (altijd zichtbaar, ook light mode) 2. Actieve nav-item accent (linker border + icoon glow) 3. Section header (icoon + accent-lijn bovenaan de pagina) 4. Dashboard snelkoppelingen 5. Bottom nav actieve staat VOLLEDIG UNIEK KLEURPALET v2.0: ── Operationeel ─────────────────────────────────────────────────────── dashboard #e30613 rood (SG brand) projecten #f97316 oranje planning #0891b2 cyaan team #7c3aed paars tijden #16a34a groen contracten #f59e0b amber finance #22c55e emerald groen marktplaats #ec4899 roze netwerk #06b6d4 turquoise wagenpark #d97706 amber-donker vault #0d9488 teal meldingen #f43f5e roos mailbeheer #2563eb diep-blauw notities #a78bfa lila personeelszaken #dc2626 rood-donker elearning #0284c7 steel-blauw administratie #64748b leisteen accountbeheer #e879f9 fuchsia offerteaanvragen #fb923c koraal-oranje (offertes) gpstracker #10b981 mint-groen tribune #4f46e5 indigo rijverboden #b91c1c karmijn afval #65a30d lime-groen ── Admin & Beheer ───────────────────────────────────────────────────── admincommand #eab308 geel-goud (centraal schakelpaneel) modulebeheer #6366f1 indigo-blauw (configuratie) adminpay #10b981 mint-groen (betalingen/geld) paginabeheer #0284c7 ocean-blauw (content) visie #8b5cf6 violet (roadmap/toekomst) juridisch #ef4444 karmijn-rood (recht/risico) accounts #e05252 koraal-rood (personen/accounts) settings #94a3b8 grijs-blauw (neutraal) developerportal #14b8a6 teal-cyaan (tech/code) adminlogs #64748b leisteen rapportage #7dd3fc lucht-blauw ═══════════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────────────── CSS CUSTOM PROPERTIES — één bron van waarheid ────────────────────────────────────────────────────────────────────── */ :root { /* ── Operationele modules ─────────────────────────────────────── */ --sgm-dashboard: #e30613; /* rood SG brand */ --sgm-projecten: #f97316; /* oranje bouw/werk */ --sgm-planning: #0891b2; /* cyaan kalender */ --sgm-team: #7c3aed; /* paars communicatie */ --sgm-tijden: #16a34a; /* groen klok/uren */ --sgm-contracten: #f59e0b; /* amber documenten */ --sgm-finance: #22c55e; /* emerald geld/groen */ --sgm-marktplaats: #ec4899; /* roze marketplace */ --sgm-netwerk: #06b6d4; /* turquoise verbindingen */ --sgm-wagenpark: #d97706; /* amber-donker voertuigen */ --sgm-vault: #0d9488; /* teal beveiliging */ --sgm-meldingen: #f43f5e; /* roos alerts */ --sgm-mailbeheer: #2563eb; /* diep-blauw e-mail */ --sgm-notities: #a78bfa; /* lila notities */ --sgm-personeelszaken: #dc2626; /* rood-donker HR/mensen */ --sgm-elearning: #0284c7; /* steel-blauw leren */ --sgm-administratie: #64748b; /* leisteen boekhouding */ --sgm-accountbeheer: #e879f9; /* fuchsia accounts (≠ team) */ --sgm-offerteaanvragen: #fb923c; /* koraal offertes */ --sgm-gpstracker: #10b981; /* mint-groen GPS/locatie */ --sgm-tribune: #4f46e5; /* indigo calculatie */ --sgm-rijverboden: #b91c1c; /* karmijn verboden/risico */ --sgm-afval: #65a30d; /* lime-groen recycling */ /* ── Admin & Beheer secties ────────────────────────────────────── */ --sgm-admincommand: #eab308; /* geel-goud Admin Hub */ --sgm-modulebeheer: #6366f1; /* indigo-blauw configuratie */ --sgm-adminpay: #059669; /* smaragd-groen betalingen/geld */ --sgm-paginabeheer: #0369a1; /* ocean-blauw content/pagina's */ --sgm-visie: #8b5cf6; /* violet roadmap */ --sgm-juridisch: #ef4444; /* karmijn-rood recht/risico */ --sgm-accounts: #e05252; /* koraal-rood personen/accounts */ --sgm-settings: #94a3b8; /* grijs-blauw instellingen */ --sgm-developerportal: #14b8a6; /* teal-cyaan developer/tech */ --sgm-adminlogs: #475569; /* donker-leisteen logs */ --sgm-rapportage: #7dd3fc; /* lucht-blauw data/rapporten */ /* Actief sectie — wordt gezet door JS via data-active-section op */ --sgm-actief: #e30613; } /* ══════════════════════════════════════════════════════════════════════ 1. SIDEBAR NAV-ICONEN — altijd kleur, ook in light mode De inline style="color:..." van sg-nav-engine.js heeft hogere specificiteit, maar we versterken hier voor de gevallen waar dat niet werkt (bijv. direct na DOM-inject). ══════════════════════════════════════════════════════════════════════ */ /* Generiek: elk nav-icon krijgt zijn kleur via data-section op de button */ #sidebarNav .nav-item[data-section="dashboard"] .nav-icon, .bottom-nav-btn[data-section="dashboard"] { color: var(--sgm-dashboard) !important; } #sidebarNav .nav-item[data-section="projecten"] .nav-icon, .bottom-nav-btn[data-section="projecten"] { color: var(--sgm-projecten) !important; } #sidebarNav .nav-item[data-section="planning"] .nav-icon, .bottom-nav-btn[data-section="planning"] { color: var(--sgm-planning) !important; } #sidebarNav .nav-item[data-section="team"] .nav-icon, .bottom-nav-btn[data-section="team"] { color: var(--sgm-team) !important; } #sidebarNav .nav-item[data-section="tijden"] .nav-icon, .bottom-nav-btn[data-section="tijden"] { color: var(--sgm-tijden) !important; } #sidebarNav .nav-item[data-section="contracten"] .nav-icon, .bottom-nav-btn[data-section="contracten"] { color: var(--sgm-contracten) !important; } #sidebarNav .nav-item[data-section="finance"] .nav-icon, .bottom-nav-btn[data-section="finance"] { color: var(--sgm-finance) !important; } #sidebarNav .nav-item[data-section="marktplaats"] .nav-icon, .bottom-nav-btn[data-section="marktplaats"] { color: var(--sgm-marktplaats) !important; } #sidebarNav .nav-item[data-section="netwerk"] .nav-icon, .bottom-nav-btn[data-section="netwerk"] { color: var(--sgm-netwerk) !important; } #sidebarNav .nav-item[data-section="wagenpark"] .nav-icon, .bottom-nav-btn[data-section="wagenpark"] { color: var(--sgm-wagenpark) !important; } #sidebarNav .nav-item[data-section="vault"] .nav-icon, .bottom-nav-btn[data-section="vault"] { color: var(--sgm-vault) !important; } #sidebarNav .nav-item[data-section="meldingen"] .nav-icon, .bottom-nav-btn[data-section="meldingen"] { color: var(--sgm-meldingen) !important; } #sidebarNav .nav-item[data-section="mailbeheer"] .nav-icon, .bottom-nav-btn[data-section="mailbeheer"] { color: var(--sgm-mailbeheer) !important; } #sidebarNav .nav-item[data-section="notities"] .nav-icon, .bottom-nav-btn[data-section="notities"] { color: var(--sgm-notities) !important; } #sidebarNav .nav-item[data-section="personeelszaken"] .nav-icon, .bottom-nav-btn[data-section="personeelszaken"] { color: var(--sgm-personeelszaken) !important; } #sidebarNav .nav-item[data-section="elearning"] .nav-icon, .bottom-nav-btn[data-section="elearning"] { color: var(--sgm-elearning) !important; } #sidebarNav .nav-item[data-section="administratie"] .nav-icon, .bottom-nav-btn[data-section="administratie"] { color: var(--sgm-administratie) !important; } #sidebarNav .nav-item[data-section="accountbeheer"] .nav-icon, .bottom-nav-btn[data-section="accountbeheer"] { color: var(--sgm-accountbeheer) !important; } #sidebarNav .nav-item[data-section="offerteaanvragen"] .nav-icon, .bottom-nav-btn[data-section="offerteaanvragen"] { color: var(--sgm-offerteaanvragen) !important; } #sidebarNav .nav-item[data-section="gpstracker"] .nav-icon, .bottom-nav-btn[data-section="gpstracker"] { color: var(--sgm-gpstracker) !important; } #sidebarNav .nav-item[data-section="tribune"] .nav-icon, .bottom-nav-btn[data-section="tribune"] { color: var(--sgm-tribune) !important; } #sidebarNav .nav-item[data-section="rijverboden"] .nav-icon, .bottom-nav-btn[data-section="rijverboden"] { color: var(--sgm-rijverboden) !important; } /* laadlijsten — add-on module; kleur wordt inline gezet via item.kleur */ #sidebarNav .nav-item[data-section="laadlijsten"] .nav-icon, .bottom-nav-btn[data-section="laadlijsten"] { color: #f97316 !important; } /* ── Admin-specifieke secties ──────────────────────────────────────── */ #sidebarNav .nav-item[data-section="admincommand"] .nav-icon, .bottom-nav-btn[data-section="admincommand"] { color: var(--sgm-admincommand) !important; } #sidebarNav .nav-item[data-section="modulebeheer"] .nav-icon, .bottom-nav-btn[data-section="modulebeheer"] { color: var(--sgm-modulebeheer) !important; } #sidebarNav .nav-item[data-section="adminpay"] .nav-icon, .bottom-nav-btn[data-section="adminpay"] { color: var(--sgm-adminpay) !important; } #sidebarNav .nav-item[data-section="paginabeheer"] .nav-icon, .bottom-nav-btn[data-section="paginabeheer"] { color: var(--sgm-paginabeheer) !important; } #sidebarNav .nav-item[data-section="visie"] .nav-icon, .bottom-nav-btn[data-section="visie"] { color: var(--sgm-visie) !important; } #sidebarNav .nav-item[data-section="juridisch"] .nav-icon, .bottom-nav-btn[data-section="juridisch"] { color: var(--sgm-juridisch) !important; } #sidebarNav .nav-item[data-section="accounts"] .nav-icon, .bottom-nav-btn[data-section="accounts"] { color: var(--sgm-accounts) !important; } #sidebarNav .nav-item[data-section="settings"] .nav-icon, .bottom-nav-btn[data-section="settings"] { color: var(--sgm-settings) !important; } #sidebarNav .nav-item[data-section="developerportal"] .nav-icon, .bottom-nav-btn[data-section="developerportal"] { color: var(--sgm-developerportal) !important; } #sidebarNav .nav-item[data-section="adminlogs"] .nav-icon, .bottom-nav-btn[data-section="adminlogs"] { color: var(--sgm-adminlogs) !important; } #sidebarNav .nav-item[data-section="rapportage"] .nav-icon, .bottom-nav-btn[data-section="rapportage"] { color: var(--sgm-rapportage) !important; } /* ══════════════════════════════════════════════════════════════════════ 2. ACTIEF NAV-ITEM — accent border + glow in de eigen modulekleur ══════════════════════════════════════════════════════════════════════ */ /* Basis actief-stijl — overschrijft de altijd-rode border uit style.css */ #sidebarNav .nav-item.active { background: rgba(255,255,255,.10) !important; color: #ffffff !important; } /* Per sectie: eigen kleur als linker accent-border + icon glow */ #sidebarNav .nav-item[data-section="dashboard"].active { box-shadow: inset 3px 0 0 var(--sgm-dashboard) !important; } #sidebarNav .nav-item[data-section="projecten"].active { box-shadow: inset 3px 0 0 var(--sgm-projecten) !important; } #sidebarNav .nav-item[data-section="planning"].active { box-shadow: inset 3px 0 0 var(--sgm-planning) !important; } #sidebarNav .nav-item[data-section="team"].active { box-shadow: inset 3px 0 0 var(--sgm-team) !important; } #sidebarNav .nav-item[data-section="tijden"].active { box-shadow: inset 3px 0 0 var(--sgm-tijden) !important; } #sidebarNav .nav-item[data-section="contracten"].active { box-shadow: inset 3px 0 0 var(--sgm-contracten) !important; } #sidebarNav .nav-item[data-section="finance"].active { box-shadow: inset 3px 0 0 var(--sgm-finance) !important; } #sidebarNav .nav-item[data-section="marktplaats"].active { box-shadow: inset 3px 0 0 var(--sgm-marktplaats) !important; } #sidebarNav .nav-item[data-section="netwerk"].active { box-shadow: inset 3px 0 0 var(--sgm-netwerk) !important; } #sidebarNav .nav-item[data-section="wagenpark"].active { box-shadow: inset 3px 0 0 var(--sgm-wagenpark) !important; } #sidebarNav .nav-item[data-section="vault"].active { box-shadow: inset 3px 0 0 var(--sgm-vault) !important; } #sidebarNav .nav-item[data-section="meldingen"].active { box-shadow: inset 3px 0 0 var(--sgm-meldingen) !important; } #sidebarNav .nav-item[data-section="mailbeheer"].active { box-shadow: inset 3px 0 0 var(--sgm-mailbeheer) !important; } #sidebarNav .nav-item[data-section="notities"].active { box-shadow: inset 3px 0 0 var(--sgm-notities) !important; } #sidebarNav .nav-item[data-section="personeelszaken"].active { box-shadow: inset 3px 0 0 var(--sgm-personeelszaken) !important; } #sidebarNav .nav-item[data-section="elearning"].active { box-shadow: inset 3px 0 0 var(--sgm-elearning) !important; } #sidebarNav .nav-item[data-section="administratie"].active { box-shadow: inset 3px 0 0 var(--sgm-administratie) !important; } #sidebarNav .nav-item[data-section="accountbeheer"].active { box-shadow: inset 3px 0 0 var(--sgm-accountbeheer) !important; } #sidebarNav .nav-item[data-section="offerteaanvragen"].active { box-shadow: inset 3px 0 0 var(--sgm-offerteaanvragen) !important; } #sidebarNav .nav-item[data-section="gpstracker"].active { box-shadow: inset 3px 0 0 var(--sgm-gpstracker) !important; } #sidebarNav .nav-item[data-section="tribune"].active { box-shadow: inset 3px 0 0 var(--sgm-tribune) !important; } #sidebarNav .nav-item[data-section="rijverboden"].active { box-shadow: inset 3px 0 0 var(--sgm-rijverboden) !important; } #sidebarNav .nav-item[data-section="laadlijsten"].active { box-shadow: inset 3px 0 0 #f97316 !important; } /* Admin-secties actief */ #sidebarNav .nav-item[data-section="admincommand"].active { box-shadow: inset 3px 0 0 var(--sgm-admincommand) !important; } #sidebarNav .nav-item[data-section="modulebeheer"].active { box-shadow: inset 3px 0 0 var(--sgm-modulebeheer) !important; } #sidebarNav .nav-item[data-section="adminpay"].active { box-shadow: inset 3px 0 0 var(--sgm-adminpay) !important; } #sidebarNav .nav-item[data-section="paginabeheer"].active { box-shadow: inset 3px 0 0 var(--sgm-paginabeheer) !important; } #sidebarNav .nav-item[data-section="visie"].active { box-shadow: inset 3px 0 0 var(--sgm-visie) !important; } #sidebarNav .nav-item[data-section="juridisch"].active { box-shadow: inset 3px 0 0 var(--sgm-juridisch) !important; } #sidebarNav .nav-item[data-section="accounts"].active { box-shadow: inset 3px 0 0 var(--sgm-accounts) !important; } #sidebarNav .nav-item[data-section="settings"].active { box-shadow: inset 3px 0 0 var(--sgm-settings) !important; } #sidebarNav .nav-item[data-section="developerportal"].active { box-shadow: inset 3px 0 0 var(--sgm-developerportal) !important; } #sidebarNav .nav-item[data-section="adminlogs"].active { box-shadow: inset 3px 0 0 var(--sgm-adminlogs) !important; } #sidebarNav .nav-item[data-section="rapportage"].active { box-shadow: inset 3px 0 0 var(--sgm-rapportage) !important; } /* Actief icoon: licht glow in eigen kleur */ #sidebarNav .nav-item.active .nav-icon { filter: brightness(1.25) drop-shadow(0 0 5px currentColor) !important; } /* ══════════════════════════════════════════════════════════════════════ 3. SECTION HEADER — accent icoon-cirkel + gekleurde bovenlijn Werkt via data-section op het .section element (#sec-*) en via de CSS custom property --sgm-actief die JS zet op ══════════════════════════════════════════════════════════════════════ */ /* Generieke section-header stijl */ .section-header { position: relative; } /* Accent-lijn boven de sectie-header (dun, in modulekleur) */ .section-header::before { content: ''; display: block; height: 3px; border-radius: 2px; background: var(--sgm-actief, #e30613); margin-bottom: 14px; width: 48px; transition: background .3s ease, width .3s ease; } /* Sectie-icoon in de header */ .section-header .section-icon, .section-header h2 i:first-child, .section-header .header-icon { color: var(--sgm-actief, #e30613) !important; transition: color .3s ease; } /* Per actieve sectie: stel --sgm-actief in op body via data-section attribuut */ body[data-active-section="dashboard"] { --sgm-actief: var(--sgm-dashboard); } body[data-active-section="projecten"] { --sgm-actief: var(--sgm-projecten); } body[data-active-section="planning"] { --sgm-actief: var(--sgm-planning); } body[data-active-section="team"] { --sgm-actief: var(--sgm-team); } body[data-active-section="tijden"] { --sgm-actief: var(--sgm-tijden); } body[data-active-section="contracten"] { --sgm-actief: var(--sgm-contracten); } body[data-active-section="finance"] { --sgm-actief: var(--sgm-finance); } body[data-active-section="marktplaats"] { --sgm-actief: var(--sgm-marktplaats); } body[data-active-section="netwerk"] { --sgm-actief: var(--sgm-netwerk); } body[data-active-section="wagenpark"] { --sgm-actief: var(--sgm-wagenpark); } body[data-active-section="vault"] { --sgm-actief: var(--sgm-vault); } body[data-active-section="meldingen"] { --sgm-actief: var(--sgm-meldingen); } body[data-active-section="mailbeheer"] { --sgm-actief: var(--sgm-mailbeheer); } body[data-active-section="notities"] { --sgm-actief: var(--sgm-notities); } body[data-active-section="personeelszaken"] { --sgm-actief: var(--sgm-personeelszaken); } body[data-active-section="elearning"] { --sgm-actief: var(--sgm-elearning); } body[data-active-section="administratie"] { --sgm-actief: var(--sgm-administratie); } body[data-active-section="accountbeheer"] { --sgm-actief: var(--sgm-accountbeheer); } body[data-active-section="offerteaanvragen"] { --sgm-actief: var(--sgm-offerteaanvragen); } body[data-active-section="gpstracker"] { --sgm-actief: var(--sgm-gpstracker); } body[data-active-section="tribune"] { --sgm-actief: var(--sgm-tribune); } /* Admin-secties */ body[data-active-section="admincommand"] { --sgm-actief: var(--sgm-admincommand); } body[data-active-section="modulebeheer"] { --sgm-actief: var(--sgm-modulebeheer); } body[data-active-section="adminpay"] { --sgm-actief: var(--sgm-adminpay); } body[data-active-section="paginabeheer"] { --sgm-actief: var(--sgm-paginabeheer); } body[data-active-section="visie"] { --sgm-actief: var(--sgm-visie); } body[data-active-section="juridisch"] { --sgm-actief: var(--sgm-juridisch); } body[data-active-section="accounts"] { --sgm-actief: var(--sgm-accounts); } body[data-active-section="settings"] { --sgm-actief: var(--sgm-settings); } body[data-active-section="developerportal"] { --sgm-actief: var(--sgm-developerportal); } body[data-active-section="adminlogs"] { --sgm-actief: var(--sgm-adminlogs); } body[data-active-section="rapportage"] { --sgm-actief: var(--sgm-rapportage); } /* ══════════════════════════════════════════════════════════════════════ 4. MODULE TOPBAR — gekleurde balk bovenaan elke sectie Automatisch gegenereerd via .sg-module-topbar klasse ══════════════════════════════════════════════════════════════════════ */ .sg-module-topbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px; margin: -16px -16px 16px; /* sluit aan op section padding */ border-bottom: 1px solid rgba(0,0,0,.06); background: color-mix(in srgb, var(--sgm-actief, #e30613) 8%, transparent); border-top: 3px solid var(--sgm-actief, #e30613); transition: background .3s, border-color .3s; } .sg-module-topbar .sgmt-icon { width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--sgm-actief, #e30613) 15%, transparent); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--sgm-actief, #e30613); flex-shrink: 0; transition: background .3s, color .3s; } .sg-module-topbar .sgmt-title { font-size: 1rem; font-weight: 700; color: var(--text, #0f172a); margin: 0; line-height: 1.2; } .sg-module-topbar .sgmt-sub { font-size: .72rem; color: var(--text-muted, #64748b); margin: 0; } /* Dark mode aanpassing */ .sg-theme-dark .sg-module-topbar { background: color-mix(in srgb, var(--sgm-actief, #e30613) 12%, #0b1120); border-bottom-color: rgba(255,255,255,.06); } .sg-theme-dark .sg-module-topbar .sgmt-title { color: #f1f5f9; } /* ══════════════════════════════════════════════════════════════════════ 5. BOTTOM NAV — actieve knop in modulekleur ══════════════════════════════════════════════════════════════════════ */ .bottom-nav-btn.active { color: var(--sgm-actief, #e30613) !important; } .bottom-nav-btn[data-section="dashboard"].active { color: var(--sgm-dashboard) !important; } .bottom-nav-btn[data-section="projecten"].active { color: var(--sgm-projecten) !important; } .bottom-nav-btn[data-section="planning"].active { color: var(--sgm-planning) !important; } .bottom-nav-btn[data-section="team"].active { color: var(--sgm-team) !important; } .bottom-nav-btn[data-section="tijden"].active { color: var(--sgm-tijden) !important; } .bottom-nav-btn[data-section="contracten"].active { color: var(--sgm-contracten) !important; } .bottom-nav-btn[data-section="finance"].active { color: var(--sgm-finance) !important; } .bottom-nav-btn[data-section="marktplaats"].active{ color: var(--sgm-marktplaats) !important; } .bottom-nav-btn[data-section="netwerk"].active { color: var(--sgm-netwerk) !important; } .bottom-nav-btn[data-section="wagenpark"].active { color: var(--sgm-wagenpark) !important; } .bottom-nav-btn[data-section="vault"].active { color: var(--sgm-vault) !important; } .bottom-nav-btn[data-section="meldingen"].active { color: var(--sgm-meldingen) !important; } /* ══════════════════════════════════════════════════════════════════════ 6. DASHBOARD SNELKOPPELINGEN — modulekleur op icoon + hover-accent .dash-shortcut[data-section="..."] elementen ══════════════════════════════════════════════════════════════════════ */ /* Generiek: icoon in dashboard-tiles krijgt kleur via data-section */ [data-section="projecten"] .stat-icon, [data-section="projecten"] .dash-icon { background: color-mix(in srgb, var(--sgm-projecten) 15%, transparent) !important; color: var(--sgm-projecten) !important; } [data-section="planning"] .stat-icon, [data-section="planning"] .dash-icon { background: color-mix(in srgb, var(--sgm-planning) 15%, transparent) !important; color: var(--sgm-planning) !important; } [data-section="team"] .stat-icon, [data-section="team"] .dash-icon { background: color-mix(in srgb, var(--sgm-team) 15%, transparent) !important; color: var(--sgm-team) !important; } [data-section="tijden"] .stat-icon, [data-section="tijden"] .dash-icon { background: color-mix(in srgb, var(--sgm-tijden) 15%, transparent) !important; color: var(--sgm-tijden) !important; } [data-section="contracten"] .stat-icon, [data-section="contracten"] .dash-icon { background: color-mix(in srgb, var(--sgm-contracten) 15%, transparent) !important; color: var(--sgm-contracten) !important; } [data-section="finance"] .stat-icon, [data-section="finance"] .dash-icon { background: color-mix(in srgb, var(--sgm-finance) 15%, transparent) !important; color: var(--sgm-finance) !important; } [data-section="marktplaats"].stat-icon, [data-section="marktplaats"].dash-icon { background: color-mix(in srgb, var(--sgm-marktplaats) 15%, transparent) !important; color: var(--sgm-marktplaats) !important; } [data-section="netwerk"] .stat-icon, [data-section="netwerk"] .dash-icon { background: color-mix(in srgb, var(--sgm-netwerk) 15%, transparent) !important; color: var(--sgm-netwerk) !important; } [data-section="wagenpark"] .stat-icon, [data-section="wagenpark"] .dash-icon { background: color-mix(in srgb, var(--sgm-wagenpark) 15%, transparent) !important; color: var(--sgm-wagenpark) !important; } [data-section="vault"] .stat-icon, [data-section="vault"] .dash-icon { background: color-mix(in srgb, var(--sgm-vault) 15%, transparent) !important; color: var(--sgm-vault) !important; } /* ══════════════════════════════════════════════════════════════════════ 7. LIGHT MODE OVERRIDE — nav-items altijd donkere achtergrond zodat gekleurde iconen altijd zichtbaar zijn ══════════════════════════════════════════════════════════════════════ */ /* Light mode: sidebar blijft donker (zoals dark mode) — dit is de standaard SG-sidebar */ .sg-theme-light .sidebar { background: var(--sidebar-bg, #0c1120) !important; } /* Nav-iconen: altijd hun eigen kleur (overschrijf geen-kleur uit dark-fixes) */ .sg-theme-light #sidebarNav .nav-item .nav-icon { /* kleur komt van de data-section regels hierboven */ opacity: 1 !important; } /* Hover: licht ophelderen */ .sg-theme-light #sidebarNav .nav-item:hover .nav-icon { filter: brightness(1.2) !important; } /* ══════════════════════════════════════════════════════════════════════ 8. DARK MODE — kleuren iets lichter voor betere leesbaarheid ══════════════════════════════════════════════════════════════════════ */ .sg-theme-dark #sidebarNav .nav-item[data-section="dashboard"] .nav-icon { color: color-mix(in srgb, var(--sgm-dashboard) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="projecten"] .nav-icon { color: color-mix(in srgb, var(--sgm-projecten) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="planning"] .nav-icon { color: color-mix(in srgb, var(--sgm-planning) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="team"] .nav-icon { color: color-mix(in srgb, var(--sgm-team) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="tijden"] .nav-icon { color: color-mix(in srgb, var(--sgm-tijden) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="contracten"] .nav-icon { color: color-mix(in srgb, var(--sgm-contracten) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="finance"] .nav-icon { color: color-mix(in srgb, var(--sgm-finance) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="marktplaats"] .nav-icon { color: color-mix(in srgb, var(--sgm-marktplaats) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="netwerk"] .nav-icon { color: color-mix(in srgb, var(--sgm-netwerk) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="wagenpark"] .nav-icon { color: color-mix(in srgb, var(--sgm-wagenpark) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="vault"] .nav-icon { color: color-mix(in srgb, var(--sgm-vault) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="meldingen"] .nav-icon { color: color-mix(in srgb, var(--sgm-meldingen) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="mailbeheer"] .nav-icon { color: color-mix(in srgb, var(--sgm-mailbeheer) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="notities"] .nav-icon { color: color-mix(in srgb, var(--sgm-notities) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="personeelszaken"] .nav-icon { color: color-mix(in srgb, var(--sgm-personeelszaken) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="elearning"] .nav-icon { color: color-mix(in srgb, var(--sgm-elearning) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="administratie"] .nav-icon { color: color-mix(in srgb, var(--sgm-administratie) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="accountbeheer"] .nav-icon { color: color-mix(in srgb, var(--sgm-accountbeheer) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="gpstracker"] .nav-icon { color: color-mix(in srgb, var(--sgm-gpstracker) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="tribune"] .nav-icon { color: color-mix(in srgb, var(--sgm-tribune) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="rijverboden"] .nav-icon { color: color-mix(in srgb, var(--sgm-rijverboden) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="laadlijsten"] .nav-icon { color: color-mix(in srgb, #f97316 85%, white) !important; } /* Admin-secties dark mode */ .sg-theme-dark #sidebarNav .nav-item[data-section="admincommand"] .nav-icon { color: color-mix(in srgb, var(--sgm-admincommand) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="modulebeheer"] .nav-icon { color: color-mix(in srgb, var(--sgm-modulebeheer) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="adminpay"] .nav-icon { color: color-mix(in srgb, var(--sgm-adminpay) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="paginabeheer"] .nav-icon { color: color-mix(in srgb, var(--sgm-paginabeheer) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="visie"] .nav-icon { color: color-mix(in srgb, var(--sgm-visie) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="juridisch"] .nav-icon { color: color-mix(in srgb, var(--sgm-juridisch) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="accounts"] .nav-icon { color: color-mix(in srgb, var(--sgm-accounts) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="settings"] .nav-icon { color: color-mix(in srgb, var(--sgm-settings) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="developerportal"] .nav-icon { color: color-mix(in srgb, var(--sgm-developerportal) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="adminlogs"] .nav-icon { color: color-mix(in srgb, var(--sgm-adminlogs) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="rapportage"] .nav-icon { color: color-mix(in srgb, var(--sgm-rapportage) 85%, white) !important; } /* ══════════════════════════════════════════════════════════════════════ 9. UNIVERSELE VANGNET — ontbrekende [data-section] secties behouden hun inline style kleur; groeperingen krijgen extra visueel onderscheid ══════════════════════════════════════════════════════════════════════ */ /* Elke .nav-icon met een inline style heeft altijd een directe color-waarde. Deze rule garandeert dat ook toekomstige, nog niet-gedekte secties nooit grijs worden door CSS-cascade van ouder-elementen. Werkt via hoge specificiteit (#sidebarNav + .nav-item + .nav-icon[style]): */ #sidebarNav .nav-item .nav-icon[style*="color"] { /* Inline style heeft al absolute voorrang — deze rule versterkt alleen opacity/visibility */ opacity: 1 !important; visibility: visible !important; } /* "App Beheer" groep-label: extra visuele scheiding + amber/goud accent zodat admin-sectieblok direct herkenbaar is in de sidebar */ #sidebarNav .sidebar-nav-section:has(+ .nav-item[data-section="admincommand"]) { color: var(--sgm-admincommand, #eab308) !important; font-weight: 700; letter-spacing: .04em; border-top-color: rgba(234,179,8,.25) !important; padding-top: 8px; margin-top: 10px; } /* Alle nav-sectiekoppen: consistente stijl (verhoogt zichtbaarheid t.o.v. style.css baseline) */ #sidebarNav .sidebar-nav-section { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.32); padding-top: 10px; } /* ── Dashboard snelkoppelingen voor admin-secties ── */ [data-section="admincommand"] .stat-icon, [data-section="admincommand"] .dash-icon { background: color-mix(in srgb, var(--sgm-admincommand) 15%, transparent) !important; color: var(--sgm-admincommand) !important; } [data-section="modulebeheer"] .stat-icon, [data-section="modulebeheer"] .dash-icon { background: color-mix(in srgb, var(--sgm-modulebeheer) 15%, transparent) !important; color: var(--sgm-modulebeheer) !important; } [data-section="adminpay"] .stat-icon, [data-section="adminpay"] .dash-icon { background: color-mix(in srgb, var(--sgm-adminpay) 15%, transparent) !important; color: var(--sgm-adminpay) !important; } [data-section="paginabeheer"] .stat-icon, [data-section="paginabeheer"] .dash-icon { background: color-mix(in srgb, var(--sgm-paginabeheer) 15%, transparent) !important; color: var(--sgm-paginabeheer) !important; } [data-section="accounts"] .stat-icon, [data-section="accounts"] .dash-icon { background: color-mix(in srgb, var(--sgm-accounts) 15%, transparent) !important; color: var(--sgm-accounts) !important; } [data-section="accountbeheer"] .stat-icon, [data-section="accountbeheer"] .dash-icon { background: color-mix(in srgb, var(--sgm-accountbeheer) 15%, transparent) !important; color: var(--sgm-accountbeheer) !important; } [data-section="settings"] .stat-icon, [data-section="settings"] .dash-icon { background: color-mix(in srgb, var(--sgm-settings) 15%, transparent) !important; color: var(--sgm-settings) !important; }