/* ============================================================================
   SVS HRM — weergave 2 — schermen: vandaag, afwezigheid, uren, gesprekken,
   bedrijfsmiddelen, salaris, rapportage, portaal, ondertekenen
   ========================================================================= */

/* ---------------------------------------------------------------- vandaag (werkdashboard)
   Links wat er moet gebeuren, op volgorde van urgentie. Rechts wat op jou wacht,
   wie er vandaag niet is, en de handelingen die je vanaf hier wilt starten. */
/* Rechts naast de stroken: eerst wat op jou wacht, dan wie er niet is en de snelle weg.
   Op een smal scherm komt 'Wacht op jou' vóór de stroken: dat is het antwoord op de vraag
   waarmee je het scherm opent, en het past in één blik. */
.vandaag { display: grid; grid-template-columns: minmax(0, 8fr) minmax(280px, 4fr);
  grid-template-areas: "hoofd wacht" "hoofd zij"; grid-template-rows: auto 1fr;
  gap: var(--ruimte-4) var(--ruimte-5); align-items: start; }
.vandaaghoofd { grid-area: hoofd; }
.vandaagwacht { grid-area: wacht; }
.vandaagzij { grid-area: zij; }
.vandaaghoofd, .vandaagzij, .vandaagwacht { min-width: 0; display: flex; flex-direction: column; gap: var(--ruimte-4); }
.vandaagwacht:empty { display: none; }
.vandaagzij .kaart, .vandaaghoofd .kaart, .vandaagwacht .kaart, .vandaaghoofd .paneel { margin: 0; }
.vandaagkop { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ruimte-4);
  flex-wrap: wrap; margin-bottom: var(--ruimte-5); }
.vandaagkop h1 { font-size: var(--tekst-pagina); }
.vandaagkop .datum { margin-top: 2px; color: var(--tekst-2); font-size: var(--tekst-m); }
.vandaagfilters { display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap;
  margin-bottom: var(--ruimte-4); }
.vandaagfilters select { width: auto; min-width: 12rem; }
.vandaagfilters .telling { margin-left: auto; font-size: var(--tekst-s); color: var(--tekst-3); }
/* Dicht op de strook eronder (4 px), zodat de telling bij de stroken hoort en niet bij de kaart erboven. */
.stroomtelling { display: none; margin: 0 0 calc(var(--ruimte-1) - var(--ruimte-4)); padding-left: var(--ruimte-1);
  font-size: var(--tekst-s); color: var(--tekst-3); }

.stroomkop { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ruimte-1) var(--ruimte-3);
  padding: var(--ruimte-3) var(--inspring); border-bottom: 1px solid var(--rand); }
.stroomkop h2 { white-space: nowrap; }
.stroomkop h2 { font-size: var(--tekst-kaart); display: inline-flex; align-items: center; gap: var(--ruimte-2); }
.stroomkop .stroomlamp { width: 8px; height: 8px; border-radius: 50%; }
.stroomkop.u1 .stroomlamp { background: var(--gevaar-vlak); }
.stroomkop.u2 .stroomlamp { background: var(--letop-vlak); }
.stroomkop.u3 .stroomlamp { background: var(--info); }
.stroomkop .teller { margin-left: 2px; }
.stroomkop .uitleg { color: var(--tekst-3); font-size: var(--tekst-s); }
.stroomkop .rechts { margin-left: auto; }

.taaklinks { display: flex; flex-direction: column; }
.taaklink { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center;
  gap: var(--ruimte-3); min-height: var(--rij-hoogte); padding: var(--ruimte-2) var(--inspring);
  border-bottom: 1px solid var(--rand); text-decoration: none; color: inherit; }
.taaklink:last-child { border-bottom: none; }
.taaklink:hover { background: var(--vlak-zacht); }
.taaklink > svg:first-child { width: 18px; height: 18px; color: var(--tekst-3); }
.taaklink .wat { font-size: var(--tekst-m); font-weight: 500; }
.taaklink .aantal { font-size: var(--tekst-m); font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 1px 8px; border-radius: var(--radius-pil); background: var(--vlak-diep); color: var(--tekst); }
.taaklink.niets .aantal { background: transparent; color: var(--tekst-3); font-weight: 500; }
.taaklink .aantal.letop { background: var(--letop-bg); color: var(--letop); }
.taaklink > svg:last-child { width: 15px; height: 15px; color: var(--tekst-3); }
.snelacties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ruimte-2); padding: var(--inspring); }
.snelacties .knop { justify-content: flex-start; }
.afwezigrij { display: flex; align-items: center; gap: var(--ruimte-3); padding: var(--ruimte-2) var(--inspring);
  border-bottom: 1px solid var(--rand); text-decoration: none; color: inherit; }
.afwezigrij:last-child { border-bottom: none; }
.afwezigrij:hover { background: var(--vlak-zacht); }
.afwezigrij .wie { min-width: 0; display: flex; flex-direction: column; flex: 1; }
.afwezigrij .naam { font-size: var(--tekst-m); font-weight: 500; }
.afwezigrij .onder { font-size: var(--tekst-xs); color: var(--tekst-3); }
.afwezigrij .badge { flex: none; }
.vandaagleeg { padding: var(--ruimte-4) var(--inspring); font-size: var(--tekst-m); color: var(--tekst-3);
  display: flex; align-items: center; gap: var(--ruimte-2); }
.vandaagleeg svg { width: 16px; height: 16px; color: var(--groen-700); }

@media (max-width: 1099px) {
  .vandaag { grid-template-columns: minmax(0, 1fr); grid-template-areas: "wacht" "hoofd" "zij";
    grid-template-rows: auto; }
  .vandaagfilters .telling { display: none; }
  .stroomtelling { display: block; }
}

/* De signaalregels (op het dashboard en in de oude werkvoorraad). */
.werkvoorraad { display: flex; flex-direction: column; gap: var(--ruimte-4); }
.werkvoorraad section > .sectiekop { margin-bottom: var(--ruimte-3); }
.signalen { display: flex; flex-direction: column; }
.signaal { display: flex; align-items: stretch; gap: var(--ruimte-3); padding: 0 var(--ruimte-2) 0 0;
  background: var(--vlak); border-bottom: 1px solid var(--rand); color: inherit;
  transition: background var(--duur-snel); }
.signaal:last-child { border-bottom: none; }
.signaal:hover { background: var(--vlak-zacht); }
.signaal.stil { background: var(--vlak-zacht); }
.signaal.sluimert { background: var(--vlak-zacht); }
.signaal.sluimert .signaallink { opacity: .8; }
.signaallink { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--ruimte-4);
  padding: var(--ruimte-3) 0 var(--ruimte-3) var(--inspring); color: inherit; text-decoration: none; }
.signaal .tekst:empty { display: none; }
.signaalacties { display: flex; align-items: center; }
.signaal .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.signaal .tekst > .lamp { font-size: var(--tekst-xs); font-weight: 600; }
.signaal .titel { font-size: var(--tekst-m); font-weight: 600; color: var(--tekst); }
.signaal .uitleg { font-size: var(--tekst-s); color: var(--tekst-2); max-width: 74ch; }
.signaal .wie { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: var(--tekst-xs);
  color: var(--tekst-3); }
.signaal .wie svg { width: 12px; height: 12px; }
.signaal .wie .label { display: inline; font-size: inherit; }
.signaal .slaaptekst { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: var(--tekst-xs);
  color: var(--tekst-2); }
.signaal .slaaptekst svg { width: 12px; height: 12px; flex: none; }
.signaal .termijn { flex: none; text-align: right; min-width: 96px; display: flex; flex-direction: column; gap: 1px;
  font-size: var(--tekst-s); color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.signaal .termijn b { font-size: var(--tekst-l); font-weight: 600; }
.signaal .termijn .teveel { color: var(--gevaar); font-weight: 600; }
.signaal .termijn .geen { color: var(--tekst-3); font-size: var(--tekst-xs); }
.signaal .termijn .datum { font-size: var(--tekst-xs); color: var(--tekst-3); }
.signaallink > svg { width: 15px; height: 15px; flex: none; color: var(--tekst-3); }
.signaalfilters { margin-bottom: var(--ruimte-4); border: 1px solid var(--rand); border-radius: var(--radius-3);
  background: var(--vlak); }
.werkvoorraadvoet { display: flex; align-items: center; gap: var(--ruimte-3); justify-content: space-between; flex-wrap: wrap;
  margin-top: var(--ruimte-5); padding-top: var(--ruimte-4); border-top: 1px solid var(--rand); }
@media (max-width: 767px) {
  .signaallink { flex-wrap: wrap; }
  .signaal .termijn { text-align: left; min-width: 0; flex-direction: row; align-items: baseline;
    gap: var(--ruimte-2); width: 100%; }
  .signaallink > svg { display: none; }
}

/* ---------------------------------------------------------------- afwezigheid: kalender */
.verlofsectie { margin-bottom: var(--ruimte-6); }
.kaart + .verlofsectie, .verlofsectie + .verlofsectie { margin-top: var(--ruimte-5); }
.maandknoppen { display: flex; align-items: center; gap: var(--ruimte-1); }
.maandkiezer { display: flex; align-items: center; gap: var(--ruimte-1); }
.maandkiezer .maandnaam { min-width: 140px; text-align: center; font-weight: 600; font-size: var(--tekst-m);
  text-transform: capitalize; }
.kalender { --dagen: 31; }
.kalender .tabelwikkel, .kalender .kaart-lijf { overflow-x: auto; }
.kal-rij { display: grid; grid-template-columns: 180px minmax(560px, 1fr); align-items: center; gap: var(--ruimte-3); }
.kal-rij + .kal-rij { border-top: 1px solid var(--rand); }
.kal-naam { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; padding: var(--ruimte-2) 0;
  font-size: var(--tekst-m); font-weight: 500; }
.kal-naam a { color: inherit; text-decoration: none; }
.kal-naam a:hover { text-decoration: underline; }
.kal-naam span, .kal-naam a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-dagen { display: grid; grid-template-columns: repeat(var(--dagen), minmax(18px, 1fr));
  grid-template-rows: minmax(30px, auto); position: relative; }
.kal-dag { grid-row: 1; border-left: 1px solid var(--rand); display: flex; flex-direction: column; align-items: center;
  justify-content: center; }
.kal-dag:last-of-type { border-right: 1px solid var(--rand); }
.kal-dag.weekend { background: var(--vlak-diep); }
.kal-dag.vrij { background: var(--info-bg); }
.kal-dag.vandaag { box-shadow: inset 2px 0 0 var(--groen-600); }
.kal-kop { border-bottom: 1px solid var(--rand); }
.kal-kop .kal-dag { padding: var(--ruimte-1) 0; }
.kal-kop .wd { font-size: var(--tekst-xs); color: var(--tekst-3); }
.kal-kop .nr { font-size: var(--tekst-xs); font-weight: 600; color: var(--tekst-2); }
.kal-kop .kal-dag.vandaag .nr { color: var(--groen-700); }
.kal-balk { grid-row: 1; align-self: center; height: 22px; margin: 4px 1px; display: flex; align-items: center;
  padding: 0 6px; overflow: hidden; border-radius: var(--radius-1); font-size: 11px; font-weight: 600; white-space: nowrap; }
.kal-balk .kal-tekst { overflow: hidden; text-overflow: ellipsis; }
.kal-balk.goedgekeurd, .kal-balk.verlof { background: var(--groen-100); color: var(--groen-700); border: 1px solid var(--groen-600); }
.kal-balk.ingediend, .kal-balk.verlof_aangevraagd { color: var(--info); border: 1px dashed var(--info-rand);
  background: repeating-linear-gradient(135deg, var(--info-bg), var(--info-bg) 5px, transparent 5px, transparent 10px); }
.kal-balk.ziek { background: var(--gevaar-bg); color: var(--gevaar); border: 1px solid var(--gevaar-rand); }
.kal-balk.ziek_deels { background: var(--letop-bg); color: var(--letop); border: 1px dashed var(--letop-rand); }
a.kal-balk { text-decoration: none; }
a.kal-balk:hover { filter: brightness(.97); }
.kal-legenda { display: flex; gap: var(--ruimte-4); flex-wrap: wrap; font-size: var(--tekst-s); color: var(--tekst-2); }
.kal-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.kal-legenda .vlak { width: 16px; height: 12px; border-radius: 3px; }
.kal-legenda .vlak.goedgekeurd, .kal-legenda .vlak.verlof { background: var(--groen-100); border: 1px solid var(--groen-600); }
.kal-legenda .vlak.ingediend, .kal-legenda .vlak.verlof_aangevraagd { border: 1px dashed var(--info-rand);
  background: repeating-linear-gradient(135deg, var(--info-bg), var(--info-bg) 4px, transparent 4px, transparent 8px); }
.kal-legenda .vlak.ziek { background: var(--gevaar-bg); border: 1px solid var(--gevaar-rand); }
.kal-legenda .vlak.ziek_deels { background: var(--letop-bg); border: 1px dashed var(--letop-rand); }
.kal-legenda .vlak.vrij { background: var(--info-bg); border: 1px solid var(--info-rand); }
.kal-legenda .vlak.weekendvoorbeeld { background: var(--vlak-diep); border: 1px solid var(--rand); }
@media (max-width: 767px) {
  .kal-rij { grid-template-columns: 110px minmax(480px, 1fr); }
  .kal-naam .avatar { display: none; }
}

/* ---------------------------------------------------------------- verzuim */
.verzuimlijst .verzuimregel { display: grid; align-items: center; gap: var(--ruimte-3);
  grid-template-columns: minmax(150px, 1.4fr) 130px 120px 150px max-content;
  padding: var(--ruimte-2) var(--inspring); border-bottom: 1px solid var(--rand); min-height: var(--rij-hoogte); }
.verzuimlijst .verzuimregel:last-child { border-bottom: none; }
.verzuimregel .rijacties { flex-wrap: nowrap; }
.verzuimregel.niet-doorgegeven { background: var(--gevaar-bg); }
.verzuimwie { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; }
.verzuimwie > span { min-width: 0; display: flex; flex-direction: column; }
.verzuimwie .onder, .verzuimwie .titel, .verzuimwie a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verzuimwie .titel, .verzuimwie a { font-weight: 600; font-size: var(--tekst-m); color: var(--tekst); text-decoration: none; }
.verzuimwie a:hover { text-decoration: underline; }
.verzuimwie .onder { font-size: var(--tekst-s); color: var(--tekst-2); }
.verzuimperiode { font-size: var(--tekst-s); color: var(--tekst-2); white-space: nowrap; }
.verzuimperiode .pijl { color: var(--tekst-3); margin: 0 4px; }
.verzuimstand { display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap; }
.verzuimdoorgifte .label { font-size: var(--tekst-s); }
.kaart-lijf.dicht.verzuimlijst { padding: 0; }
@media (max-width: 1023px) {
  .verzuimlijst .verzuimregel { grid-template-columns: 1fr auto; row-gap: var(--ruimte-2); }
  .verzuimwie { grid-column: 1 / -1; }
  .verzuimdoorgifte { text-align: right; }
  .verzuimregel .rijacties { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
}
.verlooplijst { list-style: none; margin: 0; padding: 0; }
.verloopstap { display: grid; grid-template-columns: 84px 1fr; gap: var(--ruimte-3); align-items: baseline;
  padding: var(--ruimte-2) 0 var(--ruimte-2) var(--ruimte-4); position: relative; font-size: var(--tekst-m); }
.verloopstap::before { content: ""; position: absolute; left: 3px; top: 12px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--letop-vlak); }
.verloopstap::after { content: ""; position: absolute; left: 6px; top: 20px; bottom: -8px; width: 1px; background: var(--rand); }
.verloopstap:last-child::after { display: none; }
.verloopstap.gemeld::before { background: var(--gevaar-vlak); }
.verloopstap.hersteld::before { background: var(--groen-600); }
.verloopstap .stapdatum { font-size: var(--tekst-s); color: var(--tekst-2); }
.verloopstap .stapwat { display: flex; align-items: baseline; gap: var(--ruimte-2); flex-wrap: wrap; }
.verloopstap .stapnotitie { grid-column: 2; font-size: var(--tekst-s); color: var(--tekst-2); }

/* ---------------------------------------------------------------- uren */
.dagen { display: flex; flex-direction: column; }
.dag { border-bottom: 1px solid var(--rand); }
.dag:last-child { border-bottom: none; }
.dag > summary { display: flex; align-items: center; gap: var(--ruimte-3); min-height: var(--rij-hoogte);
  padding: var(--ruimte-1) var(--ruimte-2); border-radius: var(--radius-2); cursor: pointer; list-style: none; }
.dag > summary::-webkit-details-marker { display: none; }
.dag > summary:hover { background: var(--vlak-zacht); }
.dag.weekend > summary .dagdatum { color: var(--letop); }
.dagdatum { font-weight: 600; font-size: var(--tekst-m); min-width: 100px; }
.dagsoorten { flex: 1; min-width: 0; font-size: var(--tekst-s); color: var(--tekst-2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.daguren { font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--tekst-m); }
.dag > summary > svg { width: 15px; height: 15px; color: var(--tekst-3); transition: transform var(--duur-snel); }
.dag[open] > summary > svg { transform: rotate(180deg); }
.dagregels { padding: 0 var(--ruimte-2) var(--ruimte-3) var(--ruimte-4); border-left: 2px solid var(--groen-100);
  margin-left: var(--ruimte-3); }
.dagregel { display: flex; align-items: center; gap: var(--ruimte-3); padding: var(--ruimte-1) 0; font-size: var(--tekst-m); }
.dagregel > span:first-child { min-width: 150px; }
.dagregel .omschrijving { flex: 1; min-width: 0; color: var(--tekst-2); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.dagregel .num { font-variant-numeric: tabular-nums; font-weight: 600; }
/* De maandcijfers van de urenstaat: één strip met scheidingen, geen zes tegels. */
.kerngetallen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(104px, 100%), 1fr));
  gap: 0; margin-bottom: var(--ruimte-4); border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.kerngetal { padding: var(--ruimte-2) var(--ruimte-3); border-left: 1px solid var(--rand); }
.kerngetal:first-child { border-left: none; }
.kerngetal .label { font-size: var(--tekst-xs); }
.kerngetal .waarde { display: block; margin-top: 2px; font-size: var(--tekst-xl); font-weight: 600; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; }
.kerngetal .extra { display: block; font-size: var(--tekst-xs); color: var(--tekst-3); }
.kerngetal.let .waarde { color: var(--letop); }
@media (max-width: 767px) {
  .dagdatum { min-width: 80px; font-size: var(--tekst-s); }
  .dagsoorten { display: none; }
  .dagregel { flex-wrap: wrap; }
  .dagregel > span:first-child { min-width: 0; }
  /* De omschrijving krimpt anders tot 26 px en toont alleen nog een beletselteken; op een
     telefoon hoort hij op zijn eigen regel te staan, onder de soort en de uren. */
  .dagregel .omschrijving { flex-basis: 100%; white-space: normal; }
  /* Drie kolommen naast elkaar laten op een telefoon 79 px tekst over: te weinig voor
     "naar tijd-voor-tijd" met een toelichting eronder. Onder elkaar, waarde rechts. */
  .kerngetallen { grid-template-columns: minmax(0, 1fr); }
  .kerngetal { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline; column-gap: var(--ruimte-3);
    padding: var(--ruimte-2) 0; border-left: none; border-top: 1px solid var(--rand); }
  .kerngetal:first-child { border-top: none; }
  .kerngetal .label { grid-area: 1 / 1; font-size: var(--tekst-m); color: var(--tekst); }
  .kerngetal .waarde { grid-area: 1 / 2; margin-top: 0; font-size: var(--tekst-l); }
  .kerngetal .extra { grid-area: 2 / 1; }
}

/* ---------------------------------------------------------------- gesprekken */
.gesprekkenlijst .gesprekregel { display: grid; align-items: center; gap: var(--ruimte-3);
  grid-template-columns: minmax(200px, 2fr) 100px minmax(150px, auto) max-content;
  padding: var(--ruimte-2) var(--inspring); border-bottom: 1px solid var(--rand); min-height: var(--rij-hoogte); }
.kaart-lijf.dicht.gesprekkenlijst { padding: 0; }
.gesprekkenlijst .gesprekregel:last-child { border-bottom: none; }
.gesprekwie { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; }
.gesprekwie > span { display: flex; flex-direction: column; min-width: 0; }
.gesprekwie .titel { font-weight: 600; font-size: var(--tekst-m); text-decoration: none; color: var(--tekst);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gesprekwie .titel:hover { text-decoration: underline; }
.gesprekwie .onder { font-size: var(--tekst-s); color: var(--tekst-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gesprekdatum { font-size: var(--tekst-s); color: var(--tekst-2); white-space: nowrap; }
.gesprekstand { display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap; }
@media (max-width: 899px) {
  .gesprekkenlijst .gesprekregel { grid-template-columns: 1fr auto; row-gap: var(--ruimte-2); }
  .gesprekwie { grid-column: 1 / -1; }
  .gesprekregel .rijacties { justify-content: flex-end; }
}
.verslag .velden { grid-template-columns: 1fr; max-width: 720px; }
.verslag .verslagkop { font-size: var(--tekst-xl); margin: var(--ruimte-5) 0 0; padding-top: var(--ruimte-4);
  border-top: 1px solid var(--rand); }
.verslag .velden > .verslagkop:first-child, .verslag .verslaglezen > .verslagkop:first-child { margin-top: 0;
  padding-top: 0; border-top: none; }
.verslag .verslaguitleg { color: var(--tekst-2); font-size: var(--tekst-m); margin: 0 0 var(--ruimte-2); }
.verslag textarea { min-height: 110px; }
.verslag .verslaglezen { max-width: 72ch; }
.verslagvraag { margin-bottom: var(--ruimte-5); }
.verslagvraag .vraag { display: block; font-size: var(--tekst-s); font-weight: 600; color: var(--tekst-2); margin-bottom: 4px; }
.verslagvraag .antwoord { margin: 0 0 var(--ruimte-3); font-size: var(--tekst-l); }
.verslagvraag .antwoord:last-child { margin-bottom: 0; }
.verslagvraag .antwoord.leeg { color: var(--tekst-3); font-style: italic; }

/* ---------------------------------------------------------------- portaal (mijn zaken) */
.portaalraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: var(--ruimte-4); align-items: start; margin-top: var(--ruimte-4); }
.portaalraster > .kaart { min-width: 0; margin: 0; }
.portaalraster .kaart-kop h2 { flex: 1; font-size: var(--tekst-kaart); }
#urenkaart { margin-bottom: var(--ruimte-4); }
#urenkaart .kaart-kop h2 { flex: 1; font-size: var(--tekst-kaart); }
.portaalrij { display: flex; align-items: center; gap: var(--ruimte-3); flex-wrap: wrap; padding: var(--ruimte-2) 0;
  border-bottom: 1px solid var(--rand); }
.portaalrij:last-child { border-bottom: none; padding-bottom: 0; }
.portaalrij > div:first-child { flex: 1; min-width: 160px; }
.prtitel { font-size: var(--tekst-m); font-weight: 600; }
.portaalsub .micro { display: block; margin-bottom: var(--ruimte-2); }
@media (max-width: 767px) { .portaalraster { grid-template-columns: minmax(0, 1fr); } .potten { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- bedrijfsmiddelen */
.middelkeuze { display: flex; flex-direction: column; gap: var(--ruimte-4); margin-bottom: var(--ruimte-4);
  max-height: 46vh; overflow-y: auto; }
.middelgroep { display: flex; flex-direction: column; gap: 2px; }
.middelgroep > .label { margin-bottom: var(--ruimte-1); }
.middelvink { display: flex; align-items: flex-start; gap: var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-3);
  border: 1px solid var(--rand); border-radius: var(--radius-2); cursor: pointer;
  transition: border-color var(--duur-snel), background var(--duur-snel); }
.middelvink:hover { border-color: var(--rand-invoer); background: var(--vlak-zacht); }
.middelvink:has(input:checked) { border-color: var(--groen-700); background: var(--groen-50); }
.middelvink input { width: 16px; height: 16px; margin-top: 2px; flex: none; accent-color: var(--groen-700); }
.middelvink .titel { display: block; font-weight: 600; font-size: var(--tekst-m); }
.middelvink .onder { display: block; font-size: var(--tekst-s); color: var(--tekst-2); }

/* ---------------------------------------------------------------- checklists (op de kaart) */
.checklistkaart + .checklistkaart { margin-top: var(--ruimte-4); }
.checklistkaart .voortgang { margin: var(--ruimte-2) 0 var(--ruimte-3); }
.checklistkaart .taken { margin: 0; gap: 0; }
.taakregel { display: flex; align-items: flex-start; gap: var(--ruimte-3); padding: var(--ruimte-3) 0;
  border-bottom: 1px solid var(--rand); }
.taakregel:last-child { border-bottom: none; }
.taakvink { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: var(--ruimte-3); cursor: pointer; }
.taakvink input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--groen-700); }
.taaktekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.taaktitel { font-size: var(--tekst-m); font-weight: 600; }
.taakuitleg { font-size: var(--tekst-s); color: var(--tekst-2); }
.taakmeta { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); margin-top: 2px; font-size: var(--tekst-xs); color: var(--tekst-3); }
.taakmeta .label { display: inline; font-size: inherit; }
.taakmeta .telaat { color: var(--gevaar); font-weight: 600; }
.taakacties { display: flex; gap: var(--ruimte-1); flex-wrap: wrap; flex: none; }
.taakregel.gedaan .taaktitel { color: var(--tekst-2); text-decoration: line-through; text-decoration-color: var(--rand-sterk); }
.taakregel.nvt .taaktitel { text-decoration: line-through; color: var(--tekst-3); }
.taakregel.telaat { background: var(--gevaar-bg); border-radius: var(--radius-2); padding-left: var(--ruimte-3);
  padding-right: var(--ruimte-3); border-bottom-color: transparent; }

/* ---------------------------------------------------------------- salaris en Nmbrs */
.nmbrsblad { display: flex; flex-direction: column; gap: var(--ruimte-4); }
.nmbrsblad > .paneel { margin: 0; }
.nmbrs-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ruimte-3);
  padding-bottom: var(--ruimte-2); border-bottom: 1px solid var(--rand); }
.nmbrs-stand { margin-top: var(--ruimte-1); }
.nmbrs-vlag { display: inline-flex; align-items: center; gap: var(--ruimte-2); padding: var(--ruimte-1) var(--ruimte-3);
  border-radius: var(--radius-2); font-size: var(--tekst-s); font-weight: 600; }
.nmbrs-vlag svg { width: 15px; height: 15px; flex: none; }
.nmbrs-vlag.droog { background: var(--vlak-diep); color: var(--tekst-2); }
.nmbrs-vlag.echt { background: var(--gevaar-bg); color: var(--gevaar); }
.nmbrs-schakel { display: inline-flex; align-items: center; gap: var(--ruimte-2); font-size: var(--tekst-s);
  color: var(--tekst-2); cursor: pointer; }
.keurtrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0 0 var(--ruimte-4); padding: 0;
  list-style: none; background: var(--rand); border: 1px solid var(--rand); border-radius: var(--radius-2); overflow: hidden; }
.keurtrap > li { display: flex; flex-direction: column; gap: 2px; padding: var(--ruimte-2) var(--ruimte-3);
  background: var(--vlak-zacht); border-top: 3px solid var(--rand-sterk); }
.keurtrap > li.gezet { background: var(--vlak); border-top-color: var(--groen-600); }
.keurnaam { font-size: var(--tekst-xs); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--tekst-2); }
.keurwie { font-size: var(--tekst-s); color: var(--tekst); }
.keurtrap > li:not(.gezet) .keurwie { color: var(--tekst-3); font-style: italic; }
@media (max-width: 640px) { .keurtrap { grid-template-columns: 1fr; } }
.uitklap { margin-top: var(--ruimte-3); }
.uitklap summary { cursor: pointer; font-size: var(--tekst-s); color: var(--tekst-2); min-height: 36px;
  display: flex; align-items: center; }
.codelijst { list-style: none; margin: var(--ruimte-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
.codelijst li { font-family: var(--letter-vast); font-size: var(--tekst-xs); background: var(--vlak-diep);
  border-radius: var(--radius-1); padding: 2px var(--ruimte-2); color: var(--tekst-2); }
.payloadblok { padding: var(--ruimte-3) var(--inspring); background: var(--vlak-diep); border-bottom: 1px solid var(--rand); }
.codeblok { margin: var(--ruimte-2) 0 0; padding: var(--ruimte-3); background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--radius-2); font-family: var(--letter-vast); font-size: var(--tekst-xs); line-height: 1.6;
  overflow-x: auto; white-space: pre; color: var(--tekst); }
.payloadfout { margin: var(--ruimte-2) 0 0; font-size: var(--tekst-s); color: var(--gevaar); }

/* ---------------------------------------------------------------- rapportage */
.tweeluik { display: grid; gap: var(--ruimte-4); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.tweeluik-breed { display: grid; gap: var(--ruimte-4); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); margin-bottom: var(--ruimte-4); }
.tweeluik-breed > .paneel { margin-bottom: 0; }
.paneelraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--ruimte-4); align-items: start; }
.paneelraster > .paneel { margin: 0; }
.grafiek { margin: 0; }
.grafiek svg { width: 100%; height: auto; }
.grafiek .staaf { fill: var(--inkt-700); }
.grafiek .staaf.in { fill: var(--groen-600); }
.grafiek .staaf.uit { fill: var(--inkt-700); }
.grafiek .as { stroke: var(--rand-sterk); stroke-width: 1; }
.grafiek .referentie { stroke: var(--tekst-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.grafiek .staaflabel { font-size: 11px; fill: var(--tekst-3); text-anchor: middle; font-family: var(--letter); }
.grafiek .aslabel { font-size: 11px; fill: var(--tekst-3); text-anchor: start; font-family: var(--letter); }
.grafiek .staafwaarde { font-size: 11px; fill: var(--tekst); text-anchor: middle; font-weight: 600; font-family: var(--letter); }
.grafiek figcaption { margin-top: var(--ruimte-2); font-size: var(--tekst-s); color: var(--tekst-2); }
.grafiek figcaption .reekssleutel { display: inline-flex; align-items: center; gap: var(--ruimte-2); margin-right: var(--ruimte-4); }
.grafiek figcaption .sleutelvlak { width: 10px; height: 10px; border-radius: 3px; }
.grafiek figcaption .sleutelvlak.in { background: var(--groen-600); }
.grafiek figcaption .sleutelvlak.uit { background: var(--inkt-700); }
.schaalbanden { display: flex; flex-direction: column; }
.schaalrij { display: grid; grid-template-columns: minmax(9rem, 1.2fr) minmax(80px, 2fr) auto; align-items: center;
  gap: var(--ruimte-3); padding: var(--ruimte-2) 0; border-bottom: 1px solid var(--rand); }
.schaalrij:last-child { border-bottom: none; }
.schaalnaam { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: var(--tekst-m); }
.schaalnaam a { color: var(--tekst); text-decoration: none; }
.schaalnaam a:hover { text-decoration: underline; }
.schaalgroep { font-size: var(--tekst-xs); font-weight: 600; color: var(--tekst-3); }
.schaalspoor { position: relative; height: 6px; border-radius: var(--radius-pil); background: var(--vlak-diep); }
.schaalmerk { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--inkt-900); }
.schaalrij.buiten .schaalmerk { width: 5px; background: var(--gevaar-vlak); box-shadow: 0 0 0 2px var(--vlak); }
.schaalgetal { font-size: var(--tekst-m); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.aandachtlijst { display: flex; flex-direction: column; }
.aandachtrij { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-3) var(--ruimte-3) var(--ruimte-4); border-bottom: 1px solid var(--rand);
  color: inherit; text-decoration: none; }
.aandachtrij:last-child { border-bottom: none; }
.aandachtrij:hover { background: var(--vlak-zacht); }
.aandachtrij .telling { min-width: 2.25rem; font-size: var(--tekst-l); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.aandachtrij .wat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aandachtrij .wat strong { font-size: var(--tekst-m); font-weight: 600; }
.aandachtrij .wat span { font-size: var(--tekst-s); color: var(--tekst-2); }
@media (max-width: 899px) {
  .schaalrij { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--ruimte-2); }
  .schaalspoor { grid-column: 1 / -1; order: 3; }
  .aandachtrij { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--ruimte-2); }
  .aandachtrij .regel-stand { grid-column: 2; }
  .paneelraster { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- ondertekenen */
.ondertekenen { display: flex; flex-direction: column; gap: var(--ruimte-4); }
.tekenveld { position: relative; background: var(--vlak); border: 1px solid var(--rand-invoer); border-radius: var(--radius-2); overflow: hidden; }
.tekenveld.beschreven { border-color: var(--groen-700); }
.tekendoek { display: block; width: 100%; height: 190px; touch-action: none; cursor: crosshair; }
.tekenlijn { position: absolute; left: var(--ruimte-5); right: var(--ruimte-5); bottom: 46px; height: 1px;
  background: var(--rand-sterk); pointer-events: none; }
.tekenveld.beschreven .tekenlijn { opacity: .35; }
.tekenwis { position: absolute; right: var(--ruimte-2); bottom: var(--ruimte-2); }
.ondertekeninhoud { border: 1px solid var(--rand); border-radius: var(--radius-2); margin-bottom: var(--ruimte-4); overflow: hidden; }
.ondertekenregel { display: flex; align-items: baseline; gap: var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-4);
  border-bottom: 1px solid var(--rand); font-size: var(--tekst-m); }
.ondertekenregel:last-child { border-bottom: none; }
.ondertekenregel .wat { flex: 1; min-width: 0; font-weight: 600; }
.ondertekenregel .detail { font-size: var(--tekst-s); color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.verklaring { display: flex; gap: var(--ruimte-3); margin-bottom: var(--ruimte-4); padding: var(--ruimte-4);
  border-radius: var(--radius-2); background: var(--groen-50); border: 1px solid var(--groen-100); }
.verklaring svg { width: 18px; height: 18px; flex: none; color: var(--groen-700); }
.verklaring p { margin: 0; font-size: var(--tekst-m); line-height: 1.5; }
.gezethandtekening { border: 1px solid var(--rand); border-radius: var(--radius-2); background: var(--vlak);
  padding: var(--ruimte-3); max-width: 340px; }
.gezethandtekening img { display: block; width: 100%; height: auto; }
.bewijslijst { display: grid; grid-template-columns: minmax(140px, 34%) minmax(0, 1fr); margin: var(--ruimte-3) 0 0;
  font-size: var(--tekst-m); }
.bewijslijst dt, .bewijslijst dd { padding: 6px 0; border-bottom: 1px solid var(--rand); margin: 0; }
.bewijslijst dt { color: var(--tekst-2); }
.bewijslijst dd { font-variant-numeric: tabular-nums; }
.bewijslijst > :nth-last-child(-n+2) { border-bottom: none; }

/* --- Agendapunten (0.42.0) ---------------------------------------------------------- */
.kal-kop .kal-dag { padding: 0; }
.kal-dagknop { all: unset; box-sizing: border-box; display: flex; flex-direction: column;
  align-items: center; justify-content: center; width: 100%; cursor: pointer;
  padding: var(--ruimte-1) 0; }
.kal-dagknop:hover { background: var(--vlak-zacht); }
.kal-dagknop:focus-visible { outline: 2px solid var(--groen-600); outline-offset: -2px; }
.kal-rij.met-punten .kal-dagen { grid-template-rows: minmax(46px, auto); }
.kal-punten { grid-row: 1; align-self: end; display: flex; align-items: center;
  justify-content: center; gap: 3px; padding: 0 0 5px; min-height: 14px; cursor: pointer; }
.kal-punt, .stip { display: inline-block; box-sizing: border-box; width: 9px; height: 9px;
  border-radius: 50%; background: var(--vlak-diep); border: 1px solid var(--rand-sterk); }
a.kal-punt { transition: transform var(--duur-snel); }
a.kal-punt:hover, a.kal-punt:focus-visible { transform: scale(1.35); outline: none;
  box-shadow: 0 0 0 2px var(--vlak), 0 0 0 4px var(--groen-600); }
.kal-punt.contract, .stip.contract { background: var(--groen-700); border-color: var(--groen-800); }
.kal-punt.verlof_verval, .stip.verlof_verval { background: var(--letop-vlak); border-color: var(--letop-vlak); }
.kal-punt.taak, .stip.taak { background: var(--info); border-color: var(--info); }
.kal-punt.gesprek, .stip.gesprek { background: var(--groen-100); border-color: var(--groen-600); }
.kal-punt.certificaat, .stip.certificaat { background: var(--tekst-3); border-color: var(--tekst-2); }
.kal-punt.verlopen, .stip.verlopen { background: var(--gevaar-vlak); border-color: var(--gevaar-vlak);
  box-shadow: 0 0 0 2px var(--gevaar-bg); }
.kal-meer { font-size: 10px; font-weight: 600; line-height: 1; color: var(--tekst-2); }
.filterchip .vlak, .dagpunt .vlak { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.filterchip .vlak.verlof, .dagpunt .vlak.verlof { background: var(--groen-100); border: 1px solid var(--groen-600); }
.filterchip .vlak.verlof_aangevraagd, .dagpunt .vlak.verlof_aangevraagd { border: 1px dashed var(--info-rand); }
.filterchip .vlak.ziek, .dagpunt .vlak.ziek { background: var(--gevaar-bg); border: 1px solid var(--gevaar-rand); }
.filterchip .vlak.ziek_deels, .dagpunt .vlak.ziek_deels { background: var(--letop-bg); border: 1px dashed var(--letop-rand); }
.agendafilters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); }
.filterchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: var(--radius-pil); border: 1px solid var(--rand); background: var(--vlak);
  font: inherit; font-size: var(--tekst-s); color: var(--tekst); cursor: pointer; }
.filterchip:hover { border-color: var(--rand-sterk); }
.filterchip:focus-visible { outline: 2px solid var(--groen-600); outline-offset: 2px; }
.filterchip[aria-pressed="false"] { color: var(--tekst-3); border-style: dashed; text-decoration: line-through; }
.filterchip[aria-pressed="false"] .vlak, .filterchip[aria-pressed="false"] .stip { opacity: .35; }
.dagpaneel[hidden] { display: none; }
.dagpaneel-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-3); }
.dagpaneel-lijst { display: flex; flex-direction: column; gap: var(--ruimte-2); }
.dagpunt { display: flex; align-items: center; gap: var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-3);
  border: 1px solid var(--rand); border-radius: var(--radius-1); color: inherit; text-decoration: none; }
a.dagpunt:hover { background: var(--vlak-zacht); border-color: var(--rand-sterk); }
.dagpunt .stip, .dagpunt .vlak, .dagpunt > svg { flex: none; }
.dagpunt > svg { width: 16px; height: 16px; color: var(--tekst-3); }
.dagpunt-wat { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dagpunt-wat .onder { font-size: var(--tekst-s); color: var(--tekst-2); }
.dagpunt.verlopen { border-color: var(--gevaar-rand); background: var(--gevaar-bg); }

/* --- Verlopen signalen (0.42.0) ----------------------------------------------------- */
.signaal.verlopen { background: var(--gevaar-bg); }
.signaal.verlopen .signaallink { box-shadow: inset 3px 0 0 var(--gevaar-vlak); }
.signaal .verlopentekst { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
  font-size: var(--tekst-xs); font-weight: 600; color: var(--gevaar); }
.signaal .verlopentekst svg { width: 12px; height: 12px; flex: none; }
.signaal .afgerondtekst { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
  font-size: var(--tekst-xs); color: var(--tekst-3); }
.signaal .afgerondtekst svg { width: 12px; height: 12px; flex: none; }
.signaal.afgerond { background: var(--vlak-zacht); }
.stroomkop.verlopen .stroomlamp { background: var(--gevaar-vlak); }

/* ---------------------------------------------------- poortwachtermijlpalen (0.45.0) */
.verloopstap.bevestigd::before { background: var(--groen-600); }
.verloopstap.bevestigd, .verloopstap.verstreken,
.verloopstap.nadert, .verloopstap.komt, .verloopstap.vervallen { grid-template-columns: 96px 1fr; }
.verloopstap.verstreken::before { background: var(--gevaar-vlak); }
.verloopstap.nadert::before { background: var(--letop-vlak); }
.verloopstap.vervallen::before { background: var(--rand); }
.verloopstap.vervallen .stapwat, .verloopstap.vervallen .stapnotitie { color: var(--tekst-3); }

/* ------------------------------------------------------------------- de wachtrij (0.48.0) */
.wachtrij { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: var(--ruimte-4); align-items: start; }
@media (max-width: 900px) { .wachtrij { grid-template-columns: minmax(0, 1fr); } }
.wachtrijlijst { display: flex; flex-direction: column; border: 1px solid var(--rand);
  border-radius: var(--radius-2); background: var(--vlak); overflow: hidden;
  max-height: 70vh; overflow-y: auto; }
.wachtrijregel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--ruimte-3); width: 100%; text-align: left;
  padding: var(--ruimte-3) var(--ruimte-4); border: 0; border-bottom: 1px solid var(--rand);
  background: none; cursor: pointer; font: inherit; color: var(--tekst); }
.wachtrijregel:last-child { border-bottom: 0; }
.wachtrijregel:hover { background: var(--vlak-zacht); }
.wachtrijregel.gekozen { background: var(--groen-50, var(--vlak-zacht));
  box-shadow: inset 3px 0 0 var(--groen-600); }
.wachtrijregel .wrsoort { display: flex; color: var(--tekst-3); }
.wachtrijregel .wrsoort svg { width: 17px; height: 17px; }
.wrtekst { display: flex; flex-direction: column; min-width: 0; }
.wrtitel { font-weight: 600; font-size: var(--tekst-m); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.wronder { font-size: var(--tekst-s); color: var(--tekst-2); }
.wachtrijwerk { min-width: 0; }
.wrpersoon { display: flex; align-items: center; gap: var(--ruimte-2);
  margin-bottom: var(--ruimte-3); }
.wrgevolg { font-size: var(--tekst-l, 1.02rem); margin: 0 0 var(--ruimte-3);
  color: var(--tekst); }