/* ============================================================
   Bestemming Inval (personeel.html?weergave=inval) — DEC-039
   ============================================================
   Stijl van het Inval-scherm: de werkvoorraad per dag, het case-detail met de
   volgende stap, de kandidatenlijst, "Afwezigheid melden", "Wie kan ik
   bellen?" en het meldingenblok. Alleen selectors onder `.personeel-page`;
   alles in de ruit-vormtaal (radius 0, afschuining via clip-path, randen als
   inset box-shadow — zie vormtaal.css) en uitsluitend tokens uit tokens.css.
   De gedeelde paneelstijlen van personeel.html staan in utility-pages.css;
   dit bestand draagt alleen wat het Inval-scherm zelf nodig heeft. */

/* ---- 1. De kop: één vraag, drie knoppen ------------------- */

.personeel-page .inval-kop {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.personeel-page .inval-kop-tekst {
  flex: 1 1 22rem;
  min-width: 0;
}

/* De kop van de kaart is de vraag van de bestemming (`.bestemming-vraag` in
   utility-pages.css) met daaronder het uitklapblok; de marges komen daar
   vandaan, zodat de drie bestemmingen er hetzelfde uitzien. Alleen de
   ondermarge van het blok vervalt hier: de kopregel draagt zelf al de
   ruimte naar de knoppenrij ernaast. */
.personeel-page .inval-kop-tekst .vt-uitleg {
  margin-bottom: 0;
}

.personeel-page .inval-kop-acties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* De uitkomst van een melding: één regel, aria-live. Leeg = geen ruimte. */
.personeel-page .inval-melding:empty {
  display: none;
}

.personeel-page .inval-melding {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--vms-grey-soft);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--border);
  font-size: var(--fs-ui-lg);
}

/* ---- 2. De vensterbalk ------------------------------------ */

.personeel-page .inval-balk {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  box-shadow: inset 0 -1px 0 0 var(--border-subtle);
}

.personeel-page .inval-balk .rs-samenvatting {
  margin: 0 0 0 auto;
  text-align: right;
}

/* ---- 3. De split: werkvoorraad links, case rechts ---------- */

.personeel-page .inval-split {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(300px, 3fr);
  gap: 1.25rem;
  align-items: start;
}

.personeel-page .inval-lijst > h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-label);
  font-size: var(--fs-ui-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.personeel-page .inv-dag {
  margin-bottom: 1rem;
}

.personeel-page .inv-dag-titel {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin: 0 0 0.4rem;
  font-size: var(--fs-ui-lg);
}

.personeel-page .inv-dag-lijst {
  margin: 0;
  padding: 0;
  list-style: none;
}

.personeel-page .inv-rij {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 0.5rem;
  align-items: start;
  margin-bottom: 0.4rem;
}

.personeel-page .inv-rij-tijd {
  padding-top: 0.6rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* De hele regel is één knop: klikken kiest de case. `.vt-kaart` zorgt voor de
   afschuining en de haarlijn; de gekozen regel wordt zwart (`.vt-vlak-zwart`). */
.personeel-page .inv-rij-knop {
  display: grid;
  gap: 0.15rem;
  padding: 0.55rem 0.7rem;
  color: inherit;
  text-decoration: none;
}

.personeel-page .inv-rij-knop:hover {
  box-shadow: inset 0 0 0 var(--vt-lijn-dik) var(--vms-ink-900);
}

.personeel-page .inv-rij-knop.vt-vlak-zwart {
  color: var(--vms-white);
}

.personeel-page .inv-rij-top {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.personeel-page .inv-rij-meta,
.personeel-page .inv-rij-wie {
  font-size: var(--fs-ui-md);
}

.personeel-page .inv-rij-wie {
  color: var(--text-muted);
}

/* Op het zwarte vlak zijn `--text-muted` én de statuskleuren tegen de
   paginakleur gekalibreerd; op inkt halen ze geen AA (--danger komt op 3,1:1).
   De tekst wordt daar dus wit — de statuskleur blijft in de ruit ernaast, die
   als grafisch element wél genoeg contrast houdt. */
.personeel-page .inv-rij-knop.vt-vlak-zwart .inv-rij-wie,
.personeel-page .inv-rij-knop.vt-vlak-zwart .inv-rij-meta,
.personeel-page .inv-rij-knop.vt-vlak-zwart .inv-rij-stand span {
  color: var(--vms-white);
}

.personeel-page .inv-rij-stand {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  font-size: var(--fs-ui-xs);
}

/* ---- 4. Het case-detail ----------------------------------- */

.personeel-page .inval-detail {
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

/* Op een breed scherm blijft het detail in beeld terwijl de werkvoorraad
   links doorscrolt (audit 2026-09-08). Tot deze ronde stond het detail
   gewoon bovenaan de rechterkolom: wie onderin een lange werkvoorraad een
   case koos, zag de pagina naar boven springen (de focus ging naar de
   detailkop) en moest daarna voor de volgende case weer helemaal
   terugscrollen. De sticky hangt onder de app-balk; wordt het detail zelf
   hoger dan het scherm, dan scrolt het binnen zijn eigen vlak. De rand van
   3px is ruimte voor de focusring van de detailkop, die `overflow: auto`
   anders wegsnijdt.

   Vanaf 1024px en niet vanaf de tweelagengrens van 760px: `--app-bar-h` is
   de hoogte van een balk van één rij, en op deze pagina — logo, vier
   bestemmingen met tel-badges, de zoekknop en de avatarruimte, samen zo'n
   850px — is de balk vanaf 1024px gegarandeerd één rij. Daaronder zou een
   gewikkelde balk het vastgezette detail onder haar tweede rij schuiven
   (Codex-review #428); daar blijft het detail dus gewoon in de kolom
   meescrollen zoals vóór deze ronde. Onder 760px zijn lijst en detail twee
   lagen (§6). */
@media (min-width: 1024px) {
  .personeel-page .inval-detail {
    position: sticky;
    top: calc(var(--app-bar-h, 71.6px) + 0.75rem);
    max-height: calc(100vh - var(--app-bar-h, 71.6px) - 1.5rem);
    margin: -3px;
    padding: 3px;
    overflow-y: auto;
  }
}

.personeel-page .inv-detail-kop {
  display: grid;
  gap: 0.2rem;
}

.personeel-page .inv-detail-titel {
  margin: 0;
  font-size: 1.25rem;
}

.personeel-page .inv-detail-meta {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-ui-md);
}

/* De terugknop hoort bij de twee-lagenweergave op smalle schermen. */
.personeel-page .inv-terug {
  display: none;
  justify-self: start;
  margin-bottom: 0.4rem;
}

.personeel-page .inv-case-fout {
  margin: 0;
  padding: 0.5rem 0.7rem;
  background: var(--danger-light);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--danger);
  color: var(--danger);
  font-size: var(--fs-ui-md);
}

/* "Bekijk in Rooster" ín zo'n melding: hij hoort bij de tekst, dus erft hij
   haar kleur (en daarmee haar contrast) en is hij alleen aan de onderstreping
   te herkennen als weg. */
.personeel-page .inv-rooster-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* De zwarte strook: de ene volgende stap plus het contact dat erbij hoort. */
.personeel-page .inv-volgende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  padding: 0.8rem 1rem;
  --vt-focus-kleur: var(--vms-white);
}

/* `--text-muted` van `.vt-eyebrow` is tegen de paginakleur gekalibreerd en
   haalt op inkt geen AA (3,3:1): op het zwarte vlak wit. */
.personeel-page .inv-volgende-kop {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  width: 100%;
  color: var(--vms-white);
}

.personeel-page .inv-volgende-label {
  font-size: 1rem;
}

.personeel-page .inv-volgende .vt-knop {
  background: var(--vms-white);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-white);
  color: var(--vms-ink-900);
}

.personeel-page .inv-volgende .vt-knop:hover {
  background: var(--vms-grey-soft);
}

.personeel-page .inv-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-left: auto;
}

.personeel-page .inv-les {
  display: grid;
  gap: 0.2rem;
}

.personeel-page .inv-les p {
  margin: 0;
}

.personeel-page .inv-les-regel {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-weight: var(--fw-subhead);
}

.personeel-page .inv-les-detail,
.personeel-page .inv-les-afwezig,
.personeel-page .inv-les-effectief {
  font-size: var(--fs-ui-md);
}

.personeel-page .inv-kandidaten-blok > h4 {
  margin: 0 0 0.4rem;
  font-size: var(--fs-ui-lg);
}

.personeel-page .inv-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.personeel-page .inv-filter {
  font-size: var(--fs-ui-xs);
}

/* Bellen staat sinds DEC-040 slice 3 als eigen link naast de naam: de naam
   opent de persoonslade, deze link belt. Stil en klein — hij herhaalt de naam
   niet, die staat er direct voor. */
.personeel-page .inv-bel {
  color: var(--text-muted);
  font-size: var(--fs-ui-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.personeel-page .inv-bel:hover,
.personeel-page .inv-bel:focus-visible {
  color: var(--text);
}

/* De naam van de afwezige in het lesblok loopt door in de zin eromheen. */
.personeel-page .inv-afwezig {
  font-size: inherit;
}

.personeel-page .inv-kandidaat-noot {
  font-size: var(--fs-ui-sm);
}

.personeel-page .inv-kandidaat-conflict {
  color: var(--danger);
  font-size: var(--fs-ui-sm);
}

/* "Eén invaller voor de hele dag": de schakelaar boven de kandidaten (of
   onder de informeer-vinkjes), de resultaatregel van een reeks en de hint in
   de lijst. Alleen tekst en een vinkje — geen kleur, geen extra knop. */
.personeel-page .inv-heledag {
  display: grid;
  gap: 0.3rem;
  margin: 0 0 0.6rem;
}

.personeel-page .inv-informeer .inv-heledag {
  flex-basis: 100%;
  margin: 0.3rem 0 0;
}

.personeel-page .inv-heledag-uitleg,
.personeel-page .inv-heledag-resultaat {
  margin: 0;
  font-size: var(--fs-ui-md);
}

.personeel-page .inv-rij-hint {
  color: var(--text-muted);
  font-size: var(--fs-ui-xs);
}

.personeel-page .inv-rij-knop.vt-vlak-zwart .inv-rij-hint {
  color: var(--vms-white);
}

/* Toezeggen is de enige knop met een statuskleur — nooit een leerlijnkleur. */
.personeel-page .inv-toezegging.is-active {
  background: var(--success);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--success);
  color: var(--vms-white);
}

/* "Toch toezeggen" (S2 stap 2): dezelfde knop, gearceerd. De arcering zegt
   "hier stap je over een grens die de server alleen mét bevestiging loslaat";
   alleen inkt en wit, want kleur betekent hier leerlijn of status. */
.personeel-page .inv-toezegging--toch {
  background: repeating-linear-gradient(
    45deg,
    var(--vms-white),
    var(--vms-white) 3px,
    var(--vms-ink-100) 3px,
    var(--vms-ink-100) 6px
  );
}

.personeel-page .inv-toezegging--toch:hover {
  background: var(--vms-ink-100);
}

.personeel-page .inv-verwijder {
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--danger);
  color: var(--danger);
}

.personeel-page .inv-na {
  display: grid;
  gap: 0.5rem;
  padding-top: 0.75rem;
  box-shadow: inset 0 1px 0 0 var(--border-subtle);
}

.personeel-page .inv-notitie {
  display: grid;
  gap: 0.35rem;
  justify-items: start;
}

.personeel-page .inv-notitie-veld {
  width: 100%;
  padding: 0.5rem 0.6rem;
  font: inherit;
}

.personeel-page .inv-reeks-lijst {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  font-size: var(--fs-ui-md);
}

/* Een regel uit de reeks is een knop, maar leest als een link. */
.personeel-page .inv-reeks-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.personeel-page .inv-provenance {
  margin: 0;
  font-size: var(--fs-ui-sm);
}

/* De leerlijnkleur van een ruit. Alleen hier, en alleen op de ruit:
   js/personeel-inval-case.js zet `data-leerlijn` en kent geen hex. */
.personeel-page .inval-scherm .vt-ruit[data-leerlijn='groen'] {
  --vt-ruit-kleur: var(--vms-green);
}

.personeel-page .inval-scherm .vt-ruit[data-leerlijn='gezond'] {
  --vt-ruit-kleur: var(--vms-blue);
}

.personeel-page .inval-scherm .vt-ruit[data-leerlijn='techniek'] {
  --vt-ruit-kleur: var(--vms-red);
}

.personeel-page .inval-scherm .vt-ruit[data-leerlijn='filosofie'] {
  --vt-ruit-kleur: var(--vms-yellow);
}

.personeel-page .inval-scherm .vt-ruit[data-leerlijn='budo'] {
  --vt-ruit-kleur: var(--vms-purple);
}

/* ---- 5. De twee uitklapblokken onder de split -------------- */

.personeel-page .inval-blok-kop {
  margin: 0;
}

.personeel-page .inval-blok-knop {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  min-height: var(--vt-raakvlak);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Het pijltje volgt aria-expanded: één stand, geen tweede bron. */
.personeel-page .inval-blok-knop::after {
  content: '▸';
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--fs-ui-sm);
}

.personeel-page .inval-blok-knop[aria-expanded='true']::after {
  content: '▾';
}

.personeel-page .inval-blok-inhoud[hidden] {
  display: none;
}

.personeel-page .vr-keuze {
  margin-top: 0.5rem;
}

/* ---- 6. Smal scherm: lijst en detail zijn twee lagen ------- */

@media (max-width: 760px) {
  .personeel-page .inval-split {
    grid-template-columns: 1fr;
  }

  .personeel-page .inval-split.toon-detail .inval-lijst {
    display: none;
  }

  .personeel-page .inval-split:not(.toon-detail) .inval-detail {
    display: none;
  }

  .personeel-page .inv-terug {
    display: inline-flex;
  }

  .personeel-page .inval-balk .rs-samenvatting {
    margin-left: 0;
    text-align: left;
  }

  .personeel-page .inval-kop-acties .vt-knop {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ---------- Eén kandidatenlijst met redenen (DEC-046 besluit 4) ----------
   Drie secties onder elkaar: Geschikt · Met kanttekening · Niet aangeboden.
   Zwart-wit chrome; de enige kleur op deze regels blijft de leerlijnruit en
   het rode conflict. De secties zijn tekstkoppen, geen kaarten: de lijst mag
   niet zwaarder gaan wegen dan de case erboven. */
.personeel-page .inv-zoek {
  max-width: 22rem;
  margin-bottom: 0.6rem;
}

.personeel-page .inv-zoek-veld {
  width: 100%;
}

.personeel-page .inv-sectie {
  margin: 0 0 0.6rem;
}

.personeel-page .inv-sectie-kop {
  margin: 0 0 0.3rem;
  font-size: var(--fs-ui-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.personeel-page details.inv-sectie > summary {
  cursor: pointer;
}

.personeel-page .inv-sectie--niet .inv-kandidaat {
  color: var(--text-muted);
}

.personeel-page .inv-kandidaat-reden {
  font-size: var(--fs-ui-sm);
  color: var(--text-muted);
}

/* Het dienstverband als klein etiket bij de naam (DEC-046 besluit 7).
   Loondienst krijgt er geen; de badge is dus altijd een uitzondering. */
.personeel-page .inv-dv {
  padding: 0.05rem 0.4rem;
  background: var(--vms-grey-soft);
  font-size: var(--fs-ui-xs);
  text-transform: lowercase;
}

/* De statusregel van het zoekveld: alles verborgen is een uitkomst, geen
   leeg vlak (review #417). */
.personeel-page .inv-zoek-leeg {
  margin: 0 0 0.6rem;
  font-size: var(--fs-ui-md);
}

/* Acties (DEC-048, slice C): doe-lijst per soort, één handeling rechts. */
.personeel-page .ac-soort {
  margin: 0 0 1rem;
}
.personeel-page .ac-soort-kop {
  margin: 0 0 0.2rem;
  font-size: var(--fs-ui-lg);
}
.personeel-page .ac-soort-uitleg {
  margin: 0 0 0.4rem;
  font-size: var(--fs-ui-md);
}
.personeel-page .ac-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
}
.personeel-page .ac-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--vms-grey, #dcdcdc);
}
.personeel-page .ac-rij-tekst {
  min-width: 0;
}
.personeel-page .ac-rij-waar {
  font-weight: 600;
}
.personeel-page .ac-rij-wanneer,
.personeel-page .ac-rij-toelichting {
  font-size: var(--fs-ui-md);
}
.personeel-page .ac-rij-handeling {
  flex: 0 0 auto;
}

/* Slice K (DEC-048): "Met kanttekening" per hoofdreden, inklapbaar, met
   chips die alleen bestaan als ze iets tellen. Zwart/wit; de groepskop is
   een summary, dus klikbaar. */
.personeel-page .inv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 0.4rem;
}

.personeel-page .inv-chips-status {
  margin: 0 0 0.4rem;
  font-size: var(--fs-ui-sm);
}

.personeel-page .inv-groep {
  margin: 0 0 0.35rem;
  border-left: 2px solid var(--vms-grey-soft);
  padding-left: 0.5rem;
}

.personeel-page .inv-groep-kop {
  cursor: pointer;
  font-size: var(--fs-ui-sm);
  font-weight: 600;
  color: var(--text-muted);
}

/* Compacte rij: naam, badge en reden op één regel; de knoppen eronder. */
.personeel-page .inv-groep .inv-kandidaat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
}

.personeel-page .inv-groep .inv-kandidaat > .rs-knoppen,
.personeel-page .inv-groep .inv-kandidaat > .inv-kandidaat-oplos {
  flex-basis: 100%;
}

/* Uitval melden (slice V1): school → dag → lessen. Zwart/wit zoals de rest
   van de app-chrome; kleur zou hier leerlijn of status betekenen en dit blok
   draagt geen van beide. De lijst is een reeks vinkjes, niet-kiesbare regels
   (al gemeld, of de dag vervalt al) blijven zichtbaar en gedempt. */
.personeel-page .uv-keuze {
  margin-bottom: 0.6rem;
}

.personeel-page .uv-lijst {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
}

.personeel-page .uv-rij {
  padding: 0.3rem 0;
  border-top: 1px solid var(--vms-grey, #dcdcdc);
}

.personeel-page .uv-rij--uit {
  color: var(--text-muted);
}

.personeel-page .uv-les {
  align-items: flex-start;
  gap: 0.5rem;
}

.personeel-page .uv-les-tekst {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
  min-width: 0;
}

.personeel-page .uv-les-wie,
.personeel-page .uv-les-reden {
  font-size: var(--fs-ui-md);
}

.personeel-page .uv-blokkade {
  margin: 0 0 0.6rem;
  font-size: var(--fs-ui-md);
}

.personeel-page .uv-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.personeel-page .inv-rij.inv-ketting-1 {
  margin-inline-start: 0.5rem;
}
.personeel-page .inv-rij.inv-ketting-2 {
  margin-inline-start: 1rem;
}
.personeel-page .inv-rij.inv-ketting-3 {
  margin-inline-start: 1.5rem;
}
.inv-ketting-bron {
  font-weight: 700;
}
/* Invalvoorstellen: één begrensde leesactie, bestaande werkbank voor keuzes. */
.inv-voorstellen {
  box-sizing: border-box;
  width: min(60rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 1.5rem;
  border: 1px solid currentColor;
  border-radius: 0;
  background: #fff;
  color: #111;
}
.inv-voorstellen::backdrop {
  background: rgb(0 0 0 / 40%);
}
.inv-voorstellen-bediening {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-block: 1rem;
}
.inv-voorstellen label {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
}
.inv-voorstellen label[hidden] {
  display: none;
}
.inv-voorstellen-lessen {
  max-height: 18rem;
  overflow: auto;
  margin-block: 1rem;
}
.inv-voorstellen-lessen label {
  padding-block: 0.5rem;
}
.inv-voorstellen-combinatie {
  border-top: 1px solid #bbb;
  margin-top: 1rem;
}
.inv-voorstellen-combinatie li {
  padding-block: 0.5rem;
}
.inv-voorstellen-combinatie button {
  margin-inline-start: 0.5rem;
}