/* ============================================================
   Bestemming Rooster (personeel.html?weergave=rooster) — DEC-039
   ============================================================
   Stijl van het Rooster-scherm: de weekkop met bereik (school | persoon |
   alle scholen), de signaalstrook, de lijst- en rasterweergave, de lade per
   lesmoment en de kalenderstrook. 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 Rooster-scherm zelf nodig heeft.

   Eén afwijking van het voorstel, bewust: dat noemt 7px afschuining voor de
   segmented control. Hier staat `--vt-schuin-s` (9px), de kleinste maat van
   de vormtaal. Een vierde bevelmaat naast de drie bestaande zou de vorm
   verwateren voor een verschil van twee pixels. */

/* ---- Weekkop ------------------------------------------------------------
   Bereik en schoolweek vormen samen de context. De leesvorm en overige
   bediening volgen op een eigen regel; Beeld groepeert de extra keuzes. */
.personeel-page .rs-kop {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.85rem;
  margin-bottom: 0.6rem;
  box-shadow: inset 0 -1px 0 0 var(--border);
}

.personeel-page .rs-kop-week,
.personeel-page .rs-kop-bereik,
.personeel-page .rs-kop-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.personeel-page .rs-kop-menu {
  position: relative;
  margin-left: auto;
}

.personeel-page .rs-bediening,
.personeel-page .rs-vormen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
}

.personeel-page .rs-bediening {
  margin-bottom: 0.85rem;
}

.personeel-page .rs-beeld {
  flex: 1 1 auto;
  min-width: 0;
}

.personeel-page .rs-beeld > summary {
  width: fit-content;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: var(--fw-subhead);
  cursor: pointer;
}

.personeel-page .rs-beeld > summary:hover {
  background: var(--vms-ink-50);
}

.personeel-page .rs-beeld > summary:focus-visible {
  outline: 2px solid var(--vms-ink-900);
  outline-offset: 2px;
}

.personeel-page .rs-beeld-inhoud {
  display: grid;
  gap: 0.5rem;
  padding: 0.8rem;
  margin-top: 0.3rem;
  background: var(--card);
  border: 1px solid var(--border);
}

.personeel-page .rs-beeld-label {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.personeel-page .rs-kop .rs-week-label {
  min-width: 13rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: var(--fw-subhead);
  text-align: center;
}

/* De drie kleine kopknoppen (‹ › Deze week, Week …): wit vlak met een
   inkt-haarlijn als inset-schaduw, afgeschuind linksboven/rechtsonder. */
.personeel-page .rs-week-knop,
.personeel-page .rs-week-nu,
.personeel-page .rs-segment-knop {
  min-height: 44px;
  padding: 0.35rem 0.75rem;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: var(--fw-subhead);
  line-height: 1.4;
  background: var(--card);
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
  clip-path: polygon(
    var(--vt-schuin-s) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-s)),
    calc(100% - var(--vt-schuin-s)) 100%,
    0 100%,
    0 var(--vt-schuin-s)
  );
  cursor: pointer;
}

.personeel-page .rs-week-knop {
  min-width: 44px;
  font-size: 1.1rem;
}

.personeel-page .rs-week-knop:hover,
.personeel-page .rs-week-nu:hover,
.personeel-page .rs-segment-knop:hover {
  background: var(--vms-ink-50);
}

/* Ongedaan maken / opnieuw: zichtbaar zolang de school bewerkbaar is, maar
   uitgeschakeld zodra er niets terug te draaien valt. Uitgeschakeld hoort
   stiller te zijn dan aan — niet onzichtbaar, want de knop zegt óók iets
   als hij niet kan: er is nog niets gebeurd. `pointer-events: none` houdt de
   hover weg zonder de knop uit de tabvolgorde te halen (dat doet `disabled`
   zelf al). */
.personeel-page .rs-week-knop:disabled {
  color: var(--text-muted);
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
}

/* Segmented control: actief is zwart gevuld, inactief wit met haarlijn. */
.personeel-page .rs-segment {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.personeel-page .rs-segment-knop[aria-pressed='true'] {
  color: var(--vms-white);
  background: var(--vms-ink-900);
}

.personeel-page .rs-kop-select {
  min-height: 44px;
  max-width: 15rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.88rem;
  border-radius: 0;
}

/* ---- Week-menu ---------------------------------------------------------- */
.personeel-page .rs-menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 15rem;
  padding: 0.3rem;
  background: var(--card);
  box-shadow:
    inset 0 0 0 var(--vt-lijn) var(--vms-ink-900),
    var(--shadow-md);
}

.personeel-page .rs-menu-item {
  padding: 0.45rem 0.6rem;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.88rem;
  text-align: left;
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.personeel-page .rs-menu-item:hover,
.personeel-page .rs-menu-item:focus-visible {
  background: var(--vms-ink-50);
}

/* ---- Signaalstrook ------------------------------------------------------
   Chips die tellen én filteren. De ruit draagt de statuskleur; de chip zelf
   blijft wit zolang hij uit staat, zodat een strook met vijf chips geen
   kleurenwaaier wordt. */
.personeel-page .rs-strook {
  margin-bottom: 0.7rem;
}

.personeel-page .rs-persoonsbotsingen {
  padding: 0.9rem;
  margin: 0.65rem 0;
  border: 1px solid var(--border);
  border-left: 3px solid var(--vms-ink-900);
  background: var(--card);
}

.personeel-page .rs-persoonsbotsingen h3,
.personeel-page .rs-botsing-lijst p {
  margin: 0 0 0.35rem;
}

.personeel-page .rs-botsing-uitleg {
  margin: 0.35rem 0 0.75rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.personeel-page .rs-botsing-lijst {
  padding: 0;
  margin: 0;
  list-style: none;
}

.personeel-page .rs-botsing-lijst > li + li {
  padding-top: 0.65rem;
  margin-top: 0.65rem;
  border-top: 1px solid var(--border);
}

.personeel-page .rs-botsing-lessen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}

.personeel-page .rs-persoonsbotsingen button {
  min-height: 44px;
  white-space: normal;
  text-align: left;
}

/* Een eigen hoek voor het signaal: ook een kwartierblok houdt zijn echte
   hoogte, terwijl de melding via de naam van het pictogram leesbaar blijft. */
.personeel-page .mw-blok--raster:has(.mw-blok-botsing) .mw-blok-meta {
  padding-right: 18px;
}

.personeel-page .mw-blok-botsing {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  color: var(--text);
  font-size: var(--fs-ui-xs);
  line-height: 1;
  font-weight: var(--fw-subhead);
  background: var(--card);
  border: 1px solid currentColor;
}

.personeel-page .rs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.personeel-page .rs-chip {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.3rem 0.6rem;
  color: var(--text);
  font-size: 0.82rem;
  background: var(--card);
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--border);
  clip-path: polygon(
    var(--vt-schuin-s) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-s)),
    calc(100% - var(--vt-schuin-s)) 100%,
    0 100%,
    0 var(--vt-schuin-s)
  );
}

.personeel-page button.rs-chip {
  min-height: var(--vt-raakvlak-klein);
  cursor: pointer;
}

.personeel-page .rs-chip.is-aan {
  color: var(--vms-white);
  background: var(--vms-ink-900);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
}

.personeel-page .rs-chip-ruit {
  width: 9px;
  height: 9px;
  background: var(--text-muted);
  transform: rotate(45deg) scale(0.8);
}

.personeel-page .rs-chip--mis .rs-chip-ruit {
  background: var(--danger);
}

.personeel-page .rs-chip--let-op .rs-chip-ruit {
  background: var(--warning);
}

.personeel-page .rs-chip--ok .rs-chip-ruit {
  background: var(--success);
}

.personeel-page .rs-chip--neutraal .rs-chip-ruit {
  background: var(--vms-ink-900);
}

.personeel-page .rs-chip--rustig,
.personeel-page .rs-chip--onbekend {
  color: var(--text-muted);
}

/* In een afgesloten week staan er geen chips: die zouden de stand van nu
   tonen boven een gearchiveerde tabel. Eén stille regel op de plek van de
   chips — geen chipvorm, want er valt niets te tellen of te filteren. */
.personeel-page .rs-strook-stil {
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* De handelingen bij een eindstand (DEC-057): een knoppenrij onder de
   archiefbanner, en daaronder — uitgeklapt — de revisiegeschiedenis van de
   week. Zwart-wit app-chrome; de correctiestand is een tekstbanner, geen
   alarmkleur. */
.personeel-page .rs-archief-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: -0.2rem 0 0.6rem;
}

/* De laad- en foutregel van de geschiedenis hoort op dezelfde plek als de
   lijst die zij vervangt: onder de knoppenrij, niet ernaast. */
.personeel-page .rs-archief-revisies-status {
  flex-basis: 100%;
  margin: 0.2rem 0 0;
}

.personeel-page .rs-archief-revisies {
  flex-basis: 100%;
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}

.personeel-page .rs-archief-revisies li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-top: 1px solid var(--vms-grey);
}

.personeel-page .rs-archief-revisie-reden {
  color: var(--text-muted);
}

/* De kalenderregels van deze week en de uitgeklapte rasterbevindingen:
   tekst onder de chips, geen tabel. */
.personeel-page .rs-kalenderregels {
  margin: 0.45rem 0 0;
  color: var(--text);
  font-size: 0.82rem;
}

.personeel-page .rs-bevindingen {
  margin: 0.45rem 0 0;
  padding-left: 1.1rem;
  color: var(--text);
  font-size: 0.82rem;
}

.personeel-page .rs-bevindingen li {
  margin-bottom: 0.15rem;
}

/* Wat een signaal is en hoe je het oplost (feedbackronde 2026-08-30). Eén
   regel onder de chips zodra er gefilterd wordt, en boven een uitgeklapte
   bevindingenlijst. Bewust `--text` en niet `--text-muted`: het is de zin die
   het getal ernaast betekenis geeft, geen voetnoot. */
.personeel-page .rs-uitleg {
  margin: 0.45rem 0 0;
  max-width: 68ch;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.45;
}

.personeel-page .rs-uitleg-link {
  margin-left: 0.35rem;
  color: var(--text);
}

/* De rij "Wees: De Hef 1 · Jacobus 2" onder de chips: buiten het bereik
   School telt een chip over alle scholen, deze knoppen wijzen ze aan. */
.personeel-page .rs-navrij {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: baseline;
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
}

.personeel-page .rs-navrij-kop {
  color: var(--text-muted);
}

/* Een tekstknop in de strook of in een bevindingsregel loopt mee met de
   tekst; hij is geen actie die iets weggooit, dus geen rode hover. */
.personeel-page .rs-navknop,
.personeel-page .rs-bevindingknop {
  color: var(--text);
}

.personeel-page .rs-navknop:hover,
.personeel-page .rs-bevindingknop:hover {
  color: var(--text);
}

.personeel-page .rs-bevindingknop {
  margin-left: 0.4rem;
}

/* De uitleg boven een wees-lade, met "Opnieuw koppelen" eronder. */
.personeel-page .rs-lade-uitleg {
  margin-bottom: 0.6rem;
  padding-bottom: 0.6rem;
  box-shadow: inset 0 calc(-1 * var(--vt-lijn)) 0 var(--border);
}

.personeel-page .rs-lade-uitleg .rs-uitleg {
  margin-top: 0;
}

/* ---- Lijst --------------------------------------------------------------
   Eén regel per lesmoment. Tijden in tabular-nums, zodat de kolom uitlijnt. */
.personeel-page .rs-table td,
.personeel-page .rs-table th {
  vertical-align: middle;
}

.personeel-page .rs-table td:nth-child(2) {
  font-variant-numeric: tabular-nums;
}

.personeel-page .rs-rij:hover td {
  background: var(--vms-ink-50);
}

.personeel-page .rs-rij.is-open td {
  background: var(--vms-ink-50);
  box-shadow: inset 0 2px 0 0 var(--vms-ink-900);
}

.personeel-page .rs-naam {
  font-weight: var(--fw-subhead);
}

/* Een lege vakdocentplek is rood: dit is de les waarvoor vandaag niemand
   gestuurd kan worden. Rood is hier status, nooit een leerlijnkleur. */
.personeel-page .rs-nog-niemand {
  color: var(--danger);
  font-weight: var(--fw-subhead);
}

/* Een dag die door de kalender vervalt: één doorgestreepte regel in plaats
   van al zijn lessen. */
.personeel-page .rs-vervallen-rij td {
  color: var(--text-muted);
  text-decoration: line-through;
  background: var(--warning-light);
}

/* Eén les die door een lesregel (uitval per les) vervalt: de rij blijft
   staan, doorgestreept, met de reden onder de dag. */
.personeel-page .rs-vervallen-les td {
  color: var(--text-muted);
  text-decoration: line-through;
}

.personeel-page .rs-vervallen-les .rs-vervalt {
  text-decoration: none;
}

/* De twee knoppen rechts op een regel: ⓘ (notitie) en ⋯ (lade). */
.personeel-page .rs-acties-cel {
  width: 1%;
  white-space: nowrap;
}

.personeel-page .rs-icoonknop {
  min-width: 1.9rem;
  padding: 0.15rem 0.35rem;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.3;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.personeel-page .rs-icoonknop:hover,
.personeel-page .rs-icoonknop.is-open {
  color: var(--text);
  background: var(--vms-ink-100);
}

/* ---- Lade ---------------------------------------------------------------
   Inline onder de rij: geen modal, dus geen focustrap. Inkt-haarlijn als
   inset-schaduw en dezelfde afschuining als de kaarten. */
.personeel-page .rs-lade-rij > td {
  padding: 0 0 0.6rem;
  background: var(--vms-ink-50);
}

.personeel-page .rs-lade {
  padding: 0.8rem 0.9rem;
  background: var(--card);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
  clip-path: polygon(
    var(--vt-schuin-m) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-m)),
    calc(100% - var(--vt-schuin-m)) 100%,
    0 100%,
    0 var(--vt-schuin-m)
  );
}

.personeel-page .rs-lade:focus-visible {
  outline: 2px solid var(--vms-ink-900);
  outline-offset: 2px;
}

.personeel-page .rs-lade-kop {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.personeel-page .rs-lade-kop h3 {
  margin: 0;
}

.personeel-page .rs-lade-kop-regel {
  margin: 0.7rem 0 0.25rem;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: var(--fw-subhead);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.personeel-page .rs-lade-toewijzing {
  padding: 0.5rem 0;
  box-shadow: inset 0 -1px 0 0 var(--border-subtle);
}

.personeel-page .rs-lade-persoon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  align-items: center;
}

.personeel-page .rs-lade-notitie {
  max-width: 46rem;
  margin: 0.35rem 0;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.personeel-page .rs-lade-knoppen,
.personeel-page .rs-lade-leeg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.4rem;
}

/* X5: de uitleg onder de opslaanknoppen als een onbeantwoorde schrijving ze
   uitzet; hij staat op een eigen regel onder de knoppenrij. */
.personeel-page .rs-lm-knop-uitleg {
  flex-basis: 100%;
  margin: 0.15rem 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.personeel-page .rs-lade-voet {
  margin-top: 0.7rem;
}

.personeel-page .rs-lade-link {
  font-size: 0.84rem;
}

.personeel-page .rs-school-week,
.personeel-page #rsSchoolLadeHost {
  margin-top: 0.75rem;
}

.personeel-page .rs-school-lade {
  padding: 1rem;
}

.personeel-page .rs-duo-helft-keuze {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.personeel-page .rs-duo-helft-keuze .vt-label {
  margin: 0;
}

.personeel-page .rs-duo-helft[aria-pressed='true'] {
  background: var(--vms-ink-900);
  color: var(--vms-white);
}

.personeel-page .rs-lm-feitenblok {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.personeel-page .rs-school-lade-tabs {
  display: flex;
  gap: 0;
  margin: 0.8rem 0 0;
  border-bottom: var(--vt-lijn-dik) solid var(--vms-ink-900);
}

.personeel-page .rs-school-lade-tab {
  appearance: none;
  min-height: var(--vt-raakvlak);
  border: var(--vt-lijn) solid var(--vms-ink-900);
  border-bottom: 0;
  padding: 0.55rem 0.8rem;
  background: var(--card);
  color: var(--text);
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  cursor: pointer;
}

.personeel-page .rs-school-lade-tab + .rs-school-lade-tab {
  border-left: 0;
}

.personeel-page .rs-school-lade-tab[aria-selected='true'] {
  background: var(--vms-ink-900);
  color: var(--vms-white);
}

.personeel-page .rs-school-lade-paneel {
  padding: 0.2rem 0 0;
}

.personeel-page .rs-school-lade-archiefvelden {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.35rem 0.8rem;
  margin: 0.8rem 0 0;
}

.personeel-page .rs-school-lade-archiefvelden dt {
  color: var(--text-muted);
  font-family: var(--font-label);
}

.personeel-page .rs-school-lade-archiefvelden dd {
  margin: 0;
}

/* Verwijderen staat stil onderin de lade, niet rood op elke rij. */
.personeel-page .rs-lade-stil {
  margin-top: 0.5rem;
}

.personeel-page .rs-tekstknop {
  padding: 0;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.82rem;
  text-decoration: underline;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.personeel-page .rs-tekstknop:hover {
  color: var(--danger);
}

/* ---- Naam als knop ------------------------------------------------------
   Eén klik op een medewerker doet overal hetzelfde: zijn persoonslade onder
   Mensen (DEC-040 besluit 7). De naam blijft eruitzien als een naam en toont
   pas bij hover/focus dat hij ergens heen gaat. */
.personeel-page .rs-persoon-knop {
  display: inline-flex;
  align-items: center;
  min-height: var(--vt-raakvlak-klein);
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: var(--fw-subhead);
  text-align: left;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.personeel-page .rs-persoon-knop:hover,
.personeel-page .rs-persoon-knop:focus-visible {
  text-decoration: underline;
}

/* ---- Leerlijnschakelaars ------------------------------------------------
   Welke leerlijnen deze school draait (`ll_<leerlijn>`, sinds DEC-040 een
   roosterveld). Een uitgezette leerlijn draagt haar kleur alleen in de ruit;
   de ingedrukte stand is inkt, want "aan/uit" is geen leerlijnbetekenis. */
.personeel-page .rs-leerlijnen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: 0 0 0.7rem;
}

.personeel-page .rs-ll-kop {
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: var(--fw-subhead);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.personeel-page .rs-ll-knop {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  min-height: var(--vt-raakvlak-klein);
  padding: 0.2rem 0.55rem;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.82rem;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--border);
  cursor: pointer;
}

.personeel-page .rs-ll-knop.is-aan {
  color: var(--text);
  background: var(--vms-ink-50);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
}

.personeel-page .rs-ll-knop:focus-visible {
  outline: 2px solid var(--vms-ink-900);
  outline-offset: 2px;
}

/* Een uitgezette leerlijn houdt haar ruit, maar leeg: de kleur zegt wélke
   leerlijn het is, de vulling of ze draait. */
.personeel-page .rs-ll-knop:not(.is-aan) .vms-dot {
  background: transparent;
  box-shadow: inset 0 0 0 var(--vt-lijn) currentcolor;
}

/* De zin onder de leerlijnknoppen. Zij schrijven de schoolblob; de
   weergaveschakelaars in de strook doen dat juist niet, en zonder deze zin
   staan er twee rijen knoppen die er hetzelfde uitzien en iets anders doen. */
.personeel-page .rs-ll-uitleg {
  flex-basis: 100%;
  margin: 0.1rem 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* SLIM-schakelrijtje (DEC-048 slice D): zelfde vorm als de leerlijnknoppen,
   maar zwart-wit — een dienst draagt geen leerlijn, dus geen kleurstip. */
.personeel-page .rs-slim-knop .rs-slim-tijd {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: 0.74rem;
}

.personeel-page .rs-slim-knop.is-aan .rs-slim-tijd {
  color: var(--text);
}

/* ---- Weergaveschakelaars (S6) -------------------------------------------
   Extern tonen · Duo's samenvoegen · Ook lessen van de andere week. Zelfde
   vorm als de leerlijnknoppen — het zijn allebei aan/uit-knoppen — maar ze
   staan onder Beeld en schrijven niets. De uitleg over verborgen lessen
   blijft bij de signaalstrook zichtbaar. */
.personeel-page .rs-weergave {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.45rem;
}

.personeel-page .rs-weergave-knop {
  min-height: 44px;
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.2rem 0.55rem;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.82rem;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--border);
  cursor: pointer;
}

.personeel-page .rs-weergave-knop.is-aan {
  color: var(--text);
  background: var(--vms-ink-50);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
}

.personeel-page .rs-weergave-knop:focus-visible {
  outline: 2px solid var(--vms-ink-900);
  outline-offset: 2px;
}

.personeel-page .rs-weergave-uitleg {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* De noot naast de indelingsknoppen: alleen zichtbaar in de weekvorm, waar
   Per leerlijn en Per docent de lijst openen in plaats van het raster te
   herindelen. */
.personeel-page .rs-indeling-noot {
  flex-basis: 100%;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* ---- Sorteerbare kolomkoppen (S6) ---------------------------------------
   De kop is een knop; `aria-sort` staat op de kolom zelf. De pijl is
   decoratie en draagt daarom `aria-hidden`. */
.personeel-page .rs-kolomkop {
  padding: 0;
}

.personeel-page .rs-sorteerknop {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  width: 100%;
  padding: 0.4rem 0.5rem;
  color: inherit;
  font: inherit;
  /* Formulierbesturing erft letterafstand en kapitalen niet vanzelf (de
     UA-regels zetten ze terug op `initial`); zonder deze twee zou de ene
     kolomkop in kapitalen staan en de andere niet. */
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.personeel-page .rs-sorteerknop:hover {
  background: var(--vms-ink-50);
}

.personeel-page .rs-sorteerknop:focus-visible {
  outline: 2px solid var(--vms-ink-900);
  outline-offset: -2px;
}

.personeel-page .rs-sorteerknop.is-aan {
  text-decoration: underline;
}

/* De richtingdriehoek komt uit `aria-sort` op de kolom: één bron voor de
   stand, en een vorm in plaats van een teken dat voorgelezen zou worden. */
.personeel-page .rs-kolomkop[aria-sort='ascending'] .rs-sorteerknop::after,
.personeel-page .rs-kolomkop[aria-sort='descending'] .rs-sorteerknop::after {
  width: 0;
  height: 0;
  border-right: 0.3em solid transparent;
  border-left: 0.3em solid transparent;
  content: '';
}

.personeel-page .rs-kolomkop[aria-sort='ascending'] .rs-sorteerknop::after {
  border-bottom: 0.34em solid currentcolor;
}

.personeel-page .rs-kolomkop[aria-sort='descending'] .rs-sorteerknop::after {
  border-top: 0.34em solid currentcolor;
}

/* ---- Secties in de ingedeelde lijst (S6) --------------------------------
   Per leerlijn of per docent krijgt de lijst tussenkoppen. Een `td` over de
   volle breedte en geen `th`: dit is een kop tússen de rijen, geen kolomkop
   met eigen datacellen. */
.personeel-page .rs-sectie-rij td {
  padding-top: 0.7rem;
  background: var(--vms-ink-50);
  box-shadow: inset 0 1px 0 0 var(--vms-ink-900);
}

.personeel-page .rs-sectie-rij:hover td {
  background: var(--vms-ink-50);
}

.personeel-page .rs-sectie-cel {
  display: table-cell;
  gap: 0.4rem;
}

.personeel-page .rs-sectie-titel {
  margin-left: 0.35rem;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: var(--fw-subhead);
}

.personeel-page .rs-sectie-aantal {
  margin-left: 0.5rem;
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* ---- Lesmoment in de lade -----------------------------------------------
   De feiten van het lesmoment plus de drie handelingen die sinds DEC-040 van
   de planner zijn, en het inline formulier dat ze vervangt. */
.personeel-page .rs-lm {
  padding-bottom: 0.5rem;
  box-shadow: inset 0 -1px 0 0 var(--border-subtle);
}

.personeel-page .rs-lm-feiten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  align-items: center;
}

.personeel-page .rs-lm-tijd {
  font-family: var(--font-heading);
  font-weight: var(--fw-subhead);
  font-variant-numeric: tabular-nums;
}

.personeel-page .rs-lm-form {
  padding-bottom: 0.6rem;
  box-shadow: inset 0 -1px 0 0 var(--border-subtle);
}

/* "Terug naar mijn werk" (X3): de weg terug naar het Rooster-scherm, zichtbaar
   op de andere bestemmingen van deze pagina. App-chrome, dus zwart-wit. */
.personeel-page .hervat-balk {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--card);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
}

.personeel-page .hervat-tekst {
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: var(--fw-subhead);
}

/* De weekkiezer (X3): dezelfde hoogte en haarlijn als de kopknoppen ernaast,
   zodat ‹ › "Deze week" en het datumveld één groep blijven. */
.personeel-page .rs-week-datum {
  min-height: 44px;
  padding: 0.35rem 0.5rem;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.86rem;
  background: var(--card);
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
}

/* Een regel met een niet-opgeslagen formulier eronder (X3). Zwart-wit: dit
   is app-chrome, geen leerlijn en geen status van de les zelf. */
.personeel-page .rs-concept-markering {
  display: block;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: var(--fw-subhead);
  text-transform: lowercase;
}

.personeel-page .rs-heeft-concept td:first-child {
  box-shadow: inset 3px 0 0 0 var(--vms-ink-900);
}

/* De mededeling over een teruggehaald concept: context, geen fout — dus
   stiller dan `rs-lm-fout` en zonder alarmkleur. */
.personeel-page .rs-lm-melding {
  margin: 0.4rem 0;
  padding: 0.35rem 0.5rem;
  color: var(--text);
  font-size: 0.84rem;
  background: var(--vms-ink-50);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
}

/* De foutregel van het formulier: dezelfde stem als `rsError`, maar ín de
   lade waar de ingevulde waarden staan. */
.personeel-page .rs-lm-fout {
  margin: 0.4rem 0;
  padding: 0.35rem 0.5rem;
  color: var(--danger);
  font-size: 0.84rem;
  background: var(--danger-light);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--danger);
}

.personeel-page .rs-lm-velden {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  align-items: flex-end;
  margin-top: 0.5rem;
}

.personeel-page .rs-lm-veld {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.personeel-page .rs-lm-breed {
  flex: 1 1 16rem;
}

.personeel-page .rs-lm-label {
  color: var(--text-muted);
  font-size: 0.76rem;
}

.personeel-page .rs-lm-input,
.personeel-page .rs-lm-select {
  padding: 0.25rem 0.4rem;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.86rem;
  background: var(--card);
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--border);
}

.personeel-page .rs-lm-input:focus-visible,
.personeel-page .rs-lm-select:focus-visible {
  outline: 2px solid var(--vms-ink-900);
  outline-offset: 1px;
}

/* De blok-omschrijving met haar uitleg of melding eronder. Die tekst staat
   buiten het label: hij beschrijft het veld (`aria-describedby`) en hoort
   niet in zijn naam. */
.personeel-page .rs-lm-blok {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.personeel-page .rs-lm-duo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  align-items: flex-end;
  margin-top: 0.5rem;
}

/* ---- Tijdbereik (S1, idee A) --------------------------------------------
   Eén keuze bovenin de lade die voor élke handeling geldt: bewerken,
   verwijderen en toevoegen lezen hem allemaal. Hij staat altijd open — dat
   was precies het probleem van M1-01: de planner ontdekte pas ná het
   opslaan dat een tijdwijziging ook oudere weken raakte. */
.personeel-page .rs-bereik {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  align-items: baseline;
  margin: 0.5rem 0;
  padding: 0.45rem 0.5rem;
  background: var(--vms-ink-50);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--border);
}

.personeel-page .rs-bereik-kop {
  flex: none;
  color: var(--text-muted);
}

.personeel-page .rs-bereik-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.personeel-page .rs-bereik-knop {
  padding: 0.2rem 0.55rem;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.82rem;
  background: var(--card);
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--border);
  cursor: pointer;
}

.personeel-page .rs-bereik-knop + .rs-bereik-knop {
  margin-left: -1px;
}

/* Zwart-wit: de gekozen stand is inkt, niet een leerlijnkleur. */
.personeel-page .rs-bereik-knop.is-gekozen {
  color: var(--vms-white);
  font-weight: 700;
  background: var(--vms-ink-900);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
}

.personeel-page .rs-bereik-knop:focus-visible {
  outline: 2px solid var(--vms-ink-900);
  outline-offset: 1px;
}

.personeel-page .rs-bereik-uitleg {
  flex: 1 1 100%;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* ---- X5: les met docent in één formulier --------------------------------
   Het docentblok hoort bij hetzelfde formulier en leest als één handeling:
   geen kader eromheen, wel een lijn erboven zodat duidelijk is waar de
   lesvelden ophouden. Zwart-wit, want dit is app-chrome; kleur blijft voor
   leerlijn en status. */
.personeel-page .rs-lm-kop {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.personeel-page .rs-lm-docenten {
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  box-shadow: inset 0 1px 0 0 var(--border-subtle);
}

.personeel-page .rs-lm-ingangsweek,
.personeel-page .rs-lm-rol-uitleg {
  margin: 0.15rem 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.personeel-page .rs-lm-rol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  align-items: flex-end;
  margin-top: 0.4rem;
}

.personeel-page .rs-lm-rol .rs-lm-select {
  min-width: 14rem;
  max-width: 100%;
}

.personeel-page .rs-lm-grens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  flex: 1 1 100%;
}

.personeel-page .rs-lm-grens-reden {
  color: var(--text);
  font-size: 0.82rem;
}

/* Het voorbeeld bij een periodewijziging (§3.1 punt 3). */
.personeel-page .rs-lm-voorbeeld {
  margin-top: 0.6rem;
}

.personeel-page .rs-lm-voorbeeld-lijst {
  margin: 0.2rem 0;
  padding-left: 1.1rem;
  font-size: 0.84rem;
}

.personeel-page .rs-lm-voorbeeld-regel {
  margin: 0.15rem 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* De uitkomst van de laatste schrijfreeks. Een geweigerde opdracht is een
   status en mag dus kleur dragen; de rest blijft grijstinten. */
.personeel-page .rs-lm-uitkomst {
  margin: 0.4rem 0;
  padding: 0.4rem 0.5rem;
  background: var(--vms-ink-50);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
}

.personeel-page .rs-lm-uitkomst-lijst {
  margin: 0.2rem 0 0.4rem;
  padding: 0;
  list-style: none;
}

.personeel-page .rs-lm-uitkomst-regel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  align-items: baseline;
  padding: 0.2rem 0;
  font-size: 0.84rem;
}

.personeel-page .rs-lm-uitkomst-regel--geweigerd .rs-lm-uitkomst-doel,
.personeel-page .rs-lm-uitkomst-regel--geweigerd .rs-lm-uitkomst-reden {
  color: var(--danger);
}

.personeel-page .rs-lm-uitkomst-reden {
  color: var(--text-muted);
}

/* Een regel waarvan de laatste reeks niet rond kwam: dezelfde stille
   markering als een niet-opgeslagen concept, maar in de statuskleur. */
.personeel-page .rs-uitkomst-markering {
  display: block;
  color: var(--danger);
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: var(--fw-subhead);
  text-transform: lowercase;
}

.personeel-page .rs-halve-uitkomst td:first-child {
  box-shadow: inset 3px 0 0 0 var(--danger);
}

/* ---- Tijdlijn van een lesmoment met versies (S1) ------------------------
   "t/m wk 40: ma 10:00–11:00 · vanaf wk 41: ma 13:00–14:00". Eén regel per
   periode, met per regel Bewerken en Versie verwijderen. */
.personeel-page .rs-tijdlijn {
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  box-shadow: inset 0 1px 0 0 var(--border-subtle);
}

.personeel-page .rs-tijdlijn-lijst {
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
}

.personeel-page .rs-tijdlijn-regel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.35rem 0;
  box-shadow: inset 0 -1px 0 0 var(--border-subtle);
}

.personeel-page .rs-tijdlijn-tekst {
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

/* ---- Alternerend paar maken (S1) ---------------------------------------- */
.personeel-page .rs-lm-paar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  align-items: flex-end;
  margin-top: 0.6rem;
}

/* ---- Kalenderlade ------------------------------------------------------- */
.personeel-page .rs-kalender-lade {
  margin-top: 1rem;
}

/* Wijzigingen houdt de vorige roosterstanden, het verschil en de
   herstelhandeling bij elkaar. */
.personeel-page .rs-wijzig-lade {
  margin-top: 1rem;
}

.personeel-page .rs-wijzig-rij {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  align-items: baseline;
  padding: 0.35rem 0;
  box-shadow: inset 0 -1px 0 0 var(--border);
}

.personeel-page .rs-wijzig-tekst {
  flex: 1 1 auto;
}

.personeel-page .rs-wijzig-diff {
  flex: 1 0 100%;
  margin: 0.2rem 0 0.2rem;
  font-size: 0.9rem;
}

.personeel-page .rs-wijzig-diff-kop {
  margin: 0 0 0.2rem;
}

.personeel-page .rs-wijzig-regels {
  margin: 0;
  padding-left: 1.2rem;
}

/* ---- Mobiel -------------------------------------------------------------
   De planner werkt 's ochtends op de telefoon: de kop wrapt naar drie regels
   en de lijst wordt kaartjes per lesmoment (de kolomkoppen vervallen, elke
   cel krijgt zijn eigen regel). */
@media (max-width: 760px) {
  .personeel-page .rs-kop {
    flex-direction: column;
    align-items: stretch;
  }

  .personeel-page .rs-kop-week,
  .personeel-page .rs-kop-bereik,
  .personeel-page .rs-kop-menu {
    justify-content: flex-start;
  }

  .personeel-page .rs-kop-week {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px 4.2rem;
    align-items: center;
  }

  .personeel-page #rsDezeWeek {
    padding: 0.35rem;
    white-space: normal;
  }

  .personeel-page .rs-beeld[open] {
    flex-basis: 100%;
  }

  .personeel-page .rs-kop .rs-week-label {
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
  }

  .personeel-page .rs-kop-select {
    max-width: none;
    flex: 1 1 100%;
  }

  .personeel-page .rs-menu {
    right: 0;
    left: auto;
  }

  .personeel-page .rs-table thead {
    display: none;
  }

  .personeel-page .rs-table,
  .personeel-page .rs-table tbody,
  .personeel-page .rs-table tr,
  .personeel-page .rs-table td {
    display: block;
    width: auto;
  }

  .personeel-page .rs-table tr {
    padding: 0.5rem 0;
    box-shadow: inset 0 -1px 0 0 var(--border);
  }

  .personeel-page .rs-table td {
    padding: 0.15rem 0;
    border: none;
  }

  /* De actiecel is op mobiel geen smalle kolom meer maar een eigen regel:
     ⓘ en ⋯ moeten een raakvlak houden dat je met een duim raakt. */
  .personeel-page .rs-acties-cel {
    display: flex;
    gap: 0.3rem;
    width: auto;
    padding-top: 0.3rem;
  }

  .personeel-page .rs-icoonknop {
    min-width: var(--vt-raakvlak);
    min-height: var(--vt-raakvlak);
  }

  .personeel-page .rs-lade-rij > td {
    padding: 0.4rem 0;
  }
}

/* ============================================================
   Bereik Persoon, vorm Week — het gedeelde weekraster
   ============================================================
   De tekening zelf staat in weekraster.css (js/weekraster.js),
   dezelfde als op "Mijn week": de planner ziet exact wat de
   persoon zelf ziet. Daar toont de pagina hem alleen op
   >=1100px, want daar is de weekstrip de mobiele vorm. Hier is
   er geen strip, dus staat het raster op élke breedte. Onder 1100px
   houdt de wrapper zijn horizontale scroller, zodat de pagina zelf
   nooit zijwaarts schuift. 900px is de breedte waarop vijf
   dagkolommen nog een groepsnaam en een tijd naast elkaar dragen. */

.personeel-page .rs-persoon-week {
  overflow-x: auto;
  margin-top: 0.75rem;
}

.personeel-page .rs-persoon-week .mw-raster {
  min-width: 900px;
}

/* Onder 1100px is de wrapper hierboven een horizontale scroller, en daarmee
   ook het scrollvlak waaraan de sticky dagkop hangt. Laat het raster daar dus
   zijn eigen verticale scrollvlak houden: zonder verticale reikwijdte in dat
   vlak blijft de dagkop nergens staan en scrolt hij met de lessen mee weg
   (Codex-review #406). De grens is ruim genoeg gekozen dat een gewone dag op
   0,8px/min er heel in past — bij een venster van 744px is dit 522px tegen
   ongeveer 511px dag — zodat dit vlak alleen op een écht laag venster nog
   scrollt, precies wanneer een meelopende dagkop iets waard is. Boven 1100px
   neemt de media query onderaan dit weer terug: daar scrolt de pagina. */
@media screen and (max-width: 1099.98px) {
  .personeel-page .rs-persoon-week .mw-raster {
    max-height: max(320px, calc(100dvh - var(--app-bar-h, 71.6px) - 150px));
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.personeel-page .rs-persoon-week .rs-week-melding {
  margin: 0;
  color: var(--text-muted);
}

@media screen and (min-width: 1100px) {
  /* Vanaf deze breedte is het kaartvlak ruimer dan de 900px-rastervloer.
     Laat de wrapper daarom geen impliciete verticale scrollcontainer zijn:
     anders bindt overflow-x:auto de sticky kop aan een scrollport zonder
     verticale range. Het raster scrolt met de pagina; zijn kop blijft onder
     de sticky app-balk staan. Sinds het raster ook op de normale as niet
     meer afknot (weekraster.css, 2026-09-02) geldt dat voor elke as, niet
     alleen de uitgebreide — anders schuift de dagkop van een gewone week
     onder de app-balk door. De smalle horizontale scroller hierboven en de
     afzonderlijke printregels hieronder blijven ongewijzigd. */
  .personeel-page .rs-persoon-week {
    overflow: visible;
  }

  .personeel-page .rs-persoon-week .mw-raster-koppen {
    top: var(--app-bar-h, 71.6px);
  }
}

/* Overlapbanen groeien met het aantal gelijktijdige lessen. Ook op een
   brede pagina blijft uitzonderlijke drukte binnen het rooster. De kop
   hoort dan bij dit scrollvlak, zoals in de smalle persoonsweek. */
@media screen {
  .personeel-page .rs-persoon-week:has(.mw-raster--banen) {
    overflow-x: auto;
  }

  .personeel-page .rs-persoon-week .mw-raster--banen {
    --mw-minuut: 1.5px;
    min-width: max(900px, var(--mw-banen-minimum));
    max-height: max(320px, calc(100dvh - var(--app-bar-h, 71.6px) - 150px));
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .personeel-page .rs-persoon-week .mw-raster--banen .mw-raster-koppen {
    top: 0;
  }
}

/* ---- Printen: het weekrooster van één school op papier ----------------
   "Week … → Printen" is de browserprint (js/personeel.js: win.print()).
   utility-pages.css haalt de balk, de paginakop, de andere kaarten, het
   menu en alle .btn-knoppen al weg; hier blijft alleen over wat een school
   op papier wil: schoolnaam, week, samenvatting en de lessen met wie
   erop staat. Bediening (weekknoppen, bereik, undo/redo, lade,
   leerlijnschakelaars, actiekolom) zegt op papier niets. */
@media print {
  @page {
    size: A4 landscape;
    margin: 12mm;
  }

  .personeel-page #roosterCard {
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    overflow: visible !important;
  }

  /* De schermcontainer draagt 1,5rem binnenruimte. Op A4 kost dat precies de
     hoogte waardoor het persoonsraster naar een afgeknepen tweede pagina
     schoof. Papier heeft zijn marge al via @page; alle voorouders moeten de
     ene weekpagina daarom ongeknipt doorgeven. */
  .personeel-page,
  .personeel-page .container,
  .personeel-page #personeelContent {
    overflow: visible !important;
  }

  .personeel-page .container {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .personeel-page #roosterCard > h2,
  .personeel-page #roosterCard > p.lead,
  .personeel-page #roosterCard > .vt-uitleg,
  .personeel-page #roosterCard .rs-week-knop,
  .personeel-page #roosterCard .rs-week-nu,
  .personeel-page #roosterCard .rs-segment,
  .personeel-page #roosterCard .rs-kop-menu,
  .personeel-page #roosterCard .rs-bediening,
  .personeel-page #roosterCard .rs-persoon-vorm,
  .personeel-page #roosterCard .rs-indeling-noot,
  .personeel-page #roosterCard .rs-strook,
  .personeel-page #roosterCard .rs-leerlijnen,
  .personeel-page #roosterCard .rs-slim,
  .personeel-page #roosterCard .rs-archief-banner,
  .personeel-page #roosterCard .rs-archief-acties,
  .personeel-page #roosterCard .rs-lade,
  .personeel-page #roosterCard .rs-acties-cel,
  .personeel-page #roosterCard .rs-table th:last-child,
  .personeel-page #roosterCard .rs-table td:last-child,
  .personeel-page #roosterCard .notice-error,
  .personeel-page #roosterCard .rs-sluit-herstel,
  .personeel-page #roosterCard .rs-menu,
  .personeel-page #kalenderBlok {
    display: none !important;
  }

  .personeel-page #roosterCard:has(#rsSchoolWeek:not(.is-hidden)) > .rs-kop,
  .personeel-page
    #roosterCard:has(#rsSchoolWeek:not(.is-hidden))
    > .rs-samenvatting {
    display: none !important;
  }

  /* Kop op papier: "Agnesschool · Week 36 · 31 aug – 4 sep 2026". De
     schoolkiezer is een <select>; als kale tekst leest hij als titel. */
  .personeel-page #roosterCard .rs-kop {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 0;
    padding: 0 0 0.5rem;
    margin: 0 0 0.5rem;
    border-bottom: 2px solid #000;
  }

  .personeel-page #roosterCard .rs-kop-select {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    margin: 0 0 0.15rem;
    background: transparent;
    font-family: var(--font-heading, inherit);
    font-size: 20pt;
    font-weight: 700;
    color: #000;
    width: auto;
    max-width: 100%;
  }

  .personeel-page #roosterCard .rs-kop-week {
    display: block;
  }

  .personeel-page #roosterCard .rs-week-label {
    font-size: 12pt;
    font-weight: 400;
    color: #000;
  }

  .personeel-page #roosterCard .rs-kop-bereik {
    display: block;
    order: -1;
  }

  .personeel-page #roosterCard .rs-samenvatting {
    display: block;
    font-size: 10pt;
    color: #000;
  }

  .personeel-page #roosterCard .table-wrap {
    overflow: visible;
    border: 0;
  }

  .personeel-page #roosterCard .users-table {
    width: 100%;
    font-size: 10.5pt;
    border-collapse: collapse;
  }

  .personeel-page #roosterCard .users-table thead {
    display: table-header-group;
  }

  .personeel-page #roosterCard .users-table th,
  .personeel-page #roosterCard .users-table td {
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid #999;
    color: #000;
  }

  .personeel-page #roosterCard .users-table tr {
    break-inside: avoid;
  }

  .personeel-page #roosterCard .rs-nog-niemand {
    font-weight: 700;
  }

  .personeel-page .rs-persoon-week {
    overflow: visible;
  }

  .personeel-page .rs-school-week {
    overflow: visible;
    margin: 0;
  }

  .personeel-page .rs-persoon-week .mw-raster {
    min-width: 0;
    break-inside: auto;
  }
}

/* ---------- Kandidatenlijst in de toewijsdialoog (DEC-046 besluit 4) ------
   De <select> is vervangen door drie secties: alleen zo past de reden per
   persoon erbij én de weg naar het inzetbaarheidsblok. Kiezen is een knop met
   `aria-pressed`; "Niet aangeboden" draagt geen knop, want de server weigert
   die koppeling in stap 1. */
.personeel-page .tw-kandidaten-kop {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
}

.personeel-page .tw-zoek {
  max-width: 20rem;
  margin: 0.4rem 0 0.6rem;
}

.personeel-page .tw-zoek input {
  width: 100%;
}

.personeel-page .tw-kandidaten {
  max-height: 22rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  padding: 0.5rem 0.6rem;
}

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

.personeel-page .tw-sectie:last-child {
  margin-bottom: 0;
}

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

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

.personeel-page .tw-kandidaat-lijst {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.personeel-page .tw-kandidaat {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  align-items: baseline;
}

.personeel-page .tw-kandidaat-kies {
  border: 1px solid transparent;
  background: none;
  padding: 0.1rem 0.3rem;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.personeel-page .tw-kandidaat-kies:hover,
.personeel-page .tw-kandidaat-kies:focus-visible {
  border-color: var(--border);
}

.personeel-page .tw-kandidaat-kies.is-active {
  background: var(--vms-black);
  color: var(--vms-white);
  font-weight: 700;
}

/* "Toch kiezen" (S2 stap 2): dezelfde keuzeknop, maar met omtrek — hij zegt
   dat er iets bevestigd wordt. Zwart-wit binnen de vormtaal; kleur blijft
   voor leerlijn en status. */
.personeel-page .tw-kandidaat-kies--toch {
  border-color: var(--vms-black);
  font-size: 0.78rem;
}

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

.personeel-page .tw-kandidaat-reden {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.personeel-page .tw-kandidaat-oplos {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* De knop naar de botsende toewijzing staat ín het foutblok, onder de tekst
   die zegt waarmee het botst. */
.personeel-page .tw-conflict-knop {
  display: block;
  margin-top: 0.4rem;
}

.personeel-page .tw-vrije-datum {
  margin: 0.4rem 0 0;
}

.personeel-page .tw-van-acties:empty {
  display: none;
}

/* Het dienstverband bij een naam op een roosterregel (DEC-046 besluit 7). */
.personeel-page .rs-dv {
  padding: 0.05rem 0.4rem;
  background: var(--vms-grey-soft);
  font-size: 0.6875rem;
  text-transform: lowercase;
}

/* Slice K (DEC-048): "Met kanttekening" per hoofdreden, inklapbaar. */
.personeel-page .tw-groep {
  margin: 0 0 0.35rem;
  border-left: 2px solid var(--vms-grey-soft);
  padding-left: 0.5rem;
}

.personeel-page .tw-groep-kop {
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Schooltabs (DEC-048 slice B): Rooster · Studiedagen · Notities — zelfde
   vorm als .form-tab in form.css (personeel.html laadt form.css niet). */
.school-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.5rem 0;
}
.school-tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--vt-raakvlak-klein);
  padding: 0.35rem 0.9rem;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: var(--fw-subhead);
  line-height: 1.4;
  background: var(--card);
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--vms-ink-900);
  clip-path: polygon(
    var(--vt-schuin-s) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-s)),
    calc(100% - var(--vt-schuin-s)) 100%,
    0 100%,
    0 var(--vt-schuin-s)
  );
  cursor: pointer;
}
.school-tab:hover {
  background: var(--vms-ink-50);
}
.school-tab[aria-selected='true'] {
  color: var(--vms-white);
  background: var(--vms-ink-900);
}
.school-tab:focus-visible {
  outline: var(--vt-lijn-dik) solid var(--vms-ink-900);
  outline-offset: 2px;
}

/* Notitielade (schooltab Notities). */
.not-formulier {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}
.not-invoer {
  width: 100%;
  max-width: 40rem;
}
.not-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
}
.not-rij {
  padding: 0.6rem 0;
  border-top: var(--vt-lijn) solid var(--vms-ink-900);
}
.not-rij--werkbank {
  box-shadow: inset 0.25rem 0 0 var(--vms-ink-900);
  padding-left: 0.75rem;
}
.not-tekst {
  margin: 0 0 0.25rem;
  white-space: pre-wrap;
}
.not-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.86rem;
}
.not-vlag {
  font-weight: var(--fw-subhead);
}
.not-acties {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.rs-sluit-herstel {
  border: var(--vt-lijn) solid var(--warning);
  padding: var(--space-3);
  margin: var(--space-3) 0;
}

.rs-sluit-herstel p {
  margin: 0 0 var(--space-2);
}

.rs-sluit-herstel button {
  margin: 0 var(--space-2) var(--space-2) 0;
}