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

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

@import url("../merk/lettertypes.css");

:root {
  --creme:      #FFFAF2;
  --vlak:       #FFFFFF;
  --vlak-warm:  #F8F5EC;
  --inkt:       #1D1910;
  --groen:      #495A29;
  --terra:      #C97632;
  --blauw:      #1C244B;
  --groen-vlak: #EEF5EB;
  --zand:       #EBDEC4;
  --inkt-zacht: #6E6656;
  --groen-diep: #37461E;
  --lijn:       #E7DFCE;
  --lijn-zacht: #F0EADC;
  --terra-vlak: #FBF0E4;
  --rood:       #9E3D1D;
  --rood-vlak:  #F8E9E1;
  --kop: "Caudex", "Iowan Old Style", Georgia, serif;
  --tekst: "Akatab", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  --schaduw: 0 1px 2px rgba(29,25,16,.04), 0 1px 12px rgba(29,25,16,.03);
}

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

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

/* ── bovenbalk ─────────────────────────────────────────────────────────────── */
.balk {
  display: flex; align-items: center; gap: 14px;
  background: var(--vlak); border-bottom: 1px solid var(--lijn);
  padding: 12px 22px; position: sticky; top: 0; z-index: 40;
}
.balk .merk { width: 46px; height: 46px; flex: none; }

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

.wisselmenu {
  position: absolute; top: calc(100% + 9px); left: 0; width: 330px; z-index: 50;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px;
  box-shadow: 0 12px 34px rgba(29,25,16,.13); padding: 8px;
}
.wisselkop { margin: 6px 10px 8px; font-size: 12px; color: var(--inkt-zacht); }
.wisselitem {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 10px; padding: 9px 10px;
}
.wisselitem:hover { background: var(--vlak-warm); }
.wisselitem.actief { background: var(--groen-vlak); }
.wisselitem .pict { width: 20px; height: 20px; color: var(--groen); flex: none; }
.wisselitem b { display: block; font-size: 14.5px; font-weight: 600; }
.wisselitem span { display: block; font-size: 12.5px; color: var(--inkt-zacht); }
.wisselitem .vink { margin-left: auto; width: 17px; height: 17px; color: var(--groen); }
.wisselvoet {
  display: flex; align-items: center; justify-content: space-between;
  margin: 6px 0 2px; padding: 10px; border-top: 1px solid var(--lijn-zacht);
  color: var(--groen); font-weight: 600; font-size: 13.5px; text-decoration: none;
}
.wisselvoet svg { width: 16px; height: 16px; }

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

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

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

/* ── werkvlak ──────────────────────────────────────────────────────────────── */
.werk { flex: 1; min-width: 0; padding: 26px 30px 44px; }
.paginakop { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 20px; }
.paginakop h1 {
  margin: 0; font-family: var(--kop); font-weight: 400; font-size: 32px;
  letter-spacing: -.01em; line-height: 1.1;
}
.paginakop p { margin: 6px 0 0; color: var(--inkt-zacht); font-size: 14px; }
.kopknoppen { margin-left: auto; display: flex; align-items: center; gap: 16px; flex: none; }
.knop-vol {
  display: flex; align-items: center; gap: 8px; background: var(--groen); color: #fff;
  border: 0; border-radius: 10px; padding: 11px 17px; font-weight: 600; font-size: 14px;
}
.knop-vol:hover { background: var(--groen-diep); }
.knop-vol svg { width: 16px; height: 16px; }
.knop-kaal {
  display: flex; align-items: center; gap: 7px; background: none; border: 0;
  color: var(--groen); font-weight: 600; font-size: 14px;
}
.knop-kaal svg { width: 15px; height: 15px; }

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

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

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

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

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

.pil {
  display: inline-block; border-radius: 20px; padding: 2px 11px;
  font-size: 12px; font-weight: 600; background: var(--vlak-warm); color: var(--inkt-zacht);
}
.pil.hoog { background: var(--rood-vlak); color: var(--rood); }
.pil.midden { background: var(--terra-vlak); color: #8B4E17; }
.pil.laag { background: var(--groen-vlak); color: var(--groen-diep); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 720px) {
  /* De balk gaat op twee regels: merk, menu en wisselaar boven, zoeken onder.
     Op deze breedte past een zoekveld van 170px niet meer naast een naam. */
  .balk { flex-wrap: wrap; }
  .zoek { order: 9; width: 100%; margin-left: 0; }
  .zoekuitslag { width: 100%; }
  .gebruiker { max-width: 44vw; }
  .wisselknop { font-size: 14px; padding: 8px 10px; }
  .verderrij { grid-template-columns: 1fr; }
}

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

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

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

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

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

/* Google Agenda en Drive (A-GOOGLE-01). Niet van de site: de agendakleuren komen uit Google. */
.agendalegenda { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.agendachip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--lijn); background: var(--vlak); font: inherit; font-size: 13px; cursor: pointer; }
.agendachip.uit { opacity: .4; text-decoration: line-through; }
.kleurstip { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; vertical-align: middle; margin-right: 4px; }
.overdrachtlijn { background: var(--blauw); opacity: .7; }
.overdrachtlijn span { color: var(--blauw); }
.lijst.overdrachten { margin-top: 12px; }
.drivekruimel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; font-size: 14px; }
.drivemap { padding: 0; text-align: left; }
.zoekveld { padding: 7px 11px; border: 1px solid var(--lijn); border-radius: 8px; font: inherit; min-width: 220px; }
/* Kaders en dagkaart (A-KADER-01). */
.dagkeuze { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; font-size: 13.5px; }
.dagkeuze > span { width: 100%; font-weight: 700; }
.dagkeuze label { display: inline-flex; gap: 4px; align-items: center; }
.overdrachtregel { display: flex; gap: 8px; align-items: center; margin-top: 10px; color: var(--blauw); }
.overdrachtregel .pict { width: 16px; height: 16px; }
/* Daglogboek (A-LOGBOEK-01). */
.lbraster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 18px; align-items: start; }
@media (max-width: 900px) { .lbraster { grid-template-columns: minmax(0, 1fr); } }
.lbchecklist { display: grid; gap: 8px; margin-top: 4px; }
.lbchecklist label { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.lbchecklist label > span:first-of-type { flex: 1; }
.lbklaar td, .lbchecklist label.lbklaar > span:first-of-type { color: var(--inkt-zacht); text-decoration: line-through; }
.lbnieuw { display: flex; gap: 8px; margin-top: 10px; }
.lbnieuw input[type=text] { flex: 1; padding: 7px 11px; border: 1px solid var(--lijn); border-radius: 8px; font: inherit; }
.lbkeuze { padding: 6px 8px; border: 1px solid var(--lijn); border-radius: 8px; font: inherit; }
.lbuitleg { margin: -4px 0 6px; }
.lbdeel { margin-top: 10px; }
/* Kindkaart (A-KIND-01). */
.kindkaart > summary { list-style: none; cursor: pointer; }
.kindkaart > summary::-webkit-details-marker { display: none; }
.kindkop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kindnaam { flex: 1; min-width: 180px; }
.kindnummer { font-size: 13px; }
.kindknoppen { display: flex; gap: 14px; flex-wrap: wrap; margin: 12px 0 4px; }
.kindraster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 12px; }
@media (max-width: 1000px) { .kindraster { grid-template-columns: 1fr; } }
.kindraster h3 { font-size: 15px; margin: 0 0 8px; }
.kindblok { margin-bottom: 10px; font-size: 13.5px; }
.kindblok p { margin: 3px 0; white-space: pre-line; }
.kindlabel { font-size: 12px; font-weight: 700; color: var(--inkt-zacht); display: flex; gap: 5px; align-items: center; }
.kindlabel .pict { width: 14px; height: 14px; }
.contact { display: flex; flex-direction: column; margin: 4px 0 8px; }
.knop-kaal.klein { font-size: 11.5px; padding: 0; align-self: flex-start; opacity: .7; }
.meldlijst { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.meldlijst li { display: flex; gap: 10px; align-items: flex-start; }
.meldlijst li > span:nth-child(2) { flex: 1; }
.dkgroep { border-top: 1px solid var(--lijn); padding: 8px 0; }
.dkgroep > summary { cursor: pointer; display: flex; gap: 8px; align-items: center; }

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

/* ═══════════════════════════════════════════════════════════════════════════
   Verfijning (0.79.0) - leesbaarheid en afwerking over de hele suite
   ───────────────────────────────────────────────────────────────────────────
   Bewust als EEN laag onderaan, zodat de afwerking in een keer te lezen en in een
   keer terug te draaien is. Geen nieuwe kleuren: alles leunt op het sitepalet
   hierboven. Wat erbij komt is diepte (schaduw, verloop), lucht (regelhoogte,
   ruimte in cellen) en beweging die je alleen ziet bij het wisselen van blad -
   niet bij het automatisch verversen, want dan knippert het scherm elke minuut.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --schaduw: 0 1px 2px rgba(29,25,16,.04), 0 10px 28px -14px rgba(29,25,16,.14);
  --schaduw-hoog: 0 2px 6px rgba(29,25,16,.05), 0 22px 44px -18px rgba(29,25,16,.24);
  --ring: 0 0 0 3.5px rgba(73,90,41,.16);
  --lijn-rand: rgba(214,201,174,.55);
  --rond: 18px;
}

/* Tekst: een tikje groter en ruimer, cijfers even breed zodat kolommen recht staan. */
body {
  font-size: 15px; line-height: 1.58; text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
  background:
    radial-gradient(1100px 520px at 100% -8%, rgba(201,118,50,.075), transparent 62%),
    radial-gradient(900px 480px at -8% -4%, rgba(73,90,41,.06), transparent 60%),
    var(--creme);
  background-attachment: fixed;
}
/* Nederlands plakt woorden aan elkaar: 'Medewerkertevredenheidsenquete' in een kop
   duwde een telefoonscherm 20px zijwaarts. Afbreken mag, met streepje (lang="nl"). */
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
p { text-wrap: pretty; }
::selection { background: rgba(201,118,50,.22); color: var(--inkt); }
td, .cijfer, .bedrag, .getal { font-variant-numeric: tabular-nums; }

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

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

/* ── zijmenu: waar je bent, zie je in een oogopslag ─────────────────────── */
.zij { background: linear-gradient(180deg, #FAF6EE 0%, #F6F1E5 100%); border-right-color: var(--lijn-rand); }
.zij-kop { font-size: 10.5px; letter-spacing: .13em; color: #948A74; margin-bottom: 6px; }
.zij-groep + .zij-groep { margin-top: 24px; }
.zij-item {
  position: relative; padding: 8.5px 11px; margin: 1px 0;
  transition: background .14s, color .14s;
}
.zij-item:hover { background: rgba(235,222,196,.45); }
.zij-item:hover .pict { color: var(--groen); }
.zij-item.actief {
  background: var(--vlak); color: var(--groen-diep);
  box-shadow: 0 1px 2px rgba(29,25,16,.05), 0 4px 14px -8px rgba(29,25,16,.2);
}
.zij-item.actief::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3.5px;
  border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--groen), #6C7F43);
}
.zij-item .telling { background: rgba(255,255,255,.75); border-color: var(--lijn-rand); }
.zij-item.actief .telling { background: var(--groen-vlak); border-color: transparent; color: var(--groen-diep); }

/* ── werkvlak en paginakop ───────────────────────────────────────────────── */
.werk { padding: 34px 36px 60px; }
.paginakop { margin-bottom: 26px; align-items: flex-end; }
.paginakop h1 { font-size: 38px; letter-spacing: -.018em; line-height: 1.08; }
.paginakop h1::after {
  content: ""; display: block; width: 46px; height: 3px; margin-top: 13px; border-radius: 3px;
  background: linear-gradient(90deg, var(--terra), #E3A870);
}
.paginakop p { margin-top: 10px; font-size: 15px; max-width: 70ch; }

/* ── kaarten: zacht opgetild van het creme ───────────────────────────────── */
.kaart {
  border-color: var(--lijn-rand); border-radius: var(--rond);
  padding: 22px 24px; margin-bottom: 20px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFEFB 100%);
  transition: box-shadow .2s, border-color .2s;
}
.kaart:hover { box-shadow: var(--schaduw-hoog); border-color: rgba(214,201,174,.8); }
.kaart-kop { margin-bottom: 16px; }
.kaart-kop h2 { font-size: 21.5px; letter-spacing: -.006em; line-height: 1.2; }
.raster2 { gap: 20px; }

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

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

/* ── knoppen ─────────────────────────────────────────────────────────────── */
.knop-vol {
  background: linear-gradient(180deg, #56692F 0%, var(--groen) 100%);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 16px -8px rgba(55,70,30,.7);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.knop-vol:hover {
  background: linear-gradient(180deg, #4E6029 0%, var(--groen-diep) 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 22px -10px rgba(55,70,30,.8);
}
.knop-vol:active { transform: none; }
.knop-rand { transition: border-color .15s, box-shadow .15s, background .15s; }
.knop-rand:hover { border-color: #D3C4A3; background: #FFFDF8; box-shadow: var(--schaduw); }
.knop-kaal, .link { transition: color .15s, gap .18s; }
.knop-kaal:hover, .link:hover { color: var(--groen-diep); gap: 10px; }

/* ── merktekens en pillen: een fijne rand maakt ze scherper ──────────────── */
.pil { padding: 2.5px 11px; box-shadow: inset 0 0 0 1px rgba(110,102,86,.12); }
.pil.hoog { box-shadow: inset 0 0 0 1px rgba(158,61,29,.18); }
.pil.midden { box-shadow: inset 0 0 0 1px rgba(201,118,50,.22); }
.pil.laag { box-shadow: inset 0 0 0 1px rgba(73,90,41,.18); }
.merkje { box-shadow: inset 0 0 0 1px rgba(73,90,41,.14); }
.merkje.warm { box-shadow: inset 0 0 0 1px rgba(201,118,50,.2); }

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

/* ── venster: de pagina wijkt, het venster komt naar voren ───────────────── */
.vensterlaag {
  background: rgba(29,25,16,.32);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.venster { border-radius: 20px; padding: 28px 30px; box-shadow: 0 30px 80px -20px rgba(29,25,16,.4); }
.venster h2 { font-size: 24px; }
.vensterlaag:not([hidden]) .venster { animation: verfijn-op .22s cubic-bezier(.2,.8,.2,1) both; }

.leegvak .pict { width: 34px; height: 34px; color: #B3A686; }
.leegvak h3 { font-size: 21px; }

/* ── bij het wisselen van blad: kaarten schuiven rustig binnen ───────────
   .intro zet verversen.js alleen bij een echte schermwissel. Het eindbeeld is
   transform:none, zodat een vast gepositioneerd venster in een kaart na de
   beweging gewoon weer aan het scherm hangt en niet aan de kaart. */
@keyframes verfijn-op { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.werk.intro .paginakop,
.werk.intro .kaart { animation: verfijn-op .42s cubic-bezier(.2,.8,.2,1) both; }
.werk.intro .kaart:nth-of-type(2) { animation-delay: .04s; }
.werk.intro .kaart:nth-of-type(3) { animation-delay: .08s; }
.werk.intro .kaart:nth-of-type(4) { animation-delay: .12s; }
.werk.intro .kaart:nth-of-type(n+5) { animation-delay: .16s; }

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