/* Dashboard page layout and controls. */

/* KOP — de app-balk en haar actiekolom staan in app-nav.css; hier alleen
   wat Scholen zelf toevoegt. De blauwe banner met "Schooloverzicht" is per de
   fase-3-ronde vervallen: één balk, en de titel in de inhoud (ontwerp `3b`).

   De paginakop lijnt uit met .main en .scholen-balk eronder. */
.page-kop {
  max-width: 1200px;
  margin: var(--space-5) auto 0;
  padding: 0 var(--space-5);
}

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

/* Visueel verborgen, wel voorleesbaar — voor de statusregio #scholenStatus. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.dashboard-modal-open {
  overflow: hidden;
}

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

.btn-compact {
  padding: 0.4rem 0.8rem;
  font-size: var(--fs-ui-md);
}
.btn-mini {
  padding: 0.3rem 0.7rem;
  font-size: var(--fs-ui-sm);
}

/* BUTTONS (dashboard-specific) — de balk is sinds de fase-3-ronde wit, dus
   de secundaire controls staan er in het licht-idioom in: wit vlak, zwarte
   haarlijn, inkt-tekst. Ze stonden hier transparant met een wítte rand,
   omdat de balk toen een donker accentvlak was; op wit zou dat onzichtbaar
   zijn. */
.btn-white {
  background: var(--vms-white);
  color: var(--vms-ink-900);
  box-shadow: inset 0 0 0 1.5px var(--vms-ink-900);
}
.btn-white:hover {
  background: var(--vms-ink-100);
  color: var(--vms-ink-900);
  transform: translateY(var(--hover-lift));
}
.btn-ghost {
  background: var(--vms-white);
  color: var(--vms-ink-900);
  box-shadow: inset 0 0 0 1.5px var(--vms-ink-900);
}
.btn-ghost:hover {
  background: var(--vms-ink-100);
  color: var(--vms-ink-900);
}
/* Primaire actie in de balk (ontwerp `3b`): zwart gevuld met witte tekst —
   de enige gevulde knop in de balk, zodat er één primaire actie te zien is. */
.btn-alarm {
  background: var(--vms-ink-900);
  color: var(--vms-white);
  box-shadow: inset 0 0 0 1.5px var(--vms-ink-900);
  font-weight: var(--fw-heading);
  --btn-focus-kleur: var(--vms-white);
}
.btn-alarm:hover {
  background: var(--vms-ink-700);
  color: var(--vms-white);
  box-shadow: inset 0 0 0 1.5px var(--vms-ink-700);
  transform: translateY(var(--hover-lift));
}

/* Rustige refresh-icoonknop + overloop-exportmenu (§3 knop-hiërarchie): de
   secundaire acties (Excel, reservekopie, bestanden) verhuizen naar het overloopmenu. */
.hdr-icon-btn {
  background: var(--vms-white);
  color: var(--vms-ink-900);
  border: 1px solid var(--vms-ink-900);
  border-radius: var(--radius-sm);
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft);
}
.hdr-icon-btn:hover {
  background: var(--vms-ink-100);
}
.hdr-icon-btn svg {
  width: 18px;
  height: 18px;
}
.hdr-menu {
  position: relative;
  display: inline-block;
}
.hdr-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 240px;
  padding: 0.35rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.hdr-menu-list[hidden] {
  display: none;
}
.hdr-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  min-height: 44px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-ui-md);
  font-weight: var(--fw-subhead);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-soft);
}
.hdr-menu-item:hover {
  background: var(--vms-ink-100);
  color: var(--vms-ink-900);
}
.hdr-menu-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
}

#fileInput {
  display: none;
}

/* STATS BAR */

/* MAIN */
.main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* EMPTY STATE */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--card);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
}
.empty-state--grid {
  grid-column: 1/-1;
  padding: 2rem;
}
.empty-state .icon {
  margin-bottom: 1rem;
  color: var(--vms-ink-900);
  opacity: 0.5;
  line-height: 0;
  display: flex;
  justify-content: center;
}
.empty-state .icon svg {
  width: 3rem;
  height: 3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.empty-state h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 1.35rem;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.empty-state p {
  font-family: var(--font-body);
  color: var(--text-muted);
  font-size: var(--fs-ui-lg);
  max-width: 440px;
  margin: 0 auto 1.2rem;
}

/* ARCHIEF (beheer-only herstellijst) */
#archivedSection {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.archived-head h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 1.05rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.archived-count {
  font-size: var(--fs-ui-sm);
  font-weight: 600;
  background: var(--input-bg);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  padding: 0.1rem 0.55rem;
}
.archived-head p {
  font-family: var(--font-body);
  color: var(--text-muted);
  font-size: var(--fs-ui-md);
  margin-bottom: 0.9rem;
}
.archived-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.archived-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--card);
  border: 1px solid var(--border);
  /* was var(--radius-md) — dat token bestaat nergens, dus de regel was
     ongeldig en viel stil terug op 0. Nu een token dat echt bestaat. */
  border-radius: var(--radius-sm);
}
.archived-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.archived-name {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text);
}
.archived-meta {
  font-size: var(--fs-ui-sm);
  color: var(--text-muted);
}
.archived-restore {
  padding: 0.35rem 0.9rem;
  font-size: var(--fs-ui-md);
  flex-shrink: 0;
}

/* SEARCH / FILTER BAR */
.toolbar {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.search-box {
  flex: 1;
  min-width: 220px;
  position: relative;
}
.search-box input {
  width: 100%;
  padding: 0.6rem 1rem 0.6rem 2.7rem;
  min-height: 44px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-ui-lg);
  color: var(--text);
  outline: none;
  transition:
    border-color var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-fast) var(--ease-soft);
}
.search-box input:focus {
  border-color: var(--vms-ink-900);
  box-shadow: var(--ring-accent);
}
.search-box svg {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.filter-pills {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.filter-select {
  min-height: 44px;
  padding: 0.55rem 2.2rem 0.55rem 0.9rem;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: var(--fs-ui-md);
  font-weight: var(--fw-subhead);
  cursor: pointer;
  appearance: none;
  background-color: var(--card);
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M2 4l4 4 4-4%27 fill=%27none%27 stroke=%27%236E6E6B%27 stroke-width=%271.5%27/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
}
.new-school-btn {
  margin-left: auto;
}
.empty-secondary {
  margin-left: 0.5rem;
}

/* VIEW TOGGLE */
.view-toggle {
  display: flex;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.view-toggle button {
  padding: 0.45rem 0.7rem;
  min-height: 44px;
  background: var(--card);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background var(--dur-fast) var(--ease-soft);
}
.view-toggle button svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}
.view-toggle button.active {
  background: var(--vms-ink-900);
}
.view-toggle button.active svg {
  color: var(--vms-white);
}
.view-toggle button:not(:last-child) {
  border-right: 1px solid var(--border);
}

/* CARD GRID */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1rem;
  /* De omklapkaart (DEC-040) legt zijn achterkant absoluut over de voorkant.
     Dat werkt alleen als de kaart de volle hoogte van zijn rij heeft, anders
     krimpt hij naar de kortste inhoud en steekt de achterkant eruit. */
  align-items: stretch;
}
.cards-grid.list-view {
  grid-template-columns: 1fr;
}

/* SCHOOL CARD */
/* Ontwerp `3b`: één omkaderde kaart met naam, gereedbadge, adres, de vijf
   leerlijnruiten en één voetregel. De rand is een `inset` box-shadow — een
   echte `border` zou door de afschuining worden weggesneden — en wordt rood
   zodra de school geen invaller kan ontvangen. `overflow: hidden` kan weg: er
   steekt niets meer buiten de kaart, en samen met een `clip-path` snijdt het
   de afschuining dubbel. */
.school-card {
  background: var(--card);
  border: none;
  border-radius: 0;
  padding: 1.125rem 1.25rem;
  box-shadow: inset 0 0 0 var(--vt-lijn, 1.5px) var(--vms-ink-900);
  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)
  );
  transition:
    box-shadow var(--dur-base) var(--ease-soft),
    transform var(--dur-base) var(--ease-soft),
    border-color var(--dur-base) var(--ease-soft);
  animation: cardIn var(--dur-slow) var(--ease-out) both;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  /* Anker voor de achterkant hieronder. */
  position: relative;
}

/* ---- De omklapkaart (DEC-040 besluit 2) --------------------------------
   De voorkant is ontwerp `3b` en verandert niet. De kop (naam = disclosure +
   gereedbadge) blijft altijd zichtbaar; alleen de romp klapt om. De
   achterkant ligt absoluut over die romp: openklappen verandert de hoogte van
   de kaart dus niet en de rij eronder verspringt niet. Zij deelt de vulling
   van de kaart en dekt de voorkant af met de kaartkleur — geen doorschijnende
   laag, want de tekst eronder zou dan meelezen; de afgedekte voorkant gaat
   bovendien uit de toegankelijkheidsboom (`visibility: hidden`). */

.school-card-romp {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  /* Genoeg voor de achterkant (weekregel + drie actierijen, samen ±184px),
     zodat die nooit wordt afgeknipt of hoeft te scrollen — dat "scrolmenu"
     was de klacht van DEC-042. */
  min-height: 12.5rem;
  /* Het omklappen is een echte draai om de verticale as (DEC-042: "de
     kaartjes flippen niet echt"). De romp is het toneel met perspectief; voor-
     en achterkant staan rug aan rug en de klasse `school-card--open` draait
     het paar een halve slag. */
  perspective: 1200px;
}

.school-card-voor,
.school-card-achter {
  backface-visibility: hidden;
  transition: transform var(--dur-slow, 460ms) var(--ease-soft);
}

.school-card-voor {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  transform: rotateY(0deg);
}

/* De voorkant blijft zichtbaar zolang hij draait en gaat pas daarna uit de
   toegankelijkheidsboom: `visibility` wisselt met de vertraging van de
   draai, anders verdween de tekst vóór de kaart bewoog. */
.school-card--open .school-card-voor {
  visibility: hidden;
  transform: rotateY(180deg);
  transition:
    transform var(--dur-slow, 460ms) var(--ease-soft),
    visibility 0s linear var(--dur-slow, 460ms);
}

.school-card-achter {
  position: absolute;
  inset: 0;
  padding: 1.125rem 1.25rem;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
  transform: rotateY(-180deg);
}

.school-card--open .school-card-achter {
  transform: rotateY(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .school-card-voor,
  .school-card-achter,
  .school-card--open .school-card-voor {
    transition: none;
  }
}

/* Zonder deze regel wint de `display: flex` hierboven van de `display: none`
   die de browser aan `[hidden]` geeft: de achterkant zou dan altijd over de
   voorkant liggen en elke klik op de kaart opvangen. */
.school-card-achter[hidden] {
  display: none;
}

/* Een geopende kaart is de actieve kaart: dikkere inktlijn, geen hover-lift
   (die zou onder de vinger wegschuiven terwijl je een knop zoekt). */
.school-card--open {
  box-shadow: inset 0 0 0 var(--vt-lijn-dik, 3px) var(--vms-ink-900);
}
.school-card--open:hover {
  transform: none;
}

.ka-week {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-ui-lg);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

/* De acties als compacte rijen met een haarlijn ertussen — geen gestapelde
   46px-knoppen (die pasten niet en lieten de achterkant scrollen). Een rij
   is een link óf een knop; beide lezen hetzelfde. Het pijltje rechts zegt
   "hier ga je heen". */
.ka-acties {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.ka-actie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.25rem;
  padding: 0.2rem 0;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: var(--fs-ui-lg);
  font-weight: var(--fw-heading);
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  cursor: pointer;
}

.ka-actie::after {
  content: '\203A';
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
}

.ka-actie:hover {
  color: var(--vms-ink-900);
  background: var(--vms-ink-50);
}

.ka-actie:hover::after {
  color: var(--vms-ink-900);
}

.ka-actie:focus-visible {
  outline: var(--vt-lijn-dik, 2.5px) solid var(--vms-ink-900);
  outline-offset: -3px;
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.school-card:hover {
  background: var(--vms-ink-50);
  transform: translateY(var(--hover-lift));
}

/* Rode omtrek: deze school kan vandaag geen invaller ontvangen. Rood is hier
   status (`--danger`), nooit de leerlijn Techniek. */
.school-card--mis {
  box-shadow: inset 0 0 0 var(--vt-lijn, 1.5px) var(--danger);
}
.school-card:nth-child(2) {
  animation-delay: 40ms;
}
.school-card:nth-child(3) {
  animation-delay: 80ms;
}
.school-card:nth-child(4) {
  animation-delay: 120ms;
}
.school-card:nth-child(5) {
  animation-delay: 160ms;
}
.school-card:nth-child(n + 6) {
  animation-delay: 200ms;
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.card-top h2 {
  /* De titelknop hierin is `--vt-raakvlak-klein` hoog terwijl de kop zelf maar
     25px meet (1,25rem × 1,25). De helft van dat verschil aan weerskanten houdt
     de kaart precies even hoog als voorheen. */
  margin: calc((25px - var(--vt-raakvlak-klein)) / 2) 0;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--fw-heading);
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.25;
}

/* De gereedbadge: één woord met een statuskleur als vlak. Wit op --success
   haalt 4,9:1 en op --danger 5,4:1 — allebei AA. */
.gereed-badge {
  flex: none;
  padding: 3px 9px;
  color: var(--vms-white);
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gereed-badge.ok {
  background: var(--success);
}
.gereed-badge.mis {
  background: var(--danger);
}

.card-adres {
  margin: 0.1875rem 0 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-ui-lg);
  line-height: 1.4;
}

/* De voet: óf wat de school is, óf wat er mist. Nooit allebei. */
.card-voet {
  padding-top: 0.6875rem;
  border-top: 1px solid var(--border-subtle);
  color: var(--vms-ink-700);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-ui-lg);
  line-height: 1.4;
  text-wrap: pretty;
}
.card-voet--mis {
  color: var(--danger);
}
/* De kaarttitel is een echte knop: het énige toetsenbordanker van de kaart,
   nadat `role="button"` van het kaartvlak af moest (`nested-interactive`).
   Deze reset houdt hem visueel exact de kop die hij was; de focusring komt
   uit de globale `:focus-visible` in tokens.css.

   Het raakvlak was de regelhoogte van de kop: 25px, onder de norm. Het groeit
   naar `--vt-raakvlak-klein` en de kop eronder trekt dat verschil met een
   negatieve marge weer weg, zodat de klikzone groter wordt zonder dat de kaart
   hoger wordt. Dat past binnen de 18px kaartpadding — de knop steekt er niet
   uit en raakt de gereedbadge ernaast niet, die horizontaal gescheiden staat. */
.card-title-btn {
  appearance: none;
  display: flex;
  align-items: center;
  min-height: var(--vt-raakvlak-klein);
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.freshness-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 0;
  font-size: var(--fs-ui-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.freshness-badge.fresh {
  background: var(--success-light);
  color: var(--success);
}
.freshness-badge.aging {
  background: var(--warning-light);
  color: var(--warning);
}
.freshness-badge.stale {
  background: var(--danger-light);
  color: var(--danger);
}
.freshness-badge svg {
  width: 10px;
  height: 10px;
}

/* De vijf leerlijnruiten onder het adres (ontwerp `3b`), 13px met 6px ertussen.
   Ze stonden tot 2026-08-29 klein rechtsboven náást de naam. */
.ll-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 0.75rem;
}
.ll-dots .vms-dot {
  width: 13px;
  height: 13px;
}
.ll-dots .vms-dot.ll-dot--uit {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--vms-ink-200);
}

/* Leerlijn-chip = kleurstip (.vms-dot) + label op een zachte tint-achtergrond;
   kleuren komen per leerlijn inline uit LEERLIJNEN (colorLight/ink/color). */
.ll-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-ui-sm);
  font-weight: var(--fw-subhead);
  border: 1px solid transparent;
}
.ll-tag .vms-dot {
  width: 0.6rem;
  height: 0.6rem;
}

/* Leerlijn-stippen in de kaartkop — compacte aanwezigheid, labels in de detail */
/* LIST VIEW overrides (audit 2026-09-08): de lijst is een lijst, geen
   kolom kaarten op volle breedte. Tot deze ronde hield elke rij de 12,5rem
   van de kaartromp aan — vierentwintig scholen scannen kostte in de lijst
   méér scrollen dan in het raster, terwijl de lijst juist de compacte vorm
   hoort te zijn. Nu staat de voorkant op één regel (adres · ruiten ·
   voetregel) en is de romp zo hoog als zijn inhoud; alleen een omgeklapte
   rij groeit tot de hoogte die haar achterkant (de actierijen) nodig heeft.
   De inklap-animatie van het raster blijft uit: een rij die op zijn plek
   verschijnt hoeft niet aan te komen. */
.list-view .school-card {
  padding: 0.85rem 1.25rem;
  animation: none;
}

.list-view .card-top {
  margin-bottom: 0.3rem;
}

.list-view .school-card-romp {
  min-height: 0;
}

.list-view .school-card--open .school-card-romp {
  min-height: 12.5rem;
}

.list-view .school-card-voor {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1.25rem;
}

.list-view .card-adres,
.list-view .ll-dots {
  margin: 0;
}

.list-view .ll-dots {
  align-self: center;
}

.list-view .card-voet {
  flex: 1 1 18rem;
  padding-top: 0;
  border-top: none;
}
/* DETAIL MODAL */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgb(var(--shadow-color) / 0.4);
  backdrop-filter: blur(4px);
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  overflow-y: auto;
}
.modal-overlay.show {
  display: flex;
}
.modal {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 700px;
  animation: modalIn var(--dur-slow) var(--ease-out);
  margin-top: 2rem;
  margin-bottom: 2rem;
}
@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: var(--fw-heading);
}
.modal-close {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-soft);
}
.modal-close:hover {
  background: var(--input-bg);
}
.modal-close svg {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}
.modal-body {
  padding: 1.2rem 1.5rem 1.5rem;
  max-height: 70vh;
  overflow-y: auto;
}
.detail-section {
  margin-bottom: 1.4rem;
}
/* Sectie-kicker in Oswald (merk-eyebrow) met zachte accent-onderlijn. */
.detail-section h3 {
  display: flex;
  align-items: center;
  font-family: var(--font-label);
  font-size: var(--fs-ui-md);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text);
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--vms-ink-100);
}
.detail-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0.4rem;
  padding: 0.35rem 0;
  font-size: var(--fs-ui-lg);
  border-bottom: 1px solid var(--border-subtle);
}
.detail-row--actions {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
}
.detail-row:last-child {
  border-bottom: none;
}
.detail-label {
  font-family: var(--font-heading);
  font-weight: var(--fw-subhead);
  color: var(--text-muted);
}
.detail-value {
  font-family: var(--font-body);
  color: var(--text);
}
.detail-value.empty {
  color: var(--vms-ink-300);
  font-style: italic;
}
.detail-row-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}
.detail-version-note {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--vms-ink-900);
  /* was var(--radius-md): een niet-bestaand token, zie .archived-row. */
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem;
  font-size: var(--fs-ui-md);
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.detail-version-note-icon {
  width: 1em;
  height: 1em;
  vertical-align: -2px;
  margin-right: 0.35rem;
}
.detail-preview-actions {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--border);
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}
.detail-tag-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.ll-tag.ll-scope--groen,
.ll-tag.ll-scope--gezond,
.ll-tag.ll-scope--techniek,
.ll-tag.ll-scope--filosofie,
.ll-tag.ll-scope--budo,
.ll-tag.ll-scope--unknown {
  background: var(--ll-soft);
  color: var(--ll-ink);
}
.schedule-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--ll) 7%, transparent);
  color: var(--ll-ink);
  border: 1px solid color-mix(in srgb, var(--ll) 15%, transparent);
  padding: 2px 8px;
  border-radius: 0;
  font-size: var(--fs-ui-sm);
  font-weight: 600;
  margin: 2px;
}
.freshness-badge--detail {
  font-size: var(--fs-ui-sm);
}
.detail-brief-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.detail-brief-actions .vms-dot {
  width: 0.6rem;
  height: 0.6rem;
}
.detail-action-block {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--border);
  text-align: center;
}
.detail-action-block--archive {
  border-top-width: 1px;
}
.detail-edit-link {
  text-decoration: none;
  padding: 0.6rem 1.5rem;
}
.detail-archive-button {
  color: var(--danger);
  border-color: var(--danger);
}
.detail-action-note {
  font-size: var(--fs-ui-sm);
  color: var(--text-muted);
  margin-top: 0.5rem;
}
.version-list-loading {
  font-size: var(--fs-ui-md);
  color: var(--text-muted);
}

/* STALE BANNER */

@media (max-width: 600px) {
  .page-kop {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .hdr-menu {
    position: static;
  }
  .hdr-menu-list {
    right: 0;
    left: auto;
    min-width: min(240px, calc(100% - 2rem));
    max-width: calc(100% - 2rem);
  }
  .main {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .cards-grid {
    grid-template-columns: 1fr;
  }
  .detail-row {
    grid-template-columns: 1fr;
  }
  .detail-label {
    font-size: var(--fs-ui-sm);
  }
}

@media print {
  .header,
  .toolbar,
  .modal-overlay,
  .toast,
  .view-toggle,
  .btn,
  .hdr-menu {
    display: none !important;
  }
  .school-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid var(--border);
  }
  .card-footer {
    background: var(--vms-ink-50);
  }
  body {
    background: var(--vms-white);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .main {
    padding: 0;
    max-width: 100%;
  }
  .cards-grid {
    gap: 0.6rem;
  }
}

/* Dashboard-specific extracted styles. */

.ivw-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgb(var(--shadow-color) / 0.4);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-soft);
  backdrop-filter: blur(4px);
}

.ivw-overlay.show {
  opacity: 1;
}

.ivw-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  padding: 1.3rem 1.4rem;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(8px) scale(0.98);
  transition: transform var(--dur-base) var(--ease-out);
}

.ivw-overlay.show .ivw-sheet {
  transform: none;
}

.ivw-head {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.ivw-title {
  margin: 0;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--fw-heading);
}

.ivw-sub {
  margin: 0.2rem 0 0;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-ui-lg);
}

.ivw-close {
  padding: 0.2rem;
  color: var(--text-muted);
  line-height: 0;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 0;
}

.ivw-close:hover {
  color: var(--text);
}

.ivw-label {
  display: block;
  margin: 0.9rem 0 0.35rem;
  color: var(--text-muted);
  font-family: var(--font-label);
  font-size: var(--fs-ui-sm);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.ivw-input {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.85rem;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: var(--fs-ui-lg);
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
}

.ivw-input:focus {
  border-color: var(--vms-ink-900);
  outline: none;
  box-shadow: var(--ring-accent);
}

.ivw-hint {
  min-height: 1.1em;
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-ui-md);
}

.ivw-hint.err {
  color: var(--danger);
}

.ivw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.1rem;
}

.ivw-btn {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  color: var(--vms-white);
  font-family: var(--font-heading);
  font-size: var(--fs-ui-lg);
  font-weight: var(--fw-subhead);
  cursor: pointer;
  background: var(--vms-ink-900);
  border: 1.5px solid var(--vms-ink-900);
  border-radius: var(--radius-pill);
  transition:
    background var(--dur-fast) var(--ease-soft),
    border-color var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft);
}

.ivw-btn:hover:not(:disabled) {
  background: var(--vms-ink-700);
  border-color: var(--vms-ink-700);
  transform: translateY(var(--hover-lift));
}

.ivw-btn:active:not(:disabled) {
  transform: scale(var(--press-scale));
}

.ivw-btn:disabled {
  color: var(--vms-ink-700);
  cursor: default;
  background: var(--vms-ink-100);
  border-color: var(--vms-ink-200);
}

@media print {
  .ivw-overlay {
    display: none !important;
  }
}

/* Niet-actieve leerlijn op een schoolkaart: dezelfde ruit in omtrek
   (designhandoff §5.2). Neutraal grijs, want een leerlijnkleur zou hier
   "draait wél" suggereren en een statuskleur zou er status van maken.
   Twee klassen diep, zodat hij de `.vms-dot.ll-scope--*`-vullingen
   hierboven niet hoeft te ontwijken. */
.ll-dots .vms-dot.ll-dot--uit {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--vms-ink-200);
}