/* Beheer: enkel klassen met voorvoegsel b-. Tokens uit merk.css. Eerst gsm, vanaf 60em kolommen naast elkaar. */

.b-lichaam { background: var(--kleur-papier); }

/* Schil */
.b-kop { border-bottom: 1px solid var(--kleur-gips); background: var(--kleur-papier); }
.b-kop .logo-plaats { color: var(--kleur-den); }
.b-kop__binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--r-2) var(--r-4);
  max-width: var(--pagina-breed);
  margin-inline: auto;
  padding: var(--r-2) var(--pagina-rand);
}
.b-menu-gsm > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--r-2);
  min-height: var(--tik);
  padding-inline: var(--r-3);
  border: 2px solid var(--kleur-den);
  border-radius: var(--hoek);
  color: var(--kleur-den);
  font-weight: var(--gewicht-nadruk);
  cursor: pointer;
}
.b-menu-breed { display: none; }
.b-menu { margin: var(--r-2) 0 0; padding: 0; list-style: none; }
.b-menu > li { margin: 0; max-width: none; }
.b-menu a {
  display: inline-flex;
  align-items: center;
  gap: var(--r-2);
  min-height: var(--tik);
  padding-inline: var(--r-1);
  color: var(--kleur-den);
}
.b-menu a[aria-current="page"] { font-weight: var(--gewicht-kop); }
.b-pagina { padding-block: var(--r-5) var(--r-7); }
.b-pagina > h1 { margin-top: var(--r-2); }
.b-voet { padding-block: var(--r-4); border-top: 1px solid var(--lijn); background: var(--kleur-gips); }
.b-voet p { margin: 0; font-size: var(--t-klein); }

@media (min-width: 60em) {
  .b-menu-gsm { display: none; }
  .b-menu-breed { display: block; flex: 1 1 auto; }
  .b-menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 var(--r-3); margin: 0; }
}

/* Kleine hulpstukken */
.b-klein { min-height: var(--tik); padding: var(--r-1) var(--r-3); font-size: var(--t-klein); }
.b-los { margin-top: var(--r-4); }
.b-tussenkop { margin-top: var(--r-6); }
.b-soort { font-weight: var(--gewicht-nadruk); }
.b-uur { margin: 0; font-weight: var(--gewicht-nadruk); font-variant-numeric: tabular-nums; }
.b-berichttekst { white-space: pre-wrap; overflow-wrap: anywhere; }
.b-gevaarzone { margin-top: var(--r-6); }

/* Dagkeuze en filter */
.b-dagtitel { margin: 0 0 var(--r-3); font-size: var(--t-h3); font-weight: var(--gewicht-kop); }
.b-dagkeuze { display: flex; flex-wrap: wrap; gap: var(--r-2); margin-top: var(--r-3); }
.b-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--r-3); margin-top: var(--r-4); }
.b-filter .veld { flex: 1 1 11rem; margin: 0; }

/* Agenda: op gsm onder elkaar, op computer naast elkaar */
.b-kolommen { position: relative; display: grid; gap: var(--r-6); margin-top: var(--r-5); } /* relative: zie .tabelkader */
.b-kolom { min-width: 0; }
.b-kolom > h2 { margin: 0; font-size: var(--t-h3); }
.b-kolomacties { display: flex; flex-wrap: wrap; gap: 0 var(--r-3); margin: var(--r-2) 0 0; font-size: var(--t-klein); }
.b-kolomacties a { display: inline-flex; align-items: center; min-height: var(--tik); }
.b-regels .moment { font-size: var(--t-basis); }
.b-regels { margin-top: var(--r-3); }
.b-regels > .b-vrij { padding-block: var(--r-1); }
.b-regels > .b-blok { background: var(--kleur-gips); padding-inline: var(--r-2); }
.b-vrij .regels__acties { align-items: center; }

@media (min-width: 60em) {
  .b-kolommen {
    grid-auto-flow: column;
    grid-auto-columns: minmax(19rem, 1fr);
    overflow-x: auto;
    padding-bottom: var(--r-3);
  }
}

/* Op gsm één therapeut per keer: wisselen met de links, zonder script. Op computer staan ze naast elkaar. */
.b-wissel { display: flex; flex-wrap: wrap; gap: 0 var(--r-3); margin: var(--r-4) 0 0; padding: 0; list-style: none; }
.b-wissel > li { margin: 0; }
.b-wissel a { display: inline-flex; align-items: center; min-height: var(--tik); }
@supports selector(:has(*)) {       /* zonder :has staan ze onder elkaar en blijft iedereen bereikbaar */
  @media (max-width: 59.99em) {
    .b-kolommen > .b-kolom:not(:first-child), .b-weken > .b-kolom:not(:first-child) { display: none; }
    .b-kolommen:has(.b-kolom:target) > .b-kolom, .b-weken:has(.b-kolom:target) > .b-kolom { display: none; }
    .b-kolommen:has(.b-kolom:target) > .b-kolom:target, .b-weken:has(.b-kolom:target) > .b-kolom:target { display: block; }
  }
}
@media (min-width: 60em) {
  .b-wissel { display: none; }
}

/* Week: dagen naast elkaar op computer, onder elkaar op gsm */
.b-weken { display: grid; gap: var(--r-6); margin-top: var(--r-5); }
.b-week { display: grid; gap: var(--r-4); margin-top: var(--r-3); }
.b-weekdag { min-width: 0; padding: var(--r-3); border: 1px solid var(--kleur-gips); border-radius: var(--hoek); }
.b-weekdag h3 { margin: 0; font-size: var(--t-klein); font-weight: var(--gewicht-nadruk); }
.b-weekdag .regels > li { padding-block: var(--r-2); }
@media (min-width: 60em) {
  .b-week { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--r-2); }
}

/* Verslepen: enkel een hulp. Elke actie bestaat ook als knop (WCAG 2.5.7). */
[draggable="true"] { cursor: grab; }
.b-sleept [data-doel-begin], .b-sleept [data-doel-dag] { outline: 2px dashed var(--kleur-den); outline-offset: -2px; }
.b-sleephulp { display: none; }
@media (min-width: 60em) and (hover: hover) {
  .b-sleephulp { display: block; }
}
.b-snelmelding { margin-top: var(--r-4); }
.b-snelmelding:empty { margin: 0; }
.b-snelmelding .knop { margin-top: var(--r-2); }
.b-ongedaan { margin-top: var(--r-2); }

/* Eén tik vanuit de afspraak */
.b-rij { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--r-3); margin-top: var(--r-5); }
.b-rij .veld { flex: 1 1 14rem; margin: 0; min-width: 0; }

.b-lijst { margin-top: var(--r-6); }
.b-lijst > h2 { margin: 0; font-size: var(--t-h3); }

/* Gegevens van één afspraak of account */
.b-gegevens { display: grid; grid-template-columns: minmax(6rem, auto) 1fr; gap: var(--r-1) var(--r-4); margin: var(--r-4) 0 0; }
.b-gegevens dt { font-weight: var(--gewicht-nadruk); }
.b-gegevens dd { margin: 0; overflow-wrap: anywhere; }

/* Aanmelden: code, QR, herstelcodes */
.b-democode { margin-top: var(--r-4); }
.b-cijfers {
  font-size: var(--t-h2);
  font-weight: var(--gewicht-kop);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.b-sleutel { font-size: var(--t-basis); letter-spacing: 0.04em; overflow-wrap: anywhere; }
.b-stappen { margin-top: var(--r-4); padding-left: 1.4em; }
.b-stappen > li { margin-top: var(--r-3); max-width: var(--regel); }
.b-qr { display: block; width: 15rem; max-width: 100%; height: auto; margin-top: var(--r-3); background: var(--kleur-wit); }
.b-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--r-2);
  max-width: 40rem;
  margin: var(--r-4) 0 0;
  padding: 0;
  list-style: none;
  font-weight: var(--gewicht-nadruk);
  font-variant-numeric: tabular-nums;
}
.b-codes > li { margin: 0; padding: var(--r-2); border: 1px solid var(--lijn); border-radius: var(--hoek); }

/* Formulieren */
.b-lichaam select, .b-lichaam textarea { width: 100%; max-width: 100%; min-height: var(--tik); }
.b-werkdag, .b-keuzes { margin: var(--r-4) 0 0; padding: var(--r-3); border: 1px solid var(--lijn); border-radius: var(--hoek); }
.b-uurblok { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--r-3); margin-top: var(--r-2); }
.b-uurblok .veld { margin: 0; }
.b-tekstblok { padding-block: var(--r-4); border-top: 1px solid var(--lijn); }