/* 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: 'Barlow'; src: url('/assets/fonts/barlow-700-latin.woff2') format('woff2'); font-weight: 700; font-display: swap; }   /* 1.5.9.9B: sectielabels en statuspillen */
@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 {
  /* 1.5.9.9B (L62, videostijl): grond #0F1C1A, kaart #1A2B28 zonder rand, vak in een kaart #223532 */
  --ground: #0F1C1A; --rack: #1A2B28; --rack-2: #223532; --lijn: rgba(245,243,239,.10); --lijn-sterk: rgba(245,243,239,.22); --veld-rand: rgba(245,243,239,.24);
  --tekst: #F5F3EF; --zacht: #9DB3AE; --tally: #FF4A3D; --tally-tekst: #FF7266; --tally-zacht: rgba(255,74,61,.14);
  --ok: #00FFF0; --ok-zacht: rgba(0,255,240,.16); --let: #E7B04F; --let-zacht: rgba(231,176,79,.17);
  --knop: #F5F3EF; --knop-tekst: #0C1816; --focus: #F5F3EF; --schaduw: 0 18px 50px rgba(0,0,0,.45);
  /* 1.5.2 (#11): Load.Live by Stageware — accent cyaan op donker (14,3:1), petrol op licht (10:1); koraal = signaal. Per firma overschreven via --firma-* (zie app.ts). */
  --accent: var(--firma-accent-donker, #00FFF0); --accent-tekst: var(--firma-tekst-donker, #0C1816); --accent-zacht: color-mix(in srgb, var(--accent) 14%, transparent);
  --tally: var(--firma-signaal, #FF4A3D);
  /* 1.5.6 (#6): lopend (onderweg, in uitvoering) is ALTIJD rood — niet de signaalkleur van de firma */
  --live: #FF4A3D; --live-tekst: #FF7266; --live-zacht: rgba(255,74,61,.14);
  --knop: var(--accent); --knop-tekst: var(--accent-tekst); --focus: var(--accent);
  /* 1.5.9.9B: afrondingen uit de video — kaart 16, vak/rij 12, invoer 10, knoppen/filters/status/tellers pil */
  --r: 12px; --r-klein: 8px; --r-kaart: 16px; --r-vak: 12px; --r-veld: 10px; --r-pil: 999px;
  --vak: var(--rack-2); --knop-lijn: rgba(245,243,239,.55); --kaart-schaduw: 0 0 #0000; --toast: #F5F3EF; --toast-tekst: #0F1C1A;
  /* statuskleuren (balk links + pil): bevestigd cyaan, in optie amber, aangevraagd/te factureren grijs, lopend rood */
  --st-grijs: #9DB3AE;
  --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,.34);
    --tekst: #0C1816; --zacht: #4F6964; --tally-tekst: #B8261B; --tally-zacht: rgba(255,74,61,.12); --live-tekst: #B8261B; --live-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);
    --ground: #FFFFFF; --rack: #F1F4F3; --rack-2: #E3E9E7;   /* 1.5.2 (#11): wit als achtergrond; 1.5.9.9B: kaarten zonder rand → iets donkerder vlak */
    --knop-lijn: rgba(12,24,22,.55); --kaart-schaduw: 0 1px 2px rgba(12,24,22,.05); --toast: #0F1C1A; --toast-tekst: #F5F3EF; --st-grijs: #4F6964;
    --accent: var(--firma-accent-licht, #004B47); --accent-tekst: var(--firma-tekst-licht, #FFFFFF); --accent-zacht: color-mix(in srgb, var(--accent) 10%, transparent);
    --knop: var(--accent); --knop-tekst: var(--accent-tekst); --focus: var(--accent);
    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,.34);
  --tekst: #0C1816; --zacht: #4F6964; --tally-tekst: #B8261B; --tally-zacht: rgba(255,74,61,.12); --live-tekst: #B8261B; --live-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);
  --ground: #FFFFFF; --rack: #F1F4F3; --rack-2: #E3E9E7;
  --knop-lijn: rgba(12,24,22,.55); --kaart-schaduw: 0 1px 2px rgba(12,24,22,.05); --toast: #0F1C1A; --toast-tekst: #F5F3EF; --st-grijs: #4F6964;
  --accent: var(--firma-accent-licht, #004B47); --accent-tekst: var(--firma-tekst-licht, #FFFFFF); --accent-zacht: color-mix(in srgb, var(--accent) 10%, transparent);
  --knop: var(--accent); --knop-tekst: var(--accent-tekst); --focus: var(--accent);
  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; }
/* 1.5.9.9B: sectielabel = Barlow 700, hoofdletters, 1,2px, in de kleur van de betekenis (grijs = neutraal) */
.label { font: 700 11.5px/1.4 var(--body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--zacht); }
.label.info, .label.cyaan { color: var(--accent); } .label.taak, .label.amber { color: var(--let); } .label.conflict, .label.nood { color: var(--tally-tekst); }

/* ---------- 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-pil); 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-color: var(--rack); }
.werelden a[aria-current="page"] { color: var(--tekst); background: var(--accent-zacht); }
.werelden a[aria-current="page"] svg { color: var(--accent); }
.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 12px; border-radius: var(--r-vak); 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-color: var(--rack); }
.nav a[aria-current="page"] { color: var(--tekst); background-color: var(--rack); }
.nav a[aria-current="page"] svg { color: var(--accent); }
.nav a[aria-current="page"]::after { content: ''; margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.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(--let); color: #0F1C1A; }   /* 1.5.9.9B: een teller is geen fout → amber, geen rood */
.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; gap: 2px; padding: 3px; background: var(--vak); border-radius: var(--r-pil); overflow: hidden; }
.thema button { flex: 1; border: 0; background: transparent; padding: 7px 4px; font-size: 13px; color: var(--zacht); cursor: pointer; min-height: 32px; border-radius: var(--r-pil); }
.thema button[aria-pressed="true"] { background: var(--accent); color: var(--accent-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 ---------- */
/* 1.5.9.9B: primair = cyaan pil met donkere tekst; secundair = omlijnde pil (1,5px, wit 55%); verwijderen = rood omlijnde pil */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-pil); border: 1.5px solid var(--knop-lijn); 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 { border-color: color-mix(in srgb, var(--tally) 70%, transparent); color: var(--tally-tekst); }
.knop.gevaar:hover { border-color: var(--tally); color: var(--tally-tekst); background: var(--tally-zacht); }
.knop.nood { background: var(--tally); border-color: var(--tally); color: #fff; }   /* enkel voor een noodgeval (bv. noodnummer bellen) */
.knop.klein { min-height: 36px; padding: 0 14px; 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-pil); 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:not([type]), input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search], select, textarea {   /* 1.6.0-audit (3.6): ook een input zonder type */
  width: 100%; min-height: 44px; padding: 9px 12px; border-radius: var(--r-veld); border: 1px solid var(--veld-rand); background: var(--vak); 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(--accent); 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 16px; border: 1px solid transparent; background: var(--vak); border-radius: var(--r-pil); cursor: pointer; font-size: 14px; }
.keuze input:checked + span { background: var(--accent); color: var(--accent-tekst); border-color: var(--accent); 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; }
/* 1.5.9.9B: filters = pillen in een vak #223532, gekozen = cyaan */
.chip { min-height: 36px; padding: 0 14px; border-radius: var(--r-pil); border: 1px solid transparent; background: var(--vak); cursor: pointer; font-size: 13.5px; color: var(--zacht); }
.chip:hover { color: var(--tekst); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-tekst); border-color: var(--accent); font-weight: 600; }
.chip .n { font-family: var(--mono); font-size: 12px; margin-left: 6px; }

/* ---------- panelen, lijsten, tabellen ---------- */
.paneel { background-color: var(--rack); border: 0; border-radius: var(--r-kaart); padding: 20px; box-shadow: var(--kaart-schaduw); }
.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: 0; background-color: var(--rack); border-radius: var(--r-kaart); margin-bottom: 28px; box-shadow: var(--kaart-schaduw); }
.kengetal { padding: 16px 18px; display: grid; gap: 4px; }
.kengetal + .kengetal { border-left: 1px solid var(--lijn); }
.kengetal b { font: 400 44px/1 var(--display); letter-spacing: .02em; }
.kengetal span { color: var(--zacht); font-size: 14px; }
.tabelwrap { position: relative; overflow-x: auto; border: 0; border-radius: var(--r-kaart); background-color: var(--rack); box-shadow: var(--kaart-schaduw); }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th { text-align: left; font: 700 11.5px/1.3 var(--body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--zacht); padding: 12px 14px; border-bottom: 1px solid var(--lijn); white-space: nowrap; background-color: 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 ---------- */
/* 1.5.9.9B: statuspil — hoofdletters, Barlow 700, 11px, achtergrond = statuskleur 16–18%, tekst = statuskleur; "te factureren" omlijnd */
.status { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-pil); border: 1px solid transparent; color: var(--st-grijs); background: color-mix(in srgb, var(--st-grijs) 16%, transparent); white-space: nowrap; }
.status.ok { color: var(--ok); background: var(--ok-zacht); }
.status.let { color: var(--let); background: var(--let-zacht); }
.status.uit { opacity: .7; text-decoration: line-through; }
/* 1.6.0-audit (3.4): venster Bulk-upload — voortgangsbalk via een klasse (geen inline style: CSP), lange pillen lopen om (gsm) */
.uploadtaak-voortgang { width: 100%; }
[data-uploadtaak-venster] .lijstje li { flex-wrap: wrap; }
[data-uploadtaak-venster] .lijstje li > span { min-width: 0; overflow-wrap: anywhere; }
[data-uploadtaak-venster] .status { white-space: normal; line-height: 1.3; max-width: 100%; overflow-wrap: anywhere; }
.status.fout { color: var(--tally-tekst, var(--live-tekst)); background: var(--tally-zacht); border-color: var(--tally, var(--live)); font-weight: 700; }   /* 1.5.7 (#4): PROBLEEM */
.status[data-s="te_factureren"] { background: transparent; border: 1.5px solid currentColor; }
a.status { text-decoration: none; }
a.status:hover { border-color: currentColor; }
.status.live { color: var(--live-tekst); background: var(--live-zacht); }
.status.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--live); 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 10px; border-radius: var(--r-pil); background: var(--vak); 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; }
/* 1.5.9.9B: elke job is een eigen kaart met de statusbalk links (5px) en het uur groot in Bebas */
.jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.job { display: grid; grid-template-columns: 116px minmax(0,1fr) auto; gap: 4px 16px; align-items: center; padding: 14px 18px 14px 20px; background-color: var(--rack); border-radius: var(--r-kaart); box-shadow: var(--kaart-schaduw); }
.job time { font: 400 22px/1.05 var(--display); letter-spacing: .03em; color: var(--tekst); 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: 0; background-color: var(--rack); border-radius: var(--r-kaart); 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-2); }
.weekdag .wdkop { margin: 0; font: 700 11.5px/1.3 var(--body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--zacht); display: flex; justify-content: space-between; }
.weekdag.vandaag .wdkop { color: var(--accent); }
.blok { border: 0; border-left: 4px solid var(--st-grijs); border-radius: var(--r-klein); padding: 7px 8px 7px 9px; 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(--live); }

/* ---------- 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-color: 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(--let); }
.niv[disabled] { cursor: default; }
.rijacties { white-space: nowrap; padding: 0 8px !important; }
tr.uitgezet th[scope=row], tr.uitgezet .niv { opacity: .5; }

/* ---------- kaarten ---------- */
/* 1.5.9.9B: kaart #1A2B28 zonder rand, afronding 16px; een status toont zich als balk links (zie onderaan, "statusbalk") */
.kaart { background-color: var(--rack); border: 0; border-radius: var(--r-kaart); padding: 18px 20px; display: grid; gap: 10px; align-content: start; box-shadow: var(--kaart-schaduw); }
.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); border-radius: var(--r-kaart); padding: 0; background-color: 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 ---------- */
/* 1.5.9.9B: toast = witte pil onderaan met donkere tekst; een fout = klein vak met rode rand en rood icoon */
.toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; z-index: 60; width: max-content; max-width: min(460px, calc(100vw - 32px)); }
.toast { background: var(--toast); color: var(--toast-tekst); padding: 11px 20px; border-radius: var(--r-pil); box-shadow: var(--schaduw); font-weight: 600; font-size: 14.5px; }
.toast.fout { background-color: var(--rack); color: var(--tekst); border: 1.5px solid var(--tally); border-radius: var(--r-vak); display: flex; gap: 10px; align-items: flex-start; padding: 11px 16px; font-weight: 500; }
.toast.fout::before { content: '!'; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--tally); color: #fff; font: 700 13px/20px var(--body); text-align: center; }

/* een melding is een kaart met een balk links: cyaan = info, rood enkel bij een fout of conflict (.fout-melding, .overlap) */
.melding { border: 0; border-radius: var(--r-kaart); padding: 14px 18px 14px 22px; background-color: var(--rack); margin-bottom: 20px; background-image: linear-gradient(90deg, var(--accent) 0 5px, transparent 5px); }
.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; }
}
/* >>> 1.3.0: op een smal scherm (gsm, portret) passen de vier werelden niet naast elkaar met volledige labels; ze schoven weg
 * achter de rand zonder dat je het zag. Nu: vier gelijke vakken, icoon boven een kort label, altijd alle vier in beeld. */
@media (max-width: 560px) {
  .werelden { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; overflow: visible; }
  .werelden a { flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; padding: 6px 2px; font-size: 11.5px; line-height: 1.1; text-align: center; position: relative; min-width: 0; }
  .werelden a .wl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .werelden a svg { width: 20px; height: 20px; }
  .werelden a .navteller { position: absolute; top: 4px; right: 4px; margin: 0; height: 18px; min-width: 18px; font-size: 10px; line-height: 18px; padding: 0 5px; }
}
@media (max-width: 960px) {
  .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(--live-tekst); }
.afwpunt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--let); 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: 700 10.5px/1 var(--body); letter-spacing: 1.2px; text-transform: uppercase; border: 1px solid var(--lijn-sterk); padding: 4px 8px; border-radius: var(--r-pil); color: var(--tekst); }
.editie.fl { border-color: var(--accent); color: var(--accent); }
.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; }
/* 1.7.0-s08: taalkeuze in het gebruikersmenu (onder Thema) en op het aanmeldscherm */
.taalkeuze { display: grid; gap: 4px; margin: 8px 0; }
.taalkeuze select { min-height: 36px; font-size: 14px; padding: 4px 8px; }
.aanmeldvak .taalkeuze { max-width: 220px; margin: 12px auto 0; text-align: left; }
.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(--accent); 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-veld); border: 1px solid var(--veld-rand); background: var(--vak); 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-color: var(--rack); border: 0; border-radius: var(--r-kaart); 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(--accent-zacht); border-color: var(--accent); }
.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 { background-image: linear-gradient(90deg, var(--lijn-sterk) 0 5px, transparent 5px); }
.melding.fout-melding, .fout-melding { background-image: linear-gradient(90deg, var(--tally) 0 5px, transparent 5px); }
.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: var(--rack); }
.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(--accent); }
.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 { outline: 1.5px solid var(--accent); outline-offset: -1.5px; }   /* 1.5.9.9B: vandaag = cyaan omlijnd (rood blijft voor lopend/conflict) */
.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: 700 10.5px/1.3 var(--body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--zacht); }
.calltimes dd { margin: 0; font: 400 28px/1 var(--display); letter-spacing: .03em; }   /* 1.5.9.9B: uren groot in Bebas */
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: 700 11px/1.3 var(--body); letter-spacing: 1.2px; 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(--accent); }

/* 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 transparent; border-radius: var(--r-vak); background-color: 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) */
/* 1.5.9.9B: tabbladen als segment — pillen in een vak, gekozen = cyaan */
.tabbalk { display: flex; gap: 2px; padding: 4px; background: var(--vak); border-radius: var(--r-pil); width: fit-content; max-width: 100%; margin: 0 0 22px; overflow-x: auto; scrollbar-width: none; }
.tabbalk a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; color: var(--zacht); text-decoration: none; font-weight: 600; font-size: 14.5px; white-space: nowrap; border-radius: var(--r-pil); }
.tabbalk a:hover { color: var(--tekst); }
.tabbalk a[aria-current="page"] { color: var(--accent-tekst); background: var(--accent); }
.tabbalk .n { font-size: 11.5px; color: inherit; opacity: .75; }
.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: 700 10.5px/1.4 var(--body); letter-spacing: 1.2px; 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 12px;
  border: 1px solid var(--accent); border-radius: var(--r-pil); background: var(--accent-zacht);
  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 14px; border: 0; border-radius: var(--r-vak); 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); background: var(--tally-zacht); }
.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(--accent); }
.abonnement .kv { margin: 0; }

/* ================= 1.4.7 — schil: hoofdblok (boven) › tabbladen (links) › contextrij (boven de pagina) ================= */
.shell { grid-template-rows: auto auto minmax(0, 1fr); }
.zijbalk { grid-column: 1; grid-row: 2 / span 2; top: var(--topbalk); height: calc(100vh - var(--topbalk)); }
.shell > main { grid-column: 2; grid-row: 3; }
.shell:not(.met-contextrij) > main { grid-row: 2 / span 2; }
.zijbalk .wereldnaam { margin: 8px 10px 2px; font-size: 12px; }
.zijbalk .nav .kop { margin: 12px 10px 2px; list-style: none; }
.zijbalk .nav .kop:first-child { margin-top: 2px; }
.tabbladen { grid-column: 2; grid-row: 2; position: sticky; top: var(--topbalk); z-index: 29; display: flex; align-items: center; gap: 4px; padding: 6px clamp(12px, 2vw, 20px); background: var(--ground); border-bottom: 1px solid var(--lijn); min-height: 46px; overflow-x: auto; scrollbar-width: none; }
.tabbladen::-webkit-scrollbar { display: none; }
.tabbladen[hidden] { display: none; }
.tabgroep { display: inline-flex; align-items: center; gap: 2px; }
.tabbladen a { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: var(--r-pil); text-decoration: none; color: var(--zacht); font-weight: 600; font-size: 14px; white-space: nowrap; }
.tabbladen a:hover { color: var(--tekst); background-color: var(--rack); }
.tabbladen a[aria-current="page"] { color: var(--accent-tekst); background: var(--accent); }
@media (max-width: 960px) {
  .shell > main, .shell:not(.met-contextrij) > main { grid-column: 1; grid-row: auto; }
  .tabbladen { grid-column: 1; grid-row: auto; position: static; padding: 4px 12px; }
  .zijbalk { grid-row: auto; top: 0; height: 100%; }
  .werelden { display: flex; overflow-x: auto; }
}
@media print { .tabbladen { display: none !important; } }
@media (max-width: 560px) {
  .werelden { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .werelden a .wl { font-size: 10.5px; }
}

/* 1.4.7 — meerkeuzeveld met vinkjes (tools en PBM, lijsten) */
fieldset.vinken { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.vinken legend { font-weight: 600; font-size: 13.5px; margin-bottom: 6px; padding: 0; }

/* ================= 1.4.7 — To-do (#5) ================= */
.chip.aan { background: var(--accent); color: var(--accent-tekst); border-color: var(--accent); font-weight: 600; }
.td-snel { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; padding: 6px 6px 6px 14px; border: 1px solid transparent; border-radius: var(--r-vak); background-color: var(--rack); }
.td-snel:focus-within { border-color: var(--tekst); }
.td-snel input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 15px; min-height: 40px; color: var(--tekst); }
.td-snel input:focus { outline: none; }
.td-plus svg { width: 18px; height: 18px; stroke: var(--zacht); fill: none; stroke-width: 2; }
.td-hulp { margin: 2px 0 12px; font-size: 12px; }
.td-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.td-chips .chip { display: inline-flex; align-items: center; gap: 6px; }
.td-chips .chip b { font: 500 12px/1 var(--mono); }
.td-chips .chip b.laat { color: var(--tally-tekst); }
.td-chips .chip.met-kleur { border-left: 4px solid var(--lijstkleur); }
.td-scheiding { width: 1px; height: 22px; background: var(--lijn-sterk); margin: 0 4px; }
.td-laatbolletje { width: 7px; height: 7px; border-radius: 50%; background: var(--tally); display: inline-block; }
.td-groep { margin-top: 18px; }
.td-groep.laat .sectiekop { color: var(--tally-tekst); }
.td-lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.taak { display: flex; align-items: flex-start; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--lijn); background: var(--ground); transition: opacity .3s, transform .3s; }
.taak.sleept { opacity: .4; }
.taak.gekozen { background: var(--rack-2); }
.taak.afvinken { opacity: .35; transform: translateX(8px); }
.td-vink { flex: none; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--veld-rand); background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.taak.prio-3 .td-vink { border-color: var(--let); }   /* 1.5.9.9B: prioriteit is geen fout → amber; rood blijft voor "te laat" */
.taak.prio-2 .td-vink { border-color: color-mix(in srgb, var(--let) 55%, var(--zacht)); }
.td-vink span { width: 10px; height: 6px; border: solid transparent; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); }
.td-vink:hover span, .taak.klaar .td-vink span, .taak.afvinken .td-vink span { border-color: currentColor; }
.taak.klaar .td-vink, .taak.afvinken .td-vink { background: var(--rack-2); border-color: var(--zacht); }
.td-hoofd { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; background: none; border: 0; padding: 2px 0; cursor: pointer; color: var(--tekst); font: inherit; }
.td-titel { font-weight: 600; overflow-wrap: anywhere; }
.taak.klaar .td-titel, .taak.afvinken .td-titel { text-decoration: line-through; color: var(--zacht); }
.td-notitie { font-size: 13px; color: var(--zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--zacht); }
.td-meta svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.td-datum.laat { color: var(--tally-tekst); font-weight: 600; }
.td-datum.nu { color: var(--tekst); font-weight: 600; }
.td-meta .td-lijstnaam.met-kleur { color: var(--lijstkleur); }
.td-blok { font: 700 10.5px/1.6 var(--body); letter-spacing: 1.2px; text-transform: uppercase; border: 0; background: var(--vak); border-radius: var(--r-pil); padding: 1px 8px; }
.td-auto { font-style: italic; }
.td-project { color: inherit; }
.td-prio { flex: none; font: 700 13px/1 var(--mono); color: var(--let); margin-top: 6px; }
.taak.prio-1 .td-prio { color: var(--zacht); } .taak.prio-2 .td-prio { color: color-mix(in srgb, var(--let) 55%, var(--zacht)); }
.td-greep { flex: none; cursor: grab; color: var(--zacht); opacity: .5; margin-top: 4px; user-select: none; letter-spacing: -2px; }
.taak:hover .td-greep { opacity: 1; }
.td-kies { margin-top: 6px; width: 18px; height: 18px; }
.td-ongedaan { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 14px; background: var(--toast); color: var(--toast-tekst); padding: 8px 8px 8px 20px; border-radius: var(--r-pil); box-shadow: var(--schaduw); max-width: calc(100vw - 32px); font-weight: 600; }
.td-ongedaan .knop { background: transparent; color: inherit; border-color: currentColor; }
.td-checklist ul { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 4px; }
.td-checklist li { display: flex; align-items: center; gap: 6px; }
.td-checklist li .vink { flex: 1; }
.td-checklist li input[type=text] { width: 100%; min-height: 34px; }
@media (max-width: 560px) { .td-snel .knop { display: none; } .td-greep { display: none; } }

/* 1.4.7 (#24): Instellingen › Documenten */
.ds-basis .rij { align-items: flex-start; }
.ds-logo-rij { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ds-logo-rij img { max-height: 40px; max-width: 180px; background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 4px; }
.ds-soorten { margin: 16px 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.ds-werk { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 16px; align-items: start; }
.ds-form .ds-groep { border: 0; border-top: 1px solid var(--lijn); margin: 12px 0 0; padding: 12px 0 0; display: grid; gap: 8px; min-width: 0; }
.ds-form legend { font-weight: 600; padding: 0; }
.ds-letters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ds-letter { display: grid; gap: 2px; border: 1px solid var(--lijn); border-radius: var(--r); padding: 8px 10px; cursor: pointer; }
.ds-letter input { position: absolute; opacity: 0; pointer-events: none; }
.ds-letter.actief { border-color: var(--tekst); box-shadow: inset 0 0 0 1px var(--tekst); }
.ds-letter:focus-within { outline: 2px solid var(--focus, #2b6cb0); outline-offset: 2px; }
.ds-letter small { color: var(--tekst-2, #6b7775); }
.ds-kleurveld .kl-cat input[disabled] { opacity: .45; }
.ds-blokken { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ds-blokken li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--lijn); }
.ds-pijlen { display: flex; gap: 4px; }
.ds-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ds-voorbeeld { position: sticky; top: 12px; }
.ds-voorbeeld iframe { width: 100%; height: calc(100vh - 170px); min-height: 520px; border: 1px solid var(--lijn); border-radius: var(--r); background: #fff; }
@media (max-width: 900px) { .ds-werk { grid-template-columns: 1fr; } .ds-voorbeeld { position: static; } .ds-voorbeeld iframe { height: 70vh; min-height: 420px; } }
@media (max-width: 480px) { .ds-letters { grid-template-columns: 1fr; } }

/* 1.4.8 (#9): overlap tussen jobs — rood en blijvend */
.overlap-icoon { display: inline-flex; align-items: center; gap: 4px; color: var(--tally-tekst); font-weight: 600; white-space: nowrap; }
.overlap-icoon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.melding.overlap { background-color: var(--tally-zacht); background-image: linear-gradient(90deg, var(--tally) 0 5px, transparent 5px); }
.melding.overlap h2 { display: flex; align-items: center; gap: 8px; color: var(--tally-tekst); }
.melding.overlap h2 svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; }
.melding.overlap ul { margin: 6px 0 0; padding-left: 20px; }
.kaart.jobdag.overlap { outline: 1.5px solid var(--tally); outline-offset: -1.5px; background-image: linear-gradient(90deg, var(--tally) 0 5px, transparent 5px); }
.jd-overlap { margin: 6px 0 0; padding: 0; list-style: none; color: var(--tally-tekst); font-size: 13px; }
.jd-overlap li { display: flex; gap: 6px; align-items: flex-start; }
/* 1.4.8 (#8): jobdagen van een project in bulk */
.jd-alles { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; }
.jd-kies { width: 16px; height: 16px; margin: 0 8px 0 0; vertical-align: -3px; }
.jd-alles input { width: 18px; height: 18px; }
.kaart.jobdag.gekozen { outline: 2px solid var(--accent); outline-offset: -2px; }
#jd-bulk { margin: 0 0 12px; }
/* 1.4.9 (#8): Mijn profiel met tabbladen */
.pf .kaart { margin-bottom: 16px; }
.pf-foto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.pf-erv td, .pf-erv th { padding: 4px 8px; } .pf-erv .r { text-align: right; } .pf-pct { width: 72px; text-align: right; }
details.pf-cat { border-top: 1px solid var(--lijn); padding: 8px 0; } details.pf-cat summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; gap: 8px; }
.pf-skills { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 4px; }
.pf-skills li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 0; }
.pf-skills li.aan > label span { font-weight: 600; }
.pf-skill-extra { display: inline-flex; flex-wrap: wrap; gap: 6px; } .pf-skill-extra input, .pf-skill-extra select { min-height: 32px; font-size: 13.5px; }
.pf-skill-extra input[data-uitleg] { width: 180px; } .pf-skill-extra input[data-ref] { width: 220px; }
.pf-groep { margin: 12px 0; } .pf-groep h3 { font-size: 14px; margin: 0 0 6px; }
.pf-kwal-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--lijn); }
.pf-kwal-item > span:first-child:empty { display: none; }
.pf-kwal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 100%; }
.pf-verg { display: flex; gap: 6px; margin: 4px 0; } .pf-verg input { min-height: 36px; }
.pf-afgeschermd { background-image: linear-gradient(90deg, var(--accent) 0 5px, transparent 5px); }
.pf-dlgkop { font-size: 14px; margin: 8px 0 0; grid-column: 1 / -1; }
.pf-beheer { list-style: none; margin: 0; padding: 0; } .pf-beheer li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--lijn); }
.pf-beheer li.stil { opacity: .6; }
@media (max-width: 640px) { .pf-skill-extra input[data-uitleg], .pf-skill-extra input[data-ref] { width: 100%; } .pf-verg { flex-wrap: wrap; } }
.pf-kwal-item > button { margin-left: auto; } .pf-kwal > .knop:first-of-type { margin-left: auto; }
/* 1.4.9.2: totaal van een kolom (bv. Dagen bij Projecten) in de kop en per groep */
th .kolomsom { display: block; font-size: 12px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
tr.groepkop .som { margin-left: 12px; font-size: 12px; font-weight: 600; color: var(--zacht); }

/* ---------- 1.5.2 (#2) Load.Admin ---------- */
.ad-staven { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 180px; padding: 8px 0 0; }
.ad-maand { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.ad-paar { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.ad-staaf { display: block; width: 42%; min-height: 1px; border-radius: 2px 2px 0 0; }
.ad-staaf.in, .ad-legende.in { background: var(--ok); }
.ad-staaf.uit, .ad-legende.uit { background: var(--let); }   /* uitgaven zijn geen fout → amber */
.ad-legende { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin: 0 4px 0 10px; }
.rt-chips.kolom { flex-direction: column; align-items: stretch; }
.blok.afspraak { text-align: left; background: var(--rack-2); border: 1px solid var(--lijn); cursor: pointer; width: 100%; }

/* 1.5.2 (#7): rij gekozen met de sneltoetsen J/K */
tr.sneltoets > td, .vw-kaart.sneltoets { outline: 2px solid var(--focus); outline-offset: -2px; }

/* 1.5.2 (#3) Load.Tasks */
.td-snel textarea { flex: 1; min-height: 2.5rem; resize: none; font: inherit; color: inherit; background: transparent; border: 0; padding: .5rem 0; line-height: 1.4; }
.td-snel textarea:focus { outline: none; }
.td-label { color: var(--zacht); }
.td-later { opacity: 0; transition: opacity .15s; }
li.taak:hover .td-later, li.taak:focus-within .td-later { opacity: 1; }
@media (hover: none) { .td-later { opacity: 1; } }
.td-bijlagen ul { list-style: none; padding: 0; margin: .25rem 0; }
.td-bijlagen li { display: flex; align-items: center; gap: .5rem; }

/* 1.5.2 (#22/#24) */
.cs-bellen p { margin: .2rem 0; }
.cs-collegas ul, .co-jobs ul, .co-tokens { list-style: none; padding: 0; margin: .4rem 0; }
.cs-collegas li, .co-jobs li, .co-tokens li { padding: .2rem 0; border-bottom: 1px solid var(--lijn); }
code.groot { font-size: 1.25rem; letter-spacing: .05em; }

/* 1.5.2 (#5) Load.Home: vanavond, punten, wandscherm */
.hm-thuis, .hm-punten { list-style: none; padding: 0; margin: .25rem 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.hm-thuis li.weg b { color: var(--let); }   /* 1.5.9.9B: weg = amber; rood enkel voor onderweg */
body.wandmodus .zijbalk, body.wandmodus .topbar, body.wandmodus #tabbladen, body.wandmodus .contextrij { display: none !important; }
body.wandmodus main#inhoud { margin: 0 !important; padding: 0 !important; max-width: none !important; }
.wand { min-height: 100vh; padding: 2rem 2.5rem; font-size: 1.25rem; }
.wand-kop { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; }
.wand-kop h1 { font-family: var(--display); font-size: 3rem; letter-spacing: .02em; margin: 0; text-transform: uppercase; }
.wand-klok { font-family: var(--mono); font-size: 2.25rem; margin: 0; color: var(--zacht); }
.wand-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 760px) { .wand-raster { grid-template-columns: 1fr; } .wand { padding: 1rem; } }
.wand-vak { background-color: var(--rack); border: 0; border-radius: var(--r-kaart); padding: 1.25rem 1.5rem; }
.wand-vak h2 { font-family: var(--display); font-size: 1.75rem; letter-spacing: .03em; margin: 0 0 .75rem; text-transform: uppercase; color: var(--accent); }
.wand-thuis, .wand-lijst { list-style: none; padding: 0; margin: 0; }
.wand-thuis li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--lijn); }
.wand-thuis li.weg span { color: var(--let); }
.wand-lijst li { padding: .3rem 0; border-bottom: 1px solid var(--lijn); }
.wand-week th { text-align: left; padding: .35rem 1rem .35rem 0; white-space: nowrap; font-weight: 600; }
.wand-week td { padding: .35rem 0; }
.wand-weg { display: inline-block; margin-right: 1rem; }
.wand-menu { margin-top: .75rem; }
body.wandmodus .shell { display: block !important; grid-template-columns: 1fr !important; }
/* 1.5.2 (#5.5) paklijsten */
.pk-nieuw { display: flex; gap: .5rem; margin: .5rem 0 1rem; } .pk-nieuw input { flex: 1; }
.pk-groepen { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem 1.5rem; }
.pk-lijst { list-style: none; padding: 0; margin: .25rem 0; } .pk-lijst li { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--lijn); }
.pk-lijst li.gepakt span { text-decoration: line-through; color: var(--zacht); }
/* 1.5.6 (#7, S4): kits — "Mee te nemen" op de jobdag, kitstip, paklijst met dagen */
.mn { display: grid; gap: .5rem; }
.mn-kits { display: grid; gap: .35rem; }
.mn-kit { border: 0; background: var(--vak); border-radius: var(--r-vak); padding: .45rem .75rem; }
.mn-kit > summary { display: flex; align-items: center; gap: .45rem; cursor: pointer; list-style: none; } .mn-kit > summary::-webkit-details-marker { display: none; }
.mn-kit > summary .icoonknop { margin-left: auto; }
.mn-items { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .2rem; } .mn-items li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.mn-stip { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; background: var(--zacht); margin-right: .35rem; vertical-align: middle; } .mn-stip.groot { width: 1rem; height: 1rem; }
.mn-label { margin: .25rem 0 0; } .mn-kies select { max-width: 100%; } .mn-plek { grid-column: 1 / -1; }
.chip.mn-let span { text-decoration: underline dotted var(--let); }
.pk-dagen { margin-left: .35rem; } .pk-lijst li.gepakt .pk-dagen { text-decoration: none; }
.pk-weg .label { color: var(--let); }

/* 1.5.2 (#11): accent op de actieve wereld en tabbladen */
.chip.aan, .chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-tekst); }
progress { accent-color: var(--accent); }
/* 1.5.2 (#11) kleurenscherm */
.th-invoer { display: flex; gap: .5rem; align-items: center; } .th-invoer input[type=color] { width: 48px; height: 40px; padding: 0; border: 1px solid var(--lijn-sterk); border-radius: var(--r); background: none; } .th-invoer input[type=text] { width: 7.5em; }
.th-voorbeeld { border: 1px solid var(--lijn-sterk); border-radius: var(--r); padding: 12px 16px; margin-bottom: 12px; } .th-voorbeeld .label { color: inherit; opacity: .7; }
.th-knop { display: inline-block; padding: 8px 16px; border-radius: 999px; font-weight: 600; } .th-tab { display: inline-block; padding: 6px 4px; margin: 0 10px; font-weight: 600; }
.th-stip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; } .th-link { text-decoration: underline; margin-left: 10px; }
.th-stalen { display: flex; gap: 6px; } .th-staal { display: inline-block; width: 28px; height: 28px; border-radius: var(--r); border: 1px solid var(--lijn-sterk); }
/* 1.5.2 (#11): het logo "Load.Live by Stageware" op het aanmeldscherm, licht of donker volgens het thema */
.logo-lockup { display: block; width: min(260px, 70vw); height: auto; margin: 0 0 8px; }
.logo-lockup.op-licht { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .logo-lockup.op-licht { display: block; } :root:not([data-theme="dark"]) .logo-lockup.op-donker { display: none; } }
:root[data-theme="light"] .logo-lockup.op-licht { display: block; } :root[data-theme="light"] .logo-lockup.op-donker { display: none; }
/* 1.5.2 (#16) dashboards */
.db-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: -4px 0 18px; }
.db-tabs > a { padding: 8px 16px; text-decoration: none; color: var(--zacht); font-weight: 600; border-radius: var(--r-pil); }
.db-tabs > a:hover { color: var(--tekst); background-color: var(--rack); }
.db-tabs > a[aria-current="page"] { color: var(--accent-tekst); background: var(--accent); }
.db-rechts { margin-left: auto; display: flex; gap: 6px; }
.db-rooster { display: grid; grid-template-columns: repeat(var(--db-k, 4), minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); gap: 14px; position: relative; }
.db-rooster.bewerken { grid-template-rows: repeat(var(--db-r, 3), 220px); background-image: radial-gradient(var(--lijn-sterk) 1px, transparent 1px); background-size: 16px 16px; padding: 6px; border-radius: var(--r); }
.db-vrij { border: 1px dashed var(--lijn-sterk); border-radius: var(--r); background: transparent; color: var(--zacht); display: grid; place-items: center; cursor: pointer; }
.db-vrij:hover { border-color: var(--accent); color: var(--accent); }
.db-kaart { position: relative; background-color: var(--rack); border: 0; border-radius: var(--r-kaart); padding: 14px 16px; box-shadow: var(--kaart-schaduw); overflow: auto; font-size: calc(15px * var(--schaal, 1)); min-width: 0; }
.db-rooster.bewerken .db-kaart { outline: 1px solid var(--accent-zacht); }
.db-kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.db-kop h2 { font: 700 11.5px/1.4 var(--body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--zacht); margin: 0; }
.db-lijst { list-style: none; padding: 0; margin: 0; } .db-lijst li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--lijn); }
.db-lijst li a { text-decoration: none; min-width: 0; } .db-lijst li.nieuw a { font-weight: 600; } .db-meta { white-space: nowrap; }
.db-klok { font: 400 calc(56px * var(--schaal, 1))/1 var(--display); letter-spacing: .03em; margin: 8px 0; }
.db-notitie { white-space: pre-wrap; }
.db-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0; } .db-cijfers dt { color: var(--zacht); font-size: .85em; } .db-cijfers dd { margin: 0; font: 400 2em/1 var(--display); letter-spacing: .02em; }
.db-hoek { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; cursor: nwse-resize; border-right: 3px solid var(--accent); border-bottom: 3px solid var(--accent); touch-action: none; }
.db-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.db-leeg { grid-column: 1 / -1; }
@media (max-width: 760px) { .db-rooster, .db-rooster.bewerken { grid-template-columns: 1fr; grid-template-rows: none; } .db-kaart, .db-vrij { grid-column: 1 / -1 !important; grid-row: auto !important; } }
/* 1.5.2 (#5.7) noodfiche */
.noodfiche h1 { font-family: var(--display); font-size: 2rem; letter-spacing: .03em; margin: 0 0 4px; }
.noodfiche .nf-adres { font-size: 1.1rem; margin: 0 0 12px; }
.noodfiche .nf-nood { border: 3px solid var(--tally); padding: 10px 14px; margin: 10px 0 16px; font-size: 1.05rem; }
.noodfiche table { width: 100%; border-collapse: collapse; } .noodfiche td, .noodfiche th { border-bottom: 1px solid var(--lijn); padding: 6px; text-align: left; vertical-align: top; }
.noodfiche .nf-tel { font-family: var(--mono); white-space: nowrap; } .noodfiche .nf-voet { font-size: .8rem; color: var(--zacht); }
.noodfiche-print { display: none; }
@media print {
  body > *:not(.noodfiche-print) { display: none !important; }
  .noodfiche-print { display: block; color: #000; background: #fff; padding: 0; }
  .noodfiche-print .noodfiche td, .noodfiche-print .noodfiche th { border-color: #999; }
}
/* 1.5.2 (#7): de knop "volgende stap" in de lijst compact naast de status */
.knop.volgende-stap { min-height: 26px; padding: 2px 8px; font-size: 12.5px; margin: 4px 0 0 0; }

/* ---------- 1.5.7 (#1/#2/#4) Load.Admin volgens de normen: boekhouding, bank nakijken, PROBLEEM ---------- */
tr.sterk td { font-weight: 700; }
tr.uitgezet td { opacity: .55; text-decoration: line-through; }
.ad-probleem { outline: 1.5px solid color-mix(in srgb, var(--tally) 70%, transparent); outline-offset: -1.5px; }
.ad-probleem .kaartkop { display: flex; align-items: center; gap: 8px; }
.rd-deel { align-items: end; }
.status.fout.klein-st { padding: 2px 6px; }

/* ================= 1.5.9.9B — videostijl (L62): gedeelde bouwstenen ================= */
/* Statusbalk links (5px) in de statuskleur, in plaats van een gekleurde rand rond de kaart. Zonder TS-wijziging: de kaart
   leest de statuspil die er al in staat (:has). Volgorde = voorrang: lopend en conflict winnen. Handmatig kan het ook met
   .balk-ok / .balk-let / .balk-grijs / .balk-live / .balk-fout of data-balk="…". */
.job, .kaart.jobdag, .vw-kaart, .kaart.balk, .zoekresultaten a { --balk: transparent; background-image: linear-gradient(90deg, var(--balk) 0 5px, transparent 5px); box-shadow: var(--kaart-schaduw); }
.job:has(> .rechtsboven .status), .kaart.jobdag:has(> .top .status), .vw-kaart:has(.status) { --balk: var(--st-grijs); }
.job:has(> .rechtsboven .status.let), .kaart.jobdag:has(> .top .status.let), .vw-kaart:has(.status.let), .balk-let, [data-balk="let"] { --balk: var(--let); }
.job:has(> .rechtsboven .status.ok), .kaart.jobdag:has(> .top .status.ok), .vw-kaart:has(.status.ok), .balk-ok, [data-balk="ok"] { --balk: var(--ok); }
.job:has(> .rechtsboven .status.uit), .kaart.jobdag:has(> .top .status.uit), .vw-kaart:has(.status.uit), .balk-uit, [data-balk="uit"] { --balk: var(--lijn-sterk); }
.job:has(> .rechtsboven .status.live), .kaart.jobdag:has(> .top .status.live), .vw-kaart:has(.status.live), .balk-live, [data-balk="live"] { --balk: var(--live); }
.job:has(> .rechtsboven .status.fout), .kaart.jobdag:has(> .top .status.fout), .vw-kaart:has(.status.fout), .balk-fout, [data-balk="fout"],
.job:has(.overlap-icoon), .kaart.jobdag.overlap { --balk: var(--tally); }
.balk-grijs, [data-balk="grijs"] { --balk: var(--st-grijs); }
.balk-ok, .balk-let, .balk-grijs, .balk-live, .balk-fout, .balk-uit { background-image: linear-gradient(90deg, var(--balk) 0 5px, transparent 5px); box-shadow: var(--kaart-schaduw); }
.kaart.jobdag { padding-left: 24px; }
.kaart.jobdag.overlap { background-image: linear-gradient(90deg, var(--balk) 0 5px, transparent 5px); }
/* een blok in de weekplanning: zelfde kleuren, dunner */
.blok.ok { border-left-color: var(--ok); } .blok.let { border-left-color: var(--let); } .blok.live { border-left-color: var(--live); }

/* Grote cijfers in Bebas voor wat telt: uren, duur, bedragen, thuiskomst */
.cijfer, .groot-cijfer { font: 400 32px/1 var(--display); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.cijfer.xl { font-size: 48px; } .cijfer.s { font-size: 24px; }
.cijfer.live { color: var(--live-tekst); }

/* Een vak in een kaart: rij, keuze of invoer — #223532, geen rand, afronding 12px */
.vak { background: var(--vak); border-radius: var(--r-vak); padding: 10px 14px; }

/* Keuzetegel: vak met klein label in hoofdletters + Bebas-waarde; gekozen = cyaan lijn van 2px */
.keuzetegel { background: var(--vak); border: 2px solid transparent; border-radius: var(--r-vak); padding: 10px 14px; display: grid; gap: 2px; cursor: pointer; text-align: left; color: var(--tekst); }
.keuzetegel .label { font-size: 10.5px; }
.keuzetegel b { font: 400 26px/1 var(--display); letter-spacing: .03em; font-weight: 400; }
.keuzetegel.aan, .keuzetegel[aria-pressed="true"], .keuzetegel:has(input:checked) { border-color: var(--accent); }

/* Lijstrij met rond icoonvak (40px) in een getinte kleur + titel/subtitel + grote waarde rechts */
.icoonrij { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; background: var(--vak); border-radius: var(--r-vak); }
.icoonrij .rond { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-zacht); color: var(--accent); }
.icoonrij .rond svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.icoonrij .waarde { font: 400 26px/1 var(--display); letter-spacing: .03em; }

/* De menuknop op de gsm en de kleinere knoppen volgen de pil */
.menuknop { border-radius: var(--r-pil) !important; }
.knop.volgende-stap { border-radius: var(--r-pil); }
td.rijacties .knop { border-radius: var(--r-pil); }

/* Paginatitels in Bebas, groot (web 44–56px) */
.kop-pagina h1 { font-size: clamp(40px, 5vw, 56px); }
.kop-pagina .label { color: var(--zacht); }

/* Groepskoppen en sectiekoppen in de video: Barlow, rustig; h2 boven een sectie blijft Barlow 600 */
tr.groepkop th { font: 700 11.5px/1.3 var(--body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--zacht); }
tr.groepkop th .n { font: 700 11px/1 var(--body); }
/* een datum boven het uur in een jobrij: klein label, het uur zelf groot */
.job time .label { display: block; font-size: 10.5px; line-height: 1.3; margin-bottom: 3px; color: var(--zacht); letter-spacing: 1px; }
.job:has(> .shiftacties .status.ok) { --balk: var(--ok); } .job:has(> .shiftacties .status.let) { --balk: var(--let); } .job:has(> .shiftacties .status.live) { --balk: var(--live); }
.info-tekst { color: var(--accent); }
.kengetal b.let, .kengetal b.tally { font-weight: 400; } .kengetal b.let { color: var(--let); } .kengetal b.tally { color: var(--tally-tekst); }
@media (max-width: 560px) { .werelden a { border-radius: var(--r-vak); } }
/* een kaart in een kaart of paneel wordt een vak (#223532) */
.paneel .kaart, .kaart .kaart, .paneel .hm-auto, .kaart .hm-auto, .paneel .vw-kaart { background-color: var(--vak); }
/* een statusstap (weigeren, annuleren) is geen verwijderen: omlijnd zoals een gewone knop, rood pas bij aanwijzen */
.knop.gevaar[data-pstatus], .knop.gevaar[data-naar], .knop.gevaar[data-status] { border-color: var(--knop-lijn); color: var(--tekst); }
.knop.gevaar[data-pstatus]:hover, .knop.gevaar[data-naar]:hover, .knop.gevaar[data-status]:hover { border-color: var(--tally); color: var(--tally-tekst); background: transparent; }

/* >>> 1.6.1-21: QR-labels (#q, #qr-labels, labelvak) */
.melding.let { background-color: var(--let-zacht); background-image: linear-gradient(90deg, var(--let) 0 5px, transparent 5px); }
.qr-code { font-family: var(--mono); letter-spacing: .04em; }
.qr-vak { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.qr-vak img { width: 72px; height: 72px; background: #fff; border-radius: 6px; flex: none; }
.qr-vak p { margin: 0; }
.qr-typen { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 14px; max-width: 520px; }
.qr-typen .veld { flex: 1 1 220px; margin: 0; }
.qr-kies { border: 0; padding: 0; margin: 0; min-width: 0; }
.qr-kies legend { font-weight: 600; margin-bottom: 8px; }
.qr-kandidaten { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.qr-kandidaten label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-veld); background: var(--rack-2); cursor: pointer; }
.qr-kandidaten input { margin-top: 4px; }
.qr-kandidaten .status { margin-left: 8px; }
.qr-nieuw summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.qr-segment { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0 0 12px; }
.qr-segment legend { width: 100%; margin-bottom: 6px; }
.qr-segment label { position: relative; }
.qr-segment input { position: absolute; opacity: 0; inset: 0; }
.qr-segment span { display: inline-block; padding: 8px 14px; border-radius: var(--r-pil); border: 1px solid var(--lijn-sterk); }
.qr-segment input:checked + span { background: var(--accent); color: var(--accent-tekst); border-color: var(--accent); }
.qr-segment input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.qr-vel { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.qr-vel figure { margin: 0; text-align: center; }
.qr-vel img { width: 100%; max-width: 140px; background: #fff; }
/* <<< 1.6.1-21 */
/* >>> 1.6.2-4b5 (labels, opslagboom): labellijst, "nog zonder label", kitregels, werkmateriaal */
.qr-kapot { display: inline-block; padding: 8px 10px; border: 1px dashed var(--lijn-sterk); border-radius: 6px; }
.ql-tabel td { vertical-align: middle; }
.ql-zonder { margin-top: 20px; }
.ql-zonderlijst { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; }
.ql-zonderlijst li { margin: 0; }
.ob-werk { opacity: .92; }
.ob-pil.werkmateriaal { border-style: dashed; }
.ob-kitnaam { font-weight: 600; }
.op-werkmateriaal { margin: 8px 0 0; }
/* <<< 1.6.2-4b5 */
/* >>> 1.6.1-30: automatisch hotel — cyaan pil "automatisch", ritvragen als grijze kaart (een vraag, geen conflict) */
.pil-auto { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-tekst); font-size: .72em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.hotelvraag { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin: 6px 0; }
.hotelvraag p { margin: 0; }
.hotelvink { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.vp-nachten { list-style: none; margin: 6px 0; padding: 0; }
.vp-nacht > p { margin: 4px 0; }
/* <<< 1.6.1-30 */

/* >>> 1.6.2 (punt 15): een filter dat een link is (<a class="chip">, bv. Load.Home › Opslag & inventaris) ziet er hetzelfde uit als een filterknop */
a.chip { display: inline-flex; align-items: center; text-decoration: none; box-sizing: border-box; font-family: inherit; line-height: 1.2; }
a.chip.aan { color: var(--accent-tekst); }
/* <<< 1.6.2 (punt 15) */