/* ============================================================
   Scholen — de balk boven het schooloverzicht
   ============================================================
   Designhandoff "Rooster & inval fase 3" §5.2 + §6 (`4a`, `5a`).
   Vervangt de vier statistiekpillen (.stats-bar) op dashboard.html.

   De regels staan er alleen als er iets te doen is; `js/scholen-balk.js`
   beslist dat en `js/dashboard.js` tekent het. Is er niets, dan begint de
   pagina bij de schoolkaarten — geen groene "alles goed"-melding (`5b`).

   Sinds ontwerp `10b` (2026-08-29) is dit géén zwart vlak meer maar een
   **rij regels**. Reden: het vlak kan maar één stem dragen. Zodra iemand én
   planner én accounthouder is, moeten er twee zinnen staan, en twee zwarte
   vlakken boven elkaar dekken elkaar af — allebei even hard schreeuwen is
   niet schreeuwen. Een regel is licht genoeg om te stapelen: statusruit,
   rolregel, zin, knoppen rechts, en een haarlijn ertussen.

   Vormtaal (§2): radius 0, afschuining via clip-path, randen als
   `inset` box-shadow (een `border` zou door de afschuining worden
   weggesneden) en Oswald-labels. Alle klassen en variabelen komen uit
   vormtaal.css + tokens.css; hier staat geen enkele losse kleur.

   Kleur: de band is aandacht, dus de statusruit is --warning. Nooit een
   leerlijnkleur — dat is het ownerbesluit uit §3 van de handoff (en
   §6.4 van tokens.css).

   Link ná tokens.css en vormtaal.css.
   ============================================================ */

/* Buitenrand = dezelfde goot als .main en .stale-banner op dashboard.html. */
.scholen-balk {
  max-width: 1200px;
  margin: var(--space-5) auto 0;
  padding: 0 var(--space-5);
}

/* Eén regel per stem. De haarlijn zit bovenaan elke regel en onderaan de
   laatste, zodat de rij als blok leest zonder een vlak te zijn. */
.scholen-bericht {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-top: var(--vt-lijn) solid var(--vms-ink-900);
}

.scholen-bericht:last-child {
  border-bottom: var(--vt-lijn) solid var(--vms-ink-900);
}

/* De statusruit. Decoratief (aria-hidden): de zin ernaast zegt het al. De
   kleur komt van .vt-status-mis / .vt-status-let-op uit vormtaal.css. */
.scholen-bericht-ruit {
  --vt-ruit-maat: 14px;
  flex: none;
}

.scholen-bericht-tekst {
  flex: 1;
  min-width: 0;
}

/* Uit welke stoel lees je deze regel (ontwerp `5a`)? */
.scholen-bericht-rol {
  margin: 0 0 0.1875rem;
  color: var(--text-muted);
  font-family: var(--font-label);
  font-weight: var(--fw-label);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.scholen-bericht-zin {
  margin: 0;
  color: var(--vms-ink-900);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: 1.1875rem;
  line-height: 1.35;
  text-wrap: pretty;
}

/* De tweede regel: wat de eerste zin niet noemt. `--text-muted` mag hier wél
   — deze regel staat op de paginakleur, niet op een zwart vlak. */
.scholen-bericht-sub {
  margin: 0.25rem 0 0;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-small);
  line-height: 1.4;
  text-wrap: pretty;
}

.scholen-bericht-acties {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (max-width: 700px) {
  .scholen-balk {
    padding: 0 var(--space-4);
  }
  /* Op smal gaan de knoppen onder de tekst staan in plaats van ernaast: naast
     een zin van twee regels wordt een knop anders tot een streepje geknepen. */
  .scholen-bericht {
    flex-wrap: wrap;
  }
  .scholen-bericht-tekst {
    flex: 1 1 100%;
  }
  .scholen-bericht-acties {
    flex: 1 1 100%;
  }
  .scholen-bericht-acties .vt-knop {
    flex: 1 1 12rem;
  }
}

@media print {
  .scholen-balk {
    display: none !important;
  }
}