/* ============================================================================
   SVS HRM — weergave 2 — schermen: medewerkers, dossier, inhuur, werkbank, inschaling
   ========================================================================= */

/* ---------------------------------------------------------------- de medewerkerkaart
   Eén kop met wie het is en hoe hij ervoor staat; daaronder links de onderdelen
   van het dossier en rechts de inhoud. De onderdelen staan onder elkaar omdat het
   er twaalf zijn: twaalf tabbladen naast elkaar passen op geen enkel scherm, en
   een tweede rij pillen eronder zegt niet wat waarbij hoort. */
.mwkop {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--ruimte-3) var(--ruimte-4); align-items: center;
  margin-bottom: var(--ruimte-5);
}
.mwkop .kopgroep { min-width: 0; }
.mwkop h1 { font-size: var(--tekst-pagina); display: flex; align-items: center;
  gap: var(--ruimte-3); flex-wrap: wrap; }
.mwkop .onder { display: block; margin-top: 3px; color: var(--tekst-2); font-size: var(--tekst-m); }
.mwkop .onder .scheid { color: var(--rand-sterk); white-space: pre; }
.mwkop .onder .getal { white-space: nowrap; }
.mwkop .kopstatus { display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap; }
.mwkop .kopacties { display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap;
  justify-content: flex-end; }
.mwpeil { display: flex; align-items: center; gap: var(--ruimte-2); }
.mwpeil label { font-size: var(--tekst-s); font-weight: 500; color: var(--tekst-3); white-space: nowrap; }
.mwpeil input { min-height: var(--knop-hoogte); padding: 0 var(--ruimte-2);
  border: 1px solid var(--rand-invoer); border-radius: var(--radius-2); background: var(--vlak);
  font-size: var(--tekst-m); font-weight: 500; font-variant-numeric: tabular-nums; }
.persoonspagina.historisch .mwpeil input { border-color: var(--letop-rand); background: var(--letop-bg); }

.mwblad { display: grid; grid-template-columns: var(--zijnav) minmax(0, 1fr);
  gap: var(--ruimte-6); align-items: start; }
.mwnav { position: sticky; top: calc(var(--topbalk) + var(--ruimte-4));
  display: flex; flex-direction: column; gap: var(--ruimte-4); }
.mwnavgroep { display: flex; flex-direction: column; gap: 1px; }
.mwnavgroep > .zonelabel { padding: 0 var(--ruimte-2) var(--ruimte-1); }
.mwnav a {
  display: flex; align-items: center; gap: var(--ruimte-2);
  min-height: calc(34px * var(--dichtheid)); padding: 0 var(--ruimte-2);
  border-radius: var(--radius-2); color: var(--tekst-2); font-size: var(--tekst-m);
  font-weight: 500; text-decoration: none;
}
.mwnav a:hover { background: var(--vlak-diep); color: var(--tekst); }
.mwnav a[aria-current="page"] { background: var(--vlak); color: var(--tekst); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--rand); }
.mwnav a .stip { margin-left: auto; }
.mwinhoud { min-width: 0; }
.mwinhoud > * + * { margin-top: var(--ruimte-4); }
.mwinhoud > .kaart + .kaart { margin-top: var(--ruimte-4); }

/* Op smal scherm: de onderdelen als horizontale strook boven de inhoud. */
@media (max-width: 1023px) {
  .mwblad { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-4); }
  /* `relative`, niet `static`: de schermlezerteksten in de links staan absoluut en moeten
     binnen dit scrollvak blijven, anders trekken ze de pagina 900 px breed. */
  .mwnav { position: relative; top: auto; flex-direction: row; gap: var(--ruimte-1); overflow-x: auto;
    scrollbar-width: none; padding-bottom: 2px; margin: 0 calc(var(--ruimte-4) * -1);
    padding-left: var(--ruimte-4); padding-right: var(--ruimte-4); }
  .mwnavgroep { flex-direction: row; gap: var(--ruimte-1); }
  .mwnavgroep > .zonelabel { display: none; }
  .mwnav a { white-space: nowrap; border: 1px solid var(--rand); background: var(--vlak);
    border-radius: var(--radius-pil); padding: 0 var(--ruimte-3); }
  .mwnav a[aria-current="page"] { background: var(--inkt-900); color: var(--tekst-op-donker); box-shadow: none;
    border-color: var(--inkt-900); }
  .mwkop { grid-template-columns: auto minmax(0, 1fr); }
  .mwkop .kopacties { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Historische stand: zichtbaar anders, zodat oude gegevens nooit voor actueel doorgaan. */
.persoonspagina.historisch .mwinhoud { position: relative; }
.persoonspagina.historisch .mwinhoud > .kaart, .persoonspagina.historisch .mwinhoud > .paneel,
.persoonspagina.historisch .mwstrip { border-color: var(--letop-rand); border-style: dashed; }

/* De oude kop en bladbalk (eerste weergave) blijven gedefinieerd voor wie ze nog tekent. */
.persoonskop { display: flex; align-items: center; gap: var(--ruimte-4); flex-wrap: wrap;
  margin-bottom: var(--ruimte-5); }
.persoonskop .kopgroep { flex: 1; min-width: 220px; }
.persoonskop .onder { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); margin-top: 3px;
  color: var(--tekst-2); font-size: var(--tekst-m); }
.persoonskop .onder > span + span::before { content: "·"; margin-right: var(--ruimte-2); color: var(--rand-sterk); }
.kopstatus { display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap; }
.bladbalk { display: flex; align-items: flex-end; gap: var(--ruimte-4);
  border-bottom: 1px solid var(--rand); margin-bottom: var(--ruimte-4); }
.bladbalk .tabs { flex: 1; min-width: 0; border-bottom: none; margin: 0; }
.bladbalk .peil { display: flex; align-items: center; gap: var(--ruimte-2); padding-bottom: 6px; flex: none; }
.bladbalk .peil label { font-size: var(--tekst-xs); font-weight: 600; color: var(--tekst-3); white-space: nowrap; }
.bladbalk .peil input { min-height: 32px; padding: 0 var(--ruimte-2); border: 1px solid var(--rand-invoer);
  border-radius: var(--radius-2); background: var(--vlak); font-size: var(--tekst-s); font-weight: 600; }
.persoonspagina > .paneel > .deelrail { padding: var(--ruimte-3) var(--inspring) 0; margin-bottom: 0; }

/* De knop "Acties" met het menu eronder: alles wat je op deze kaart kunt doen, op één plek. */
.actiemenu { position: relative; }
.actiemenu-lijst { position: absolute; right: 0; top: calc(100% + 6px); min-width: 260px; z-index: 30; }
.actiemenu-lijst[hidden] { display: none; }
@media (max-width: 767px) { .actiemenu-lijst { right: auto; left: 0; } }

/* ---------------------------------------------------------------- het overzicht (360°) */
.mwstrip {
  display: grid; grid-template-columns: minmax(200px, 1.3fr) repeat(3, minmax(120px, 1fr));
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-3);
  overflow: hidden; margin-bottom: var(--ruimte-4);
}
.mwstand, .mwfeit { display: flex; gap: var(--ruimte-3); padding: var(--ruimte-3) var(--inspring);
  border-left: 1px solid var(--rand); }
.mwstand { border-left: none; align-items: center; }
.mwfeit { flex-direction: column; gap: 1px; }
.mwstandlamp { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--groen-600); }
.mwstand.verlof .mwstandlamp { background: var(--info); }
.mwstand.ziek .mwstandlamp { background: var(--letop-vlak); }
.mwstandwat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mwstandtekst { font-size: var(--tekst-kaart); font-weight: 600; color: var(--tekst); }
.mwstanddetail { font-size: var(--tekst-s); color: var(--tekst-2); }
.mwfeit .wat { font-size: var(--tekst-xs); font-weight: 500; color: var(--tekst-3); letter-spacing: 0;
  text-transform: none; }
.mwfeit .waarde { font-size: var(--tekst-kaart); font-weight: 600; color: var(--tekst); }
.mwfeit .onder { font-size: var(--tekst-s); color: var(--tekst-2); }
.mwfeit .onder.letop { color: var(--letop); font-weight: 600; }

@media (max-width: 900px) {
  .mwstrip { grid-template-columns: 1fr 1fr; }
  .mwstand { grid-column: 1 / -1; border-bottom: 1px solid var(--rand); }
  .mwfeit:nth-child(2) { border-left: none; }
  .mwfeit:nth-child(4) { border-left: none; border-top: 1px solid var(--rand); }
  .mwfeit:nth-child(5) { border-top: 1px solid var(--rand); }
}
@media (max-width: 560px) {
  .mwstrip { grid-template-columns: 1fr; }
  .mwfeit { border-left: none; border-top: 1px solid var(--rand); }
}

.mwraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--ruimte-4); align-items: start; }
.mwraster > .kaart, .mw360 .kaart + .kaart { margin: 0; }
.mw360 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
  gap: var(--ruimte-4); align-items: start; }
.mw360 > div { display: flex; flex-direction: column; gap: var(--ruimte-4); min-width: 0; }
@media (max-width: 1099px) { .mw360 { grid-template-columns: minmax(0, 1fr); } }

.mwsignalen { display: flex; flex-direction: column; }
.mwsignaal { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--ruimte-3);
  align-items: start; padding: var(--ruimte-2) 0; border-bottom: 1px solid var(--rand); }
.mwsignaal:last-child { border-bottom: none; }
.mwsignaalstip { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%;
  background: var(--letop-vlak); }
.mwsignaalstip.urgent { background: var(--gevaar-vlak); box-shadow: 0 0 0 2px var(--vlak),
  0 0 0 3.5px var(--gevaar-vlak); }
.mwsignaalwat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mwsignaalwat .titel { font-size: var(--tekst-m); color: var(--tekst); line-height: 1.4; }
.mwsignaalwat .onder { font-size: var(--tekst-s); color: var(--tekst-2); }
.mwsignaal .termijnkort { font-size: var(--tekst-s); font-variant-numeric: tabular-nums;
  color: var(--tekst-2); white-space: nowrap; }
.mwsignaal .termijnkort.teveel { color: var(--gevaar); font-weight: 600; }
.mwmeer { font-size: var(--tekst-s); color: var(--tekst-3); padding: var(--ruimte-2) 0 0 20px; }

.mwcontact { display: flex; flex-direction: column; }
.mwcontactrij { display: grid; grid-template-columns: 96px 1fr; gap: var(--ruimte-3);
  align-items: baseline; padding: var(--ruimte-2) 0; border-bottom: 1px solid var(--rand); }
.mwcontactrij:last-child { border-bottom: none; }
.mwcontactrij .wat { font-size: var(--tekst-xs); font-weight: 500; color: var(--tekst-3); }
.mwcontactrij .waarde { font-size: var(--tekst-m); color: var(--tekst); overflow-wrap: anywhere; }
a.waarde { color: var(--inkt-700); text-decoration: none; }
a.waarde:hover { text-decoration: underline; }

.mwverlof { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.mwverlofcijfer { display: flex; align-items: baseline; gap: var(--ruimte-2); }
.mwverlofcijfer .getal, .mwverzuimdeel .getal, .mwdossier .getal {
  font-size: var(--tekst-kpi); font-weight: 600; letter-spacing: -.01em; color: var(--tekst); line-height: 1; }
.mwverlofcijfer .wat, .mwverzuimdeel .wat, .mwdossier .wat { font-size: var(--tekst-s); color: var(--tekst-2); }
.mwverlofstaaf { height: 6px; border-radius: var(--radius-pil); background: var(--vlak-diep); overflow: hidden; }
.mwverlofdeel { display: block; height: 100%; background: var(--groen-600); }
.mwverlofonder { font-size: var(--tekst-s); color: var(--tekst-2); }
.mwverzuim { display: flex; gap: var(--ruimte-6); }
.mwverzuimdeel { display: flex; flex-direction: column; gap: 2px; }
.mwdossier { display: flex; align-items: baseline; gap: var(--ruimte-2); }
.mwontbreekt { display: flex; flex-direction: column; gap: var(--ruimte-1); margin-top: var(--ruimte-3); }
.mwontbreektje { display: inline-flex; align-items: center; gap: var(--ruimte-2);
  font-size: var(--tekst-s); color: var(--letop); font-weight: 500; }
.mwontbreektje svg { width: 14px; height: 14px; }
.mwmijlpalen { display: flex; flex-direction: column; }
.mwmijlpaal { display: grid; grid-template-columns: 84px 1fr; gap: var(--ruimte-3); align-items: baseline;
  padding: var(--ruimte-2) 0; border-bottom: 1px solid var(--rand); }
.mwmijlpaal:last-child { border-bottom: none; }
.mwmijldatum { font-size: var(--tekst-s); font-variant-numeric: tabular-nums; color: var(--tekst-2); }
.mwmijltitel { font-size: var(--tekst-m); color: var(--tekst); }

/* De tegelvormen uit de eerste weergave (medewerkerkaart en beleid). */
.dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: var(--ruimte-4); align-items: start; }
.tegel { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-3);
  padding: var(--inspring); }
.tegel.breed { grid-column: 1 / -1; }
.tegelkop { display: flex; align-items: center; gap: var(--ruimte-3); margin-bottom: var(--ruimte-3);
  padding-bottom: var(--ruimte-2); border-bottom: 1px solid var(--rand); }
.tegelkop h3 { flex: 1; min-width: 0; font-size: var(--tekst-kaart); }
.tegellink { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--ruimte-2);
  margin-right: calc(var(--ruimte-2) * -1); font-size: var(--tekst-s); font-weight: 600;
  text-decoration: none; color: var(--inkt-700); border-radius: var(--radius-1); white-space: nowrap; }
.tegellink:hover { background: var(--vlak-diep); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--ruimte-4); }
.kpi .kpiwaarde { font-size: var(--tekst-kaart); font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .kpiextra { font-size: var(--tekst-xs); color: var(--tekst-3); }
.tegelgroot { font-size: var(--tekst-sectie); font-weight: 600; letter-spacing: -.01em; line-height: 1.2;
  font-variant-numeric: tabular-nums; }
.tegelgroot span { font-size: var(--tekst-s); font-weight: 500; color: var(--tekst-3); letter-spacing: 0; }
.tegelregel { margin-top: var(--ruimte-2); font-size: var(--tekst-m); color: var(--tekst-2); }
.tegelregel.klein { font-size: var(--tekst-s); color: var(--tekst-3); }
.tegelleeg { display: flex; align-items: flex-start; gap: var(--ruimte-2); font-size: var(--tekst-m);
  color: var(--tekst-2); }
.tegelleeg svg { width: 15px; height: 15px; flex: none; color: var(--groen-700); margin-top: 2px; }
.tegelactie { margin-top: var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-3); border-radius: var(--radius-1);
  font-size: var(--tekst-s); font-weight: 600; background: var(--letop-bg); color: var(--letop); }
.tegelactie.urgent { background: var(--gevaar-bg); color: var(--gevaar); }
.minisignalen { display: flex; flex-direction: column; gap: var(--ruimte-2); }
.minisignaal { display: flex; gap: var(--ruimte-3); align-items: baseline; }
.minisignaal::before { content: ""; width: var(--lamp); height: var(--lamp); border-radius: 50%; flex: none;
  background: var(--neutraal); align-self: center; }
.minisignaal.u1::before { background: var(--gevaar-vlak); box-shadow: 0 0 0 2px var(--vlak), 0 0 0 3.5px var(--gevaar-vlak); }
.minisignaal.u2::before { background: var(--letop-vlak); }
.minisignaal.u3::before { background: var(--info); }
.mstitel { flex: 1; font-size: var(--tekst-m); font-weight: 500; }
.msdatum { font-size: var(--tekst-xs); color: var(--tekst-3); white-space: nowrap; }
.msmeer { font-size: var(--tekst-s); color: var(--tekst-3); padding-left: var(--ruimte-3); }
.komtrij { display: grid; grid-template-columns: 74px 1fr; gap: var(--ruimte-3); padding: var(--ruimte-2) 0;
  border-bottom: 1px solid var(--rand); }
.komtrij:last-child { border-bottom: none; padding-bottom: 0; }
.komtdatum { font-size: var(--tekst-s); color: var(--tekst-3); padding-top: 1px; }
.komttitel { font-size: var(--tekst-m); font-weight: 600; }
.komtdetail { font-size: var(--tekst-xs); color: var(--tekst-3); }
.ketenmini { display: flex; align-items: center; gap: var(--ruimte-3); margin-top: var(--ruimte-3);
  font-size: var(--tekst-s); color: var(--tekst-2); }
.ketenmini.waarschuwing { color: var(--gevaar); font-weight: 600; }
.ketenmini .schakel { width: 22px; height: 6px; border-radius: var(--radius-pil); background: var(--rand-invoer); }
.ketenmini .schakel.vol { background: var(--inkt-900); }
.ketenmini.waarschuwing .schakel.vol { background: var(--gevaar-vlak); }

/* ---------------------------------------------------------------- contracten */
.keten { display: flex; align-items: center; gap: var(--ruimte-4); flex-wrap: wrap;
  padding: var(--ruimte-2) var(--ruimte-3); border-radius: var(--radius-2); margin-bottom: var(--ruimte-4);
  background: var(--vlak-zacht); border: 1px solid var(--rand); }
.keten.waarschuwing { background: var(--gevaar-bg); border-color: var(--gevaar-rand); }
.keten .schakels { display: flex; gap: 5px; }
.keten .schakel { width: 28px; height: 6px; border-radius: var(--radius-pil); background: var(--rand-invoer); }
.keten .schakel.vol { background: var(--inkt-900); }
.keten.waarschuwing .schakel.vol { background: var(--gevaar-vlak); }
.keten .tekst { font-size: var(--tekst-s); color: var(--tekst-2); }
.keten.waarschuwing .tekst { color: var(--gevaar); font-weight: 600; }
.contractbalk { display: flex; flex-direction: column; gap: var(--ruimte-4); }
.contractrij { display: grid; grid-template-columns: 200px 1fr; gap: var(--ruimte-4); align-items: center; }
.contractrij .naam .soort { font-weight: 600; font-size: var(--tekst-m); display: flex; align-items: center;
  gap: var(--ruimte-2); flex-wrap: wrap; }
.contractrij .naam .periode { color: var(--tekst-3); font-size: var(--tekst-s); font-variant-numeric: tabular-nums;
  margin-top: 2px; }
.spoor { position: relative; height: 26px; border-radius: var(--radius-1); background: var(--vlak-diep); overflow: hidden; }
.spoor .blok { position: absolute; top: 0; bottom: 0; background: var(--inkt-900); border-radius: var(--radius-1); }
.spoor .blok.open { background: linear-gradient(90deg, var(--inkt-900), var(--groen-600)); }
.spoor .proef { position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 5px, transparent 5px 10px); }
.spoor .merk-lijn { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gevaar-vlak); }
.spoor .merk-lijn::after { content: ""; position: absolute; top: 0; left: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gevaar-vlak); }
.spoor .vandaag { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--tekst); }
.aanzegwacht { display: flex; flex-direction: column; gap: var(--ruimte-2); margin-top: var(--ruimte-2);
  padding: var(--ruimte-3); border: 1px solid var(--letop-rand); border-radius: var(--radius-2);
  background: var(--letop-bg); }
.aanzegwat { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2); }
.aanzegwat .onder { font-size: var(--tekst-s); color: var(--tekst-2); }
.aanzegknoppen { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); margin-top: var(--ruimte-2); }
.aanzegnoot { font-size: var(--tekst-s); line-height: 1.45; color: var(--tekst-2); max-width: 52ch; }
@media (max-width: 767px) { .contractrij { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- tijdlijn */
.historietijdlijn { position: relative; padding-left: var(--ruimte-6); }
.historietijdlijn::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: var(--rand); border-radius: var(--radius-pil); }
.tp { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 1px; width: 100%;
  text-align: left; background: none; border: none; padding: var(--ruimte-2) var(--ruimte-3) var(--ruimte-2) 0;
  cursor: pointer; border-radius: var(--radius-2); transition: background var(--duur-snel); }
.tp:hover { background: var(--vlak-zacht); }
.tp::before { content: ""; position: absolute; left: -26px; top: 14px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--vlak); border: 2px solid var(--rand-invoer); box-shadow: 0 0 0 3px var(--vlak); }
.tp.mijlpaal::before { border-color: var(--groen-600); background: var(--groen-600); }
.tp.let::before { border-color: var(--letop-vlak); background: var(--letop-vlak); }
.tp.urg::before { border-color: var(--gevaar-vlak); background: var(--gevaar-vlak); }
.tp .datum { font-size: var(--tekst-xs); color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.tp .titel { font-size: var(--tekst-m); font-weight: 600; }
.tp .detail { font-size: var(--tekst-s); color: var(--tekst-2); }
.tp.geselecteerd { background: var(--groen-50); }
.nu-scheiding { position: relative; display: flex; align-items: center; gap: var(--ruimte-2);
  margin: var(--ruimte-3) 0; font-size: var(--tekst-xs); font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--groen-700); }
.nu-scheiding::after { content: ""; flex: 1; height: 1px; background: var(--groen-100); }
.tijdlijn { position: relative; padding-left: var(--ruimte-6); }
.tijdlijn::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px;
  border-radius: var(--radius-pil); background: var(--rand); }
.tijdlijn-punt { position: relative; display: block; width: 100%; text-align: left;
  padding: var(--ruimte-2) var(--ruimte-3) var(--ruimte-2) 0; background: none; border: none;
  border-radius: var(--radius-2); }
.tijdlijn-punt:hover { background: var(--vlak-zacht); }
.tijdlijn-punt::before { content: ""; position: absolute; left: -26px; top: 15px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--vlak); border: 2px solid var(--rand-sterk); box-shadow: 0 0 0 3px var(--vlak); }
.tijdlijn-punt.merk::before { background: var(--groen-600); border-color: var(--groen-600); }
.tijdlijn-punt.letop::before { background: var(--letop-vlak); border-color: var(--letop-vlak); }
.tijdlijn-punt.gevaar::before { background: var(--gevaar-vlak); border-color: var(--gevaar-vlak); }
.nu-markering { display: flex; align-items: center; gap: var(--ruimte-2); margin: var(--ruimte-3) 0;
  font-size: var(--tekst-xs); font-weight: 600; color: var(--groen-700); }
.nu-markering::after { content: ""; flex: 1; height: 1px; background: var(--groen-100); }

/* ---------------------------------------------------------------- certificaten */
.certrij { display: grid; grid-template-columns: 1fr 150px 90px; gap: var(--ruimte-4); align-items: center;
  padding: var(--ruimte-3) 0; border-bottom: 1px solid var(--rand); }
.certrij:first-child { padding-top: 0; }
.certrij:last-child { border-bottom: none; padding-bottom: 0; }
.certrij .cnaam { font-weight: 600; font-size: var(--tekst-m); display: flex; align-items: center;
  gap: var(--ruimte-2); flex-wrap: wrap; }
.certrij .cnr { font-size: var(--tekst-s); color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.certrij .resterend { font-size: var(--tekst-xs); color: var(--tekst-3); margin-top: 4px; }
.certrij .num { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--tekst-s); color: var(--tekst-2); }
.inzetregel { margin: 0 0 var(--ruimte-2); }
.inzetregel:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .certrij { grid-template-columns: 1fr auto; }
  .certrij > div:nth-child(2) { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- dossier */
.dosrij { display: grid; grid-template-columns: 200px 1fr; gap: var(--ruimte-4); align-items: start;
  padding: var(--ruimte-3) 0; border-bottom: 1px solid var(--rand); }
.dosrij:last-of-type { border-bottom: none; }
.dosrij > div:first-child { display: flex; align-items: center; gap: var(--ruimte-2); }
.dosrij svg { width: 16px; height: 16px; flex: none; color: var(--tekst-3); }
.dosnaam { font-size: var(--tekst-m); font-weight: 600; }
.dosrij.ontbreekt .dosnaam, .dosrij.ontbreekt svg { color: var(--gevaar); }
.dosstukken { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
.stuk { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 4px 10px;
  border-radius: var(--radius-pil); font-size: var(--tekst-s); font-weight: 500;
  background: var(--vlak-zacht); color: var(--tekst); border: 1px solid var(--rand);
  transition: background var(--duur-snel), border-color var(--duur-snel); }
.stuk:hover { background: var(--groen-50); border-color: var(--groen-100); }
.stukgroep { display: flex; align-items: center; gap: 2px; min-width: 0; }
.stuktitel { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stukversie { font-size: var(--tekst-xs); color: var(--tekst-3); font-weight: 700; }
.stukactie { display: grid; place-items: center; width: 28px; height: 28px; border: none; background: none;
  border-radius: var(--radius-1); color: var(--tekst-3); cursor: pointer; }
.stukactie:hover { background: var(--vlak-diep); color: var(--tekst); }
.stukactie svg { width: 14px; height: 14px; }
.dosnoot { margin-top: var(--ruimte-3); font-size: var(--tekst-s); color: var(--tekst-3);
  padding-top: var(--ruimte-3); border-top: 1px solid var(--rand); }
@media (max-width: 767px) { .dosrij { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-2); } }

/* ---------------------------------------------------------------- verlof op de kaart */
.potten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--ruimte-4); }
.pot { display: flex; align-items: center; gap: var(--ruimte-3); min-width: 0; }
.potinfo { min-width: 0; }
.potnaam { display: block; font-size: var(--tekst-m); font-weight: 600; }
.potsaldo { display: block; font-size: var(--tekst-xl); font-weight: 600; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; }
.potsaldo span { font-size: var(--tekst-s); font-weight: 500; color: var(--tekst-2); }
.potregel { margin-top: 2px; font-size: var(--tekst-s); color: var(--tekst-3); }
.pot.potstaaf .potinfo { flex: 1; }
.potbalk { height: 6px; margin: var(--ruimte-1) 0; border-radius: var(--radius-pil); background: var(--vlak-diep);
  overflow: hidden; }
.potbalk span { display: block; height: 100%; background: var(--groen-600); border-radius: var(--radius-pil); }
.potbalk.letop span { background: var(--letop-vlak); }
.potbalk.gevaar span { background: var(--gevaar-vlak); }

/* ---------------------------------------------------------------- inhuur */
.inhuurlijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
  gap: var(--ruimte-4); align-items: start; }
.inhuurlijst > .kaart { margin: 0; }
.inhuurkaart .kaart-kop .kopgroep { flex: 1; min-width: 0; }
.inhuurkaart .kaart-kop h3 { font-size: var(--tekst-kaart); }
.inhuurkaart.inactief { opacity: .7; }
.inhuurkaart .sectiekop { margin-top: var(--ruimte-4); }
.inhuurkaart .sectiekop h4 { flex: 1; font-size: var(--tekst-s); font-weight: 600; color: var(--tekst-3); }

/* ---------------------------------------------------------------- werkbank */
.werkbank { display: grid; grid-template-columns: 272px minmax(0, 1fr);
  margin: calc(var(--blad-y) * -1) calc(var(--blad-x) * -1) calc(var(--ruimte-9) * -1);
  min-height: calc(100dvh - var(--topbalk)); background: var(--vlak); }
.register { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--rand);
  background: var(--vlak); position: sticky; top: var(--topbalk); height: calc(100dvh - var(--topbalk)); }
.registerzoek { display: flex; gap: var(--ruimte-2); align-items: center; padding: var(--ruimte-3);
  border-bottom: 1px solid var(--rand); }
.registerzoek input { flex: 1; min-width: 0; }
.registerlijst { flex: 1; min-height: 0; overflow-y: auto; padding: var(--ruimte-2); }
.registerleeg { padding: var(--ruimte-5) var(--ruimte-3); color: var(--tekst-3); font-size: var(--tekst-m); }
.registervoet { padding: var(--ruimte-2) var(--ruimte-3); border-top: 1px solid var(--rand); background: var(--vlak-zacht); }
.registerregel { display: flex; align-items: center; gap: var(--ruimte-3); min-height: 44px;
  padding: var(--ruimte-2); border-radius: var(--radius-2); text-decoration: none; color: inherit; }
.registerregel:hover { background: var(--vlak-diep); }
.registerregel.actief { background: var(--groen-50); }
.registerregel.actief .naam { color: var(--tekst); font-weight: 600; }
.registerregel .wie { min-width: 0; display: flex; flex-direction: column; }
.registerregel .naam { font-size: var(--tekst-m); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.registerregel .rol { font-size: var(--tekst-xs); color: var(--tekst-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.registerregel .teken { margin-left: auto; flex: none; min-width: 20px; padding: 1px 6px; text-align: center;
  border-radius: var(--radius-pil); font-size: var(--tekst-xs); font-weight: 700; background: var(--letop-bg); color: var(--letop); }
.registerregel .teken.urgent { background: var(--gevaar-bg); color: var(--gevaar); }
.werkvlak { min-width: 0; display: flex; flex-direction: column; }
.werkvlak-leeg { display: grid; place-items: center; flex: 1; padding: var(--ruimte-8); }
.werkkop { padding: var(--ruimte-5) var(--ruimte-6) 0; border-bottom: 1px solid var(--rand); background: var(--vlak); }
.werkwie { display: flex; align-items: flex-start; gap: var(--ruimte-4); margin-bottom: var(--ruimte-4); }
.werkwie h1 { font-size: var(--tekst-pagina); }
.werkwie .kopgroep { flex: 1; min-width: 0; }
.werkfeiten { margin: var(--ruimte-1) 0 0; font-size: var(--tekst-m); color: var(--tekst-2); }
.werkfeiten .scheid { color: var(--tekst-3); margin: 0 6px; }
.werkstand { margin-left: auto; }
.werkzones { display: flex; gap: var(--ruimte-4); }
.werkzones a { padding: var(--ruimte-2) 0 var(--ruimte-3); border-bottom: 2px solid transparent;
  text-decoration: none; color: var(--tekst-2); font-size: var(--tekst-m); font-weight: 500; white-space: nowrap; }
.werkzones a:hover { color: var(--tekst); }
.werkzones a[aria-current="page"] { color: var(--tekst); border-bottom-color: var(--groen-600); font-weight: 600; }
.werkinhoud { padding: var(--ruimte-5) var(--ruimte-6) var(--ruimte-8); background: var(--grond); flex: 1; }
.werkinhoud > * + * { margin-top: var(--ruimte-4); }
@media (max-width: 1023px) {
  .werkbank { grid-template-columns: minmax(0, 1fr); margin: 0; min-height: 0; }
  .register { position: static; height: auto; max-height: 40dvh; border-right: none; border-bottom: 1px solid var(--rand); }
  .werkkop, .werkinhoud { padding-left: var(--ruimte-4); padding-right: var(--ruimte-4); }
}

/* ---------------------------------------------------------------- inschaling */
.inschaalblad { max-width: 1180px; }
.inschaalkop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ruimte-5);
  flex-wrap: wrap; margin: 0 0 var(--ruimte-5); }
.inschaalkop .context { display: none; }
.inschaalkop h1 { font-size: var(--tekst-pagina); margin: 0; }
.inschaalkop .onder { margin: 4px 0 0; color: var(--tekst-2); font-size: var(--tekst-m); }
.inschaalkop .scheid { color: var(--tekst-3); margin: 0 5px; }
.inschaalpeil { display: flex; align-items: center; gap: var(--ruimte-2); }
.inschaalpeil label { font-size: var(--tekst-s); color: var(--tekst-2); }
.inschaalstappen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ruimte-5); }
.inschaalstap { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-3); overflow: hidden; }
.inschaalstap .stapkop { display: flex; align-items: center; gap: var(--ruimte-3); padding: var(--ruimte-3) var(--ruimte-5);
  border-bottom: 1px solid var(--rand); background: var(--vlak-zacht); }
.inschaalstap .stapkop h2 { margin: 0; font-size: var(--tekst-kaart); }
.stapnr { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--radius-pil);
  background: var(--vlak-diep); border: 1px solid var(--rand-sterk); font-size: var(--tekst-xs); font-weight: 700; color: var(--tekst-2); }
.inschaalstap.klaar .stapnr { background: var(--groen-600); border-color: var(--groen-600); color: var(--tekst-op-donker); }
.inschaalstap .staplijf { padding: var(--ruimte-5); }
.inschaalstap .toelichting { max-width: 78ch; margin-top: 0; }
.familiekeuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--ruimte-3); margin-top: var(--ruimte-4); }
.familiekaart { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: var(--ruimte-4);
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-2); cursor: pointer;
  transition: border-color var(--duur-snel), background var(--duur-snel); }
.familiekaart:hover { border-color: var(--rand-invoer); }
.familiekaart.gekozen { border-color: var(--groen-700); background: var(--groen-50); box-shadow: inset 0 0 0 1px var(--groen-700); }
.fcode { font-size: var(--tekst-xs); font-weight: 700; letter-spacing: .04em; color: var(--tekst-3); }
.fnaam { font-size: var(--tekst-l); font-weight: 600; color: var(--tekst); line-height: 1.25; }
.fomschrijving { font-size: var(--tekst-m); color: var(--tekst-2); line-height: 1.45; margin-top: 2px; }
.fbereik { font-size: var(--tekst-s); font-weight: 600; color: var(--groen-700); margin-top: var(--ruimte-2); }
.fvoorbeelden { font-size: var(--tekst-xs); color: var(--tekst-3); line-height: 1.4; }
.karakteristiek { margin-top: var(--ruimte-6); }
.karakteristiek:first-of-type { margin-top: var(--ruimte-4); }
.karakkop { display: flex; align-items: baseline; gap: var(--ruimte-3); flex-wrap: wrap; }
.karakkop h3 { margin: 0; font-size: var(--tekst-kaart); }
.karakmerk { font-size: var(--tekst-xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--radius-pil); background: var(--vlak-diep); color: var(--tekst-3); }
.karakmerk.beslist { background: var(--groen-100); color: var(--groen-700); }
.karakuitleg { margin: var(--ruimte-2) 0 2px; max-width: 80ch; color: var(--tekst-2); font-size: var(--tekst-m); }
.karakpunten { margin: 0 0 var(--ruimte-3); font-size: var(--tekst-s); color: var(--tekst-3); }
.niveaus { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: var(--ruimte-3);
  overflow-x: auto; padding-bottom: var(--ruimte-2); scrollbar-width: thin; }
.niveau { display: flex; flex-direction: column; gap: var(--ruimte-2); text-align: left; padding: var(--ruimte-3) var(--ruimte-4);
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-2); cursor: pointer;
  transition: border-color var(--duur-snel), background var(--duur-snel); }
.niveau:hover { border-color: var(--rand-invoer); background: var(--vlak-zacht); }
.niveau.gekozen { border-color: var(--groen-700); background: var(--groen-50); box-shadow: inset 0 0 0 1px var(--groen-700); }
.niveaukop { display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-2); }
.niveaugroep { font-size: var(--tekst-s); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--tekst-3); }
.niveau.gekozen .niveaugroep { color: var(--groen-700); }
.niveaukop svg { width: 16px; height: 16px; color: var(--groen-700); }
.niveautekst { font-size: var(--tekst-m); line-height: 1.5; color: var(--tekst); }
.niveaubron { font-size: var(--tekst-xs); color: var(--tekst-3); margin-top: auto; padding-top: var(--ruimte-2); }
.uitkomstvak { padding: var(--ruimte-4) var(--ruimte-5); background: var(--groen-50); border: 1px solid var(--groen-100);
  border-radius: var(--radius-2); margin-bottom: var(--ruimte-5); }
.uitkomstvak.onzeker { background: var(--letop-bg); border-color: var(--letop-rand); }
.uitkomstgroep { display: block; font-size: var(--tekst-sectie); font-weight: 700; color: var(--groen-700); }
.uitkomstvak.onzeker .uitkomstgroep, .uitkomstgroep.geen { color: var(--letop); }
.uitkomstreden { margin: var(--ruimte-2) 0 0; max-width: 80ch; font-size: var(--tekst-m); }
.uitkomstregel { margin: var(--ruimte-2) 0 0; font-size: var(--tekst-s); color: var(--tekst-2); }
.afwijkveld { padding: var(--ruimte-4); border-radius: var(--radius-2); background: var(--letop-bg); border: 1px solid var(--letop-rand); }
.salarisuitkomst { display: flex; align-items: center; gap: var(--ruimte-5); flex-wrap: wrap; padding: var(--ruimte-4) var(--ruimte-5);
  margin-bottom: var(--ruimte-4); background: var(--vlak-zacht); border: 1px solid var(--rand); border-radius: var(--radius-2); }
.salarisuitkomst .label { display: block; font-size: var(--tekst-s); color: var(--tekst-2); }
.salarisuitkomst .bedrag { font-size: var(--tekst-kaart); font-weight: 600; font-variant-numeric: tabular-nums; }
.salarisuitkomst .bedrag.groot { font-size: var(--tekst-sectie); font-weight: 700; }
.salarisuitkomst .pijl { color: var(--tekst-3); display: flex; }
.salarisuitkomst .pijl svg { width: 20px; height: 20px; }
.geenbedrag { padding: var(--ruimte-4); margin-bottom: var(--ruimte-4); background: var(--info-bg); border: 1px solid var(--info-rand);
  border-radius: var(--radius-2); }
.geenbedrag p { margin: 0 0 var(--ruimte-2); max-width: 78ch; font-size: var(--tekst-m); }
.geenbedrag p:last-child { margin-bottom: 0; }
.waarschuwing { display: flex; align-items: flex-start; gap: var(--ruimte-2); color: var(--letop); font-weight: 600;
  max-width: 78ch; font-size: var(--tekst-m); }
.waarschuwing svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.inschaalvoet { margin-top: var(--ruimte-6); padding-top: var(--ruimte-5); border-top: 1px solid var(--rand); }
.inschaalvoet .label { display: block; margin-top: var(--ruimte-2); color: var(--tekst-2); max-width: 78ch; }
.eerdereinschalingen { margin-bottom: var(--ruimte-6); }
.eerdereinschalingen h2 { font-size: var(--tekst-kaart); margin: 0 0 var(--ruimte-3); }
.inschaallijst { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-3); overflow: hidden; }
.inschaalregel { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 12rem auto; gap: var(--ruimte-4); align-items: center;
  padding: var(--ruimte-3) var(--ruimte-4); border-bottom: 1px solid var(--rand); font-size: var(--tekst-m); }
.inschaalregel:last-child { border-bottom: none; }
.inschaalregel.voorstel { background: var(--letop-bg); }
.igroep { font-weight: 700; font-variant-numeric: tabular-nums; }
.igroep .ijaar { display: block; font-size: var(--tekst-s); font-weight: 500; color: var(--tekst-2); }
.iwat { min-width: 0; }
.ifamilie { display: block; }
.idatum { display: block; font-size: var(--tekst-s); color: var(--tekst-2); }
.iacties { display: flex; gap: var(--ruimte-2); justify-content: flex-end; }
@media (max-width: 1023px) {
  .inschaalregel { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--ruimte-2); }
  .iwat, .iacties { grid-column: 1 / -1; }
  .iacties { justify-content: flex-start; }
  .niveaus { grid-auto-columns: minmax(13rem, 80%); }
}