/* Authenticated utility pages: index, admin, and migration. */

.is-hidden {
  display: none !important;
}

.index-page {
  display: flex;
  flex-direction: column;
}

/* Ontwerp `3a`: de kop is links uitgelijnd met de vijf leerlijnruiten
   rechtsboven, niet gecentreerd met kleine ruiten onder de eyebrow. Een
   afzender staat links; gecentreerd las het als een wervingsbanner. */
/* Rechts blijft `--app-bar-slot` vrij, net als in `.app-bar-inner`: de avatar
   staat `position: fixed` rechtsboven (hij komt uit de inloggate en staat óók
   op Start, waar geen balk is). Zonder die marge lopen de vijf leerlijnruiten
   er onder ~1340px achter weg. `.main` krijgt dezelfde padding, zodat de kop
   en de inhoud op één lijn blijven staan. */
.index-page .hero {
  padding: 2.75rem var(--app-bar-slot, 5rem) 2.5rem 2.5rem;
  background: var(--vms-ink-900);
}

.index-page .hero-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto;
}

.index-page .hero-tekst {
  max-width: 600px;
}

.index-page .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
  color: var(--vms-white);
}

.index-page .hero h1 {
  margin: 0.625rem 0 0.75rem;
  color: var(--vms-white);
  font-size: 3rem;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.index-page .hero-lead {
  margin: 0;
  color: var(--vms-white);
  font-size: 1.25rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.index-page .main {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem var(--app-bar-slot, 5rem) 2.5rem 2.5rem;
}

/* Links waar je heen kunt, rechts de cirkel (ontwerp `3a`). 1,35fr geeft de
   vier bestemmingskaarten twee leesbare kolommen naast een cirkel die zijn
   eigen vierkant houdt. */
.index-page .start-kolommen {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1.375rem;
  align-items: start;
}

.index-page .start-keuze-kop {
  display: block;
  margin-bottom: 0.75rem;
}

.index-page .cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}

.index-page .nav-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  color: var(--text);
  text-decoration: none;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--dur-base) var(--ease-soft),
    box-shadow var(--dur-base) var(--ease-soft),
    border-color var(--dur-base) var(--ease-soft);
}

.index-page .nav-card:hover {
  transform: translateY(var(--hover-lift));
  border-color: var(--vms-ink-900);
  box-shadow: var(--shadow-lg);
}

.index-page .nav-card--button {
  cursor: pointer;
}

.index-page .nav-card h2 {
  color: var(--text);
  font-size: 1.15rem;
}

.index-page .nav-card p {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.index-page .about-strip-text {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.index-page .footer {
  padding: 1.5rem;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  text-align: center;
  border-top: 1px solid var(--border);
}

.index-page .footer a {
  color: var(--vms-ink-900);
  font-weight: var(--fw-subhead);
  text-decoration: none;
}

.index-page .footer a:hover {
  text-decoration: underline;
}

/* Ontwerp `3a`: een compact blok met een label, de select en een zwarte knop
   — niet meer een kaart met pictogram en een eigen kop. De kiezer is een
   bijzaak naast de bestemmingen, en zag er als kaart even zwaar uit. */
.index-page .school-picker {
  margin-top: 1.375rem;
  padding: 1.25rem 1.5rem;
  background: var(--card);
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--vt-lijn, 1.5px) var(--border);
  clip-path: polygon(
    var(--vt-schuin-l, 14px) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-l, 14px)),
    calc(100% - var(--vt-schuin-l, 14px)) 100%,
    0 100%,
    0 var(--vt-schuin-l, 14px)
  );
}

.index-page .school-picker .vms-eyebrow {
  display: block;
  margin-bottom: 0.625rem;
}

.index-page .school-picker-rij {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5625rem;
}

.index-page .school-picker select {
  flex: 1;
  min-width: 220px;
  min-height: var(--vt-raakvlak, 46px);
  padding: 0.6rem 2.2rem 0.6rem 0.875rem;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: var(--fw-subhead);
  background: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%236E6E6B' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--vt-lijn, 1.5px) var(--vms-ink-900);
  outline: none;
  cursor: pointer;
  appearance: none;
  clip-path: polygon(
    var(--vt-schuin-s, 9px) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-s, 9px)),
    calc(100% - var(--vt-schuin-s, 9px)) 100%,
    0 100%,
    0 var(--vt-schuin-s, 9px)
  );
}

/* `clip-path` snijdt een outline weg: de focusring loopt naar binnen. */
.index-page .school-picker select:focus-visible {
  outline: var(--vt-lijn-dik, 2.5px) solid var(--vms-ink-900);
  outline-offset: calc(-1 * var(--vt-lijn-dik, 2.5px) - 2px);
}

/* Openen is een expliciete stap (ontwerp `3a`); de select navigeert niet
   meer uit zichzelf — zie de noot bij de klik-listener in js/index.js. */
.index-page .school-picker-knop {
  min-height: var(--vt-raakvlak, 46px);
  padding: 0 1.375rem;
  color: var(--vms-white);
  background: var(--vms-ink-900);
  border: none;
  border-radius: 0;
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(
    var(--vt-schuin-s, 9px) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-s, 9px)),
    calc(100% - var(--vt-schuin-s, 9px)) 100%,
    0 100%,
    0 var(--vt-schuin-s, 9px)
  );
}

.index-page .school-picker-knop:hover {
  background: var(--vms-ink-700);
}

.index-page .school-picker-knop:focus-visible {
  outline: var(--vt-lijn-dik, 2.5px) solid var(--vms-white);
  outline-offset: calc(-1 * var(--vt-lijn-dik, 2.5px) - 2px);
}

/* Tekst die alleen de schermlezer hoort. Op Beheer draagt de actiekolom van de
   accountentabel hem: een lege `<th>` is voor axe een `empty-table-header` en
   voor de schermlezer een kolom zonder naam. */
.index-page .sr-only,
.admin-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

.admin-page .container {
  /* DEC-042: Beheer kreeg de volle app-breedte — op 900px pasten de zeven
     kolommen van de accountentabel en de acht van Deellinks niet. Zelfde maat
     als Start en Scholen. */
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* De kaarten in een raster van twee kolommen zodra er ruimte is (DEC-042):
   brede kaarten (tabellen, activiteit) over de volle breedte, de smalle twee
   (Nieuwe gebruiker, Herinneringen) naast elkaar. Mobiel blijft de stapel. */
@media (min-width: 1100px) {
  .admin-page .admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
  }

  .admin-page .admin-grid > .admin-subnav,
  .admin-page .admin-grid > .admin-info,
  .admin-page .admin-grid > .card--breed {
    grid-column: 1 / -1;
  }

  /* In het raster regelt `gap` de afstand; de mobiele margin zou er dubbel
     bovenop komen. */
  .admin-page .admin-grid > .card,
  .admin-page .admin-grid > .admin-subnav,
  .admin-page .admin-grid > .admin-info {
    margin-bottom: 0;
  }
}

/* De uitklapvoet onder een lange lijst (js/admin-uitklap.js): één knop die de
   rest toont of weer inklapt. */
/* `hidden` moet winnen van de eigen `display` van een schoolrij, anders
   verbergt de inklap niets (zelfde les als `.app-nav[hidden]`). */
.admin-page .act-school[hidden] {
  display: none;
}

.admin-page .uitklap-voet {
  margin-top: 0.5rem;
}

.admin-page .uitklap-voet:empty {
  display: none;
}

.admin-page .uitklap-knop {
  padding: 0.35rem 0.9rem;
  color: var(--text);
  font-family: var(--font-label);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
}

.admin-page .uitklap-knop:hover {
  background: var(--vms-ink-100);
}

.admin-page .card {
  padding: 1.5rem;
  margin-bottom: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.admin-page .card {
  border-radius: var(--radius-lg);
}

.admin-page .card h2 {
  margin-bottom: 0.3rem;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: var(--fw-heading);
}

.admin-page .card > p.lead {
  margin-bottom: 1rem;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.admin-page .field {
  margin-bottom: 0.9rem;
}

.admin-page .field--narrow {
  max-width: 220px;
}

.admin-page .field label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: var(--fw-subhead);
}

.admin-page .field .hint {
  margin-bottom: 0.3rem;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.admin-page .role-hint {
  margin-top: 0.3rem;
  margin-bottom: 0;
}

.admin-page .school-picker {
  overflow: hidden;
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
}

.admin-page .school-picker .sp-search {
  width: 100%;
  padding: 0.55rem 0.8rem;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  background: var(--card);
  border: none;
  border-bottom: 1px solid var(--border);
  outline: none;
}

.admin-page .school-picker .sp-search:focus {
  box-shadow: inset 0 -2px 0 var(--vms-ink-900);
}

.admin-page .school-picker .sp-list {
  max-height: 210px;
  padding: 0.3rem 0;
  overflow-y: auto;
}

.admin-page .school-picker .sp-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.8rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  cursor: pointer;
}

.admin-page .school-picker .sp-item:hover {
  background: var(--vms-ink-100);
}

.admin-page .school-picker .sp-item input {
  width: auto;
  accent-color: var(--vms-ink-900);
}

.admin-page .school-picker .sp-empty {
  padding: 0.5rem 0.8rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.admin-page .school-picker .sp-count {
  padding: 0.35rem 0.8rem;
  color: var(--vms-ink-900);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: var(--fw-subhead);
  background: var(--card);
  border-top: 1px solid var(--border-subtle);
}

.admin-page .guard-note {
  display: none;
  padding: 0.55rem 0.8rem;
  margin-bottom: 0.8rem;
  color: var(--vms-ink-900);
  font-size: 0.82rem;
  background: var(--vms-ink-100);
  border: 1px solid color-mix(in srgb, var(--vms-ink-900) 25%, transparent);
  border-radius: var(--radius-sm);
}

.admin-page .guard-note.is-visible {
  display: block;
}

.admin-page .field input[type='text'],
.admin-page .field input[type='email'],
.admin-page .field input[type='password'],
.admin-page .field input[type='number'],
.admin-page .field select,
.admin-page .field textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition:
    border-color var(--dur-fast) var(--ease-soft),
    background var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-fast) var(--ease-soft);
}

.admin-page .field input:focus,
.admin-page .field select:focus,
.admin-page .field textarea:focus {
  background: var(--input-focus);
  border-color: var(--vms-ink-900);
  box-shadow: var(--ring-accent);
}

.admin-page .field select[multiple] {
  min-height: 140px;
  padding: 0.3rem;
}

.admin-page .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.admin-page .btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
}

.admin-page .btn-danger {
  color: var(--danger);
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--danger);
}

.admin-page .btn-danger:hover {
  color: var(--vms-white);
  background: var(--danger);
  box-shadow: inset 0 0 0 1.5px var(--danger);
  --btn-focus-kleur: var(--vms-white);
}

.admin-page .btn-soft-disabled {
  color: var(--vms-ink-700);
  background: var(--vms-ink-100);
  box-shadow: inset 0 0 0 1.5px var(--vms-ink-200);
  cursor: not-allowed;
}

.admin-page label.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: var(--fw-subhead);
  cursor: pointer;
}

.admin-page label.inline-check input {
  width: auto;
}

.admin-page .users-table {
  width: 100%;
  font-size: 0.85rem;
  border-collapse: collapse;
}

.admin-page .users-table th {
  padding: 0.5rem 0.6rem;
  color: var(--vms-ink-900);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: var(--fw-subhead);
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  background: var(--vms-ink-100);
  border-bottom: 2px solid var(--border);
}

.admin-page .users-table td {
  padding: 0.6rem;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.admin-page .users-table .actions-cell {
  text-align: right;
  white-space: nowrap;
}

.admin-page .users-table .actions-cell .btn {
  margin-bottom: 0.25rem;
  margin-left: 0.25rem;
}

.admin-page .table-wrap {
  overflow-x: auto;
}

.admin-page .muted {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.admin-page .nowrap {
  white-space: nowrap;
}

.admin-page .chip,
.admin-page .role-badge,
.admin-page .badge-ok,
.admin-page .badge-off {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: var(--fw-subhead);
  border-radius: var(--radius-pill);
}

.admin-page .chip {
  margin: 0.1rem 0.15rem 0 0;
  color: var(--vms-ink-900);
  background: var(--vms-ink-100);
}

.admin-page .role-badge {
  white-space: nowrap;
}

.admin-page .role-badge--admin {
  color: var(--vms-ink-900);
  background: var(--vms-ink-100);
}

.admin-page .role-badge--editor,
.admin-page .role-badge--viewer {
  color: var(--vms-ink-700);
  background: var(--vms-ink-100);
}

.admin-page .badge-ok {
  color: var(--success);
  font-weight: var(--fw-heading);
  background: var(--success-light);
}

.admin-page .badge-off {
  color: var(--danger);
  font-weight: var(--fw-heading);
  background: var(--danger-light);
}

.admin-page .notice-error {
  display: none;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.8rem;
  color: var(--danger);
  font-size: 0.83rem;
  background: var(--danger-light);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: var(--radius-sm);
}

.admin-page .notice-error.is-visible {
  display: block;
}

.admin-page .err {
  color: var(--danger);
}

.admin-page .rem-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0;
}

.admin-page .rem-h {
  margin: 1rem 0 0.4rem;
}

.admin-page .rem-row {
  padding: 0.4rem 0;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
}

.admin-page .row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.5rem;
}

.admin-page .reminders-out {
  margin-top: 1rem;
}

.admin-page .links-filters {
  align-items: end;
}

.admin-page .links-refresh-field {
  align-self: end;
}

.admin-page .links-refresh-field .btn {
  width: 100%;
}

.admin-page .links-table td {
  vertical-align: middle;
}

.admin-page .links-date {
  white-space: nowrap;
}

.admin-page .modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

.admin-page .modal-overlay.show {
  display: flex;
}

.admin-page .modal {
  width: 100%;
  max-width: 480px;
  margin-top: 2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: adminModalIn var(--dur-slow) var(--ease-out);
}

@keyframes adminModalIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.admin-page .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--border);
}

.admin-page .modal-header h2 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: var(--fw-heading);
}

.admin-page .modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-soft);
}

.admin-page .modal-close:hover {
  background: var(--input-bg);
}

.admin-page .modal-close svg {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}

.admin-page .modal-body {
  padding: 1.2rem 1.4rem 1.4rem;
}

@media (max-width: 600px) {
  .index-page .cards,
  .admin-page .form-grid {
    grid-template-columns: 1fr;
  }

  .index-page .start-kolommen {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Activiteit-dashboard (admin) — js/admin.js + js/activiteit.js
   ============================================================ */

/* Categoriekleuren — gevalideerd met de dataviz-palettevalidator (lichtheids-
   band, chromavloer, CVD-afstand ≥ 12 tussen buren, contrast ≥ 3:1 op wit).
   Het merk-geel (#FFDD38/#E9C200) is te licht voor een datavlak; #b08f00 is
   dezelfde geelfamilie een stap donkerder. Alle datakleur loopt via de
   act-c-*-klassen (fill voor SVG, background voor HTML) — de CSP staat geen
   inline styles toe, en tekst draagt nooit de datakleur. */
.admin-page {
  --act-bewerkt: var(--vms-blue-deep);
  --act-bevestigd: var(--vms-green-deep);
  --act-gedeeld: var(--vms-purple);
  /* De enige van de zes die geen token is, en dat blijft zo: dit is een
     kwalitatief datapalet waarin de zes onderling onderscheidbaar moeten zijn.
     De gele tokens liggen te ver uit elkaar — `--vms-yellow-ink` (#756200)
     leest naast de andere vijf als bruin en `--vms-yellow-deep` (#e9c200) valt
     op wit weg. */
  --act-bijlagen: #b08f00;
  --act-beheer: var(--vms-red-deep);
  --act-overig: var(--vms-ink-500);
}

.admin-page .act-c-bewerkt {
  fill: var(--act-bewerkt);
  background-color: var(--act-bewerkt);
}
.admin-page .act-c-bevestigd {
  fill: var(--act-bevestigd);
  background-color: var(--act-bevestigd);
}
.admin-page .act-c-gedeeld {
  fill: var(--act-gedeeld);
  background-color: var(--act-gedeeld);
}
.admin-page .act-c-bijlagen {
  fill: var(--act-bijlagen);
  background-color: var(--act-bijlagen);
}
.admin-page .act-c-beheer {
  fill: var(--act-beheer);
  background-color: var(--act-beheer);
}
.admin-page .act-c-overig {
  fill: var(--act-overig);
  background-color: var(--act-overig);
}

/* Filters: één rij boven alles wat ze filteren */
.admin-page .act-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-4);
}

.admin-page .act-presets {
  display: flex;
  gap: 0.4rem;
}

.admin-page .act-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.admin-page .act-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  min-height: 36px;
  border: 1.5px solid var(--vms-ink-900);
  border-radius: var(--radius-pill);
  background: var(--vms-ink-100);
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: var(--fw-subhead);
  cursor: pointer;
}

.admin-page .act-chip:hover {
  background: color-mix(in srgb, var(--vms-ink-900) 22%, var(--card));
}

.admin-page .act-chip-x {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
}

/* Statblokken */
.admin-page .act-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.admin-page .act-tile {
  background: var(--input-bg);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}

.admin-page .act-tile-value {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 1.55rem;
  line-height: 1.15;
  margin-top: 0.15rem;
}

.admin-page .act-tile-sub {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.admin-page .act-warn {
  color: var(--warning);
  font-weight: var(--fw-subhead);
}

/* Grafiek */
.admin-page .act-chart {
  position: relative;
}

.admin-page .act-chart svg {
  display: block;
  max-width: 100%;
}

.admin-page .act-grid {
  stroke: var(--vms-ink-100);
  stroke-width: 1;
}

.admin-page .act-as {
  fill: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 11px;
}

.admin-page .act-seg {
  cursor: pointer;
}

.admin-page .act-seg:hover {
  opacity: 0.85;
}

.admin-page .act-hit {
  fill: transparent;
}

.admin-page .act-hit:hover {
  fill: color-mix(in srgb, var(--vms-ink-900) 4%, transparent);
}

.admin-page .act-hit:focus-visible {
  outline: none;
  stroke: var(--vms-ink-900);
  stroke-width: 2;
}

.admin-page .act-tip {
  position: absolute;
  transform: translate(-50%, -100%);
  background: var(--vms-ink-900);
  color: var(--vms-white);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  line-height: 1.5;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
}

.admin-page .act-tip-kop {
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vms-ink-300);
  margin-bottom: 0.15rem;
}

.admin-page .act-tip-rij {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.admin-page .act-tip-rij span {
  color: var(--vms-ink-300);
}

.admin-page .act-tip-rij.is-hover strong {
  text-decoration: underline;
}

.admin-page .act-tip-key {
  width: 10px;
  height: 3px;
  border-radius: 0;
  flex: none;
}

/* Legenda (klikbaar = categoriefilter) */
.admin-page .act-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: var(--space-3) 0 var(--space-2);
}

.admin-page .act-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.8rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: var(--fw-subhead);
  cursor: pointer;
}

.admin-page .act-legend-chip:hover {
  border-color: var(--vms-ink-900);
}

.admin-page .act-legend-chip.is-actief {
  border-color: var(--vms-ink-900);
  background: var(--vms-ink-100);
}

.admin-page .act-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 0;
  flex: none;
}

.admin-page .act-legend-n {
  color: var(--text-muted);
  font-weight: var(--fw-label);
}

/* Actiebadge in het logboek: kleurstip + tekst in gewone inkt */
.admin-page .act-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: var(--fw-subhead);
  white-space: nowrap;
}

/* Vierkant, bewust geen ruit: dit is de sleutel van een categoriepalet (zes
   datakleuren uit --act-*), niet de merk-marker van een leerlijn of een status.
   Legenda (.act-swatch) en logboek (.act-dot) houden zo dezelfde vorm. */
.admin-page .act-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 0;
  flex: none;
}

/* Per-school-strip (stilste eerst) */
.admin-page .act-schools {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-page .act-schools-kop,
.admin-page .act-school {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 150px 90px 110px;
  gap: var(--space-3);
  align-items: center;
}

.admin-page .act-schools-kop {
  padding: 0 0.6rem 0.3rem;
}

.admin-page .act-school {
  text-align: left;
  background: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  color: var(--text);
}

.admin-page .act-school:hover {
  background: var(--vms-ink-50);
}

.admin-page .act-school.is-actief {
  border-color: var(--vms-ink-900);
  background: var(--vms-ink-100);
}

.admin-page .act-school-naam {
  font-weight: var(--fw-subhead);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-page .act-mini {
  display: block;
}

.admin-page .act-minibar {
  fill: var(--act-bewerkt);
  opacity: 0.75;
}

/* Logboek */
.admin-page .act-feed .act-detail {
  max-width: 280px;
}

.admin-page .act-feed tbody.is-loading {
  opacity: 0.5;
}

.admin-page .act-sub td {
  background: var(--vms-ink-50);
  font-size: 0.85rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.admin-page .act-exp,
.admin-page .link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--vms-ink-900);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: inherit;
  font-weight: var(--fw-subhead);
  text-align: left;
}

.admin-page .act-exp:hover,
.admin-page .link-btn:hover {
  text-decoration: underline;
}

@media (max-width: 700px) {
  /* Smal scherm: de mini-grafiekjes zijn decoratie en mogen weg;
     de datums (het oordeel) blijven staan. */
  .admin-page .act-schools-kop,
  .admin-page .act-school {
    grid-template-columns: 1fr 82px 100px;
  }

  .admin-page .act-mini,
  .admin-page .act-schools-kop span:nth-child(2) {
    display: none;
  }
}

/* Breder venster wordt geladen: vorige grafiek blijft gedimd staan
   (geen skeleton, geen sprong). */
.admin-page .act-chart.is-loading {
  opacity: 0.5;
}

/* ===== Personeel (personeel.html) — medewerkersregister ===== */
/* Bouwt voort op de .admin-page-blokken hierboven; alleen wat de
   medewerkerstabel en het formulier extra nodig hebben. */

/* De kop van een bestemmingskaart draagt de vráág van de bestemming
   (js/navigatie.js), niet nog een keer haar naam — die staat in de `<h1>`
   erboven. Hij is dus een ondertitel: een echte h2 voor de koppenvolgorde,
   maar in de vorm van de zin die hij is. */
.personeel-page .bestemming-vraag {
  margin: 0 0 0.15rem;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
  text-wrap: pretty;
}
.personeel-page .mw-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
  align-items: flex-end;
  margin-bottom: 0.6rem;
}

.personeel-page .mw-toolbar .field {
  flex: 1 1 260px;
  margin-bottom: 0;
}

/* Het zoekveld vult zijn veld: zonder breedte viel het terug op de
   browserstandaard van ±150px en werd de placeholder "Naam, functie,
   leerlijn of telefoon…" halverwege afgesneden (audit 2026-09-08). */
.personeel-page .mw-toolbar .field > input[type='search'] {
  width: 100%;
  max-width: 28rem;
  /* Dit veld had geen enkele eigen stijl: de rand was de browserstandaard
     (2px inset grijs) en de padding kwam op 0 door de globale reset, samen
     een raakvlak van 21px. Het krijgt hier de maat en de rand van de
     vormtaal. Let op: dit is één veld, geen veldsanering — de meeste
     invoervelden in de app (met name op form.html) staan nog steeds kaal.
     Zie de PR-tekst van de raakvlakslice. */
  min-height: var(--vt-raakvlak-klein);
  padding: var(--space-2) var(--space-3);
  background: var(--card);
  border: none;
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--border);
}

.personeel-page .mw-toolbar .field--check {
  flex: 0 0 auto;
  padding-bottom: 0.45rem;
}

.personeel-page .mw-telling {
  margin-bottom: 0.6rem;
}

.personeel-page .mw-sub {
  display: block;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: normal;
}

.personeel-page .mw-inactief td {
  color: var(--text-muted);
}

.personeel-page fieldset.field {
  min-width: 0;
  padding: 0;
  margin: 0 0 0.9rem;
  border: 0;
}

.personeel-page fieldset.field legend {
  display: block;
  padding: 0;
  margin-bottom: 0.3rem;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: var(--fw-subhead);
}

.personeel-page .check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}

.personeel-page .check-item {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.88rem;
  cursor: pointer;
}

.personeel-page .check-item input {
  width: auto;
  margin: 0;
}

.personeel-page .ll-chip {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  margin: 0.1rem 0.15rem 0 0;
  color: var(--vms-ink-700);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: var(--fw-subhead);
  white-space: nowrap;
  background: var(--vms-ink-100);
  border-radius: var(--radius-pill);
}

.personeel-page .ll-chip[data-ll='groen'] {
  color: var(--vms-green-ink);
  background: var(--vms-green-soft);
}

.personeel-page .ll-chip[data-ll='gezond'] {
  color: var(--vms-blue-ink);
  background: var(--vms-blue-soft);
}

.personeel-page .ll-chip[data-ll='techniek'] {
  color: var(--vms-red-ink);
  background: var(--vms-red-soft);
}

.personeel-page .ll-chip[data-ll='filosofie'] {
  color: var(--vms-yellow-ink);
  background: var(--vms-yellow-soft);
}

.personeel-page .ll-chip[data-ll='budo'] {
  color: var(--vms-purple-ink);
  background: var(--vms-purple-soft);
}

.personeel-page .modal {
  max-width: 640px;
}

/* `modal-overlay` is het werkelijke scrollvlak. Reserveer onderaan de hoogte
   van de sticky knoppenrij, zodat scrollIntoView een control niet als
   "zichtbaar" beschouwt terwijl die rij hem bedekt. */
.personeel-page .modal-overlay {
  scroll-padding-block-end: 5.5rem;
}

.personeel-page .modal-body .form-grid {
  margin-bottom: 0.9rem;
}

.personeel-page .modal-body textarea {
  width: 100%;
  resize: vertical;
}

/* Sticky Opslaan (DEC-040 slice 3): het medewerkersformulier is lang genoeg
   om de knoppenrij uit beeld te duwen — de overlay eromheen is de scroller,
   dus `bottom: 0` plakt de rij aan de onderkant van het venster zolang het
   formulier in beeld is. Dekkende kaartkleur plus een haarlijn erboven, zodat
   de velden eronder doorlopen zonder door de knoppen heen te schemeren.
   Geldt voor alle vier de dialogen van deze pagina (mw/tw/kal/afw). */
.personeel-page .modal-body .row-actions {
  position: sticky;
  bottom: 0;
  margin-bottom: -0.2rem;
  padding: 0.7rem 0 0.2rem;
  background: var(--card);
  box-shadow: inset 0 var(--vt-lijn) 0 0 var(--border-subtle);
}

/* ===== Personeel — rooster (toewijzingen per school / per persoon, slice 3) ===== */
/* Dagdeel-grid (slice 5b): per werkdag een ochtend- en middagvinkje. */
.personeel-page .dagdeel-grid {
  display: grid;
  grid-template-columns: max-content max-content max-content;
  gap: 0.3rem 1rem;
  align-items: center;
}

.personeel-page .dagdeel-rij {
  display: contents;
}

.personeel-page .dagdeel-dag {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: var(--fw-subhead);
}

/* Attentielijst (slice 6): vier soorten aandachtspunten + export. */
.personeel-page .at-table td {
  vertical-align: top;
}

.personeel-page .at-export {
  flex: 1 1 320px;
}

.personeel-page .at-badge {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: var(--fw-subhead);
  background: var(--vms-grey-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* Aandachtsbadges: --warning, niet de wash van de leerlijn Denk. Zelfde vorm
   als de danger-variant hieronder, één stap zachter. */
.personeel-page .at-badge-signaal,
.personeel-page .at-badge-wees {
  color: var(--warning);
  background: var(--card);
  border-color: var(--warning);
}

.personeel-page .at-badge-actie_nodig,
.personeel-page .at-badge-vacature,
.personeel-page .at-badge-inval_open {
  color: var(--danger);
  background: var(--card);
  border-color: var(--danger);
}

.personeel-page .at-toelichting {
  display: block;
  max-width: 26rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  white-space: normal;
}

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

.personeel-page .vr-persoon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  align-items: baseline;
  margin-bottom: 0.25rem;
}

.personeel-page .vr-pool {
  padding: 0.05rem 0.5rem;
  border-radius: 0;
  background: var(--vms-grey-soft);
  font-size: 0.72rem;
}

.personeel-page .vr-uren {
  font-size: 0.8rem;
}

.personeel-page .rs-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
  align-items: flex-end;
  margin-bottom: 0.6rem;
}

.personeel-page .rs-toolbar .field {
  flex: 1 1 200px;
  margin-bottom: 0;
}

.personeel-page .rs-toolbar .field--narrow {
  flex: 0 1 160px;
}

.personeel-page .rs-week {
  flex: 1 1 340px;
}

.personeel-page .rs-week-titel {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: var(--fw-subhead);
}

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

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

.personeel-page .rs-samenvatting {
  margin-bottom: 0.6rem;
}

.personeel-page .rs-badge {
  display: block;
  font-size: 0.74rem;
}

/* Interne plannersnotitie op een lesmoment (E-01): mag wél wrappen. */
.personeel-page .rs-notitie {
  display: block;
  font-size: 0.74rem;
  white-space: normal;
  max-width: 22rem;
}

.personeel-page .rs-persoon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  align-items: center;
  margin-bottom: 0.35rem;
}

.personeel-page .rs-persoon:last-child {
  margin-bottom: 0;
}

.personeel-page .rs-badges,
.personeel-page .rs-knoppen {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.personeel-page .rs-geldig {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.personeel-page .rs-niet-deze-week td {
  color: var(--text-muted);
}

.personeel-page .rs-vacature-badge,
.personeel-page .rs-actie-nodig {
  color: var(--danger);
  background: var(--card);
  border: 1px solid var(--danger);
}

.personeel-page .rs-wees td {
  background: var(--warning-light);
}

/* Invalafwijkingen (fase 2, slice 3): de badge bij een toewijzing in het
   live rooster en het afwijkingenblok onder een gearchiveerde week. */
.personeel-page .rs-inval {
  color: var(--text);
  background: var(--warning-light);
}

/* Een invalles in het rooster per persoon: de invaller ziet zijn tijdelijke
   les naast de structurele toewijzingen. Informatief gemarkeerd, in dezelfde
   tint als de badge — geen alarmkleur. */
.personeel-page .rs-inval-rij td {
  background: var(--warning-light);
}

/* Vaste bezetting (kantoor/vakgroepoverleg) in het rooster per persoon — de
   design-handoff van fase 3, §9. Bewust géén leerlijnvulling: dit is geen les
   maar geblokkeerde tijd. Kantoor krijgt de neutrale arcering; sinds DEC-045
   draagt elk element van `vaste_blokken` zijn soort, en vakgroepoverleg krijgt
   de tweede markering uit het ontwerp — wit vlak, dikkere inktomlijning.
   De omlijning staat per cel: de tabel is `border-collapse: collapse`, dus een
   box-shadow op de `tr` is niet betrouwbaar. Boven- en onderrand op elke cel
   plus een zijrand op de buitenste twee lezen samen als één blok. */
.personeel-page .rs-vast-rij td {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 7px,
    var(--vms-ink-100) 7px,
    var(--vms-ink-100) 8px
  );
  box-shadow:
    inset 0 1.5px 0 var(--vms-ink-900),
    inset 0 -1.5px 0 var(--vms-ink-900);
}

.personeel-page .rs-vast-rij td:first-child {
  box-shadow:
    inset 0 1.5px 0 var(--vms-ink-900),
    inset 0 -1.5px 0 var(--vms-ink-900),
    inset 1.5px 0 0 var(--vms-ink-900);
}

.personeel-page .rs-vast-rij td:last-child {
  box-shadow:
    inset 0 1.5px 0 var(--vms-ink-900),
    inset 0 -1.5px 0 var(--vms-ink-900),
    inset -1.5px 0 0 var(--vms-ink-900);
}

/* Vakgroepoverleg: wit vlak, dikkere lijn (`--vt-lijn-dik`, hier uitgeschreven
   omdat de drie regels hierboven hun px ook uitschrijven — de cel-truc telt
   randen bij elkaar op en moet in één maatstelsel blijven). */
.personeel-page .rs-overleg-rij td {
  background-image: none;
  box-shadow:
    inset 0 2.5px 0 var(--vms-ink-900),
    inset 0 -2.5px 0 var(--vms-ink-900);
}

.personeel-page .rs-overleg-rij td:first-child {
  box-shadow:
    inset 0 2.5px 0 var(--vms-ink-900),
    inset 0 -2.5px 0 var(--vms-ink-900),
    inset 2.5px 0 0 var(--vms-ink-900);
}

.personeel-page .rs-overleg-rij td:last-child {
  box-shadow:
    inset 0 2.5px 0 var(--vms-ink-900),
    inset 0 -2.5px 0 var(--vms-ink-900),
    inset -2.5px 0 0 var(--vms-ink-900);
}

.personeel-page .rs-afwijking-kop td {
  padding-top: 0.8rem;
  font-family: var(--font-heading);
  font-weight: var(--fw-subhead);
}

.personeel-page .rs-afwijking td {
  background: var(--vms-grey-soft);
}

/* Weekarchief (slice 6): een afgesloten week is alleen-lezen — informatief
   grijs, nooit een alarmkleur. De banner staat boven de tabel; `rs-archief`
   dempt de lesmomentrijen (wees-rijen houden hun eigen gele markering). */
.personeel-page .rs-archief-banner {
  margin: 0 0 0.6rem;
  padding: 0.55rem 0.85rem;
  color: var(--text);
  font-size: 0.88rem;
  background: var(--vms-grey-soft);
  border: 1px solid var(--vms-grey);
  border-radius: var(--radius-sm);
}

.personeel-page .rs-archief-banner.is-gedempt {
  color: var(--text-muted);
}

.personeel-page tr.rs-archief td {
  background: var(--vms-grey-soft);
}

.personeel-page .rs-vervalt {
  display: block;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-family: var(--font-heading);
  font-weight: var(--fw-subhead);
}

.personeel-page .rs-lesmoment {
  margin-bottom: 0.9rem;
  font-family: var(--font-heading);
  font-weight: var(--fw-subhead);
}

.personeel-page .field input[type='date'] {
  width: 100%;
  padding: 0.6rem 0.8rem;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
}

.personeel-page .field input[type='date']:focus {
  background: var(--input-focus);
  border-color: var(--vms-ink-900);
  box-shadow: var(--ring-accent);
}

.personeel-page .field input + .hint {
  margin-top: 0.3rem;
  margin-bottom: 0;
}

/* Kalenderpaneel (personeel.html, slice 5a) */
.personeel-page .kal-nieuw-veld {
  align-self: flex-end;
}

.personeel-page .kal-signalen {
  margin: 0 0 0.8rem;
  padding: 0.7rem 0.9rem;
  color: var(--text);
  background: var(--warning-light);
  border: 1px solid var(--warning, var(--border));
  border-radius: var(--radius-sm);
}

/* Bron weg (rooster niet geladen): informatief grijs, geen alarmkleur. */
.personeel-page .kal-signalen.is-onbekend {
  color: var(--text-muted);
  background: var(--vms-grey-soft);
  border-color: var(--vms-grey);
}

.personeel-page .kal-signalen ul {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}

.personeel-page .kal-signalen li {
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
}

.personeel-page .kal-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-family: var(--font-heading);
  font-weight: var(--fw-subhead);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.personeel-page .kal-badge.kal-centraal {
  margin-left: 0;
  color: var(--vms-ink-900);
  border-color: var(--vms-ink-900);
}

.personeel-page .kal-badge.kal-dubbel {
  color: var(--danger);
  border-color: var(--danger);
}

.personeel-page .kal-omschrijving {
  max-width: 24rem;
  white-space: pre-wrap;
}

/* Lesregel (DEC-048 slice A): wie de uitval draagt, stil onder de reden. */
.personeel-page .kal-debet {
  display: block;
  font-size: 0.8rem;
}

/* Meerkeuze bij aanmaken en kopiëren (X6). Een fieldset met vinkjes: vorm en
   legend komen van `fieldset.field` hierboven; alleen de lijst zelf is eigen.
   De centrale optie staat bovenaan met een scheidingsrand, want zij sluit de
   losse scholen uit. Zwart/wit zoals de rest van de app-chrome. */
.personeel-page .kal-scholen {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 14rem;
  margin-top: 0.4rem;
  padding: 0.4rem 0.6rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.personeel-page .kal-school--centraal {
  margin-bottom: 0.3rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}

/* Resultaat van een reeks (X6, spec §3.1): per school haar toestand. Een
   toestand is status, dus die mag kleur dragen; de rest blijft zwart/wit. */
.personeel-page .kal-reeks {
  margin: 0 0 0.8rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.personeel-page .kal-reeks-kop {
  margin: 0 0 0.4rem;
  font-family: var(--font-heading);
  font-weight: var(--fw-subhead);
  font-size: 0.9rem;
}

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

.personeel-page .kal-reeks-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.4rem;
  padding: 0.25rem 0;
  border-top: 1px solid var(--vms-grey, #dcdcdc);
  font-size: 0.85rem;
}

.personeel-page .kal-reeks-wie {
  font-family: var(--font-heading);
  font-weight: var(--fw-subhead);
}

.personeel-page .kal-reeks-reden {
  font-size: 0.8rem;
}

.personeel-page .kal-reeks-opdracht,
.personeel-page .kal-reeks-melding {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
}

.personeel-page .kal-reeks-rij-acties {
  flex-basis: 100%;
  margin-top: 0.15rem;
}

/* De rij die "Toon regel" aanwees; een lijn, geen vlak, zodat de tabel
   zwart/wit blijft en kleur status blijft betekenen. */
.personeel-page .kal-rij--aangewezen > td {
  box-shadow: inset 0 -2px 0 var(--vms-ink-900);
}

/* De schakelaar boven de meerkeuze: 26 vinkjes in één keer aan of uit. */
.personeel-page .kal-scholen-kop {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.4rem;
}

.personeel-page .kal-badge.kal-toestand--opgeslagen {
  color: var(--success);
  border-color: var(--success);
}

.personeel-page .kal-badge.kal-toestand--geweigerd,
.personeel-page .kal-badge.kal-toestand--onbekend {
  color: var(--danger);
  border-color: var(--danger);
}

.personeel-page .kal-voortgang {
  font-size: 0.85rem;
}

/* Afwezighedenpaneel (personeel.html, fase 2 slice 1) */
.personeel-page .afw-nieuw-veld {
  align-self: flex-end;
}

.personeel-page .afw-namen-hint:empty {
  display: none;
}

.personeel-page .afw-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-family: var(--font-heading);
  font-weight: var(--fw-subhead);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* "Langdurig" is een planningssignaal (vaste invaller zoeken), geen alarm. */
.personeel-page .afw-badge.afw-langdurig {
  color: var(--vms-ink-900);
  border-color: var(--vms-ink-900);
}

.personeel-page .afw-notitie {
  max-width: 24rem;
  white-space: pre-wrap;
}

/* Overlapwaarschuwing in het formulier: informatief, blokkeert niets. */
.personeel-page .afw-waarschuwing:empty {
  display: none;
}

.personeel-page .afw-waarschuwing {
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.85rem;
  color: var(--text);
  font-size: 0.85rem;
  background: var(--warning-light);
  border: 1px solid var(--warning, var(--border));
  border-radius: var(--radius-sm);
}

/* Invalwerkbank (personeel.html, fase 2 slice 2): werkvoorraad per dag met
   per case de kandidatenlijst, afvinkknoppen en de informeer-checklist. */
.personeel-page .inv-filters {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: flex-start;
}

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

.personeel-page .inv-dag-titel {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.personeel-page .inv-case {
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.6rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius-sm);
}

/* Een open of gevraagde case vraagt nog werk; toegezegd en niet-nodig zijn af.
   "Vraagt nog werk" is aandacht, geen fout — vandaar --warning en niet
   --danger. Was --accent, en dat is op deze pagina (data-accent="gezond") de
   leerlijn Gezond. */
.personeel-page .inv-case-open,
.personeel-page .inv-case-gevraagd {
  border-left-color: var(--warning);
}

.personeel-page .inv-kop {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  align-items: baseline;
}

.personeel-page .inv-school {
  font-weight: var(--fw-subhead);
}

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

.personeel-page .inv-status {
  padding: 0.1rem 0.55rem;
  margin-left: auto;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: var(--fw-subhead);
  background: var(--vms-grey-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* Toegezegd is klaar → --success (handoff §3). Was --accent, oftewel de
   leerlijn Gezond. */
.personeel-page .inv-status-toegezegd {
  color: var(--success);
  background: var(--card);
  border-color: var(--success);
}

.personeel-page .inv-invaller {
  margin: 0.4rem 0 0;
  font-weight: var(--fw-subhead);
}

.personeel-page .inv-kandidaten {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.personeel-page .inv-kandidaat {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  align-items: baseline;
  padding: 0.2rem 0;
}

.personeel-page .inv-kandidaat .rs-knoppen {
  margin-left: auto;
}

/* De naam van een medewerker is overal op deze pagina dezelfde tekstknop naar
   zijn persoonslade onder Mensen (DEC-040 slice 3): geen knopvorm, wél een
   onderstreping zodra je hem raakt, zodat de lijsten rustig blijven. */
.personeel-page .inv-persoon-knop,
.personeel-page .vr-persoon-knop,
.personeel-page .afw-persoon-knop {
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.personeel-page .inv-persoon-knop:hover,
.personeel-page .inv-persoon-knop:focus-visible,
.personeel-page .vr-persoon-knop:hover,
.personeel-page .vr-persoon-knop:focus-visible,
.personeel-page .afw-persoon-knop:hover,
.personeel-page .afw-persoon-knop:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

.personeel-page .inv-verzoek {
  padding: 0.05rem 0.5rem;
  font-size: 0.72rem;
  background: var(--warning-light);
  border-radius: var(--radius-pill);
}

.personeel-page .inv-acties {
  margin-top: 0.5rem;
}

.personeel-page .inv-notitie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: flex-end;
  margin-top: 0.5rem;
}

.personeel-page .inv-notitie label {
  flex: 1 1 18rem;
}

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

.personeel-page .inv-veldnaam {
  display: block;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Invalbrief-deellink bij een toegezegde case (fase 2, slice 3). */
.personeel-page .inv-brief {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: flex-end;
  margin-top: 0.5rem;
}

.personeel-page .inv-brief label {
  flex: 1 1 18rem;
}

.personeel-page .inv-brief-link {
  width: 100%;
}

/* Delen vanuit de case (X1): kopiëren, WhatsApp en e-mail naast elkaar, met
   de mailregel op een eigen rij zodat het adresveld ruimte houdt. */
.personeel-page .inv-brief-delen {
  align-items: flex-end;
}

.personeel-page .inv-brief-mail {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: flex-end;
}

.personeel-page .inv-brief-mail label {
  flex: 0 0 auto;
}

.personeel-page .inv-brief-email {
  flex: 1 1 14rem;
  min-width: 0;
}

.personeel-page .inv-brief-noot-rij {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
}

.personeel-page .inv-brief-noot {
  margin: 0;
  font-size: 0.8rem;
}

/* Vastleggen bij de case (X1): een notitie die bij de school in de werkbank
   belandt, en de ingang naar het werkactieformulier. */
.personeel-page .inv-vastleggen {
  display: grid;
  gap: 0.35rem;
  justify-items: start;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  box-shadow: inset 0 1px 0 0 var(--border-subtle);
}

.personeel-page .inv-vastleg-uitleg {
  margin: 0;
  font-size: 0.8rem;
}

.personeel-page .inv-vastleggen label {
  width: 100%;
}

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

.personeel-page .inv-informeer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  align-items: baseline;
  margin-top: 0.5rem;
}

.personeel-page .inv-wezen-titel {
  margin: 1rem 0 0.3rem;
  font-size: 0.95rem;
}

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

.personeel-page .inv-wees {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  align-items: baseline;
  padding: 0.25rem 0;
  border-top: 1px solid var(--border);
}

/* Dagregie: een rustig dispatchbord bovenop dezelfde invalwerkvoorraad. */
.personeel-page .container {
  max-width: 1180px;
}

.personeel-page #drError.is-visible {
  margin: 0 0 0.9rem;
}

.personeel-page .at-dagregie-link {
  display: block;
  margin-top: 0.25rem;
  color: var(--vms-ink-900);
  font-size: 0.78rem;
  font-weight: var(--fw-subhead);
}

.personeel-page .inv-case-doel {
  border-color: var(--vms-ink-900);
  box-shadow: var(--ring-accent);
}

/* ============================================================
   Weekplanner (personeel.html, bestemming Week — fase 3, G3)
   ============================================================
   Verhuisd uit dashboard.css: het weekraster stond daar als derde
   subtab, terwijl Scholen geen weekvraag beantwoordt. De regels zijn
   ongewijzigd overgenomen en alleen op `.personeel-page` gescoopt —
   deze stylesheet draagt óók index.html en admin.html.

   De drie hulpklassen hieronder (`.ll-scope--*`, `.btn-mini`,
   `.wp-icon-sm`) stonden in dashboard.css en worden hier herhaald,
   net zoals form.css dat al deed: één regelset per pagina-stylesheet
   is in deze repo de bestaande vorm. */

.personeel-page .ll-scope--groen {
  --ll: var(--vms-green);
  --ll-soft: var(--vms-green-soft);
  --ll-ink: var(--vms-green-ink);
}
.personeel-page .ll-scope--gezond {
  --ll: var(--vms-blue);
  --ll-soft: var(--vms-blue-soft);
  --ll-ink: var(--vms-blue-ink);
}
.personeel-page .ll-scope--techniek {
  --ll: var(--vms-red);
  --ll-soft: var(--vms-red-soft);
  --ll-ink: var(--vms-red-ink);
}
.personeel-page .ll-scope--filosofie {
  --ll: var(--vms-yellow);
  --ll-soft: var(--vms-yellow-soft);
  --ll-ink: var(--vms-yellow-ink);
}
.personeel-page .ll-scope--budo {
  --ll: var(--vms-purple);
  --ll-soft: var(--vms-purple-soft);
  --ll-ink: var(--vms-purple-ink);
}
.personeel-page .ll-scope--unknown {
  --ll: var(--vms-ink-400);
  --ll-soft: var(--vms-ink-100);
  --ll-ink: var(--text-muted);
}
.personeel-page .ll-scope--groen .vms-dot,
.personeel-page .vms-dot.ll-scope--groen,
.personeel-page .ll-scope--gezond .vms-dot,
.personeel-page .vms-dot.ll-scope--gezond,
.personeel-page .ll-scope--techniek .vms-dot,
.personeel-page .vms-dot.ll-scope--techniek,
.personeel-page .ll-scope--filosofie .vms-dot,
.personeel-page .vms-dot.ll-scope--filosofie,
.personeel-page .ll-scope--budo .vms-dot,
.personeel-page .vms-dot.ll-scope--budo,
.personeel-page .ll-scope--unknown .vms-dot,
.personeel-page .vms-dot.ll-scope--unknown {
  background: var(--ll);
}

.personeel-page .btn-mini {
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
}
.personeel-page .wp-icon-sm {
  width: 15px;
  height: 15px;
}

/* De lege staat en de laadfout van het paneel: geen kaartrand, want de
   kaart eromheen heeft er al een. */
.personeel-page .wp-leeg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

.personeel-page .week-grid {
  display: grid;
  grid-template-columns: 100px repeat(5, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.personeel-page .week-header {
  background: var(--vms-ink-900);
  color: var(--vms-white);
  padding: 0.5rem 0.6rem;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: var(--fw-label);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* De hoekcel draagt de naam van de rij-as, en die wisselt met "Groepeer op".
   "Accounthouder" past bij de maatvoering van de dagkoppen niet in de 100px
   labelkolom en werd afgekapt; iets kleiner en met minder letterruimte past
   het langste van de drie woorden wél. */
.personeel-page .week-header.corner {
  background: var(--vms-ink-700);
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.04em;
  padding-inline: 0.4rem;
}
.personeel-page .week-slot {
  background: var(--card);
  padding: 0.4rem;
  min-height: 60px;
  font-size: 0.72rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.personeel-page .week-school-label {
  background: var(--input-bg);
  padding: 0.3rem 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: var(--fw-subhead);
  color: var(--text);
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.personeel-page .week-school-label--clickable {
  cursor: pointer;
}
/* Rijlabel van een leerlijn- of accounthouderrij (ontwerp `2c`): geen knop —
   een rij die scholen mengt heeft geen school om te openen — maar wel de
   leerlijnruit en het aantal lessen, zodat de rij zichzelf benoemt. */
.personeel-page .week-school-label--groep {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}
.personeel-page .week-school-label .wl-naam {
  display: flex;
  align-items: center;
  gap: 5px;
}
.personeel-page .week-school-label .vms-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
}
.personeel-page .week-school-label .wl-telling {
  font-family: var(--font-label);
  font-size: var(--fs-ui-xs);
  font-weight: var(--fw-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Weekplanner-chip (designhandoff §5.3): leerlijnruit, dan de tijd op 700,
   dan de groep. Zachte leerlijnkleur als vlak, 7px afschuining, radius 0.
   De rand is een `inset` box-shadow — een `border` zou door de `clip-path`
   worden weggesneden. */
.personeel-page .week-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-ui-xs);
  font-weight: var(--fw-subhead);
  line-height: 1.3;
  cursor: default;
  white-space: nowrap;
  clip-path: polygon(
    7px 0,
    100% 0,
    100% calc(100% - 7px),
    calc(100% - 7px) 100%,
    0 100%,
    0 7px
  );
}
.personeel-page .week-chip.ll-scope--groen,
.personeel-page .week-chip.ll-scope--gezond,
.personeel-page .week-chip.ll-scope--techniek,
.personeel-page .week-chip.ll-scope--filosofie,
.personeel-page .week-chip.ll-scope--budo,
.personeel-page .week-chip.ll-scope--unknown {
  background: color-mix(in srgb, var(--ll) 14%, var(--vms-white));
  color: var(--ll-ink);
  border: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ll) 34%, transparent);
  cursor: pointer;
}
.personeel-page .week-chip .vms-dot {
  width: 0.5rem;
  height: 0.5rem;
}
.personeel-page .week-chip .wc-time {
  color: var(--ll-ink);
  font-weight: var(--fw-heading);
}
.personeel-page .week-chip .wc-groep {
  color: var(--vms-ink-900);
  font-weight: var(--fw-subhead);
}
/* Gedempt, maar tegen de leerlijnvulling gemeten — niet tegen de pagina.
   `--text-muted` (ink-500) haalt op de bleke leerlijntinten 4,06–4,73:1 en
   valt dus voor gezond, techniek en budo net onder AA; het token is
   gekalibreerd op de paginakleur, niet op een gekleurd vlak. `--vms-ink-700`
   geeft 8,78–10,22:1 op alle vijf de tinten en blijft zichtbaar lichter dan
   de ink-900 van `.wc-groep` ernaast, dus de hiërarchie blijft staan.
   (Gevonden door de axe-gate, 2026-08-29: 17 serious violations.) */
.personeel-page .week-chip .wc-suffix {
  color: var(--vms-ink-700);
  font-weight: var(--fw-body);
}

/* Buiten de school-groepering mengt een cel scholen, dus draagt de chip de
   schoolnaam zelf (ontwerp `2c` zet school en groep samen in de kaarttitel).
   Dan mag hij ook afbreken — een schoolnaam past niet op één regel in een
   vijfde van de rasterbreedte. `--vms-ink-700` haalt op alle vijf de
   leerlijntinten ruim AA (zie de noot bij `.wc-suffix`). */
.personeel-page .week-chip--breed {
  white-space: normal;
  flex-wrap: wrap;
}
.personeel-page .week-chip .wc-school {
  color: var(--vms-ink-700);
  font-weight: var(--fw-body);
}
.personeel-page .week-chip--breed .wc-groep::before {
  content: '·';
  margin-right: 0.25em;
  color: var(--vms-ink-400);
}

/* Botsing: wit vlak met rode omtrek en een rode ruit — nooit een rode
   vulling, want dan verdwijnt de leerlijnkleur en zie je wel *dát* er iets
   botst maar niet *wat*. Rood is hier status (`--danger`), geen leerlijn. */
.personeel-page .week-chip.week-chip--botsing,
.personeel-page .week-chip--botsing.ll-scope--groen,
.personeel-page .week-chip--botsing.ll-scope--gezond,
.personeel-page .week-chip--botsing.ll-scope--techniek,
.personeel-page .week-chip--botsing.ll-scope--filosofie,
.personeel-page .week-chip--botsing.ll-scope--budo,
.personeel-page .week-chip--botsing.ll-scope--unknown {
  background: var(--vms-white);
  box-shadow: inset 0 0 0 2px var(--danger);
}
.personeel-page .week-chip--botsing .vms-dot {
  background: var(--danger);
}

/* Een blok zonder leerlijn — kantoor, vakgroepoverleg, een dienst — in het
   beeld Personen (X2). Zwart-wit: kleur betekent hier leerlijn of status, en
   dit blok draagt geen van beide. Tot X2 was dit de "+ N meer"-inklapping;
   die is vervallen omdat een volle cel nu uitklapt. */
.personeel-page .week-chip.week-chip--neutraal {
  background: var(--vms-white);
  color: var(--vms-ink-700);
  box-shadow: inset 0 0 0 1.5px var(--vms-ink-200);
  cursor: default;
}
.personeel-page .week-chip--neutraal .vms-dot {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--vms-ink-400);
}
.personeel-page .week-chip--neutraal[data-action] {
  cursor: pointer;
}

/* Wie deze week op deze les staat (X2). De naam is de belangrijkste tekst na
   de tijd en staat daarom op dezelfde `--vms-ink-900` als de groep; de
   assistent- en "voor"-regel eronder zijn gedempt naar `--vms-ink-700`, dat
   op alle vijf de leerlijntinten ruim AA haalt (zie de noot bij
   `.wc-suffix`). */
.personeel-page .week-chip .wc-docent {
  color: var(--vms-ink-900);
  font-weight: var(--fw-subhead);
}
/* "voor <afwezige>" onder de naam: dezelfde regel als op de leskaart van het
   schoolraster, met dezelfde gedempte inkt als de assistentregel. */
.personeel-page .week-chip .wc-voor,
.personeel-page .week-chip .wc-assistent {
  color: var(--vms-ink-700);
  font-weight: var(--fw-body);
}
/* De rol op een chip in het beeld Personen (DEC-057 N-04): alleen "assistent",
   want vakdocent is de gewone stand. Zwart-wit met een dunne omtrek — kleur
   betekent hier leerlijn of status, en een rol is geen van beide.
   `--vms-ink-700` haalt op alle vijf de leerlijntinten ruim AA (zie de noot
   bij `.wc-suffix`). */
.personeel-page .week-chip .wc-rol {
  padding: 0 4px;
  border-radius: var(--radius-xs);
  box-shadow: inset 0 0 0 1px var(--vms-ink-400);
  color: var(--vms-ink-700);
  font-weight: var(--fw-body);
}
/* Niemand op de vakdocentplek: dezelfde rode omtrek om de naam als op de
   leskaart van het schoolraster (`.sr-kaart-docent.is-vacature`). */
.personeel-page .week-chip--vacature .wc-docent {
  padding: 0 4px;
  box-shadow: inset 0 0 0 1px var(--vms-red-ink);
  color: var(--vms-red-ink);
}
/* Gaat niet door voor deze persoon: de groep vervalt zichtbaar, de chip
   blijft leesbaar. Zelfde vorm als `.mw-blok--vervallen` op het
   schoolraster. */
.personeel-page .week-chip--vervallen .wc-groep,
.personeel-page .week-chip--vervallen .wc-school {
  text-decoration: line-through;
}
/* Gemeld afwezig: een zwart-witte statuschip bovenaan de dagcel. */
.personeel-page .week-chip.week-chip--afwezig {
  background: var(--vms-ink-50);
  color: var(--vms-ink-900);
  box-shadow: inset 0 0 0 1.5px var(--vms-ink-400);
  cursor: default;
}
.personeel-page .week-chip--afwezig .vms-dot {
  background: var(--vms-ink-900);
}
.personeel-page .week-chip--afwezig .wc-suffix {
  color: var(--vms-ink-900);
  font-weight: var(--fw-subhead);
}

/* Beeld Personen (X2): rijen zijn personen, kolommen de vijf dagen. Zelfde
   raster als het weekraster ernaast, met een bredere labelkolom — een
   persoonsnaam past niet in de 100px die een schoolnaam krijgt. */
.personeel-page .week-grid--personen {
  grid-template-columns: 150px repeat(5, 1fr);
}
.personeel-page .week-school-label--persoon {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}
/* Op een telefoon is 150px een derde van de breedte; de naam mag dan
   afbreken in plaats van de vijf dagkolommen weg te drukken. */
@media (max-width: 700px) {
  .personeel-page .week-grid--personen {
    grid-template-columns: 96px repeat(5, 1fr);
  }
  .personeel-page .week-school-label--persoon {
    word-break: break-word;
  }
}

/* Telling onder de filters: het antwoord op "verberg ik nu iets?". */
.personeel-page .planner-telling {
  margin: 0 0 0.6rem;
  color: var(--text-muted);
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.personeel-page .week-empty {
  color: var(--vms-ink-300);
  font-style: italic;
  font-size: var(--fs-ui-xs);
  padding: 0.2rem;
}
.personeel-page .planner-note {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.personeel-page .planner-note--spaced {
  margin-top: 1rem;
}
.personeel-page .planner-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
}
.personeel-page .planner-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.personeel-page .planner-filter-group label {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: var(--fw-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-muted);
}
.personeel-page .planner-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: 250px;
}
.personeel-page .planner-action-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.personeel-page .planner-reset-inline {
  margin-left: 0.5rem;
}
/* Planner-filterchips liften op de gedeelde .filter-pill (tokens.css); hier
   alleen de compacte maatvoering voor het dichte filterpaneel. */
.personeel-page .pf-chip {
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  gap: 0.4rem;
}
.personeel-page .pf-chip .vms-dot {
  width: 0.6rem;
  height: 0.6rem;
}
/* Leerlijnfilter (designhandoff §5.3): **actief = zwart gevuld**, inactief
   = omtrek `--vms-ink-200`. Tot deze ronde was actief een zachte
   leerlijnwas met leerlijn-ink-tekst; dat las als "deze leerlijn is
   bijzonder" in plaats van "dit filter staat aan", en op vijf tegelijk
   actieve chips werd de hele rij bont. De ruit ín de chip houdt zijn
   leerlijnkleur — die zegt wélk filter het is, het zwarte vlak zegt dát hij
   aan staat. Wit op `--vms-ink-900` haalt 16,9:1. */
.personeel-page .pf-chip.active.ll-scope--groen,
.personeel-page .pf-chip.active.ll-scope--gezond,
.personeel-page .pf-chip.active.ll-scope--techniek,
.personeel-page .pf-chip.active.ll-scope--filosofie,
.personeel-page .pf-chip.active.ll-scope--budo {
  background: var(--vms-ink-900);
  color: var(--vms-white);
  border-color: var(--vms-ink-900);
}

/* Hover mag de zwarte vulling niet opheffen: `.filter-pill:hover` zet
   `color: var(--vms-ink-900)`, wat op zwart onleesbaar is. */
.personeel-page .pf-chip.active.ll-scope--groen:hover,
.personeel-page .pf-chip.active.ll-scope--gezond:hover,
.personeel-page .pf-chip.active.ll-scope--techniek:hover,
.personeel-page .pf-chip.active.ll-scope--filosofie:hover,
.personeel-page .pf-chip.active.ll-scope--budo:hover {
  background: var(--vms-ink-700);
  border-color: var(--vms-ink-700);
  color: var(--vms-white);
}
/* ------------------------------------------------------------
   "Groepeer op" — de segmented control (ontwerp `2c`)
   ------------------------------------------------------------
   Dezelfde aan/uit-taal als de filterchips ernaast: **actief = zwart
   gevuld**, inactief = inkt-omtrek. Alleen groter, want dit is geen filter
   maar de vorm van het hele raster — 44px is bovendien een fatsoenlijk
   aanraakdoel. De afschuining is de vormtaal (radius 0, `clip-path` links-
   boven/rechtsonder); de rand moet daarom een `inset` box-shadow zijn, want
   een `border` snijdt de `clip-path` weg. Om dezelfde reden staat de
   focusring naar bínnen. */
.personeel-page .planner-groepeer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.personeel-page .pf-groep {
  min-height: 44px;
  padding: 0 1.05rem;
  border: none;
  border-radius: 0;
  background: var(--card);
  color: var(--vms-ink-900);
  box-shadow: inset 0 0 0 1.5px var(--vms-ink-900);
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: var(--fw-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  clip-path: polygon(
    var(--vt-schuin-s, 9px) 0,
    100% 0,
    100% calc(100% - var(--vt-schuin-s, 9px)),
    calc(100% - var(--vt-schuin-s, 9px)) 100%,
    0 100%,
    0 var(--vt-schuin-s, 9px)
  );
}
.personeel-page .pf-groep:hover {
  background: var(--vms-ink-100);
  color: var(--vms-ink-900);
}
.personeel-page .pf-groep.active,
.personeel-page .pf-groep.active:hover {
  background: var(--vms-ink-900);
  color: var(--vms-white);
  font-weight: var(--fw-subhead);
}
.personeel-page .pf-groep.active:hover {
  background: var(--vms-ink-700);
}
.personeel-page .pf-groep:focus-visible {
  outline: 2px solid var(--vms-ink-900);
  outline-offset: -5px;
}
.personeel-page .pf-groep.active:focus-visible {
  outline-color: var(--vms-white);
}

.personeel-page .planner-filters select {
  padding: 0.5rem 0.7rem;
  min-height: 44px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  max-width: 190px;
  transition:
    border-color var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-fast) var(--ease-soft);
}
.personeel-page .planner-filters select:focus {
  outline: none;
  border-color: var(--vms-ink-900);
  box-shadow: var(--ring-accent);
}
.personeel-page .planner-warnings {
  background: var(--warning-light);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius);
  padding: 0.8rem 1.2rem;
  margin-bottom: 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--warning);
}
.personeel-page .planner-warnings ul {
  margin: 0.4rem 0 0 1.1rem;
}
.personeel-page .planner-warnings li {
  margin: 0.15rem 0;
}
.personeel-page .planner-warnings strong {
  color: var(--text);
  font-family: var(--font-heading);
  font-weight: var(--fw-subhead);
}
.personeel-page .planner-warning-icon {
  width: 1em;
  height: 1em;
  vertical-align: -2px;
  margin-right: 0.3rem;
}

/* ============================================================
   Botsingsbalk boven de weekplanner (designhandoff §5.3)
   ============================================================
   Een botsing is een fout in het rooster, geen aandachtspunt: rood gevuld,
   wit erop, met een ruit als marker en per regel een link naar het rooster
   van die school. Wit op `--danger` (#c0392b) haalt 5,4:1 — AA.

   Bewust géén leerlijnkleur hier en géén rode vulling op de chip in het
   raster: de chip blijft wit met rode omtrek, zodat je ziet wélke twee
   lessen botsen. Rood is status, nooit identiteit. */

.personeel-page .planner-botsingen {
  margin-bottom: 1rem;
  padding: 0.9rem 1.2rem;
  color: var(--vms-white);
  background: var(--danger);
  border: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.personeel-page .planner-botsingen strong {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--vms-white);
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.personeel-page .planner-botsing-ruit {
  --vt-ruit-maat: 11px;
  --vt-ruit-kleur: var(--vms-white);
}

.personeel-page .planner-botsingen ul {
  margin: 0.45rem 0 0 1.1rem;
}

.personeel-page .planner-botsingen li {
  margin: 0.2rem 0;
}

.personeel-page .planner-botsing-link {
  display: inline-flex;
  align-items: center;
  margin-left: 0.55rem;
  padding: 0.1rem 0.6rem;
  color: var(--danger);
  background: var(--vms-white);
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(
    7px 0,
    100% 0,
    100% calc(100% - 7px),
    calc(100% - 7px) 100%,
    0 100%,
    0 7px
  );
}

.personeel-page .planner-botsing-link:hover {
  background: var(--vms-ink-100);
}

/* clip-path snijdt een outline buiten het vlak weg: de ring loopt binnen. */
.personeel-page .planner-botsing-link:focus-visible {
  outline: var(--vt-lijn-dik) solid var(--danger);
  outline-offset: calc(-1 * var(--vt-lijn-dik) - 1px);
}

/* De FLIP van "Groepeer op" schrijft zijn transitie op de chip zelf, en
   `js/weekplanner.js` meet bij `prefers-reduced-motion: reduce` niet eens.
   Deze regel is de tweede grendel: hij houdt de chips stil ook als er ooit
   langs een andere weg een transitie op komt te staan. De eindstand klopt
   sowieso — die zet de her-render neer, niet de animatie. */
@media (prefers-reduced-motion: reduce) {
  .personeel-page .week-chip {
    transition: none !important;
  }
}

/* De knop "Printen" in de filterrij is de enige print-ingang op deze
   pagina, dus print betekent hier: het weekraster op papier. De balk, de
   andere kaarten en alle bediening vallen weg — die zeggen op papier
   niets. (Op dashboard.html deed hetzelfde blok dit voor de tab.) */
@media print {
  .personeel-page .app-bar,
  .personeel-page .page-kop,
  .personeel-page .card:not(#roosterCard),
  .personeel-page #rsMenu,
  .personeel-page .modal-overlay,
  .personeel-page .planner-filters,
  .personeel-page .planner-note,
  .personeel-page .btn {
    display: none !important;
  }
  .personeel-page .week-grid,
  .personeel-page .week-chip,
  .personeel-page .week-header,
  .personeel-page .week-school-label {
    break-inside: avoid;
  }
}