:root { color-scheme: dark; --bg: #0f1420; --panel: #171d2b; --border: #2a3244; --text: #eef1f7; --text-muted: #9aa4b8; --green: #33c481; --yellow: #e0b64a; --red: #e0574a; --blue: #4a8fe0; --orange: #e0813a; --yellow-orange: #e0a23a; --yellow-green: #a8c93a; --cool-gray: #9aa4b8; --tint-red-bg: #3a1414; --tint-orange-bg: #3a2414; --tint-yellow-orange-bg: #3a2c14; --tint-yellow-bg: #3a2f14; --tint-yellow-green-bg: #2c3a14; --tint-green-bg: #123324; --tint-blue-bg: #142c3a; --event-card-label-text: #fff; } /* Licht thema: expliciete opt-in via het thema-toggle-knopje dat nav.js injecteert (public/theme.js). Bewust GEEN prefers-color-scheme media query — zonder opgeslagen voorkeur blijft iedereen het huidige donkere thema zien, ongewijzigd. De voorkeur wordt vóór de eerste render toegepast door public/theme.js (synchroon, in ), zodat er geen flits van het verkeerde thema optreedt. */ :root[data-theme="light"] { color-scheme: light; --bg: #f3f5fa; --panel: #ffffff; --border: #d7dce6; --text: #171d2b; --text-muted: #5c6478; --green: #1f8f5c; --yellow: #a67818; --red: #c73e30; --blue: #2f6fc2; --orange: #b85f1f; --yellow-orange: #b8791f; --yellow-green: #6b8f1f; --cool-gray: #5c6478; --tint-red-bg: #fbe4e1; --tint-orange-bg: #fbe9d9; --tint-yellow-orange-bg: #fbeed3; --tint-yellow-bg: #fbf1d0; --tint-yellow-green-bg: #eef3d9; --tint-green-bg: #dcf3e8; --tint-blue-bg: #dce8f9; --event-card-label-text: #171d2b; } /* Groen palet: onafhankelijke toggle naast licht/donker (zelfde toggle-mechanisme, public/theme.js). Vervangt de volledige vormgeving (achtergrond, panelen, randen, tekst, accent) door het Sharpwaves Blauwdruk-kleurenpalet — niet alleen de accentkleur. Gecombineerde attribuutselectors geven vanzelf voorrang boven de losse :root- en :root[data-theme="light"]-blokken hierboven, ongeacht bronvolgorde. */ :root[data-accent="green"] { --bg: #0c1213; --panel: #131c1d; --border: #24312f; --text: #e7edec; --text-muted: #86999b; --blue: #46bfaf; --tint-blue-bg: #142c29; } :root[data-theme="light"][data-accent="green"] { --bg: #f6f8f8; --panel: #ffffff; --border: #d9e1e1; --text: #101819; --text-muted: #66797c; --blue: #0c6f66; --tint-blue-bg: #e0efed; } * { box-sizing: border-box; } body { margin: 0; padding: 24px 32px 48px; background: var(--bg); color: var(--text); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; } .topbar { display: flex; align-items: flex-end; justify-content: flex-start; gap: 48px; position: relative; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--border); } .topbar h1 { font-size: 32px; margin: 0; } .topbar-title { display: flex; flex-direction: column; } /* Overkoepelend merklabel boven de paginatitel — klein en gedempt zodat de paginanaam zelf (bv. "Planning (working)") het primaire element blijft. */ .app-brand { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue); margin-bottom: 2px; } .topbar-meta { display: flex; align-items: flex-start; flex-grow: 1; gap: 20px; color: var(--text-muted); font-size: 15px; } /* De navitems ernaast (Sales, Status, Licht, ...) reserveren onderaan een onzichtbare 6px (padding-bottom 4px + border-bottom 2px transparant, voor de actieve-onderstreping) waardoor hun tekst zelf 3px boven het midden van hun eigen box staat i.p.v. er precies in. Badge en tijdstip hebben die reservering niet, dus zonder correctie staan ze — ondanks align-self: center — 3px lager dan de rest van de rij. */ .topbar-meta > #mode-badge, .topbar-meta > #updated-at, .topbar-meta > .topbar-icon-button { align-self: center; position: relative; top: -3px; } /* Hoofdnavigatie als klik/hover-dropdowns: 6 vaste categorieën (Sales/ Marketing/Projects/Support/Insight/Finance) i.p.v. alle paginalinks los naast elkaar. Groep-triggers zijn platte tekst (geen "pill"-vak meer). .nav-dropdown is een brede strook die van links tot rechts onder de hele .topbar doorloopt (left:0; right:0, tegen .topbar's position:relative), met de items daarbinnen links uitgelijnd (align-items: flex-start) op de positie van Sales — ongeacht welke categorie open staat, dus nooit onder de aangeklikte knop zelf. Open/dicht wordt gestuurd door de .open class op .nav-menu-item, gezet door nav.js (klik + hover-met-intent-to-leave- vertraging + toetsenbord), niet meer door een pure :hover-regel. */ .nav-menu { display: flex; align-items: center; flex-grow: 1; gap: 26px; } /* Sales t/m Finance blijven links gepakt; nav.js markeert met deze klasse welk item daadwerkelijk als eerste ná de dropdown-groepen staat (Status, of als een rol daar geen toegang toe heeft: Beheer/het thema-knopje) — margin-left: auto duwt dat item en alles erna in één keer naar de rechterkant van de navbalk. Bewust niet hardcoded aan Status gekoppeld (via [href="status.html"]), want die link ontbreekt voor rollen zonder status.html-toegang, waardoor er dan niets meer duwde. */ .nav-menu-trailing-start { margin-left: auto; } .nav-menu-label { display: inline-flex; align-items: center; gap: 6px; padding: 0 0 4px; margin: 0; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font: inherit; font-weight: 600; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .nav-chevron { width: 9px; height: 6px; opacity: 0.7; transition: transform 0.15s ease; } .nav-menu-item:hover .nav-menu-label, .nav-menu-item.open .nav-menu-label, .nav-menu-item.current-group .nav-menu-label { color: var(--text); border-bottom-color: var(--blue); } .nav-menu-item.open .nav-chevron { transform: rotate(180deg); } .nav-dropdown { display: none; flex-direction: column; align-items: flex-start; gap: 2px; position: absolute; top: 100%; left: 0; right: 0; /* --nav-dropdown-inset wordt door nav.js gezet op de werkelijke x-positie van Sales (eerste nav-item) t.o.v. .topbar — dat verschilt per pagina door de wisselende breedte van de paginatitel ervoor. */ padding: 16px 32px 16px var(--nav-dropdown-inset, 32px); background: var(--panel); border-bottom: 1px solid var(--border); z-index: 30; } .nav-menu-item.open .nav-dropdown { display: flex; } /* Operations bundelt sinds kort ook de vroegere Projects- en Support-groepen — te veel links voor één kolom, dus twee kolommen naast elkaar i.p.v. één lange lijst. */ .nav-dropdown-columns { flex-direction: row; gap: 40px; } .nav-dropdown-column { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .nav-link { color: var(--blue); text-decoration: none; font-weight: 600; padding: 6px 14px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border); transition: background 0.15s ease, border-color 0.15s ease; } .project-link { color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--text-muted); } .project-link:hover { color: var(--blue); border-bottom-color: var(--blue); } .nav-link:hover { text-decoration: none; background: var(--border); } .nav-link.current { color: var(--text); cursor: default; pointer-events: none; background: var(--border); border-color: var(--blue); } .nav-link.current:hover { background: var(--border); } /* Dropdown-inhoud: verticale lijst i.p.v. de algemene .nav-link "pill". */ .nav-dropdown .nav-link { display: block; white-space: nowrap; /* Experimenteel: zelfde kleurgedrag als de groep-koppen (.nav-menu-label) i.p.v. blauwe linkkleur — ter beoordeling. */ color: var(--text-muted); background: none; border: none; border-radius: 6px; padding: 8px 12px; } .nav-dropdown .nav-link:hover { color: var(--text); background: var(--bg); } .nav-dropdown .nav-link.current { color: var(--text); background: var(--border); border-color: transparent; } .nav-dropdown .nav-link.current:hover { background: var(--border); } /* Platte "Status"-link op het topniveau van de nav (rechtstreeks kind van .nav-menu, dus niet in een dropdown) krijgt dezelfde platte-tekstbehandeling als de groep-triggers, i.p.v. de algemene .nav-link "pill"-styling. */ .nav-menu > .nav-link { color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 0 0 4px; } .nav-menu > .nav-link:hover { color: var(--text); background: none; border-bottom-color: var(--blue); } .nav-menu > .nav-link.current { color: var(--text); background: none; border-bottom-color: var(--blue); } .nav-menu > .nav-link.current:hover { background: none; } /* "Uitloggen"/"Licht"/"Donker" zijn