/* ============================================================================
   SVS HRM — weergave 2 — componenten

   Eén familie. Elke component kent rust, hover, actief, focus, uitgeschakeld en
   bezig, en waar het van toepassing is: fout, leeg, geselecteerd. Randen scheiden,
   schaduw is voor wat zweeft (menu, dialoog, drawer, toast) en nergens anders.
   ========================================================================= */

/* ---------------------------------------------------------------- paginakop
   Titel links, handelingen rechts, ondertitel eronder. Geen lijn eronder: de
   ruimte doet het werk. Het "context"-opschrift uit de eerste weergave is weg;
   het kruimelpad in de kopbalk zegt al waar je bent. */
.paginakop, .titelblok {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--ruimte-2) var(--ruimte-5);
  margin-bottom: var(--ruimte-5);
}
.titelblok:has(.titelblok-merk) { grid-template-columns: auto minmax(0, 1fr) auto; }
.paginakop .context, .titelblok .context, .titelblok-wat .context { display: none; }
.paginakop-rij { display: contents; }
.kopgroep, .titelblok-wat { min-width: 0; }
.paginakop h1, .titelblok h1 { font-size: var(--tekst-pagina); }
.paginakop .toelichting, .titelblok .onder {
  margin: var(--ruimte-1) 0 0; color: var(--tekst-2); font-size: var(--tekst-m);
  max-width: 72ch;
}
.paginakop .acties, .titelblok-acties {
  display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap;
  justify-content: flex-end; grid-column: -2;
}
.titelblok-stand { display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap; }
.titelblok-merk { display: flex; align-items: center; }
.titelblok-gegevens {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--ruimte-2) var(--ruimte-6);
  padding-top: var(--ruimte-3); border-top: 1px solid var(--rand); margin-top: var(--ruimte-2);
}
.titelblok-gegevens .wat { display: block; font-size: var(--tekst-xs); color: var(--tekst-3);
  font-weight: 500; }
.titelblok-gegevens .waarde { font-size: var(--tekst-l); font-weight: 500; }

.sectiekop { display: flex; align-items: baseline; gap: var(--ruimte-3);
  margin: var(--ruimte-2) 0 var(--ruimte-3); }
.sectiekop h2, .sectiekop h3, .sectiekop h4 { flex: 1; min-width: 0; }
* + .sectiekop { margin-top: var(--ruimte-6); }

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

.kruimel { display: inline-flex; align-items: center; gap: 4px; min-height: 24px;
  margin-bottom: var(--ruimte-2); font-size: var(--tekst-s); font-weight: 500;
  color: var(--tekst-3); text-decoration: none; }
.kruimel:hover { color: var(--tekst); }
.kruimel svg { width: 14px; height: 14px; }

/* Het zonelabel: een klein kopje boven een groep. Rustig; ordent alleen. */
.zonelabel, .micro {
  display: flex; align-items: center; gap: var(--ruimte-2); margin: 0;
  font-size: var(--tekst-xs); font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--tekst-3);
}
h2.zonelabel, h3.zonelabel { margin: var(--ruimte-5) 0 var(--ruimte-3); }
h2.zonelabel:first-child, h3.zonelabel:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- knoppen
   Vier soorten, één vorm. Primair is inkt; secundair is wit met een rand;
   tertiair (stil, plat) is alleen tekst; gevaar is rood. `groen` bestaat voor
   de positieve keuze in een paar (Goedkeuren naast Afwijzen). */
.knop {
  --knop-vlak: var(--inkt-900);
  --knop-tekst: var(--tekst-op-donker);
  --knop-rand: var(--inkt-900);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--knop-hoogte); 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-m); font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--duur-snel), border-color var(--duur-snel),
              color var(--duur-snel), box-shadow var(--duur-snel);
}
.knop svg { width: 16px; height: 16px; flex: none; }
.knop:hover { --knop-vlak: var(--inkt-800); --knop-rand: var(--inkt-800); }
.knop:active { --knop-vlak: var(--inkt-950); }
.knop:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--vlak), 0 0 0 4px var(--groen-700); }

.knop.zacht { --knop-vlak: var(--vlak); --knop-tekst: var(--tekst); --knop-rand: var(--rand-sterk); }
.knop.zacht:hover { --knop-vlak: var(--vlak-zacht); --knop-rand: var(--rand-invoer); }
.knop.zacht:active { --knop-vlak: var(--vlak-diep); }
.knop.stil, .knop.plat { --knop-vlak: transparent; --knop-tekst: var(--tekst-2);
  --knop-rand: transparent; }
.knop.stil:hover, .knop.plat:hover { --knop-vlak: var(--vlak-diep); --knop-tekst: var(--tekst); }
.knop.groen { --knop-vlak: var(--groen-700); --knop-rand: var(--groen-700); }
.knop.groen:hover { --knop-vlak: var(--groen-800); --knop-rand: var(--groen-800); }
.knop.gevaar { --knop-vlak: var(--gevaar-vlak); --knop-rand: var(--gevaar-vlak); }
.knop.gevaar:hover { --knop-vlak: var(--gevaar-hover); --knop-rand: var(--gevaar-hover); }
.knop.gevaartekst { color: var(--gevaar); }
.knop.gevaartekst:hover { --knop-vlak: var(--gevaar-bg); }
.knop.rustig { --knop-vlak: var(--vlak); --knop-tekst: var(--tekst); --knop-rand: var(--rand-sterk); }
.knop.klein { height: var(--knop-hoogte-klein); padding: 0 var(--ruimte-3);
  font-size: var(--tekst-s); }
.knop.klein svg { width: 14px; height: 14px; }
.knop.breed { width: 100%; }

.knop[disabled] { opacity: .45; pointer-events: none; }
.knop[aria-disabled="true"] { opacity: .5; cursor: default; }
.knop[aria-disabled="true"]:hover { --knop-vlak: var(--inkt-900); }
.knop.zacht[aria-disabled="true"]:hover { --knop-vlak: var(--vlak); --knop-rand: var(--rand-sterk); }

.knop[data-bezig] { pointer-events: none; position: relative; color: transparent; }
.knop[data-bezig]::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 2px solid var(--knop-tekst); border-top-color: transparent; border-radius: 50%;
  animation: draai .7s linear infinite;
}

.icoonknop {
  display: inline-grid; place-items: center; flex: none;
  width: var(--knop-hoogte); height: var(--knop-hoogte);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-2);
  color: var(--tekst-2); cursor: pointer;
  transition: background var(--duur-snel), color var(--duur-snel);
}
.icoonknop:hover { background: var(--vlak-diep); color: var(--tekst); }
.icoonknop svg { width: 17px; height: 17px; }
.icoonknop.klein { width: var(--knop-hoogte-klein); height: var(--knop-hoogte-klein); }
.icoonknop.klein svg { width: 15px; height: 15px; }
.icoonknop[disabled] { opacity: .35; pointer-events: none; }

/* Een hoofdweg met een genoemde zijweg eronder. */
.actiegroep { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.actiegroep .knop.stil { font-weight: 500; }

/* ---------------------------------------------------------------- formulier */
.veld { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--ruimte-4); }
.veld > label, .veldlabel { font-size: var(--tekst-s); font-weight: 600; color: var(--tekst); }
.veld .verplicht, .vereist { color: var(--gevaar); margin-left: 1px; }
.veld input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.veld select, .veld textarea,
.filterbalk input, .filterbalk select, .filterrij input, .filterrij select,
.registerzoek input {
  width: 100%; min-height: var(--veld-hoogte); padding: 0 var(--ruimte-3);
  background: var(--vlak); color: var(--tekst);
  border: 1px solid var(--rand-invoer); border-radius: var(--radius-2);
  font-size: var(--tekst-l);
  transition: border-color var(--duur-snel), box-shadow var(--duur-snel);
}
.veld textarea { min-height: 88px; padding: var(--ruimte-2) var(--ruimte-3);
  resize: vertical; line-height: 1.5; }
.veld input[type="file"] { font-size: var(--tekst-m); padding: var(--ruimte-2) 0; }
input:not([type="radio"]):not([type="checkbox"]):hover, select:hover, textarea:hover {
  border-color: var(--rand-sterk); }
input:not([type="radio"]):not([type="checkbox"]):focus-visible,
select:focus-visible, textarea:focus-visible,
.veld input:focus-visible, .veld select:focus-visible, .veld textarea:focus-visible {
  outline: none; border-color: var(--groen-700); box-shadow: var(--focus-gloed);
}
.veld input[disabled], .veld select[disabled], .veld textarea[disabled],
select[disabled] {
  background: var(--vlak-diep); color: var(--tekst-3); cursor: not-allowed;
}
input::placeholder, textarea::placeholder { color: var(--tekst-3); }
.veld .hulp, .hulp { font-size: var(--tekst-s); color: var(--tekst-2); line-height: 1.45; }
.veld .veldfout { display: flex; align-items: flex-start; gap: 5px;
  font-size: var(--tekst-s); font-weight: 500; color: var(--gevaar); }
.veld .veldfout svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.veld.fout input, .veld.fout select, .veld.fout textarea { border-color: var(--gevaar); }
.veld.fout input:focus-visible, .veld.fout select:focus-visible,
.veld.fout textarea:focus-visible { box-shadow: 0 0 0 3px var(--gevaar-bg); }
.hulp.technisch { font-family: var(--letter-vast); font-size: var(--tekst-xs);
  color: var(--tekst-3); }

/* Keuzelijsten met een eigen pijl: de vorm van het besturingssysteem past nergens bij. */
select {
  appearance: none; -webkit-appearance: none;
  min-height: var(--veld-hoogte);
  padding: 0 calc(var(--ruimte-6)) 0 var(--ruimte-3);
  background-color: var(--vlak);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6E7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--ruimte-2) center;
  background-size: 16px 16px;
  border: 1px solid var(--rand-invoer); border-radius: var(--radius-2);
  color: var(--tekst); font: inherit; font-size: var(--tekst-l); cursor: pointer;
}
.kiezer, .kopveld { display: inline-flex; align-items: center; gap: var(--ruimte-2); }
.kiezer > .kiezerlabel, .kopveld label { font-size: var(--tekst-s); font-weight: 500;
  color: var(--tekst-2); white-space: nowrap; }
.kiezer select { min-width: 11rem; }
.kopveld select { min-height: var(--knop-hoogte); }

.vinkveld { display: flex; align-items: flex-start; gap: var(--ruimte-2);
  min-height: 32px; padding: 4px 0; cursor: pointer; font-size: var(--tekst-m); }
.vinkveld input { width: 16px; height: 16px; min-height: 0; flex: none; margin: 2px 0 0;
  accent-color: var(--groen-700); }
.vinkveld span { font-size: var(--tekst-m); }
/* Naam en uitleg onder elkaar, zoals bij een radioveld. */
.vinktekst { display: flex; flex-direction: column; min-width: 0; }
.vinknaam { font-weight: 600; font-size: var(--tekst-m); }
.vinkuitleg { font-size: var(--tekst-s); color: var(--tekst-2); margin-top: 2px; }

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

.veldgroep { margin-bottom: var(--ruimte-5); }
.veldgroep:last-child { margin-bottom: 0; }
.veldgroep > .zonelabel { padding-bottom: var(--ruimte-2); margin-bottom: var(--ruimte-3);
  border-bottom: 1px solid var(--rand); }

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

.radioveld { border: none; margin: 0; padding: 0; min-width: 0; grid-column: 1 / -1; }
.radioveld legend { padding: 0; font-size: var(--tekst-s); font-weight: 600; 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(--rand); border-radius: var(--radius-2);
  background: var(--vlak); cursor: pointer;
  transition: border-color var(--duur-snel), background var(--duur-snel);
}
.radiokeuze:last-of-type { margin-bottom: 0; }
.radiokeuze:hover { border-color: var(--rand-invoer); }
.radiokeuze:has(input:checked) { border-color: var(--groen-700); background: var(--groen-50); }
.radiokeuze input { margin: 2px 0 0; flex: none; width: 16px; height: 16px;
  accent-color: var(--groen-700); }
.radiotekst { display: flex; flex-direction: column; min-width: 0; }
.radionaam { font-weight: 600; font-size: var(--tekst-m); }
.radiouitleg { font-size: var(--tekst-s); color: var(--tekst-2); margin-top: 2px; }

.metEenheid { display: flex; align-items: center; gap: var(--ruimte-2); }
.metEenheid input { flex: 1; min-width: 0; }
.metEenheid .eenheid { color: var(--tekst-2); font-size: var(--tekst-s); white-space: nowrap; }
.opslagstand:empty { display: none; }
.opslagstand { margin-top: 4px; font-size: var(--tekst-s); color: var(--tekst-2); }
.opslagstand[data-stand="bewaard"] { color: var(--succes); font-weight: 600; }
.opslagstand[data-stand="mislukt"] { color: var(--gevaar); font-weight: 600; }
.voorstelnoot { color: var(--tekst-2); }
.bewaarstand { font-size: var(--tekst-s); color: var(--tekst-2); margin-right: var(--ruimte-3); }
.bewaarstand[data-stand="wijzigt"] { color: var(--letop); }
.bewaarstand[data-stand="mislukt"] { color: var(--gevaar); font-weight: 600; }

.geheim { display: flex; align-items: center; gap: var(--ruimte-3); flex-wrap: wrap;
  padding: var(--ruimte-3); border: 1px solid var(--rand-sterk);
  border-radius: var(--radius-2); background: var(--vlak-diep); }
.geheim code { flex: 1; min-width: 180px; font-size: var(--tekst-xl); font-weight: 600;
  letter-spacing: .04em; word-break: break-all; }

/* Een schaal als knoppenrij (gespreksverslag). */
.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: 40px; min-height: var(--knop-hoogte); border: 1px solid var(--rand-invoer);
  border-radius: var(--radius-2); background: var(--vlak); font-weight: 600;
  font-variant-numeric: tabular-nums; }
.schaalstap input:checked + span { background: var(--groen-50); border-color: var(--groen-700);
  color: var(--groen-700); }
.schaalstap input:focus-visible + span { outline: 2px solid var(--groen-700); outline-offset: 2px; }
.schaalstap:hover span { border-color: var(--groen-700); }

/* ---------------------------------------------------------------- kaart / paneel */
.kaart, .paneel {
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--radius-3);
}
.paneel { margin-bottom: var(--ruimte-4); }
.paneel:last-child { margin-bottom: 0; }
.kaart + .kaart, .paneel + .kaart, .kaart + .paneel { margin-top: var(--ruimte-4); }
.kaart-kop, .paneel-kop {
  display: flex; align-items: center; gap: var(--ruimte-3); flex-wrap: wrap;
  padding: var(--ruimte-3) var(--inspring);
  border-bottom: 1px solid var(--rand);
}
.kaart-kop h2, .kaart-kop h3, .paneel-kop h2, .paneel-kop h3 {
  flex: 1; min-width: 120px; font-size: var(--tekst-kaart); font-weight: 600;
  letter-spacing: 0; color: var(--tekst); text-transform: none;
}
.paneel-kop .rechts { margin-left: auto; display: flex; gap: var(--ruimte-2); align-items: center; }
.paneel-kop .stand {
  font-variant-numeric: tabular-nums; font-size: var(--tekst-xs); font-weight: 600;
  color: var(--tekst-2); background: var(--vlak-diep); border-radius: var(--radius-pil);
  padding: 2px 8px; min-width: 22px; text-align: center; line-height: 1.4;
}
.kaart-lijf, .paneel-lijf { padding: var(--inspring); }
.kaart-lijf.dicht { padding: var(--ruimte-2) var(--inspring); }
.paneel-lijf.strak { padding: 0; }
.paneel-lijf.strak > .toelichting { padding: var(--inspring) var(--inspring) 0;
  margin-bottom: var(--ruimte-2); }
.paneel-lijf.strak > .zonelabel { padding: var(--ruimte-3) var(--inspring) 0; }
.kaart-voet, .paneel-voet {
  padding: var(--ruimte-2) var(--inspring); border-top: 1px solid var(--rand);
  background: var(--vlak-zacht); border-radius: 0 0 var(--radius-3) var(--radius-3);
  font-size: var(--tekst-s); color: var(--tekst-2);
}
.kaart-lijf > .toelichting, .dialoog-lijf > .toelichting, .paneel .toelichting {
  margin: 0 0 var(--ruimte-3); max-width: 72ch; color: var(--tekst-2); font-size: var(--tekst-m);
}
.paneel-leeg { margin: 0; padding: var(--ruimte-3) 0; color: var(--tekst-3); font-size: var(--tekst-m); }
.paneel-lijf.strak .paneel-leeg { padding: var(--ruimte-4) var(--inspring); }
.kaart.klikbaar { transition: border-color var(--duur-snel); }
.kaart.klikbaar:hover { border-color: var(--rand-invoer); }
.kaart.klikbaar .dekkend::after { content: ""; position: absolute; inset: 0; }
.kaart.nadruk { border-color: var(--letop-rand); }
.kaart.nadruk .kaart-kop { background: var(--letop-bg); border-bottom-color: var(--letop-rand);
  border-radius: var(--radius-3) var(--radius-3) 0 0; }
.leeg { padding: var(--ruimte-6) var(--ruimte-4); text-align: center;
  color: var(--tekst-2); font-size: var(--tekst-m); }
.leeg strong { display: block; margin-bottom: 4px; color: var(--tekst); font-size: var(--tekst-l);
  font-weight: 600; }

/* Meetwaarden op één strip: de kerncijfers van een scherm, met haarlijnen ertussen. */
.afleesstrip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--rand); border-radius: var(--radius-3);
  background: var(--vlak); margin-bottom: var(--ruimte-4); overflow: hidden;
}
.afleesstrip > * {
  min-width: 0; padding: var(--ruimte-3) var(--inspring);
  border-right: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
  margin-bottom: -1px;
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; color: inherit;
}
a.meetwaarde:hover { background: var(--vlak-zacht); }
.meetwaarde .cijfer { font-size: var(--tekst-kpi); font-weight: 600; letter-spacing: -.01em;
  line-height: 1.1; color: var(--tekst); }
.meetwaarde .wat { font-size: var(--tekst-s); font-weight: 500; color: var(--tekst-3);
  letter-spacing: 0; text-transform: none; }
.meetwaarde.letop .cijfer { color: var(--letop); }
.meetwaarde.storing .cijfer { color: var(--gevaar); }
.meetwaarde.aan .cijfer { color: var(--succes); }
.statrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--ruimte-3); margin-bottom: var(--ruimte-4); }
.statkaart { padding: var(--ruimte-3) var(--ruimte-4); }
.statkaart .cijfer { display: block; font-size: var(--tekst-kpi); font-weight: 600;
  letter-spacing: -.01em; line-height: 1.1; }
.statkaart .label { margin-top: 4px; }
.statkaart.urgent .cijfer { color: var(--gevaar); }
.statkaart.letop .cijfer { color: var(--letop); }

/* ---------------------------------------------------------------- badges en lampen */
.badge {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 2px 8px; border-radius: var(--radius-pil);
  font-size: var(--tekst-xs); font-weight: 600; line-height: 1.5;
  border: 1px solid transparent;
}
.badge svg { width: 12px; height: 12px; flex: none; }
.badge.succes   { background: var(--succes-bg);   color: var(--succes); }
.badge.letop    { background: var(--letop-bg);    color: var(--letop); }
.badge.gevaar   { background: var(--gevaar-bg);   color: var(--gevaar); }
.badge.info     { background: var(--info-bg);     color: var(--info); }
.badge.neutraal { background: var(--neutraal-bg); color: var(--neutraal); }
.badgerij { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
.stip { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; }
.tabs .stip { width: 7px; height: 7px; }
.stip.letop { background: var(--letop-vlak); }
.stip.gevaar { background: var(--gevaar-vlak); }

.lamp { display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--tekst-s); font-weight: 500; color: var(--tekst-2); white-space: nowrap; }
.lamp::before { content: ""; width: var(--lamp); height: var(--lamp); border-radius: 50%;
  flex: none; background: var(--neutraal); }
.lamp.aan::before     { background: var(--groen-600); }
.lamp.wacht::before   { background: var(--info); }
.lamp.letop::before   { background: var(--letop-vlak); }
.lamp.storing::before { background: var(--gevaar-vlak);
  box-shadow: 0 0 0 2px var(--vlak), 0 0 0 3.5px var(--gevaar-vlak); }
.lamp.uit::before     { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rand-invoer); }
.lamp.aan     { color: var(--succes); }
.lamp.wacht   { color: var(--info); }
.lamp.letop   { color: var(--letop); }
.lamp.storing { color: var(--gevaar); font-weight: 600; }
.legenda { display: flex; flex-wrap: wrap; gap: var(--ruimte-2) var(--ruimte-5);
  font-size: var(--tekst-xs); color: var(--tekst-3); }
.legenda .lamp { font-size: var(--tekst-xs); }
.afwijking { font-variant-numeric: tabular-nums; font-weight: 600; padding: 1px 6px;
  border-radius: var(--radius-1); font-size: var(--tekst-s); }
.afwijking.letop { background: var(--letop-bg); color: var(--letop); }
.afwijking.gevaar { background: var(--gevaar-bg); color: var(--gevaar); }

/* ---------------------------------------------------------------- avatar */
.avatar, .initialen {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--radius-pil);
  background: var(--inkt-100); color: var(--inkt-900);
  font-size: var(--tekst-xs); font-weight: 700; letter-spacing: .02em;
}
.avatar.groot { width: 56px; height: 56px; font-size: var(--tekst-xl); }
.avatar.klein { width: 26px; height: 26px; font-size: var(--tekst-xs); }
.persoonscel { display: flex; align-items: center; gap: var(--ruimte-3); min-width: 0; }
.persoonscel > span { min-width: 0; }
.persoonscel .naam { display: block; font-weight: 600; font-size: var(--tekst-m);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persoonscel .onder, .persoonscel .nr { display: block; font-size: var(--tekst-xs);
  color: var(--tekst-3); }

/* ---------------------------------------------------------------- tabs / deelrail */
.tabs { display: flex; gap: var(--ruimte-1); border-bottom: 1px solid var(--rand);
  overflow-x: auto; scrollbar-width: none; margin-bottom: var(--ruimte-4); }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  min-height: calc(40px * var(--dichtheid)); padding: 0 var(--ruimte-3); margin-bottom: -1px;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--tekst-2); font-size: var(--tekst-m); font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: color var(--duur-snel), border-color var(--duur-snel);
}
.tabs a:hover, .tabs button:hover { color: var(--tekst); }
.tabs [aria-selected="true"], .tabs [aria-current="page"] {
  color: var(--tekst); font-weight: 600; border-bottom-color: var(--groen-600);
}
.tabs .teller, .kaart-kop .teller, .paneel-kop .teller {
  font-size: var(--tekst-xs); font-weight: 600; padding: 0 6px; line-height: 18px;
  border-radius: var(--radius-pil); background: var(--vlak-diep); color: var(--tekst-2); }
.tabs [aria-current="page"] .teller, .tabs [aria-selected="true"] .teller {
  background: var(--groen-100); color: var(--groen-700); }
.kaart > .tabs, .paneel > .tabs { margin: 0; padding: 0 var(--inspring); }

.tabstrook { position: relative; flex: 1; min-width: 0; --tabgrond: var(--grond); }
.kaart .tabstrook, .kaart-lijf .tabstrook, .bladbalk .tabstrook { --tabgrond: var(--vlak); }
.tabschuif { position: absolute; top: 0; bottom: 1px; width: 44px; display: none;
  align-items: center; padding: 0; border: none; color: var(--tekst-2); cursor: pointer; }
.tabschuif svg { width: 16px; height: 16px; }
.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; }

/* De tweede laag: pillen. */
.deelrail { display: flex; flex-wrap: wrap; gap: var(--ruimte-1); margin: 0 0 var(--ruimte-4); }
.deelrail a {
  display: inline-flex; align-items: center; min-height: var(--knop-hoogte-klein);
  padding: 0 var(--ruimte-3); border-radius: var(--radius-pil);
  font-size: var(--tekst-m); font-weight: 500; color: var(--tekst-2);
  text-decoration: none; white-space: nowrap;
}
.deelrail a:hover { background: var(--vlak-diep); color: var(--tekst); }
.deelrail a[aria-current="page"] { background: var(--inkt-900); color: var(--tekst-op-donker); font-weight: 600; }

.segment { display: inline-flex; padding: 3px; gap: 2px; background: var(--vlak-diep);
  border-radius: var(--radius-2); }
.segment button { min-height: calc(var(--knop-hoogte-klein) - 6px); padding: 0 var(--ruimte-3);
  border: none; background: transparent; border-radius: var(--radius-1);
  font-size: var(--tekst-s); font-weight: 600; color: var(--tekst-2); cursor: pointer;
  transition: background var(--duur-snel), color var(--duur-snel); }
.segment button:hover { color: var(--tekst); }
.segment [aria-pressed="true"] { background: var(--vlak); color: var(--tekst);
  box-shadow: var(--schaduw-1); }
.weergavekeuze { display: inline-flex; padding: 3px; gap: 2px; background: var(--vlak-diep);
  border-radius: var(--radius-2); }
.weergavekeuze button { border: none; background: none; cursor: pointer;
  min-height: calc(var(--knop-hoogte-klein) - 6px); padding: 0 var(--ruimte-3);
  border-radius: var(--radius-1); font-size: var(--tekst-s); font-weight: 600;
  color: var(--tekst-2); }
.weergavekeuze button[aria-pressed="true"] { background: var(--vlak); color: var(--tekst);
  box-shadow: var(--schaduw-1); }

/* ---------------------------------------------------------------- tabellen */
.tabelwikkel { overflow-x: auto; }
.kaart > .tabelwikkel:first-child table thead th:first-child { border-top-left-radius: var(--radius-3); }
table.gegevens, table.lijst { width: 100%; font-size: var(--tekst-m); }
table.gegevens thead th, table.lijst th {
  position: sticky; top: 0; z-index: 2; text-align: left; white-space: nowrap;
  padding: var(--ruimte-2) var(--inspring); background: var(--vlak-zacht);
  border-bottom: 1px solid var(--rand);
  font-size: var(--tekst-xs); font-weight: 600; color: var(--tekst-3); letter-spacing: .01em;
}
table.gegevens th[aria-sort] { cursor: pointer; }
table.gegevens th[aria-sort]:hover { color: var(--tekst); }
table.gegevens th[aria-sort]:not([aria-sort="none"]) { color: var(--tekst); }
table.gegevens td, table.lijst td { padding: var(--ruimte-1) var(--inspring);
  height: var(--rij-hoogte); border-bottom: 1px solid var(--rand); vertical-align: middle; }
table.gegevens tbody tr:last-child td, table.lijst tbody tr:last-child td { border-bottom: none; }
table.gegevens tbody tr, table.lijst tbody tr { transition: background var(--duur-snel); }
table.gegevens tbody tr[data-klikbaar] { cursor: pointer; }
table.gegevens tbody tr[data-klikbaar]:hover, table.lijst tbody tr:hover { background: var(--vlak-zacht); }
table.gegevens tbody tr[aria-selected="true"] { background: var(--groen-50); }
table.gegevens tbody tr.gemarkeerd { animation: markeer 1.6s var(--soepel); }
@keyframes markeer { 0% { background: var(--groen-100); } 100% { background: transparent; } }
table.gegevens td.num, table.gegevens th.num, table.lijst td.num, table.lijst th.num {
  text-align: right; font-variant-numeric: tabular-nums; }
table.gegevens td.getal, table.lijst td.getal { font-variant-numeric: tabular-nums; }
table.lijst td.afwijking { color: var(--letop); font-weight: 600; }
table.gegevens.compact td { height: calc(var(--rij-hoogte) - 8px); }
table.gegevens .rijacties, .rijacties { display: flex; gap: var(--ruimte-1);
  justify-content: flex-end; align-items: center; }
table.gegevens .rijacties { opacity: 0; transition: opacity var(--duur-snel); }
table.gegevens tr:hover .rijacties, table.gegevens tr:focus-within .rijacties { opacity: 1; }
table.gegevens .rijacties svg { width: 16px; height: 16px; color: var(--tekst-3); }
@media (hover: none) { table.gegevens .rijacties { opacity: 1; } }
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.lijst td .knop.klein { margin-left: var(--ruimte-2); }
table.gegevens td .label, table.lijst td .label { display: inline; color: var(--tekst-3); }

.filterbalk { display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap;
  padding: var(--ruimte-3) var(--inspring); border-bottom: 1px solid var(--rand); }
.filterbalk .zoek { position: relative; flex: 1; min-width: 200px; max-width: 360px; }
.filterbalk .zoek svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--tekst-3); pointer-events: none; }
.filterbalk .zoek input { padding-left: 32px; font-size: var(--tekst-m); }
.filterbalk select { width: auto; min-width: 9rem; font-size: var(--tekst-m); }
.filterbalk .label { font-size: var(--tekst-s); }
.filterrij { display: flex; align-items: flex-end; gap: var(--ruimte-3); flex-wrap: wrap;
  margin-bottom: var(--ruimte-4); }
.filterrij .veld { margin-bottom: 0; min-width: 160px; }

/* Definitielijsten. */
div.gegevens, .gegevenslijst:not(dl) { 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); color: var(--tekst-3);
  letter-spacing: 0; text-transform: none; font-weight: 500; }
.gegeven .waarde { margin-top: 2px; font-size: var(--tekst-m); font-weight: 500; }
.gegeven .waarde.leeg, .gegeven .waarde.leeg-waarde, .leeg-waarde { color: var(--tekst-3);
  font-weight: 400; font-style: italic; }
dl.gegevenslijst { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
  gap: 0; margin: 0 0 var(--ruimte-4); }
dl.gegevenslijst dt, dl.gegevenslijst dd { padding: var(--ruimte-2) 0;
  border-bottom: 1px solid var(--rand); margin: 0; font-size: var(--tekst-m); }
/* Een lang label (Rekeningnummer) breekt op een lettergreep, niet op een willekeurige letter. */
dl.gegevenslijst dt { color: var(--tekst-2); min-width: 0; hyphens: auto; overflow-wrap: anywhere;
  padding-right: var(--ruimte-2); }
dl.gegevenslijst dd { font-weight: 500; }
dl.gegevenslijst > :nth-last-child(-n+2) { border-bottom: none; }
.verdeling { display: flex; flex-direction: column; }
.verdeelrij { display: grid; grid-template-columns: minmax(9rem, 1.6fr) minmax(48px, 1.4fr) auto;
  align-items: center; gap: var(--ruimte-3); padding: var(--ruimte-2) 0;
  border-bottom: 1px solid var(--rand); }
.verdeelrij:last-child { border-bottom: none; }
.verdeelrij .naam { font-size: var(--tekst-m); color: var(--tekst); overflow-wrap: anywhere; }
a.naam { text-decoration: none; }
a.naam:hover { text-decoration: underline; }
.verdeelrij .waarde { font-size: var(--tekst-m); font-weight: 600; text-align: right;
  white-space: nowrap; }
.verdeelrij .waarde.klein { font-weight: 400; font-size: var(--tekst-s); color: var(--tekst-2);
  text-align: left; white-space: normal; }
.staafje { height: 6px; border-radius: var(--radius-pil); background: var(--vlak-diep);
  overflow: hidden; }
.staafje i { display: block; height: 100%; width: 100%; transform-origin: left;
  background: var(--inkt-700); border-radius: var(--radius-pil); }
.opsomming { list-style: none; margin: 0 0 var(--ruimte-3); padding: 0;
  display: flex; flex-direction: column; gap: var(--ruimte-2); }
.opsomming:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- regel (lijstrij) */
.regellijst { display: flex; flex-direction: column; }
.regel {
  display: grid;
  grid-template-columns: auto minmax(10rem, 1.6fr) auto auto max-content;
  align-items: center; gap: var(--ruimte-2) var(--ruimte-4);
  min-height: var(--rij-hoogte); padding: var(--ruimte-2) var(--inspring);
  border-bottom: 1px solid var(--rand);
}
.regel:last-child { border-bottom: none; }
.regel:has(> .regel-merk:empty) { grid-template-columns: minmax(10rem, 1.6fr) auto auto max-content; }
/* Regels zonder de vaste sleuven (oude aanroepen met alleen tekst + acties). */
.regel:not(:has(> .regel-merk)) { grid-template-columns: minmax(0, 1fr) auto; }
a.regel, .regel.klikbaar { text-decoration: none; color: inherit; }
a.regel:hover, .regel.klikbaar:hover { background: var(--vlak-zacht); }
/* Een regel die aandacht vraagt: het lampje in de standsleuf zegt het; geen gekleurde
   rand erbij. */
.regel.vraagt-aandacht, .regel.urgent { background: var(--vlak); }
.regel-merk { display: flex; align-items: center; }
.regel-merk:empty, .regel-meta:empty, .regel-stand:empty, .regel-acties:empty { display: none; }
.regel-naam, .regel-tekst { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.regel-naam .titel, .regel-tekst .titel { font-weight: 600; font-size: var(--tekst-m);
  color: var(--tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.regel-tekst .titel a { color: inherit; text-decoration: none; }
.regel-tekst .titel a:hover { text-decoration: underline; }
a.regel-naam-link { color: inherit; text-decoration: none; font-weight: 600; }
a.regel-naam-link:hover { text-decoration: underline; }
.regel-naam .onder, .regel-tekst .onder { font-size: var(--tekst-s); color: var(--tekst-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.regel-naam .onder.uitleg, .regel-tekst .onder.uitleg { white-space: normal; overflow: visible; }
.regel-meta { display: flex; align-items: baseline; gap: var(--ruimte-5); }
.regel-meta > * { display: flex; flex-direction: column; gap: 1px; text-align: right; }
.regel-meta .waarde { font-variant-numeric: tabular-nums; font-size: var(--tekst-m);
  font-weight: 500; color: var(--tekst); white-space: nowrap; }
.regel-meta .wat { font-size: var(--tekst-xs); color: var(--tekst-3); }
.regel-stand { display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap; }
.regel-acties { display: flex; align-items: center; gap: var(--ruimte-1); justify-content: flex-end; }
.paneel-lijf:not(.strak) > .regellijst, .kaart-lijf > .regel, .kaart-lijf.dicht > .regel {
  margin-left: calc(var(--inspring) * -1); margin-right: calc(var(--inspring) * -1); }
.kaart-lijf:not(.dicht) > .regel:first-child { margin-top: calc(var(--inspring) * -1); }
.kaart-lijf > .regel:last-child { margin-bottom: calc(var(--inspring) * -1); }
@media (max-width: 899px) {
  .regel { grid-template-columns: auto 1fr auto; row-gap: var(--ruimte-1); }
  .regel:has(> .regel-merk:empty) { grid-template-columns: 1fr auto; }
  .regel-naam, .regel-tekst { grid-column: 1 / -2; }
  .regel:has(> .regel-merk:not(:empty)) .regel-naam { grid-column: 2 / -2; }
  .regel-meta { grid-column: 1 / -1; gap: var(--ruimte-4); }
  .regel-meta > * { text-align: left; }
  .regel-acties { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- 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); }
.dialoog {
  width: 100%; max-width: 520px; max-height: calc(100dvh - var(--ruimte-8));
  display: flex; flex-direction: column;
  background: var(--vlak); border-radius: var(--radius-4); box-shadow: var(--schaduw-3);
  animation: opkomen var(--duur-traag) var(--uitloop);
}
.dialoog.breed { max-width: 760px; }
.dialoog-kop { padding: var(--ruimte-5) var(--ruimte-5) var(--ruimte-3); }
.dialoog-kop h3 { font-size: var(--tekst-xl); font-weight: 600; }
.dialoog-kop .toelichting { margin: var(--ruimte-2) 0 0; color: var(--tekst-2);
  font-size: var(--tekst-m); max-width: 62ch; }
.dialoog-lijf { padding: 0 var(--ruimte-5) var(--ruimte-2); overflow-y: auto; flex: 1; }
.dialoog-voet { display: flex; align-items: center; gap: var(--ruimte-2);
  padding: var(--ruimte-3) var(--ruimte-5); border-top: 1px solid var(--rand);
  background: var(--vlak-zacht); border-radius: 0 0 var(--radius-4) var(--radius-4); }
.dialoog-voet .rechts { margin-left: auto; display: flex; gap: var(--ruimte-2); flex-wrap: wrap;
  justify-content: flex-end; }
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%);
  display: flex; flex-direction: column;
  background: var(--vlak); border-left: 1px solid var(--rand); box-shadow: var(--schaduw-3);
  animation: inschuiven var(--duur-traag) var(--uitloop);
}
.drawer .dialoog-voet { border-radius: 0; }
.weggooivraag { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  padding: var(--ruimte-4); background: var(--sluier); border-radius: inherit; }
.weggooikaart { width: 100%; max-width: 380px; background: var(--vlak);
  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-4); color: var(--tekst-2); font-size: var(--tekst-m); }
.weggooikaart .rechts { display: flex; gap: var(--ruimte-2); justify-content: flex-end; }

/* ---------------------------------------------------------------- toast & meldingen */
.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: 400px; }
.toast { display: flex; align-items: flex-start; gap: var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-4);
  background: var(--inkt-950); color: var(--tekst-op-donker);
  border-radius: var(--radius-3); box-shadow: var(--schaduw-2);
  font-size: var(--tekst-m); line-height: 1.45; animation: opkomen var(--duur-traag) var(--uitloop); }
.toast > div { flex: 1; min-width: 0; padding-top: 1px; }
.toast svg { width: 18px; height: 18px; flex: none; }
.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(--tekst-op-donker-2); background: none;
  border: none; padding: 0; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 6px; }
.toast .sluit:hover { background: rgba(255,255,255,.1); color: var(--tekst-op-donker); }

.melding, .bericht {
  display: flex; align-items: flex-start; gap: var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-4); border-radius: var(--radius-2);
  border: 1px solid var(--rand); background: var(--vlak-zacht);
  font-size: var(--tekst-m); line-height: 1.45; margin-bottom: var(--ruimte-4);
}
.melding > svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.melding .inhoud, .bericht > div { flex: 1; min-width: 0; }
.melding strong, .bericht strong { display: block; font-weight: 600; margin-bottom: 1px; }
.melding .knop { align-self: center; }
.melding.info, .bericht { background: var(--info-bg); border-color: var(--info-rand); }
.melding.info svg { color: var(--info); }
.melding.letop { background: var(--letop-bg); border-color: var(--letop-rand); }
.melding.letop svg { color: var(--letop); }
.melding.gevaar { background: var(--gevaar-bg); border-color: var(--gevaar-rand); }
.melding.gevaar svg { color: var(--gevaar); }
.melding.succes { background: var(--succes-bg); border-color: var(--succes-rand); }
.melding.succes svg { color: var(--succes); }
.bericht strong { color: var(--info); }
/* De twee handelingen die vanaf het openingsscherm van het portaal moeten kunnen: verlof
   aanvragen en ziek melden. Naast elkaar zolang het past, allebei over de volle breedte op
   een telefoon — daar worden ze met één duim geraakt. */
.snelrij { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); margin-bottom: var(--ruimte-4); }
.snelrij .knop { flex: 1 1 180px; min-height: 44px; }

.taken { display: flex; flex-direction: column; gap: var(--ruimte-2); margin-bottom: var(--ruimte-4); }
.taken .melding { margin: 0; align-items: center; }

/* ---------------------------------------------------------------- lege staat & skelet */
.legestaat { display: grid; justify-items: center; text-align: center;
  padding: var(--ruimte-7) var(--ruimte-5); max-width: 46ch; margin: 0 auto; }
.legestaat .merkvorm { width: 36px; height: 36px; margin-bottom: var(--ruimte-3);
  color: var(--groen-600); opacity: .6; }
.legestaat h3 { margin-bottom: var(--ruimte-2); font-size: var(--tekst-kaart); }
.legestaat p { color: var(--tekst-2); font-size: var(--tekst-m); margin: 0; }
.legestaat .acties { display: flex; gap: var(--ruimte-2); margin-top: var(--ruimte-4);
  flex-wrap: wrap; justify-content: center; }
.skelet { background: linear-gradient(90deg, var(--vlak-diep) 25%, var(--vlak-zacht) 37%,
  var(--vlak-diep) 63%); background-size: 200% 100%; border-radius: var(--radius-1);
  animation: glans 1.4s ease-in-out infinite; }
.skelet.streep { height: 10px; margin-bottom: var(--ruimte-2); }
.skelet.kop { height: 16px; width: 40%; margin-bottom: var(--ruimte-4); }
.skelet.blok { height: 96px; border-radius: var(--radius-3); }
.skelet.cirkel { width: 32px; height: 32px; border-radius: 50%; }
.kaart-lijf > .rij[data-skeletrij] { padding: var(--ruimte-2) 0; }

/* ---------------------------------------------------------------- voortgang */
.voortgang { height: 6px; border-radius: var(--radius-pil); background: var(--vlak-diep); overflow: hidden; }
.voortgang i { display: block; height: 100%; width: 100%; border-radius: var(--radius-pil);
  transform-origin: left center; transform: scaleX(0); background: var(--groen-600);
  transition: transform var(--duur-traag) var(--uitloop); }
.voortgang.letop i { background: var(--letop-vlak); }
.voortgang.gevaar i { background: var(--gevaar-vlak); }
.ring { transform: rotate(-90deg); width: 56px; height: 56px; flex: none; }
.ring circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.ring .baan { stroke: var(--vlak-diep); }
.ring .vulling { stroke: var(--groen-600); transition: stroke-dashoffset .8s var(--uitloop); }
.ring.letop .vulling { stroke: var(--letop-vlak); }
.ring.gevaar .vulling, .ring.urgent .vulling { stroke: var(--gevaar-vlak); }
.ring.goed .vulling { stroke: var(--groen-600); }
.balkrij { display: grid; grid-template-columns: 100px 1fr 56px; gap: var(--ruimte-3);
  align-items: center; margin-top: var(--ruimte-2); }
.balklabel { font-size: var(--tekst-s); color: var(--tekst-2); }
.balk { height: 6px; border-radius: var(--radius-pil); background: var(--vlak-diep); overflow: hidden; }
.balk i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0);
  border-radius: var(--radius-pil); background: var(--groen-600);
  transition: transform .6s var(--uitloop); }
.balk i.letop { background: var(--letop-vlak); }
.balk i.urgent { background: var(--gevaar-vlak); }
.balkwaarde { font-size: var(--tekst-s); font-weight: 600; text-align: right; }
.meter { height: 6px; border-radius: var(--radius-pil); background: var(--vlak-diep); overflow: hidden; }
.meter i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0);
  background: var(--groen-600); border-radius: var(--radius-pil); transition: transform .6s var(--uitloop); }
.meter.letop i { background: var(--letop-vlak); }
.meter.urgent i { background: var(--gevaar-vlak); }

/* ---------------------------------------------------------------- stapbalk / wizard */
.stapbalk { display: flex; flex-direction: column; gap: 2px; }
.stapbalk button, .stapbalk .stap {
  display: flex; align-items: center; gap: var(--ruimte-3); width: 100%;
  min-height: var(--knop-hoogte); padding: 0 var(--ruimte-3);
  background: none; border: none; border-radius: var(--radius-2);
  text-align: left; color: var(--tekst-2); font-size: var(--tekst-m); font-weight: 500; cursor: pointer;
}
.stapbalk button:hover:not([disabled]):not([aria-disabled="true"]) { background: var(--vlak-diep); }
.stapbalk .nummer { display: grid; place-items: center; width: 24px; height: 24px; flex: none;
  border-radius: 50%; background: var(--vlak-diep); color: var(--tekst);
  font-size: var(--tekst-xs); font-weight: 700; }
.stapbalk .nummer svg { width: 13px; height: 13px; }
.stapbalk [aria-current="step"] { color: var(--tekst); font-weight: 600; background: var(--groen-50); }
.stapbalk [aria-current="step"] .nummer { background: var(--inkt-900); color: var(--tekst-op-donker); }
.stapbalk .klaar .nummer { background: var(--groen-600); color: var(--tekst-op-donker); }
.stapbalk button[disabled], .stapbalk button[aria-disabled="true"] { opacity: .5; cursor: default; }

.wizard { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--ruimte-5);
  align-items: start; }
.wizard .stapbalk { position: sticky; top: calc(var(--topbalk) + var(--ruimte-4)); }
.wizard .stapkop { font-size: var(--tekst-sectie); margin-bottom: var(--ruimte-2); }
.wizard .kaart-lijf > .toelichting { margin-bottom: var(--ruimte-5); }
.wizardvoet { display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap; }

/* Het controlescherm van een wizard: per blok wat je hebt ingevuld, met één knop terug naar
   de stap waar dat blok vandaan komt. Springen naar de fout is korter dan drie keer Vorige. */
.controleblok + .controleblok { margin-top: var(--ruimte-5); padding-top: var(--ruimte-4);
  border-top: 1px solid var(--rand); }
.controlekop { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--ruimte-3); margin-bottom: var(--ruimte-2); }
.controlekop h3 { font-size: var(--tekst-l); margin: 0; }
.controleblok .gegevenslijst { margin-bottom: 0; }
.controle { display: flex; flex-direction: column; gap: var(--ruimte-4); }
.controle section { border: 1px solid var(--rand); border-radius: var(--radius-3); overflow: hidden; }
.controle .blokkop { display: flex; align-items: center; gap: var(--ruimte-3);
  padding: var(--ruimte-2) var(--ruimte-4); background: var(--vlak-zacht);
  border-bottom: 1px solid var(--rand); }
.controle .blokkop svg { width: 16px; height: 16px; color: var(--groen-700); }
.controle .blokkop h3 { flex: 1; font-size: var(--tekst-m); }
.controle dl { display: grid; grid-template-columns: minmax(140px, 34%) minmax(0, 1fr); gap: 0; margin: 0; }
.controle dt, .controle dd { padding: var(--ruimte-2) var(--ruimte-4);
  border-bottom: 1px solid var(--rand); margin: 0; font-size: var(--tekst-m); }
.controle dt { color: var(--tekst-2); }
.controle dd { font-weight: 500; }
.controle dl > :nth-last-child(-n+2) { border-bottom: none; }
.controle .ontbreekt { color: var(--letop); font-weight: 600; }
.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-2) 0 var(--ruimte-2) var(--ruimte-7); border-bottom: 1px solid var(--rand);
  font-size: var(--tekst-m); }
.stappen li:last-child { border-bottom: none; }
.stappen li::before { content: counter(stap); position: absolute; left: 0; top: var(--ruimte-2);
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--groen-100); color: var(--groen-700); font-size: var(--tekst-xs); font-weight: 700; }
.stappen .stapkop { display: block; font-weight: 600; }
.stappen .stapuitleg { display: block; margin-top: 2px; color: var(--tekst-2); }
.stapnummer { display: grid; place-items: center; width: 22px; height: 22px;
  border: 1px solid var(--rand-sterk); border-radius: var(--radius-1);
  font-size: var(--tekst-xs); font-weight: 600; color: var(--tekst-2); }

/* ---------------------------------------------------------------- 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: 4px 8px;
  border-radius: var(--radius-1); white-space: nowrap; background: var(--inkt-950); color: var(--tekst-op-donker);
  font-size: var(--tekst-xs); opacity: 0; pointer-events: none; transition: opacity var(--duur-snel); }
.tip:hover::after, .tip:focus-visible::after { opacity: 1; }

/* ---------------------------------------------------------------- schakelaar */
.meldschakel, .rechtschakel { position: relative; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; min-width: 44px; min-height: 44px; margin: -8px; }
.meldschakel input, .rechtschakel input { position: absolute; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; }
.meldschakel-spoor, .rechtschakel-spoor { width: 40px; height: 22px; border-radius: var(--radius-pil);
  background: var(--rand-sterk); transition: background var(--duur-snel) var(--uitloop); }
.meldschakel-spoor::after, .rechtschakel-spoor::after { content: ""; display: block; width: 18px;
  height: 18px; margin: 2px; border-radius: 50%; background: var(--vlak);
  box-shadow: 0 1px 2px rgba(22,35,46,.3); transition: transform var(--duur-snel) var(--uitloop); }
.meldschakel input:checked + .meldschakel-spoor, .rechtschakel input:checked + .rechtschakel-spoor {
  background: var(--groen-600); }
.meldschakel input:checked + .meldschakel-spoor::after,
.rechtschakel input:checked + .rechtschakel-spoor::after { transform: translateX(18px); }
.meldschakel input:focus-visible + .meldschakel-spoor,
.rechtschakel input:focus-visible + .rechtschakel-spoor { box-shadow: var(--focus-gloed); }
.meldschakel input:disabled + .meldschakel-spoor { opacity: .45; }
.meldschakel:has(input:disabled) { cursor: not-allowed; }

/* ---------------------------------------------------------------- inloggen */
.inlog { min-height: 100dvh; display: grid; place-items: center; padding: var(--ruimte-5);
  background: var(--grond); }
.inlog-kaart { width: min(100%, 400px); background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--radius-4); padding: var(--ruimte-6) var(--ruimte-6) var(--ruimte-5);
  box-shadow: var(--schaduw-2); }
.inlog-merk { display: flex; justify-content: center; margin-bottom: var(--ruimte-5); }
.inlog-merk img, .inlog-merk svg { width: 160px; height: auto; }
.logo-vol { display: block; width: 160px; height: auto; }
.inlog-titel { text-align: center; margin-bottom: var(--ruimte-5); }
.inlog-titel h2 { font-size: var(--tekst-sectie); }
.inlog-onder { display: block; margin-top: var(--ruimte-1); font-size: var(--tekst-m);
  color: var(--tekst-2); }
.inlog-kaart .veld { text-align: left; }
.inlog-kaart .knop.breed { margin-top: var(--ruimte-2); }
.inlog-kaart .knop.plat { margin-top: var(--ruimte-2); width: 100%; }
.inlog-kaart .melding { margin-bottom: var(--ruimte-4); }
.inlog-voet { margin-top: var(--ruimte-4); text-align: center; font-size: var(--tekst-xs);
  color: var(--tekst-3); }
.inlog-voet a { color: var(--tekst-3); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1023px) {
  .velden { grid-template-columns: minmax(0, 1fr); }
  .dialoog { max-width: none; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .dialoog-voet { border-radius: 0; }
  .laag.dialoogpositie { padding: 0; place-items: stretch; }
  .drawer { width: 100%; border-left: none; }
  .toasts { left: var(--ruimte-4); right: var(--ruimte-4); bottom: 84px; max-width: none; }
  .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) {
  .paginakop, .titelblok { grid-template-columns: minmax(0, 1fr); }
  .paginakop .acties, .titelblok-acties { grid-column: 1; justify-content: flex-start; }
  /* `.acties` is een rij en `flex: 1` vult die rij — maar `.actiegroep` eronder is een
     kolom, en daar is `flex: 1` de hoogte. Zonder de `>` zakte "Iemand in dienst nemen"
     op een telefoon in tot 18 px: wel de volle breedte, geen knop meer om te raken. */
  .paginakop .acties > .knop:not(.klein):not(.stil) { flex: 1; }
  .actiegroep { align-items: stretch; }
  .wizard .stapbalk .naam { display: none; }
  .wizardvoet .knop { flex: 1; }
  .dialoog-kop, .dialoog-voet { padding-left: var(--ruimte-4); padding-right: var(--ruimte-4); }
  .dialoog-lijf { padding-left: var(--ruimte-4); padding-right: var(--ruimte-4); }
  .filterbalk .zoek { max-width: none; min-width: 0; flex-basis: 100%; }

  /* Twee kolommen laten voor het label 105 px over, en dan brak "Rekeningnummer" midden
     in het woord af: "Rekeningnumm / er". Op een telefoon staat het label boven de
     waarde; dan hoeft er niets te breken. */
  dl.gegevenslijst { grid-template-columns: minmax(0, 1fr); }
  dl.gegevenslijst dt { padding-bottom: 0; padding-right: 0; border-bottom: none;
    font-size: var(--tekst-s); overflow-wrap: normal; }
  dl.gegevenslijst dd { padding-top: 2px; }
  .afleesstrip { grid-template-columns: repeat(2, 1fr); }

  /* Tabellen worden kaartjes per regel: zijwaarts schuiven op 375 px verbergt de helft. */
  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(--inspring); border-bottom: 1px solid var(--rand); }
  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: 28px; padding: 2px 0; border-bottom: none;
    text-align: left; }
  table.gegevens td::before { content: attr(data-kop); flex: none;
    font-size: var(--tekst-xs); font-weight: 600; color: var(--tekst-3); }
  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 td:not([data-kop])::before { content: none; }
  table.gegevens .rijacties { opacity: 1; justify-content: flex-start; }
}

/* --- Tweestapsverificatie -------------------------------------------------
   De QR naast de uitleg zolang er ruimte is, eronder als die er niet is. De codes
   in tabelcijfers: ze worden overgetypt en dan telt elk teken. */
.tweestaps { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr);
  gap: var(--ruimte-5); align-items: start; }
.tweestaps .foutsamenvatting { grid-column: 1 / -1; }
.tweestapsqr { width: 100%; color: var(--tekst); }
.tweestapsqr svg { width: 100%; height: auto; display: block; border-radius: var(--radius-2); }
.tweestapsuitleg { min-width: 0; }
.tweestapshandmatig { margin-bottom: var(--ruimte-4); }
.tweestapshandmatig summary { cursor: pointer; font-size: var(--tekst-s); color: var(--tekst-2); }
.sleuteltekst { margin: var(--ruimte-2) 0 0; padding: var(--ruimte-2) var(--ruimte-3);
  background: var(--vlak-diep); border-radius: var(--radius-2); letter-spacing: .08em;
  overflow-wrap: anywhere; }
.herstelcodes { list-style: none; margin: 0 0 var(--ruimte-4); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--ruimte-2); }
.herstelcodes li { padding: var(--ruimte-2) var(--ruimte-3); background: var(--vlak-diep);
  border-radius: var(--radius-2); text-align: center; letter-spacing: .06em; }
.tweestapscode { letter-spacing: .3em; text-align: center; font-size: var(--tekst-l); }
.tweestapshulp { margin-top: var(--ruimte-3); }
.tweestapshulp summary { cursor: pointer; font-size: var(--tekst-s); color: var(--tekst-2); }
.tweestapsregel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--ruimte-3); margin-bottom: var(--ruimte-4); padding: var(--ruimte-3) 0;
  border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.tweestapsregel .naam { display: block; font-weight: 600; }
.tweestapsregel .label { display: block; max-width: 52ch; }

@media (max-width: 560px) {
  .tweestaps { grid-template-columns: minmax(0, 1fr); }
  .tweestapsqr { max-width: 220px; }
}

/* Twee handelingen naast elkaar met hun gevolg erbij: geen opsomming om te scannen maar
   twee alinea's om te lezen voordat je kiest. */
.keuzelijst { list-style: none; margin: 0 0 var(--ruimte-4); padding: 0;
  display: flex; flex-direction: column; gap: var(--ruimte-3); }
.keuzelijst li { padding-left: var(--ruimte-4); border-left: 2px solid var(--rand); }
.keuzelijst strong { display: block; }

/* --- Uitgifte: kiezen links, meegeven rechts ------------------------------
   Eén dialoog voor een pakket, losse kleding, een nieuw toestel en wat op voorraad
   stond. Op een smal scherm komt de lijst onder de keuze. */
.uitgifte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--ruimte-5); }
.uitgiftekeuze { min-width: 0; display: flex; flex-direction: column; gap: var(--ruimte-2); }
.uitgiftekeuze .zonelabel { margin: var(--ruimte-3) 0 var(--ruimte-1); }
.uitgiftekeuze .zonelabel:first-child { margin-top: 0; }
.keuzeknoppen { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
.keuzeknoppen.klein { gap: var(--ruimte-1); }
.pakketknop { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  padding: var(--ruimte-3); border: 1px solid var(--rand); border-radius: var(--radius-2);
  background: var(--vlak); text-align: left; cursor: pointer; font: inherit; color: inherit; }
.pakketknop:hover { border-color: var(--groen-700); }
.pakketknop .titel { font-weight: 600; }
.pakketknop .onder { font-size: var(--tekst-s); color: var(--tekst-2); }
.uitgiftelijst { min-width: 0; display: flex; flex-direction: column; gap: var(--ruimte-3); }
.uitgiftelijstkop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ruimte-3); }
.uitgiftelijstkop h3 { margin: 0; font-size: var(--tekst-m); }
.uitgifteregels { display: flex; flex-direction: column; border: 1px solid var(--rand); border-radius: var(--radius-2);
  background: var(--vlak); min-height: 56px; }
.uitgifteregels .legeregel { margin: 0; padding: var(--ruimte-4); color: var(--tekst-2); font-size: var(--tekst-s); }
.uitgifteregel { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--ruimte-2) var(--ruimte-3);
  align-items: center; padding: var(--ruimte-2) var(--ruimte-3); border-bottom: 1px solid var(--rand); }
.uitgifteregel:last-child { border-bottom: none; }
.uitgifteregel.apparaat { grid-template-columns: minmax(0, 1fr) auto; }
.uitgifteregel.apparaat .apparaatvelden { grid-column: 1 / -1; }
.uitgiftenaam { min-width: 0; display: flex; flex-direction: column; }
.uitgiftenaam .titel { font-weight: 600; }
.uitgiftenaam .onder { font-size: var(--tekst-s); color: var(--tekst-2); overflow-wrap: anywhere; }
.uitgiftevelden { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); align-items: end; }
.uitgiftevelden label { display: flex; flex-direction: column; gap: 2px; font-size: var(--tekst-xs); color: var(--tekst-2); }
.uitgiftevelden select, .uitgiftevelden input { min-height: 32px; padding: 2px var(--ruimte-2); }
/* Een maat is twee tekens plus een pijltje; zonder minimum drukt de pijl over de "52". */
.uitgiftevelden select { min-width: 5.5rem; }
.uitgiftevelden input[type="number"] { width: 64px; }
.apparaatvelden { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--ruimte-2); }
.apparaatvelden label { width: 100%; }
.apparaatvelden input { width: 100%; }
.matenregel { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ruimte-2) var(--ruimte-4);
  font-size: var(--tekst-s); color: var(--tekst-2); }
.matenregel strong { color: var(--tekst); font-weight: 600; }
.matenkop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2) var(--ruimte-3); }
.matenkop strong { font-weight: 600; }

/* --- Pakketten -------------------------------------------------------------- */
.pakketten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--ruimte-4); }
.pakket { display: flex; flex-direction: column; gap: var(--ruimte-3); padding: var(--ruimte-4);
  border: 1px solid var(--rand); border-radius: var(--radius-2); background: var(--vlak); }
.pakket.verborgen { opacity: .7; }
.pakketkop { display: flex; justify-content: space-between; gap: var(--ruimte-3); align-items: flex-start; }
.pakketkop .titel { display: block; font-weight: 600; }
.pakketkop .onder { display: block; font-size: var(--tekst-s); color: var(--tekst-2); }
.pakketregels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pakketregels li .getal { display: inline-block; min-width: 2.2em; color: var(--tekst-2); }
.pakketregelbewerker { display: flex; flex-direction: column; gap: var(--ruimte-2); margin-bottom: var(--ruimte-3); }
.pakketregel { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto; gap: var(--ruimte-2); align-items: center; }

@media (max-width: 700px) {
  .uitgifte { grid-template-columns: minmax(0, 1fr); }
  .uitgifteregel { grid-template-columns: minmax(0, 1fr) auto; }
  .uitgifteregel .uitgiftevelden { grid-column: 1 / -1; }
}

/* Het mandje in de wizard: het stapvak is smaller dan de brede dialoog, dus de
   twee kolommen gaan eerder onder elkaar. */
.wizard .uitgifte { margin-top: var(--ruimte-3); }
@media (max-width: 1100px) {
  .wizard .uitgifte { grid-template-columns: minmax(0, 1fr); }
}

/* Het kolommenmenu van de medewerkerslijst: twintig keuzes passen niet onder
   elkaar op een laptopscherm, dus twee kolommen en scrollen als het moet. */
.kolommenmenu { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr));
  max-height: min(70vh, 600px); overflow-y: auto; }
.kolommenmenu > button { grid-column: 1 / -1; }
@media (max-width: 480px) { .kolommenmenu { grid-template-columns: minmax(0, 1fr); } }

/* --- Standenregister -------------------------------------------------------

   Een werkbank van twee kolommen. Links wie er nog moet, met een voortgangsbalk;
   rechts degene die je nu behandelt, over de volle breedte. Onder de 1080 px
   klapt het naar één kolom: de lijst eerst, dan het werk.

   De linkerkolom blijft staan (sticky) en scrollt zelf, zodat je bij een lange
   afwijkingenlijst nog steeds ziet waar je bent en wat er nog komt. */
.standbank { display: grid; grid-template-columns: 264px minmax(0, 1fr);
  gap: var(--ruimte-4); align-items: start; }
.standbank-wie { position: sticky; top: var(--ruimte-3); display: flex; flex-direction: column;
  gap: var(--ruimte-3); max-height: calc(100vh - 2 * var(--ruimte-4)); overflow-y: auto;
  padding-right: 2px; }
.standbank-werk { min-width: 0; display: flex; flex-direction: column; gap: var(--ruimte-4); }

/* De periodebalk boven de bank. */
.stand-nav { display: flex; align-items: center; gap: var(--ruimte-3); flex-wrap: wrap;
  margin-bottom: var(--ruimte-4); }
.stand-periode { display: flex; flex-direction: column; min-width: 0; }
.stand-periode .titel { font-size: var(--tekst-sectie); font-weight: 600;
  text-transform: capitalize; }
.stand-ref { font-size: var(--tekst-s); color: var(--tekst-3); }
.stand-kies { margin-left: auto; }
.stand-kies select { min-height: 36px; }
.stand-leeg { padding: var(--ruimte-5) var(--ruimte-4); }

/* --- Links: de stapel ---------------------------------------------------- */

.stand-voortgang { background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--radius-3); padding: var(--ruimte-3); }
.stand-voortgang.af { border-color: var(--succes-rand); background: var(--succes-bg); }
.stand-voortgang-kop { display: flex; align-items: center; justify-content: space-between;
  gap: var(--ruimte-2); margin-bottom: var(--ruimte-2); font-size: var(--tekst-m); }
.stand-af { display: inline-flex; align-items: center; gap: 4px; color: var(--succes);
  font-weight: 600; font-size: var(--tekst-s); }
.stand-af svg { width: 14px; height: 14px; }
.stand-baan { height: 6px; border-radius: var(--radius-pil); background: var(--vlak-diep);
  overflow: hidden; }
.stand-vulling { height: 100%; border-radius: var(--radius-pil); background: var(--succes);
  transition: width .3s ease; }

.stand-filters { display: flex; gap: 2px; padding: 3px; background: var(--vlak-diep);
  border-radius: var(--radius-2); }
.stand-filter { flex: 1; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--radius-1); padding: 5px 8px; font: inherit; font-size: var(--tekst-s);
  color: var(--tekst-3); display: flex; align-items: center; justify-content: center; gap: 5px; }
.stand-filter span { font-variant-numeric: tabular-nums; opacity: .75; }
.stand-filter:hover { color: var(--tekst); }
.stand-filter.aan { background: var(--vlak); color: var(--tekst); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }

.stand-wielijst { display: flex; flex-direction: column; gap: 2px; }
.stand-wie { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: var(--ruimte-2); width: 100%; text-align: left; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius-2); background: transparent;
  padding: var(--ruimte-2) var(--ruimte-3); font: inherit; }
.stand-wie .naam { grid-column: 1; font-weight: 550; color: var(--tekst);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stand-wie .onder { grid-column: 1; grid-row: 2; font-size: var(--tekst-xs);
  color: var(--tekst-3); }
.stand-wie:hover { background: var(--vlak-zacht); }
.stand-wie.actief { background: var(--vlak); border-color: var(--rand-sterk);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07); }
.stand-wie.klaar .naam { color: var(--tekst-3); font-weight: 500; }
.stand-teller { grid-column: 2; grid-row: 1 / span 2; min-width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pil); background: var(--letop-bg); color: var(--letop);
  border: 1px solid var(--letop-rand); font-size: var(--tekst-xs); font-weight: 700;
  font-variant-numeric: tabular-nums; }
.stand-vink { grid-column: 2; grid-row: 1 / span 2; color: var(--succes);
  display: inline-flex; }
.stand-vink svg { width: 16px; height: 16px; }
.stand-wieleeg { margin: 0; padding: var(--ruimte-3); font-size: var(--tekst-s);
  color: var(--tekst-3); }

.stand-aandacht { border: 1px solid var(--gevaar-rand); background: var(--gevaar-bg);
  border-radius: var(--radius-3); padding: var(--ruimte-3); }
.stand-aandacht h3 { margin: 0 0 var(--ruimte-2); font-size: var(--tekst-s);
  text-transform: uppercase; letter-spacing: .04em; color: var(--gevaar); }
.stand-aandachtrij { padding: 5px 0; border-top: 1px solid var(--gevaar-rand); }
.stand-aandachtrij:first-of-type { border-top: 0; }
.stand-aandachtrij .naam { display: block; font-weight: 600; font-size: var(--tekst-m); }
.stand-aandachtrij .onder { display: block; font-size: var(--tekst-xs); color: var(--tekst-3); }

/* --- Rechts: het werkblad ------------------------------------------------ */

.stand-werkkop { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--ruimte-3); flex-wrap: wrap; }
.stand-wie-groot h2 { margin: 0; font-size: var(--tekst-pagina); line-height: 1.2; }
.stand-onder { margin: 3px 0 0; font-size: var(--tekst-m); color: var(--tekst-3); }
.stand-werkstand { flex: none; }

.stand-strip { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
.stand-chip { display: inline-flex; flex-direction: column; gap: 1px; padding: 6px 10px;
  border: 1px solid var(--rand); border-radius: var(--radius-2); background: var(--vlak); }
.stand-chip .wat { font-size: var(--tekst-xs); color: var(--tekst-3);
  text-transform: uppercase; letter-spacing: .04em; }
.stand-chip .w { font-weight: 600; }
.stand-chip .was { font-size: var(--tekst-xs); color: var(--tekst-3); }
.stand-chip.gewijzigd { border-color: var(--letop-vlak); background: var(--letop-bg); }

.stand-zone { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.stand-zonekop { display: flex; align-items: baseline; gap: var(--ruimte-3); margin: 0;
  font-size: var(--tekst-sectie); }
.stand-zonestand { font-size: var(--tekst-s); font-weight: 400; color: var(--tekst-3); }
.stand-niets { margin: 0; padding: var(--ruimte-4); border-radius: var(--radius-3);
  background: var(--succes-bg); border: 1px solid var(--succes-rand);
  color: var(--tekst); font-size: var(--tekst-m); }

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

/* Eén afwijking: kop met de omschrijving, dan de vier perioden en het verschil,
   dan de verklaring. De linkerrand zegt in welke staat hij is. */
.stand-afw { border: 1px solid var(--rand); border-left: 3px solid var(--letop-vlak);
  border-radius: var(--radius-3); background: var(--vlak); padding: var(--ruimte-4);
  display: flex; flex-direction: column; gap: var(--ruimte-3); }
.stand-afw.klaar { border-left-color: var(--succes); }
.stand-afw.gevolg { border-left-color: var(--rand-sterk); background: var(--vlak-zacht);
  padding: var(--ruimte-3); }
.stand-afw-kop { display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--ruimte-2); }
.stand-afw-kop .titel { font-weight: 640; font-size: var(--tekst-kaart); }
.stand-meta { display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-size: var(--tekst-xs); color: var(--tekst-3); white-space: nowrap; }
.stand-afw-lijf { display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--ruimte-4); }
.stand-afw-verschil { margin-left: auto; font-size: var(--tekst-xl); }

.stand-reeks { display: flex; gap: 2px; }
.stand-cel { display: flex; flex-direction: column; align-items: flex-end; min-width: 88px;
  padding: 5px 10px; border-radius: var(--radius-2); background: var(--vlak-zacht); }
.stand-cel .p { font-size: var(--tekst-xs); color: var(--tekst-3); text-transform: uppercase;
  letter-spacing: .03em; }
.stand-cel .w { font-weight: 500; font-variant-numeric: tabular-nums; }
.stand-cel.leeg .w { color: var(--tekst-3); }
.stand-cel.nu { background: var(--letop-bg); }
.stand-cel.nu .p { color: var(--letop); font-weight: 600; }
.stand-cel.nu .w { font-weight: 700; }

.stand-van-naar { display: flex; align-items: center; gap: var(--ruimte-3);
  font-size: var(--tekst-l); }
.stand-van-naar .was { color: var(--tekst-3); text-decoration: line-through; }
.stand-van-naar .pijl { display: inline-flex; color: var(--tekst-3); }
.stand-van-naar .pijl svg { width: 16px; height: 16px; }
.stand-van-naar .wordt { font-size: var(--tekst-xl); }

.stand-delta { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stand-delta.plus { color: var(--succes); }
.stand-delta.min { color: var(--gevaar); }
.stand-delta.gelijk { color: var(--tekst-3); font-weight: 400; font-size: var(--tekst-m); }
.stand-delta .pct { font-weight: 500; font-size: var(--tekst-s); color: var(--tekst-3); }

/* De verklaring: één veld, en eronder wat er meestal aan de hand is. */
.stand-vraag { display: flex; flex-direction: column; gap: var(--ruimte-2);
  padding-top: var(--ruimte-3); border-top: 1px solid var(--rand); }
.stand-verklaring { display: flex; gap: var(--ruimte-2); align-items: center; }
.stand-verklaring input { flex: 1; min-width: 0; }
.stand-snelrij { display: flex; flex-wrap: wrap; gap: 5px; }
.stand-snel { cursor: pointer; border: 1px solid var(--rand-sterk);
  border-radius: var(--radius-pil); background: var(--vlak); padding: 3px 11px;
  font: inherit; font-size: var(--tekst-s); color: var(--tekst-3); }
.stand-snel:hover { border-color: var(--accent); color: var(--tekst);
  background: var(--accent-zacht); }

.stand-verklaard { display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--ruimte-2); padding-top: var(--ruimte-3); border-top: 1px solid var(--rand);
  font-size: var(--tekst-m); }
.stand-verklaard .vink { display: inline-flex; color: var(--succes); }
.stand-verklaard .vink svg { width: 16px; height: 16px; }
.stand-verklaard .tekst { font-weight: 550; }
.stand-verklaard .door { color: var(--tekst-3); font-size: var(--tekst-s); }
.stand-verklaard button { margin-left: auto; }

/* De twee uitklappers onderaan: gevolgen en de volledige stand. */
.stand-uitklap { border: 1px solid var(--rand); border-radius: var(--radius-3);
  background: var(--vlak); }
.stand-uitklap > summary { cursor: pointer; padding: var(--ruimte-3) var(--ruimte-4);
  display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap;
  list-style: none; }
.stand-uitklap > summary::-webkit-details-marker { display: none; }
.stand-uitklap > summary .sam { font-weight: 600; }
.stand-uitklap > summary .tel { min-width: 20px; height: 20px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: var(--radius-pil);
  background: var(--vlak-diep); font-size: var(--tekst-xs); font-weight: 700;
  font-variant-numeric: tabular-nums; }
.stand-uitklap > summary .uitleg { font-size: var(--tekst-s); color: var(--tekst-3); }
.stand-uitklap > summary:hover { background: var(--vlak-zacht); }
.stand-uitklap[open] > summary { border-bottom: 1px solid var(--rand); }
.stand-uitklap > .stand-lijst,
.stand-uitklap > .tabelwikkel { padding: var(--ruimte-4); }

.stand-matrix td.nu, .stand-matrix th.nu { background: var(--vlak-zacht); font-weight: 600; }
.stand-matrix tr.groep td { background: var(--vlak-diep); font-weight: 600;
  font-size: var(--tekst-s); text-transform: uppercase; letter-spacing: .04em; }
.stand-matrix tr.anders td { background: var(--letop-bg); }

.stand-werkvoet { display: flex; align-items: center; gap: var(--ruimte-2);
  padding-top: var(--ruimte-3); border-top: 1px solid var(--rand); }
.stand-positie { color: var(--tekst-3); font-size: var(--tekst-s); margin-right: auto;
  white-space: nowrap; }
.stand-werkvoet button svg { width: 16px; height: 16px; }

.stand-klaarmelding { text-align: center; padding: var(--ruimte-8) var(--ruimte-4);
  border: 1px solid var(--succes-rand); background: var(--succes-bg);
  border-radius: var(--radius-3); }
.stand-klaarmelding .vink { display: inline-flex; color: var(--succes); }
.stand-klaarmelding .vink svg { width: 36px; height: 36px; }
.stand-klaarmelding h2 { margin: var(--ruimte-2) 0 var(--ruimte-2); }
.stand-klaarmelding p { margin: 0 auto; max-width: 46ch; color: var(--tekst-3); }

@media (max-width: 1080px) {
  .standbank { grid-template-columns: minmax(0, 1fr); }
  .standbank-wie { position: static; max-height: none; }
  .stand-wielijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--ruimte-2); }
  .stand-wie { border-color: var(--rand); }
}
@media (max-width: 700px) {
  .stand-cel { min-width: 68px; padding: 4px 7px; }
  .stand-kies { margin-left: 0; width: 100%; }
  .stand-afw { padding: var(--ruimte-3); }
  .stand-afw-verschil { margin-left: 0; }
}

/* --- Verborgen bedragen (kern/geld.js) --------------------------------------
   Stippen tot iemand erop klikt; het oogje bovenaan zet alles tegelijk open. */
.geldbedrag.verborgen { cursor: pointer; letter-spacing: .06em; color: var(--text-muted);
  border-bottom: 1px dotted currentColor; }
.geldbedrag.verborgen:hover { color: var(--text-primary); }
.oogknop svg { width: 16px; height: 16px; }
.oogknop[aria-pressed="true"] { background: var(--surface-sunken); }

/* Een tweede regel onder een meetwaarde: het verschil met vorige keer, klein en stil. */
.meetwaarde .afleesdelta { display: block; font-size: var(--tekst-xs); font-weight: 400;
  letter-spacing: 0; color: var(--text-muted); margin-top: 2px; white-space: nowrap; }

/* Gekozen bestanden onder het uploadveld: naam en grootte, zodat je vóór het toevoegen ziet
   dat het er twee zijn. */
.bestandslijst { list-style: none; margin: var(--ruimte-2) 0 0; padding: 0; display: grid;
  gap: 4px; font-size: var(--tekst-s); }
.bestandslijst li { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; }
.bestandslijst li svg { width: 14px; height: 14px; flex: none; color: var(--text-muted); }
.bestandslijst .micro { margin-left: auto; color: var(--text-muted); }
.veld .hulp.letop { color: var(--letop); }

/* Navigatiekopjes dragen gewone woorden. Elders blijft `.zonelabel` een klein kapitaal
   label boven een sectie; in een menu staat het naast items in normale letters, en dan
   valt het verschil op als een fout in plaats van als hiërarchie. */
.navgroep > .zonelabel, .mwnavgroep > .zonelabel, .modulenav-groep > .zonelabel {
  text-transform: none; letter-spacing: 0; font-size: var(--tekst-s);
}

/* De badge 'getekend' is een link naar het stuk zelf. Geen eigen kader: de badge is al
   het kader, en twee randen om één ding leest als twee dingen. */
.stuklink { text-decoration: none; }
.stuklink:hover .badge { filter: brightness(.96); }

/* --- Uit dienst melden (schermen/uitdienst.js) -------------------------------
   De wizard en de beoordeling delen dezelfde blokken: de feiten van het
   dienstverband, wat er open staat, en de waarschuwingen. */
.uitd-blad { display: flex; flex-direction: column; gap: var(--ruimte-4); max-width: 980px; }
.uitd-kop { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ruimte-3); }
.uitd-groot { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-3);
  padding: var(--ruimte-3) var(--ruimte-4); display: flex; flex-direction: column; gap: 2px; }
.uitd-groot .wat { font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--tekst-3); }
.uitd-groot strong { font-size: var(--tekst-xl); }
.uitd-groot .onder { font-size: var(--tekst-s); color: var(--tekst-3); }
.uitd-regel { margin: 0; font-size: var(--tekst-m); }
.uitd-citaat { padding: var(--ruimte-3) var(--ruimte-4); border-left: 3px solid var(--rand-sterk);
  background: var(--vlak-zacht); border-radius: 0 var(--radius-2) var(--radius-2) 0;
  white-space: pre-wrap; }

.uitd-context { display: flex; flex-direction: column; gap: var(--ruimte-3);
  margin-bottom: var(--ruimte-4); }
.uitd-feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ruimte-3); }
.uitd-feit { display: flex; flex-direction: column; gap: 2px; padding: var(--ruimte-3);
  border: 1px solid var(--rand); border-radius: var(--radius-2); background: var(--vlak); }
.uitd-feit .wat { font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--tekst-3); }
.uitd-feit .w { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.uitd-feit .onder { font-size: var(--tekst-s); color: var(--tekst-3); }

.uitd-waarschuwingen { display: flex; flex-direction: column; gap: var(--ruimte-2); }
.uitd-ok { display: inline-flex; align-items: center; gap: 6px; font-size: var(--tekst-s);
  color: var(--succes); font-weight: 600; }
.uitd-ok svg { width: 16px; height: 16px; }

.uitd-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ruimte-3); }
.uitd-blok { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-3);
  padding: var(--ruimte-3) var(--ruimte-4); min-width: 0; }
.uitd-blok h4 { margin: 0 0 var(--ruimte-2); font-size: var(--tekst-s); text-transform: uppercase;
  letter-spacing: .04em; color: var(--tekst-3); }
.uitd-breed { grid-column: 1 / -1; }
.uitd-tabel { width: 100%; }
.uitd-tabel tfoot td { font-weight: 600; border-top: 1px solid var(--rand-sterk); }
.uitd-min { color: var(--gevaar); }
.uitd-let { color: var(--letop); }
.uitd-noot { margin: var(--ruimte-2) 0 0; font-size: var(--tekst-xs); color: var(--tekst-3); }
.uitd-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: 6px; }
.uitd-lijst li { display: flex; flex-direction: column; gap: 1px; font-size: var(--tekst-m); }
.uitd-lijst .onder { font-size: var(--tekst-s); color: var(--tekst-3); }

.uitd-besluit { border: 1px solid var(--rand-sterk); border-radius: var(--radius-3);
  background: var(--vlak); padding: var(--ruimte-4); display: flex; align-items: center;
  justify-content: space-between; gap: var(--ruimte-4); flex-wrap: wrap; }
.uitd-besluitkop { display: flex; flex-direction: column; gap: 4px; max-width: 60ch; }
.uitd-besluitkop .onder { font-size: var(--tekst-s); color: var(--tekst-3); }
.uitd-knoppen { display: flex; gap: var(--ruimte-2); flex: none; }
.uitd-knoppen svg { width: 16px; height: 16px; }

.uitd-controle { display: flex; flex-direction: column; border: 1px solid var(--rand);
  border-radius: var(--radius-3); background: var(--vlak); overflow: hidden; }
.uitd-controle-rij { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto;
  align-items: center; gap: var(--ruimte-3); padding: var(--ruimte-3) var(--ruimte-4);
  border-top: 1px solid var(--rand); }
.uitd-controle-rij:first-child { border-top: 0; }
.uitd-controle-rij .wat { font-size: var(--tekst-s); color: var(--tekst-3); }
.uitd-controle-rij .w { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.uitd-controle-rij svg { width: 14px; height: 14px; }
.uitd-erna { margin-top: var(--ruimte-4); padding: var(--ruimte-4); border-radius: var(--radius-3);
  background: var(--vlak-zacht); border: 1px solid var(--rand); }
.uitd-erna h4 { margin: 0 0 var(--ruimte-2); font-size: var(--tekst-m); }
.uitd-erna ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px;
  font-size: var(--tekst-m); }

@media (max-width: 700px) {
  .uitd-controle-rij { grid-template-columns: minmax(0, 1fr) auto; }
  .uitd-controle-rij .wat { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ zienswijze (0.47.0) */
.zienswijzetekst { margin: var(--ruimte-3) 0 0; padding: var(--ruimte-3) var(--ruimte-4);
  border-left: 3px solid var(--groen-600); background: var(--vlak-zacht);
  border-radius: 0 var(--radius-2) var(--radius-2) 0; white-space: pre-wrap;
  color: var(--tekst); font-size: var(--tekst-m); }