/* Gezinshuis Suite - de gedeelde schil van de vijf systemen.
   Kleuren en lettertypes komen ongewijzigd uit stijl.css, zodat de suite niet
   stiekem een tweede huisstijl introduceert. Nieuw is alleen layout: de
   systeemwisselaar, het gegroepeerde zijmenu en de kaartenrasters.

   Begonnen als ontwerpplaat (app/ontwerp/suite, met voorbeeldgetallen; op
   2026-09-22 verwijderd, staat in git tot commit 2b798d3). DIT bestand hoort
   bij de draaiende app en toont wat er echt in de database staat. */

@import url("../merk/lettertypes.css");
/* MERK-01: de merkkleuren, -letters en -vormen van De Gezinshuis Architect. Byte-gelijke kopie van
   ~/Desktop/Gezinshuis Architect/merkstijl/tokens.css (test_merkstijl.py bewaakt dat); niet hier bewerken maar
   daar, en dan opnieuw kopieren. Thema: thema.js zet bij nacht ook data-ga-theme="dark". */
@import url("../merk/merkstijl-tokens.css");

:root {
  --creme:      var(--ga-bg);
  --vlak:       var(--ga-bg-raised);
  --vlak-warm:  #F2ECE1;
  --inkt:       var(--ga-text);
  --groen:      var(--ga-text);
  --terra:      var(--ga-accent);
  /* O-043 stap 4: terra als TEKST haalde 3,3:1 op creme. Vlakken en randen houden --terra, tekst krijgt dezelfde tint
     donkerder (4,6:1 of meer op alle lichte achtergronden). */
  --terra-tekst: var(--ga-accent-text);
  /* O-043 stap 4: een VOL vlak met witte tekst erop (badge, telling). Blijft in de nacht donker: wit op het lichte
     nachtterra haalde 2,3:1. Voor groen bestaat --groen-knop al. */
  --terra-vol:  var(--ga-terracotta-ink);
  --blauw:      var(--ga-info);
  --band:       var(--ga-dark);   /* A-MENU-02: de donkere band (audit) */
  --band-tekst: var(--ga-cream);
  --groen-vlak: #EEE7DA;
  --zand:       var(--ga-paper-2);
  --inkt-zacht: var(--ga-text-muted);
  --groen-diep: var(--ga-text);
  --lijn:       #E0D6C5;
  --lijn-zacht: #ECE5D8;
  --terra-vlak: #F6E9DF;
  --rood:       var(--ga-urgent);
  --rood-vlak:  #F5E5E1;
  /* niet van de site: tonen per stand, de nachtversie onderaan dit blad zet ze om */
  --warm-tekst: var(--ga-accent-hover);
  --warm-blok:  #F2DCCB;
  --rij-hover:  #F4EFE6;
  --zij-hover:  rgba(56,43,34,.05);
  --zij-a:      #F3EEE4;
  --zij-b:      #F0EADF;
  --zij-kop:    #6A5D50;   /* O-043 stap 4 (WCAG 2.2 AA 1.4.3): was #948A74, 3,2:1 op zij-a; nu 4,6:1 of meer */
  --kolomkop:   #6A5D50;   /* was #8A806B, 3,7:1 op kop-vlak; nu 4,6:1 of meer */
  --kop-vlak:   #F4EFE6;
  --glas:       rgba(247,243,234,.86);
  --kaart-a:    var(--ga-bg-raised);
  --kaart-b:    var(--ga-bg-raised);
  --schuif:     var(--ga-sand);
  --schuif-hover: var(--ga-taupe);
  --rand-hover: #BFAE9A;
  --knop-rand-hover: var(--ga-white);
  --leeg-pict:  #B9AA98;
  --onbekend:   #C9BDAE;
  --sluier:     rgba(36,28,22,.36);
  --kan-rand:   #BCCBB3;
  --liever-rand: #E6C9B3;
  --kanniet-rand: #E3C2BD;
  --telling-vlak: rgba(255,252,246,.75);
  --groen-knop: var(--ga-ink);
  --groen-knop-diep: var(--ga-terracotta-dark);
  --groen-knop-licht: var(--ga-ink);
  --groen-knop-hover: var(--ga-terracotta-dark);
  /* MERK-01: --groen is de merkkleur (actief, focus, knop); in orde/gelukt krijgt het statusgroen van de merkstijl */
  --ok:          var(--ga-ok);
  --ok-vlak:     #E9EEE3;
  --kop: var(--ga-font-serif);
  --tekst: var(--ga-font-sans);
  --schaduw: var(--ga-shadow-sm);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--creme); color: var(--inkt);
  font-family: var(--tekst); font-size: 14.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* pictogrammen krijgen een standaardmaat; wie hem groter wil, zet dat verderop zelf */
.pict { width: 17px; height: 17px; }
.nw { white-space: nowrap; }
button { font: inherit; color: inherit; cursor: pointer; }

/* De strook '.melding' die hier stond ('dit is een ontwerp') is weg: de suite
   gebruikt hem nergens meer, en omdat hij ongescoped was kleurde hij elke
   .melding in de kwaliteitsschermen olijfbruin mee. Gemeten 2026-09-06. */

/* ── bovenbalk ─────────────────────────────────────────────────────────────── */
.balk {
  display: flex; align-items: center; gap: 14px;
  background: var(--vlak); border-bottom: 1px solid var(--lijn);
  padding: 12px 22px; position: sticky; top: 0; z-index: 40;
}
/* object-fit: een eigen logo (A-LOGO-01) hoeft niet vierkant te zijn */
.balk .merk { width: 46px; height: 46px; flex: none; object-fit: contain; }

.wisselaar { position: relative; }
.wisselknop {
  display: flex; align-items: center; gap: 10px;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond-klein);
  padding: 9px 13px; font-size: 15px; font-weight: 600; box-shadow: var(--schaduw);
}
.wisselknop:hover { border-color: var(--rand-hover); }
.wisselknop[aria-expanded="true"] { border-color: var(--groen); }
.roosterpict {
  width: 16px; height: 16px; flex: none;
  background-image: radial-gradient(currentColor 1.4px, transparent 1.5px);
  background-size: 6px 6px; background-position: 1px 1px; color: var(--inkt-zacht);
}
.pijl { width: 15px; height: 15px; color: var(--inkt-zacht); }

.wisselmenu {
  position: absolute; top: calc(100% + 9px); left: 0; width: min(660px, calc(100vw - 44px)); z-index: 50;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px;
  box-shadow: 0 12px 34px rgba(29,25,16,.13); padding: 8px;
  /* Sinds de rolbolletjes (0.115.0) werd één kolom 1083px hoog op een scherm van
     768: twee kolommen, en nooit hoger dan het scherm (suite.js zet max-height bij
     openen) - de rest scrolt binnen het menu. */
  overflow-y: auto;
}
#wissellijst { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
.wisselkop { margin: 6px 10px 8px; font-size: 12px; color: var(--inkt-zacht); }
.wisselitem {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: var(--rond-klein); padding: 8px 10px;
}
.wisselitem:hover { background: var(--vlak-warm); }
.wisselitem.actief { background: var(--groen-vlak); }
.wisselitem .pict { width: 20px; height: 20px; color: var(--groen); flex: none; }
.wisselitem b { display: block; font-size: 14.5px; font-weight: 600; }
.wisselitem span { display: block; font-size: 12.5px; color: var(--inkt-zacht); }
.wisselitem .wisselrollen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.wisselrollen i { font-style: normal; font-size: 11px; line-height: 1; padding: 3px 7px;
  border-radius: 999px; background: var(--vlak-warm); border: 1px solid var(--lijn-rand); color: var(--inkt-zacht); }
.wisselrollen i.lezen { border-style: dashed; background: transparent; }
.wisselrollen i.eigen { background: var(--groen-vlak); border-color: var(--groen); color: var(--groen); font-weight: 600; }
.wisselitem .vink { margin-left: auto; width: 17px; height: 17px; color: var(--groen); }
.wisselvoet {
  display: flex; align-items: center; justify-content: space-between;
  margin: 6px 0 2px; padding: 10px; border-top: 1px solid var(--lijn-zacht);
  color: var(--groen); font-weight: 600; font-size: 13.5px; text-decoration: none;
}
.wisselvoet svg { width: 16px; height: 16px; }

/* De versieregel in de balk. Klein, maar hij is het bewijsmiddel van de nameter:
   zonder zichtbaar versienummer kan hij niet aantonen dat hij de nieuwe versie
   voor zich had en niet een oude uit de cache. */
.standregel { margin: 0 0 0 4px; font-size: 12.5px; color: var(--inkt-zacht);
  white-space: nowrap; }
.standregel b { color: var(--inkt); font-weight: 600; }

.zoek {
  margin-left: auto; display: flex; align-items: center; gap: 9px;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond-klein);
  padding: 0 11px; height: 40px; width: 300px; color: var(--inkt-zacht);
}
.zoek svg { width: 16px; height: 16px; flex: none; }
.zoek input { border: 0; outline: 0; background: none; font: inherit; color: var(--inkt); width: 100%; }
.zoek .toets { font-size: 11.5px; border: 1px solid var(--lijn); border-radius: var(--rond-knop); padding: 1px 5px; }
.bel { position: relative; background: none; border: 0; padding: 6px; color: var(--inkt-zacht); }
.bel svg { width: 20px; height: 20px; }
.bel i { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--terra); }
.gebruiker {
  display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond-klein); padding: 9px 13px;
  max-width: 260px;
}
/* min-width:0 is hier geen franje: zonder die regel weigert een flex-onderdeel te
   krimpen onder zijn eigen inhoud, en dan loopt een lange organisatienaam gewoon
   buiten zijn knop door - gemeten op 375 pixels breed. */
#orgtekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gebruiker .pijl { flex: none; }

/* ── zijmenu ───────────────────────────────────────────────────────────────── */
.romp { display: flex; align-items: stretch; min-height: calc(100vh - 96px); }
.zij {
  width: 262px; flex: none; background: var(--vlak-warm);
  border-right: 1px solid var(--lijn); padding: 18px 12px 26px;
}
.zij-groep + .zij-groep { margin-top: 22px; }
.zij-kop {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--inkt-zacht);
}
.zij-kop svg { width: 14px; height: 14px; }
.zij-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: var(--rond-klein); padding: 8px 10px;
  font-size: 14px; color: var(--inkt);
}
.zij-item:hover { background: var(--zij-hover); }
.zij-item.actief { background: var(--vlak); box-shadow: var(--schaduw); font-weight: 600; }
.zij-item .pict { width: 17px; height: 17px; flex: none; color: var(--inkt-zacht); }
.zij-item.actief .pict { color: var(--groen); }
.zij-item .naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zij-item .telling {
  margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--inkt-zacht);
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond-klein); padding: 0 7px;
}
.zij-voet {
  margin: 26px 10px 0; padding-top: 16px; border-top: 1px solid var(--lijn);
  display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--inkt-zacht);
}
.zij-voet svg { width: 17px; height: 17px; color: var(--groen); }
.zij-voet b { display: block; color: var(--inkt); font-size: 13px; font-weight: 600; }

/* ── werkvlak ──────────────────────────────────────────────────────────────── */
.werk { flex: 1; min-width: 0; padding: 26px 30px 44px; }
.paginakop { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 20px; }
.paginakop h1 {
  margin: 0; font-family: var(--kop); font-weight: 400; font-size: 32px;
  letter-spacing: -.01em; line-height: 1.1;
}
.paginakop p { margin: 6px 0 0; color: var(--inkt-zacht); font-size: 14px; }
.kopknoppen { margin-left: auto; display: flex; align-items: center; gap: 16px; flex: none; }
.knop-vol {
  display: flex; align-items: center; gap: 8px; background: var(--groen-knop); color: #fff;
  border: 0; border-radius: var(--rond-knop); padding: 11px 17px; font-weight: 600; font-size: 14px;
}
.knop-vol:hover { background: var(--groen-knop-diep); }
.knop-vol svg { width: 16px; height: 16px; }
.knop-kaal {
  display: flex; align-items: center; gap: 7px; background: none; border: 0;
  color: var(--groen); font-weight: 600; font-size: 14px;
}
.knop-kaal svg { width: 15px; height: 15px; }
/* WCAG 2.5.8 doelgrootte (O-043 stap 4): alles wat je aanklikt is minstens 24 px hoog - een plek in het ontwerpsysteem in
   plaats van per scherm. Gemeten (171 schermen, uitzonderingen afgetrokken): rijknoppen .knop-kaal 22 px, uitklapregels
   21 px, velden 22 px, labels met een vinkje 23 px, de pijl van het planbordmenu 21x16. Een vinkje in een label telt via
   zijn label (dat is ook klikbaar). */
.knop-kaal, summary, select, label:has(input[type=checkbox]), label:has(input[type=radio]),
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]) { min-height: 24px; }
.sb-blauw.pijl { min-width: 24px; min-height: 24px; }
label.vinkregel { display: flex; align-items: center; gap: 6px; }   /* een vinkje per regel; inline kreeg het geen hoogte */

.kaart {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond-klein);
  box-shadow: var(--schaduw); padding: 18px 20px; margin-bottom: 16px;
}
.kaart-kop { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.kaart-kop h2 { margin: 0; font-family: var(--kop); font-weight: 400; font-size: 20px; }
.kaart-kop .rechts { margin-left: auto; }
.link {
  display: inline-flex; align-items: center; gap: 6px; color: var(--groen);
  font-weight: 600; font-size: 13px; text-decoration: none;
}
.link svg { width: 14px; height: 14px; }
.raster2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.raster2.breed-links { grid-template-columns: 1.05fr .95fr; }
/* Zonder deze regel is dit raster geen raster. Een grid-vak heeft standaard
   min-width:auto, en dat is de MIN-CONTENT breedte van wat erin staat: een
   tabel met een lange regel tekst duwt zijn kolom net zo breed als hij zelf wil
   zijn. Gemeten op 2026-09-06 op het dashboard van Kwaliteit: 2024px links in
   een vak van 1078px, waardoor de rechterkolom van het scherm af viel en het
   hele scherm een kolom leek. */
.raster2 > * { min-width: 0; }
@media (max-width: 1200px) { .raster2, .raster2.breed-links { grid-template-columns: 1fr; } }

/* ── tellerrij ─────────────────────────────────────────────────────────────── */
.tellers { display: flex; }
.tellers > div { flex: 1; text-align: center; padding: 4px 8px; }
.tellers > div + div { border-left: 1px solid var(--lijn-zacht); }
.tellers .cijfer { font-family: var(--kop); font-size: 30px; line-height: 1.1; }
.tellers .label { font-size: 12.5px; color: var(--inkt-zacht); margin-top: 2px; }
.groen  { color: var(--ok); } .terra { color: var(--terra-tekst); }
.rood   { color: var(--rood); }  .blauw { color: var(--blauw); }
.zachtinkt { color: var(--inkt-zacht); }

/* ── tabellen ──────────────────────────────────────────────────────────────── */
table.lijst { width: 100%; border-collapse: collapse; }
table.lijst th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--inkt-zacht); padding: 0 8px 8px; font-weight: 700;
}
table.lijst td { padding: 11px 8px; border-top: 1px solid var(--lijn-zacht); vertical-align: middle; }
table.lijst tr:hover td { background: var(--rij-hover); }
table.lijst td.dun { color: var(--inkt-zacht); font-size: 13px; white-space: nowrap; }
table.lijst td.getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sub { display: block; font-size: 12.5px; color: var(--inkt-zacht); }
.chevron { width: 15px; height: 15px; color: var(--inkt-zacht); }

.stip { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.stip.rood { background: var(--rood); } .stip.terra { background: var(--terra); }
.stip.groen { background: var(--ok); } .stip.blauw { background: var(--blauw); }
.stip.leeg { background: var(--vlak); border: 1.6px solid var(--lijn); }

.merkje {
  display: inline-flex; align-items: center; justify-content: center; min-width: 27px; height: 27px;
  padding: 0 7px; box-sizing: border-box; white-space: nowrap;
  border-radius: 14px; background: var(--groen-vlak); color: var(--groen-diep);
  font-size: 11px; font-weight: 700; flex: none;
}
.merkje.warm { background: var(--terra-vlak); color: var(--warm-tekst); }
.merkje.zacht { background: var(--vlak-warm); color: var(--inkt-zacht); }
.wie { display: flex; align-items: center; gap: 8px; }

.pil {
  display: inline-block; border-radius: var(--rond-klein); padding: 2px 11px;
  font-size: 12px; font-weight: 600; background: var(--vlak-warm); color: var(--inkt-zacht);
  white-space: nowrap;
}
.pil.hoog { background: var(--rood-vlak); color: var(--rood); }
.pil.midden { background: var(--terra-vlak); color: var(--warm-tekst); }
.pil.laag { background: var(--ok-vlak); color: var(--ok); }

/* ── audittijdbalk ─────────────────────────────────────────────────────────── */
.audit { display: flex; align-items: center; gap: 20px; }
.auditvak { display: flex; align-items: center; gap: 15px; flex: none; }
.auditvak .ring {
  width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; border: 1.7px solid currentColor;
}
.auditvak .ring svg { width: 23px; height: 23px; }
/* De drie regels van een auditvak onder elkaar. Zonder display:block lopen
   "Interne audit", "over 12 dagen" en de datum als een zin door. */
.auditvak > span > span { display: block; }
.auditvak .titel { font-size: 13.5px; font-weight: 600; }
.auditvak .groot { font-family: var(--kop); font-size: 24px; line-height: 1.15; }
.auditvak .datum { font-size: 12.5px; color: var(--inkt-zacht); }
.auditlijn { flex: 1; position: relative; height: 44px; }
.auditlijn i {
  position: absolute; top: 15px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--terra), var(--groen));
}
.auditlijn b {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 15px; height: 15px; border-radius: 50%; background: var(--vlak);
  border: 2.6px solid var(--terra);
}
.auditlijn span {
  position: absolute; top: 28px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: var(--inkt-zacht); white-space: nowrap;
}

/* ── dagtijdbalk (dossier) ─────────────────────────────────────────────────── */
.dagbalk { position: relative; height: 56px; margin: 6px 10px 0; }
.dagbalk .spoor { position: absolute; top: 11px; left: 0; right: 0; height: 2px; background: var(--lijn); }
.dagbalk .gedaan { position: absolute; top: 11px; left: 0; height: 2px; background: var(--terra); }
.dagbalk .punt { position: absolute; top: 0; transform: translateX(-50%); text-align: center; }
.dagbalk .punt em {
  display: block; margin: 5px auto 0; width: 13px; height: 13px; border-radius: 50%;
  background: var(--vlak); border: 2px solid var(--lijn);
}
.dagbalk .punt.nu em { border-color: var(--terra); border-width: 3.4px; }
.dagbalk .punt .tijd { font-size: 12px; font-variant-numeric: tabular-nums; }
.dagbalk .punt.nu .tijd { color: var(--terra-tekst); font-weight: 700; }
.dagbalk .punt .wat { font-size: 12px; color: var(--inkt-zacht); white-space: nowrap; }
.dagbalk .punt em + .wat { margin-top: 4px; }

/* ── werkstroom (backoffice) ───────────────────────────────────────────────── */
.stroom { display: flex; align-items: center; }
.stroom .stap { display: flex; align-items: center; gap: 14px; flex: none; }
.stroom .bol {
  width: 52px; height: 52px; border-radius: 50%; border: 1.7px solid var(--lijn);
  display: flex; align-items: center; justify-content: center; color: var(--inkt-zacht);
}
.stroom .bol svg { width: 22px; height: 22px; }
.stroom .stap.let .bol { border-color: var(--terra); color: var(--terra-tekst); }
.stroom .stap.af .bol { border-color: var(--ok); color: var(--ok); }
.stroom .stap > span > span { display: block; }
.stroom .label { font-size: 13px; color: var(--inkt-zacht); }
.stroom .aantal { font-family: var(--kop); font-size: 26px; line-height: 1.1; }
.stroom .pijlje { flex: 1; height: 1px; background: var(--lijn); margin: 0 16px; position: relative; }
.stroom .pijlje::after {
  content: ""; position: absolute; right: -1px; top: -3.5px; border: 4px solid transparent;
  border-left-color: var(--lijn);
}

/* ── roosterbalken (personeel) ─────────────────────────────────────────────── */
.rooster { position: relative; }
/* 168 = de naamkolom (156) plus de tussenruimte (12). Alle drie de getallen
   staan hier bij elkaar: wijkt er een af, dan wijzen de uurmerken en de nu-lijn
   naar een ander tijdstip dan de balken eronder, en dat is niet te zien. */
.roosteruren { display: flex; margin-left: 168px; font-size: 11.5px; color: var(--inkt-zacht); }
.roosteruren span { flex: 1; }
.roosterrij { display: flex; align-items: center; gap: 12px; margin-top: 7px; }
.roosterrij .wie { width: 156px; flex: none; gap: 8px; overflow: hidden; }
.roosterrij .wie > span { min-width: 0; }
.roosterrij .wie b {
  font-size: 13.5px; font-weight: 600; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.roosterrij .wie span span {
  font-size: 11.5px; color: var(--inkt-zacht); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.roosterspoor { position: relative; flex: 1; height: 26px; }
.roosterspoor .blok {
  position: absolute; top: 0; height: 26px; border-radius: 13px; font-size: 11.5px;
  display: flex; align-items: center; justify-content: center; color: var(--groen-diep);
  background: var(--groen-vlak); white-space: nowrap; overflow: hidden;
}
.roosterspoor .blok.warm { background: var(--warm-blok); color: var(--warm-tekst); }
.nuvlak { position: absolute; top: 0; bottom: 0; left: 168px; right: 0; pointer-events: none; }
.nulijn { position: absolute; top: -18px; bottom: -6px; width: 1.6px; background: var(--terra); }
.nulijn span {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: 11.5px; font-weight: 700; color: var(--terra-tekst); white-space: nowrap;
}

/* ── weekrooster ───────────────────────────────────────────────────────────── */
table.week { width: 100%; border-collapse: collapse; font-size: 12px; }
table.week td.dienst, table.week th:first-child { width: 150px; }
table.week th { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--inkt-zacht); padding-bottom: 6px; font-weight: 700; }
table.week td { border-top: 1px solid var(--lijn-zacht); padding: 9px 4px; text-align: center; }
table.week td.dienst { text-align: left; display: flex; align-items: center; gap: 8px; }
table.week td.dienst svg { width: 15px; height: 15px; color: var(--inkt-zacht); }
table.week td.dienst span { font-size: 11.5px; color: var(--inkt-zacht); display: block; }
.mini {
  display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px;
  border-radius: 50%; background: var(--groen-vlak); color: var(--groen-diep);
  font-size: 10.5px; font-weight: 700; margin: 1px;
}
.mini.warm { background: var(--terra-vlak); color: var(--warm-tekst); }
.mini.open { background: none; border: 1.4px dashed var(--terra); color: var(--terra-tekst); }
/* Ingepland maar afwezig: naam blijft staan, met een streep erdoor. Weghalen zou
   wissen dat er iets op te lossen valt. */
.mini.weg, .merkje.weg {
  background: var(--vlak-warm); color: var(--inkt-zacht);
  text-decoration: line-through; opacity: .75;
}

/* ── voortgang ─────────────────────────────────────────────────────────────── */
.voortgang { display: flex; align-items: center; gap: 26px; }
.ring-uit { flex: none; position: relative; width: 118px; height: 118px; }
.ring-uit svg { width: 118px; height: 118px; transform: rotate(-90deg); }
.ring-uit .waarde {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.ring-uit .waarde b { font-family: var(--kop); font-size: 27px; font-weight: 400; line-height: 1; }
.ring-uit .waarde span { font-size: 11.5px; color: var(--inkt-zacht); }
.fasen { flex: 1; }
.fase { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 13.5px; }
.fase .naam { width: 82px; flex: none; }
.fase .baan { flex: 1; height: 7px; border-radius: 4px; background: var(--vlak-warm); overflow: hidden; }
.fase .baan i { display: block; height: 100%; background: var(--groen); border-radius: 4px; }
.fase .pct { width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.fase .aantal { width: 56px; text-align: right; color: var(--inkt-zacht); font-size: 12.5px; }

/* ── vergelijkingsbalken (financieel) ──────────────────────────────────────── */
table.verg { width: 100%; border-collapse: collapse; font-size: 13px; }
table.verg th { text-align: left; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--inkt-zacht); padding-bottom: 8px; font-weight: 700; }
table.verg td { padding: 8px 6px; border-top: 1px solid var(--lijn-zacht); }
table.verg td.getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.baan-in { display: block; height: 9px; border-radius: 5px; background: var(--vlak-warm); min-width: 90px; }
.baan-in i { display: block; height: 100%; border-radius: var(--rond-knop); background: var(--groen); }
.baan-in.warm i { background: var(--terra); }
.baan-in.grijs i { background: var(--zand); }

.overzichtrooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.systeemkaart {
  display: block; text-align: left; width: 100%; background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: var(--rond-klein); box-shadow: var(--schaduw); padding: 20px;
}
.systeemkaart:hover { border-color: var(--groen); }
.systeemkaart .pict { width: 26px; height: 26px; color: var(--groen); }
.systeemkaart h3 { margin: 12px 0 3px; font-family: var(--kop); font-weight: 400; font-size: 19px; }
.systeemkaart p { margin: 0 0 14px; color: var(--inkt-zacht); font-size: 13.5px; }
.systeemkaart .kerngetal { display: flex; gap: 20px; border-top: 1px solid var(--lijn-zacht); padding-top: 12px; }
.systeemkaart .kerngetal b { font-family: var(--kop); font-size: 20px; font-weight: 400; display: block; }
.systeemkaart .kerngetal span { font-size: 11.5px; color: var(--inkt-zacht); }

/* De systeemkaart draagt sinds 0.57.0 een rijtje bladen onder zich. Het vak
   eromheen bestaat om die twee bij elkaar te houden in het raster; de kaart zelf
   blijft de klikbare kop. */
.systeemvak {
  display: flex; flex-direction: column; background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: var(--rond-klein); box-shadow: var(--schaduw);
}
.systeemvak .systeemkaart { border: 0; border-radius: var(--rond-klein) var(--rond-klein) 0 0; box-shadow: none; }
.systeemvak:hover { border-color: var(--groen); }
.systeembladen {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  border-top: 1px solid var(--lijn-zacht); padding: 11px 20px 14px;
}
.systeembladen .knop-kaal { font-size: 13px; }

/* ── venster ───────────────────────────────────────────────────────────────── */
/* [hidden] wint het van display:flex niet vanzelf - zonder deze regel staat de
   laag altijd over de pagina heen. */
.vensterlaag[hidden] { display: none; }
.vensterlaag {
  position: fixed; inset: 0; z-index: 60; background: var(--sluier);
  display: flex; align-items: flex-start; justify-content: center; padding: 8vh 20px;
  overflow: auto;
}
.venster {
  background: var(--vlak); border-radius: var(--rond-klein); box-shadow: 0 20px 60px rgba(29,25,16,.25);
  width: 100%; max-width: 520px; padding: 24px 26px;
}
.venster h2 { margin: 0 0 4px; font-family: var(--kop); font-weight: 400; font-size: 22px; }
.venster .uitleg { margin: 0 0 18px; color: var(--inkt-zacht); font-size: 13.5px; }
.venster label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--inkt-zacht); }
.venster label span { display: block; margin-bottom: 4px; }
/* A-TERUGMELD-01: vinkje en zin op één regel, zoals elders een keuzevak naast zijn tekst. */
.venster label.terugvink { display: flex; gap: 8px; align-items: flex-start; }
.venster label.terugvink input { margin-top: 2px; flex: none; }
/* textarea erbij voor de toelichting bij een nalevingsoordeel: zonder deze
   regel valt dat veld buiten de vormgeving en staat het in systeemletters. */
.venster input, .venster select, .venster textarea {
  width: 100%; font: inherit; font-size: 14.5px; color: var(--inkt);
  border: 1px solid var(--lijn); border-radius: var(--rond-klein); padding: 9px 11px; background: var(--vlak);
}
.venster input:focus, .venster select:focus, .venster textarea:focus { outline: 2px solid var(--groen-vlak); border-color: var(--groen); }
.venster .rij2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vensterknoppen { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
/* Knoppen blijven onderin in beeld, ook als het venster hoger is dan het scherm (zoals in Shiftbase). */
.venster .vensterknoppen { position: sticky; bottom: 0; z-index: 1; background: var(--vlak);
  margin: 20px -26px -24px; padding: 12px 26px 24px; border-top: 1px solid var(--lijn); border-radius: 0 0 var(--rond-klein) var(--rond-klein); }
.knop-rand {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond-knop);
  padding: 10px 16px; font-weight: 600; font-size: 14px;
}
/* Niet alleen in het venster: het blad Koppelingen zet foutmeldingen in een kaart. */
.fout, .venster .fout { color: var(--rood); font-size: 13px; margin: 0 0 12px; }

/* ── lege stand ────────────────────────────────────────────────────────────── */
.leegvak { text-align: center; padding: 30px 20px 34px; }
.leegvak .pict { width: 30px; height: 30px; color: var(--inkt-zacht); }
.leegvak h1, .leegvak h2, .leegvak h3 { margin: 12px 0 4px; font-family: var(--kop); font-weight: 400; font-size: 20px; }
.leegvak p { margin: 0 auto 18px; max-width: 460px; color: var(--inkt-zacht); font-size: 13.5px; }
.telrij { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.stil { color: var(--inkt-zacht); font-size: 13px; }

/* ── leestekst: een beleidsstuk om te LEZEN ──────────────────────────────────
   Andere maatvoering dan de rest van de suite. Elders wordt gescand - een tabel,
   een teller, een pil - en hier wordt tien bladzijden aan een stuk gelezen. Dat
   vraagt een smallere regel (rond de 70 tekens) en meer lucht tussen de regels;
   in de volle schermbreedte raak je halverwege een alinea de regel kwijt. */
.leestekst { max-width: 68ch; font-size: 14.5px; line-height: 1.72; color: var(--inkt); }
.leestekst h2, .leestekst h3, .leestekst h4, .leestekst h5 {
  font-family: var(--kop); font-weight: 400; color: var(--inkt);
  margin: 26px 0 8px; line-height: 1.3;
}
.leestekst h2 { font-size: 21px; }
.leestekst h3 { font-size: 17.5px; }
.leestekst h4, .leestekst h5 { font-size: 15px; letter-spacing: .01em; }
.leestekst p { margin: 0 0 13px; }
.leestekst ul { margin: 0 0 13px; padding-left: 20px; }
.leestekst li { margin: 0 0 5px; }
.leestekst hr { border: 0; border-top: 1px solid var(--lijn); margin: 22px 0; }
.leestekst code { font-size: 12.5px; background: var(--vlak-warm); padding: 1px 5px; border-radius: 4px; }
.leestekst blockquote {
  margin: 0 0 15px; padding: 10px 14px; border-left: 3px solid var(--terra);
  background: var(--vlak-warm); color: var(--inkt-zacht); font-size: 13.5px;
}
.leestekst blockquote p:last-child { margin: 0; }
.leestekst table { margin: 0 0 16px; font-size: 13px; }

/* ── wettekst in het venster ──────────────────────────────────────────────────
   Een artikel is geen formulier maar leestekst, en een artikel van vijftien leden
   past niet in de 520px van een invoervenster. Vandaar de eigen breedte en de
   regelafstand van de leestekst: wie een wetsartikel naast een scherm legt, moet
   hem kunnen lezen en niet alleen kunnen zien dat hij bestaat. */
.venster.wet { max-width: 720px; }
.wettekst {
  max-height: 58vh; overflow: auto; font-size: 14px; line-height: 1.7;
  color: var(--inkt); border-top: 1px solid var(--lijn); padding-top: 14px;
}
.wetbron { margin: 12px 0 0; font-size: 12.5px; color: var(--inkt-zacht); }

/* ── oogopslag-strook ───────────────────────────────────────────────────────
   De kaart met de kerngetallen. Twee vormen: titel boven de rij, of ernaast.
   Ernaast is smaller en hoort bij een scherm waar de rij zelf al breed is. */
.oogopslag h2 {
  margin: 0 0 12px; font-family: var(--kop); font-weight: 400; font-size: 20px;
}
.oogopslag.naast { display: flex; align-items: center; gap: 26px; }
.oogopslag.naast h2 { margin: 0; flex: none; }
.oogopslag.naast .tellers { flex: 1; }

/* ── voetstrook ─────────────────────────────────────────────────────────────
   Drie constateringen onder aan een scherm. Geen knoppen: iets waarop je kunt
   klikken leest als iets wat nog moet, en dit is juist wat er al vaststaat. */
.voetstrook { display: flex; gap: 0; padding: 14px 0; }
.voetstrook > div { flex: 1; padding: 0 22px; }
.voetstrook > div + div { border-left: 1px solid var(--lijn-zacht); }
.voetstrook .opschrift {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--inkt-zacht); margin-bottom: 5px;
}
.voetstrook .waarde {
  display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
}
.voetstrook .waarde .pict { width: 16px; height: 16px; flex: none; }

/* ── baanrij: een naam, een balk en een percentage op een regel ─────────────── */
.baanrij { display: flex; align-items: center; gap: 12px; margin-top: 11px; font-size: 13px; }
.baanrij .naam { flex: none; color: var(--inkt-zacht); }
.baanrij .baan-in { flex: 1; }
.baanrij .pct {
  margin-left: auto; flex: none; font-variant-numeric: tabular-nums; font-weight: 600;
}

/* Een tweede regel die op EEN regel moet blijven. In een tabel waar de kolom
   smal is duwt een alinea alle andere rijen uit beeld; de volle tekst blijft
   bereikbaar via title=. */
/* Een tweede regel die op EEN regel moet blijven. Met `white-space: nowrap`
   lukte dat wel, maar dan is de MIN-CONTENT breedte van de cel de volle lengte
   van de zin, en dan duwt een lange toelichting zijn tabel breder dan de kaart.
   Met line-clamp is de min-content het langste WOORD, dus kan de tabel krimpen
   en blijft de regel toch een regel. Gemeten op 2026-09-06. */
.sub.kort {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal;
}
.kaartvoet { margin: 14px 0 0; }
.kaartvoet .knop-kaal { padding: 0; }

/* Tussenkop in een lijst met stapels ("Vandaag", "Later deze week"). Geen eigen
   kaart per stapel: dan moet de lezer per kaart opnieuw bepalen of het nog over
   vandaag gaat, en dat is precies de vraag die de lijst hoort te beantwoorden. */
.lijst tr.stapelkop td {
  padding: 16px 8px 4px; border-top: 0; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--inkt-zacht);
}
.lijst tr.stapelkop:first-child td { padding-top: 2px; }
.lijst tr.stapelkop:hover td { background: none; }
/* De ondertitel onder een automatisering is een zin, geen kop. */
.lijst tr.stapelkop td .sub { text-transform: none; letter-spacing: normal; font-weight: normal; }
/* Een punt dat al verstreken is: rood in plaats van neutraal. Zonder dit ziet
   een gemiste evaluatie er op de band precies zo uit als een komende. */
.dagbalk .punt.laat em { border-color: var(--rood); }
.dagbalk .punt.laat .tijd { color: var(--rood); font-weight: 700; }

/* De twee auditvakken dragen hun eigen kleur, zodat de lijn ertussen van
   terracotta naar groen loopt zoals op de plaat en niet als versiering. */
.auditvak.terra .ring { color: var(--terra-tekst); }
.auditvak.groen .ring { color: var(--ok); }
.auditvak .groot { color: var(--inkt); }
.auditvak.terra .groot { color: var(--terra-tekst); }
.auditvak.groen .groot { color: var(--ok); }

/* Een titel die op hoogstens twee regels moet blijven. Een afwijking draagt in
   het REGISTER de volle omschrijving - dat is de vastlegging - maar op een
   dashboard duwt die tekst de rest van de tabel uit beeld. */
.kort2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── lijngrafiek ────────────────────────────────────────────────────────────
   preserveAspectRatio="none" rekt de SVG op tot de breedte van de kaart. Dat
   mag hier omdat er geen cirkels in staan die vervormen zouden - de stippen
   krijgen daarom vector-effect, anders worden het ovalen. */
/* De grafiekopmaak staat in grafiek.css. */

/* ── bedragen ───────────────────────────────────────────────────────────────
   Uitgelijnd op de cijfers, want een kolom bedragen die niet uitlijnt is een
   kolom waarin je een factor tien niet ziet. */
.euro { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.euro.uit { color: var(--rood); }
.euro.in { color: var(--ok); }

/* ── invoerrooster (begroting) ──────────────────────────────────────────────── */
.invoerrij input { width: 120px; text-align: right; font: inherit; padding: 5px 8px;
                   border: 1px solid var(--lijn); border-radius: var(--rond-knop); background: var(--vlak); }
.invoerrij input:focus { outline: 2px solid var(--groen); outline-offset: 1px; }

/* ── grafiekvoet en waarschuwing ────────────────────────────────────────────── */
.grafiekvoet { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 10px;
               font-size: 12.5px; color: var(--inkt-zacht); }
.grafiekvoet .stip { margin-right: 6px; }
.grafiekvoet b { color: var(--inkt); font-variant-numeric: tabular-nums; }
.melding-rood {
  margin: 12px 0 0; padding: 10px 13px; border-radius: var(--rond-klein);
  background: var(--rood-vlak); color: var(--rood); font-size: 13px;
}
/* Dezelfde vorm in terracotta: iets dat aandacht vraagt maar geen fout is,
   zoals een postvak met ongeplaatste regels. */
.melding-terra {
  margin: 12px 0 0; padding: 10px 13px; border-radius: var(--rond-klein);
  background: var(--terra-vlak); color: var(--warm-tekst); font-size: 13px; line-height: 1.5;
}
.melding-terra .knop-kaal { margin-left: 8px; }
.venster select {
  width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--lijn);
  border-radius: var(--rond-klein); background: var(--vlak); color: var(--inkt);
}

/* ── beschikbaarheidsraster ─────────────────────────────────────────────────
   Vier standen, vier tekens. Kleur ALLEEN is niet genoeg: wie kleurenblind is
   ziet het verschil tussen groen en terracotta niet, en dan is het raster een
   raadsel. Vandaar een vinkje, een tilde, een kruis en een punt. */
.lijst.beschik td.vakje { text-align: center; padding: 5px 3px; }
.lijst.beschik th { text-align: center; }
.lijst.beschik th:first-child, .lijst.beschik td:first-child { text-align: left; }
.beschikknop {
  width: 30px; height: 30px; border-radius: var(--rond-klein); border: 1px solid var(--lijn);
  background: var(--vlak); font-size: 13px; line-height: 1; padding: 0;
  color: var(--inkt-zacht);
}
.beschikknop.kan { background: var(--groen-vlak); border-color: var(--kan-rand);
                   color: var(--groen-diep); font-weight: 700; }
.beschikknop.liever_niet { background: var(--terra-vlak); border-color: var(--liever-rand);
                           color: var(--warm-tekst); font-weight: 700; }
.beschikknop.kan_niet { background: var(--rood-vlak); border-color: var(--kanniet-rand);
                        color: var(--rood); font-weight: 700; }
.beschikknop.onbekend { color: var(--inkt-zacht); }   /* O-043 stap 4: --onbekend haalde 1,8:1 als tekst */
.beschikknop:hover { border-color: var(--groen); }

/* Een open plek met zijn kandidaten eronder. */
.opengat + .opengat { margin-top: 22px; padding-top: 18px;
                      border-top: 1px solid var(--lijn-zacht); }
.opengat-kop { margin: 0 0 8px; display: flex; gap: 12px; align-items: baseline; }

/* ── snelkoppelingen en verversen ────────────────────────────────────────────
   Twee dingen die op elk scherm meekomen en daarom nergens de aandacht mogen
   trekken: een knop naar buiten hoort ondergeschikt te zijn aan de knop die iets
   IN dit systeem doet, en de tijdstempel in de balk is pas belangrijk als de
   stand oud wordt. Dan pas krijgt hij kleur. */
.snelknop {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  color: var(--inkt); padding: 8px 12px; font-weight: 600; font-size: 13.5px;
}
.snelknop:hover { border-color: var(--groen); color: var(--groen-diep); }
.snelknop .pict.klein { width: 15px; height: 15px; color: var(--inkt-zacht); }
.snelknop .uit { width: 12px; height: 12px; color: var(--inkt-zacht); }
.lijst tr.uit td { opacity: .55; }

.verversvak { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
#verversstand { white-space: nowrap; }
#verversstand.oud { color: var(--terra-tekst); font-weight: 600; }
#ververskeuze {
  font: inherit; font-size: 12px; color: var(--inkt-zacht); background: transparent;
  border: 1px solid var(--lijn); border-radius: var(--rond-klein); padding: 2px 4px;
}
#verversnu {
  display: inline-flex; background: transparent; border: 1px solid var(--lijn);
  border-radius: var(--rond-klein); padding: 3px; color: var(--inkt-zacht); cursor: pointer;
}
#verversnu:hover { color: var(--groen-diep); border-color: var(--groen); }
#verversnu svg { width: 13px; height: 13px; }

/* ── koppelingen en postvak ─────────────────────────────────────────────────
   De stappenlijst bij een aanbieder en de aankruisvakjes in het postvak. Verder
   niets nieuws: de kaarten, tabellen en pillen zijn dezelfde als overal. */
.stappen {
  margin: 10px 0 0; padding-left: 20px; color: var(--inkt-zacht); font-size: 13px;
}
.stappen li { margin: 3px 0; }
.lijst td.vakje, .lijst th.vakje { text-align: center; width: 34px; padding: 5px 3px; }
.lijst td.vakje input { width: 16px; height: 16px; accent-color: var(--groen); }
.lijst td .cat {
  font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--lijn);
  border-radius: var(--rond-knop); background: var(--vlak); color: var(--inkt); max-width: 210px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   De schil die de bladen aan elkaar knoopt (schil.js, 0.57.0)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── zichtbaar waar je bent met het toetsenbord ─────────────────────────────
   Tot 0.56.0 had alleen een invoerveld een focusring. Wie met de tab-toets door
   de suite liep - en dat is de snelste manier om ermee te werken - zag dus niet
   waar hij stond. :focus-visible en niet :focus, zodat een muisklik geen ring
   achterlaat op de knop die je net indrukte. */
button:focus-visible, a:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--groen);
  outline-offset: 2px;
  border-radius: var(--rond-klein);
}

/* ── zoeken in de bovenbalk ────────────────────────────────────────────────── */
.zoek { position: relative; }
.zoekuitslag {
  position: absolute; top: calc(100% + 8px); right: 0; width: 380px; max-width: 84vw;
  z-index: 60; background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: var(--rond-klein); box-shadow: 0 12px 34px rgba(29,25,16,.15); padding: 7px;
  max-height: 62vh; overflow-y: auto;
}
.zoekrij {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  border-radius: var(--rond-klein); padding: 8px 10px;
}
.zoekrij:hover, .zoekrij.actief { background: var(--groen-vlak); }
.zoeknaam { display: block; font-size: 14px; font-weight: 600; color: var(--inkt); }
.zoekbij { display: block; font-size: 12.5px; color: var(--inkt-zacht); }
.zoekleeg { margin: 4px; font-size: 13px; color: var(--inkt-zacht); line-height: 1.45; }

/* ── de bel ────────────────────────────────────────────────────────────────── */
/* Een stip zei alleen DAT er iets was. Het getal zegt hoeveel, en dat is het
   verschil tussen "kijk nog eens" en "dit is de moeite waard". */
.bel i {
  top: -1px; right: -2px; width: auto; min-width: 17px; height: 17px;
  border-radius: 9px; padding: 0 4px; background: var(--terra-vol); color: #fff;
  font-size: 11px; font-weight: 700; font-style: normal; line-height: 17px;
  text-align: center;
}
.belpaneel {
  position: absolute; top: calc(100% + 9px); right: 0; width: 400px; max-width: 88vw;
  z-index: 60; background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: var(--rond-klein); box-shadow: 0 12px 34px rgba(29,25,16,.15); padding: 8px;
  max-height: 66vh; overflow-y: auto;
}
.belrij {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: var(--rond-klein); padding: 9px 10px;
}
.belrij:hover { background: var(--vlak-warm); }
.belrij .pil { flex: none; margin-top: 1px; }
.beltekst { min-width: 0; }
.beltekst b { display: block; font-size: 13.5px; font-weight: 600; }
.beltekst span { display: block; font-size: 12.5px; color: var(--inkt-zacht); }
.belleeg { margin: 6px 10px 10px; font-size: 13px; color: var(--inkt-zacht); line-height: 1.45; }
.belstruikel { margin: 4px 6px 8px; font-size: 12.5px; }
.belmeer { margin: 2px 10px 6px; font-size: 12.5px; color: var(--inkt-zacht); }

/* ── de organisatieknop ────────────────────────────────────────────────────── */
.gebruiker { position: relative; }
.orgpaneel {
  position: absolute; top: calc(100% + 9px); right: 0; width: 320px; max-width: 88vw;
  z-index: 60; background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: var(--rond-klein); box-shadow: 0 12px 34px rgba(29,25,16,.15); padding: 8px;
}
.orgvak { padding: 2px 10px 4px; }
.orgregel {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 5px 0; border-bottom: 1px solid var(--lijn-zacht); font-size: 13px;
}
.orgregel:last-child { border-bottom: 0; }
.orgregel span { color: var(--inkt-zacht); flex: none; }
.orgregel b { font-weight: 600; text-align: right; }
.orgmaker { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lijn-zacht); }

/* ── verder werken: de voet onder elk blad ─────────────────────────────────── */
.verderwerken { margin: 34px 0 0; padding-top: 4px; }
.verdergroep + .verdergroep { margin-top: 22px; }
.verderwerken h2 {
  font-family: var(--kop); font-size: 19px; font-weight: 400; margin: 0 0 2px;
}
.verderuitleg { margin: 0 0 12px; font-size: 13px; color: var(--inkt-zacht); }
.verderwerken h2 + .verderrij { margin-top: 12px; }
.verderrij {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.verderknop {
  position: relative; display: block; text-align: left; background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: var(--rond-klein); padding: 13px 34px 13px 14px;
  box-shadow: var(--schaduw);
}
.verderknop:hover { border-color: var(--groen); background: var(--groen-vlak); }
.verdernaam { display: block; font-size: 14px; font-weight: 600; }
.verderbij {
  display: block; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--inkt-zacht); margin-top: 1px;
}
.verderwaarom {
  display: block; font-size: 12.5px; color: var(--inkt-zacht); margin-top: 6px;
  line-height: 1.4;
}
.verderknop svg {
  position: absolute; top: 15px; right: 12px; width: 16px; height: 16px;
  color: var(--groen);
}

/* ── de menuknop op een smal scherm ────────────────────────────────────────── */
.menuknop {
  display: none; background: none; border: 0; padding: 6px; margin-right: -4px;
  color: var(--inkt-zacht);
}
.menuknop svg { width: 22px; height: 22px; }
.zoekknop { display: none; background: none; border: 0; padding: 7px; color: var(--inkt-zacht); }
.zoekknop svg { width: 20px; height: 20px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Meebuigen met het scherm
   ───────────────────────────────────────────────────────────────────────────
   Tot 0.56.0 stond er in dit blad EEN mediaregel, voor een kaartenraster. De
   bovenbalk, het zijmenu en de tabellen bogen nergens mee: op een tablet viel de
   rechterkant van elke tabel buiten beeld en op een telefoon nam het zijmenu
   tweederde van de breedte. Gemeten op 768 en 375 pixels.

   De volgorde is van breed naar smal, zodat elke regel de vorige aanvult.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Een tabel is het enige onderdeel dat niet kan krimpen zonder onleesbaar te
   worden. Hij mag dus schuiven - binnen een eigen omhulsel, zodat de PAGINA niet
   zijwaarts gaat schuiven. Dat laatste is het verschil tussen een brede tabel en
   een stukke pagina.

   Het omhulsel wordt door schil.js om de tabel gezet en zit NIET op .kaart zelf.
   Dat is met opzet: overflow-x op een kaart zet ook de verticale overloop vast,
   en dan worden de nu-lijn van de tijdbalk en de opschriften van de dagstrook
   afgeknipt - die steken bewust buiten hun kaart uit. */
.schuif { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.schuif > table { min-width: 100%; }

@media (max-width: 1180px) {
  .zoek { width: 210px; }
  .zoek .toets { display: none; }
}

@media (max-width: 1000px) {
  .menuknop { display: block; }
  .balk { padding: 10px 14px; gap: 10px; }
  .balk .merk { width: 38px; height: 38px; }
  .standregel { display: none; }
  .zoek { width: 170px; }

  /* Het zijmenu schuift over het werkvlak in plaats van ernaast te staan. Met
     opzet géén animatie op de breedte: dat zou het werkvlak elke keer opnieuw
     laten uitrekenen en de tabellen laten schokken. */
  .romp { position: relative; }
  .zij {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 70; width: 274px;
    transform: translateX(-100%); transition: transform .18s ease-out, visibility 0s .18s;
    overflow-y: auto; box-shadow: 0 0 40px rgba(29,25,16,.18);
    padding-top: 66px;
    /* visibility en niet alleen transform: een menu dat buiten beeld staat maar
       wel in de tab-volgorde zit, laat wie met het toetsenbord werkt door
       dertien onzichtbare knoppen stappen. */
    visibility: hidden;
  }
  body.zij-open .zij { transform: none; visibility: visible; transition: transform .18s ease-out; }
  /* Het grijze vlak is een ECHT element (schil.js zet het neer) en geen
     ::after op body: een pseudo-element vangt geen klik, en dan was het menu
     alleen nog te sluiten door een keuze te maken. De bovenbalk staat er met
     z-index 80 bovenop, zodat de menuknop bereikbaar blijft. */
  .zijsluier { position: fixed; inset: 0; z-index: 60; background: var(--sluier); border: 0; padding: 0; margin: 0; cursor: default; }
  .zijsluier[hidden] { display: none; }
  body.zij-open .balk { z-index: 80; }
  .werk { padding: 20px 16px 40px; }
}

@media (max-width: 720px) {
  /* Eén regel op een telefoon: menu, systeem, zoeken, bel, organisatie. Tot 0.80.2
     stonden hier drie regels (164px op 375 breed) en viel de bovenkant van het
     zijmenu daaronder weg. Het zoekveld klapt open onder de balk (schil.js), de
     organisatie toont alleen haar beginletters. */
  .balk { flex-wrap: wrap; gap: 4px; padding: 8px 10px; }
  .balk .merk { display: none; }
  .wisselaar { position: static; flex: 1 1 auto; min-width: 0; }
  .wisselknop { font-size: 14.5px; padding: 8px 10px; gap: 8px; max-width: 100%; min-width: 0;
    box-shadow: none; border-color: transparent; background: none; }
  .wisselknop .roosterpict { display: none; }
  #wisselnaam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .zoekknop { display: block; }
  .zoek { display: none; order: 9; width: 100%; margin: 4px 0 2px; }
  body.zoek-open .zoek { display: flex; }
  .zoekuitslag { width: 100%; max-width: none; }
  .gebruiker { width: 38px; height: 38px; padding: 0; border-radius: 50%; justify-content: center;
    background: var(--groen-vlak); border-color: transparent; color: var(--groen-diep); font-size: 13px; }
  .gebruiker::before { content: attr(data-letters); letter-spacing: .02em; }
  .gebruiker #orgtekst, .gebruiker .pijl { display: none; }
  /* De uitklappanelen hangen aan de balk en vullen de schermbreedte. */
  .wisselmenu, .belpaneel, .orgpaneel { left: 10px; right: 10px; width: auto; max-width: none; }
  .wisselmenu { overflow-y: auto; }
  #wissellijst { grid-template-columns: 1fr; }
  .verderrij { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  body { font-size: 14px; }
  .werk { padding: 16px 12px 36px; }
  .paginakop { flex-wrap: wrap; gap: 10px; }
  .balk .merk { display: none; }
}

/* Wie in zijn systeem heeft gezet dat beweging hem hindert, krijgt geen beweging.
   Het menu springt dan open in plaats van te schuiven; dat werkt net zo goed. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* De gele balk van de lokale ontwikkelstand (geen inlog). Sinds A-INLOG-01.
   Kleur is niet van de site: een waarschuwing moet opvallen, niet passen. */
.ontwikkelbalk {
  background: #FFE9A8; color: #5A4300; font-size: 13px; text-align: center;
  padding: 6px 12px; border-bottom: 1px solid #E8C96A;
}

/* ── Yuki op de financiele bladen (yuki.js) ─────────────────────────────── */
.yuki-herkomst { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  font-size: 13px; color: var(--inkt-zacht); margin: -6px 0 14px; }
.yuki-herkomst .knop-kaal { margin-left: auto; }
.yuki-tussenkop { font-family: var(--kop); font-size: 20px; margin: 28px 0 12px; }
.yuki-legenda { display: flex; gap: 16px; font-size: 13px; color: var(--inkt-zacht); margin-bottom: 6px; }
.yuki-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 6px; vertical-align: -1px; }
.yuki-legenda i.omzet { background: var(--ok); }
.yuki-legenda i.kosten { background: var(--terra); }
.yuki-legenda i.resultaat { background: var(--blauw); height: 3px; vertical-align: 3px; }
.yuki-schuif { overflow-x: auto; }
.yuki-tabel td, .yuki-tabel th { padding: 8px 6px; font-size: 13px; }
.yuki-tabel .kopregel { cursor: pointer; }
.yuki-tabel .kopregel.slot { cursor: default; }
.yuki-tabel .rekening { display: none; color: var(--inkt-zacht); }
.yuki-rubriek.open .rekening { display: table-row; }
.yuki-tabel .pijl { display: inline-block; transition: transform .15s; color: var(--inkt-zacht); }
.yuki-rubriek.open .pijl { transform: rotate(90deg); }
.oogopslag .tellers { flex-wrap: wrap; }
@media (max-width: 720px) { .oogopslag .tellers > div { flex: 1 1 45%; border-left: 0; } }
.raster3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.raster3 > * { min-width: 0; }
@media (max-width: 1200px) { .raster3 { grid-template-columns: 1fr; } }
/* Zes kerncijfers naast elkaar passen pas vanaf een breed scherm; daaronder drie per rij. */
@media (max-width: 1400px) { .oogopslag .tellers > div { flex: 1 1 30%; } }
.oogopslag .tellers .cijfer { white-space: nowrap; }
/* Lange leveranciersnamen kappen af in plaats van de pagina breder te maken
   (gemeten 2026-09-30: 23 px te breed op 375 px). */
.yuki-baan .naam { flex: 0 1 45%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── alles wat openstaat (overzicht) ───────────────────────────────────────── */
.vakkop { font-family: var(--kop); font-size: 17px; margin: 18px 0 6px; }
details.vakdicht { margin-top: 12px; }
details.vakdicht > summary { cursor: pointer; font-family: var(--kop); font-size: 16px; padding: 4px 0; }

/* Google Agenda en Drive (A-GOOGLE-01). Niet van de site: de agendakleuren komen uit Google. */
.agendalegenda { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.agendachip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--lijn); background: var(--vlak); font: inherit; font-size: 13px; cursor: pointer; }
.agendachip.uit { opacity: .4; text-decoration: line-through; }
.kleurstip { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; vertical-align: middle; margin-right: 4px; }
.overdrachtlijn { background: var(--blauw); opacity: .7; }
.overdrachtlijn span { color: var(--blauw); }
.lijst.overdrachten { margin-top: 12px; }
.drivekruimel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; font-size: 14px; }
.drivemap { padding: 0; text-align: left; }
.zoekveld { padding: 7px 11px; border: 1px solid var(--lijn); border-radius: var(--rond-klein); font: inherit; min-width: 220px; }
/* Kaders en dagkaart (A-KADER-01). */
.dagkeuze { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; font-size: 13.5px; }
.dagkeuze > span { width: 100%; font-weight: 700; }
.dagkeuze label { display: inline-flex; gap: 4px; align-items: center; }
.overdrachtregel { display: flex; gap: 8px; align-items: center; margin-top: 10px; color: var(--blauw); }
.overdrachtregel .pict { width: 16px; height: 16px; }
/* Daglogboek (A-LOGBOEK-01). */
.lbraster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 18px; align-items: start; }
@media (max-width: 900px) { .lbraster { grid-template-columns: minmax(0, 1fr); } }
.lbchecklist { display: grid; gap: 8px; margin-top: 4px; }
.lbchecklist label { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.lbchecklist label > span:first-of-type { flex: 1; }
.lbklaar td, .lbchecklist label.lbklaar > span:first-of-type { color: var(--inkt-zacht); text-decoration: line-through; }
/* A-LOGBOEK-DASH-01: een regel die niet uit ONS komt staat geel tot hij is nagekeken (bestaand token, geen nieuwe kleur). */
.lbgeel td { background: var(--terra-vlak); }
.lbgeel td:first-child { box-shadow: inset 3px 0 0 var(--terra); }
/* PG-025 bev. 9: de rij (kind, rubriek, veld, Toevoegen) vraagt 510 px en kreeg in de rechterkolom van .lbraster
   op 920-1100 px breed maar 386-481 px: Toevoegen viel buiten beeld. Afbreken mag dus overal, niet pas op de telefoon. */
.lbnieuw { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lbnieuw input[type=text] { flex: 1 1 12em; min-width: 0; padding: 7px 11px; border: 1px solid var(--lijn); border-radius: var(--rond-klein); font: inherit; }
.lbkeuze { padding: 6px 8px; border: 1px solid var(--lijn); border-radius: var(--rond-klein); font: inherit; }
.lbuitleg { margin: -4px 0 6px; }
.lbdeel { margin-top: 10px; }
/* Dagbalk, dagstrook en Mijn dag (0.127.0). */
.dagbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: -4px 0 14px; padding: 10px 16px; background: var(--vlak-warm); border-radius: var(--rond-klein); }
.dagbalk-datum { display: flex; flex-direction: column; min-width: 230px; }
.dagbalk-datum strong { font-family: var(--kop); font-size: 21px; line-height: 1.15; }
.dagbalk.nu .dagbalk-datum strong { color: var(--groen-diep); }
.dagbalk-kies { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--inkt-zacht); }
.dagbalk-kies input { padding: 5px 8px; border: 1px solid var(--lijn); border-radius: var(--rond-klein); font: inherit; }
.dagstrook { padding-top: 8px; padding-bottom: 8px; }
.dagstrook-rij { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 6px 0; }
.dagstrook-rij + .dagstrook-rij { border-top: 1px solid var(--lijn-zacht); }
.dagstrook-kop { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; font-size: 13px; color: var(--inkt-zacht); min-width: 120px; }
.dagstrook-kop .pict { width: 16px; height: 16px; }
.dienstpil { display: inline-flex; gap: 6px; align-items: center; padding: 3px 11px; border-radius: 999px; background: var(--groen-vlak); color: var(--groen-diep); font-size: 13px; }
.dienstpil.open { background: var(--terra-vlak); color: var(--warm-tekst); }
.dienstpil.zelf { box-shadow: inset 0 0 0 2px var(--groen); }
.overdrachtregel.klein { margin-top: 0; font-size: 13px; }
.agendalijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; }
.agendalijst.staand { flex-direction: column; gap: 4px; margin-top: 4px; }
.agendalijst b { color: var(--blauw); }
@media (max-width: 700px) { .dagbalk-kies { margin-left: 0; } }
/* PG-026 bev. 6 (rij 240): .dagbalk is ook de tijdlijn in het dossier (r. 335, vaste hoogte voor de geplaatste punten).
   De datumbalk van het daglogboek slaat op de telefoon om naar twee of drie regels; met die vaste hoogte lag hij over de
   kaart eronder. */
.dagbalk.dagnav { height: auto; }
/* PG-026 bev. 7 (rij 240): de eerste Tab springt naar de inhoud, voorbij menu en kop (WCAG 2.4.1). */
.naar-inhoud { position: absolute; left: 8px; top: -60px; z-index: 100; }
.naar-inhoud:focus { top: 8px; }
.werk:focus { outline: none; }
/* Kindkaart (A-KIND-01). */
.kindkaart > summary { list-style: none; cursor: pointer; }
.kindkaart > summary::-webkit-details-marker { display: none; }
.kindkop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kindnaam { flex: 1; min-width: 180px; }
.kindnummer { font-size: 13px; }
.kindknoppen { display: flex; gap: 14px; flex-wrap: wrap; margin: 12px 0 4px; }
.kindraster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 12px; }
@media (max-width: 1000px) { .kindraster { grid-template-columns: 1fr; } }
.kindraster h3 { font-size: 15px; margin: 0 0 8px; }
.kindblok { margin-bottom: 10px; font-size: 13.5px; }
.kindblok p { margin: 3px 0; white-space: pre-line; }
.kindlabel { font-size: 12px; font-weight: 700; color: var(--inkt-zacht); display: flex; gap: 5px; align-items: center; }
.kindlabel .pict { width: 14px; height: 14px; }
.contact { display: flex; flex-direction: column; margin: 4px 0 8px; }
.knop-kaal.klein { font-size: 11.5px; padding: 0; align-self: flex-start; opacity: .7; }
.meldlijst { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.meldlijst li { display: flex; gap: 10px; align-items: flex-start; }
.meldlijst li > span:nth-child(2) { flex: 1; }
.dkgroep { border-top: 1px solid var(--lijn); padding: 8px 0; }
.dkgroep > summary { cursor: pointer; display: flex; gap: 8px; align-items: center; }

/* Vaste kolommen met duidelijke lijnen (rasterTabel, 0.76.2): kolommen staan onder elkaar
   in opeenvolgende tabellen, elke regel is van de volgende gescheiden, lange tekst begint bovenaan. */
table.lijst.raster { table-layout: fixed; margin: 4px 0 2px; }
table.lijst.raster th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--inkt-zacht); padding: 8px 10px; border-bottom: 1.5px solid var(--lijn);
}
table.lijst.raster td {
  padding: 10px; vertical-align: top; border-top: 1px solid var(--lijn);
  overflow-wrap: anywhere; line-height: 1.45;
}
table.lijst.raster tbody tr:first-child td { border-top: 0; }
table.lijst.raster tbody tr:last-child td { border-bottom: 1px solid var(--lijn); }
table.lijst.raster td.dun { white-space: normal; }
table.lijst.raster tr.stapelkop td { border-top: 1.5px solid var(--lijn); background: var(--vlak-warm); padding: 7px 10px; }
table.lijst.raster .merkje { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metpict { display: inline-flex; gap: 6px; align-items: center; }
.metpict .pict { width: 15px; height: 15px; flex: none; }
.kinddeel { border-top: 1px solid var(--lijn); margin-top: 14px; padding-top: 12px; }
.kinddeel h3 { font-size: 15px; margin: 0 0 6px; }
.overdrachten { margin-top: 12px; }
.lbchecklist label { padding: 8px 2px; border-top: 1px solid var(--lijn); margin: 0; }
.lbchecklist label:last-child { border-bottom: 1px solid var(--lijn); }
.lbchecklist { gap: 0; }
.dkgroep > summary { padding: 4px 0; }
/* Weekraster Google Agenda en teamrooster (A-GOOGLE-02). Niet van de site: blokkleur = agendakleur uit Google. */
.wrschuif { overflow-x: auto; }
.weekraster { min-width: 1040px; font-size: 12.5px; }
.wrkop, .wrrij { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.wrkop > div { padding: 6px 8px 8px; color: var(--inkt-zacht); border-bottom: 2px solid var(--lijn); }
.wrkop > div b { color: var(--inkt); text-transform: capitalize; font-size: 14px; }
.wrkop > div.nu b, .wrkop > div.nu { color: var(--terra-tekst); }
.wrvandaag { font-size: 11px; font-weight: 700; background: var(--terra-vol); color: #fff; border-radius: 999px; padding: 0 6px; }
.wrrij { border-bottom: 1px solid var(--lijn); }
.wrrij > div { padding: 4px 3px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wrrij > div.nu, .wrdag.nu { background-color: var(--terra-vlak); }
.wrlabel { font-size: 11px; color: var(--inkt-zacht); line-height: 1.2; }
.wrdienst { display: block; padding: 1px 4px; border-radius: 4px; background: var(--groen-vlak); color: var(--groen-diep);
  line-height: 1.3; }
.wrdienst.warm { background: var(--warm-blok); color: var(--warm-tekst); }
.wrdtijd { font-variant-numeric: tabular-nums; margin-right: 4px; }
.wrchip { display: block; padding: 2px 6px; border-radius: 4px; background: color-mix(in srgb, var(--k) 18%, var(--vlak));
  border-left: 3px solid var(--k); line-height: 1.3; overflow-wrap: anywhere; }
.wrchip small { display: block; font-size: 11px; color: var(--inkt-zacht); }
.wrlijf { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); position: relative; }
.wruren { position: relative; }
.wruren span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11.5px; color: var(--inkt-zacht);
  font-variant-numeric: tabular-nums; }
.wruren span:first-child { transform: none; }
.wrdag { position: relative; border-left: 1px solid var(--lijn);
  background-image: linear-gradient(to bottom, var(--lijn) 1px, transparent 1px); }
.wrblok { position: absolute; box-sizing: border-box; padding: 3px 6px; border-radius: var(--rond-knop); overflow: hidden;
  background: color-mix(in srgb, var(--k) 16%, var(--vlak)); border-left: 4px solid var(--k); line-height: 1.25; z-index: 1;
  box-shadow: 0 0 0 1px var(--vlak); }
.wrblok:hover { z-index: 4; overflow: visible; height: auto !important; min-height: 100%; box-shadow: 0 2px 10px rgba(29,25,16,.18); }
.wrtijd { display: block; font-size: 11px; font-weight: 700; color: var(--inkt-zacht); font-variant-numeric: tabular-nums; }
.wrblok b { display: block; font-weight: 600; overflow-wrap: break-word; hyphens: auto; }
.wrblok.kort { display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.wrblok.kort b { overflow: hidden; text-overflow: ellipsis; }
.wrgat { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(45deg, var(--rood-vlak) 0 6px, transparent 6px 12px); }
.wroverdracht { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--blauw); z-index: 0; opacity: .6; }
.wrnu { position: absolute; left: 0; right: 0; border-top: 2px solid var(--terra); z-index: 3; }
.wruitleg { margin-top: 8px; font-size: 12px; }
.wrteken { display: inline-block; width: 18px; height: 0; vertical-align: middle; margin-right: 3px; }
.wrteken.overdracht { border-top: 2px dashed var(--blauw); }
.wrteken.nu { border-top: 2px solid var(--terra); }
.wrteken.gat { height: 10px; background: repeating-linear-gradient(45deg, var(--rood) 0 2px, transparent 2px 5px); }
.wrkeuze { display: inline-flex; gap: 2px; margin-left: 8px; }
.wrkeuze .aan { background: var(--groen-vlak); color: var(--groen-diep); font-weight: 600; }
table.teamrooster { min-width: 760px; }
table.teamrooster th { text-transform: capitalize; white-space: nowrap; }
table.teamrooster th.nu, table.teamrooster td.nu { background: var(--terra-vlak); }
table.teamrooster td { vertical-align: top; }
.trdienst { display: block; white-space: nowrap; font-size: 12.5px; }
.trdienst b { display: inline-block; min-width: 34px; color: var(--groen-diep); }
.trdienst.warm b { color: var(--warm-tekst); }
.trnav { display: inline-flex; gap: 2px; align-items: center; margin-left: 8px; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   Verfijning (0.79.0) - leesbaarheid en afwerking over de hele suite
   ───────────────────────────────────────────────────────────────────────────
   Bewust als EEN laag onderaan, zodat de afwerking in een keer te lezen en in een
   keer terug te draaien is. Geen nieuwe kleuren: alles leunt op het sitepalet
   hierboven. Wat erbij komt is diepte (schaduw, verloop), lucht (regelhoogte,
   ruimte in cellen) en beweging die je alleen ziet bij het wisselen van blad -
   niet bij het automatisch verversen, want dan knippert het scherm elke minuut.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --schaduw: 0 1px 2px rgba(43,32,25,.05), 0 12px 28px -20px rgba(43,32,25,.22);
  --schaduw-hoog: 0 1px 2px rgba(43,32,25,.06), 0 18px 40px -28px rgba(43,32,25,.45);
  --ring: 0 0 0 3px rgba(164,82,42,.18);
  --lijn-rand: var(--ga-border);
  --rond: var(--ga-radius);
  /* Ontwerpsysteem (O-043 stap 4, rij 224): een plek per vorm. Gemeten 22-10: 28 knopvormen uit 21 klassen; de
     hoofdknop had 11 px (knop-vol), 10 px (knop-rand) of een pil (Kwaliteit). Nu een ronding voor elke knop, een pil
     alleen voor wat een label of keuzechip is, en een kleinere ronding voor tegels en kaartjes in een kaart. */
  --rond-knop: var(--ga-radius-sm);
  --rond-pil: var(--ga-radius-pill);
  --rond-klein: var(--ga-radius);
  /* Rij 236: een tabelvorm (table.lijst; Kwaliteit gebruikt dezelfde maten via deze tokens). */
  --tabel-cel: 13px 8px;
  --tabel-kop: 0 8px 10px;
  --tabel-tekst: 14.5px;
}

/* Tekst: een tikje groter en ruimer, cijfers even breed zodat kolommen recht staan. */
body {
  font-size: 15px; line-height: 1.58; text-rendering: optimizeLegibility;
  /* lnum: Cormorant zet standaard mediaevalcijfers ("1 open" las als "I open"); in een werkscherm gewone cijfers */
  font-feature-settings: "kern", "liga", "lnum";
  background:
    radial-gradient(1100px 520px at 100% -8%, rgba(164,82,42,.05), transparent 62%),
    var(--creme);
  background-attachment: fixed;
}
/* Nederlands plakt woorden aan elkaar: 'Medewerkertevredenheidsenquete' in een kop
   duwde een telefoonscherm 20px zijwaarts. Afbreken mag, met streepje (lang="nl"). */
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
p { text-wrap: pretty; }
::selection { background: rgba(164,82,42,.2); color: var(--inkt); }
td, .cijfer, .bedrag, .getal { font-variant-numeric: tabular-nums; }

/* Schuifbalken in de huiskleuren in plaats van grijs systeemstaal. */
* { scrollbar-width: thin; scrollbar-color: var(--schuif) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--schuif); border-radius: var(--rond-klein); border: 3px solid var(--creme); }
::-webkit-scrollbar-thumb:hover { background: var(--schuif-hover); }
::-webkit-scrollbar-track { background: transparent; }

/* ── bovenbalk: glas over de pagina ──────────────────────────────────────── */
.balk {
  background: var(--glas);
  -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px);
  border-bottom-color: var(--lijn-rand);
  box-shadow: none;
}
.wisselknop, .gebruiker, .zoek { transition: border-color .15s, box-shadow .15s; }
.wisselknop:hover, .gebruiker:hover { border-color: var(--rand-hover); box-shadow: var(--schaduw); }
.zoek:focus-within { border-color: var(--groen); box-shadow: var(--ring); }
.wisselmenu, .zoekuitslag { border-color: var(--lijn-rand); box-shadow: var(--schaduw-hoog); }
.wisselitem { transition: background .12s; }

/* ── zijmenu: waar je bent, zie je in een oogopslag ─────────────────────── */
.zij { background: linear-gradient(180deg, var(--zij-a) 0%, var(--zij-b) 100%); border-right-color: var(--lijn-rand); }
.zij-kop { font-size: 10.5px; letter-spacing: .13em; color: var(--zij-kop); margin-bottom: 6px; }
.zij-groep + .zij-groep { margin-top: 24px; }
.zij-item {
  position: relative; padding: 8.5px 11px; margin: 1px 0;
  transition: background .14s, color .14s;
}
.zij-item:hover { background: var(--zij-hover); }
.zij-item:hover .pict { color: var(--groen); }
.zij-item.actief {
  background: var(--vlak); color: var(--groen-diep);
  box-shadow: inset 0 0 0 1px var(--lijn-rand);
}
.zij-item.actief::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3.5px;
  border-radius: 0; background: var(--terra);
}
.zij-item .telling { background: var(--telling-vlak); border-color: var(--lijn-rand); }
.zij-item.actief .telling { background: var(--groen-vlak); border-color: transparent; color: var(--groen-diep); }

/* ── werkvlak en paginakop ───────────────────────────────────────────────── */
.werk { padding: 34px 36px 60px; }
.paginakop { margin-bottom: 26px; align-items: flex-end; }
.paginakop h1 { font-size: 38px; font-weight: 400; letter-spacing: -.01em; line-height: 1.05; }
.paginakop h1::after {
  content: ""; display: block; width: 40px; height: 2px; margin-top: 14px; border-radius: 0;
  background: var(--terra);
}
.paginakop p { margin-top: 10px; font-size: 15px; max-width: 70ch; }

/* ── kaarten: zacht opgetild van het creme ───────────────────────────────── */
.kaart {
  border-color: var(--lijn-rand); border-radius: var(--rond);
  padding: 22px 24px; margin-bottom: 20px;
  background: var(--kaart-a);
  transition: box-shadow .2s, border-color .2s;
}
.kaart:hover { box-shadow: var(--schaduw); border-color: var(--rand-hover); }
.kaart-kop { margin-bottom: 16px; }
.kaart-kop h2 { font-size: 21.5px; font-weight: 500; letter-spacing: 0; line-height: 1.15; }
.raster2 { gap: 20px; }

/* ── tellers: het cijfer is de hoofdzaak ─────────────────────────────────── */
.tellers > div { padding: 8px 10px; }
.tellers .cijfer { font-size: 36px; font-weight: 400; letter-spacing: -.01em; line-height: 1.05; }
.tellers .label { font-size: 13px; margin-top: 5px; }

/* ── tabellen: rust tussen de regels ─────────────────────────────────────── */
table.lijst th {
  font-size: 10.5px; letter-spacing: .07em; color: var(--kolomkop);
  padding: var(--tabel-kop); border-bottom: 1px solid var(--lijn);
}
/* De tabel houdt 14.5px: op een halve schermbreedte telt elke pixel, gemeten op het
   kwaliteitsdashboard bij 1440 breed (15px liet 'Nu aan de beurt' 11px uitsteken). */
table.lijst { font-size: var(--tabel-tekst); }
table.lijst td { padding: var(--tabel-cel); line-height: 1.45; border-top-color: var(--lijn-zacht); }
table.lijst tr:first-child td { border-top: 0; }
table.lijst tbody tr { transition: background .12s; }
table.lijst tr:hover td { background: var(--rij-hover); }
table.lijst tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--terra); }
.sub { margin-top: 2px; line-height: 1.4; }

/* ── knoppen ─────────────────────────────────────────────────────────────── */
.knop-vol {
  background: var(--groen-knop);
  border-radius: var(--rond-knop);
  box-shadow: none; font-weight: 500; letter-spacing: .01em;
  transition: transform .15s, box-shadow .15s, background .25s;
}
.knop-vol:hover {
  background: var(--groen-knop-hover);
  transform: none;
  box-shadow: none;
}
.knop-vol:active { transform: none; }
.knop-rand { transition: border-color .15s, box-shadow .15s, background .15s; }
.knop-rand:hover { border-color: var(--inkt); background: var(--knop-rand-hover); box-shadow: none; }
.knop-kaal, .link { transition: color .15s, gap .18s; }
.knop-kaal:hover, .link:hover { color: var(--groen-diep); gap: 10px; }

/* ── merktekens en pillen: een fijne rand maakt ze scherper ──────────────── */
.pil { padding: 2.5px 11px; box-shadow: inset 0 0 0 1px rgba(106,93,80,.14); }
.pil.hoog { box-shadow: inset 0 0 0 1px rgba(140,47,38,.2); }
.pil.midden { box-shadow: inset 0 0 0 1px rgba(164,82,42,.22); }
.pil.laag { box-shadow: inset 0 0 0 1px rgba(106,93,80,.14); }
.merkje { box-shadow: inset 0 0 0 1px rgba(106,93,80,.14); }
.merkje.warm { box-shadow: inset 0 0 0 1px rgba(164,82,42,.22); }

/* ── invoer: een duidelijke, zachte focus ────────────────────────────────── */
:where(.werk, .venster) :where(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  transition: border-color .15s, box-shadow .15s;
}
:where(.werk, .venster) :where(input:not([type=checkbox]):not([type=radio]), select, textarea):focus {
  outline: none; border-color: var(--groen); box-shadow: var(--ring);
}

/* ── venster: de pagina wijkt, het venster komt naar voren ───────────────── */
.vensterlaag {
  background: var(--sluier);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.venster { border-radius: var(--rond); padding: 28px 30px; box-shadow: var(--schaduw-hoog); }
.venster h2 { font-size: 24px; font-weight: 500; }
.vensterlaag:not([hidden]) .venster { animation: verfijn-op .22s cubic-bezier(.2,.8,.2,1) both; }

.leegvak .pict { width: 34px; height: 34px; color: var(--leeg-pict); }
.leegvak h1, .leegvak h2, .leegvak h3 { font-size: 21px; font-weight: 500; }

/* ── bij het wisselen van blad: niets dat opvalt ──────────────────────────
   Tot 0.123.0 schoven de kaarten hier vanuit onzichtbaar binnen (.werk.intro).
   Dat is eruit: het werkvlak wordt niet meer leeggemaakt tijdens het ophalen,
   het nieuwe scherm vervangt het oude in één tekenbeurt, en een kaart die
   daarna eerst nog doorzichtig is, is een knipper. Alleen het venster (hierboven)
   komt nog zachtjes naar voren: dat opent de gebruiker zelf. */
@keyframes verfijn-op { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── laden: een dun lijntje onder de balk, alleen als het langer duurt ────
   naar() zet body.laadt pas na 350 ms (suite.js). Een scherm dat snel komt,
   laat dus niets zien; een traag antwoord (Google, Drive) laat het oude scherm
   staan met dit lijntje eronder, in plaats van een leeg vlak. */
body.laadt .balk::after {
  content: ""; position: absolute; left: -30%; bottom: -1px; width: 30%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--terra), transparent);
  animation: laadlijn 1.1s linear infinite;
}
@keyframes laadlijn { from { left: -30%; } to { left: 100%; } }

@media (max-width: 760px) {
  /* Vijf tellers naast elkaar duwden de pagina op 375 breed 62px zijwaarts (gemeten
     op Personeel, al voor deze laag); twee per rij past. */
  .tellers { flex-wrap: wrap; row-gap: 12px; }
  .tellers > div { flex: 1 1 42%; }
  .tellers > div + div { border-left: 0; }
  .oogopslag.naast { flex-direction: column; align-items: stretch; gap: 10px; }
  /* Het dagrooster: naamkolom smaller en elk tweede uurmerk weg, anders staken de
     uurmerken 60px buiten een telefoonscherm. De drie getallen (naam 88, merken en
     nu-lijn 100) horen bij elkaar, net als 156/168 hierboven. */
  .roosterrij .wie { width: 88px; }
  .roosteruren { margin-left: 100px; }
  .nuvlak { left: 100px; }
  .roosteruren span { min-width: 0; }
  .roosteruren span:nth-child(even) { visibility: hidden; }
  /* Rijen die op een bureaublad naast elkaar staan, gaan op een telefoon onder
     elkaar. Elk van deze vier duwde de pagina zijwaarts, gemeten op 375 breed:
     auditbalk (Kwaliteit, 137px), kopknoppen (Dossier, 34px), werkstroom
     (Backoffice, 396px) en voetstrook (Personeel, 10px). */
  .audit { flex-direction: column; align-items: stretch; gap: 8px; }
  .auditlijn { min-height: 44px; }
  .lbnieuw { flex-wrap: wrap; }
  .lbnieuw input[type=text] { min-width: 0; flex-basis: 100%; }
  .kopknoppen { margin-left: 0; flex-wrap: wrap; flex: 1 1 100%; gap: 10px 16px; }
  .voortgang { flex-direction: column; align-items: stretch; }
  .ring-uit { align-self: center; }
  .fasen { min-width: 0; }
  .fase .naam { width: auto; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fase .baan { flex: 0 0 34%; }
  .stroom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .stroom .pijlje { display: none; }
  .voetstrook { flex-direction: column; gap: 12px; }
  .voetstrook > div { padding: 0 6px; }
  .voetstrook > div + div { border-left: 0; }
  .werk { padding: 18px 14px 40px; }
  .paginakop h1 { font-size: 30px; }
  .kaart { padding: 18px 16px; border-radius: var(--rond-klein); }
  .zij-item.actief::before { left: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .vensterlaag .venster { animation: none !important; }
  body.laadt .balk::after { animation: none !important; left: 0; width: 100%; }
}

/* ── Rooster- en urenapp (A-ROOSTER-01, rooster.js) ──────────────────────────
   Eigen vorm, niet van de site: dienstregels die op een telefoon onder elkaar
   passen, en een berichtendraad. */
.dienstrij { display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--lijn-zacht); }
.dienstrij:last-child { border-bottom: 0; }
.dienstdag { width: 52px; flex: none; text-align: center; line-height: 1.2; }
.dienstdag b { display: block; text-transform: uppercase; font-size: 12px; color: var(--groen); }
.dienstdag span { font-size: 13px; color: var(--inkt-zacht); }
.dienstwat { flex: 1 1 auto; min-width: 0; }
.dienstwat .sub { display: block; }
.dienstknop { flex: none; }
.draad { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.bericht { max-width: 85%; padding: 8px 12px; border-radius: var(--rond-klein); background: var(--vlak-warm);
  border: 1px solid var(--lijn-zacht); }
.bericht .tekst { white-space: pre-wrap; }
.bericht.eigen { align-self: flex-end; background: var(--groen-vlak); }
.bericht .sub { display: block; font-size: 12px; color: var(--inkt-zacht); white-space: normal; }
.breedveld { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.breed { overflow-x: auto; }
.tussenkop { font-family: var(--kop); font-size: 18px; margin: 22px 0 10px; }
.maandraster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.maandraster .mdag { min-height: 74px; padding: 4px; border: 1px solid var(--lijn-zacht);
  border-radius: var(--rond-knop); background: var(--vlak); font-size: 12px; overflow: hidden; }
.maandraster .mdag.anders { opacity: .45; }
.maandraster .mdag.vandaag { border-color: var(--groen); }
.maandraster .mkop { font-weight: 600; text-align: center; font-size: 12px; color: var(--inkt-zacht); }
.maandraster .mdienst { display: block; margin-top: 2px; padding: 1px 4px; border-radius: 4px;
  background: var(--groen-vlak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maandraster .mdienst.open { background: var(--terra-vlak); }
.afwijking { background: var(--terra-vlak); }
@media (max-width: 720px) {
  .dienstrij { flex-wrap: wrap; }
  .dienstknop { width: 100%; padding-left: 64px; }
  .maandraster .mdag { min-height: 54px; font-size: 11px; }
  .maandraster .mdienst { padding: 0 2px; }
}

/* ── Eigen vorm, niet van de site: inklapbare menugroep (O-007 punt 3, besluit Bob
   2026-10-04). Elke zijmenugroep klapt in; de kop blijft dezelfde
   letter als elke andere zijkop, met het aantal en een pijltje erbij. */
details.zij-klap > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
details.zij-klap > summary::-webkit-details-marker { display: none; }
details.zij-klap > summary::before { content: "\25B8"; font-size: 10px; transition: transform .15s; }
details.zij-klap[open] > summary::before { transform: rotate(90deg); }
.zij-aantal { margin-left: auto; font-size: 10px; letter-spacing: 0; color: var(--zij-kop); }
details.zij-klap > summary:hover { color: var(--inkt); }

/* Het besparingsblad (besparing.js, A-BESPAAR-01). */
.besp-rij { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin: 8px 0; }
.besp-rij label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.besp-min { width: 88px; text-align: right; }
.besp-tabel td:first-child { width: 100%; }
.besp-tussen { margin: 16px 0 6px; font-size: 14px; }
.besp-venster { background: rgba(201, 118, 50, .10); }
.besp-detail { margin: 6px 0; }
.besp-detail > summary { cursor: pointer; font-size: 13px; }

/* Tabel die op een telefoon stapelt (klasse "stapelt", stapelKoppen in suite.js):
   elke rij een blokje, elke cel met zijn kolomnaam erboven. Een tabel van vijf
   kolommen op 390px breed gaf een woord of een halve lettergreep per regel. */
@media (max-width: 600px) {
  table.stapelt, table.stapelt tbody, table.stapelt tr, table.stapelt td { display: block; width: auto; }
  /* stijl.css geeft de kwaliteitslijsten min-width 700px (met een id-selector); gestapeld hoeft dat niet. */
  table.stapelt { min-width: 0 !important; overflow: visible !important; }
  table.stapelt colgroup, table.stapelt thead, table.stapelt tr:has(> th) { display: none; }
  table.stapelt tr { padding: 10px 0; border-top: 1px solid var(--lijn); }
  table.stapelt tr:first-child, table.stapelt tbody tr:first-child { border-top: 0; }
  table.stapelt td, table.lijst.raster.stapelt td { border: 0; padding: 3px 0; white-space: normal; }
  table.stapelt td[data-kop]:not(:first-child)::before {
    content: attr(data-kop); display: block; font-size: 10.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--inkt-zacht); }
  table.stapelt td:empty { display: none; }
}


@media (max-width: 600px) {
  /* A-WENS-DOSSIER-03 (rij 212, wens Bob 11-10): het daglogboek tussendoor op de telefoon. Gemeten op 375 px: knoppen
     22-24 px hoog en een vinkje van 13 px. Hier minstens 40 px, het invoerveld over de hele breedte. */
  .lbtabel .knop-kaal, .lbnieuw button, .lbnieuw select, .dagbalk button { min-height: 40px; padding: 8px 12px; }
  .lbtabel input[type="checkbox"] { width: 24px; height: 24px; margin: 8px; }
  .lbnieuw { display: flex; flex-wrap: wrap; gap: 8px; }
  .lbnieuw input[type="text"] { flex: 1 1 100%; min-height: 40px; font-size: 16px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Afwerking (A-SOEPEL-03, 0.125.0, Bob: "echt high-end, alsof het heel duur
   is geweest"). Eén curve en twee maten voor ALLE beweging, zodat niets
   sneller of trager aanvoelt dan de rest. Schermen vloeien over, menu's komen
   op, knoppen geven mee. Alles hieronder is laag over de regels erboven;
   wie het weghaalt, houdt een werkende maar hardere app over.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --ease: cubic-bezier(.2, .8, .2, 1);   /* snel vertrekken, zacht landen */
  --snel: .16s;                          /* aanraken: hover, druk, focus */
  --vlot: .22s;                          /* verschijnen: menu, venster, scherm */
}

/* ── schermwissel: het oude beeld vervaagt in het nieuwe ─────────────────
   naar() in suite.js zet het nieuwe scherm binnen een View Transition. Alleen
   het werkvlak krijgt een eigen laag; balk en zijmenu blijven staan (root
   zonder animatie), anders knipperde de hele pagina mee. */
#werk { view-transition-name: werk; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(werk) { animation-duration: .18s; animation-timing-function: var(--ease); }
::view-transition-old(werk) { animation: .14s var(--ease) both vt-weg; }
::view-transition-new(werk) { animation: .2s var(--ease) both vt-op; }
@keyframes vt-weg { to { opacity: 0; } }
@keyframes vt-op { from { opacity: 0; transform: translateY(5px); } }

/* ── menu's en panelen komen op uit hun knop ─────────────────────────────
   Een menu dat er ineens staat, voelt als een fout; een menu dat opkomt,
   als een antwoord. Dicht gaat meteen: dan wil je door. */
@keyframes paneel-op { from { opacity: 0; transform: translateY(-5px) scale(.985); } }
.wisselmenu:not([hidden]) { animation: paneel-op var(--vlot) var(--ease) both; transform-origin: top left; }
.belpaneel:not([hidden]), .orgpaneel:not([hidden]), .zoekuitslag:not([hidden]) {
  animation: paneel-op var(--vlot) var(--ease) both; transform-origin: top right;
}
.wisselitem, .zoekrij, .belrij { transition: background var(--snel) var(--ease), transform var(--snel) var(--ease); }
.wisselitem:active { transform: scale(.985); }

/* ── venster: de sluier komt op met het venster mee ─────────────────────── */
@keyframes sluier-op { from { opacity: 0; } }
.vensterlaag:not([hidden]) { animation: sluier-op var(--vlot) var(--ease) both; }

/* ── knoppen en menuregels geven mee onder de vinger ────────────────────── */
.knop-vol, .knop-rand, .knop-kaal, .zij-item, .wisselknop, .gebruiker, .bel, #verversnu {
  transition: background var(--snel) var(--ease), color var(--snel) var(--ease),
              border-color var(--snel) var(--ease), box-shadow var(--snel) var(--ease),
              transform var(--snel) var(--ease), gap var(--snel) var(--ease);
}
.knop-vol:active { transform: translateY(0) scale(.98); box-shadow: none; }
.knop-rand:active, .zij-item:active, .wisselknop:active, .gebruiker:active, .bel:active { transform: scale(.985); }
.zij-item .pict { transition: color var(--snel) var(--ease), transform var(--snel) var(--ease); }
.zij-item:hover .pict { transform: translateX(1px); }
.kaart { transition: box-shadow var(--vlot) var(--ease), border-color var(--vlot) var(--ease); }
table.lijst tbody tr, table.lijst td { transition: background var(--snel) var(--ease); }
details.zij-klap > summary::before { transition: transform var(--vlot) var(--ease); }

/* ── bovenbalk: de stand als rustige tekst, niet als formulier ───────────── */
#ververskeuze {
  border: 0; background: transparent; color: var(--inkt-zacht); font: inherit; font-size: 12.5px;
  padding: 0 2px; cursor: pointer; border-radius: var(--rond-knop); transition: color var(--snel) var(--ease), background var(--snel) var(--ease);
}
#ververskeuze:hover { color: var(--inkt); background: var(--zij-hover); }
#verversnu { border-color: transparent; background: transparent; }
#verversnu:hover { background: var(--zij-hover); border-color: transparent; }
#verversstand { transition: color var(--vlot) var(--ease); }

/* ── invoer: focus komt zacht aan ───────────────────────────────────────── */
:where(.werk, .venster) :where(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  transition: border-color var(--snel) var(--ease), box-shadow var(--snel) var(--ease), background var(--snel) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .wisselmenu, .belpaneel, .orgpaneel, .zoekuitslag, .vensterlaag { animation: none !important; }
}

/* Agenda-abonnement in een klik (A-ROOSTER-04): knoppen naast elkaar, op een telefoon onder elkaar. */
#vlug { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 12px); opacity: 0;
  background: var(--inkt); color: var(--creme); padding: 9px 16px; border-radius: 10px; font-size: 13.5px;   /* O-043 stap 4: wit op de lichte nachtinkt was 1,2:1 */
  pointer-events: none; transition: opacity .18s, transform .18s; z-index: 60; max-width: 90vw; }
#vlug.aan { opacity: 1; transform: translate(-50%, 0); }
.conceptrij td { background: var(--terra-vlak); }
.keurknoppen button { min-width: 34px; }
.patroonraster td select { width: 100%; min-width: 92px; }
.agendaknoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.agendaknoppen a { text-decoration: none; }
/* Bladerknoppen in de paginakop (Rooster, Urenregistratie): naast elkaar, niet gestapeld.
   De knoppen zijn zelf flex-dozen en stapelden in een gewone span onder elkaar. */
.kopknoppen .nw { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ══ nachtversie ═══════════════════════════════════════════════════════════
   Bob 2026-10-09: "dag en nacht versies mogen erin verwerkt worden". De dagversie
   is en blijft de huisstijl van de site. De nachtversie is hetzelfde huis bij
   lamplicht: donker warm bruin in plaats van creme, het olijfgroen en de
   terracotta een slag lichter zodat ze op donker leesbaar blijven, en de
   knoppen houden hun eigen diepe groen (--groen-knop) zodat witte tekst erop
   leesbaar blijft. Alleen tokens worden hier omgezet; geen enkele selector
   krijgt een tweede opmaak, anders lopen dag en nacht gegarandeerd uit de pas.
   De stand staat als data-thema op <html>; thema.js zet hem voor het eerste
   stijlblad laadt (geen flits) en volgt bij 'systeem' de instelling van de Mac
   of telefoon. */
:root { color-scheme: light; }
:root[data-thema="nacht"] {
  color-scheme: dark;
  --vlak-warm:  #3A2D23;
  --band:       var(--ga-dark-2);
  --groen-vlak: #45362B;
  --zand:       #4A3B2F;
  --lijn:       #4A3A2E;
  --lijn-zacht: #3B2E25;
  --terra-vlak: #4A3022;
  --rood-vlak:  #4A2825;
  --warm-blok:  #553624;
  --rij-hover:  #3A2D24;
  --zij-hover:  rgba(246,241,232,.06);
  --zij-a:      #261C16;
  --zij-b:      #211913;
  --zij-kop:    #B5A28E;
  --kolomkop:   #B5A28E;   /* O-043 stap 4: 4,4:1 op kop-vlak, nu 4,6:1 of meer */
  --kop-vlak:   #3A2D23;
  --glas:       rgba(43,32,25,.84);
  --schuif:     #55443A;
  --schuif-hover: #6E5A4B;
  --rand-hover: #6A5646;
  --knop-rand-hover: #3D3027;
  --leeg-pict:  #7A6655;
  --onbekend:   #6E5E50;
  --sluier:     rgba(0,0,0,.58);
  --kan-rand:   #4A5A3F;
  --liever-rand: #6A4630;
  --kanniet-rand: #6A3530;
  --telling-vlak: rgba(246,241,232,.07);
  --groen-knop: var(--ga-terracotta-ink);
  --groen-knop-licht: var(--ga-terracotta-ink);
  --ok-vlak:     #2E3A28;
  --schaduw: 0 1px 2px rgba(0,0,0,.3), 0 12px 28px -20px rgba(0,0,0,.6);
  --schaduw-hoog: 0 1px 2px rgba(0,0,0,.3), 0 18px 40px -28px rgba(0,0,0,.75);
  --ring: 0 0 0 3px rgba(224,166,127,.25);
}
/* Wat geen token is en in de nacht toch anders moet: de warme gloed bovenaan
   de pagina (op donker wordt hij vuil), de kaartrand bij zweven, de selectie. */
:root[data-thema="nacht"] body {
  background:
    radial-gradient(1100px 520px at 100% -8%, rgba(224,149,90,.07), transparent 62%),
    radial-gradient(900px 480px at -8% -4%, rgba(164,186,110,.05), transparent 60%),
    var(--creme);
}
:root[data-thema="nacht"] .sb {
  /* O-043 stap 4 (WCAG 1.4.3): het planbord had alleen dagkleuren - in de nacht stond zijn tekst bijna zwart op donker
     (gemeten 1,1:1). Hier dezelfde rollen met de nachtkleuren van de suite. */
  --sb-lijn: #353022; --sb-tekst: #C9C0AC; --sb-inkt: #EFE8DA; --sb-vlak: #27231A; --sb-rood: #EA8A66;
  --sb-groen-tekst: #A4BA6E; --sb-blauw: #AEB9E6; --sb-groep: #2B2719; --sb-chip: #3A3326;
  --sb-knop: var(--groen-knop);   /* wit op het lichte nachtgroen haalde 2,1:1 */
  --sb-blauw-vlak: #252C4A; --sb-zacht: #A69D89;
}
:root[data-thema="nacht"] .kaart:hover { border-color: rgba(255,255,255,.14); }
:root[data-thema="nacht"] ::selection { background: rgba(224,149,90,.35); }
:root[data-thema="nacht"] .balk { box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 6px 20px -16px rgba(0,0,0,.8); }
:root[data-thema="nacht"] .ontwikkelbalk { background: #4A3C10; color: #FFE9A8; border-bottom-color: #6B5718; }

/* ── de keuze zelf: drie pillen in het organisatiepaneel ─────────────────── */
.themakeuze { display: flex; gap: 6px; padding: 4px 10px 8px; }
.themakeuze button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 8px; border-radius: var(--rond-klein); border: 1px solid var(--lijn);
  background: var(--vlak); font-size: 13px; font-weight: 600; color: var(--inkt-zacht);
  transition: background var(--snel) var(--ease), color var(--snel) var(--ease), border-color var(--snel) var(--ease);
}
.themakeuze button:hover { border-color: var(--rand-hover); color: var(--inkt); }
.themakeuze button[aria-pressed="true"] { background: var(--groen-vlak); border-color: var(--groen); color: var(--groen-diep); }
.themakeuze .pict { width: 15px; height: 15px; }

/* ── zoeken in de inhoud (A-ZOEK-01) ──────────────────────────────────────── */
/* Onder de schermen staan de treffers uit documenten, eisen, beleid en wetteksten.
   Een kopregel scheidt de twee; het fragment toont waar het woord staat. */
.zoekkop {
  margin: 6px 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--inkt-zacht);
}
.zoekfragment { display: block; font-size: 12.5px; color: var(--inkt); margin-top: 2px; line-height: 1.4; }
.zoekfragment mark, .zoeknaam mark { background: var(--terra-vlak); color: inherit; border-radius: 3px; padding: 0 1px; }
.zoeksoort {
  display: inline-block; font-size: 11px; font-weight: 600; color: var(--groen);
  border: 1px solid var(--lijn); border-radius: 999px; padding: 0 7px; margin-right: 6px; vertical-align: 1px;
}
.zoekwacht { margin: 4px 10px; font-size: 12px; color: var(--inkt-zacht); }
/* Het aangewezen stuk op het blad waar een treffer naartoe wees: even oplichten. */
.zoekmerk { animation: zoekmerk 2.4s ease-out 1; border-radius: var(--rond-knop); }
@keyframes zoekmerk {
  0% { background: rgba(164,82,42,.3); box-shadow: 0 0 0 4px rgba(164,82,42,.3); }
  100% { background: transparent; box-shadow: 0 0 0 0 rgba(164,82,42,0); }
}


/* ══ Planbord: Rooster en Urenregistratie zoals Shiftbase (A-ROOSTER-06) ══════════
   Maten en kleuren uit app/SHIFTBASE-SCHERMEN.md. De omlijsting (knoppen) volgt de huisstijl;
   raster, blokken en vensters volgen Shiftbase. */
.sb { --sb-lijn: #E7E5DA; --sb-tekst: #454035; --sb-inkt: #14130F; --sb-vlak: #F4F3EC; --sb-rood: #CB2420;
      --sb-groen: #06C270; --sb-groen-tekst: #0B7A48; --sb-blauw: #122EED; --sb-knop: var(--groen); --sb-groep: #E6E3D8; --sb-chip: #EDEBE2;
      --sb-blauw-vol: #122EED; --sb-rood-vol: #CB2420; --sb-blauw-vlak: #EEF1FC; --sb-zacht: #8A8578;
      display: flex; gap: 10px; color: var(--sb-tekst); font-size: 14px; }
.sb-werk { flex: 1 1 auto; min-width: 0; }
.sb-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.sb-topblok { display: flex; align-items: center; gap: 4px; background: var(--vlak, #fff); border-radius: var(--rond-klein); padding: 5px 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sb-ik, .sb-tekst, .sb-periode { border: 0; background: none; color: var(--sb-tekst); font: inherit; cursor: pointer; border-radius: var(--rond-klein);
  padding: 7px 10px; min-width: 34px; display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.sb-ik svg, .sb-mini svg, .sb-mi svg, .sb-knop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sb-ik:hover, .sb-tekst:hover, .sb-periode:hover, .sb-knop:hover { background: var(--sb-vlak); }
.sb-periode { font-weight: 600; } .sb-chev { font-size: 11px; opacity: .7; margin-top: -4px; }
/* PRAKTIJK-07 D-78 (PG-005): de weekpijlen waren een dun teken van 14 px zonder rand - bijna onzichtbaar. Nu een
   omrande knop met een groter, vet teken in de inktkleur (zelfde rand als .sb-knop). */
.sb-ik.sb-pijl { border: 1px solid var(--sb-lijn); background: var(--vlak, #fff); color: var(--sb-inkt);
                 font-size: 20px; font-weight: 700; line-height: 1; padding: 4px 10px; }
.sb-plus { background: var(--sb-knop); color: #fff; border: 0; border-radius: var(--rond-klein); width: 34px; height: 34px; font-size: 22px; cursor: pointer; line-height: 1; }
.sb-plus.klein { width: 28px; height: 28px; font-size: 18px; }
.sb-schakel { display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; cursor: pointer; }
.sb-schakel input { display: none; } .sb-schakel span { width: 30px; height: 16px; border-radius: var(--rond-klein); background: #cfcbbd; position: relative; }
.sb-schakel span::after { content: ''; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .15s; }
.sb-schakel input:checked + span { background: var(--sb-knop); } .sb-schakel input:checked + span::after { left: 16px; }
.sb-vel { background: var(--vlak, #fff); border-radius: var(--rond-klein); box-shadow: 0 1px 2px rgba(0,0,0,.05); overflow: hidden; }
.sb-regel2 { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--sb-lijn); flex-wrap: wrap; }
.sb-titel { font-weight: 600; color: var(--sb-inkt); margin: 0; font-size: inherit; font-family: inherit; line-height: inherit; }   /* h1 van het planbord (WCAG 1.3.1), oogt als de tekst die het was */ .sb-vul { flex: 1 1 auto; }
.sb-knop { border: 1px solid var(--sb-lijn); background: var(--vlak, #fff); color: var(--sb-inkt); border-radius: var(--rond-klein); padding: 6px 10px;
  font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sb-knop.aan { background: var(--sb-blauw-vlak); color: #444E99; }
.sb-pub { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.sb-scroll { overflow: auto; }
.sb-onder { display: flex; gap: 22px; padding: 10px 14px; border-top: 1px solid var(--sb-lijn); font-size: 13.5px; align-items: center; }
.sb-onder span { display: inline-flex; align-items: center; gap: 6px; }
.sb-stip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sb-groen); }
.sb-stip.rood { background: var(--sb-rood); } .sb-stip.grijs { background: #cfcbbd; }

/* het raster */
.sb-grid { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; }
.sb-grid th { text-transform: none; letter-spacing: 0; font-size: 12px; }
.sb-grid th, .sb-grid td { border-right: 1px solid var(--sb-lijn); border-bottom: 1px solid var(--sb-lijn); vertical-align: top; text-align: left; }
.sb-grid th.sb-hoek, .sb-grid td.sb-naam { width: 190px; min-width: 150px; position: sticky; left: 0; background: var(--vlak, #fff); z-index: 2; }
.sb-grid.maand { width: auto; min-width: 100%; table-layout: auto; }
.sb-grid.maand th.sb-hoek, .sb-grid.maand td.sb-naam { width: 150px; min-width: 150px; }
.sb-grid.maand th.sb-kop, .sb-grid.maand td.sb-cel { min-width: 96px; max-width: 96px; width: 96px; } .sb-grid.maand.compact th.sb-kop, .sb-grid.maand.compact td.sb-cel { min-width: 66px; max-width: 66px; width: 66px; }
.sb-grid.maand .sb-som td { white-space: nowrap; font-size: 12px; padding: 9px 6px; }
.sb-grid.maand th.sb-tot, .sb-grid.maand td.sb-tot { min-width: 110px; }
.sb-kop { padding: 8px 10px 6px; position: relative; font-weight: 600; }
.sb-dagnaam { display: block; font-size: 12px; color: var(--sb-tekst); } .sb-dagnr { display: block; font-size: 18px; color: var(--sb-inkt); line-height: 1.2; }
.sb-kop .sb-stip { position: absolute; right: 8px; top: 12px; }
.sb-kop.vandaag { border-bottom: 2px solid var(--sb-blauw); } .sb-kop.vandaag .sb-dagnaam, .sb-kop.vandaag .sb-dagnr { color: var(--sb-blauw); }
.sb-tot { background: var(--sb-vlak); text-align: right; } .sb-grid thead .sb-tot { background: var(--vlak, #fff); text-align: left; }
/* Alleen het buitenste blok is een chip: afscherm.js zet elk getal in een geneste span, en die
   werd anders ook een chip, wrapte, en maakte elke medewerkersrij 165px hoog (gemeten 2026-10-16). */
.sb-grid tbody .sb-tot > span, .sb-grid tbody .sb-tot > b { display: inline-block; background: var(--sb-chip); border-radius: var(--rond-knop); padding: 4px 8px; font-size: 13px; margin: 8px 8px 0 0; }
.sb-som td { padding: 9px 10px; font-size: 13.5px; height: 36px; } .sb-som td:first-child { font-weight: 600; }
.sb-groep td { background: var(--sb-groep); padding: 0 10px; height: 32px; font-size: 13px; font-weight: 600; position: relative; }
.sb-groepstreep { display: inline-block; width: 4px; height: 18px; background: #E9C13A; border-radius: 2px; vertical-align: middle; margin-right: 8px; }
.sb-groep .sb-ik { position: absolute; right: 4px; top: 0; }
.sb-naam { padding: 10px; font-weight: 600; color: var(--sb-inkt); display: table-cell; }
.sb-naam span { vertical-align: middle; } .sb-naam small { display: block; font-weight: 500; color: var(--sb-tekst); font-size: 12px; }
.sb-avatar { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 600; align-items: center; justify-content: center; margin-right: 8px; vertical-align: middle; }
.sb-cel { padding: 4px 3px 2px; min-height: 40px; height: 40px; position: relative; cursor: default; }
.sb-mw .sb-cel { min-height: 44px; }
.sb-cel .sb-celplus { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 18px; color: var(--sb-tekst); pointer-events: none; }
.sb-cel:hover { background: var(--sb-vlak); cursor: pointer; } .sb-cel:hover .sb-celplus { display: block; }
.sb-cel.sb-doel { outline: 2px dashed var(--sb-blauw); outline-offset: -2px; background: var(--sb-blauw-vlak); }
.sb-cel.vandaag { background: #FBFBF7; }

/* het dienstblok */
.sb-blok { position: relative; display: flex; align-items: center; height: 34px; margin: 0 0 3px; border: 2px solid var(--k); background: var(--kt);
  border-radius: var(--rond-klein); cursor: pointer; padding-right: 4px; overflow: hidden; }
.sb-blok.conflict { background-image: linear-gradient(45deg, rgba(141,128,128,.15) 25%, transparent 25%, transparent 50%, rgba(113,113,113,.15) 50%, rgba(113,113,113,.15) 75%, transparent 75%); background-size: 12px 12px; }
.sb-blok.concept { border-style: dashed; } .sb-blok.open { border-style: dashed; background: transparent; }
.sb-balk { flex: none; width: 6px; height: 26px; border-radius: 3px; background: var(--k); margin: 0 6px 0 2px; }
.sb-bloktekst { flex: 1 1 auto; min-width: 0; line-height: 1.15; }
.sb-bloktekst b { display: block; font-size: 12px; font-weight: 700; color: var(--sb-inkt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-bloktekst small { display: block; font-size: 10px; font-weight: 600; color: var(--sb-tekst); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-blokiconen { flex: none; display: inline-flex; gap: 4px; align-items: center; }
.sb-uitroep { display: inline-flex; width: 16px; height: 16px; border-radius: 50%; background: var(--sb-rood-vol); color: #fff; font-size: 11px; font-weight: 700; align-items: center; justify-content: center; font-style: normal; }
.sb-herhaal { font-style: normal; font-size: 13px; color: var(--sb-tekst); }
.sb-blokacties { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 4px; background: rgba(255,255,255,.82); }
.sb-blok:hover .sb-blokacties { display: flex; } .sb-blok:hover .sb-blokiconen, .sb-blok:hover .sb-bloktekst { opacity: .35; }
.sb-mini { border: 0; background: none; border-radius: var(--rond-knop); padding: 3px 6px; cursor: pointer; color: var(--sb-inkt); font: inherit; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; }
.sb-mini:hover { background: rgba(0,0,0,.07); } .sb-mini.rood { color: var(--sb-rood); } .sb-mini.goed { color: var(--sb-groen-tekst); font-weight: 700; }   /* O-043 stap 4: --sb-groen als tekst 2,3:1 */
.sb-mini.breed { border: 1px solid var(--sb-lijn); font-size: 12px; gap: 4px; }
.sb-afwezig { display: flex; align-items: center; gap: 6px; height: 30px; margin: 2px 0 3px; border-radius: var(--rond-knop); background: var(--sb-rood-vol); color: #fff; font-size: 12px; font-weight: 700; padding: 0 8px; }
.sb-afwezig.verlof, .sb-afwezig.bijzonder, .sb-afwezig.scholing { background: #06C270; } .sb-afwezig.zwangerschap { background: #AE6BF3; }
.sb-afwezig svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2; }
.sb-afwezig span b { display: block; line-height: 1.1; } .sb-afwezig span small { font-size: 10px; font-weight: 600; }
.sb-afwezig.vol { position: absolute; inset: 4px 2px; height: auto; }
/* A-BEHOEFTE-01: wanneer de gezinshuisouders iemand nodig hebben; kleur = dekking door het rooster */
.sb-nodig { display: flex; align-items: center; height: 34px; margin: 0 0 3px; padding: 0 6px; border-radius: var(--rond-klein); border: 2px solid #FF5A5A; background: #FFE8E8; cursor: pointer; overflow: hidden; }
.sb-nodig.deels { border-color: #F2994A; background: #FFF1E3; } .sb-nodig.uitgezet { border-color: #F2994A; border-style: dashed; background: #FFF8EE; }
.sb-nodig.gedekt { border-color: #06C270; background: #E6F8EF; }
.sb-nodig svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; vertical-align: -1px; }
.sb-tl .sb-nodig { margin: 0; height: 36px; }
.sb-nodigrij td.sb-naam { font-weight: 700; color: var(--sb-inkt); }
.sb-template { margin: 6px 8px; cursor: grab; } .sb-blokiconen.altijd { opacity: 1 !important; }
.sb-paneel { flex: none; width: 240px; background: var(--vlak, #fff); border-radius: var(--rond-klein); box-shadow: 0 1px 2px rgba(0,0,0,.05); align-self: flex-start; }
.sb-paneelkop { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 6px 14px; font-weight: 700; }
.sb-paneelkop .aan { border-bottom: 2px solid var(--sb-blauw); padding-bottom: 6px; }
.sb-paneelknoppen { display: flex; padding: 0 8px 6px; }

/* dag: tijdlijn */
.sb-grid.dag th.sb-uur { min-width: 56px; padding: 10px 6px; font-size: 14px; color: var(--sb-inkt); }
.sb-tijdlijn { position: relative; height: 46px; padding: 0; background-image: linear-gradient(90deg, var(--sb-lijn) 1px, transparent 1px); background-size: 4.1667% 100%; }   /* een uur = 1/24; geen deelstreep: de haakjesteller in test_schil leest '/' als regex */
.sb-tl { position: absolute; top: 5px; height: 36px; } .sb-tl .sb-blok { margin: 0; }
.sb-nu { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--sb-blauw); pointer-events: none; }

/* menu's, kalender, slepen */
.sb-menu { position: absolute; z-index: 90; background: var(--vlak, #fff); border-radius: var(--rond-klein); box-shadow: 0 8px 28px rgba(0,0,0,.14); padding: 6px; min-width: 190px; }
.sb-mi { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; text-align: left; font: inherit; padding: 8px 10px; border-radius: var(--rond-klein); cursor: pointer; color: var(--sb-inkt); }
.sb-mi span { margin-left: auto; color: var(--sb-blauw); } .sb-mi:hover { background: var(--sb-vlak); } .sb-mi.aan { background: var(--sb-blauw-vlak); } .sb-mi.rood { color: var(--sb-rood); } .sb-mi[disabled] { opacity: .45; }
.sb-streep { height: 1px; background: var(--sb-lijn); margin: 4px 0; }
.sb-kal { padding: 6px; } .sb-kalkop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sb-kal table { border-collapse: collapse; } .sb-kal th { font-size: 12px; padding: 4px 2px; } .sb-kal td { padding: 1px; } .sb-wk { font-size: 11px; color: #999; padding-right: 8px !important; }
.sb-kd { width: 32px; height: 32px; border: 0; background: none; border-radius: 50%; font: inherit; font-weight: 600; cursor: pointer; }
.sb-kd:hover { background: var(--sb-vlak); } .sb-kd.aan { background: var(--sb-blauw-vlak); color: var(--sb-blauw); } .sb-kd.buiten { color: var(--sb-zacht); }
.sb-dropkeuze { position: absolute; z-index: 95; background: var(--vlak, #fff); border-radius: var(--rond-klein); box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 6px; display: flex; gap: 6px; transform: translate(-50%, 8px); }

/* dienstvenster */
.sb-dagknoppen { display: flex; gap: 6px; margin-top: 6px; }
.sb-dagknop { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--sb-lijn); background: none; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; color: #888; }
.sb-dagknop.aan { background: var(--sb-blauw-vol); color: #fff; border-color: var(--sb-blauw-vol); }
.sb-templatekeuze { display: flex; align-items: center; gap: 8px; } .sb-templatekeuze .sb-balk { margin: 0; } .sb-templatekeuze select { flex: 1 1 auto; }
.sb-hr { border: 0; border-top: 1px solid var(--sb-lijn); margin: 14px 0 10px; }
.sb-totaal { margin: 8px 0 0; color: var(--sb-tekst); } .sb-totaal b { color: var(--sb-inkt); }
.sb-vinklijst { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; } .sb-vinklijst label { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; }
.sb-details { margin-top: 14px; } .sb-details > summary { cursor: pointer; padding: 6px 0; }

/* urenregistratie */
.sb-blauw { background: var(--sb-knop); color: #fff; border: 0; font: inherit; font-weight: 600; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.sb-splits { display: inline-flex; border-radius: var(--rond-klein); overflow: hidden; } .sb-splits .pijl { border-left: 1px solid rgba(255,255,255,.35); padding: 8px 10px; }
.sb-splits.uit .sb-blauw { opacity: .45; cursor: default; }
.sb-ts-tabel { width: 100%; border-collapse: collapse; }
.sb-ts-tabel th { text-align: left; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 10px 8px; border-bottom: 2px solid #D9D5C6; font-size: 14px; }
.sb-ts-tabel td { padding: 6px 8px; border-bottom: 1px solid var(--sb-lijn); vertical-align: middle; font-size: 14px; }
.sb-ts-tabel th.sb-naam, .sb-ts-tabel td.sb-naam { width: 210px; min-width: 190px; position: static; }
.sb-ts-tabel td.sb-naam span { display: inline-block; max-width: 140px; vertical-align: middle; }
.sb-ts-tabel td.dun { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; }
.sb-ts-tabel td { padding-left: 6px; padding-right: 6px; }
.sb-ts-tabel th { white-space: nowrap; }
.sb-ts td.sb-naam { padding-left: 10px; border-left: 4px solid transparent; }
.sb-ts.oranje td.sb-naam { border-left-color: #EA621F; } .sb-ts.groen td.sb-naam { border-left-color: var(--sb-groen); }
.sb-ts.plan td { background: #FAFAF6; color: var(--sb-tekst); font-size: 13.5px; }
.sb-saldo { float: right; font-style: normal; font-size: 12px; color: var(--sb-tekst); font-weight: 500; margin-top: 4px; }
.sb-in { width: 100%; max-width: 96px; border: 1px solid var(--sb-lijn); border-radius: var(--rond-klein); padding: 6px 8px; font: inherit; font-size: 14px; background: var(--vlak, #fff); }
.sb-inmin { display: inline-flex; align-items: center; border: 1px solid var(--sb-lijn); border-radius: var(--rond-klein); padding-right: 6px; max-width: 86px; }
.sb-inmin .sb-in { border: 0; max-width: 60px; } .sb-inmin em { font-style: normal; color: #888; font-size: 13px; }
.sb-details { white-space: nowrap; } .sb-details .sb-uitroep { margin-right: 4px; }
.sb-pil { display: inline-block; border-radius: var(--rond-knop); padding: 2px 8px; font-size: 11.5px; font-weight: 600; margin-right: 4px; background: var(--sb-chip); color: var(--sb-tekst); }
.sb-pil.ingediend { background: #FFEEE7; color: #B5460F; } .sb-pil.goedgekeurd { background: #DCF7EA; color: #0B7A48; } .sb-pil.afgekeurd { background: #FDE2E1; color: var(--sb-rood); }
.sb-pil.blauw { background: #CDEFFB; color: #0B5F8A; } .sb-pil.paars { background: #4C4FE0; color: #fff; } .sb-pil.oranje { background: #FFEEE7; color: #B5460F; }
.sb-tsacties { text-align: right; white-space: nowrap; } .sb-tsacties b { display: inline-block; min-width: 46px; margin-left: 8px; } .sb-tsacties span { display: inline-block; min-width: 46px; text-align: right; color: var(--sb-tekst); }
.sb-tsom td { font-weight: 600; background: var(--vlak, #fff); } .sb-tsom.afd td { background: var(--sb-vlak); }
/* M-014 regel 26: teamkop boven de medewerkers in de weergave Team */
.sb-teamkop td { background: var(--sb-vlak); border-bottom: 1px solid var(--lijn, #ddd); } .sb-teamkop small { display: block; font-weight: 400; }
.sb-grid.uren .sb-vinkrij th { border: 0; padding: 4px 0 0; text-align: center; height: 20px; }
.sb-vink input { width: 15px; height: 15px; margin: 0 8px 0 0; vertical-align: middle; }
.sb-grid.uren th.sb-kop { padding: 8px 10px; font-size: 14px; color: var(--sb-inkt); text-align: center; }
.sb-vandaagpil { display: inline-block; background: #D9D5C6; border-radius: var(--rond-klein); padding: 3px 18px; }
.sb-blok.uren { height: 36px; border-width: 0; border-left-width: 0; } .sb-blok.uren.ingediend { outline: 1.5px dashed var(--k); outline-offset: -1px; }
.sb-blok.uren.afgekeurd { opacity: .5; text-decoration: line-through; } .sb-blok.uren.plan { background: transparent; border: 1.5px dashed var(--sb-lijn); }
.sb-blok.uren.afw { border: 1px solid var(--sb-lijn); }
.sb-grid.uren td.sb-tot b { display: inline-block; margin: 8px 4px 0 0; }
@media print { .zijmenu, .bovenbalk, .sb-top, .sb-onder, .sb-details, .sb-paneel { display: none !important; } .sb-blokacties { display: none !important; } }
@media (max-width: 760px) { .sb-grid th.sb-hoek, .sb-grid td.sb-naam { width: 120px; min-width: 110px; } .sb-paneel { display: none; } .sb-top { gap: 6px; } }

/* ── Mijn werk (A-MIJNWERK-01, 0.140.0) ─────────────────────────────────────
   Telefoon eerst: een kolom, tikvlakken van minstens 48px (WCAG 2.5.5 vraagt 44).
   Voor de rol medewerker (body.alleen-mijn) geen wisselaar, zijmenu of zoekveld,
   maar een balk onderin met de vijf plekken die hij het vaakst nodig heeft. */
.mw { max-width: 680px; margin: 0 auto; }
.mw .kaart { margin-bottom: 14px; }
/* A-WENS-MIJNWERK-07 (wens Bob 2026-10-14): de backoffice werkt aan een bureau - breed, twee
   kolommen vanaf 1000px, en een lege kaart is een regel in plaats van een hele kaart. */
.mw.mw-breed { max-width: none; }
.mw-kolommen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; }
@media (min-width: 1000px) { .mw-kolommen { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); } }
.mw-breed .stroom { flex-wrap: wrap; gap: 10px 0; margin-bottom: 12px; }
.mw-breed .stroom .pijlje { margin: 0 10px; min-width: 12px; }
.mw-leeg { padding: 10px 14px; margin-bottom: 14px; border: 1px dashed var(--lijn); border-radius: var(--rond-klein); }
.mw-regel { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0;
  border-bottom: 1px solid var(--lijn); }
.mw-regel:last-child { border-bottom: 0; }
.mw-regel .sub { display: block; }
.mw-rij { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px;
  min-height: 52px; padding: 10px 12px; margin: 0 0 8px; text-align: left; font: inherit; color: inherit;
  text-decoration: none; background: var(--vlak-warm); border: 1px solid var(--lijn);
  border-radius: var(--rond-klein); cursor: pointer; }
.mw-rij:hover { border-color: var(--rand-hover); }
.mw-rij .sub { display: block; }
.mw-knop { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; margin-top: 10px; padding: 10px 14px; font: inherit; font-weight: 600;
  color: var(--groen-diep); background: var(--groen-vlak); border: 1px solid transparent;
  border-radius: var(--rond-klein); cursor: pointer; }
.mw-knop.vol { color: #fff; background: var(--groen-knop); }
.mw-knop .pict { width: 20px; height: 20px; }
.mw-af { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 600; }
.mw-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.mw-tegel { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 76px;
  padding: 12px; font: inherit; text-align: left; color: inherit; background: var(--vlak-warm);
  border: 1px solid var(--lijn); border-radius: var(--rond-klein); cursor: pointer; }
.mw-tegel b { font-size: 24px; line-height: 1; }
.mw-tegel.midden { background: var(--terra-vlak); border-color: transparent; }
.mw-tegel.hoog { background: var(--rood-vlak); border-color: transparent; }
.mw-tegel.rustig b { color: var(--inkt-zacht); opacity: .6; }
.mw-tegel .pict { width: 22px; height: 22px; }
.mw-form label { display: block; margin-bottom: 12px; font-weight: 600; }
.mw-form input, .mw-form select, .mw-form textarea { display: block; width: 100%; box-sizing: border-box;
  margin-top: 4px; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 16px; font-weight: 400; }
.mw-vinklijst label { display: flex; gap: 10px; align-items: center; min-height: 40px; }
.mw-vinklijst input { width: 20px; height: 20px; flex: none; }

body.alleen-mijn .wisselaar, body.alleen-mijn .zij, body.alleen-mijn .menuknop,
body.alleen-mijn .zoek, body.alleen-mijn .zoekknop, body.alleen-mijn .zijsluier,
body.alleen-mijn .bel, body.alleen-mijn .belpaneel { display: none !important; }
body.alleen-mijn .romp { display: block; }
body.alleen-mijn .werk { padding-bottom: 96px; }
body.alleen-mijn #vlug { bottom: 86px; }
#mijnbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; display: flex;
  background: var(--vlak); border-top: 1px solid var(--lijn);
  padding-bottom: env(safe-area-inset-bottom); }
#mijnbalk button { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 60px; padding: 8px 2px; font: inherit; font-size: 12px; color: var(--inkt-zacht);
  background: none; border: 0; cursor: pointer; }
#mijnbalk button .pict { width: 24px; height: 24px; }
#mijnbalk button.actief { color: var(--groen); font-weight: 700; }
@media (min-width: 1001px) { #mijnbalk { left: 50%; right: auto; transform: translateX(-50%); width: 560px;
  border: 1px solid var(--lijn); border-bottom: 0; border-radius: var(--rond-klein) var(--rond-klein) 0 0; } }

/* Afschermen: persoonsgegevens, cijfers en details (A-WENS-ALGEMEEN-02, wens Bob 2026-10-13,
   afscherm.js). Standaard wazig; het paneel achter het oogje zet body.zicht-pii, .zicht-cijfers
   en .zicht-details, en dat blijft zo tot de gebruiker het uitzet of uitlogt. Print toont niets
   leesbaars: wie print moet de soort bewust aanzetten. Cijfers en details alleen in het werkvlak:
   de bovenbalk en het zijmenu blijven leesbaar. */
body:not(.zicht-pii) .pii,
body:not(.zicht-pii) [data-pii] {
  filter: blur(6px);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
/* Namen op vaste plekken (A-WENS-ALGEMEEN-02, 0.157.0): de klassen die de schermen al voor een
   medewerker- of kindnaam gebruiken, zodat niet elke sjabloonregel apart gemarkeerd hoeft. Wazig
   en niet te selecteren, maar wel klikbaar: een naam opent vaak het dossier. Een nieuwe plek voor
   een naam hoort .wie te gebruiken of afschermHtml(). */
body:not(.zicht-pii) .wie,
body:not(.zicht-pii) .sb-naam > span,
body:not(.zicht-pii) .sb-avatar,
body:not(.zicht-pii) .kindnaam strong,
body:not(.zicht-pii) .naamknop strong,
body:not(.zicht-pii) select.pii-keuze,
body:not(.zicht-pii) .pii-naam {
  filter: blur(5px);
  user-select: none;
  -webkit-user-select: none;
}
/* Cijfers: de vaste cijferklassen van de schermen, cijferHtml() en wat afscherm.js in lopende
   tekst vindt (.ver-cijfer). In het planbord alleen de waarden, niet de rijnamen. Grafieken:
   de as-getallen en de tip; de vorm van de lijn blijft. */
body:not(.zicht-cijfers) :is(#werk, #vensterlaag) :is(.ver-cijfer, .cijfer-v, .getal, .euro, .cijfer,
  .dp-getal, .pct, .telling, .roosteruren, .wruren, .sb-tot > span, .sb-som > td + td, [data-cijfer],
  .grafiek .asmerk, .grafiektip):not(.teller):not(:has(button, .knop-kaal)) {   /* .teller: besluit 79; knoppencel (PG-025 bev. 7) */
  filter: blur(5px);
  user-select: none;
  -webkit-user-select: none;
}
/* Details: de inhoud achter een regel (.sub onder een titel, detailHtml()). De titel, datum en
   status blijven leesbaar, zodat je ziet wat er is zonder wat erin staat. */
body:not(.zicht-details) :is(#werk, #vensterlaag) :is(.sub, .detail, [data-detail]) {
  filter: blur(5px);
  user-select: none;
  -webkit-user-select: none;
}
.oogvak { position: relative; display: inline-flex; }
.oogknop .streep { opacity: 1; }
.oogknop.aan .streep { opacity: 0; }
.oogknop.aan, .oogknop.deels { color: var(--terra-tekst); }
/* Het oogje is er voor elke rol, ook met alleen Mijn werk (dan is de bel verborgen). */
body.alleen-mijn .bel.oogknop { display: inline-block !important; }
/* A-TERUGMELD-01: ook een medewerker meldt wat hij mist; alleen als het huis de knop aan heeft. */
body.alleen-mijn .bel.terugmeld:not([hidden]) { display: inline-block !important; }
body.alleen-mijn .belpaneel.zichtpaneel:not([hidden]) { display: block !important; }
.zichtpaneel { width: 320px; }
.zichtrij { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: var(--rond-klein); cursor: pointer; }
.zichtrij:hover { background: var(--vlak-warm); }
.zichtrij input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--groen); flex: none; }
.zichtrij b { display: block; font-size: 13.5px; font-weight: 600; }
.zichtrij span span { display: block; font-size: 12.5px; color: var(--inkt-zacht); }
.zichtknoppen { display: flex; gap: 8px; padding: 6px 10px 2px; }
.zichtknoppen button { flex: 1; }
/* A-WENS-MIJNWERK-01: kaders van vandaag op het eerste scherm */
.mw-kind { padding: 8px 0 4px; border-bottom: 1px solid var(--lijn); }
.mw-kind:last-child { border-bottom: 0; }
.mw-volgende { margin-top: 8px; }
.mw-kopje { margin: 14px 0 2px; font-size: 0.95rem; color: var(--zachtinkt, inherit); }

/* ── Domeinen en tabbladen (A-MENU-01, O-027, 0.165.0) ───────────────────────
   Acht domeinen bovenin in plaats van de systeemwisselaar; op een smal scherm is de
   wisselaar zelf de domeinkeuze (domein.js vult hem). Tabbladen staan in een eigen rij
   boven het werkvlak (#tabbalk). Alleen bestaande kleurtokens: de nachtstand volgt vanzelf. */
.werkkolom { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.domeinbalk { display: none; }
/* Een eigen rij onderin de bovenbalk: naast versie, zoeken en organisatie passen acht
   knoppen pas vanaf ~1700 px, en een balk die halverwege afbreekt leest als twee menu's. */
body.met-domeinen .balk { flex-wrap: wrap; row-gap: 8px; }
body.met-domeinen .domeinbalk { display: flex; flex-wrap: wrap; gap: 2px; order: 20; flex: 1 0 100%; margin: 0 -11px -4px; }
body.met-domeinen .wisselaar { display: none; }
.domeinknop {
  display: flex; align-items: center; gap: 7px; background: none; border: 0; border-radius: var(--rond-klein);
  padding: 8px 11px; font-size: 14px; color: var(--inkt); white-space: nowrap; cursor: pointer;
}
.domeinknop .pict { width: 16px; height: 16px; flex: none; color: var(--inkt-zacht); }
.domeinknop:hover { background: var(--zij-hover); }
.domeinknop.actief { background: var(--groen-vlak); color: var(--groen-diep); font-weight: 600; }
.domeinknop.actief .pict { color: var(--groen); }
.tabbalk {
  display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 30px 0; border-bottom: 1px solid var(--lijn); scrollbar-width: thin;
}
.tabbalk[hidden] { display: none; }
.tabbalk .tab, .themarij .tab {
  flex: none; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 8px 12px 9px; font-size: 14px; color: var(--inkt-zacht); white-space: nowrap; cursor: pointer;
}
.tabbalk .tab:hover, .themarij .tab:hover { color: var(--inkt); border-bottom-color: var(--lijn); }
.tabbalk .tab.actief, .themarij .tab.actief { color: var(--groen-diep); border-bottom-color: var(--groen); font-weight: 600; }
.tabbalk .telling, .themarij .telling {
  font-size: 11.5px; font-weight: 600; color: var(--inkt-zacht); background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: var(--rond-klein); padding: 0 6px; margin-left: 3px;
}
@media (max-width: 1000px) {
  body.met-domeinen .domeinbalk { display: none; }
  body.met-domeinen .wisselaar { display: block; }
}
/* Thema's binnen de werkvoorraad (A-MENU-03): dezelfde tabs, binnen het werkvlak. */
.themarij { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--lijn); margin: 0 0 18px; }
.themarij .tab .sub { margin-left: 4px; }
@media (max-width: 1000px) { .tabbalk { padding: 10px 16px 0; } }
/* PG-025 bev. 7 (rij 197): op 800 px was de balk van Team 1018 px breed en alleen scrollbaar - de tabs begonnen half en
   je zag niet dat er meer waren. Tot telefoonbreedte lopen ze door naar een tweede regel; daaronder blijft hij scrollen. */
@media (min-width: 481px) and (max-width: 1000px) {
  .tabbalk { flex-wrap: wrap; overflow-x: visible; row-gap: 0; }
}
@media (max-width: 720px) { body.met-domeinen .wisselaar { display: block; flex: 1 1 auto; min-width: 0; } }
@media (max-width: 480px) { .tabbalk { padding: 8px 12px 0; } }

/* ── Overzichtspagina's (A-MENU-02, O-027) ───────────────────────────────────
   Vast patroon: wat moet, kerncijfers, 2/3 + 1/3. Bouwstenen in domeinpagina.js. */
.stip.zacht { background: var(--inkt-zacht); }
.dp-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 18px; }
.dp-tegel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond-klein); padding: 12px 14px;
  font: inherit; color: var(--inkt); min-width: 0;
}
button.dp-tegel { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
button.dp-tegel:hover { border-color: var(--rand-hover); box-shadow: var(--schaduw); }
.dp-getal { font-family: var(--kop); font-size: 28px; line-height: 1.1; }
.dp-getal small { font-size: 15px; color: var(--inkt-zacht); }
.dp-wat { font-weight: 600; }
.dp-onder { font-size: 13px; color: var(--inkt-zacht); }
.dp-tegel.rood { background: var(--rood-vlak); } .dp-tegel.rood .dp-getal { color: var(--rood); }
.dp-tegel.terra { background: var(--terra-vlak); } .dp-tegel.terra .dp-getal { color: var(--warm-tekst); }
.dp-tegel.groen { background: var(--ok-vlak); } .dp-tegel.groen .dp-getal { color: var(--ok); }
.dp-tegel.donker { background: var(--band); border-color: transparent; color: var(--band-tekst); }
.dp-tegel.donker .dp-onder { color: var(--band-tekst); opacity: .8; }
.dp-tegel.roodgetal .dp-getal { color: var(--rood); }
.dp-balk { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--vlak-warm); margin-top: 8px; overflow: hidden; }
.dp-balk i { display: block; height: 100%; background: var(--groen); }
.dp-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin: 0 0 18px;
  background: var(--band); color: var(--band-tekst); border-radius: var(--rond-klein); padding: 18px 20px;
}
.dp-bandlinks { flex: 1 1 260px; min-width: 0; }
.dp-bandrechts { flex: 1 1 340px; min-width: 0; }
.dp-band .dp-klein { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; opacity: .8; }
.dp-band .dp-groot { font-family: var(--kop); font-size: 32px; line-height: 1.1; }
.dp-band .dp-zacht { font-size: 13.5px; opacity: .8; }
.dp-stapel { display: flex; flex-direction: column; gap: 8px; }
.dp-stapelkop { font-size: 13.5px; }
.dp-stapelbalk { display: flex; height: 14px; border-radius: var(--rond-klein); overflow: hidden; background: var(--creme); padding: 2px; gap: 2px; }
.dp-stapelbalk i { display: block; border-radius: var(--rond-knop); min-width: 3px; }
.dp-stapelbalk i.groen { background: var(--ok); } .dp-stapelbalk i.blauw { background: var(--zand); }
.dp-stapelbalk i.terra { background: var(--terra); } .dp-stapelbalk i.rood { background: var(--rood); }
.dp-stapelbalk i.leeg { background: var(--lijn); } .dp-stapelbalk i.zacht { background: var(--inkt-zacht); }
.dp-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.dp-legenda .stip { margin-right: 5px; vertical-align: 0; }
.dp-band .dp-legenda .stip.blauw { background: var(--zand); }
.dp-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dp-hoofd, .dp-zij { min-width: 0; }
.dp-lijst { display: flex; flex-direction: column; }
.dp-regel {
  display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font: inherit; font-size: 14px;
  color: var(--inkt); background: none; border: 0; border-bottom: 1px solid var(--lijn-zacht, var(--lijn)); text-align: left; width: 100%;
}
.dp-regel:last-child { border-bottom: 0; }
button.dp-regel { cursor: pointer; } button.dp-regel:hover span { color: var(--groen-diep); }
.dp-regel b { font-weight: 600; white-space: nowrap; } .dp-regel b.rood { color: var(--rood); } .dp-regel b.terra { color: var(--warm-tekst); }
.dp-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.dp-kaartje {
  display: flex; flex-direction: column; gap: 6px; background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: var(--rond-klein); padding: 12px 14px; text-align: left; font: inherit; color: var(--inkt); min-width: 0;
}
button.dp-kaartje { cursor: pointer; } button.dp-kaartje:hover { border-color: var(--rand-hover); }
.dp-kaartje .pil { align-self: flex-start; }
.dp-kaartje .sub { font-size: 13px; color: var(--inkt-zacht); }
@media (max-width: 1100px) { .dp-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .dp-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dp-getal { font-size: 24px; } }
/* In het smalle zijpaneel staat de ring boven de reeksen in plaats van ernaast. */
.dp-zij .voortgang { flex-direction: column; align-items: stretch; gap: 12px; }
.dp-zij .ring-uit { align-self: center; }
.dp-zij .fase .naam { width: auto; flex: 1 1 auto; min-width: 0; }
.dp-zij .fase .baan { flex: 0 0 22%; }
.dp-tegels.klein { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.dp-tegels.klein .dp-tegel { padding: 9px 12px; }
.dp-tegels.klein .dp-getal { font-size: 22px; }
.dp-tegels.klein .dp-wat { font-weight: 500; font-size: 13.5px; }
.dp-tussenkop { margin: 14px 0 6px; font-weight: 600; font-size: 14px; }
.dp-dagen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.dp-dag { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--lijn); border-radius: var(--rond-klein); background: var(--vlak); min-width: 0; }
.dp-dag.vandaag { border-color: var(--groen); background: var(--groen-vlak); }
.dp-dag.tekort { background: var(--rood-vlak); } .dp-dag.tekort .dp-getal { color: var(--rood); }
.dp-dagnaam { font-size: 12.5px; color: var(--inkt-zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-dag .dp-getal { font-size: 24px; }
@media (max-width: 720px) { .dp-dagen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dp-drie { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: start; }
.dp-drie > .kaart { margin-bottom: 0; } .dp-drie { margin-bottom: 16px; }
/* Het overzicht van Administratie staat binnen een blad van Kwaliteit (.kws): eigen witruimte. */
.kws .adm-overzicht { margin-bottom: 26px; }
.kws .adm-overzicht .dp-regel { font-size: 14px; }
/* .kws button maakt van elke knop een groene pil; in dit overzicht gelden de vormen van de suite. */
.kws .adm-overzicht button.dp-tegel {
  border: 1px solid var(--lijn); border-radius: var(--rond-klein); padding: 12px 14px; font-size: inherit;
  font-weight: inherit; color: var(--inkt); background: var(--vlak);
}
.kws .adm-overzicht button.dp-tegel.terra { background: var(--terra-vlak); }
.kws .adm-overzicht button.dp-tegel.rood { background: var(--rood-vlak); }
.kws .adm-overzicht button.dp-regel {
  border: 0; border-bottom: 1px solid var(--lijn-zacht); border-radius: 0; padding: 7px 0;
  font-weight: inherit; color: var(--inkt); background: none;
}
.kws .adm-overzicht button.dp-regel:last-child { border-bottom: 0; }
.kws .adm-overzicht .dp-getal { font-size: 24px; }
/* Rol medewerker: geen domeinbalk (zijn balk staat onderin), wel de tabs boven het werkvlak. */
body.alleen-mijn .domeinbalk { display: none !important; }
body.alleen-mijn .tabbalk { padding: 8px 12px 0; background: var(--creme); }

/* B-015 R1: de vaste waarschuwing bij kindvelden - eigen opmaak, niet van de site */
.waarschuw-kind { color: var(--terra-tekst); font-size: .85em; margin: .25rem 0 0; }

/* PRAKTIJK-07 D-74 (PG-004): Mijn uren op de telefoon. Zes kolommen passen niet in een kaart van ~313 px; onder
   520 px wordt elke regel een blok - datum en uren boven, dan de gewerkte tijd, stand en bron, de notitie eronder. */
@media (max-width: 520px) {
  table.urenlijst, table.urenlijst tbody { display: block; }
  table.urenlijst tr:first-child { display: none; }
  table.urenlijst tr { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 8px 0;
                       border-top: 1px solid var(--lijn-zacht); }
  table.urenlijst td { display: block; padding: 2px 0; border-top: 0; white-space: normal; text-align: left; }
  table.urenlijst td:nth-child(1) { grid-column: 1; grid-row: 1; }
  table.urenlijst td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
  table.urenlijst td:nth-child(2) { grid-column: 1 / -1; }
  table.urenlijst td:nth-child(4) { grid-column: 1; }
  table.urenlijst td:nth-child(5) { grid-column: 2; text-align: right; }
  table.urenlijst td:nth-child(6) { grid-column: 1 / -1; }
}

/* ── Startwizard (A-AANSLUIT-05b): stappenbalk, knoppen en de documentenlijst van stap 4. ── */
.swstappen { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 16px; }
.swstappen li { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--lijn);
  color: var(--inkt-zacht); }
.swstappen li.af { background: var(--groen-vlak); color: var(--groen-diep); border-color: transparent; }
.swstappen li.nu { background: var(--groen-knop); color: #fff; border-color: transparent; }
.swkaart { max-width: 640px; }
.swkaart label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--inkt-zacht); }
.swkaart label input:not([type=checkbox]), .swkaart label select { display: block; width: 100%; margin-top: 4px; }
.swkaart label small { display: block; margin-top: 4px; }
.swknoppen { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.swdocs { max-height: 50vh; overflow-y: auto; border: 1px solid var(--lijn); border-radius: var(--rond-klein); padding: 8px 12px; }
.swkaart label.swvink { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; color: var(--inkt); }
.swlijst { padding-left: 18px; }
.swlijst li { margin-bottom: 6px; }
.swbestand { display: inline-flex; cursor: pointer; }
.swvoorstel { background: var(--groen-vlak); border-radius: var(--rond-klein); padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }

/* Rij 214 (#35 deel C, lijst.js): een gedeelde lijstfunctie - filter ▾ in de kolomkop, telling per stand, Export (CSV). */
table[data-lijst] tr[hidden] { display: none !important; }
th[data-lijst-kop] { position: relative; white-space: nowrap; }
.lijstbalk { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.lijsttel { border: 1px solid var(--lijn); background: var(--vlak); color: var(--inkt); border-radius: 999px;
  padding: 2px 10px; font: inherit; font-size: .85em; cursor: pointer; }
.lijsttel.aan { background: var(--groen-vlak); border-color: var(--groen); color: var(--groen-diep); font-weight: 600; }
.lijstzicht { font-size: .85em; }
.lijstexport { margin-left: auto; }
/* button.lijstpijl en de .kws-variant: Kwaliteit (stijl.css, .kws button) geeft elke knop een rand en een vulling. */
button.lijstpijl, .kws button.lijstpijl { border: 0; background: transparent; color: inherit; cursor: pointer;
  padding: 0 2px; margin: 0 0 0 2px; min-width: 0; height: auto; border-radius: 0; box-shadow: none;
  font: inherit; line-height: 1; opacity: .45; }
button.lijstpijl.aan, .kws button.lijstpijl.aan { opacity: 1; color: var(--warm-tekst); }
.lijstmenu { position: absolute; z-index: 30; top: 100%; left: 0; display: flex; flex-direction: column; min-width: 12em;
  max-height: 18em; overflow: auto; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond-klein);
  box-shadow: 0 6px 18px rgba(29,25,16,.12); padding: 4px 0; text-transform: none; letter-spacing: normal; }
.lijstmenu button, .kws .lijstmenu button { border: 0; border-radius: 0; box-shadow: none; min-width: 0; background: transparent; color: var(--inkt); text-align: left; padding: 5px 12px;
  font: inherit; font-weight: normal; cursor: pointer; }
.lijstmenu button:hover { background: var(--rij-hover); }

/* Kerncijfers in de oogopslag-strook: gelijke kolommen, nooit een eenzaam cijfer op een eigen rij
   (4 cijfers werden 3+1). Past het niet naast elkaar, dan twee per rij. (Bob, 2026-10-21) */
.oogopslag .tellers { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); row-gap: 14px; }
.oogopslag .tellers > div { flex: none; min-width: 0; }
@media (max-width: 720px) { .oogopslag .tellers > div { border-left: 0; } }

/* PG-026 bev. 1 en 4 (teken.js): een rol zonder account in Versturen, en het stuk lezen in een venster. De tabellen in
   het stuk krijgen table.lijst; hier alleen wat de afdruk eigen heeft (AFDRUK_STIJL in systemen/teken.py). */
.teken-geen-account { border-left: 3px solid var(--terra); padding: 2px 0 2px 12px; margin: 0 0 14px; }
.teken-geen-account p { margin: 0 0 8px; }
.teken-lezen { max-height: 60vh; overflow: auto; margin: 0 0 12px; }
.teken-lezen .md { white-space: pre-wrap; }
.teken-lezen .bewijs { font-family: ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-all; }
.teken-lees-blok { margin: 0 0 12px; }
.teken-lees-blok summary { cursor: pointer; font-weight: 600; }