/* Cockpit Spaarne Huisartsen: gedeelde opmaak (basis herzien 5-11-2026, ronde 4 Overzicht: één kantlijn voor kopbalk en inhoud, gelijke weken samengevoegd, afwijkende weken als groep; ronde 3: lichte werkplek op wit, duidelijke
   typeschaal 12/14/20/32, inhoud lijnt links uit met de kopbalk, groen #347861 als accent). */
:root {
  --groen: #347861; --groen-donker: #285f4c; --groen-licht: #eaf2ee;
  --tekst: #2b2d42; --tekst-zacht: #45475a; --grijs: #5f6170; --rand: #e4e4e8; --rand-zacht: #efeff2; --veldrand: #8a8c99;
  --zacht: #f7f7f8; --vlak: #fff; --hover: #f4f4f6; --donker: #2b2d42; --rood: #b42318; --rood-licht: #fdecea;
  --zand: #f7f5ef; --zandrand: #e7e3d8; --lichtblauw: #d4e7ed;   /* huisstijl: donkerblauw, groen, zand, lichtblauw */
  --kantlijn: clamp(32px, 4vw, 56px);
  --straal: 8px; --schaduw: 0 1px 2px rgba(16, 24, 40, .04);
  --letter: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 14px/1.55 var(--letter); color: var(--tekst); background: var(--vlak);
  font-feature-settings: "cv11", "ss01", "tnum" 0;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
p { margin: 8px 0; }
a { color: var(--groen-donker); text-underline-offset: 2px; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; border-radius: 4px; }
::selection { background: #cfe3da; }

/* Invoervelden */
select, input[type="time"], input[type="text"], input[type="date"], input[type="number"] {
  height: 30px; padding: 0 8px; border: 1px solid var(--veldrand); border-radius: 6px; background: var(--vlak);
  font-size: 13px; color: var(--tekst); }
select { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
  background: var(--vlak) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235c6370' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; }
select:hover, input:hover:not(:disabled) { border-color: var(--grijs); }
select:focus-visible, input:focus-visible { outline-offset: 1px; border-color: var(--groen); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--groen); width: 15px; height: 15px; vertical-align: -2px; margin: 0 6px 0 0; }
label { cursor: pointer; }

/* Zijbalk (5-11-2026, huisstijl uit het Spaarne Logo Pack): links een vaste balk op zand #F7F5EF met het logo, de
   onderdelen in twee groepen (Planning, In Bricks) en onderaan locatie, status en uitloggen. Actief onderdeel: wit vlak met
   een groen icoon. Tekst in huisstijl-donkerblauw #2B2D42. Rechts de werkruimte op wit. */
:root { --zijbalk: 232px; }
body { display: grid; grid-template-columns: var(--zijbalk) minmax(0, 1fr); min-height: 100vh; }
.zijbalk { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 24px 14px 16px;
  background: var(--zand); border-right: 1px solid var(--zandrand); overflow-y: auto; }
.zijbalk .logo { display: block; padding: 2px 10px 0; border-radius: 6px; }
.zijbalk .logo img { display: block; width: 148px; height: auto; }
.appnaam { display: flex; align-items: baseline; gap: 8px; margin: 14px 10px 0; padding-bottom: 20px; border-bottom: 1px solid var(--zandrand);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--groen-donker); }
.versie { display: none; }   /* de versie staat in de titel van de pagina */
.zijbalk nav { display: flex; flex-direction: column; gap: 2px; flex: 1; margin-top: 8px; }
.zijbalk nav[hidden] { visibility: hidden; }
.navgroep { margin: 18px 10px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grijs); }
.zijbalk nav button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 7px;
  background: none; text-align: left; font-size: 14px; font-weight: 500; color: var(--tekst-zacht); transition: background-color .12s, color .12s; }
.zijbalk nav button svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
  stroke-linejoin: round; color: var(--grijs); }
.zijbalk nav button:hover { background: rgba(43, 45, 66, .05); color: var(--tekst); }
.zijbalk nav button[aria-current="page"] { background: var(--vlak); color: var(--tekst); font-weight: 600;
  box-shadow: 0 1px 2px rgba(43, 45, 66, .08), 0 0 0 1px var(--zandrand); }
.zijbalk nav button[aria-current="page"] svg { color: var(--groen); }
.zijbalk nav button.onder { margin-top: auto; }
.zijbalk nav button:focus-visible { outline-offset: -2px; }
.zijvoet { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px 12px; margin-top: 12px;
  padding: 14px 10px 0; border-top: 1px solid var(--zandrand); font-size: 13px; line-height: 20px; }
.verbinding { grid-row: 2; display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--tekst-zacht); overflow-wrap: anywhere; }
.verbinding::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--groen);
  box-shadow: 0 0 0 3px var(--groen-licht); transform: translateY(-1px); }
.verbinding.fout { color: var(--rood); }
.verbinding.fout::before { background: var(--rood); box-shadow: 0 0 0 3px var(--rood-licht); }
/* locatiekeuze over de hele breedte, daaronder status links en Uitloggen rechts */
#praktijkkeuze { display: contents; }
#praktijkkeuze select { grid-column: 1 / -1; grid-row: 1; width: 100%; height: 34px; font-size: 13.5px; font-weight: 500; color: var(--tekst);
  border-color: var(--zandrand); background-color: var(--vlak); }
#praktijkkeuze a { grid-row: 2; grid-column: 2; color: var(--tekst-zacht); white-space: nowrap; }
#praktijkkeuze a:hover { color: var(--tekst); }

/* Pagina en secties: kop links met een dunne lijn */
/* Ronde 4: kopbalk en inhoud delen dezelfde kantlijn; logo, kop, kerncijfer en tabel staan op dezelfde x. */
main { margin: 0; padding: 36px var(--kantlijn) 96px; min-width: 0; }
.uitkomst .kaart { background: none; border: 0; padding: 0; }
.uitkomst .kaart + .kaart { margin-top: 48px; } /* herkansing basis r1: elke sectie 48px uit elkaar */
.kaart h3 { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; font-size: 20px; line-height: 28px; font-weight: 600;
  letter-spacing: -.018em; color: var(--donker); }
.kaart h3::after { content: ""; flex: 1; height: 1px; background: var(--rand); }
.kaart h4 { margin: 28px 0 10px; font-size: 14px; font-weight: 600; color: var(--donker); }
.tabeltitel { font-weight: 600; font-size: 13px; margin: 0 0 6px; }
.uitleg-klein { font-size: 13px; color: var(--grijs); margin: 10px 0; }
.leeguitleg { color: var(--grijs); text-align: center; margin: 28px 0; font-size: 13.5px; }
.fout, .melding.fout { color: var(--rood); }
.goed { color: var(--groen-donker); }
.grijs { color: var(--grijs); }

/* Knoppen */
.knoprij { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 4px 0 14px; }
.actie, dialog .knoppen button, .knop-hoofd {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 1px solid #d5d8dd; border-radius: 7px; background: var(--vlak); color: var(--tekst);
  font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 1px rgba(16, 24, 40, .04); transition: background .12s, border-color .12s; }
.actie:hover:not(:disabled), dialog .knoppen button:hover:not(:disabled) { background: var(--hover); border-color: #c4c8cf; }
.actie.hoofd, dialog .knoppen .ja, .knop-hoofd { background: var(--groen); border-color: var(--groen); color: #fff; }
.actie.hoofd:hover:not(:disabled), dialog .knoppen .ja:hover:not(:disabled), .knop-hoofd:hover { background: var(--groen-donker); border-color: var(--groen-donker); }
.actie:active:not(:disabled), dialog .knoppen button:active:not(:disabled) { transform: translateY(.5px); }
.knop-hoofd { height: 36px; padding: 0 18px; font-size: 14px; font-weight: 600; }
a.actie { text-decoration: none; }

/* Tabellen */
.tabel { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabel th { text-align: left; font-size: 11.5px; color: var(--grijs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 0 12px; height: 34px; border-bottom: 1px solid var(--rand); white-space: nowrap; }
.tabel tbody th { text-transform: none; letter-spacing: 0; }
.tabel td { padding: 0 12px; height: 40px; font-size: 14px; color: var(--tekst-zacht); border-bottom: 1px solid var(--rand-zacht); white-space: nowrap; }
.tabel tbody th[scope="row"] { border-bottom: 1px solid var(--rand-zacht); }
.tabel tbody tr:last-child td, .tabel tbody tr:last-child th { border-bottom: 0; }
.tabel tbody tr:hover td, .tabel tbody tr:hover th { background: #f9fafb; }
.tabel th:first-child, .tabel td:first-child { padding-left: 0; }
.tabel .cel { border: 0; background: none; padding: 0; color: var(--groen-donker); font-size: 13.5px;
  text-decoration: underline; text-decoration-color: rgba(52, 120, 97, .35); text-underline-offset: 3px; }
.tabel .cel:hover { text-decoration-color: currentColor; }
.tabel .cel.grijs { color: var(--grijs); text-decoration-color: rgba(92, 99, 112, .3); }

/* Weekschema's (ronde 1, 5-11-2026): bereik + schakelaar als op Overzicht; tabel in een paneel met week en datum gestapeld,
   deze week groen, spreekuur en telefonie als groepen; de gekozen week gemarkeerd; de dagen als kolommen in één paneel. */
.ovbalk #roostPlakPlek:empty { display: none; }
.ovbalk .schakel + #roostPlakPlek { margin-left: 0; }
.roostertabel { table-layout: fixed; }
/* Herkansing Weekschema's r1 (5-11-2026): een weekraster met dunne verticale lijnen over kop en alle rijen; rijen 54px;
   elke reeks gelijke weken één balk die 4px binnen de weekgrenzen begint en eindigt, naam links en periode rechts; eigen tint
   per profiel; een profiel over de hele periode is een lichte omlijnde balk; lege weken een gestippelde balk; vandaag één
   dunne groene lijn van kop tot onderrand in plaats van een kolomvlak. Werkbalk: bereik, één segmentknop, primaire actie groen. */
.rskopbalk { display: flex; align-items: center; gap: 20px; margin: 0 0 24px; }
.rskopbalk h3 { flex: 1; margin: 0; }
.rskopbalk .ovbalk { margin: 0; gap: 12px; }
.rskopbalk #roostPlak { margin-left: 12px; }
.rooster .ovweek { margin: 0; gap: 6px; font-size: 13px; color: var(--grijs); white-space: nowrap; }
.rooster .ovweek strong { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--tekst-zacht); }
.rooster .ovweek strong::after { content: "·"; margin-left: 6px; color: var(--grijs); font-weight: 400; }
.rooster .schakel { margin-left: 0; }
.rspaneel { position: relative; }
.roostertabel thead th { height: 48px; line-height: 16px; vertical-align: middle; font-size: 12px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--grijs); background: #fafbfc; border-bottom: 1px solid var(--rand); }
/* Herkansing Weekschema's r2: agendakolom op de maat van de namen (176px), rijen 40px */
.roostertabel thead th:first-child { width: 176px; font-size: 12px; font-weight: 500; color: var(--grijs); }
.roostertabel th:first-child, .roostertabel td:first-child { padding-left: 16px; }
.roostertabel thead th + th { padding-left: 12px; }
.roostertabel thead th + th, .roostertabel tbody td { border-left: 1px solid #f0f1f4; }
.roostertabel thead th .ovdag { display: block; font-size: 13px; font-weight: 600; color: var(--tekst); text-transform: none; }
.roostertabel thead th .ovdatum { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--grijs); }
/* Herkansing Weekschema's r4: deze week alleen met een klein label "vandaag" in de kop; de lijn begint eronder */
.roostertabel thead th.nu { position: relative; }
.rsnu { position: absolute; top: 9px; right: 10px; padding: 0 7px; height: 18px; line-height: 18px; border-radius: 9px;
  background: var(--groen-licht, #e6f0eb); font-size: 11.5px; font-weight: 500; color: var(--groen-donker); }
.roostertabel thead th.nu .ovdag { color: var(--groen-donker); }
.roostertabel thead th.nu .ovdatum { color: #3f5c50; }
.roostertabel td { padding: 0; height: 40px; }
.roostertabel tbody tr { --rijvlak: var(--vlak); }
.roostertabel tbody tr:hover { --rijvlak: #fafbfc; }
.roostertabel tbody tr:hover td, .roostertabel tbody tr:hover th { background: #fafbfc; }
.roostertabel tbody th[scope="row"] { height: 40px; overflow: hidden; text-overflow: ellipsis; }
.roostertabel tbody th[scope="row"] .ovnaam { font-size: 13.5px; font-weight: 500; color: var(--tekst); }
.rsvandaaglijn { position: absolute; bottom: 0; width: 2px; margin-left: -1px; background: var(--groen); opacity: .35; z-index: 0; pointer-events: none; }
.rsvandaaglijn::before { content: ""; position: absolute; top: -3px; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--groen); }
/* Gekozen week: een kort groen lijntje onder in die week */
.rscel[aria-pressed="true"]::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 3px; height: 2px; border-radius: 1px;
  background: var(--groen); z-index: 3; pointer-events: none; }
.rscel[aria-pressed="true"].balk.vervolg::after { left: 0; }
.rscel[aria-pressed="true"].balk.loopt::after { right: 0; }
/* Groepen: kleine kop met lucht erboven en een dunne lijn; de weeklijnen lopen door */
.rsgroepkop { display: flex; align-items: baseline; gap: 8px; }
/* Herkansing Weekschema's r3: groepskoppen 28px zonder weeklijnen; de vandaag-lijn loopt er ongestoord doorheen */
.roostertabel .rsgroep th, .roostertabel .rsgroep td { height: 28px; padding-top: 8px; padding-bottom: 2px; vertical-align: bottom;
  background: var(--vlak); border-top: 1px solid var(--rand); border-bottom: 0; }
.roostertabel .rsgroep td { border-left-color: transparent; }
/* r4: de groepskop onderbreekt de vandaag-lijn */
.roostertabel .rsgroep th, .roostertabel .rsgroep td { position: relative; z-index: 1; }
.roostertabel .rsgroep th { padding-left: 16px; }
.roostertabel tbody .rsgroep:first-child th, .roostertabel tbody .rsgroep:first-child td { height: 28px; padding-top: 8px; border-top: 0; }
.roostertabel tbody tr.rsgroep:hover th, .roostertabel tbody tr.rsgroep:hover td { background: var(--vlak); }
.rsgroepnaam { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grijs); }
.rsgroepaantal { font-size: 11.5px; font-weight: 500; color: var(--grijs); font-variant-numeric: tabular-nums; }
.roostertabel .rsgroep + tr th, .roostertabel .rsgroep + tr td { border-top: 0; }
/* Cel: de hele cel is de knop */
.rscel { position: relative; display: block; width: 100%; height: 40px; padding: 0; border: 0; border-radius: 0;
  background: none; text-align: left; color: var(--tekst); font-size: 13px; line-height: 16px; cursor: pointer; }
.rscel:focus-visible { outline: 2px solid var(--groen); outline-offset: -2px; border-radius: 6px; z-index: 5; }
/* Herkansing Weekschema's r3: alleen een wisselende agenda krijgt balken (groen, afgeronde kop). Stil: geen balk, alleen de
   profielnaam in gedempt grijs in de eerste week. */
.rscel { --bv: #d5e8de; --bh: #c3ddcf; --bt: #173f30; }
.rschip { --bv: #d5e8de; --bh: #c3ddcf; --bt: #173f30; }
.rsbalk { position: absolute; top: 8px; left: 4px; right: 4px; height: 24px; border-radius: 5px; background: var(--bv);
  transition: background .12s; z-index: 1; }
.rscel.vervolg .rsbalk { left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rscel.loopt .rsbalk { right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rscel.balk:hover .rsbalk { background: var(--bh); }
/* Herkansing Weekschema's r4: telefonie als rustig grijze balk; geen weekschema als gestippelde balk, altijd dezelfde vorm */
.rstel .rscel { --bv: #eceef1; --bh: #e2e5e9; --bt: #2b313b; }
.rscel.leeg .rsbalk { background: var(--rijvlak); border: 1px dashed #b7bdc6; box-sizing: border-box; }
.rscel.leeg.vervolg .rsbalk { border-left: 0; }
.rscel.leeg.loopt .rsbalk { border-right: 0; }
.rscel.leeg:hover .rsbalk { background: #f6f7f8; }
/* Het label ligt over de hele balk: naam links, periode rechts (alleen bij een wissel) */
.rslabel { position: absolute; top: 8px; left: 4px; height: 24px; width: calc(var(--n, 1) * 100% + (var(--n, 1) - 1) * 1px - 8px);
  display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--bt); font-size: 13px; font-weight: 500; line-height: 24px;
  white-space: nowrap; overflow: hidden; z-index: 2; pointer-events: none; }
.rsbalknaam { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rscel.leeg .rslabel { color: var(--grijs); font-weight: 400; }
.roostertabel td:last-child .rscel.loopt .rsbalk { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
.rsaangepast { flex: none; font-size: 12px; font-weight: 500; color: inherit; }
.rsaangepast::before { content: "● "; font-size: 7px; vertical-align: 1px; }
/* Herkansing Weekschema's r4: onder het raster één regel hulptekst, op de lijn van de agendanamen */
#roostSamen:not(:empty) { margin-top: 12px; }
.rshint { margin: 0; padding-left: 16px; font-size: 13px; line-height: 18px; color: var(--grijs); }
/* Weekprofiel naast de kop van de gekozen week: dezelfde groene toon */
.rschip { display: inline-block; max-width: 100%; height: 24px; line-height: 24px; padding: 0 9px; border-radius: 6px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; background: var(--bv); color: var(--bt); }
/* Gekozen week: kop met naam en weekprofiel, dan de dagen naast elkaar */
#roostWeek:not(:empty) { margin-top: 36px; }
.rsweekkop { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.rsweekkop h4 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--donker); }
.rsweeknr { margin-left: 6px; font-size: 14px; font-weight: 400; color: var(--grijs); letter-spacing: 0; }
.rsdagen { display: grid; grid-template-columns: repeat(var(--dagen, 5), minmax(0, 1fr)); }
.rsdag { display: flex; flex-direction: column; min-width: 0; padding: 0 0 14px; }
.rsdag + .rsdag { border-left: 1px solid var(--rand-zacht); }
.rsdag.nu { background: #f7fbf9; }
.rsdagkop { display: flex; align-items: center; gap: 6px; height: 44px; margin: 0 0 6px; padding: 0 16px; font-size: 13px;
  background: #fafbfc; border-bottom: 1px solid var(--rand); }
.rsdag.nu .rsdagkop { background: #f0f6f3; }
.rsvandaag { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--tekst-zacht); }
.rsdagkop .ovdag { font-weight: 600; color: var(--tekst); text-transform: capitalize; }
.rsdagkop .ovdatum { color: var(--grijs); }
.rsdagkop .ovlabel { margin-left: auto; }
.rsblokken { list-style: none; margin: 0; padding: 0 8px; }
.rsblok { display: grid; grid-template-columns: 82px 8px minmax(0, 1fr); align-items: center; column-gap: 8px; min-height: 30px;
  padding: 4px 8px; border-radius: 6px; font-size: 13px; line-height: 18px; }
.rsblok:hover { background: rgba(16, 24, 40, .03); }
.rstijd { color: var(--tekst-zacht); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rskleur { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .22); }
.rsbloknaam { color: var(--tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rsblok.np .rsbloknaam, .rsblok.np .rstijd { color: var(--grijs); }
.rsgeen { margin: 6px 16px; font-size: 13px; color: var(--grijs); }
.rsdagknop { align-self: flex-start; margin: 8px 8px 0; height: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--groen-donker); font-size: 13px; font-weight: 500; transition: background .12s, border-color .12s; }
.rsdagknop:hover { background: var(--vlak); border-color: var(--rand); }
/* Ronde 4: "Deze dag anders …" alleen bij aanwijzen of toetsenbordfocus van die dag; op aanraakschermen altijd zichtbaar */
@media (hover: hover) {
  .rsdagknop { opacity: 0; transition: opacity .12s, background .12s, border-color .12s; }
  .rsdag:hover .rsdagknop, .rsdag:focus-within .rsdagknop { opacity: 1; }
}
@media (max-width: 900px) {
  .rsdagen { grid-template-columns: 1fr; }
  .rsdag + .rsdag { border-left: 0; border-top: 1px solid var(--rand-zacht); }
  .roostertabel { min-width: 760px; }
}

/* Bevestigingsvenster */
dialog { border: 1px solid var(--rand); border-radius: 14px; padding: 0; width: min(640px, 94vw); color: var(--tekst); background: var(--vlak);
  box-shadow: 0 24px 64px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .06); }
dialog[open] { animation: verschijn .14s ease-out; }
@keyframes verschijn { from { opacity: 0; transform: translateY(4px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog[open] { animation: none; } }
dialog::backdrop { background: rgba(17, 20, 26, .32); backdrop-filter: blur(2px); }
dialog .kop { padding: 20px 24px 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
dialog .inhoud { padding: 8px 24px 16px; color: var(--tekst-zacht); max-height: 64vh; overflow: auto; }
dialog .inhoud p { margin: 10px 0; }
dialog .melding { padding: 0 24px; font-size: 13px; }
dialog .melding:not(:empty) { padding-bottom: 12px; }
dialog .knoppen { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--rand);
  background: #fafbfb; border-radius: 0 0 14px 14px; }

/* Overzicht (ronde 1 Overzicht, 5-11-2026): één paneelvorm voor signalen en bezetting, even breed; kolomkoppen klein en in
   gewone zinsletters; aantallen als rustige labels (rood alleen deze en volgende week); per dag één staafje ochtend|middag. */
.signalen { margin: 0; padding: 0; list-style: none; }
.signalen > li { position: relative; padding: 10px 0 10px 18px; border-top: 1px solid var(--rand-zacht); color: var(--tekst-zacht); }
.signalen > li:first-child { border-top: 0; padding-top: 2px; }
.signalen > li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--rood); }
.signalen > li:first-child::before { top: 10px; }
.signalen li strong { color: var(--tekst); font-weight: 600; }
/* Ronde 3 Overzicht (5-11-2026): beide delen begrensd op 960px, zodat de aantallen direct naast de opmerking staan en de
   koplijn even breed is als de tabel eronder. */
.kaart.overzicht { max-width: none; } /* ronde 4: volle breedte van de inhoudskolom */
.paneel, .sigweken { border: 1px solid var(--rand); border-radius: 10px; overflow: hidden; background: var(--vlak);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
/* Kop van de signalen: kerncijfer, woord en toelichting op één basislijn */
.sigkop { margin: 0 0 24px; }
.sigkop + .sigweken { margin-top: 0; }
.sigkop p { margin: 0; }
.sigcijfer { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; color: var(--tekst); }
.sigtotaal { font-size: 28px; line-height: 32px; font-weight: 650; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--donker); }
.sigwoord { font-size: 16px; font-weight: 600; color: var(--donker); }
.sigwaar { margin-left: 4px; font-size: 14px; color: var(--grijs); }
.sigaltijd { margin-top: 8px !important; font-size: 14px; color: var(--tekst-zacht); }
/* Eén raster voor kolomkoppen, weekregels en dagregels: pijl | week | opmerking | zonder arts | telefonie | signalen */
/* Herkansing basis r2: Opmerking begrensd (4 delen), de drie getallen elk 1 deel, zodat het kolomritme klopt */
.sigrij { display: grid; grid-template-columns: 192px minmax(0, 1fr) 220px 104px 88px 96px; align-items: center; }
.sigrij > span { padding: 0 12px; min-width: 0; }
.sigrij > span:first-child { padding-left: 0; position: relative; }
.sigrij > span:last-child { padding-right: 20px; }
.sigrij > span:nth-child(n+4) { text-align: right; font-variant-numeric: tabular-nums; }
.sigkolommen, .bezetting thead th { height: 40px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--grijs);
  background: #fafbfc; border-bottom: 1px solid var(--rand); }
.sigweek { position: relative; }
.sigweek + .sigweek { border-top: 1px solid var(--rand-zacht); }
.sigweek .sigrij { height: 56px; padding: 0; box-sizing: border-box; font-size: 14px; color: var(--grijs); }
.sigweek summary { cursor: pointer; list-style: none; transition: background .12s; }
.sigweek summary::-webkit-details-marker { display: none; }
.sigweek summary > span:first-child::before { content: ""; position: absolute; left: -22px; top: 50%; margin-top: -4px; width: 6px; height: 6px;
  border-right: 1.5px solid var(--grijs); border-bottom: 1.5px solid var(--grijs); transform: translateX(2px) rotate(-45deg); transition: transform .12s; }
.sigweek[open] summary > span:first-child::before { transform: translateY(-2px) rotate(45deg); }
.sigweek summary:hover { background: var(--hover); }
.sigweek summary:focus-visible { outline-offset: -2px; border-radius: 0; }
/* Week en datum gestapeld: week in tekstkleur, datum gedempt eronder */
.sigwk { display: flex; flex-direction: column; line-height: 18px; }
.signr { font-weight: 500; color: var(--tekst); white-space: nowrap; }
.sigwk .sigdatum { font-size: 13px; color: var(--grijs); white-space: nowrap; }
.sigdeze { margin-left: 8px; padding: 0 7px; border-radius: 9px; font-size: 12px; line-height: 18px; font-weight: 500;
  background: var(--groen-licht); color: var(--groen-donker); vertical-align: 1px; }
/* Deze week: groene linkerbalk */
.sigweek.deze::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--groen); z-index: 1; }
.sigmeta { color: var(--tekst-zacht); font-size: 14px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sigsep { color: var(--grijs); }
.sigmeer { color: var(--grijs); }
.sigk { color: var(--grijs); }
.sigweek .leeg { color: var(--grijs); }
/* Aantal signalen: gewoon grijs; alleen een afwijkende week rood en vet */
/* Ronde 4: alleen de kolom Signalen heeft gewicht; afwijken zie je aan de hele rij (tint + linkerbalk) en het label */
.sigaantal { color: var(--donker); font-weight: 600; }
.sigk { color: var(--grijs); }
.sigweek.afwijkend::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rood); z-index: 1; }
.sigweek.afwijkend .signr { font-weight: 600; }
.sigweek.afwijkend summary:hover { background: var(--hover); }
/* Herkansing basis r1: de rode linkerbalk is de enige statusdrager; het label is gewone rode tekst, zonder vlak */
.siglabel { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
  font-size: 13px; line-height: 20px; font-weight: 500; color: var(--rood); }
.siglabelwie { font-weight: 400; }
.metuitleg { cursor: help; }
/* Kolomkoppen met korte ondertitel (vervangt de voetnoot); volledige uitleg als tooltip */
/* Kolomkoppen: één regel, 12px grijs; de eenheid en uitleg staan in de tooltip */
.sigkolommen > span { cursor: help; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Groepskop: Wijkt af / Zoals gewoonlijk, op de x van de weekkolom */
/* Herkansing basis r1: groepskop als klein label boven de groep, zonder vlak en zonder stip */
.siggroep { display: flex; align-items: flex-end; gap: 8px; height: 32px; padding: 0 20px 6px 48px; font-size: 12px; line-height: 16px;
  border-top: 1px solid var(--rand-zacht); }
.sigkolommen + .siggroep { border-top: 0; }
.siggroepnaam { font-weight: 600; color: var(--tekst-zacht); }
.siggroepaantal { color: var(--grijs); }
.siggroep + .sigweek { border-top: 0; }
/* Opengeklapte week: verzonken vlak; alleen de afwijkende dagen, op het raster van de weekregel */
.sigweek[open] { background: #f6f8f7; }
.sigweek[open] summary { background: none; border-bottom: 1px solid var(--rand-zacht); }
.sigweek[open] summary:hover { background: rgba(16, 24, 40, .03); }
.sigtabel { width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.sigtabel .k-week { width: 192px; } .sigtabel .k-status { width: 200px; }
.sigtabel .k-opm { width: auto; } .sigtabel .k-status { width: 220px; } .sigtabel col.k-getal:nth-last-child(3) { width: 104px; } .sigtabel col.k-getal:nth-last-child(2) { width: 88px; } .sigtabel col.k-getal:last-child { width: 96px; }
.sigtabel .verborgen-kop th { height: 0; padding: 0; border: 0; overflow: hidden; font-size: 0; line-height: 0; color: transparent; }
.sigtabel .verborgen-kop td { height: 0; padding: 0; }
.sigtabel tbody td, .sigtabel tbody th { height: 40px; padding: 0 12px; font-size: 13.5px; font-weight: 400; text-align: left; color: var(--grijs); white-space: nowrap; }
.sigtabel tbody th:first-child { padding-left: 0; }
.sigtabel tbody th[scope="row"] { color: var(--tekst); }
.sigdag { text-transform: capitalize; }
.sigtabel .sigdatum { color: var(--grijs); margin-left: 4px; }
.sigtabel tbody td.sigwat { color: var(--tekst-zacht); white-space: normal; line-height: 20px; padding-top: 8px; padding-bottom: 8px; }
.sigtabel tbody td.getal { text-align: right; }
.sigtabel tbody td:last-child { padding-right: 20px; color: var(--tekst-zacht); }
.sigtabel tbody tr:last-child td, .sigtabel tbody tr:last-child th { padding-bottom: 8px; }
.sigtabel tbody tr:hover td, .sigtabel tbody tr:hover th { background: rgba(16, 24, 40, .03); }
.getal { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .sigrij { grid-template-columns: 120px minmax(0, 1fr) 140px 64px 64px 64px; }
  .sigtabel .k-week { width: 120px; } .sigtabel .k-status { width: 140px; } .sigtabel .k-getal { width: 64px; }
  .sigtabel .k-opm { width: auto; }
}

/* Wie werkt wanneer: weektitel met schakelaar, daaronder de bezetting */
.ovbalk { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; }
.ovweek { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--grijs); font-variant-numeric: tabular-nums; }
.ovweek strong { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--donker); }
.ovlabel { align-self: center; font-size: 12px; font-weight: 500; line-height: 20px; padding: 0 8px; border-radius: 10px;
  background: var(--groen-licht); color: var(--groen-donker); }
.schakel { margin-left: auto; display: inline-flex; height: 30px; border: 1px solid #d5d8dd; border-radius: 7px; background: var(--vlak);
  box-shadow: 0 1px 1px rgba(16, 24, 40, .04); }
.schakel button { border: 0; background: none; padding: 0 12px; font-size: 13px; font-weight: 500; color: var(--tekst); transition: background .12s; }
.schakel button:first-child { border-radius: 6px 0 0 6px; }
.schakel button:last-child { border-radius: 0 6px 6px 0; }
.schakel button + button { border-left: 1px solid var(--rand); }
.schakel button[aria-label] { width: 32px; padding: 0; font-size: 17px; line-height: 1; color: var(--tekst-zacht); }
.schakel button:hover { background: var(--hover); }
.schakel button:focus-visible { outline-offset: 1px; position: relative; z-index: 1; }
.bezetting { table-layout: fixed; }
.bezetting thead th:first-child { width: 30%; }
/* Herkansing basis r2: dagkop en strook links uitgelijnd op dezelfde lijn; vandaag alleen met de groene lijn onder de kop */
.bezetting:not(.telefonie) thead th:first-child { width: 280px; }
.bezetting:not(.telefonie) thead th { height: auto; padding-top: 10px; padding-bottom: 8px; vertical-align: top; line-height: 18px; }
.bezetting:not(.telefonie) td, .bezetting:not(.telefonie) thead th:not(:first-child) { text-align: left; padding-left: 8px; padding-right: 8px; }
.bezetting:not(.telefonie) td:last-child, .bezetting:not(.telefonie) thead th:last-child { padding-right: 16px; }
.bezetting th:first-child, .bezetting td:first-child { padding-left: 16px; }
.overzicht .bezetting th:first-child { padding-left: 0; }
.bezetting thead th { white-space: nowrap; }
.bezetting .ovdag { color: var(--tekst-zacht); font-weight: 500; text-transform: capitalize; }
.bezetting .ovdatum { color: var(--grijs); }
.bezetting thead th.nu .ovdag, .bezetting thead th.nu .ovdatum { color: var(--groen-donker); font-weight: 600; }
.bezetting thead th.nu { box-shadow: inset 0 -2px 0 var(--groen); }
.bezetting:not(.telefonie) td.nu { background: none; }
/* Herkansing basis r3: O en M gecentreerd boven twee even brede blokken die samen de dagkolom vullen */
.ovom { display: flex; gap: 4px; margin-top: 4px; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--grijs); }
.ovom > span { flex: 1; text-align: center; }
.dagstrook { display: flex; gap: 4px; }
.strookdeel { flex: 1; height: 22px; box-sizing: border-box; border-radius: 5px; border: 1px solid #d5d8dd; background: var(--vlak); }
.strookdeel.aan { background: var(--groen); border-color: var(--groen); }
.bezetting td.ovgeen { font-size: 13px; color: var(--grijs); }
.bezetting tbody th[scope="row"] { height: 56px; padding-top: 8px; padding-bottom: 8px; }
.ovnaam { display: block; font-weight: 600; color: var(--tekst); font-size: 14px; line-height: 20px; }
.ovprofiel { display: block; font-weight: 400; font-size: 12px; line-height: 18px; color: var(--grijs); }
.ovprofiel.geen { color: var(--rood); }
.dagdelen { display: inline-flex; gap: 2px; vertical-align: middle; }
.dagdeel { display: inline-block; width: 26px; height: 24px; line-height: 22px; text-align: center; font-size: 11px; font-weight: 600;
  background: var(--zacht); color: var(--grijs); border: 1px solid var(--rand); }
.dagdeel:first-child { border-radius: 6px 2px 2px 6px; }
.dagdeel:nth-child(2) { border-radius: 2px 6px 6px 2px; }
.dagdeel.aan { background: var(--groen); color: #fff; border-color: var(--groen); }
.bezetting .dagdelen { width: 100%; max-width: 104px; }
.bezetting .dagdeel { flex: 1; width: auto; height: 28px; line-height: 26px; font-size: 12px; }
/* Legenda in de kop van het raster, naast de weektitel */
.ovlegenda { margin: 0 0 0 auto; display: flex; align-items: center; gap: 16px; font-size: 12px; line-height: 16px; color: var(--grijs); }
.ovlegenda[hidden] { display: none; }
.ovlegenda + .schakel { margin-left: 8px; }
.lgitem { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lgblok { width: 14px; height: 10px; box-sizing: border-box; border-radius: 3px; border: 1px solid #d5d8dd; background: var(--vlak); }
.lgblok.aan { background: var(--groen); border-color: var(--groen); }

/* Herkansing basis r4 (5-11-2026): minder soorten scheiding op Overzicht. Geen kaartrand en geen grijze kopregel meer:
   alleen de koplijn, dunne rijlijnen en de gekleurde linkerbalk. Lege dagdelen hebben geen rand, alleen een heel lichte
   vulling; een agenda zonder weekschema is één stille balk. Opmerking begrensd, zodat status en getallen bij hun rij staan. */
.overzicht .paneel, .overzicht .sigweken { border: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible; }
.overzicht .sigkolommen, .overzicht .bezetting thead th { background: none; border-bottom: 1px solid var(--rand); }
.overzicht .sigweken { border-bottom: 1px solid var(--rand-zacht); }
.overzicht .bezetting tbody tr:last-child th, .overzicht .bezetting tbody tr:last-child td { border-bottom: 1px solid var(--rand-zacht); }
.overzicht .sigrij { grid-template-columns: 192px minmax(0, 464px) 220px 104px 88px 96px; }
.overzicht .sigtabel { width: 1200px; max-width: 100%; }
.overzicht .sigtabel .k-opm { width: 464px; } .overzicht .sigtabel .k-status { width: 220px; }
.overzicht .siggroep { height: auto; padding: 18px 20px 4px 48px; }
.overzicht .strookdeel { height: 16px; border: 0; border-radius: 4px; background: rgba(16, 24, 40, .04); }
.overzicht .strookdeel.aan { background: var(--groen); }
.ovstil { display: block; height: 16px; padding-left: 10px; border-radius: 4px; background: rgba(16, 24, 40, .035);
  font-size: 12px; line-height: 16px; color: var(--grijs); }
@media (max-width: 900px) {
  .overzicht .sigrij { grid-template-columns: 120px minmax(0, 1fr) 140px 64px 64px 64px; }
  .overzicht .sigtabel { width: 100%; } .overzicht .sigtabel .k-opm { width: auto; } .overzicht .sigtabel .k-status { width: 140px; }
}

/* Herkansing Overzicht r1 (5-11-2026): afwijken heeft één drager, de rode tekst in Status. Geen gekleurde linkerbalken,
   geen groepsregels, geen extra gewicht op de weeknaam. Een gewone week zegt rustig grijs "Zoals gewoonlijk", zodat het
   raster niet zweeft. Opmerking krijgt de rest van de breedte; de drie getalkolommen zijn even breed, rechts uitgelijnd,
   en het raster loopt tot de rechterrand. Het totaal per week staat iets groter. */
.overzicht .sigweek.deze::before, .overzicht .sigweek.afwijkend::before { content: none; }
.overzicht .sigweek.afwijkend .signr { font-weight: 500; }
.overzicht .sigrij { grid-template-columns: 208px minmax(0, 1fr) 232px 112px 112px 112px; }
.overzicht .sigrij > span:last-child { padding-right: 12px; }
.overzicht .sigtabel { width: 100%; }
.overzicht .sigtabel .k-week { width: 208px; } .overzicht .sigtabel .k-opm { width: auto; } .overzicht .sigtabel .k-status { width: 232px; }
.overzicht .sigtabel col.k-getal:nth-last-child(3), .overzicht .sigtabel col.k-getal:nth-last-child(2), .overzicht .sigtabel col.k-getal:last-child { width: 112px; }
.overzicht .sigtabel tbody td:last-child { padding-right: 12px; }
.overzicht .sigaantal { font-size: 15px; font-weight: 600; }
.sigrustig { font-size: 13px; line-height: 20px; color: var(--grijs); }
.overzicht .sigkop { margin-bottom: 20px; }
@media (max-width: 900px) {
  .overzicht .sigrij { grid-template-columns: 120px minmax(0, 1fr) 140px 64px 64px 64px; }
  .overzicht .sigtabel .k-week { width: 120px; } .overzicht .sigtabel .k-status { width: 140px; }
  .overzicht .sigtabel col.k-getal:nth-last-child(3), .overzicht .sigtabel col.k-getal:nth-last-child(2), .overzicht .sigtabel col.k-getal:last-child { width: 64px; }
}

/* Herkansing Overzicht r2 (5-11-2026): één linkerrand. De lege pijlkolom is weg; weeknaam, agendanaam, kolomkoppen en de
   sectiekoppen staan alle op dezelfde inhoudsrand. Het uitklappijltje staat in de marge links daarvan. Lege dagdelen zijn
   geen grijze balk meer maar een dunne stippellijn; een agenda zonder weekschema toont dat als rode tekst, zoals in de
   signalen erboven. */
.overzicht .strookdeel { height: 16px; background: repeating-linear-gradient(90deg, #c9cdd3 0 3px, transparent 3px 6px) center / 100% 1px no-repeat; }
.overzicht .strookdeel.aan { background: var(--groen); }
.ovstil { display: inline-flex; align-items: center; gap: 8px; height: auto; padding: 0; border-radius: 0; background: none;
  font-size: 13px; line-height: 20px; font-weight: 500; color: var(--rood); }
.ovstil::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rood); }
.ovstiluitleg { font-weight: 400; color: var(--grijs); }
.overzicht .sigweek summary:hover, .overzicht .sigweek[open] summary:hover { background: none; }
.overzicht .sigweek summary:hover .signr { color: var(--groen-donker); }
/* Dagkolommen beginnen op dezelfde x als de kolom Opmerking erboven (inhoudsrand + 220px) */
.overzicht .bezetting:not(.telefonie) thead th:first-child { width: 212px; }

/* Herkansing Overzicht r3 (5-11-2026): één lijnstijl (1px var(--rand)) en één verticale schaal (8/16/32/64).
   - Sectiekoppen zijn kleine labels in hoofdletters met dunne lijn; het totaal "113" is de enige blikvanger, de toelichting
     en de zin over agenda's zonder weekschema staan samen op één rij eronder.
   - Signalen: Opmerking begrensd (456px), Status er direct naast, de drie getallen gebundeld rechts in smalle kolommen van 96px.
   - Wie werkt wanneer: dagkolommen beginnen op de x van de tekst in Opmerking; elke dag is twee even brede cellen (O | M) met dezelfde
     4px tussenruimte als in de kop. Daglabel, O en M staan links, gelijk met het blok eronder. Een leeg dagdeel is een
     lichtgrijs blok, even hoog en rond als het groene; geen stippellijn. Vandaag alleen in groene tekst, geen eigen lijn. */
.uitkomst .kaart.overzicht + .kaart.overzicht { margin-top: 64px; }
.kaart.overzicht h3.sectielabel { margin: 0 0 16px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tekst-zacht); }
.kaart.overzicht h3.sectielabel::after { height: 1px; background: var(--rand); }
.overzicht .sigkop { margin: 0 0 32px; }
.overzicht .sigcijfer { column-gap: 8px; }
.overzicht .sigtotaal { font-size: 32px; line-height: 40px; font-weight: 650; letter-spacing: -.04em; }
.overzicht .sigwoord { font-size: 16px; font-weight: 500; color: var(--tekst-zacht); }
.overzicht .sigtoelichting { display: flex; flex-wrap: wrap; column-gap: 8px; margin-top: 8px; font-size: 14px; line-height: 20px; }
.overzicht .sigtoelichting .sigwaar { margin: 0; color: var(--grijs); }
.overzicht .sigtoelichting .sigaltijd { margin: 0 !important; color: var(--tekst-zacht); }
/* Eén lijnstijl */
.overzicht .sigkolommen, .overzicht .bezetting thead th { border-bottom: 1px solid var(--rand); }
.overzicht .sigweek + .sigweek, .overzicht .sigweek[open] summary { border-color: var(--rand); }
.overzicht .sigweken { border-bottom: 1px solid var(--rand); }
.overzicht .bezetting td, .overzicht .bezetting tbody th[scope="row"],
.overzicht .bezetting tbody tr:last-child th, .overzicht .bezetting tbody tr:last-child td { border-bottom: 1px solid var(--rand); }
.overzicht .bezetting thead th.nu { box-shadow: none; }
/* Signalentabel: kolommen */
.overzicht .sigrij { grid-template-columns: 208px minmax(0, 456px) minmax(160px, 1fr) 96px 96px 96px; }
.overzicht .sigrij > span:last-child { padding-right: 0; }
.overzicht .sigaantal { font-size: 14px; font-weight: 600; color: var(--donker); }
.overzicht .sigk { color: var(--tekst-zacht); }
.overzicht .sigtabel .k-week { width: 208px; } .overzicht .sigtabel .k-opm { width: 456px; } .overzicht .sigtabel .k-status { width: auto; }
.overzicht .sigtabel col.k-getal:nth-last-child(3), .overzicht .sigtabel col.k-getal:nth-last-child(2), .overzicht .sigtabel col.k-getal:last-child { width: 96px; }
.overzicht .sigtabel tbody td:last-child { padding-right: 0; }
/* Wie werkt wanneer: raster */
.overzicht .ovbalk { margin: 0 0 16px; }
.overzicht .bezetting:not(.telefonie) thead th:first-child { width: 208px; }
.overzicht .bezetting:not(.telefonie) thead th { padding-top: 8px; padding-bottom: 8px; }
.overzicht .bezetting:not(.telefonie) thead th:not(:first-child), .overzicht .bezetting:not(.telefonie) td { padding-left: 12px; padding-right: 4px; }
/* alle dagen even breed: ook de laatste houdt 4px rechts */
.overzicht .ovom { gap: 4px; margin-top: 4px; }
.overzicht .ovom > span { flex: 1 1 0; text-align: left; padding: 0; }
.overzicht .dagstrook { gap: 4px; }
.overzicht .strookdeel { flex: 1 1 0; height: 24px; border: 0; border-radius: 4px; background: var(--rand-zacht); }
.overzicht .strookdeel.aan { background: var(--groen); }
.overzicht .lgitem .lgblok { width: 16px; height: 12px; border: 0; border-radius: 3px; background: var(--rand-zacht); }
.overzicht .lgitem .lgblok.aan { background: var(--groen); }
@media (max-width: 900px) {
  .overzicht .sigrij { grid-template-columns: 120px minmax(0, 1fr) 140px 64px 64px 64px; }
  .overzicht .sigtabel .k-week { width: 120px; } .overzicht .sigtabel .k-opm { width: auto; } .overzicht .sigtabel .k-status { width: 140px; }
  .overzicht .sigtabel col.k-getal:nth-last-child(3), .overzicht .sigtabel col.k-getal:nth-last-child(2), .overzicht .sigtabel col.k-getal:last-child { width: 64px; }
}

/* Herkansing Overzicht r4 (5-11-2026): de hiërarchie omgedraaid. Wat goed gaat is licht, wat mist valt op.
   - Eén kop per sectie (20px, met dunne lijn); bij Signalen staat het totaal in de kop zelf. Secties 48px uit elkaar,
     kop tot inhoud 24px, geen dubbele spatie in de toelichting.
   - Tweede toonniveau: kolomkoppen klein in kapitalen met spatiëring, rijtitels (week, agenda) halfvet in tekstkleur.
   - Afwijkende week en agenda zonder weekschema: lichtrode rij met rode balk van 3px links; het label halfvet.
   - Raster: planbaar is een lichte groene tint met dunne groene rand, leeg is alleen een dunne omlijning; een agenda zonder
     weekschema krijgt lege, rood omlijnde vakken in elke dagkolom. Blokken 14px hoog met meer lucht ertussen.
   - Signalen: Opmerking krijgt de ruimte, Status sluit erop aan, de drie getallen staan dicht bij elkaar (104px, tabelcijfers). */
main:has(.kaart.overzicht) { padding-bottom: 48px; }
.uitkomst .kaart.overzicht + .kaart.overzicht { margin-top: 48px; }
.kaart.overzicht h3, .kaart.overzicht h3.sectielabel { display: flex; align-items: baseline; gap: 0; margin: 0 0 24px; font-size: 20px; line-height: 28px;
  font-weight: 600; letter-spacing: -.018em; text-transform: none; color: var(--donker); }
.kaart.overzicht h3::after { content: ""; flex: 1; align-self: center; height: 1px; margin-left: 20px; background: var(--rand); }
.kaart.overzicht h3 .sigtotaal { font-size: 28px; line-height: 28px; font-weight: 650; letter-spacing: -.035em; color: var(--donker); }
.kaart.overzicht h3 .sigwoord { margin-left: 8px; font-size: 20px; font-weight: 600; color: var(--donker); }
.kaart.overzicht h3 .sigperiode { margin-left: 12px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--grijs); }
.overzicht .sigkop { margin: -12px 0 24px; }
.overzicht .sigtoelichting { display: block; margin: 0; font-size: 14px; line-height: 20px; color: var(--grijs); }
.overzicht .sigtoelichting .sigwaar, .overzicht .sigtoelichting .sigaltijd { display: inline; margin: 0 !important; }
.overzicht .sigtoelichting .sigaltijd { color: var(--tekst-zacht); }
/* Kolomkoppen: tweede toonniveau */
.overzicht .sigkolommen, .overzicht .bezetting thead th:first-child { height: 32px; font-size: 11px; line-height: 16px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--grijs); }
.overzicht .bezetting thead th:first-child { vertical-align: bottom; padding-bottom: 10px; }
.overzicht .bezetting .ovdag { color: var(--tekst); font-weight: 600; }
.overzicht .bezetting .ovdatum { color: var(--grijs); font-weight: 400; }
.overzicht .bezetting thead th.nu .ovdag { color: var(--groen-donker); font-weight: 600; }
.overzicht .bezetting thead th.nu .ovdatum { color: var(--groen-donker); font-weight: 400; }
.overzicht .ovom { font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--grijs); }
/* Rijtitels met gewicht */
.overzicht .signr { font-weight: 600; color: var(--donker); }
.overzicht .sigweek.afwijkend .signr { font-weight: 600; }
.overzicht .ovnaam { font-weight: 600; color: var(--donker); }
/* Kolommen: Opmerking ruim, Status erachter, getallen gebundeld */
.overzicht .sigrij { grid-template-columns: 208px minmax(0, 1fr) 248px 104px 104px 104px; }
.overzicht .sigrij > span:nth-child(n+4) { padding-left: 0; }
.overzicht .sigtabel .k-week { width: 208px; } .overzicht .sigtabel .k-opm { width: auto; } .overzicht .sigtabel .k-status { width: 248px; }
.overzicht .sigtabel col.k-getal:nth-last-child(3), .overzicht .sigtabel col.k-getal:nth-last-child(2), .overzicht .sigtabel col.k-getal:last-child { width: 104px; }
.overzicht .sigweek .sigrij { height: 60px; }
/* Afwijkende week: gemarkeerde rij */
.overzicht .sigweek.afwijkend { background: #fdf4f3; }
.overzicht .sigweek.afwijkend::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 3px; background: var(--rood); z-index: 1; }
.overzicht .sigweek.afwijkend::after { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 16px; background: #fdf4f3; z-index: 0; }
.overzicht .sigweek.afwijkend .siglabel { font-size: 13px; font-weight: 600; }
.overzicht .sigweek.afwijkend .siglabelwie { font-weight: 500; }
.overzicht .sigweek.afwijkend .sigmeta { color: var(--tekst); }
/* Raster: licht en ritmisch */
.overzicht .bezetting tbody th[scope="row"], .overzicht .bezetting tbody td { height: 60px; }
.overzicht .dagstrook { gap: 6px; }
.overzicht .strookdeel { height: 14px; border-radius: 4px; background: none; box-shadow: inset 0 0 0 1px #d5d8dd; }
.overzicht .strookdeel.aan { background: rgba(52, 120, 97, .2); box-shadow: inset 0 0 0 1px rgba(52, 120, 97, .55); }
.overzicht .lgitem .lgblok { width: 16px; height: 10px; border: 0; border-radius: 3px; background: none; box-shadow: inset 0 0 0 1px #d5d8dd; }
.overzicht .lgitem .lgblok.aan { background: rgba(52, 120, 97, .2); box-shadow: inset 0 0 0 1px rgba(52, 120, 97, .55); }
.overzicht .lgitem .lgblok.gat, .overzicht .dagstrook.gat .strookdeel { background: var(--vlak); box-shadow: inset 0 0 0 1px rgba(180, 35, 24, .6); }
.overzicht .lgitem[hidden] { display: none; }
/* Agenda zonder weekschema: gemarkeerde rij */
.overzicht .bezetting tr.ovgatrij th, .overzicht .bezetting tr.ovgatrij td,
.overzicht .bezetting tbody tr.ovgatrij:hover th, .overzicht .bezetting tbody tr.ovgatrij:hover td { background: #fdf4f3; }
.overzicht .bezetting tr.ovgatrij th[scope="row"] { position: relative; }
.overzicht .bezetting tr.ovgatrij th[scope="row"]::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 3px; background: var(--rood); }
.overzicht .bezetting tr.ovgatrij th[scope="row"]::after { content: ""; position: absolute; left: -13px; top: 0; bottom: 0; width: 13px; background: #fdf4f3; }
.overzicht .ovprofiel.geen { font-size: 12px; font-weight: 600; color: var(--rood); }
@media (max-width: 900px) {
  .overzicht .sigrij { grid-template-columns: 120px minmax(0, 1fr) 140px 64px 64px 64px; }
  .overzicht .sigtabel .k-week { width: 120px; } .overzicht .sigtabel .k-status { width: 140px; }
  .overzicht .sigtabel col.k-getal:nth-last-child(3), .overzicht .sigtabel col.k-getal:nth-last-child(2), .overzicht .sigtabel col.k-getal:last-child { width: 64px; }
}

/* Profielen (ronde 3 Profielen, 5-11-2026): de tijdlijn is het werkvlak. Een rij per dag (48px) met de blokken als balken van
   28px in een volle eigen kleur (Webconsult groen #347861), niet planbaar gearceerd grijs; naam en tijd in de balk. Geen aparte
   blokkenlijst; legenda naast de profielregel. Typeschaal: titel 24/600, profielregel 15, dagnaam 14/500, uren en labels 12.
   Uurlijnen lichter dan de rijscheiding; uurlabels om de 2 uur precies op de lijn. */
.kaart.profielen h3 { font-size: 24px; line-height: 32px; letter-spacing: -.022em; }
/* Herkansing r2: geen lijn naast de titel; de profielkeuze staat vanzelf rechts. */
.kaart.profielen h3::after { content: none; }
.profkeuze { display: flex; align-items: center; gap: 10px; }
.profkeuze label { font-size: 13px; font-weight: 500; color: var(--tekst-zacht); }
.profkeuze select { min-width: 220px; height: 32px; font-size: 13.5px; font-weight: 500; }
.profkop { display: flex; flex-direction: column; gap: 2px; margin: 0 0 16px; }
.profkop p { margin: 0; }
/* Herkansing r2: twee niveaus. De naam donker en halfvet; alles daaronder één grijze toon, normaal gewicht. */
/* Herkansing r3: drie niveaus. Naam klein en donker, het kerngetal groot en vet, het totaal klein en grijs ernaast. */
.profnaam { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--tekst-zacht); }
.profcijfer { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; }
.profgetal { font-size: 32px; line-height: 40px; font-weight: 650; letter-spacing: -.035em; color: var(--donker); font-variant-numeric: tabular-nums; }
.profeenheid { font-size: 15px; font-weight: 500; color: var(--tekst); }
.profmaat { margin-left: 8px; padding-left: 18px; border-left: 1px solid var(--rand); font-size: 13px; color: var(--grijs); font-variant-numeric: tabular-nums; }
/* Kopbalk van de kaart: bron/periode links, legenda rechts, op één regel */
.profkaartkop { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; padding: 0 28px 0 20px;
  background: #fafbfc; border-bottom: 1px solid var(--rand); border-radius: 10px 10px 0 0; }
.profgebruik { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0; font-size: 13px; line-height: 20px; color: var(--tekst-zacht); }
.profgebruikitem { display: inline-flex; align-items: center; gap: 8px; }
.profgebruikitem::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--groen); }
.profgebruikwie { font-weight: 600; color: var(--tekst); }
/* Legenda: klein, rechts op de regel van het profiel */
.proflegenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--tekst-zacht); }
.proflegenda li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.proflegstip { width: 14px; height: 10px; border-radius: 3px; }
/* Herkansing r3: niet planbaar is een effen lichtgrijs vlak, zonder rand of arcering. */
/* Herkansing r4: niet planbaar (pauze) volgt hetzelfde blokmodel: zelfde hoogte en hoek, fijn gearceerd grijs met een dunne rand. */
.proflegstip.np, .profbalk.np { background: repeating-linear-gradient(135deg, #e4e7eb 0 3px, #f5f6f8 3px 6px); box-shadow: inset 0 0 0 1px #d9dde2; }
.proflegnp { color: var(--grijs); }
/* Raster: dag | tijdlijn | dagactie */
/* Herkansing r4: het raster loopt door tot de rechterrand van de kaart (17:00 valt op de kaartrand). */
.profkolommen, .profrij { display: grid; grid-template-columns: 196px minmax(0, 1fr); column-gap: 28px; padding: 0 0 0 20px; }
.profkolommen { height: 32px; align-items: center; font-size: 12px; font-weight: 500; color: var(--grijs); background: var(--vlak);
  border-bottom: 1px solid var(--rand); }
.profuren { position: relative; height: 100%; font-weight: 400; font-variant-numeric: tabular-nums; }
.profuren > span { position: absolute; top: 50%; transform: translate(-50%, -50%); color: var(--grijs); }
.profuren > span.eerst { transform: translate(0, -50%); }
.profuren > span.laatst { transform: translate(calc(-100% - 12px), -50%); }
/* Smal venster: alleen elk tweede uur een label, en geen plekken in de balk */
@media (max-width: 900px) { .profuren > span.oneven { display: none; } .profbalkplek { display: none; } }

.profdag { position: relative; }
.profdag + .profdag { border-top: 1px solid var(--rand); }
.profdag.gewijzigd::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--groen); z-index: 1; }
/* Ronde 4: werkdagen 56px hoog met een balk van 32px; lege dagen (vrij) ingeklapt tot 32px en gedempt. */
.profrij { align-items: center; height: 52px; }
.profdagkop { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.profdagtekst { display: flex; flex-direction: column; min-width: 0; }
.profdagkop h4 { margin: 0; }
.profdagnaam { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; color: var(--tekst); text-transform: capitalize; }
.profgewijzigd { width: 6px; height: 6px; border-radius: 50%; background: var(--groen); box-shadow: 0 0 0 3px var(--groen-licht); }
.profdagsom { font-size: 12px; line-height: 18px; color: var(--grijs); font-variant-numeric: tabular-nums; }
.profgeen { color: var(--grijs); }
/* Herkansing r1: lege dagen even hoog als werkdagen (één ritme), alleen de naam gedempt. */
.profdag.leeg .profdagnaam { font-weight: 400; color: var(--grijs); }
/* Tijdlijn: uurlijnen zacht (even uren iets duidelijker), lichter dan de rijscheiding */
.profspoor { position: relative; height: 100%; }
.profrooster { position: absolute; inset: 0; pointer-events: none; }
.profrooster > i { position: absolute; top: 0; bottom: 0; width: 0; margin-left: -.5px; border-left: 1px solid #e6e8ec; }
.profrooster > i.half { border-left: 1px dashed #e3e5e9; }
.profrooster > i.eind { display: none; }
/* Blokken als balken */
.profbalk { position: absolute; top: 50%; transform: translateY(-50%); height: 32px; display: flex; align-items: center; gap: 8px; min-width: 4px; padding: 0 10px; overflow: hidden;
  border: 0; border-radius: 6px; font: inherit; font-size: 13px; line-height: 32px; text-align: left; white-space: nowrap; z-index: 1;
  /* Herkansing r2: lichte tint met een linkerrand van 3px en donkere tekst in dezelfde kleur, geen volle vulling. */
  background: color-mix(in srgb, var(--blok, var(--groen)) 15%, #fff); color: color-mix(in srgb, var(--blok, var(--groen)) 70%, #000);
  box-shadow: inset 3px 0 0 var(--blok, var(--groen)), inset 0 0 0 1px color-mix(in srgb, var(--blok, var(--groen)) 22%, #fff);
  transition: box-shadow .12s, background .12s; }
.profbalk:not(.np) { padding-left: 12px; }
.profbalk.smal { padding: 0; }
.profbalk.np { color: var(--tekst-zacht); padding: 0 8px; }
.profbalktijd { font-variant-numeric: tabular-nums; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.profbalkplek { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.profbalk.np .profbalktijd { font-weight: 400; color: var(--grijs); }
button.profbalk { cursor: pointer; }
button.profbalk:hover { background: color-mix(in srgb, var(--blok, var(--groen)) 24%, #fff); }
button.profbalk.np:hover { background: repeating-linear-gradient(135deg, #d9dde2 0 3px, #eef0f2 3px 6px); box-shadow: inset 0 0 0 1px #c9ced5; }
.profbalk.open { box-shadow: 0 0 0 2px var(--vlak), 0 0 0 4px var(--groen); z-index: 2; }
.profbalk:focus-visible { outline: 2px solid var(--donker); outline-offset: 2px; z-index: 3; }
/* + Blok: verschijnt op de lege plek onder de muis (of met Tab) */
.proferbij { position: absolute; top: 50%; transform: translateY(-50%); height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 64px;
  padding: 0 8px; border: 1px dashed #9cc4b0; border-radius: 6px; background: var(--groen-licht); color: var(--groen-donker); font-size: 12.5px; font-weight: 500;
  white-space: nowrap; opacity: 0; transition: opacity .1s; z-index: 1; }
.profspoor:hover .proferbij, .proferbij:focus-visible { opacity: 1; }
.profspoor.opblok .proferbij:not(:focus-visible) { opacity: 0; pointer-events: none; }
.proferbij:hover { border-style: solid; border-color: var(--groen); }
.profplus { font-size: 15px; line-height: 1; }
/* Dagactie rechts: Dag kopiëren, zichtbaar bij aanwijzen van de rij */
.profstil { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 0; border-radius: 6px;
  background: none; color: var(--grijs); font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: background .12s, color .12s, opacity .12s; }
.profstil:hover { background: var(--hover); color: var(--groen-donker); }
.profdagacties { display: flex; gap: 2px; flex: none; }
.profactie { height: 26px; padding: 0 7px; }
@media (hover: hover) {
  .profactie { opacity: 0; }
  .profdag:hover .profactie, .profactie:focus-visible { opacity: 1; }
}
/* Herkansing r3: vrije dagen half zo hoog, naam en "vrij" op één regel */
/* Herkansing r4: alle zeven dagen even hoog (52px), ook vrije dagen; één ritme. */
.profdag:hover .profrij { background: #fbfbfc; }
/* Open blok: velden in een strook onder de dag */
.profblok.bewerk { display: flex; align-items: center; gap: 12px; margin: 0 32px 10px calc(20px + 196px + 28px); padding: 8px 10px; border-radius: 8px;
  background: var(--groen-licht); box-shadow: inset 0 0 0 1px #cfe2d8; }
.profstip { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.profblok.bewerk.np .profstip { background: repeating-linear-gradient(135deg, #d3d7dd 0 2px, #f4f5f7 2px 4px); box-shadow: inset 0 0 0 1px #c4c9d0; }
.profveld { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--tekst-zacht); }
.profveld.soort { flex: 0 1 260px; min-width: 0; }
.profveld.soort select { flex: 1; min-width: 0; }
.profblok.bewerk input[type="time"] { width: 76px; height: 28px; padding: 0 6px; font-size: 13.5px; font-variant-numeric: tabular-nums; background: var(--vlak); }
.profblok.bewerk input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
.profblok.bewerk select { height: 28px; font-size: 13.5px; }
.profbewerkknoppen { margin-left: auto; display: flex; gap: 6px; }
.profklaar { height: 28px; padding: 0 12px; border: 1px solid var(--groen); border-radius: 6px; background: var(--groen); color: #fff; font-size: 13px; font-weight: 500; }
.profklaar:hover { background: var(--groen-donker); border-color: var(--groen-donker); }
.profweg { height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--rood); font-size: 13px; font-weight: 500;
  transition: background .12s; }
.profweg:hover { background: var(--rood-licht); }
/* Voetbalk: stand links, knoppen rechts; vast onderaan met een duidelijke scheiding */
.profvoet { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 0 20px;
  background: rgba(255, 255, 255, .97); backdrop-filter: blur(6px); border-top: 1px solid var(--rand); border-radius: 0 0 10px 10px;
  box-shadow: 0 -8px 16px -12px rgba(16, 24, 40, .18); }
.profweek { overflow: visible; }
.profstand { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--grijs); }
.profstand.wijzig { color: var(--groen-donker); font-weight: 500; }
.profstand.wijzig::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--groen); box-shadow: 0 0 0 3px var(--groen-licht); }
/* Herkansing r3: links een hint; rechts Weggooien als tekstknop, de stand vlak bij de groene hoofdknop. */
.profhint { margin-right: auto; font-size: 13px; color: var(--grijs); }
.proftekstknop { height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--tekst-zacht); font-size: 13px; font-weight: 500; }
.proftekstknop:hover:not(:disabled) { background: var(--hover); color: var(--tekst); }
.proftekstknop:disabled { visibility: hidden; }
.profvoet .profstand { margin-left: 4px; }
.profvoet .actie.hoofd { height: 34px; padding: 0 16px; font-size: 13.5px; font-weight: 600; }
.profvoet .actie.hoofd:disabled { opacity: .5; box-shadow: none; }
/* Herkansing r1: zonder wijzigingen is de hoofdknop echt uit (grijs, zoals Weggooien); met wijzigingen effen groen. */
.profvoet .actie:disabled { cursor: not-allowed; }
/* Nog geen profiel gekozen */
.profleeg { padding: 40px 24px; text-align: center; border: 1px dashed var(--rand); border-radius: 10px; color: var(--grijs); font-size: 13.5px; }
.profleeg p { margin: 4px auto; max-width: 460px; }
.profleegkop { font-size: 15px; font-weight: 600; color: var(--tekst); }
@media (max-width: 1100px) {
  .profkop { flex-direction: column; align-items: flex-start; }
  .profkolommen, .profrij { grid-template-columns: 170px minmax(0, 1fr); column-gap: 20px; }
  .profblok.bewerk { margin-left: 20px; flex-wrap: wrap; }
  .profhint { display: none; }
  .profvoet { justify-content: flex-end; flex-wrap: wrap; padding: 10px 16px; }
}
@media (max-width: 700px) {
  .profkolommen, .profrij { grid-template-columns: 96px minmax(0, 1fr); }
  .profkopie { display: none; }
  .profdagkop { flex-direction: column; align-items: flex-start; gap: 0; }
}
.vinkjes { border: 1px solid var(--rand); border-radius: var(--straal); display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 14px; margin: 8px 0; }
.vinkjes legend { font-size: 12px; color: var(--grijs); padding: 0 4px; }
.vinkjes.kolom { flex-direction: column; }

/* Inloggen (huisstijl, 5-11-2026): het hele scherm, zonder zijbalk. Links een vlak in huisstijl-donkerblauw met het witte
   logo, de naam Cockpit, één zin en de locaties, met lichte jaarringen; rechts op zand de inlogkaart van 448px.
   "Nog niet in Bricks" blijft een kaart in de werkruimte, met de zijbalk erbij (het rooster werkt dan gewoon). */
body:has(.inlogscherm) { display: block; background: var(--zand); }
body:has(.inlogscherm) .zijbalk { display: none; }
body:has(.inlogscherm) main { padding: 0; }
.uitkomst:has(> .kaart.inloggen) { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 160px); }
.inlogscherm { display: grid; grid-template-columns: minmax(420px, 44%) minmax(0, 1fr); min-height: 100vh; }
.inlogintro { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  padding: 48px clamp(40px, 5vw, 72px); background: var(--donker); color: #fff; }
.inlogintro::before { content: ""; position: absolute; z-index: -1; left: -380px; bottom: -520px; width: 1100px; height: 1100px;
  pointer-events: none; background: repeating-radial-gradient(circle, transparent 0 47px, rgba(212, 231, 237, .09) 47px 48px);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%); mask-image: radial-gradient(circle, #000 25%, transparent 70%); }
.inlogintro .inloglogo { display: block; width: 176px; height: auto; }
.inlogintro .inlogmidden { margin: auto 0; padding: 48px 0 10vh; }
.inlogintro .inloglabel { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--lichtblauw); }
.inlogintro .inloglabel::after { content: ""; width: 48px; height: 1px; background: var(--lichtblauw); opacity: .5; }
.inlogintro .inlogtitel { margin: 0; font-size: 60px; line-height: 1.04; font-weight: 600; letter-spacing: -.035em; color: #fff; }
.inlogintro .inlogzin { margin: 18px 0 0; font-size: 19px; line-height: 30px; color: rgba(255, 255, 255, .82); max-width: 22em; }
.inlogintro .inloglocaties { margin: 0; padding-top: 16px; border-top: 1px solid rgba(212, 231, 237, .22);
  font-size: 14px; color: rgba(255, 255, 255, .72); }
.inlogkant { display: flex; align-items: center; justify-content: center; padding: 48px 32px calc(48px + 6vh); }
.uitkomst .kaart.inloggen { box-sizing: border-box; width: 100%; max-width: 448px; margin: 0; padding: 40px;
  text-align: left; background: var(--vlak); border: 1px solid var(--zandrand); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 16px 40px -16px rgba(16, 24, 40, .14); }
.kaart.inloggen h3 { display: block; margin: 0; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -.02em; color: var(--donker); }
.kaart.inloggen h3::after { display: none; }
.kaart.inloggen > p { margin: 0; font-size: 16px; line-height: 26px; color: #374151; }
.kaart.inloggen > p.inlogtekst { margin: 8px 0 24px; }
.knop-microsoft { display: flex; justify-content: center; align-items: center; width: 100%; box-sizing: border-box; height: 48px; padding: 0 16px;
  gap: 10px; border-radius: 9px; font-size: 16px; font-weight: 500; text-decoration: none; box-shadow: none; }
.knop-microsoft .mslogo { flex: none; padding: 2px; background: #fff; border-radius: 3px; width: 20px; height: 20px; }
.knop-microsoft:focus-visible { outline: 2px solid var(--groen-donker); outline-offset: 3px; border-radius: 9px; }
.kaart.inloggen > p.uitleg-klein { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--rand);
  font-size: 14px; line-height: 22px; color: #4b5563; text-wrap: pretty; }
.kaart.inloggen .fout { margin-top: 16px; }
@media (max-width: 980px) {
  .inlogscherm { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .inlogintro { padding: 32px 24px; }
  .inlogintro .inlogmidden { padding: 32px 0 8px; }
  .inlogintro .inlogtitel { font-size: 40px; }
  .inlogintro .inlogzin { font-size: 17px; line-height: 27px; }
  .inlogkant { padding: 32px 16px 48px; }
}
/* "niet ingelogd" is geen storing: grijs in plaats van rood */
.verbinding.fout.uit { color: var(--grijs); }
.verbinding.fout.uit::before { background: #b9bec6; box-shadow: 0 0 0 3px var(--rand-zacht); }
.verborgen { position: absolute; left: -9999px; }

/* Telefonie (ronde 2, 5-11-2026): één beginpunt. Kop met weekschakelaar en één knop "Dag sluiten …"; direct daaronder één
   melding (rood alleen waar iets mis is) of een rustige groene regel. Rijen die elke dag hetzelfde zeggen zijn één regel met
   "ma t/m vr"; de spoedlijn heeft een dunne tijdlijn waarop het gat rood is. Rijlabels donker en groter, tijden één maat,
   geen kolomtint meer (vandaag alleen in de kop). Labelkoppen met meer ruimte erboven dan eronder; uitleg achter "Hoe werkt dit?". */
.telefoniekaart .ovweek { font-size: 13px; }
.teldichtplek:empty { display: none; }
.teldichtplek .actie { height: 30px; }
/* Melding onder de kop */
.telmelding { margin: 0 0 20px; padding: 12px 16px; border: 1px solid #f0d3cf; border-radius: 10px; background: #fdf6f5; }
.telmelding ul { margin: 0; padding: 0; list-style: none; }
.telmelding li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; line-height: 22px; color: var(--tekst); }
.telmelding li + li { margin-top: 6px; }
.telmelding li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rood);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, .14); transform: translateY(-1px); }
.telmeldwat { font-weight: 500; }
.telmelddag { margin-left: auto; padding-left: 16px; font-size: 13px; color: var(--grijs); white-space: nowrap; }
.telefoniekaart .telgoed { margin: 0 0 20px; }
/* Weektabel (herkansing r3, 5-11-2026): elke rij één doorlopende tijdlijn over de week. Het gewone staat één keer bij de
   rijkop (naam halfvet, eronder tijd en wie in grijs); een dagcel heeft alleen tekst als die dag afwijkt. Geen lijnen tussen de
   dagen, zodat de balken één lijn met korte onderbrekingen vormen. Eén as voor alle dagen, genoemd in de hoek; een fijn
   streepje op 12 uur. Rij met een gat of fout: lichtrode tint, rode halfvette tekst. Vandaag: lichte kolomtint, groene kop. */
.telefoniekaart h3 { font-size: 24px; line-height: 32px; letter-spacing: -.022em; color: var(--donker); }
.tabel.telefonie { table-layout: fixed; }
.tabel.telefonie col.telkolnaam { width: 216px; }
.tabel.telefonie thead th { height: auto; padding: 14px 14px 12px; line-height: 20px; vertical-align: bottom; border-bottom: 1px solid var(--rand); background: none; }
.tabel.telefonie thead th:first-child { padding-left: 20px; }
.tabel.telefonie thead th.nu { background: #f4f8f6; box-shadow: inset 0 -2px 0 var(--groen); }
.telhoekas { font-size: 12px; font-weight: 400; color: var(--grijs); font-variant-numeric: tabular-nums; }
.teldagkop { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.tabel.telefonie thead .ovdag { font-size: 13px; font-weight: 500; color: var(--tekst-zacht); }
.tabel.telefonie thead .ovdatum { font-size: 13px; font-weight: 400; color: var(--grijs); }
.tabel.telefonie thead th.nu .ovdag { font-weight: 600; color: var(--groen-donker); }
.tabel.telefonie thead th.nu .ovdatum { color: var(--groen-donker); }
/* Rijen */
.tabel.telefonie tbody th[scope="row"] { height: 76px; padding: 17px 16px 16px 20px; vertical-align: top; line-height: 20px; font-weight: 400;
  background: none; border-right: 1px solid var(--rand-zacht); }
.tabel.telefonie td { height: 76px; padding: 25px 14px 14px; vertical-align: top; line-height: 20px; background: none; white-space: normal;
  font-size: 13px; color: var(--tekst); box-sizing: border-box; }
.tabel.telefonie td.nu { background: #f4f8f6; }
.tabel.telefonie tr.metfout th[scope="row"], .tabel.telefonie tr.metfout td { background: #fdf6f5; }
.tabel.telefonie tr.metfout td.nu { background: #fbefed; }
.tabel.telefonie tbody tr:last-child th, .tabel.telefonie tbody tr:last-child td { border-bottom: 1px solid var(--rand); }
.tabel.telefonie tbody tr:hover td, .tabel.telefonie tbody tr:hover th { background: none; }
.tabel.telefonie tbody tr:hover td.nu { background: #f4f8f6; }
.tabel.telefonie tbody tr.metfout:hover th, .tabel.telefonie tbody tr.metfout:hover td { background: #fdf6f5; }
.tabel.telefonie tbody tr.metfout:hover td.nu { background: #fbefed; }
.telrijnaam { display: block; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--tekst); }
.telrijsub { display: block; margin-top: 1px; font-size: 12.5px; line-height: 18px; color: var(--grijs); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.telrijsub.fout { color: var(--rood); font-weight: 600; }
.telmeest { color: var(--grijs); font-weight: 400; }
.telrijgat { display: block; font-size: 12.5px; line-height: 18px; font-weight: 600; color: var(--rood); font-variant-numeric: tabular-nums; }
.teltijd { color: var(--tekst); font-variant-numeric: tabular-nums; white-space: nowrap; }
.telwie { color: var(--grijs); }
/* Tijdlijn: lichtgrijs spoor met gekleurde stukken; elk stuk 1px van de rand van zijn tijd, dus altijd een kleine opening */
.tellijn { position: relative; display: block; height: 6px; border-radius: 3px; background: #eceef1; }
.tellijn > span { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.tellijn > span.ok { background: var(--groen); }
.tellijn > span.mis { background: var(--rood); }
.tellijn > i.tel12 { position: absolute; top: -3px; bottom: -3px; width: 1px; margin-left: -.5px; background: #c9ced5; }
td.afwijk .telnot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 8px; font-size: 12.5px; line-height: 18px; }
td.afwijk .teltijd { font-weight: 600; }
/* Afwijking: dicht, niemand, gesloten */
.telstand { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.telstand.dicht { color: var(--rood); }
.telgat { flex: none; font-size: 12.5px; font-weight: 600; color: var(--rood); font-variant-numeric: tabular-nums; white-space: nowrap; }
.telgoed { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--groen-donker); font-size: 14px; }
.telgoed::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--groen); box-shadow: 0 0 0 2px var(--groen-licht); }
/* Labelkop met dunne lijn: meer ruimte erboven dan eronder, zodat de blokken loskomen */
.kaart h4.labelkop { display: flex; align-items: center; gap: 10px; margin: 48px 0 14px; font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-zacht); }
.kaart h4.labelkop::after { content: ""; flex: 1; height: 1px; background: var(--rand-zacht); }
.extern { font-size: 12px; color: var(--grijs); }
/* Onder de tabel: één rustige grijze regel met links naar het beheer, daarnaast "Hoe werkt dit?" */
.telonder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 14px 20px; background: var(--zacht); }
.tellegenda { display: inline-flex; gap: 16px; margin-left: auto; font-size: 12.5px; color: var(--grijs); }
.tellegenda > span { display: inline-flex; align-items: center; gap: 6px; }
.tellegenda i { display: inline-block; width: 14px; height: 6px; border-radius: 3px; background: #eceef1; box-shadow: inset 0 0 0 1px #d5d9de; }
.tellegenda i.ok { background: var(--groen); box-shadow: none; }
.tellegenda i.mis { background: var(--rood); box-shadow: none; }
.telbeheer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; font-size: 13px; }
.telbeheerlabel { color: var(--grijs); }
.telbeheer a { display: inline-flex; align-items: baseline; gap: 3px; color: var(--tekst-zacht); text-decoration: none; border-radius: 4px; }
.telbeheer a:hover { color: var(--groen-donker); text-decoration: underline; text-decoration-color: rgba(40, 95, 76, .35); }
.telbeheer a .extern { font-size: 11px; }
.telhulp { margin: 0; }
.telhulp[open] { flex-basis: 100%; margin-left: 0; }
.telhulp summary { display: inline-flex; align-items: center; gap: 8px; padding: 2px 4px 2px 0; font-size: 13px; color: var(--grijs);
  cursor: pointer; list-style: none; border-radius: 4px; }
.telhulp summary::-webkit-details-marker { display: none; }
.telhulp summary::before { content: "i"; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border: 1px solid #c4c8cf; border-radius: 50%; font-size: 10.5px; font-weight: 600; font-style: normal; line-height: 1; color: var(--grijs); }
.telhulp summary:hover { color: var(--tekst); }
.telhulp[open] summary { color: var(--tekst); }
.telhulptekst { max-width: 68ch; margin-top: 6px; padding-left: 24px; font-size: 13px; line-height: 1.6; color: var(--grijs); }
.telhulptekst p { margin: 0 0 8px; }
/* Venster "Dag sluiten": dagkeuze als één rij */
.teldagkeuze label { white-space: nowrap; }

@media (max-width: 900px) {
  body { grid-template-columns: minmax(0, 1fr); }
  .zijbalk { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px;
    border-right: 0; border-bottom: 1px solid var(--zandrand); }
  .zijbalk .logo img { width: 112px; }
  .appnaam, .navgroep { display: none; }
  .zijbalk nav { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; margin: 0; order: 3; }
  .zijbalk nav button { width: auto; height: 32px; }
  .zijbalk nav button.onder { margin-top: 0; }
  .zijvoet { flex-direction: row; margin: 0 0 0 auto; padding: 0; border: 0; }
  main { padding: 24px 16px 48px; }
  .uitkomst .kaart { overflow-x: auto; }
}

/* Rooster en Instellingen (plan.js, 5-11-2026): de cockpit als centrale roosterplek. Per locatie een week: artsen, POH en
   verrichtingen, spoedlijn; per dag een teller artsen ochtend/middag (rood onder het minimum). Klik op de dag om aan te passen. */
.kaart.plan .sectiekop { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; }
.kaart.plan .sectiekop h2 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.02em; color: var(--donker); }
.kaart.plan .sectiekop .lijn { flex: 1; height: 1px; background: var(--rand); }
.kaart.plan .sectiekop .schakel { margin-left: 0; }
.planweek { margin: 0; font-size: 13.5px; color: var(--grijs); white-space: nowrap; }
.planweek strong { color: var(--tekst); font-weight: 600; }
.kaart.plan h3.sectielabel { margin: 28px 0 10px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grijs); }
.kaart.plan h3.sectielabel::after { content: ""; flex: 1; height: 1px; background: var(--rand); }
.plangoed { margin: 0 0 8px; color: var(--groen-donker); font-size: 13.5px; }
.plansignalen { margin: 0 0 8px; padding: 12px 16px; border: 1px solid #f3c7c2; border-radius: var(--straal); background: var(--rood-licht); font-size: 13.5px; }
.plansignalen p { margin: 0 0 6px; color: var(--rood); }
.plansignalen ul { margin: 0; padding: 0; list-style: none; color: var(--tekst-zacht); }
.plansignalen li { line-height: 22px; }
.sigdatum { display: inline-block; min-width: 76px; font-weight: 500; color: var(--tekst); }
.tabel.plantabel { table-layout: fixed; }
.tabel.plantabel th.rijkop { width: 176px; padding-left: 16px; font-size: 13px; font-weight: 500; color: var(--tekst-zacht); text-transform: none; letter-spacing: 0; vertical-align: top; padding-top: 12px; }
.tabel.plantabel thead th { height: auto; padding: 10px 12px; vertical-align: top; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--rand); }
.tabel.plantabel thead th.nu { background: #f4f8f6; box-shadow: inset 0 -2px 0 var(--groen); }
.tabel.plantabel td { height: auto; padding: 9px 12px; vertical-align: top; white-space: normal; line-height: 1; }
.tabel.plantabel td.dicht { background: repeating-linear-gradient(135deg, #f6f7f8 0 6px, #eef0f2 6px 12px); color: var(--grijs); font-size: 13px; line-height: 20px; }
.dagknop { display: inline-flex; gap: 6px; align-items: baseline; border: 0; background: none; padding: 2px 4px; margin: -2px -4px; border-radius: 5px; color: var(--tekst); }
.dagknop:hover { background: var(--hover); }
.dagknop .ovdag { font-size: 13px; font-weight: 600; text-transform: capitalize; }
.dagknop .ovdatum { font-size: 13px; color: var(--grijs); }
.teller { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--groen-donker); }
.teller.tekort { color: var(--rood); }
.teller.dicht { color: var(--grijs); }
.persoon { display: inline-flex; align-items: center; gap: 5px; margin: 0 6px 6px 0; padding: 3px 8px; border-radius: 5px; background: var(--groen-licht);
  color: var(--groen-donker); font-size: 13px; font-weight: 500; line-height: 18px; }
.persoon.extra { background: #fff; box-shadow: inset 0 0 0 1px var(--groen); }
.persoon.spoed { background: #e8eef7; color: #24426b; }
.pdeel { font-size: 11.5px; font-weight: 400; color: var(--tekst-zacht); }
.psoort { display: inline-block; margin: 0 8px 6px -2px; font-size: 11.5px; color: var(--grijs); }
.leeg { display: inline-block; padding: 3px 0; font-size: 13px; color: var(--grijs); }
.leeg.tekort { color: var(--rood); }
.planlocatie + .planlocatie { margin-top: 8px; }
button.link { border: 0; background: none; padding: 0; color: var(--groen-donker); text-decoration: underline; text-underline-offset: 2px; font-size: inherit; }
.gedempt { color: var(--grijs); font-size: 13px; font-weight: 400; }
fieldset.keuze { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
fieldset.keuze legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 13.5px; }
.tabel.smal td { height: 34px; }
.uitzlijst { margin: 0; padding-left: 18px; font-size: 13.5px; }
input.kort { width: 72px; }
.instblok { padding: 4px 0 8px; }
.instblok h4 { margin: 12px 0 6px; }
.geschiedenis { margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.geschiedenis li { padding: 6px 0; border-bottom: 1px solid var(--rand-zacht); }
#vensterinhoud input:not([type]) { height: 30px; padding: 0 8px; border: 1px solid var(--veldrand); border-radius: 6px; font-size: 13px; }
input:not([type]) { height: 30px; padding: 0 8px; border: 1px solid var(--veldrand); border-radius: 6px; background: var(--vlak); font-size: 13px; }
.kaart.plan .paneel .tabel th:first-child, .kaart.plan .paneel .tabel td:first-child { padding-left: 16px; }

/* Smal scherm: de roostertabel houdt haar maat en schuift opzij in plaats van in elkaar te drukken */
@media (max-width: 900px) {
  .kaart.plan .paneel { overflow-x: auto; }
  .tabel.plantabel { min-width: 760px; }
  .kaart.plan .sectiekop { flex-wrap: wrap; }
}

/* Vormgeving ronde 1 tegen de lichte lat (5-11-2026, ontwerpregels in Rapporten\Cockpit-vormgeving\ontwerpregels.md):
   paginakop overal 24px zonder sierlijn; roostercellen één vaste vorm per persoon; signalen als witte kaart met rode
   streep, één regel per signaal; locatie als kop van 18px; niets kleiner dan 12px; instellingen in een vaste labelkolom. */
.rskopbalk h3 { flex: 1; font-size: 24px; line-height: 32px; letter-spacing: -.02em; }
.rskopbalk h3::after { display: none; }
.kaart.plan .sectiekop h2 { margin-right: auto; }
.kaart.plan .sectiekop { margin-bottom: 24px; }

.plansignalen { margin: 0 0 8px; padding: 14px 20px; border: 1px solid var(--rand); border-left: 3px solid var(--rood);
  border-radius: 10px; background: var(--vlak); font-size: 13.5px; }
.plansignalen p.sigkop { margin: 0 0 8px; color: var(--tekst); }
.plansignalen p.sigkop strong { color: var(--rood); }
.plansignalen ul { display: grid; gap: 4px; }
.plansignalen li { display: grid; grid-template-columns: 88px minmax(0, 1fr); line-height: 22px; color: var(--tekst-zacht); }
.plansignalen li.sigrest { display: block; color: var(--grijs); }
.sigdatum { min-width: 0; color: var(--tekst); }

.kaart.plan h3.lockop { display: block; margin: 32px 0 12px; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; color: var(--tekst); }
.kaart.plan h3.lockop::after { display: none; }
.teller { font-size: 12.5px; }
.tabel.plantabel thead th .ovdag, .tabel.plantabel thead th .ovdatum { font-size: 13.5px; }
.tabel.plantabel td { padding: 10px 12px; }

.tabel.plantabel td .persoon { display: flex; width: 100%; margin: 0 0 6px; }
.tabel.plantabel td .leeg { display: block; margin: 0; }
.tabel.plantabel td .persoon:last-child { margin-bottom: 0; }
.persoon { flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 9px; border-radius: 6px; font-size: 13.5px; line-height: 18px;
  white-space: nowrap; overflow: hidden; }
.pnaam { font-weight: 500; color: var(--tekst); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pmeta { font-size: 12px; line-height: 16px; color: var(--tekst-zacht); }
.persoon.spoed { background: var(--lichtblauw); }
.persoon.spoed .pnaam { color: var(--tekst); }

.ovlabel { font-size: 12px; }
.telhoekas { font-size: 12px; }

.instlocaties { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
.instblok { padding: 20px 24px; border: 1px solid var(--rand); border-radius: 10px; }
.instblok h4 { margin: 0 0 16px; font-size: 16px; line-height: 24px; }
.instnr { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--grijs); }
.instrij { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 36px; font-size: 13.5px; }
.instrij + .instrij { margin-top: 8px; }
.instrij > label, .instrij > span { color: var(--grijs); }
.instnu { color: var(--tekst); }
.mwtabel th:last-child, .mwtabel td:last-child { width: 1%; white-space: nowrap; text-align: right; }
/* Weekschema's: "vandaag" niet meer over het weeknummer heen, maar achter de datum */
.roostertabel thead th.nu .ovdatum { display: inline; }
.rsnu { position: static; display: inline-block; margin-left: 6px; vertical-align: 1px; font-size: 12px; }
.roostertabel thead th.nu .ovdag { margin-bottom: 1px; }
/* Paginakop van Controle boven de eerste sectie */
.uitkomst > .rskopbalk + .kaart.overzicht { margin-top: 0; }
/* Uitgeschakelde hoofdknop: grijs op lichtgrijs (leesbaar), niet bleekgroen */
.knop-hoofd:disabled { opacity: 1; background: var(--rand-zacht); color: var(--grijs); border-color: var(--rand); box-shadow: none; }