/* ============================================================
   Keuzescherm invalbrief (js/brief-keuze.js) — DEC-040 besluit 4
   ============================================================
   Eén dialoog op vier pagina's (Scholen, het formulier, Mijn scholen en
   het Inval-scherm), dus alles staat hier ongescoopt: de dialoog hangt aan
   `document.body` en heeft geen paginaklasse boven zich. Alle selectors
   beginnen daarom met `.bk-`.

   Vormtaal: radius 0, randen als inset-schaduw, de afschuining komt van
   `.vt-kaart`/`.vt-knop` uit vormtaal.css — dit bestand voegt er geen eigen
   clip-path aan toe. Kleur draagt hier alleen leerlijn (de ruit op een chip);
   status komt in dit scherm niet voor. */

.bk-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgb(var(--shadow-color) / 0.45);
  overflow-y: auto;
}

.bk-dialoog {
  width: min(34rem, 100%);
  max-height: calc(100vh - 2 * var(--space-4));
  overflow-y: auto;
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
  box-shadow:
    inset 0 0 0 var(--vt-lijn) var(--vms-ink-900),
    var(--shadow-lg);
}

/* ---- kop ---------------------------------------------------- */

.bk-kop {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.bk-kop-ruit {
  --vt-ruit-kleur: var(--vms-ink-900);
  --vt-ruit-maat: 13px;
  margin-top: 0.35rem;
  flex: none;
}

.bk-titel {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.bk-sub {
  margin: 0.15rem 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--text-muted);
}

/* ---- de twee groepen ---------------------------------------- */

.bk-groep {
  display: grid;
  gap: var(--space-3);
}

/* Een fieldset draagt van zichzelf een rand en marges die de vormtaal niet
   kent; de groep leunt op de kaart eromheen. */
.bk-groep--dagen {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}

.bk-groep-kop {
  margin: 0;
  padding: 0;
  color: var(--text-muted);
}

.bk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Een chip is een `.vt-knop--klein` die zijn aan/uit-stand in aria-pressed
   draagt: uit = omtrek, aan = zwart gevuld. De ruit houdt de leerlijnkleur,
   ook in de aan-stand — kleur draagt hier leerlijn, geen status. */
.bk-chip .bk-chip-ruit {
  --vt-ruit-maat: 9px;
}

.bk-chip[aria-pressed='true'] {
  background: var(--vms-ink-900);
  color: var(--vms-white);
}

.bk-chip[aria-disabled='true'] {
  cursor: default;
}

.bk-chip[data-leerlijn='groen'] .bk-chip-ruit {
  --vt-ruit-kleur: var(--vms-green);
}

.bk-chip[data-leerlijn='gezond'] .bk-chip-ruit {
  --vt-ruit-kleur: var(--vms-blue);
}

.bk-chip[data-leerlijn='techniek'] .bk-chip-ruit {
  --vt-ruit-kleur: var(--vms-red);
}

.bk-chip[data-leerlijn='filosofie'] .bk-chip-ruit {
  --vt-ruit-kleur: var(--vms-yellow);
}

.bk-chip[data-leerlijn='budo'] .bk-chip-ruit {
  --vt-ruit-kleur: var(--vms-purple);
}

/* ---- dagen --------------------------------------------------- */

.bk-keuzes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.bk-keuze,
.bk-dag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-ui-lg);
  cursor: pointer;
}

.bk-dag input:disabled + span {
  color: var(--text-muted);
}

.bk-raster {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-1);
}

.bk-raster-rij {
  display: grid;
  gap: var(--space-1);
}

.bk-raster-label {
  color: var(--text-muted);
}

.bk-raster-dagen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

/* ---- hint en acties ------------------------------------------ */

/* Leeg = geen ruimte; de dialoog mag niet springen zodra er iets te melden
   is, dus de regel houdt zijn hoogte zodra hij tekst draagt. */
.bk-hint:empty {
  display: none;
}

.bk-hint {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--vms-grey-soft);
  box-shadow: inset 0 0 0 var(--vt-lijn) var(--border);
  font-size: var(--fs-ui-md);
}

.bk-acties {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

@media (max-width: 480px) {
  .bk-dialoog {
    padding: var(--space-4);
  }

  .bk-acties {
    justify-content: stretch;
  }

  .bk-acties .vt-knop {
    flex: 1 1 auto;
  }
}