/* Load.Live 1.0 — huisstijl uit het merkboek 1.1 (Blackout, Chalk, Tally, Rack, Alu).
   Donker is de standaard; licht volgt het systeem of de keuze in de zijbalk. */
@font-face { font-family: 'Bebas Neue'; src: url('/assets/fonts/bebas-neue-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow-500-latin.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow-600-latin.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/plex-mono-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/assets/fonts/plex-mono-500-latin.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --ground: #0C1816; --rack: #132320; --rack-2: #1B2F2B; --lijn: rgba(245,243,239,.12); --lijn-sterk: rgba(245,243,239,.24); --veld-rand: rgba(245,243,239,.42);
  --tekst: #F5F3EF; --zacht: #9DB3AE; --tally: #FF4A3D; --tally-tekst: #FF7266; --tally-zacht: rgba(255,74,61,.14);
  --ok: #3FCFB8; --ok-zacht: rgba(63,207,184,.14); --let: #E7B04F; --let-zacht: rgba(231,176,79,.14);
  --knop: #F5F3EF; --knop-tekst: #0C1816; --focus: #F5F3EF; --schaduw: 0 18px 50px rgba(0,0,0,.45);
  --r: 4px; --r-klein: 2px;
  --display: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
  --body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #F2F1EC; --rack: #FBFAF7; --rack-2: #E8E7E1; --lijn: rgba(12,24,22,.13); --lijn-sterk: rgba(12,24,22,.26); --veld-rand: rgba(12,24,22,.52);
    --tekst: #0C1816; --zacht: #4F6964; --tally-tekst: #B8261B; --tally-zacht: rgba(255,74,61,.12);
    --ok: #136A5E; --ok-zacht: rgba(23,127,113,.12); --let: #7E5207; --let-zacht: rgba(138,90,8,.12); /* 1.1.2 fixC (A11Y-07, audit 2 nr. 12): als tekst ≥ 4,5:1 op ground, rack, rack-2 en de -zacht-vlakken */
    --knop: #0C1816; --knop-tekst: #F5F3EF; --focus: #0C1816; --schaduw: 0 18px 50px rgba(12,24,22,.18);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ground: #F2F1EC; --rack: #FBFAF7; --rack-2: #E8E7E1; --lijn: rgba(12,24,22,.13); --lijn-sterk: rgba(12,24,22,.26); --veld-rand: rgba(12,24,22,.52);
  --tekst: #0C1816; --zacht: #4F6964; --tally-tekst: #B8261B; --tally-zacht: rgba(255,74,61,.12);
  --ok: #136A5E; --ok-zacht: rgba(23,127,113,.12); --let: #7E5207; --let-zacht: rgba(138,90,8,.12); /* 1.1.2 fixC: zie hierboven */
  --knop: #0C1816; --knop-tekst: #F5F3EF; --focus: #0C1816; --schaduw: 0 18px 50px rgba(12,24,22,.18);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* ook bij klassen met een eigen display (.veld, .knop …) */
:root { --topbalk: 56px; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--tekst); font: 400 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-klein); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--knop); color: var(--knop-tekst); padding: 10px 14px; border-radius: var(--r); font-weight: 600; }
.skip:focus { top: 12px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.label { font: 500 11.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); }

/* ---------- schil ---------- */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: 100vh; }
/* 1.2.0 — de vier werelden: hoofdpagina's bovenaan, subpagina's links. De topbalk loopt over de
   volle breedte en blijft staan; de zijbalk plakt eronder. */
.topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 30; background: var(--ground); border-bottom: 1px solid var(--lijn); padding: 0 clamp(12px, 2vw, 20px); min-height: var(--topbalk); }
.menuknop { display: none; }
.werelden { display: flex; gap: 4px; margin-left: 8px; order: 1; overflow-x: auto; scrollbar-width: none; }
.topbar .belknop, .topbar .zoekknop { order: 8; }
.werelden::-webkit-scrollbar { display: none; }
.werelden a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--r); text-decoration: none; color: var(--zacht); font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.werelden a svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.werelden a:hover { color: var(--tekst); background: var(--rack); }
.werelden a[aria-current="page"] { color: var(--tekst); background: var(--rack-2); }
.wereldnaam { margin: 2px 10px 8px; }
.zijbalk { position: sticky; top: var(--topbalk); height: calc(100vh - var(--topbalk)); overflow-y: auto; border-right: 1px solid var(--lijn); padding: 18px 16px 18px; display: flex; flex-direction: column; gap: 6px; background: var(--ground); }
.zijbalk .merk.groot, .zijbalk .bij { display: none; }
/* de bel staat op de desktop in de topbalk; twee bellen naast elkaar is er een te veel */
.zijbalk .zoekrij .belknop { display: none; }
.merk { font: 400 26px/1 var(--display); letter-spacing: .04em; text-decoration: none; display: inline-block; white-space: nowrap; }
.merk.groot { font-size: 34px; padding: 0 8px; }
.merk .punt { display: inline-block; width: .17em; height: .17em; border-radius: 50%; background: var(--tally); margin: 0 .06em 0 .02em; vertical-align: baseline; }
.bij { margin: 4px 8px 16px; font-size: 13px; color: var(--zacht); }
.nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px; border-radius: var(--r); text-decoration: none; color: var(--zacht); font-weight: 500; }
.nav a svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav a:hover { color: var(--tekst); background: var(--rack); }
.nav a[aria-current="page"] { color: var(--tekst); background: var(--rack-2); }
.nav a[aria-current="page"]::after { content: ''; margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--tally); }
.nav .kop { margin: 14px 10px 4px; }
.navteller { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--rack-2); color: var(--tekst); font: 600 11px/20px var(--mono); text-align: center; }
.navteller.let { background: var(--tally); color: var(--knop-tekst); }
.nav a:has(.navteller)[aria-current="page"]::after { margin-left: 8px; }
.zijvoet { margin-top: auto; display: grid; gap: 12px; padding: 16px 8px 0; border-top: 1px solid var(--lijn); font-size: 14px; }
.terug { color: var(--zacht); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.terug:hover { color: var(--tekst); text-decoration: underline; }
.thema { display: flex; border: 1px solid var(--lijn-sterk); border-radius: var(--r); overflow: hidden; }
.thema button { flex: 1; border: 0; background: transparent; padding: 7px 4px; font-size: 13px; color: var(--zacht); cursor: pointer; min-height: 36px; }
.thema button[aria-pressed="true"] { background: var(--rack-2); color: var(--tekst); font-weight: 600; }
.ik { margin: 0; color: var(--zacht); font-size: 13.5px; overflow-wrap: anywhere; }
.link { background: none; border: 0; padding: 0; color: var(--zacht); text-decoration: underline; cursor: pointer; min-height: 32px; }
.link:hover { color: var(--tekst); }
.versie { font: 500 11px/1 var(--mono); color: var(--zacht); }
main { min-width: 0; padding: 32px clamp(16px, 4vw, 48px) 72px; outline: none; }
.laden { color: var(--zacht); }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 30; }

/* ---------- paginakop ---------- */
.kop-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.kop-pagina h1 { margin: 4px 0 0; font: 400 clamp(38px, 5vw, 56px)/.95 var(--display); letter-spacing: .03em; text-wrap: balance; }
.kop-pagina p { margin: 8px 0 0; color: var(--zacht); max-width: 62ch; }
.acties { display: flex; flex-wrap: wrap; gap: 8px; }
h2 { font: 600 17px/1.3 var(--body); margin: 0 0 12px; }

/* ---------- knoppen en velden ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-klein); border: 1px solid var(--lijn-sterk); background: transparent; font-weight: 600; font-size: 14.5px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.knop:hover { border-color: var(--tekst); }
.knop.hoofd { background: var(--knop); color: var(--knop-tekst); border-color: var(--knop); }
.knop.hoofd:hover { opacity: .9; }
.knop.gevaar:hover { border-color: var(--tally); color: var(--tally-tekst); }
.knop.klein { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
.knop[disabled] { opacity: .45; cursor: not-allowed; }
.icoonknop { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid transparent; background: transparent; border-radius: var(--r); cursor: pointer; color: var(--zacht); }
.icoonknop:hover { color: var(--tekst); border-color: var(--lijn-sterk); }
.icoonknop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.veld { display: grid; gap: 6px; align-content: start; }
.veld > span { font-weight: 600; font-size: 14px; }
.veld small { color: var(--zacht); font-size: 13px; }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search], select, textarea {
  width: 100%; min-height: 44px; padding: 9px 12px; border-radius: var(--r-klein); border: 1px solid var(--veld-rand); background: var(--rack); color: var(--tekst);
}
textarea { min-height: 88px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.rij { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.vink { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding-top: 10px; }
.vink input { width: 20px; height: 20px; margin: 0; accent-color: var(--tally); flex: none; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 600; font-size: 14px; padding: 0; margin-bottom: 6px; }
.keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.keuze { position: relative; }
.keuze input { position: absolute; opacity: 0; inset: 0; }
.keuze span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--lijn-sterk); border-radius: 999px; cursor: pointer; font-size: 14px; }
.keuze input:checked + span { background: var(--knop); color: var(--knop-tekst); border-color: var(--knop); font-weight: 600; }
.keuze input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- filters en zoeken ---------- */
.balk { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.balk input[type=search] { max-width: 320px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--lijn-sterk); background: transparent; cursor: pointer; font-size: 13.5px; color: var(--zacht); }
.chip[aria-pressed="true"] { background: var(--rack-2); color: var(--tekst); border-color: var(--tekst); font-weight: 600; }
.chip .n { font-family: var(--mono); font-size: 12px; margin-left: 6px; }

/* ---------- panelen, lijsten, tabellen ---------- */
.paneel { background: var(--rack); border: 1px solid var(--lijn); border-radius: var(--r); padding: 20px; }
.raster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.kengetallen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--lijn); border-radius: var(--r); margin-bottom: 28px; }
.kengetal { padding: 16px 18px; display: grid; gap: 4px; }
.kengetal + .kengetal { border-left: 1px solid var(--lijn); }
.kengetal b { font: 400 40px/1 var(--display); letter-spacing: .02em; }
.kengetal span { color: var(--zacht); font-size: 14px; }
.tabelwrap { position: relative; overflow-x: auto; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--rack); }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th { text-align: left; font: 500 11.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); padding: 12px 14px; border-bottom: 1px solid var(--lijn); white-space: nowrap; background: var(--rack); }
td { padding: 11px 14px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr.klikbaar { cursor: pointer; }
tbody tr.klikbaar:hover td { background: var(--rack-2); }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.leeg { padding: 28px 20px; color: var(--zacht); text-align: center; }
.sub { color: var(--zacht); font-size: 13.5px; }

/* ---------- status ---------- */
.status { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: var(--r-klein); border: 1px solid var(--lijn-sterk); color: var(--zacht); white-space: nowrap; }
.status.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.status.let { color: var(--let); border-color: color-mix(in srgb, var(--let) 50%, transparent); }
.status.uit { opacity: .7; text-decoration: line-through; }
a.status { text-decoration: none; }
a.status:hover { border-color: currentColor; }
.status.live { color: var(--tally-tekst); border-color: var(--tally); }
.status.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--tally); animation: tally 2.4s ease-in-out infinite; }
@keyframes tally { 50% { box-shadow: 0 0 10px rgba(255,74,61,.9); } }
.tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; background: var(--rack-2); font-size: 12.5px; margin: 2px 4px 2px 0; }

/* ---------- vandaag ---------- */
.dagen { display: grid; gap: 22px; }
.dag h2 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.dag h2 .mono { color: var(--zacht); font-size: 13px; font-weight: 400; }
.jobs { list-style: none; margin: 0; padding: 0; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--rack); }
.job { display: grid; grid-template-columns: 108px minmax(0,1fr) auto; gap: 4px 16px; align-items: center; padding: 12px 16px; }
.job + .job { border-top: 1px solid var(--lijn); }
.job time { font: 500 13.5px/1.4 var(--mono); color: var(--zacht); font-variant-numeric: tabular-nums; }
.job b { font-weight: 600; }
.job .sub { grid-column: 2; }
.job .status { grid-row: 1 / span 2; grid-column: 3; }

/* ---------- planning (week) ---------- */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; }
.weekdag { min-height: 180px; border-left: 1px solid var(--lijn); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.weekdag:first-child { border-left: 0; }
.weekdag.vandaag { background: var(--rack); }
.weekdag .wdkop { margin: 0; font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); display: flex; justify-content: space-between; }
.weekdag.vandaag .wdkop { color: var(--tally-tekst); }
.blok { border: 1px solid var(--lijn); border-left: 3px solid var(--lijn-sterk); border-radius: var(--r-klein); padding: 7px 8px; background: var(--ground); font-size: 13.5px; display: grid; gap: 2px; min-width: 0; }
.blok b { font-weight: 600; overflow-wrap: anywhere; }
.blok .mono { font-size: 12px; color: var(--zacht); }
.blok.ok { border-left-color: var(--ok); }
.blok.let { border-left-color: var(--let); }
.blok.live { border-left-color: var(--tally); }

/* ---------- rechtenmatrix ---------- */
.legende { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 14px; color: var(--zacht); font-size: 14px; }
.legende b { font-family: var(--mono); color: var(--tekst); }
.matrix { border-collapse: separate; border-spacing: 0; font-size: 14px; }
.matrix th, .matrix td { border-bottom: 1px solid var(--lijn); padding: 0; }
.matrix thead th { padding: 10px 4px; text-align: center; position: sticky; top: 0; z-index: 2; }
.matrix thead th:first-child { text-align: left; padding-left: 14px; left: 0; z-index: 3; }
.matrix th[scope=row] { position: sticky; left: 0; background: var(--rack); z-index: 1; padding: 6px 10px 6px 14px; text-align: left; font: 600 14px/1.25 var(--body); letter-spacing: 0; text-transform: none; color: var(--tekst); min-width: 230px; white-space: normal; }
.matrix th[scope=row] .sub { font-weight: 400; display: block; }
.matrix tr.groep th { background: var(--rack-2); padding: 8px 14px; font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); position: sticky; left: 0; }
.niv { width: 44px; height: 40px; border: 0; background: transparent; cursor: pointer; font: 600 14px/1 var(--mono); color: var(--zacht); position: relative; }
.niv:hover { background: var(--rack-2); }
.niv[data-n="B"] { color: var(--tekst); background: color-mix(in srgb, var(--tekst) 10%, transparent); }
.niv[data-n="W"] { color: var(--ok); background: var(--ok-zacht); }
.niv[data-n="E"] { color: var(--let); background: var(--let-zacht); }
.niv[data-n="L"] { color: var(--zacht); }
.niv[data-n="-"] { color: var(--zacht); }
.niv.afw::after { content: ''; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--tally); }
.niv[disabled] { cursor: default; }
.rijacties { white-space: nowrap; padding: 0 8px !important; }
tr.uitgezet th[scope=row], tr.uitgezet .niv { opacity: .5; }

/* ---------- kaarten ---------- */
.kaart { background: var(--rack); border: 1px solid var(--lijn); border-radius: var(--r); padding: 18px; display: grid; gap: 10px; align-content: start; }
.kaart .kaartkop { margin: 0; font: 600 18px/1.25 var(--body); }
.kaart .top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.kaart dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; }
.kaart dt { color: var(--zacht); }
.kaart dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- dialoog ---------- */
.dlg { border: 1px solid var(--lijn-sterk); border-radius: var(--r); padding: 0; background: var(--rack); color: var(--tekst); width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: var(--schaduw); }
.dlg::backdrop { background: rgba(0,0,0,.55); }
.dlg form { display: grid; gap: 16px; padding: 22px; }
.dlg .dlg-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dlg h2 { margin: 0; font: 400 32px/1 var(--display); letter-spacing: .03em; }
.dlg .voet { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 6px; border-top: 1px solid var(--lijn); }
.dlg .voet .rechts { display: flex; gap: 8px; margin-left: auto; }
.fout { color: var(--tally-tekst); font-weight: 600; margin: 0; }
.plaatsen { display: grid; gap: 8px; }
.plaats { display: grid; grid-template-columns: minmax(0, 1.2fr) 110px minmax(0, 1fr); gap: 8px; align-items: center; }

/* ---------- meldingen ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 60; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--knop); color: var(--knop-tekst); padding: 12px 16px; border-radius: var(--r); box-shadow: var(--schaduw); font-weight: 500; }
.toast.fout { background: var(--tally); color: #fff; }

.melding { border: 1px solid var(--lijn-sterk); border-left: 3px solid var(--tally); border-radius: var(--r); padding: 14px 16px; background: var(--rack); margin-bottom: 20px; }
.melding p { margin: 0; }
.twee { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.lijst { margin: 0; padding-left: 18px; color: var(--zacht); }
.lijst li { margin: 4px 0; }
.lijst b { color: var(--tekst); }

/* ---------- smal scherm ---------- */
@media (max-width: 960px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .topbar { flex-wrap: wrap; gap: 12px; z-index: 20; padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); min-height: 0; }
  .werelden { order: 9; flex-basis: 100%; margin-left: 0; padding-bottom: 2px; }
  .werelden a { padding: 0 11px; font-size: 14px; }
  .zijbalk .merk.groot, .zijbalk .bij { display: revert; }
  .zijbalk .bij { display: flex; }
  .menuknop { width: 44px; height: 44px; border: 1px solid var(--lijn-sterk); background: transparent; border-radius: var(--r); display: grid; place-items: center; cursor: pointer; }
  .menuknop svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
  .topbar .versie { margin-left: auto; }
  .zijbalk { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); z-index: 40; transform: translateX(-102%); transition: transform .22s ease; height: 100%; padding-top: 22px; }
  .zijbalk.open { transform: none; box-shadow: var(--schaduw); }
  .week { grid-template-columns: 1fr; }
  .weekdag { border-left: 0; border-top: 1px solid var(--lijn); min-height: 0; }
  .weekdag:first-child { border-top: 0; }
  .kengetallen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kengetal:nth-child(3) { border-left: 0; }
  .kengetal:nth-child(n+3) { border-top: 1px solid var(--lijn); }
  .twee { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rij { grid-template-columns: 1fr; }
  .job { grid-template-columns: 1fr auto; }
  .job time { grid-column: 1 / -1; }
  .job .sub { grid-column: 1; }
  .job .status { grid-row: 2 / span 2; grid-column: 2; }
  .plaats { grid-template-columns: 1fr 90px; }
  .plaats input[type=text] { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- audit 2 en 3 ---------- */
.rijlink { background: none; border: 0; padding: 0; font: 600 14.5px/1.4 var(--body); color: var(--tekst); text-align: left; cursor: pointer; min-height: 32px; }
.rijlink:hover { text-decoration: underline; }
.blokstatus { font: 500 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); }
.blok.live .blokstatus { color: var(--tally-tekst); }
.afwpunt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tally); vertical-align: 1px; margin-right: 4px; }
@media (max-width: 960px) {
  .zijbalk { visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
  .zijbalk.open { visibility: visible; transition: transform .22s ease, visibility 0s; }
}
.nw { white-space: nowrap; }

/* ================= Load.Live 1.0 — aanvullingen ================= */
.merk { color: var(--tekst); line-height: 0; }
.woordmerk { height: 20px; width: auto; display: block; }
.woordmerk .tally { fill: var(--tally); }
.merk.groot .woordmerk { height: 28px; }
.zijbalk .merk.groot { padding: 4px 8px 0; }
.bij { display: flex; gap: 6px; align-items: center; }
.editie { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--lijn-sterk); padding: 4px 6px; border-radius: var(--r-klein); color: var(--tekst); }
.editie.fl { border-color: var(--tally); color: var(--tally-tekst); }
.accountkeuze { display: grid; gap: 4px; margin: 0 8px 10px; }
.accountkeuze select { min-height: 40px; font-size: 14px; padding: 6px 8px; }
.accountnaam { margin: 0 8px 10px; font-weight: 600; font-size: 14px; }
.zoekvak { margin: 0 8px 8px; }
.zoekvak input { min-height: 40px; font-size: 14px; }
.voetrij { display: flex; justify-content: space-between; align-items: center; }
.zoekknop { margin-left: auto; }
main.wacht { opacity: .55; transition: opacity .15s .15s; }
.opstart { padding: 40px; }
.tally { color: var(--tally-tekst); }
.let { color: var(--let); }
.klein { font-size: 13px; }
.verplicht { color: var(--tally-tekst); font-style: normal; }
.veld.breed, .vink.breed { grid-column: 1 / -1; }
.rij > .veld:has(textarea) { grid-column: 1 / -1; }
input[type=password], input[type=date], input[type=time], input[type=datetime-local] {
  width: 100%; min-height: 44px; padding: 9px 12px; border-radius: var(--r-klein); border: 1px solid var(--veld-rand); background: var(--rack); color: var(--tekst);
}
input[readonly] { opacity: .75; }
.vink > span { display: grid; gap: 2px; }

/* aanmelden */
.aanmelden { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.aanmeldvak { width: min(400px, 100%); display: grid; gap: 16px; background: var(--rack); border: 1px solid var(--lijn); border-radius: var(--r); padding: 28px 24px; box-shadow: var(--schaduw); }
.aanmeldvak h1 { margin: 0 0 4px; }
.aanmeldvak .woordmerk { height: 34px; }
.aanmeldvak .knop { width: 100%; }

/* koppen en secties */
.kruimel { margin: 0 0 8px; }
.kruimel a { display: inline-flex; gap: 6px; align-items: center; color: var(--zacht); text-decoration: none; min-height: 32px; font-size: 14px; }
.kruimel a:hover { color: var(--tekst); }
.kruimel svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kop-pagina p .status { vertical-align: 1px; margin-right: 6px; }
.sectie { margin: 28px 0 0; }
.sectie > h2, .sectiekop { margin: 0 0 12px; }
.sectiekop { margin-top: 28px; }
.knop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.knop[aria-pressed="true"] { background: var(--rack-2); border-color: var(--tekst); }
.knoppenrij { display: inline-flex; gap: 4px; }
.voetnoot { margin-top: 10px; }
.rustig { margin: 0; padding: 10px 2px; }
.nw { white-space: nowrap; }
.kengetal b small { font: 400 22px/1 var(--display); color: var(--zacht); }
.melding h2 { margin: 0 0 6px; font-size: 15px; }
.melding.zacht { border-left-color: var(--lijn-sterk); }
.fout-melding { border-left-color: var(--tally); }
.fout-melding p + p { margin-top: 8px; }
.signalen { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.signalen li { display: flex; gap: 8px; align-items: baseline; }
.signalen li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--let); flex: none; transform: translateY(-1px); }
.signalen li.fout::before { background: var(--tally); }
.signalen a { color: var(--tekst); }
.blokje { margin-bottom: 24px; }

/* vandaag */
.dag h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font: 600 15.5px/1.3 var(--body); text-transform: capitalize; }
.dag h3 .mono { color: var(--zacht); font-size: 12.5px; font-weight: 400; text-transform: none; }
.job .rechtsboven { grid-row: 1 / span 2; grid-column: 3; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.job.rit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; vertical-align: -3px; }
.job.rit { background: color-mix(in srgb, var(--rack-2) 40%, transparent); }
.crewtel { font-size: 12px; color: var(--zacht); white-space: nowrap; }
.crewtel.tekort { color: var(--let); }
.shiftacties { grid-row: 1 / span 2; grid-column: 3; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* planning */
.blok { text-decoration: none; color: inherit; }
a.blok:hover { border-color: var(--lijn-sterk); background: var(--rack-2); }
.blok .sub { font-size: 12.5px; }
.blok .blokvoet { display: flex; justify-content: space-between; gap: 6px; align-items: center; flex-wrap: wrap; }
.blok.uit { opacity: .55; }
.blok.uit b { text-decoration: line-through; }
.blok.mijn { box-shadow: inset 0 0 0 1px var(--tally); }
.blok.prive { border-left-color: var(--alu, #7E9894); background: repeating-linear-gradient(135deg, transparent 0 6px, var(--rack) 6px 12px); }
.blok.rit { border-left-color: var(--zacht); }
.blok.rit svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; vertical-align: -2px; }

/* project */
.jobdagen { display: grid; gap: 12px; }
.jobdag.nu { border-color: var(--tally); }
.jobdag .rechtsboven { display: flex; gap: 6px; align-items: center; }
.jobdag .label { text-transform: uppercase; }
.kaart dl.calltimes, .calltimes { display: flex; grid-template-columns: none; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.calltimes div { display: grid; }
.calltimes dt { font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); }
.calltimes dd { margin: 0; font-size: 15px; }
details.crew summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; gap: 8px; }
.crewlijst { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.crewlijst li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: center; padding: 7px 0; border-top: 1px solid var(--lijn); font-size: 14px; }
.crewlijst li.geannuleerd, .crewlijst li.geweigerd { opacity: .55; }
.crewlijst a { color: var(--tekst); }
tr.groep th { background: var(--rack-2); font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); padding: 8px 14px; text-align: left; }

/* mensen */
.tag.hoofdtag { background: var(--knop); color: var(--knop-tekst); font-weight: 600; }
.twee > div { display: grid; gap: 16px; align-content: start; }
.attesten { list-style: none; margin: 0; padding: 0; display: grid; }
.attesten li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--lijn); }
.attesten li:first-child { border-top: 0; }
.rijlink[disabled] { cursor: default; text-decoration: none; }
.functiekeuze { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); max-height: 55vh; overflow-y: auto; padding-right: 4px; }
.fkeuze { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fkeuze .vink { min-height: 36px; padding-top: 6px; }
.hoofdkeuze { display: inline-flex; align-items: center; gap: 4px; font: 500 11px/1 var(--mono); color: var(--zacht); cursor: pointer; }
.hoofdkeuze input { accent-color: var(--tally); }

/* materiaal */
.periode { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--zacht); }
.periode input { width: auto; }
.tabelwrap.klein { max-height: 320px; overflow: auto; }
.artikelinfo { display: grid; gap: 8px; }
.artikelinfo .label { margin: 8px 0 0; }
.kaart.uitgezet { opacity: .6; }
.kaart .top .icoonknop { margin: -8px -8px 0 0; }
.kort { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 42ch; }

/* dialoog */
.dlg.breed { width: min(900px, calc(100vw - 32px)); }
.dlg form { max-height: calc(100vh - 48px); overflow-y: auto; }
.formulier .voet { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lijn); }
.formulier .rij { gap: 16px; }

/* rechten */
.matrixwrap { max-height: calc(100vh - 220px); overflow: auto; }
.matrix abbr { text-decoration: none; }
.uitleg { margin-top: 16px; }
.uitleg summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; margin: 8px 0 0; }
.modules div { display: flex; gap: 10px; }
.modules dd { margin: 0; color: var(--zacht); }

/* zoeken */
.zoekresultaten { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zoekresultaten a { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--rack); text-decoration: none; }
.zoekresultaten a:hover { border-color: var(--lijn-sterk); }

@media (max-width: 960px) {
  .woordmerk { height: 18px; }
  .kengetal b small { font-size: 18px; }
}
@media (max-width: 720px) {
  .verberg-gsm { display: none; }
  main { padding-top: 20px; }
  .crewlijst li { grid-template-columns: minmax(0, 1fr) auto; }
  .crewlijst li .mono { grid-column: 1; }
  .zoekresultaten a { grid-template-columns: 1fr; gap: 2px; }
  .job .rechtsboven, .shiftacties { grid-row: auto; grid-column: 1 / -1; justify-content: flex-start; }
  .kop-pagina .acties { width: 100%; }
}
@media print {
  .zijbalk, .topbar, .werelden, .acties, .balk, .kruimel { display: none !important; }
  .shell { display: block; }
  body { background: #fff; color: #000; }
}
@media (min-width: 961px) and (pointer: fine) {
  .nav a { min-height: 38px; }
  .nav .kop { margin: 10px 10px 2px; }
  .zijbalk { padding-top: 18px; }
}

/* tabbladen (projectscherm en elders) */
.tabbalk { display: flex; gap: 4px; border-bottom: 1px solid var(--lijn); margin: 0 0 22px; overflow-x: auto; scrollbar-width: none; }
.tabbalk a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; color: var(--zacht); text-decoration: none; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabbalk a:hover { color: var(--tekst); }
.tabbalk a[aria-current="page"] { color: var(--tekst); font-weight: 600; border-bottom-color: var(--tally); }
.tabbalk .n { font-size: 11.5px; color: var(--zacht); }
.bedrijf-tabs { margin-top: -6px; }

/* >>> 1.1.2 fixA — A11Y-12: geannuleerde/geweigerde shifts en jobdagen niet enkel via opacity (tekst bleef 2,2:1), maar in
   de zachte tekstkleur (≥ 4,5:1) mét doorstreping en het statuslabel dat de blokken al tonen. */
.blok.uit { opacity: 1; color: var(--zacht); border-style: dashed; border-left-style: solid; }
.blok.uit b, .blok.uit .mono { text-decoration: line-through; }
.status.uit { opacity: 1; color: var(--zacht); text-decoration: line-through; }
.crewlijst li.geannuleerd, .crewlijst li.geweigerd { opacity: 1; color: var(--zacht); }
.crewlijst li.geannuleerd .wie, .crewlijst li.geweigerd .wie { text-decoration: line-through; }
.crewlijst li.geannuleerd a, .crewlijst li.geweigerd a { color: var(--zacht); }
/* >>> 1.1.2 fixC: .kaartlijst — één herbruikbaar patroon voor lijsten op de gsm (audit 2, nr. 9).
   Gebruik: <table class="kaartlijst"> in een .tabelwrap; op elke <td> die op de gsm een kolomnaam nodig heeft data-l="Kolomnaam".
   Onder 720 px verdwijnt de kop en wordt elke rij een kaartje in twee kolommen: de eerste cel (nummer/naam) en cellen met de klasse
   .kaart-breed spannen de volle breedte, .kaart-acties zet knoppen naast elkaar, .verberg-gsm blijft verborgen. Boven 720 px een gewone tabel. */
@media (max-width: 720px) {
  table.kaartlijst thead { display: none; }
  table.kaartlijst, table.kaartlijst tbody { display: block; width: 100%; }
  table.kaartlijst tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 14px; border-top: 1px solid var(--lijn); }
  table.kaartlijst tbody tr:first-child { border-top: 0; }
  table.kaartlijst td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; min-width: 0; overflow-wrap: anywhere; }
  table.kaartlijst td:first-child, table.kaartlijst td.kaart-breed { grid-column: 1 / -1; }
  table.kaartlijst td[data-l]::before { content: attr(data-l); display: block; font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); }
  table.kaartlijst td.kaart-acties { display: flex; flex-wrap: wrap; gap: 6px; }
  table.kaartlijst .rijlink, table.kaartlijst td:first-child .mono { white-space: nowrap; }
  table.kaartlijst td.num { font-family: var(--mono); }
  table.kaartlijst tbody tr.klikbaar:hover { background: var(--rack-2); }
  table.kaartlijst tbody tr.klikbaar:hover td { background: transparent; }
  .tabelwrap:has(> table.kaartlijst) { overflow: visible; }
}
/* <<< 1.1.2 fixC */

/* ================================================================ viewlaag (1.2.0)
   Sorteerbare kolomkoppen, groepskoppen, de filterbalk en de weergavekiezer.
   Alle kleuren komen uit de tokens hierboven, dus licht en donker volgen mee. */

/* de kolomkop is een knop; hij mag niet groter of zwaarder lijken dan de kop zelf */
th .sorteer {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 5px; min-height: 24px;
}
th .sorteer:hover { color: var(--tekst); }
th .sorteer.aan { color: var(--tekst); font-weight: 600; }
th .sorteer .pijl { font-size: 9px; line-height: 1; }
th[aria-sort] .sorteer .pijl:empty { opacity: 0; }          /* ruimte vasthouden, geen gewiebel bij het sorteren */
th[aria-sort]:not([aria-sort="none"]) { background: var(--rack-2); }

/* groepskop in de tabel: één rij over de volle breedte */
tr.groepkop th {
  background: var(--rack-2); border-top: 1px solid var(--lijn-sterk);
  font: 600 12px/1.3 var(--body); letter-spacing: .04em; text-transform: none;
  color: var(--tekst); padding: 9px 14px; white-space: normal;
}
tr.groepkop th .n { font: 400 11.5px/1 var(--mono); color: var(--zacht); margin-left: 8px; }

/* de balk boven een lijst: zoeken, filters, groeperen, weergave */
.lijstbalk { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.lijstbalk .rek { flex: 1 1 auto; }
.lijstbalk select, .lijstbalk input[type=search], .lijstbalk input[type=date] { min-height: 36px; }
.lijstbalk .stil { font-size: 13px; color: var(--zacht); }

/* een actief filter als wegklikbaar label */
.filterlabels { display: flex; flex-wrap: wrap; gap: 6px; }
.filterlabel {
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 6px 0 10px;
  border: 1px solid var(--lijn-sterk); border-radius: 999px; background: var(--rack-2);
  font-size: 13px; color: var(--tekst);
}
.filterlabel b { font-weight: 600; }
.filterlabel button { background: none; border: 0; color: var(--zacht); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; }
.filterlabel button:hover { color: var(--tally-tekst); }

/* weergavekiezer */
.weergavekiezer { display: flex; align-items: center; gap: 8px; }
.weergavekiezer select { max-width: 220px; }
.weergavekiezer .eigen::before { content: '★ '; }

/* inline bewerken: de rij in bewerkstand */
tr.bewerkt { background: var(--let-zacht); }
tr.bewerkt td { padding-top: 7px; padding-bottom: 7px; }
tr.bewerkt input, tr.bewerkt select { width: 100%; min-width: 90px; min-height: 32px; font-size: 14px; }
td.rijacties { white-space: nowrap; text-align: right; }
td.rijacties .knop { min-height: 32px; padding: 0 10px; font-size: 13px; }

/* meer laden */
.meer { display: flex; justify-content: center; padding: 14px 0 0; }

/* rijen aanvinken en in bulk wijzigen */
th.kies, td.kies { width: 34px; padding-right: 0; text-align: center; }
th.kies input, td.kies input { width: 17px; height: 17px; margin: 0; accent-color: var(--rack-2); cursor: pointer; }
tr.gekozen { background: var(--let-zacht); }
.keuzebalk { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 10px 0 0;
  padding: 8px 12px; border: 1px solid var(--lijn-sterk); border-radius: 4px; background: var(--let-zacht); }
.keuzebalk b { font-family: var(--mono); font-size: 13px; }
.keuzebalk select { min-height: 34px; }

@media (max-width: 560px) {
  .lijstbalk { gap: 8px; }
  .keuzebalk { gap: 8px; }
  .keuzebalk select { flex: 1 1 100%; }
  .lijstbalk input[type=search] { flex: 1 1 100%; max-width: none; }
  .weergavekiezer { flex: 1 1 100%; }
  .weergavekiezer select { max-width: none; flex: 1 1 auto; }
}

/* ================= Load.Live 1.2.0 — Firma › Regels ================= */
/* merkjes die bij de regels horen: een wettelijke grens, een afwijking van de standaard, en iets stuk */
.status.wet { border-style: dashed; }
.status.grijs { opacity: .8; }
.status.stop { color: var(--tally-tekst); border-color: var(--tally); }
.regellijst { list-style: none; margin: 0; padding: 0; display: grid; }
.regellijst .regel { padding: 14px 16px; border-top: 1px solid var(--lijn); display: grid; gap: 6px; }
.regellijst .regel:first-child { border-top: 0; }
.regel.uit { opacity: .68; }
.regel-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.regel-kop b { font-size: 15.5px; }
.regel .sub { margin: 0; }
.regel-stand { margin: 0; }
.regel-acties { margin: 4px 0 0; }
.vinkrij { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 14px; max-height: 260px; overflow-y: auto; }
.vinkrij .vink { min-height: 36px; padding-top: 4px; }
.labellijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-height: 320px; overflow-y: auto; }
.mailscherm h2 { margin-top: 22px; }
.mailscherm .formulier h2:first-of-type { margin-top: 0; }
/* 1.2.0 — Firma › Abonnement: hoeveel van de opslag is op */
.abonnement .balkje { height: 10px; border-radius: 999px; background: var(--rack-2); overflow: hidden; margin: 4px 0; }
.abonnement .balkje > span { display: block; height: 100%; background: var(--tally); }
.abonnement .kv { margin: 0; }