/* ============================================================================
   SVS HRM — componenten
   Elke component kent: rust, hover, actief, focus, uitgeschakeld, bezig en
   waar van toepassing fout. Randen dragen de scheiding, schaduw is zeldzaam.
   ========================================================================= */

/* ---------------------------------------------------------------- app shell */
.schil {
  display: grid;
  grid-template-columns: var(--zijbalk) minmax(0, 1fr);
  min-height: 100dvh;
  transition: grid-template-columns var(--duur-traag) var(--soepel);
}
.schil.smal { grid-template-columns: var(--zijbalk-smal) minmax(0, 1fr); }

/* Wit met een randlijn, zoals de zijbalk van het ERP. Rust komt hier uit ruimte
   en uitlijning, niet uit een donker vlak. */
.zijbalk {
  display: flex; flex-direction: column; gap: var(--ruimte-2);
  padding: var(--ruimte-4) var(--ruimte-3) var(--ruimte-3);
  background: var(--vlak);
  border-right: 1px solid var(--border);
  position: sticky; top: 0; block-size: 100dvh; overflow: hidden;
}
.zijbalk .nav { flex: 1; min-block-size: 0; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
  margin-inline: calc(var(--ruimte-1) * -1); padding-inline: var(--ruimte-1); }
.zij-merk { display: flex; align-items: center; gap: var(--ruimte-3); padding: 0 var(--ruimte-2);
  min-height: 40px; }
.zij-merk .naam { font-size: var(--tekst-l); font-weight: 650; letter-spacing: -.01em; }
.zij-merk .sub { display: block; font-size: var(--tekst-xs); color: var(--text-muted); }
.schil.smal .zij-merk .tekst, .schil.smal .navtekst,
.schil.smal .zij-voet .tekst, .schil.smal .zij-zoek .veldtekst { display: none; }

.klapper {
  position: absolute; right: calc(var(--ruimte-3) * -1 - 12px); top: var(--ruimte-6);
  width: 24px; height: 24px; display: grid; place-items: center; z-index: 5;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-pil); color: var(--text-secondary);
  transition: color var(--duur-snel), border-color var(--duur-snel);
}
.klapper:hover { color: var(--text-primary); border-color: var(--border-strong); }
.klapper svg { width: 13px; height: 13px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.navgroep { margin-top: var(--ruimte-4); }
/* Het gegraveerde zonelabel op de rail. Dezelfde vorm als boven een paneel,
   zodat de navigatie en de inhoud dezelfde taal spreken. */
.navgroep > .zonelabel { padding: var(--ruimte-3) var(--ruimte-3) var(--ruimte-1);
  color: var(--text-muted); }
.schil.smal .navgroep > .zonelabel { visibility: hidden; }
/* De eigen zone staat onder een lijn: hij gaat over jou, niet over het werk. */
.zij-voet .navgroep.eigenzone { margin-top: 0; margin-bottom: var(--ruimte-2);
  padding-bottom: var(--ruimte-2); border-bottom: 1px solid var(--border); }
.navgroep a {
  position: relative; display: flex; align-items: center; gap: var(--ruimte-3);
  min-height: var(--raakvlak); padding: 0 var(--ruimte-3);
  border-radius: var(--radius-2); text-decoration: none;
  color: var(--text-secondary); font-size: var(--tekst-l); font-weight: 550;
  transition: background var(--duur-snel), color var(--duur-snel);
}
.navgroep a svg { width: 19px; height: 19px; flex: none; }
.navgroep a:hover { background: var(--vlak-diep); color: var(--text-primary); }
/* Actief is een accentkleur, want het is een toestand van de navigatie — precies
   waar de actiekleur voor is. */
.navgroep a[aria-current="page"] {
  background: var(--accent-zacht); color: var(--accent-tekst, var(--accent));
  font-weight: 640;
}
.navgroep .teller {
  margin-left: auto; min-width: 22px; padding: 1px 7px; text-align: center;
  border-radius: var(--radius-pil); background: var(--danger);
  color: var(--text-on-dark); font-size: var(--tekst-xs); font-weight: 700;
}
.schil.smal .navgroep a { justify-content: center; padding: 0; }
.schil.smal .navgroep .teller { position: absolute; top: 4px; right: 6px; margin: 0;
  min-width: 16px; padding: 0 4px; font-size: var(--tekst-xs); }

.zij-voet { margin-top: auto; padding-top: var(--ruimte-3);
  border-top: 1px solid var(--border); }

.werkblad { min-width: 0; padding: var(--ruimte-6) var(--ruimte-8) var(--ruimte-9); }
.werkblad > * { max-width: var(--content-max); }

/* ---------------------------------------------------------------- paginakop */
.paginakop { margin-bottom: var(--ruimte-5); }
.paginakop .context { display: flex; align-items: center; gap: var(--ruimte-2);
  margin-bottom: var(--ruimte-1); }
.paginakop-rij { display: flex; align-items: flex-start; gap: var(--ruimte-4); flex-wrap: wrap; }
.paginakop-rij .kopgroep { flex: 1; min-width: 240px; }
.paginakop .toelichting { margin: var(--ruimte-2) 0 0; color: var(--text-secondary);
  font-size: var(--tekst-l); max-width: 68ch; }
.paginakop .acties { display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap; }

.sectiekop { display: flex; align-items: baseline; gap: var(--ruimte-3);
  margin-bottom: var(--ruimte-3); }
.sectiekop h2, .sectiekop h3 { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- knoppen */
.knop {
  --knop-vlak: var(--svs-ink-900);
  --knop-tekst: var(--text-on-dark);
  --knop-rand: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ruimte-2);
  min-height: var(--raakvlak); padding: 0 var(--ruimte-4);
  background: var(--knop-vlak); color: var(--knop-tekst);
  border: 1px solid var(--knop-rand); border-radius: var(--radius-2);
  font-size: var(--tekst-l); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background var(--duur-snel), border-color var(--duur-snel),
              transform var(--duur-snel) var(--soepel);
}
.knop svg { width: 17px; height: 17px; flex: none; }
.knop:hover { --knop-vlak: var(--svs-ink-700); }
.knop:active { transform: translateY(1px); }
/* Verschil tussen de twee vormen van uitgeschakeld, en dat verschil is bedoeld.

   `[disabled]` is er niet: geen klik, geen focus. `aria-disabled` betekent "kan nu
   niet, en ik vertel je waarom" — die moet dus wél klikbaar blijven, anders gaat
   de uitleg die eronder klaarstaat nooit af. Dat was precies wat er misging bij
   "Maand vergrendelen": `pointer-events: none` slikte de klik, de zorgvuldig
   geschreven verklaring verscheen nooit, en met het toetsenbord gedroeg dezelfde
   knop zich wél zoals bedoeld. */
.knop[disabled] { opacity: .45; pointer-events: none; }
.knop[aria-disabled="true"] { opacity: .45; cursor: default; }
.knop[aria-disabled="true"]:hover { --knop-vlak: var(--svs-ink-900); }
.knop.zacht[aria-disabled="true"]:hover { --knop-vlak: var(--surface);
  --knop-rand: var(--border); }

.knop.zacht { --knop-vlak: var(--surface); --knop-tekst: var(--text-primary);
  --knop-rand: var(--border-strong); }
.knop.zacht:hover { --knop-vlak: var(--surface-sunken); --knop-rand: var(--border-interactive); }
.knop.groen { --knop-vlak: var(--svs-green-800); }
.knop.groen:hover { --knop-vlak: var(--svs-green-700); }
.knop.gevaar { --knop-vlak: var(--danger); }
.knop.gevaar:hover { --knop-vlak: var(--danger-hover); }
.knop.stil { --knop-vlak: transparent; --knop-tekst: var(--text-secondary); }
.knop.stil:hover { --knop-vlak: var(--surface-sunken); --knop-tekst: var(--text-primary); }
.knop.klein { min-height: 36px; padding: 0 var(--ruimte-3); font-size: var(--tekst-m); }
.knop.breed { width: 100%; }

/* Bezig: de tekst blijft staan zodat de knop niet verspringt. */
.knop[data-bezig] { pointer-events: none; position: relative; color: transparent; }
.knop[data-bezig]::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  color: var(--knop-tekst); animation: draai .7s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg); } }

.icoonknop {
  display: inline-grid; place-items: center;
  width: var(--raakvlak); height: var(--raakvlak);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-2);
  color: var(--text-secondary);
  transition: background var(--duur-snel), color var(--duur-snel);
}
.icoonknop:hover { background: var(--surface-sunken); color: var(--text-primary); }
.icoonknop svg { width: 18px; height: 18px; }
.icoonknop.klein { width: 32px; height: 32px; }

/* ---------------------------------------------------------------- formulier */
.veld { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--ruimte-4); }
.veld > label { font-size: var(--tekst-m); font-weight: 600; color: var(--text-primary); }
.veld .verplicht { color: var(--danger); }
.veld input:not([type="radio"]):not([type="checkbox"]),
.veld select, .veld textarea {
  width: 100%; min-block-size: max(var(--veld-hoogte), var(--raakvlak)); padding: 10px 12px;
  background: var(--surface); color: var(--text-primary);
  border: 1px solid var(--border-interactive); border-radius: var(--radius-2);
  font-size: var(--tekst-xl);
  transition: border-color var(--duur-snel), box-shadow var(--duur-snel);
}
.veld textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.veld input:not([type="radio"]):not([type="checkbox"]):hover,
.veld select:hover, .veld textarea:hover { border-color: var(--svs-ink-700); }
.veld input:not([type="radio"]):not([type="checkbox"]):focus-visible,
.veld select:focus-visible, .veld textarea:focus-visible {
  outline: none; border-color: var(--svs-green-700);
  box-shadow: 0 0 0 var(--focusring) var(--svs-green-100);
}
.veld input:not([type="radio"]):not([type="checkbox"])[disabled],
.veld select[disabled], .veld textarea[disabled] {
  background: var(--surface-sunken); color: var(--text-muted); cursor: not-allowed;
}
.veld .hulp { font-size: var(--tekst-s); color: var(--text-secondary); }
.veld .veldfout { display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--tekst-s); font-weight: 550; color: var(--danger); }
.veld .veldfout svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.veld.fout input, .veld.fout select, .veld.fout textarea { border-color: var(--danger); }
.veld.fout input:focus-visible { box-shadow: 0 0 0 var(--focusring) var(--danger-bg); }

.vinkveld { display: flex; align-items: flex-start; gap: var(--ruimte-3);
  min-height: var(--raakvlak); padding: 6px 0; }
.vinkveld input { width: 20px; height: 20px; min-height: 0; flex: none; margin-top: 2px;
  accent-color: var(--svs-green-800); }
.vinkveld span { font-size: var(--tekst-l); }

.velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--ruimte-4); }
.velden .veld.breed { grid-column: 1 / -1; }

.foutsamenvatting {
  padding: var(--ruimte-4); margin-bottom: var(--ruimte-5);
  background: var(--danger-bg); border: 1px solid var(--danger-border);
  border-radius: var(--radius-3);
}
.foutsamenvatting h3 { color: var(--danger); font-size: var(--tekst-l); margin-bottom: var(--ruimte-2); }
.foutsamenvatting ul { margin: 0; padding-left: var(--ruimte-5); }
.foutsamenvatting a { color: var(--danger); }

/* ---------------------------------------------------------------- kaarten */
/* De kaart zoals in het ERP: wit op de lichte grond, dunne rand, 12 px hoek en een
   schaduw die je bijna niet ziet. `.kaart` staat op 222 plekken in de markup en
   `.paneel` doet hetzelfde; ze delen daarom dezelfde regels. */
.kaart, .paneel {
  background: var(--vlak); border: 1px solid var(--border);
  border-radius: var(--radius-3); box-shadow: var(--schaduw-1);
}
/* Wrapt: een kop met titel, badge en twee knoppen is op een telefoon breder dan
   het scherm. Zonder wrap duwt hij de hele kaart uit beeld. */
.kaart-kop { display: flex; align-items: center; gap: var(--ruimte-3); flex-wrap: wrap;
  padding: var(--ruimte-3) var(--inspring);
  border-bottom: 1px solid var(--border); }
.kaart-kop h2, .kaart-kop h3 { flex: 1; min-width: 140px;
  font-size: var(--tekst-kaart); font-weight: 620; letter-spacing: -.008em;
  color: var(--text-primary); text-transform: none; }
.kaart-lijf { padding: var(--ruimte-4) var(--inspring); }
.kaart-lijf.dicht { padding: var(--ruimte-3) var(--inspring); }
.kaart-voet { padding: var(--ruimte-3) var(--inspring); border-top: 1px solid var(--border);
  background: var(--vlak-zacht); border-radius: 0 0 var(--radius-3) var(--radius-3); }

/* Volledig klikbare kaart: de hele kaart is het doel, niet alleen de link. */
.kaart.klikbaar { position: relative; transition: border-color var(--duur-snel),
  box-shadow var(--duur-snel), transform var(--duur-snel) var(--soepel); }
.kaart.klikbaar:hover { border-color: var(--border-interactive); box-shadow: var(--schaduw-2);
  transform: translateY(-1px); }
.kaart.klikbaar:focus-within { border-color: var(--svs-green-700); }
.kaart.klikbaar .dekkend::after { content: ""; position: absolute; inset: 0; }

.kaart.nadruk { border-color: var(--warning-border); background: var(--warning-bg); }
.kaart.nadruk .kaart-kop { border-bottom-color: var(--warning-border); }

.statkaart { padding: var(--ruimte-4) var(--ruimte-5); }
.statkaart .cijfer { display: block; font-size: var(--tekst-pagina); font-weight: 660;
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.statkaart .label { margin-top: 6px; }
.statkaart.urgent .cijfer { color: var(--danger); }
.statkaart.letop .cijfer { color: var(--warning); }

/* ---------------------------------------------------------------- badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 3px 10px; border-radius: var(--radius-pil);
  font-size: var(--tekst-xs); font-weight: 620; line-height: 1.6;
  border: 1px solid transparent;
}
.badge svg { width: 13px; height: 13px; flex: none; }
.badge.succes  { background: var(--success-bg);     color: var(--success);     border-color: var(--success-border); }
.badge.letop   { background: var(--warning-bg);     color: var(--warning);     border-color: var(--warning-border); }
.badge.gevaar  { background: var(--danger-bg);      color: var(--danger);      border-color: var(--danger-border); }
.badge.info    { background: var(--information-bg); color: var(--information); border-color: var(--information-border); }
.badge.neutraal{ background: var(--neutral-bg);     color: var(--neutral);     border-color: var(--neutral-border); }

/* Statusstip: kleur draagt nooit alleen de betekenis, er staat altijd tekst bij. */
.stip { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; }

/* ---------------------------------------------------------------- avatar */
.avatar {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: var(--radius-pil);
  background: var(--svs-green-100); color: var(--svs-green-800);
  border: 1px solid var(--svs-green-100);
  font-size: var(--tekst-s); font-weight: 700; letter-spacing: .01em;
}
.avatar.groot { width: 56px; height: 56px; font-size: var(--tekst-sectie); }
.avatar.klein { width: 28px; height: 28px; font-size: 11px; }

.persoonscel { display: flex; align-items: center; gap: var(--ruimte-3); min-width: 0; }
.persoonscel .naam { display: block; font-weight: 620; }
.persoonscel .onder { display: block; font-size: var(--tekst-xs); color: var(--text-muted); }

/* ---------------------------------------------------------------- tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  min-height: var(--raakvlak); padding: 0 var(--ruimte-4); margin-bottom: -1px;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-secondary); font-size: var(--tekst-l); font-weight: 600;
  text-decoration: none;
  transition: color var(--duur-snel), border-color var(--duur-snel);
}
.tabs a:hover, .tabs button:hover { color: var(--text-primary); }
.tabs [aria-selected="true"], .tabs [aria-current="page"] {
  color: var(--svs-green-800); border-bottom-color: var(--svs-green-700);
}
.tabs .teller { font-size: var(--tekst-xs); font-weight: 700; padding: 1px 6px;
  border-radius: var(--radius-pil); background: var(--neutral-bg); color: var(--neutral); }
.tabs [aria-selected="true"] .teller { background: var(--svs-green-100); color: var(--svs-green-800); }

/* --- Verzuim ------------------------------------------------------------------------
   Eén regel per melding, met de vaste volgorde wie · wanneer · hoe erg · doorgegeven.
   Die vierde kolom is het hele punt van het scherm en staat daarom vast op zijn plek,
   ook als hij leeg is: een ontbrekende doorgifte moet opvallen als een gat, niet als
   iets dat er nooit was. */
.verzuimlijst .verzuimregel { display: grid; align-items: center; gap: var(--ruimte-3);
  /* max-content op de knoppen: die mogen niet over twee regels breken, want dan lijkt
     "Doorgeven" bij de volgende medewerker te horen. De rest van de rij geeft mee. */
  grid-template-columns: minmax(150px, 1.4fr) 130px 125px 150px max-content;
  padding: var(--ruimte-3) var(--ruimte-4); border-bottom: 1px solid var(--border); }
.verzuimregel .rijacties { flex-wrap: nowrap; }
.verzuimlijst .verzuimregel:last-child { border-bottom: none; }
/* Een lopende ziekmelding kreeg een oranje vlak over de hele rij. Daarmee ziet
   ziek-zijn eruit als probleem-hebben, en het werkelijke probleem — niet doorgegeven
   aan de verzekeraar, wat de uitkering kan kosten — was een klein rood teken binnen
   een al oranje rij. Het urgente verloor van het routinematige.

   Nu markeert een gegraveerde randstreep links dat de melding loopt; de kleurvlakken
   blijven gereserveerd voor wat er misgaat. */
.verzuimregel.loopt { box-shadow: inset 3px 0 0 var(--warning); }
.verzuimregel.niet-doorgegeven { background: var(--danger-bg);
  box-shadow: inset 3px 0 0 var(--danger); }
.verzuimwie { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; }
.verzuimwie > span { min-width: 0; display: flex; flex-direction: column; }
.verzuimwie .onder, .verzuimwie .titel { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.verzuimwie .titel { font-weight: 600; }
.verzuimwie .onder { font-size: var(--tekst-m); color: var(--text-secondary); }
.verzuimperiode { font-size: var(--tekst-m); color: var(--text-secondary);
  white-space: nowrap; }
.verzuimperiode .pijl { color: var(--text-muted); margin: 0 4px; }

@media (max-width: 1023px) {
  .verzuimlijst .verzuimregel { grid-template-columns: 1fr auto; row-gap: var(--ruimte-2); }
  .verzuimwie { grid-column: 1 / -1; }
  .verzuimdoorgifte { text-align: right; }
  .verzuimregel .rijacties { grid-column: 1 / -1; justify-content: flex-start;
    flex-wrap: wrap; }
}

/* --- Maandkiezer -------------------------------------------------------------------- */
.maandkiezer { display: flex; align-items: center; gap: var(--ruimte-2); }
.maandkiezer .maandnaam { min-width: 145px; text-align: center; font-weight: 620;
  font-size: var(--tekst-l); text-transform: capitalize; }

/* Een feestdag is geen weekend en geen verlof: hij hoort bij niemand, dus krijgt hij
   een eigen arcering in plaats van een balk in elke rij. */
.kal-dag.vrij { background: var(--information-bg); }
.kal-legenda .vlak.vrij { background: var(--information-bg);
  border: 1px solid var(--information-border); }
.kal-balk.ziek { background: var(--danger-bg); color: var(--danger);
  border: 1px solid var(--danger-border); }
.kal-balk.ziek_deels { background: var(--warning-bg); color: var(--warning);
  border: 1px dashed var(--warning-border); }
.kal-balk.verlof { background: var(--svs-green-100); color: var(--svs-green-800);
  border: 1px solid var(--svs-green-700); }
.kal-balk.verlof_aangevraagd { color: var(--information);
  border: 1px dashed var(--information-border); }
.kal-legenda .vlak.ziek { background: var(--danger-bg); border: 1px solid var(--danger-border); }
.kal-legenda .vlak.ziek_deels { background: var(--warning-bg);
  border: 1px dashed var(--warning-border); }
.kal-legenda .vlak.verlof { background: var(--svs-green-100); }
.kal-legenda .vlak.verlof_aangevraagd { border: 1px dashed var(--information-border); }
a.kal-balk { text-decoration: none; }
a.kal-balk:hover { filter: brightness(.97); }

/* Een tabbalk die niet past. De knoppen staan er alleen als er echt meer is; een knop
   die nergens heen gaat is erger dan geen knop. De vervaging eronder laat zien dát er
   meer staat, de knop maakt het bereikbaar zonder horizontaal te hoeven scrollen. */
.tabstrook { position: relative; flex: 1; min-width: 0;
  /* De knop dekt de rand van de balk af en moet dus de kleur hebben waar hij op ligt.
     Op de meeste schermen is dat het paginavlak; in een kaart is het wit. */
  --tabgrond: var(--canvas); }
.kaart .tabstrook, .kaart-lijf .tabstrook { --tabgrond: var(--surface); }
.tabschuif { position: absolute; top: 0; bottom: 1px; width: 46px; display: none;
  align-items: center; padding: 0; border: none; color: var(--text-secondary);
  cursor: pointer; }
.tabschuif svg { width: 17px; height: 17px; }
.tabschuif:hover { color: var(--text-primary); }
.tabschuif:focus-visible { outline: 2px solid var(--svs-green-700); outline-offset: -2px;
  border-radius: var(--radius-1); }
/* Een verloop en geen blok: zo wordt het tabblad eronder vaag in plaats van afgehakt.
   Afgehakt leest als een weergavefout, vaag leest als "hier gaat het verder". */
.tabschuif.links { left: 0; justify-content: flex-start;
  background: linear-gradient(to right, var(--tabgrond) 60%, transparent); }
.tabschuif.rechts { right: 0; justify-content: flex-end;
  background: linear-gradient(to left, var(--tabgrond) 60%, transparent); }
.tabs.rolt-links + .tabschuif.links, .tabstrook .tabs.rolt-rechts ~ .tabschuif.rechts {
  display: flex;
}

.segment { display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-sunken); border-radius: var(--radius-2); }
.segment button {
  min-height: 34px; padding: 0 var(--ruimte-3); border: none; background: transparent;
  /* --text-secondary haalt op dit vlak 4,39:1 en de eis is 4,5 bij deze tekengrootte. */
  border-radius: var(--radius-1); font-size: var(--tekst-m); font-weight: 600;
  color: var(--text-primary);
  transition: background var(--duur-snel), color var(--duur-snel);
}
.segment [aria-pressed="true"] { background: var(--surface); color: var(--text-primary);
  box-shadow: var(--schaduw-1); }

/* ---------------------------------------------------------------- tabellen */
.tabelwikkel { overflow-x: auto; }
table.gegevens { width: 100%; font-size: var(--tekst-m); }
table.gegevens thead th {
  position: sticky; top: 0; z-index: 2; text-align: left; white-space: nowrap;
  padding: var(--ruimte-2) var(--inspring); background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--tekst-xs); font-weight: 620; color: var(--text-muted); letter-spacing: .01em;
}
table.gegevens th[aria-sort] { cursor: pointer; }
table.gegevens th[aria-sort]:hover { color: var(--text-primary); }
table.gegevens td { padding: 0 var(--inspring); height: var(--rij-hoogte);
  border-bottom: 1px solid var(--border); vertical-align: middle; }
table.gegevens tbody tr:last-child td { border-bottom: none; }
table.gegevens tbody tr { transition: background var(--duur-snel); }
table.gegevens tbody tr[data-klikbaar] { cursor: pointer; }
table.gegevens tbody tr[data-klikbaar]:hover { background: var(--svs-green-50); }
table.gegevens tbody tr[aria-selected="true"] { background: var(--svs-green-50); }
table.gegevens tbody tr.gemarkeerd { animation: markeer 1.6s var(--soepel); }
@keyframes markeer { 0% { background: var(--svs-green-100); } 100% { background: transparent; } }
table.gegevens td.num, table.gegevens th.num { text-align: right;
  font-variant-numeric: tabular-nums; }
table.gegevens.compact td { height: 44px; }
table.gegevens .rijacties { display: flex; gap: var(--ruimte-1); justify-content: flex-end;
  opacity: 0; transition: opacity var(--duur-snel); }
table.gegevens tr:hover .rijacties, table.gegevens tr:focus-within .rijacties { opacity: 1; }

/* Verbergen op hover mag alleen waar hover bestáát.

   Dit stond achter een breedte (`max-width: 767px`), en daardoor waren de
   rijacties op een tablet — geen muis, wél breder dan 767px — volledig
   onzichtbaar: geen "Wijzigen" op bedrijfsmiddelen, geen chevrons op uren en
   verlof. Het invoerapparaat is hier de vraag, niet de schermbreedte. */
@media (hover: none) {
  table.gegevens .rijacties { opacity: 1; }
}

.filterbalk { display: flex; align-items: center; gap: var(--ruimte-3); flex-wrap: wrap;
  padding: var(--ruimte-3) var(--ruimte-4); border-bottom: 1px solid var(--border); }
.filterbalk .zoek { position: relative; flex: 1; min-width: 220px; max-width: 380px; }
.filterbalk .zoek svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.filterbalk .zoek input { width: 100%; min-height: 40px; padding: 8px 12px 8px 36px;
  border: 1px solid var(--border-interactive); border-radius: var(--radius-2);
  background: var(--surface); font-size: var(--tekst-m); }
.filterbalk .zoek input:focus-visible { outline: none; border-color: var(--svs-green-700);
  box-shadow: 0 0 0 var(--focusring) var(--svs-green-100); }
.filterbalk select { min-height: 40px; padding: 0 var(--ruimte-3);
  border: 1px solid var(--border-interactive); border-radius: var(--radius-2);
  background: var(--surface); font-size: var(--tekst-m); }

/* ---------------------------------------------------------------- lagen */
.laag {
  position: fixed; inset: 0; z-index: 50;
  background: var(--sluier);
  animation: vervagen var(--duur-normaal) var(--soepel);
}
.laag.dialoogpositie { display: grid; place-items: center; padding: var(--ruimte-4); }

/* De vraag of ingevulde gegevens weg mogen. Hij staat bovenop de dialoog zelf, niet
   ernaast: de vraag gaat over dit venster, en je moet zien waar hij over gaat. */
.weggooivraag {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center; padding: var(--ruimte-4);
  background: var(--sluier);
}
.weggooikaart {
  width: 100%; max-width: 380px;
  background: var(--surface); border-radius: var(--radius-4);
  box-shadow: var(--schaduw-3); padding: var(--ruimte-5);
}
.weggooikaart h3 { margin: 0 0 var(--ruimte-2); font-size: var(--tekst-xl); }
.weggooikaart p { margin: 0 0 var(--ruimte-5); color: var(--text-secondary); }
.weggooikaart .rechts { display: flex; gap: var(--ruimte-2); justify-content: flex-end; }

.dialoog {
  width: 100%; max-width: 520px; max-height: calc(100dvh - var(--ruimte-8));
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius-4);
  box-shadow: var(--schaduw-3);
  animation: opkomen var(--duur-traag) var(--uitloop);
}
.dialoog.breed { max-width: 720px; }
.dialoog-kop { padding: var(--ruimte-5) var(--ruimte-5) var(--ruimte-3); }
.dialoog-kop .toelichting { margin: var(--ruimte-2) 0 0; color: var(--text-secondary);
  font-size: var(--tekst-m); max-width: 62ch; }
.dialoog-lijf { padding: 0 var(--ruimte-5); overflow-y: auto; flex: 1; }
.dialoog-voet { display: flex; align-items: center; gap: var(--ruimte-3);
  padding: var(--ruimte-4) var(--ruimte-5); border-top: 1px solid var(--border); }
.dialoog-voet .rechts { margin-left: auto; display: flex; gap: var(--ruimte-3); }

/* Drawer: beoordelen zonder de lijst te verlaten. */
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%);
  display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: var(--schaduw-3);
  animation: inschuiven var(--duur-traag) var(--uitloop);
}
@keyframes inschuiven { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- menu */
.menu {
  position: absolute; z-index: 60; min-width: 200px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-3); box-shadow: var(--schaduw-2);
  animation: opkomen var(--duur-snel) var(--uitloop);
}
.menu button, .menu a {
  display: flex; align-items: center; gap: var(--ruimte-3); width: 100%;
  min-height: 38px; padding: 0 var(--ruimte-3);
  background: none; border: none; border-radius: var(--radius-2);
  color: var(--text-primary); font-size: var(--tekst-m); font-weight: 550;
  text-align: left; text-decoration: none;
}
.menu button:hover, .menu a:hover { background: var(--surface-sunken); }
.menu button svg, .menu a svg { width: 16px; height: 16px; color: var(--text-secondary); }
.menu .scheiding { height: 1px; margin: 6px 0; background: var(--border); }
.menu .gevaar { color: var(--danger); }

/* ---------------------------------------------------------------- toast */
.toasts { position: fixed; right: var(--ruimte-5); bottom: var(--ruimte-5); z-index: 70;
  display: flex; flex-direction: column; gap: var(--ruimte-2); max-width: 380px; }
.toast {
  display: flex; align-items: flex-start; gap: var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-4);
  background: var(--svs-ink-950); color: var(--text-on-dark);
  border-radius: var(--radius-3); box-shadow: var(--schaduw-2);
  font-size: var(--tekst-m); animation: opkomen var(--duur-traag) var(--uitloop);
}
.toast svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.toast.succes svg { color: var(--succes-op-donker); }
.toast.gevaar svg { color: var(--gevaar-op-donker); }
.toast.letop svg { color: var(--letop-op-donker); }
.toast .sluit { margin-left: auto; color: var(--text-on-dark-muted); background: none;
  border: none; padding: 0; }

/* ---------------------------------------------------------------- meldingen */
.melding {
  display: flex; align-items: flex-start; gap: var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-4); border-radius: var(--radius-3);
  border: 1px solid; font-size: var(--tekst-m);
}
.melding svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.melding .inhoud { flex: 1; min-width: 0; }
.melding strong { display: block; }
.melding.info    { background: var(--information-bg); border-color: var(--information-border); color: var(--text-primary); }
.melding.info svg    { color: var(--information); }
.melding.letop   { background: var(--warning-bg); border-color: var(--warning-border); color: var(--text-primary); }
.melding.letop svg   { color: var(--warning); }
.melding.gevaar  { background: var(--danger-bg); border-color: var(--danger-border); color: var(--text-primary); }
.melding.gevaar svg  { color: var(--danger); }
.melding.succes  { background: var(--success-bg); border-color: var(--success-border); color: var(--text-primary); }
.melding.succes svg  { color: var(--success); }

/* ---------------------------------------------------------------- lege staat */
.legestaat { display: grid; justify-items: center; text-align: center;
  padding: var(--ruimte-8) var(--ruimte-5); max-width: 44ch; margin: 0 auto; }
.legestaat .merkvorm { width: 44px; height: 44px; margin-bottom: var(--ruimte-4);
  color: var(--svs-green-500); opacity: .5; }
.legestaat h3 { margin-bottom: var(--ruimte-2); }
.legestaat p { color: var(--text-secondary); font-size: var(--tekst-m); }
.legestaat .acties { display: flex; gap: var(--ruimte-3); margin-top: var(--ruimte-4);
  flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------- skeleton */
.skelet {
  background: linear-gradient(90deg, var(--surface-sunken) 25%,
    var(--surface-subtle) 37%, var(--surface-sunken) 63%);
  background-size: 200% 100%; border-radius: var(--radius-1);
  animation: glans 1.4s ease-in-out infinite;
}
.skelet.streep { height: 12px; margin-bottom: var(--ruimte-2); }
.skelet.kop { height: 20px; width: 40%; margin-bottom: var(--ruimte-4); }
.skelet.blok { height: 96px; border-radius: var(--radius-3); }
.skelet.cirkel { width: 36px; height: 36px; border-radius: 50%; }

/* ---------------------------------------------------------------- voortgang */
.voortgang { height: 8px; border-radius: var(--radius-pil);
  background: var(--surface-sunken); overflow: hidden; }
/* Schalen in plaats van de breedte animeren: `width` dwingt de browser elk frame de
   opmaak opnieuw te berekenen, `transform` niet. Zichtbaar hetzelfde, merkbaar soepeler. */
.voortgang i { display: block; height: 100%; width: 100%; border-radius: var(--radius-pil);
  transform-origin: left center; transform: scaleX(0);
  background: var(--svs-green-700);
  transition: transform var(--duur-traag) var(--uitloop); }
.voortgang.letop i { background: var(--warning); }
.voortgang.gevaar i { background: var(--danger); }

/* Een ring krijgt hier zijn maat, niet van de aanroeper. Eén plek in het systeem
   tekende hem zonder width/height-attribuut; die vulde daardoor de hele
   flexcontainer en werd een schijf van driehonderd pixels. Een maat die van de
   omgeving afhangt is geen maat. */
.ring { transform: rotate(-90deg); inline-size: 58px; block-size: 58px; flex: none; }
.ring circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.ring .baan { stroke: var(--surface-sunken); }
.ring .vulling { stroke: var(--svs-green-700); transition: stroke-dashoffset .8s var(--uitloop); }
.ring.letop .vulling { stroke: var(--warning); }
.ring.gevaar .vulling { stroke: var(--danger); }

/* ---------------------------------------------------------------- stepper */
.stapbalk { display: flex; flex-direction: column; gap: 2px; }
.stapbalk button {
  display: flex; align-items: center; gap: var(--ruimte-3); width: 100%;
  min-height: var(--raakvlak); padding: var(--ruimte-2) var(--ruimte-3);
  background: none; border: none; border-radius: var(--radius-2);
  text-align: left; color: var(--text-secondary); font-size: var(--tekst-m); font-weight: 600;
}
.stapbalk button:hover:not([disabled]):not([aria-disabled="true"]) {
  background: var(--surface-sunken); }
.stapbalk .nummer {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; background: var(--surface-sunken); color: var(--text-primary);
  /* Op 12px geldt 4,5:1; zowel --text-muted (4,49) als --text-secondary (4,39)
     bleven daar net onder op dit vlak. */
  font-size: var(--tekst-xs); font-weight: 700;
}
.stapbalk [aria-current="step"] { color: var(--svs-green-800); background: var(--svs-green-50); }
/* green-700 haalt met wit maar 3,99:1; op 12px is 4,5 de eis. */
.stapbalk [aria-current="step"] .nummer { background: var(--svs-green-800); color: #fff; }
.stapbalk .klaar .nummer { background: var(--success); color: #fff; }
/* Een stap die nog niet aan de beurt is, moet er ook niet aan-de-beurt uitzien.
   De klikafhandelaar weigert hem al stilzwijgend; zonder deze regel lichtte hij
   bij hover zelfs op — vier van de zeven stappen waren dode knoppen met een
   hoverstand. */
.stapbalk button[disabled],
.stapbalk button[aria-disabled="true"] { opacity: .55; cursor: default; }

/* ---------------------------------------------------------------- tijdlijn
   De verticale lijn is de vlamlijn uit het logo: één doorlopende groene curve
   die de gebeurtenissen verbindt. Subtiel, en met een functie. */
.tijdlijn { position: relative; padding-left: var(--ruimte-6); }
.tijdlijn::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px;
  border-radius: var(--radius-pil);
  background: linear-gradient(180deg, var(--svs-green-500), var(--border) 70%);
  opacity: .5;
}
.tijdlijn-punt {
  position: relative; display: block; width: 100%; text-align: left;
  padding: var(--ruimte-2) var(--ruimte-3) var(--ruimte-2) 0;
  background: none; border: none; border-radius: var(--radius-2);
  transition: background var(--duur-snel);
}
.tijdlijn-punt:hover { background: var(--surface-sunken); }
.tijdlijn-punt::before {
  content: ""; position: absolute; left: -26px; top: 15px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-strong);
  box-shadow: 0 0 0 3px var(--surface);
}
.tijdlijn-punt.merk::before   { background: var(--svs-green-700); border-color: var(--svs-green-700); }
.tijdlijn-punt.letop::before  { background: var(--warning); border-color: var(--warning); }
.tijdlijn-punt.gevaar::before { background: var(--danger); border-color: var(--danger); }
.tijdlijn-punt[aria-current="true"] { background: var(--svs-green-50); }
.nu-markering { display: flex; align-items: center; gap: var(--ruimte-2);
  margin: var(--ruimte-3) 0; font-size: var(--tekst-xs); font-weight: 700;
  color: var(--svs-green-800); }
.nu-markering::after { content: ""; flex: 1; height: 1px; background: var(--svs-green-100); }

/* ---------------------------------------------------------------- opdrachtpalet */
.palet {
  width: 100%; max-width: 620px; margin-top: 12vh; align-self: start;
  background: var(--surface); border-radius: var(--radius-4);
  box-shadow: var(--schaduw-3); overflow: hidden;
  animation: opkomen var(--duur-traag) var(--uitloop);
}
.palet-invoer { display: flex; align-items: center; gap: var(--ruimte-3);
  padding: var(--ruimte-4) var(--ruimte-5); border-bottom: 1px solid var(--border); }
.palet-invoer svg { width: 19px; height: 19px; color: var(--text-muted); flex: none; }
.palet-invoer input { flex: 1; border: none; outline: none; font-size: var(--tekst-sectie);
  background: none; }
.palet-invoer kbd { font-size: var(--tekst-xs); }
.palet-lijst { max-height: 52vh; overflow-y: auto; padding: 6px; }
.palet-groep { padding: var(--ruimte-3) var(--ruimte-3) 6px; }
.palet-regel {
  display: flex; align-items: center; gap: var(--ruimte-3); width: 100%;
  min-height: 46px; padding: 0 var(--ruimte-3);
  background: none; border: none; border-radius: var(--radius-2);
  text-align: left; text-decoration: none; color: var(--text-primary);
}
.palet-regel svg { width: 17px; height: 17px; color: var(--text-secondary); flex: none; }
.palet-regel .titel { font-size: var(--tekst-l); font-weight: 550; }
.palet-regel .onder { font-size: var(--tekst-xs); color: var(--text-muted); }
.palet-regel[aria-selected="true"] { background: var(--svs-green-50); }
.palet-regel[aria-selected="true"] svg { color: var(--svs-green-800); }
.palet-voet { display: flex; gap: var(--ruimte-4); padding: var(--ruimte-3) var(--ruimte-5);
  border-top: 1px solid var(--border); background: var(--surface-subtle);
  font-size: var(--tekst-xs); color: var(--text-muted); }

kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--surface-sunken); border: 1px solid var(--border-strong);
  border-bottom-width: 2px; border-radius: var(--radius-1);
  /* Op 11px geldt de eis van 4,5:1; --text-secondary haalt op dit vlak net 4,39. */
  font-family: inherit; font-size: 11px; font-weight: 600; color: var(--text-primary);
}

/* ---------------------------------------------------------------- tooltip */
.tip { position: relative; }
.tip[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); z-index: 40;
  padding: 5px 9px; border-radius: var(--radius-1); white-space: nowrap;
  background: var(--svs-ink-950); color: var(--text-on-dark); font-size: var(--tekst-xs);
  opacity: 0; pointer-events: none; transition: opacity var(--duur-snel);
}
.tip:hover::after, .tip:focus-visible::after { opacity: 1; }

/* ---------------------------------------------------------------- gegevenslijst */
/* Twee namen voor hetzelfde raster. De markup schrijft `gegevens`, de CSS kende
   alleen `gegevenslijst` — daardoor viel het raster stil weg en stonden labels en
   waarden als losse regels onder elkaar.

   Let op de `div`: `gegevens` bestaat óók als tabelklasse (`table.gegevens`), en
   een tabel die een grid wordt, verliest de koppeling tussen kop en cel. */
div.gegevens,
.gegevenslijst { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--ruimte-4) var(--ruimte-5); }
.gegeven .micro { display: block; font-size: var(--tekst-xs);
  letter-spacing: var(--label-spatie); text-transform: uppercase;
  color: var(--text-muted); }
.gegeven .waarde { margin-top: 3px; font-size: var(--tekst-l); font-weight: 550; }
.gegeven .waarde.leeg { color: var(--text-muted); font-weight: 400; font-style: italic; }

/* ---------------------------------------------------------------- responsive */
.onderbalk { display: none; }

@media (max-width: 1023px) {
  .schil, .schil.smal { grid-template-columns: minmax(0, 1fr); }
  .zijbalk { display: none; }
  .klapper { display: none; }
  .werkblad { padding: var(--ruimte-4) var(--ruimte-4) 96px; }
  h1 { font-size: 25px; }
  .velden { grid-template-columns: minmax(0, 1fr); }
  .gegevenslijst { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .dialoog { max-width: none; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .laag.dialoogpositie { padding: 0; place-items: stretch; }
  .drawer { width: 100%; border-left: none; }
  .palet { margin-top: 0; max-width: none; height: 100dvh; border-radius: 0; }
  .toasts { left: var(--ruimte-4); right: var(--ruimte-4); bottom: 84px; max-width: none; }

  .onderbalk {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border);
  }
  .onderbalk a, .onderbalk button {
    position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 3px; min-height: 52px; padding: 6px 2px; border-radius: var(--radius-2);
    text-decoration: none; color: var(--text-muted);
    font-size: var(--tekst-xs); font-weight: 620;
  }
  .onderbalk a svg, .onderbalk button svg { width: 22px; height: 22px; }
  .onderbalk a[aria-current="page"] { color: var(--svs-green-800); background: var(--svs-green-50); }
  .onderbalk .teller { position: absolute; top: 2px; left: 50%; margin-left: 5px;
    min-width: 16px; padding: 0 4px; font-size: var(--tekst-xs); }
}

@media (max-width: 767px) {
  .paginakop .acties { width: 100%; }
  .paginakop .acties .knop { flex: 1; }
}

/* ---------------------------------------------------------------- werkvoorraad
   De signalenlijst. Urgentie zit in de streep links, maar draagt de betekenis
   nooit alleen: er staat altijd een termijn in tekst naast. */
.werkvoorraad { margin-top: var(--ruimte-5); display: flex; flex-direction: column;
  gap: var(--ruimte-6); }
.werkvoorraad section > .sectiekop { margin-bottom: var(--ruimte-3); }
.signalen { display: flex; flex-direction: column; gap: var(--ruimte-2); }

.signaal {
  display: flex; align-items: stretch; gap: var(--ruimte-3);
  padding: 0 var(--ruimte-3);
  background: var(--surface); border: var(--lijn-zone) solid var(--border);
  border-radius: var(--radius-2); color: inherit;
  transition: border-color var(--duur-snel), background var(--duur-snel);
}
/* Geen schaduw bij aanwijzen: dit systeem scheidt met lijnen, niet met diepte. */
.signaal:hover { border-color: var(--border-interactive);
  background: var(--surface-subtle); }
.signaal:focus-within { border-color: var(--svs-green-700); }
.signaal.stil { background: var(--surface-subtle); }

/* Gesluimerd blijft leesbaar maar vraagt geen aandacht meer. Bewust geen grijstint
   over de tekst: dan is de reden waarom het sluimert niet meer te lezen. */
.signaal.sluimert { background: var(--surface-subtle); border-style: dashed; }

/* De hele regel is de link; de acties ernaast vallen erbuiten. */
.signaallink {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--ruimte-4);
  padding: var(--ruimte-4) 0; color: inherit; text-decoration: none;
}
.signaalacties { display: flex; align-items: center; padding-left: var(--ruimte-2);
  border-left: 1px solid var(--border); }
.signaal .slaaptekst { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
  font-size: var(--tekst-s); color: var(--text-secondary); }
.signaal .slaaptekst svg { width: 13px; height: 13px; flex: none; }
.signaal .wie { display: inline-flex; align-items: center; gap: var(--ruimte-2); }

.signaalfilters { border: 1px solid var(--border); border-radius: var(--radius-3);
  background: var(--surface); margin-bottom: var(--ruimte-5); }

/* Het lampje op de signaalregel komt uit de component (`lamp()`); dit bestand
   tekende hem hiervoor zelf als `.merkstreep`, met vier eigen toestandsnamen naast
   de vijf van de component. Eén merkteken, één definitie. */

/* De urgentie staat als lampje mét woord bovenaan de regel, als opschrift boven de
   titel. Zo is het woord de drager en de kleur de bevestiging, niet andersom. */
.signaal .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  align-items: flex-start; }
.signaal .tekst > .lamp { font-size: var(--tekst-xs);
  font-weight: var(--label-gewicht); letter-spacing: var(--label-spatie);
  text-transform: uppercase; }
.signaal.sluimert .lamp { opacity: .6; }
.signaal .titel { font-size: var(--tekst-l); font-weight: 620; letter-spacing: -.008em; }
.signaal .uitleg { font-size: var(--tekst-m); color: var(--text-secondary); max-width: 74ch; }
.signaal .wie { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
  font-size: var(--tekst-s); color: var(--text-muted); }
.signaal .wie svg { width: 13px; height: 13px; }

.signaal .termijn { flex: none; text-align: right; min-width: 104px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--tekst-m); color: var(--text-secondary); }
.signaal .termijn b { font-size: var(--tekst-xl); font-weight: 660; letter-spacing: -.02em; }
.signaal .termijn .teveel { color: var(--danger); font-weight: 600; }
.signaal .termijn .geen { color: var(--text-muted); font-size: var(--tekst-s); }
.signaal .termijn .datum { font-size: var(--tekst-xs); color: var(--text-muted);
  font-variant-numeric: tabular-nums; }
.signaallink > svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }

@media (max-width: 767px) {
  .signaallink { flex-wrap: wrap; }
  .signaal .termijn { text-align: left; min-width: 0; flex-direction: row; align-items: baseline;
    gap: var(--ruimte-2); width: 100%; padding-left: calc(3px + var(--ruimte-4)); }
  .signaallink > svg { display: none; }
}

/* --- tabelkoppen die sorteren ------------------------------------------- */
table.gegevens .kopknop { display: inline-flex; align-items: center; gap: 4px;
  border-radius: var(--radius-1); }
table.gegevens .kopknop svg { width: 12px; height: 12px; }
table.gegevens .kopknop:focus-visible { outline: var(--focusring) solid var(--svs-green-700);
  outline-offset: 2px; }

/* --- vinkjes in een menu (kolomkeuze) ----------------------------------- */
.menuvink { display: flex; align-items: center; gap: var(--ruimte-3);
  min-height: 38px; padding: 0 var(--ruimte-3); border-radius: var(--radius-1);
  font-size: var(--tekst-m); cursor: pointer; }
.menuvink:hover { background: var(--surface-sunken); }
.menuvink input { width: 17px; height: 17px; accent-color: var(--svs-green-800); }

/* Duwt een element naar het einde van een flexrij. */
.rij-eind { margin-left: auto; }

/* ---------------------------------------------------------------- wizard
   Stappen links, inhoud rechts. Op smalle schermen gaat de stapbalk erboven en
   scrollt hij horizontaal: je moet altijd kunnen zien waar je bent. */
.wizard { display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--ruimte-6); align-items: start; }
.wizard .stapbalk { position: sticky; top: var(--ruimte-5); }
.wizard .stapkop { font-size: var(--tekst-sectie); letter-spacing: -.015em;
  margin-bottom: var(--ruimte-2); }
.wizard .kaart-lijf > .toelichting { color: var(--text-secondary); max-width: 68ch;
  margin-bottom: var(--ruimte-5); }
.wizardvoet { display: flex; align-items: center; gap: var(--ruimte-2); }

/* Controlescherm: per blok terug kunnen springen naar wat er niet klopt. */
.controle { display: flex; flex-direction: column; gap: var(--ruimte-4); }
.controle section { border: 1px solid var(--border); border-radius: var(--radius-3);
  overflow: hidden; }
.controle .blokkop { display: flex; align-items: center; gap: var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-4); background: var(--surface-subtle);
  border-bottom: 1px solid var(--border); }
.controle .blokkop h3 { flex: 1; font-size: var(--tekst-l); }
.controle dl { display: grid; grid-template-columns: minmax(140px, 34%) minmax(0, 1fr);
  gap: 0; }
.controle dt, .controle dd { padding: var(--ruimte-3) var(--ruimte-4);
  border-bottom: 1px solid var(--border); }
.controle dt { color: var(--text-secondary); font-size: var(--tekst-m); }
.controle dd { font-weight: 550; }
.controle dl > :nth-last-child(-n+2) { border-bottom: none; }
.controle .ontbreekt { color: var(--warning); font-weight: 600; }

@media (max-width: 1023px) {
  .wizard { grid-template-columns: minmax(0, 1fr); }
  .wizard .stapbalk { position: static; flex-direction: row; overflow-x: auto;
    scrollbar-width: none; padding-bottom: var(--ruimte-2); }
  .wizard .stapbalk button { width: auto; white-space: nowrap; }
}
@media (max-width: 767px) {
  .wizard .stapbalk .naam { display: none; }
  .wizardvoet { flex-wrap: wrap; }
  .wizardvoet .knop { flex: 1; }
}

/* ---------------------------------------------------------------- persoonspagina
   Eén kop met naam, functie en status; daaronder de tabbladen met de peildatum
   ernaast. De peildatum hoorde niet in een eigen band: hij hoort bij het blad
   dat je bekijkt. */
/* Minimaal 24px hoog: WCAG 2.2 stelt die ondergrens aan een losstaand doel, en
   deze link staat niet in een zin maar op zichzelf. */
.kruimel { display: inline-flex; align-items: center; gap: 6px; min-height: 24px;
  margin-bottom: var(--ruimte-3); padding: 2px 6px 2px 0;
  font-size: var(--tekst-m); font-weight: 600; color: var(--text-secondary);
  text-decoration: none; }
.kruimel:hover { color: var(--text-primary); }
.kruimel svg { width: 15px; height: 15px; }

.persoonskop { display: flex; align-items: center; gap: var(--ruimte-4); flex-wrap: wrap;
  margin-bottom: var(--ruimte-5); }
.persoonskop .kopgroep { flex: 1; min-width: 220px; }
.persoonskop h1 { font-size: var(--tekst-pagina); letter-spacing: -.022em; }
.persoonskop .onder { display: flex; flex-wrap: wrap; gap: var(--ruimte-2);
  margin-top: 4px; color: var(--text-secondary); font-size: var(--tekst-l); }
.persoonskop .onder > span + span::before { content: "·"; margin-right: var(--ruimte-2);
  color: var(--border-strong); }
.kopstatus { display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap; }

.bladbalk { display: flex; align-items: flex-end; gap: var(--ruimte-4);
  border-bottom: 1px solid var(--border); margin-bottom: var(--ruimte-5); }
.bladbalk .tabs { flex: 1; min-width: 0; border-bottom: none; }
.bladbalk .peil { display: flex; align-items: center; gap: var(--ruimte-2);
  padding-bottom: var(--ruimte-2); flex: none; }
.bladbalk .peil label { font-size: var(--tekst-xs); font-weight: 620;
  color: var(--text-muted); white-space: nowrap; }
.bladbalk .peil input { min-height: 36px; padding: 0 var(--ruimte-3);
  border: 1px solid var(--border-interactive); border-radius: var(--radius-2);
  background: var(--surface); font-size: var(--tekst-m); font-weight: 600;
  font-variant-numeric: tabular-nums; }
.bladbalk .peil input:focus-visible { outline: none; border-color: var(--svs-green-700);
  box-shadow: 0 0 0 var(--focusring) var(--svs-green-100); }

/* Historische stand: onmiskenbaar anders, zodat niemand oude gegevens voor actueel aanziet. */
.persoonspagina.historisch .paneel { position: relative; }
.persoonspagina.historisch .paneel::before {
  content: ""; position: absolute; inset: calc(var(--ruimte-3) * -1); pointer-events: none;
  border: 2px dashed var(--warning-border); border-radius: var(--radius-4);
}
.persoonspagina.historisch .bladbalk .peil input { border-color: var(--warning-border);
  background: var(--warning-bg); }

.tabs .stip { width: 7px; height: 7px; }
.tabs .stip.letop { background: var(--warning); }
.tabs .stip.gevaar { background: var(--danger); }

@media (max-width: 767px) {
  .bladbalk { flex-direction: column; align-items: stretch; gap: var(--ruimte-2); }
  .bladbalk .peil { padding-bottom: var(--ruimte-3); }
}

/* Een gegenereerd wachtwoord: groot genoeg om over te nemen, met een kopieerknop
   omdat overtypen van willekeurige tekens misgaat. */
.geheim { display: flex; align-items: center; gap: var(--ruimte-3); flex-wrap: wrap;
  padding: var(--ruimte-4); border: 1px solid var(--border-strong);
  border-radius: var(--radius-2); background: var(--surface-sunken); }
.geheim code { flex: 1; min-width: 180px; font-size: var(--tekst-xl); font-weight: 600;
  letter-spacing: .04em; word-break: break-all;
  font-family: var(--letter-vast); }

/* Gegevenstabel op een telefoon: geen zijwaarts schuiven maar per regel een kaartje.
   De kolomkop verhuist naar het label ervoor — daar zijn de data-kop-attributen voor.
   Zijwaarts schuiven op 375px betekent dat de helft van de gegevens buiten beeld
   staat zonder dat je dat ziet. */
@media (max-width: 767px) {
  table.gegevens, table.gegevens tbody, table.gegevens tr, table.gegevens td { display: block; }
  table.gegevens thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
  table.gegevens tbody tr {
    padding: var(--ruimte-3) var(--ruimte-4);
    border-bottom: 1px solid var(--border);
  }
  table.gegevens tbody tr:last-child { border-bottom: none; }
  table.gegevens td {
    display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-3);
    height: auto; min-height: 32px; padding: 3px 0; border-bottom: none; text-align: left;
  }
  table.gegevens td::before {
    content: attr(data-kop); flex: none;
    font-size: var(--tekst-xs); font-weight: 620; color: var(--text-muted);
  }
  /* De eerste cel is de identiteit van de regel: die krijgt geen label en staat vol. */
  table.gegevens td:first-child { padding-bottom: var(--ruimte-2); }
  table.gegevens td:first-child::before { content: none; }
  table.gegevens td:first-child .persoonscel { flex: 1; }
  table.gegevens td.num { text-align: left; }
  table.gegevens .rijacties { opacity: 1; }
}

/* Dezelfde gegevenslijst, maar als definitielijst: label links, waarde rechts.
   In een smal zijpaneel leest dat beter dan kolommen naast elkaar. */
dl.gegevenslijst { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
  gap: 0; margin-bottom: var(--ruimte-5); }
dl.gegevenslijst dt, dl.gegevenslijst dd { padding: var(--ruimte-3) 0;
  border-bottom: 1px solid var(--border); }
dl.gegevenslijst dt { color: var(--text-secondary); font-size: var(--tekst-m); }
dl.gegevenslijst dd { font-weight: 550; }
dl.gegevenslijst > :nth-last-child(-n+2) { border-bottom: none; }

/* De regel staat in kern/paneel.css. Hij stond hier ook, als eenvoudige flexrij,
   en overschreef daardoor de uitgebreide versie — twee definities van hetzelfde
   ding, waarvan de laatste won. Eén component, één plek. */

/* ---------------------------------------------------------------- teamkalender
   Eén rij per persoon, één kolom per dag. De vraag is niet "wanneer is deze
   aanvraag" maar "hoeveel man is er die week weg" — daarom naast elkaar. */
.verlofsectie { margin-bottom: var(--ruimte-7); }
.maandknoppen { display: flex; align-items: center; gap: var(--ruimte-1); }

.kalender { --dagen: 31; }
.kalender .tabelwikkel, .kalender .kaart-lijf { overflow-x: auto; }
.kal-rij { display: grid; grid-template-columns: 190px minmax(560px, 1fr);
  align-items: center; gap: var(--ruimte-3); }
.kal-rij + .kal-rij { border-top: 1px solid var(--border); }
.kal-naam { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0;
  padding: var(--ruimte-2) 0; font-size: var(--tekst-m); font-weight: 550; }
.kal-naam span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kal-dagen { display: grid; grid-template-columns: repeat(var(--dagen), minmax(18px, 1fr));
  grid-template-rows: minmax(30px, auto); position: relative; }
.kal-dag { grid-row: 1; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kal-dag:last-of-type { border-right: 1px solid var(--border); }
.kal-dag.weekend { background: var(--surface-sunken); }
.kal-dag.vandaag { box-shadow: inset 2px 0 0 var(--svs-green-700); }
.kal-kop { border-bottom: 1px solid var(--border); }
.kal-kop .kal-dag { padding: var(--ruimte-2) 0; }
.kal-kop .wd { font-size: var(--tekst-xs); color: var(--text-muted);
  letter-spacing: .02em; }
.kal-kop .nr { font-size: var(--tekst-xs); font-weight: 620; color: var(--text-secondary); }
.kal-kop .kal-dag.vandaag .nr { color: var(--svs-green-800); }

.kal-balk { grid-row: 1; align-self: center; height: 22px; margin: 4px 1px;
  display: flex; align-items: center; padding: 0 6px; overflow: hidden;
  border-radius: var(--radius-1); font-size: 11px; font-weight: 600; white-space: nowrap; }
.kal-balk.goedgekeurd { background: var(--svs-green-100); color: var(--svs-green-800);
  border: 1px solid var(--svs-green-700); }
/* Nog te beoordelen: gestreept, zodat het verschil ook zonder kleur zichtbaar is. */
.kal-balk.ingediend { color: var(--information); border: 1px dashed var(--information-border);
  background: repeating-linear-gradient(135deg, var(--information-bg),
    var(--information-bg) 5px, transparent 5px, transparent 10px); }
.kal-balk .kal-tekst { overflow: hidden; text-overflow: ellipsis; }

.kal-legenda { display: flex; gap: var(--ruimte-4); flex-wrap: wrap;
  font-size: var(--tekst-s); color: var(--text-secondary); }
.kal-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.kal-legenda .vlak { width: 16px; height: 12px; border-radius: var(--radius-1); }
.kal-legenda .vlak.goedgekeurd { background: var(--svs-green-100);
  border: 1px solid var(--svs-green-700); }
.kal-legenda .vlak.ingediend { border: 1px dashed var(--information-border);
  background: repeating-linear-gradient(135deg, var(--information-bg),
    var(--information-bg) 4px, transparent 4px, transparent 8px); }
.kal-legenda .vlak.weekendvoorbeeld { background: var(--surface-sunken);
  border: 1px solid var(--border); }

@media (max-width: 767px) {
  .kal-rij { grid-template-columns: 120px minmax(480px, 1fr); }
  .kal-naam .avatar { display: none; }
}

/* ---------------------------------------------------------------- statrij */
.statrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: var(--ruimte-3); margin-bottom: var(--ruimte-5); }

/* Een afwijking is geen gewoon getal: hij hoort op te vallen zonder te schreeuwen. */
.afwijking { font-variant-numeric: tabular-nums; font-weight: 640;
  padding: 2px 7px; border-radius: var(--radius-1); }
.afwijking.letop { background: var(--warning-bg); color: var(--warning); }
.afwijking.gevaar { background: var(--danger-bg); color: var(--danger); }

/* ---------------------------------------------------------------- dagdetail
   Uitklapbaar per dag: de samenvatting is genoeg tot je wilt weten waar de uren
   vandaan komen. `details` doet het toetsenbord en de schermlezer vanzelf goed. */
.dagen { display: flex; flex-direction: column; }
.dag { border-bottom: 1px solid var(--border); }
.dag:last-child { border-bottom: none; }
.dag > summary {
  display: flex; align-items: center; gap: var(--ruimte-3);
  min-height: var(--raakvlak); padding: var(--ruimte-2) var(--ruimte-2);
  border-radius: var(--radius-2); cursor: pointer; list-style: none;
}
.dag > summary::-webkit-details-marker { display: none; }
.dag > summary:hover { background: var(--surface-sunken); }
.dag > summary:focus-visible { outline: var(--focusring) solid var(--svs-green-700);
  outline-offset: -2px; }
.dag.weekend > summary .dagdatum { color: var(--warning); }
.dagdatum { font-weight: 600; font-size: var(--tekst-m); min-width: 108px; }
.dagsoorten { flex: 1; min-width: 0; font-size: var(--tekst-s); color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daguren { font-weight: 640; font-variant-numeric: tabular-nums; }
.dag > summary > svg { width: 15px; height: 15px; color: var(--text-muted);
  transition: transform var(--duur-snel); }
.dag[open] > summary > svg { transform: rotate(180deg); }

.dagregels { padding: 0 var(--ruimte-2) var(--ruimte-3) var(--ruimte-4);
  border-left: 2px solid var(--svs-green-100); margin-left: var(--ruimte-3); }
.dagregel { display: flex; align-items: baseline; gap: var(--ruimte-3);
  padding: var(--ruimte-2) 0; font-size: var(--tekst-m); }
.dagregel > span:first-child { min-width: 150px; }
.dagregel .omschrijving { flex: 1; min-width: 0; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dagregel .num { font-variant-numeric: tabular-nums; font-weight: 600; }

@media (max-width: 767px) {
  .dagdatum { min-width: 84px; font-size: var(--tekst-s); }
  .dagsoorten { display: none; }
  .dagregel { flex-wrap: wrap; }
  .dagregel > span:first-child { min-width: 0; }
}

/* ---------------------------------------------------------------- inhuur */
.inhuurlijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
  gap: var(--ruimte-4); align-items: start; }
.inhuurkaart .kaart-kop .kopgroep { flex: 1; min-width: 0; }
.inhuurkaart .kaart-kop h3 { font-size: var(--tekst-xl); }
.inhuurkaart.inactief { opacity: .72; }
.inhuurkaart .sectiekop { margin-top: var(--ruimte-4); }
.inhuurkaart .sectiekop h4 { flex: 1; font-size: var(--tekst-m); font-weight: 620;
  color: var(--text-secondary); }
.badgerij { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }

@media (max-width: 767px) {
  .inhuurlijst { grid-template-columns: minmax(0, 1fr); }
}

/* Losse toelichting binnen een kaart of dialoog. */
.kaart-lijf > .toelichting, .dialoog-lijf > .toelichting, .paneel .toelichting {
  margin: 0 0 var(--ruimte-4); max-width: 74ch;
  color: var(--text-secondary); font-size: var(--tekst-m);
}

/* ---------------------------------------------------------------- portaal
   Het scherm van de medewerker zelf. Op een telefoon één kolom in leesvolgorde;
   op een breed scherm twee kolommen, want dan past het naslagwerk naast elkaar. */
.taken { display: flex; flex-direction: column; gap: var(--ruimte-2);
  margin-bottom: var(--ruimte-5); }
.taken .melding { margin: 0; }

.portaalraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: var(--ruimte-4); align-items: start; margin-top: var(--ruimte-4); }
.portaalraster > .kaart { min-width: 0; }
.portaalraster .kaart-kop h2 { flex: 1; font-size: var(--tekst-xl); letter-spacing: -.01em; }

/* Kerngetallen van de urenstaat: groot genoeg om op een dak af te lezen. */
.kerngetallen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(112px, 100%), 1fr));
  gap: var(--ruimte-4) var(--ruimte-3); margin-bottom: var(--ruimte-5); }
.kerngetal .waarde { display: block; margin-top: 2px;
  font-size: var(--tekst-sectie); font-weight: 660; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.kerngetal .extra { display: block; font-size: var(--tekst-xs); color: var(--text-muted); }
.kerngetal.let .waarde { color: var(--warning); }

/* Verlofpotten: de ring toont wat er over is, het getal ernaast zegt hoeveel. */
.potten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--ruimte-4); }
.pot { display: flex; align-items: center; gap: var(--ruimte-3); min-width: 0; }
.potinfo { min-width: 0; }
.potnaam { display: block; font-size: var(--tekst-m); font-weight: 620; }
.potsaldo { display: block; font-size: var(--tekst-xl); font-weight: 660;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.potsaldo span { font-size: var(--tekst-s); font-weight: 500; color: var(--text-secondary); }

/* De urenkaart is het werkstuk van dit scherm en mag over de volle breedte. */
#urenkaart { margin-bottom: var(--ruimte-4); }
#urenkaart .kaart-kop h2 { flex: 1; font-size: var(--tekst-xl); }

@media (max-width: 767px) {
  .portaalraster { grid-template-columns: minmax(0, 1fr); }
  .kerngetallen { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .potten { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- inrichtingsstappen
   Genummerde stappen naast een formulier. Het nummer is hier geen versiering maar de
   volgorde waarin je ze in een ander tabblad afwerkt. */
.stappen { list-style: none; counter-reset: stap; margin: 0 0 var(--ruimte-4); padding: 0; }
.stappen li { counter-increment: stap; position: relative;
  padding: var(--ruimte-3) 0 var(--ruimte-3) var(--ruimte-7);
  border-bottom: 1px solid var(--border); }
.stappen li:last-child { border-bottom: none; }
.stappen li::before {
  content: counter(stap); position: absolute; left: 0; top: var(--ruimte-3);
  display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--svs-green-100); color: var(--svs-green-800);
  font-size: var(--tekst-xs); font-weight: 700;
}
.stappen .stapkop { display: block; font-size: var(--tekst-m); font-weight: 620; }
.stappen .stapuitleg { display: block; margin-top: 2px;
  font-size: var(--tekst-m); color: var(--text-secondary); }

.foutregel { color: var(--danger); }

/* ---------------------------------------------------------------- tekenveld
   Voor een vinger gebouwd; met een muis werkt het ook. `touch-action: none` is geen
   detail: zonder die regel scrolt de pagina weg onder de hand die tekent. */
.tekenveld { position: relative; background: var(--surface);
  border: 1px solid var(--border-interactive); border-radius: var(--radius-2);
  overflow: hidden; }
.tekenveld.beschreven { border-color: var(--svs-green-700); }
.tekendoek { display: block; width: 100%; height: 190px; touch-action: none;
  cursor: crosshair; }

/* De lijn waarop je tekent. Puur een aanwijzing waar de handtekening hoort te komen. */
.tekenlijn { position: absolute; left: var(--ruimte-5); right: var(--ruimte-5); bottom: 46px;
  height: 1px; background: var(--border-strong); pointer-events: none; }
.tekenveld.beschreven .tekenlijn { opacity: .35; }
.tekenwis { position: absolute; right: var(--ruimte-2); bottom: var(--ruimte-2); }

.ondertekeninhoud { border: 1px solid var(--border); border-radius: var(--radius-2);
  margin-bottom: var(--ruimte-4); overflow: hidden; }
.ondertekenregel { display: flex; align-items: baseline; gap: var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-4); border-bottom: 1px solid var(--border); }
.ondertekenregel:last-child { border-bottom: none; }
.ondertekenregel .wat { flex: 1; min-width: 0; font-weight: 600; }
.ondertekenregel .detail { font-size: var(--tekst-m); color: var(--text-secondary);
  font-variant-numeric: tabular-nums; }

/* De verklaring waaronder getekend wordt. Die moet je lezen vóór het veld, niet erna —
   vandaar dat hij visueel zwaarder is dan een gewone hulptekst. */
.verklaring { display: flex; gap: var(--ruimte-3); margin-bottom: var(--ruimte-5);
  padding: var(--ruimte-4); border-radius: var(--radius-2);
  background: var(--svs-green-50); border: 1px solid var(--svs-green-100); }
.verklaring svg { width: 18px; height: 18px; flex: none; color: var(--svs-green-800); }
.verklaring p { margin: 0; font-size: var(--tekst-l); line-height: 1.5; }

/* Een gezette handtekening in het dossier. */
.gezethandtekening { border: 1px solid var(--border); border-radius: var(--radius-2);
  background: var(--surface); padding: var(--ruimte-3); max-width: 340px; }
.gezethandtekening img { display: block; width: 100%; height: auto; }
.bewijslijst { display: grid; grid-template-columns: minmax(140px, 34%) minmax(0, 1fr);
  margin-top: var(--ruimte-3); font-size: var(--tekst-m); }
.bewijslijst dt, .bewijslijst dd { padding: 6px 0; border-bottom: 1px solid var(--border); }
.bewijslijst dt { color: var(--text-secondary); }
.bewijslijst dd { font-variant-numeric: tabular-nums; }
.bewijslijst > :nth-last-child(-n+2) { border-bottom: none; }

/* ---------------------------------------------------------------- bouwer
   Links bouwen, rechts het voorbeeld. Het voorbeeld blijft in beeld tijdens het
   scrollen: zonder dat verlies je de koppeling tussen wat je doet en wat het wordt. */
.bouwer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ruimte-5); align-items: start; }
.bouwkant { min-width: 0; }
.voorbeeldkant { min-width: 0; position: sticky; top: var(--ruimte-5); }

.bouwlijst { display: flex; flex-direction: column; gap: var(--ruimte-2);
  margin-bottom: var(--ruimte-3); }

.bouwregel { display: flex; align-items: center; gap: var(--ruimte-2);
  padding: var(--ruimte-2); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-2);
  transition: border-color var(--duur-snel); }
.bouwregel:hover { border-color: var(--border-interactive); }
.bouwregel.actief { border-color: var(--svs-green-700); background: var(--svs-green-50); }

/* Pijltjes in plaats van slepen. Ze missen nooit en werken met het toetsenbord. */
.bouwvolgorde { display: flex; flex-direction: column; gap: 2px; flex: none; }
/* 24px is de ondergrens uit WCAG 2.2 voor een doel dat op zichzelf staat. Deze twee
   staan pal op elkaar, dus er is geen ruimte-uitzondering om op terug te vallen. */
.bouwvolgorde .icoonknop { width: 28px; height: 24px; }
.bouwvolgorde .icoonknop svg { width: 14px; height: 14px; }
.bouwvolgorde .icoonknop[disabled] { opacity: .25; pointer-events: none; }

.bouwknop { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  padding: var(--ruimte-2) var(--ruimte-3); background: none; border: none;
  text-align: left; border-radius: var(--radius-1); }
.bouwknop:hover { background: var(--surface-sunken); }
.bouwlabel { font-size: var(--tekst-l); font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bouwsoort { font-size: var(--tekst-s); color: var(--text-secondary); }

/* Het voorbeeld is opzettelijk niet interactief: het is een spiegel, geen formulier. */
.voorbeeld .kaart-lijf { background: var(--surface-subtle); }
.voorbeeld .veld input, .voorbeeld .veld select, .voorbeeld .veld textarea {
  background: var(--surface); pointer-events: none; }
.vbkop { margin: var(--ruimte-5) 0 var(--ruimte-3); font-size: var(--tekst-xl); }
.vbkop:first-child { margin-top: 0; }
.vbuitleg { margin: 0 0 var(--ruimte-4); color: var(--text-secondary);
  font-size: var(--tekst-m); }
.schaal { display: flex; gap: var(--ruimte-2); }
.schaalknop { display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--border-interactive); border-radius: var(--radius-2);
  background: var(--surface); font-weight: 620; }
.vbtekenen { display: flex; align-items: center; gap: var(--ruimte-2);
  margin-top: var(--ruimte-5); padding: var(--ruimte-3) var(--ruimte-4);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-2);
  color: var(--text-secondary); font-size: var(--tekst-m); }
.vbtekenen svg { width: 16px; height: 16px; }

/* De soortkiezer: wat het onderdeel dóét, niet hoe het heet. */
.soortkiezer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: var(--ruimte-2); }
.soortknop { display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: var(--ruimte-3); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-2);
  transition: border-color var(--duur-snel), background var(--duur-snel); }
.soortknop:hover { border-color: var(--border-interactive); background: var(--surface-sunken); }
.soortknop.actief { border-color: var(--svs-green-700); background: var(--svs-green-50); }
.soortnaam { font-size: var(--tekst-l); font-weight: 620; }
.soortuitleg { font-size: var(--tekst-s); color: var(--text-secondary); }

@media (max-width: 1023px) {
  .bouwer { grid-template-columns: minmax(0, 1fr); }
  .voorbeeldkant { position: static; }
}

/* ---------------------------------------------------------------- merk
   Het beeldmerk uit het logo, met CSS uitgesneden — één bestand, geen extra assets.
   316,3% = 2249 / 711, de breedte van de vlam in het bronbestand. Dit is een
   merkelement en hoort daarom bij de kern, niet bij de tijdelijke compatibiliteitslaag.
*/
.merk {
  flex: none; width: 28px; height: 45px;
  background: url("/static/svs-logo.png") no-repeat 0 0 / 316.3% auto;
}
.merk.groot { width: 40px; height: 65px; }
.logo-vol { display: block; width: 148px; height: auto; }

/* ---------------------------------------------------------------- taaktijdlijn
   De vraag bij een checklist is niet hoe hij eruitziet maar wanneer wat valt. Dag 0 is
   het anker; wat ervoor moet en wat erna komt, valt er visueel omheen. */
.taaklijn { position: relative; padding-left: var(--ruimte-5); }
.taaklijn::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 2px; border-radius: var(--radius-pil); background: var(--border); }

.lijnmoment { position: relative; padding-bottom: var(--ruimte-5); }
.lijnmoment:last-child { padding-bottom: 0; }
.lijnkop { display: flex; align-items: center; gap: var(--ruimte-2);
  margin-bottom: var(--ruimte-2); }
.lijnstip { position: absolute; left: calc(var(--ruimte-5) * -1 + 1px); top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-strong); }
.lijnwanneer { font-size: var(--tekst-m); font-weight: 620; color: var(--text-secondary); }

/* De startdatum is het ijkpunt en mag dat laten zien. */
.lijnmoment.start .lijnstip { background: var(--svs-green-700);
  border-color: var(--svs-green-700); }
.lijnmoment.start .lijnwanneer { color: var(--svs-green-800); }
.lijnmoment.voor .lijnstip { border-color: var(--information-border); }

.lijntaken { display: flex; flex-direction: column; gap: 2px; }
.lijntaak { display: flex; align-items: baseline; gap: var(--ruimte-3);
  padding: var(--ruimte-2) var(--ruimte-3); border-radius: var(--radius-1);
  background: var(--surface-subtle); font-size: var(--tekst-m); }
.lijntaak > span:first-child { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- checklist
   Een taak is een vinkje met context eromheen: wanneer hij moet, van wie hij is, en of
   hij te laat is. Dat laatste hoort niet subtiel te zijn. */
.checklistkaart + .checklistkaart { margin-top: var(--ruimte-4); }
.checklistkaart .voortgang { margin-bottom: var(--ruimte-4); }

.taakregel { display: flex; align-items: flex-start; gap: var(--ruimte-3);
  padding: var(--ruimte-3) 0; border-bottom: 1px solid var(--border); }
.taakregel:last-child { border-bottom: none; }
.taakvink { flex: 1; min-width: 0; display: flex; align-items: flex-start;
  gap: var(--ruimte-3); cursor: pointer; }
.taakvink input { width: 20px; height: 20px; margin-top: 2px; flex: none;
  accent-color: var(--svs-green-800); }
.taaktekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.taaktitel { font-size: var(--tekst-l); font-weight: 600; }
.taakuitleg { font-size: var(--tekst-m); color: var(--text-secondary); }
.taakmeta { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); margin-top: 2px;
  font-size: var(--tekst-s); color: var(--text-muted); }
.taakmeta .telaat { color: var(--danger); font-weight: 620; }
.taakacties { display: flex; gap: var(--ruimte-2); flex-wrap: wrap; flex: none; }

/* Gedaan blijft leesbaar maar treedt terug; niet van toepassing wordt doorgehaald. */
.taakregel.gedaan .taaktitel { color: var(--text-secondary); }
.taakregel.nvt .taaktitel { text-decoration: line-through; color: var(--text-muted); }
.taakregel.telaat { background: var(--danger-bg); border-radius: var(--radius-2);
  padding-left: var(--ruimte-3); padding-right: var(--ruimte-3);
  border-bottom-color: transparent; }

/* ---------------------------------------------------------------- middelen kiezen */
.middelkeuze { display: flex; flex-direction: column; gap: var(--ruimte-4);
  margin-bottom: var(--ruimte-5); max-height: 46vh; overflow-y: auto; }
.middelgroep { display: flex; flex-direction: column; gap: 2px; }
.middelgroep > .label { margin-bottom: var(--ruimte-1); }
.middelvink { display: flex; align-items: flex-start; gap: var(--ruimte-3);
  padding: var(--ruimte-2) var(--ruimte-3); border: 1px solid var(--border);
  border-radius: var(--radius-2); cursor: pointer;
  transition: border-color var(--duur-snel), background var(--duur-snel); }
.middelvink:hover { border-color: var(--border-interactive); background: var(--surface-sunken); }
.middelvink:has(input:checked) { border-color: var(--svs-green-700);
  background: var(--svs-green-50); }
.middelvink input { width: 20px; height: 20px; margin-top: 1px; flex: none;
  accent-color: var(--svs-green-800); }
.middelvink .titel { display: block; font-weight: 600; }
.middelvink .onder { display: block; font-size: var(--tekst-s); color: var(--text-secondary); }

/* --- Verloop van een ziekmelding ----------------------------------------------------
   Een lijst en geen tabel: het gaat om de volgorde van de stappen, niet om het
   vergelijken van kolommen. De hersteldstap krijgt als enige groen, want dat is het
   einde van het verhaal en niet zomaar de volgende regel. */
.verlooplijst { list-style: none; margin: 0; padding: 0; }
.verloopstap { display: grid; grid-template-columns: 86px 1fr; gap: var(--ruimte-3);
  align-items: baseline; padding: var(--ruimte-2) 0 var(--ruimte-2) var(--ruimte-4);
  position: relative; }
.verloopstap::before { content: ""; position: absolute; left: 3px; top: 12px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--warning); }
.verloopstap::after { content: ""; position: absolute; left: 6px; top: 20px; bottom: -8px;
  width: 1px; background: var(--border); }
.verloopstap:last-child::after { display: none; }
.verloopstap.gemeld::before { background: var(--danger); }
.verloopstap.hersteld::before { background: var(--svs-green-700); }
.verloopstap .stapdatum { font-size: var(--tekst-m); color: var(--text-secondary); }
.verloopstap .stapwat { display: flex; align-items: baseline; gap: var(--ruimte-2);
  flex-wrap: wrap; }
.verloopstap .stapnotitie { grid-column: 2; font-size: var(--tekst-m);
  color: var(--text-secondary); }

/* --- Gesprekken ---------------------------------------------------------------------
   De regel toont wie, wanneer en of het al vaststaat. Concept is geel en niet grijs:
   een verslag dat blijft liggen is een openstaande taak, geen archiefstuk. */
.gesprekkenlijst .gesprekregel { display: grid; align-items: center; gap: var(--ruimte-3);
  grid-template-columns: minmax(200px, 2fr) 110px minmax(150px, auto) max-content;
  padding: var(--ruimte-3) var(--ruimte-4); border-bottom: 1px solid var(--border); }
.gesprekkenlijst .gesprekregel:last-child { border-bottom: none; }
.gesprekwie { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; }
.gesprekwie > span { display: flex; flex-direction: column; min-width: 0; }
.gesprekwie .titel { font-weight: 600; text-decoration: none; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gesprekwie .titel:hover { text-decoration: underline; }
.gesprekwie .onder { font-size: var(--tekst-m); color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gesprekdatum { font-size: var(--tekst-m); color: var(--text-secondary); white-space: nowrap; }
.gesprekstand { display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap; }

@media (max-width: 899px) {
  .gesprekkenlijst .gesprekregel { grid-template-columns: 1fr auto; row-gap: var(--ruimte-2); }
  .gesprekwie { grid-column: 1 / -1; }
  .gesprekregel .rijacties { justify-content: flex-end; }
}

/* --- Het verslagformulier -----------------------------------------------------------
   Een kolom, want je vult dit in terwijl je praat. Twee kolommen dwingen je oog heen en
   weer op het moment dat je aandacht bij de ander hoort te zijn. */
.verslag .velden { grid-template-columns: 1fr; max-width: 720px; }
.verslag .verslagkop { font-size: var(--tekst-xl); margin: var(--ruimte-5) 0 0;
  padding-top: var(--ruimte-4); border-top: 1px solid var(--border); }
.verslag .velden > .verslagkop:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.verslag .verslaguitleg { color: var(--text-secondary); font-size: var(--tekst-m);
  margin: 0 0 var(--ruimte-2); }
.verslag textarea { min-height: 110px; }

/* Een vastgesteld verslag leest als een document, niet als een formulier: de
   vraag als gegraveerd kopje, het antwoord eronder in leestekst. Dezelfde
   leeskolom als de artikeltekst van het reglement, want het is hetzelfde soort
   stuk — iets wat vaststaat en gelezen wordt. */
.verslag .verslaglezen { max-inline-size: 72ch; }
.verslag .verslaglezen .verslagkop { font-size: var(--tekst-xl);
  margin: var(--ruimte-5) 0 0; padding-top: var(--ruimte-4);
  border-top: 1px solid var(--border); }
.verslag .verslaglezen > .verslagkop:first-child { margin-top: 0; padding-top: 0;
  border-top: none; }
.verslagvraag { margin-bottom: var(--ruimte-5); }
.verslagvraag .vraag { display: block; font-size: var(--tekst-m); font-weight: 620;
  color: var(--text-secondary); margin-bottom: 4px; }
.verslagvraag .antwoord { margin: 0 0 var(--ruimte-3); }
.verslagvraag .antwoord:last-child { margin-bottom: 0; }
.verslagvraag .antwoord.leeg { color: var(--text-muted); font-style: italic; }
.veldlabel { display: block; font-size: var(--tekst-m); font-weight: 620;
  margin-bottom: 6px; }
.vereist { color: var(--danger); margin-left: 2px; }

/* Een schaal als knoppenrij: je ziet meteen wat er gekozen is en wat de uitersten zijn. */
.schaalkiezer { display: flex; gap: var(--ruimte-2); flex-wrap: wrap; }
.schaalstap { position: relative; }
.schaalstap input { position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer; }
.schaalstap span { display: flex; align-items: center; justify-content: center;
  min-width: 46px; min-height: 44px; border: 1px solid var(--border-interactive);
  border-radius: var(--radius-2); background: var(--surface); font-weight: 620;
  font-variant-numeric: tabular-nums; }
.schaalstap input:checked + span { background: var(--svs-green-100);
  border-color: var(--svs-green-700); color: var(--svs-green-800); }
.schaalstap input:focus-visible + span { outline: 2px solid var(--svs-green-700);
  outline-offset: 2px; }
.schaalstap:hover span { border-color: var(--svs-green-700); }


/* ============================================================================
   Uit de oude laag overgenomen — contractspoor, tijdlijn, certificaatmeter,
   dossierrijen, portaalrijen.

   Dit stond in `stijl.css`, een brug die de oude tokennamen naar de nieuwe
   vertaalde zodat de niet-omgebouwde schermen bleven werken. Die brug is hier
   opgeheven: de regels staan nu in de componentenlaag met de echte tokennamen,
   en er is geen tweede stelsel meer dat later laadt en stilzwijgend wint.
   ========================================================================= */
/* ---------------------------------------------------------------- opstarten */
/* Het opstartteken.

   Hier stonden drie pulserende bolletjes, daarna een schuivende balk. Beide zijn
   loze beweging: het systeem weet niet hoe lang het duurt, dus een bewegend
   element doet alsof er voortgang is die er niet is.

   Wat er nu staat is wat er te melden valt, in woorden. Dat past ook beter bij
   een systeem waarin alles een label heeft. De echte laadtoestanden zijn de
   skeletten per scherm; dit teken is alleen voor de seconde vóór app.js draait.
   ------------------------------------------------------------------------- */
.opstart { display: flex; flex-direction: column; align-items: center;
  gap: var(--ruimte-3); padding-top: 40vh; color: var(--text-muted);
  font-size: var(--tekst-s); letter-spacing: .06em; text-transform: uppercase; }
.opstart::after { content: "Bezig met laden"; }
.opstart-punt { display: none; }

/* `opkomen` staat in kern/basis.css; hier stond een tweede definitie die de
   eerste stil overschreef. */

.minisignalen { display: flex; flex-direction: column; gap: var(--ruimte-2); }
.minisignaal { display: flex; gap: var(--ruimte-3); align-items: baseline; }
/* Een lampje in plaats van een gekleurde zijbalk. Die balk was het herkenbaarste
   kenmerk van automatisch gegenereerde interfaces, en erger: de kleur was de enige
   drager van de urgentie. Een stip met een vaste maat leest beter en de tekst
   ernaast zegt wat er aan de hand is. */
.minisignaal::before { content: ""; inline-size: var(--lamp); block-size: var(--lamp);
  border-radius: 50%; flex: none; background: var(--neutral); align-self: center; }
.minisignaal.u1::before { background: var(--danger);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--danger); }
.minisignaal.u2::before { background: var(--warning); }
.minisignaal.u3::before { background: var(--information); }
.mstitel { flex: 1; font-size: var(--tekst-m); font-weight: 550; }
.msdatum { font-size: var(--tekst-xs); color: var(--text-muted); white-space: nowrap; }
.msmeer { font-size: var(--tekst-s); color: var(--text-muted); padding-left: var(--ruimte-3); }

.balkrij { display: grid; grid-template-columns: 106px 1fr 58px; gap: var(--ruimte-3);
  align-items: center; margin-top: var(--ruimte-3); }
.balklabel { font-size: var(--tekst-s); color: var(--text-secondary); }
.balk { height: 8px; border-radius: var(--radius-pil); background: var(--surface-sunken); overflow: hidden; }
/* Schalen in plaats van de breedte animeren: dat laatste laat de browser elk
   frame de opmaak opnieuw berekenen. */
.balk i { display: block; height: 100%; width: 100%; transform-origin: left;
  transform: scaleX(0); border-radius: var(--radius-pil); background: var(--success);
  transition: transform .6s var(--uitloop); }
.balk i.letop { background: var(--warning); }
.balk i.urgent { background: var(--danger); }
.balkwaarde { font-size: var(--tekst-s); font-weight: 620; text-align: right; }

.ketenmini { display: flex; align-items: center; gap: var(--ruimte-3); margin-top: var(--ruimte-3);
  font-size: var(--tekst-s); color: var(--text-secondary); }
.ketenmini.waarschuwing { color: var(--danger); font-weight: 620; }
.ketenmini .schakel { width: 22px; height: 6px; border-radius: var(--radius-pil);
  background: var(--border-interactive); }
.ketenmini .schakel.vol { background: var(--svs-ink-900); }
.ketenmini.waarschuwing .schakel.vol { background: var(--danger); }

.komtrij { display: grid; grid-template-columns: 74px 1fr; gap: var(--ruimte-3);
  padding: var(--ruimte-2) 0; border-bottom: 1px solid var(--border); }
.komtrij:last-child { border-bottom: none; padding-bottom: 0; }
.komtdatum { font-size: var(--tekst-s); color: var(--text-muted); padding-top: 1px; }
.komttitel { font-size: var(--tekst-m); font-weight: 600; }
.komtdetail { font-size: var(--tekst-xs); color: var(--text-muted); }

/* ---------------------------------------------------------------- contractbalk */
.keten {
  display: flex; align-items: center; gap: var(--ruimte-4); flex-wrap: wrap;
  padding: var(--ruimte-3) var(--ruimte-4); border-radius: var(--radius-2); margin-bottom: var(--ruimte-5);
  background: var(--canvas); border: 1px solid var(--border);
}
.keten.waarschuwing { background: var(--danger-bg); border-color: var(--danger-border); }
.keten .schakels { display: flex; gap: 5px; }
.keten .schakel { width: 30px; height: 7px; border-radius: var(--radius-pil);
  background: var(--border-interactive); }
.keten .schakel.vol { background: var(--svs-ink-900); }
.keten.waarschuwing .schakel.vol { background: var(--danger); }
.keten .tekst { font-size: var(--tekst-m); color: var(--text-secondary); }
.keten.waarschuwing .tekst { color: var(--danger); font-weight: 620; }

.contractbalk { display: flex; flex-direction: column; gap: var(--ruimte-4); }
.contractrij { display: grid; grid-template-columns: 176px 1fr; gap: var(--ruimte-4); align-items: center; }
.contractrij .naam .soort { font-weight: 620; font-size: var(--tekst-m); display: flex;
  align-items: center; gap: var(--ruimte-2); flex-wrap: wrap; }
.contractrij .naam .periode { color: var(--text-muted); font-size: var(--tekst-s);
  font-variant-numeric: tabular-nums; margin-top: 3px; }
.spoor { position: relative; height: 30px; border-radius: var(--radius-1);
  background: var(--surface-sunken); overflow: hidden; }
.spoor .blok { position: absolute; top: 0; bottom: 0; background: var(--svs-ink-900);
  border-radius: var(--radius-1); }
.spoor .blok.open { background: linear-gradient(90deg, var(--svs-green-500), var(--svs-green-800)); }
.spoor .proef { position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 5px, transparent 5px 10px); }
.spoor .merk-lijn { position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--danger); }
.spoor .merk-lijn::after { content: ""; position: absolute; top: 0; left: -3px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.spoor .vandaag { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text-primary); }

/* ---------------------------------------------------------------- tijdlijn */
.historietijdlijn { position: relative; padding-left: var(--ruimte-6); }
.historietijdlijn::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--border); border-radius: var(--radius-pil); }
/* Een kolom, geen `display: block`.

   De inhoud van een `<button>` zit in een anoniem vakje dat niet meegroeit met een
   derde tekstregel. De knop bleef daardoor op de hoogte van twee regels staan en
   de detailregel liep over de datum van het volgende punt heen. */
.tp {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  gap: 1px; width: 100%; text-align: left;
  background: none; border: none; padding: var(--ruimte-2) var(--ruimte-3) var(--ruimte-2) 0;
  cursor: pointer; border-radius: var(--radius-2);
  transition: background .15s ease;
}
.tp:hover { background: var(--surface-sunken); }
.tp::before {
  content: ""; position: absolute; left: -26px; top: 15px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-interactive);
  box-shadow: 0 0 0 3px var(--surface);
}
/* `mijlpaal`, niet `merk`: dat laatste is het merkteken van SVS en zet een vaste
   hoogte van 45 pixels. Een tijdlijnregel met drie tekstregels werd daardoor
   afgeknepen. Twee betekenissen op één klassenaam is een fout die pas opvalt als
   iemand ze allebei op hetzelfde element zet. */
.tp.mijlpaal::before { border-color: var(--svs-green-500);
  background: var(--svs-green-500); }
.tp.let::before { border-color: var(--warning); background: var(--warning); }
.tp.urg::before { border-color: var(--danger); background: var(--danger); }
.tp .datum { font-size: var(--tekst-xs); color: var(--text-muted); font-variant-numeric: tabular-nums;
  letter-spacing: .02em; }
.tp .titel { font-size: var(--tekst-m); font-weight: 620; letter-spacing: -.005em; }
.tp .detail { font-size: var(--tekst-s); color: var(--text-secondary); }
.tp.geselecteerd { background: var(--svs-green-50); }
.tp.geselecteerd::before { box-shadow: 0 0 0 3px var(--svs-green-50); }

.nu-scheiding {
  position: relative; display: flex; align-items: center; gap: var(--ruimte-2);
  margin: var(--ruimte-4) 0 var(--ruimte-3);
  font-size: var(--tekst-xs); font-weight: var(--label-gewicht);
  letter-spacing: var(--label-spatie);
  text-transform: uppercase; color: var(--svs-green-800);
}
.nu-scheiding::after { content: ""; flex: 1; height: 1px; background: var(--svs-green-100); }

/* ---------------------------------------------------------------- certificaten */
.certrij { display: grid; grid-template-columns: 1fr 150px 96px; gap: var(--ruimte-4);
  align-items: center; padding: var(--ruimte-3) 0; border-bottom: 1px solid var(--border); }
.certrij:first-child { padding-top: 0; }
.certrij:last-child { border-bottom: none; padding-bottom: 0; }
.certrij .cnaam { font-weight: 620; font-size: var(--tekst-l); display: flex; align-items: center;
  gap: var(--ruimte-2); flex-wrap: wrap; }
.certrij .cnr { font-size: var(--tekst-s); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.meter { height: 7px; border-radius: var(--radius-pil); background: var(--surface-sunken); overflow: hidden; }
.meter i { display: block; height: 100%; width: 100%; transform-origin: left;
  transform: scaleX(0); background: var(--success); border-radius: var(--radius-pil);
  transition: transform .6s var(--uitloop); }
.meter.letop i { background: var(--warning); }
.meter.urgent i { background: var(--danger); }
.certrij .resterend { font-size: var(--tekst-xs); color: var(--text-muted); margin-top: 5px; }
.certrij .num { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--tekst-s);
  color: var(--text-secondary); }

/* ---------------------------------------------------------------- dossier */
.dosrij { display: grid; grid-template-columns: 210px 1fr; gap: var(--ruimte-4);
  align-items: start; padding: var(--ruimte-3) 0; border-bottom: 1px solid var(--border); }
.dosrij:last-of-type { border-bottom: none; }
.dosrij > div:first-child { display: flex; align-items: center; gap: var(--ruimte-2); }
.dosrij svg { width: 17px; height: 17px; flex: none; color: var(--text-muted); }
.dosnaam { font-size: var(--tekst-m); font-weight: 620; }
.dosrij.ontbreekt .dosnaam { color: var(--danger); }
.dosrij.ontbreekt svg { color: var(--danger); }
.dosstukken { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
.stuk {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  padding: 5px 12px; border-radius: var(--radius-pil); font-size: var(--tekst-s); font-weight: 550;
  background: var(--surface-sunken); color: var(--text-primary); border: 1px solid var(--border);
  transition: background .15s ease, border-color .15s ease;
}
.stuk:hover { background: var(--svs-green-50); border-color: var(--svs-green-100); }
.stukversie { font-size: 11px; color: var(--text-muted); font-weight: 700; }
.dosnoot { margin-top: var(--ruimte-4); font-size: var(--tekst-s); color: var(--text-muted);
  padding-top: var(--ruimte-3); border-top: 1px solid var(--border); }

.rolrij { display: grid; grid-template-columns: 260px 1fr; gap: var(--ruimte-4);
  padding: var(--ruimte-4) 0; border-bottom: 1px solid var(--border); align-items: start; }
.rolrij:last-child { border-bottom: none; padding-bottom: 0; }
.rolrechten { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--ruimte-2); }
.rechtje { display: flex; flex-direction: column; gap: 1px;
  padding: var(--ruimte-2) var(--ruimte-3); border-radius: var(--radius-2);
  background: var(--surface-sunken); border: 1px solid var(--border); }
.rechtje .rechtnaam { font-size: var(--tekst-m); color: var(--text-primary); }
.rechtje .rechtcode { font-family: var(--letter-vast);
  font-size: var(--tekst-xs); color: var(--text-muted); }

table.lijst td .knop.klein { margin-left: var(--ruimte-2); }

.potregel-beheer { display: grid; grid-template-columns: 220px 200px 200px; gap: var(--ruimte-4);
  align-items: start; padding: var(--ruimte-4) 0; border-bottom: 1px solid var(--border); }
.potregel-beheer:last-child { border-bottom: none; padding-bottom: 0; }
.potregel-beheer .veld { margin-bottom: 0; }
.potregel-beheer .micro { display: block; }

/* ---------------------------------------------------------------- portaal */
.portaalrij {
  display: flex; align-items: center; gap: var(--ruimte-3); flex-wrap: wrap;
  padding: var(--ruimte-3) 0; border-bottom: 1px solid var(--border);
}
.portaalrij:last-child { border-bottom: none; padding-bottom: 0; }
.portaalrij > div:first-child { flex: 1; min-width: 160px; }
.prtitel { font-size: var(--tekst-l); font-weight: 620; }
.portaalsub .micro { display: block; margin-bottom: var(--ruimte-2); }

/* ---------------------------------------------------------------- overblijvers
   Klassen die nog door de niet-omgezette schermen gebruikt worden en geen
   componenttegenhanger hebben. Ze staan op de nieuwe tokens, zodat kleur,
   ruimte en typografie gelijk lopen met de rest.

   Elk blok hieronder verdwijnt zodra het bijbehorende scherm naar de
   componenten in kern/ verhuist. */

.kop { margin-bottom: var(--ruimte-5); }
.kop .onder { margin-top: var(--ruimte-2); max-width: 68ch;
  color: var(--text-secondary); font-size: var(--tekst-l); }
.kop-rij { display: flex; align-items: flex-start; gap: var(--ruimte-4); flex-wrap: wrap; }
.kop-rij .titel { flex: 1; min-width: 240px; }

.leeg { padding: var(--ruimte-7) var(--ruimte-5); text-align: center;
  color: var(--text-secondary); font-size: var(--tekst-m); }
.leeg strong { display: block; margin-bottom: 4px;
  color: var(--text-primary); font-size: var(--tekst-l); }

/* Oude tabellen die nog niet op `table.gegevens` staan, krijgen dezelfde maat
   en dezelfde regelhoogte, zodat twee lijsten naast elkaar niet uit de pas lopen. */
table.lijst { width: 100%; border-collapse: collapse; font-size: var(--tekst-m); }
table.lijst th {
  position: sticky; top: 0; z-index: 2; text-align: left; white-space: nowrap;
  padding: var(--ruimte-2) var(--ruimte-4); background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--tekst-xs); font-weight: 620; color: var(--text-muted);
}
table.lijst td { padding: 0 var(--ruimte-4); height: var(--rij-hoogte);
  border-bottom: 1px solid var(--border); vertical-align: middle; }
table.lijst tbody tr:last-child td { border-bottom: none; }
table.lijst tbody tr { transition: background var(--duur-snel); }
table.lijst tbody tr:hover { background: var(--svs-green-50); }
table.lijst td.num, table.lijst th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.lijst td.afwijking { color: var(--warning); font-weight: 640; }
table.lijst td .knop.klein { margin-left: var(--ruimte-2); }

/* Een bericht boven een scherm: nu dezelfde vorm als `.melding`. */
.bericht { display: flex; align-items: center; gap: var(--ruimte-3); flex-wrap: wrap;
  padding: var(--ruimte-4); margin-bottom: var(--ruimte-5);
  background: var(--information-bg); border: 1px solid var(--information-border);
  border-radius: var(--radius-3); color: var(--text-primary); font-size: var(--tekst-m); }
.bericht > div { flex: 1; min-width: 220px; }
.bericht strong { display: block; color: var(--information); }

.filterrij { display: flex; align-items: center; gap: var(--ruimte-3); flex-wrap: wrap;
  margin-bottom: var(--ruimte-4); }

.initialen {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  border-radius: var(--radius-pil);
  background: var(--svs-green-100); color: var(--svs-green-800);
  border: 1px solid var(--svs-green-100);
  font-size: var(--tekst-s); font-weight: 700;
}



/* ============================================================================
   Hersteld na de migratie

   Deze klassen verloren hun opmaak toen `stijl.css` werd opgeheven: ik heb het
   bestand verwijderd zonder te controleren of elke regel een nieuw huis had. Het
   gevolg was op het reglementscherm meteen zichtbaar — een genummerde inhoudsopgave
   viel terug op losse knoppen die over zes regels afbraken — en op het
   ondertekenscherm net zo goed.

   Ze staan nu in het stelsel zelf, met de tokens die de rest ook gebruikt.
   ========================================================================= */

/* ---- Reglement: index links, artikel rechts --------------------------- */
.reglement {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: var(--ruimte-4);
  align-items: start;
}
.reglementboom {
  background: var(--vlak); border: 1px solid var(--border);
  border-radius: var(--radius-3); box-shadow: var(--schaduw-1);
  position: sticky; top: var(--ruimte-4);
  display: flex; flex-direction: column; max-block-size: calc(100dvh - var(--ruimte-8));
}
.boomkop {
  display: flex; align-items: center; gap: var(--ruimte-2);
  padding: var(--ruimte-3) var(--inspring);
  border-bottom: 1px solid var(--border);
}
.boomkop .label { flex: 1; }
.boom { flex: 1; min-block-size: 0; overflow-y: auto; padding: var(--ruimte-2); }

/* Een inhoudsopgave is een lijst met inspringing, geen rij pillen. De diepte
   zit in de marge, het nummer staat in een vaste kolom zodat 3.4.1 onder 3.4
   uitlijnt in plaats van ernaast te zwerven. */
.boomregel {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: var(--ruimte-2); align-items: baseline;
  inline-size: 100%; min-block-size: 32px;
  padding: var(--ruimte-2); border: none; background: none;
  border-radius: var(--radius-2); text-align: left; cursor: pointer;
  color: var(--text-secondary); font-size: var(--tekst-m);
}
.boomregel:hover { background: var(--vlak-diep); color: var(--text-primary); }
.boomregel.actief { background: var(--accent-zacht);
  color: var(--accent-tekst, var(--accent)); font-weight: 620; }
.boomregel .nr { font-variant-numeric: tabular-nums; font-size: var(--tekst-s);
  color: var(--text-muted); }
.boomregel.actief .nr { color: var(--accent-tekst, var(--accent)); }
.boomregel .tt { overflow-wrap: anywhere; }
.boomregel.n1 { font-weight: 620; color: var(--text-primary); margin-top: var(--ruimte-2); }
.boomregel.n2 { padding-inline-start: var(--ruimte-4); }
.boomregel.n3 { padding-inline-start: var(--ruimte-6); }

.reglementbalk { display: flex; align-items: center; gap: var(--ruimte-3);
  flex-wrap: wrap; margin-bottom: var(--ruimte-4); }

.artikelkop { display: flex; align-items: flex-start; gap: var(--ruimte-3);
  flex-wrap: wrap; margin-bottom: var(--ruimte-4);
  padding-bottom: var(--ruimte-3); border-bottom: 1px solid var(--border); }
.artikelkop h2 { flex: 1; min-inline-size: 200px; }
.artikelkop .veld { flex: 1; min-inline-size: 240px; }

/* Een begrip dat je leest is tekst; alleen in een concept is het een veld. */
.begripveld { inline-size: 100%; }

.verschil { display: flex; flex-direction: column; gap: var(--ruimte-3); }

@media (max-width: 1023px) {
  .reglement { grid-template-columns: minmax(0, 1fr); }
  .reglementboom { position: static; max-block-size: 42dvh; }
}

/* ---- Dossierstukken en verlofpotten ----------------------------------- */
.stukgroep { display: flex; align-items: center; gap: var(--ruimte-2);
  min-inline-size: 0; }
.stuktitel { font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.stukactie { margin-inline-start: auto; display: flex; gap: var(--ruimte-2);
  align-items: center; }
.potregel { margin-top: 2px; font-size: var(--tekst-s); color: var(--text-muted); }

/* ---- Ondertekenen ------------------------------------------------------ */
.ondertekenen { display: flex; flex-direction: column; gap: var(--ruimte-4); }

/* ---- Verzuim: de standsleuf in een regel ------------------------------ */
.verzuimstand { display: flex; align-items: center; gap: var(--ruimte-2);
  flex-wrap: wrap; }

/* De begrippenlijst als leestekst: twee kolommen, de omschrijving loopt door over
   zoveel regels als hij nodig heeft. Op een telefoon onder elkaar. */
.begrippen { display: grid; grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr);
  gap: 0; margin: 0; }
.begrippen dt, .begrippen dd { padding: var(--ruimte-3) 0;
  border-bottom: 1px solid var(--border); margin: 0; }
.begrippen dt { font-weight: 620; padding-inline-end: var(--ruimte-4); }
.begrippen dd { color: var(--text-secondary); }
.begrippen dt:last-of-type, .begrippen dd:last-of-type { border-bottom: none; }

/* De artikeltekst: één leeskolom, niet de volle breedte. Boven de 75 tekens per
   regel raakt het oog de volgende regel kwijt. */
.artikeltekst { max-inline-size: 72ch; }
.artikeltekst p { margin: 0 0 var(--ruimte-4); }
.artikeltekst p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .begrippen { grid-template-columns: minmax(0, 1fr); }
  .begrippen dt { padding-bottom: 0; border-bottom: none; }
}


/* Systeemonderhoud hoort onder de lijst, niet in de primaire actiesleuf van het
   startscherm: het is iets wat je nooit hoort te hoeven doen. */
.werkvoorraadvoet {
  display: flex; align-items: center; gap: var(--ruimte-3);
  justify-content: space-between; flex-wrap: wrap;
  margin-top: var(--ruimte-5); padding-top: var(--ruimte-4);
  border-top: 1px solid var(--border);
}


/* Een radiogroep waarin beide uitkomsten uitgeschreven staan.

   Een vinkje benoemt maar één van de twee; wie het niet aanvinkt moet zelf
   bedenken wat er dan gebeurt. Bij een keuze die over geld gaat is dat niet goed
   genoeg — dus staan hier allebei de gevolgen, met de uitleg eronder. */
.radioveld { border: none; margin: 0; padding: 0; min-inline-size: 0;
  grid-column: 1 / -1; }
.radioveld input[type="radio"] { inline-size: 20px; block-size: 20px; }
.radioveld legend { padding: 0; font-size: var(--tekst-m); font-weight: 620;
  margin-bottom: 6px; }
.radiokeuze {
  display: flex; align-items: flex-start; gap: var(--ruimte-3);
  padding: var(--ruimte-3); margin-bottom: var(--ruimte-2);
  border: 1px solid var(--border); border-radius: var(--radius-2);
  background: var(--surface); cursor: pointer;
}
.radiokeuze:last-of-type { margin-bottom: 0; }
.radiokeuze:hover { border-color: var(--border-interactive); }
.radiokeuze:has(input:checked) { border-color: var(--accent-vorm, var(--accent));
  background: var(--accent-zacht); }
.radiokeuze input { margin: 2px 0 0; flex: none;
  accent-color: var(--accent-vorm, var(--accent)); }
.radiotekst { display: flex; flex-direction: column; min-inline-size: 0; }
.radionaam { font-weight: 600; }
.radiouitleg { font-size: var(--tekst-m); color: var(--text-secondary); margin-top: 2px; }

/* De toelichting bij een voorgerekende waarde: waaruit het getal is opgebouwd,
   zodat de gebruiker kan zien of het klopt in plaats van het te moeten geloven. */
.voorstelnoot { color: var(--text-secondary); }


/* Wat het verslag zelf over zijn bewaarstand zegt. Een automaat die je niet ziet
   werken geeft geen zekerheid; deze regel zegt wanneer het voor het laatst lukte. */
.bewaarstand { font-size: var(--tekst-m); color: var(--text-secondary);
  margin-inline-end: var(--ruimte-3); }
.bewaarstand[data-stand="wijzigt"] { color: var(--warning); }
.bewaarstand[data-stand="mislukt"] { color: var(--danger); font-weight: 600; }


/* Een eenheid hoort naast het veld te staan, niet in de uitleg eronder: dan zie je
   bij het typen al of je dagen of maanden invult. */
.metEenheid { display: flex; align-items: center; gap: var(--ruimte-2); }
.metEenheid input { flex: 1; min-inline-size: 0; }
.metEenheid .eenheid { color: var(--text-secondary); font-size: var(--tekst-m);
  white-space: nowrap; }

/* De systeemsleutel is een technisch gegeven; hij hoort niet als hulptekst te
   fungeren voor een gebruiker die niet technisch is. Wel laten staan — bij een
   vraag aan de bouwer is hij precies wat je nodig hebt. */
.hulp.technisch { font-family: var(--letter-vast); font-size: var(--tekst-xs);
  color: var(--text-muted); }

/* Wat er met het opslaan gebeurde, in woorden. */
.opslagstand:empty { display: none; }
.opslagstand { margin-top: 4px; font-size: var(--tekst-m); color: var(--text-secondary); }
.opslagstand[data-stand="bewaard"] { color: var(--success); font-weight: 600; }
.opslagstand[data-stand="mislukt"] { color: var(--danger); font-weight: 600; }


/* Een hoofdweg met een genoemde zijweg eronder. Twee even zware knoppen naast
   elkaar die allebei "toevoegen" betekenen laten de gebruiker gokken; dit zegt
   welke de gewone is. */
.actiegroep { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.actiegroep .knop.stil { font-weight: 500; }
@media (max-width: 767px) {
  .actiegroep { align-items: stretch; }
}