/**
 * Visueel systeem — fase 8A. Vervangt de oude stylesheet volledig.
 * De screens die deze tokens gebruiken komen in 8B-8F; tot die tijd is dit
 * bestand getest via styleguide.html, niet via het oude scherm.
 */

@font-face {
  font-family: "Schibsted Grotesk Variable";
  src: url("fonts/SchibstedGrotesk-Variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit Variable";
  src: url("fonts/Outfit-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans Variable";
  src: url("fonts/DMSans-Variable.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --ff-display: "Schibsted Grotesk Variable", sans-serif;
  --ff-head: "Outfit Variable", sans-serif;
  --ff-body: "DM Sans Variable", sans-serif;

  --fs-base: 15px;
  --fs-min: 12px;

  --radius-card: 14px;
  --radius-control: 10px;
  --radius-day: 8px;
  --border-width: 1px;
  --tap-min: 44px;

  /* licht (default) */
  --bg: #f6f5f1;
  --card: #ffffff;
  --card2: #fbfaf7;
  --text: #1a211e;
  --text-muted: #697069;
  --text-faint: #a2a8a2;
  --border: #e9e7e1;
  --border-soft: #f1efe9;
  --input-bg: #f8f7f3;
  --shadow: rgba(20, 30, 25, 0.06);
  --accent: #0e7a52;
  --accent-strong: #0a5a3c;
  --accent-bg: #eef7f2;
  --accent-border: #c5e6d6;
  --accent-text: #0a5a3c;
  --sel-bg: #f0f8f4;
  --danger-bg: #fdf3f2;
  --danger-border: #f3d2cf;
  --danger-text: #c0392f;
  --waarschuwing-bg: #fdf6e7;
  --waarschuwing-text: #8a5a06;
  --purple-bg: #f5f3ff;
  --purple-text: #6d28d9;

  /* vakkleuren — licht. Kleur codeert het vak, nooit de status. */
  --vak-psy-bg: #fdf3f2;
  --vak-psy-text: #c0392f;
  --vak-py-bg: #f5f3ff;
  --vak-py-text: #6d28d9;
  --vak-agtech-bg: #eef7f2;
  --vak-agtech-text: #0a5a3c;
  --vak-rte-bg: #eef4fb;
  --vak-rte-text: #185fa5;
  --vak-chi-bg: #fdf5e7;
  --vak-chi-text: #854f0b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1210;
    --card: #171c19;
    --card2: #1f2521;
    --text: #e8ece9;
    --text-muted: #98a09a;
    --text-faint: #646b66;
    --border: #2a312d;
    --border-soft: #242b27;
    --input-bg: #1f2521;
    --shadow: rgba(0, 0, 0, 0.45);
    --accent: #1fa06a;
    --accent-strong: #5fd6a0;
    --accent-bg: #10251b;
    --accent-border: #1d4534;
    --accent-text: #5fd6a0;
    --sel-bg: #13271d;
    --danger-bg: #2a1614;
  --waarschuwing-bg: #2b2008;
  --waarschuwing-text: #f0c47a;
    --danger-border: #4a2521;
    --danger-text: #f0867c;
    --purple-bg: #1c1830;
    --purple-text: #c4b5fd;

    /* vakkleuren — donker */
    --vak-psy-bg: #2a1614;
    --vak-psy-text: #f0867c;
    --vak-py-bg: #1c1830;
    --vak-py-text: #c4b5fd;
    --vak-agtech-bg: #10251b;
    --vak-agtech-text: #5fd6a0;
    --vak-rte-bg: #132435;
    --vak-rte-text: #8cc0f0;
    --vak-chi-bg: #2b2008;
    --vak-chi-text: #f0c47a;
  }
}

:root[data-theme="dark"] {
  --bg: #0e1210;
  --card: #171c19;
  --card2: #1f2521;
  --text: #e8ece9;
  --text-muted: #98a09a;
  --text-faint: #646b66;
  --border: #2a312d;
  --border-soft: #242b27;
  --input-bg: #1f2521;
  --shadow: rgba(0, 0, 0, 0.45);
  --accent: #1fa06a;
  --accent-strong: #5fd6a0;
  --accent-bg: #10251b;
  --accent-border: #1d4534;
  --accent-text: #5fd6a0;
  --sel-bg: #13271d;
  --danger-bg: #2a1614;
  --waarschuwing-bg: #2b2008;
  --waarschuwing-text: #f0c47a;
  --danger-border: #4a2521;
  --danger-text: #f0867c;
  --purple-bg: #1c1830;
  --purple-text: #c4b5fd;

  /* vakkleuren — donker */
  --vak-psy-bg: #2a1614;
  --vak-psy-text: #f0867c;
  --vak-py-bg: #1c1830;
  --vak-py-text: #c4b5fd;
  --vak-agtech-bg: #10251b;
  --vak-agtech-text: #5fd6a0;
  --vak-rte-bg: #132435;
  --vak-rte-text: #8cc0f0;
  --vak-chi-bg: #2b2008;
  --vak-chi-text: #f0c47a;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Een eigen display-regel (bijv. display: grid) is specifieker dan de
   display: none die de browser aan [hidden] geeft, waardoor een verborgen
   element tóch zichtbaar blijft. Dat gebeurde met de dagkiezer in Weken.
   Deze regel maakt hidden overal betrouwbaar. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  /* Geen pull-to-refresh en geen doorveren aan de randen: in een
     geïnstalleerde app hoort een lijst te stoppen waar hij stopt. */
  overscroll-behavior: none;
}

h1,
h2,
h3 {
  font-family: var(--ff-head);
  margin: 0;
}

.tap-target {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
}
.tap-target:active {
  transform: scale(0.98);
}

.card {
  background: var(--card);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 3px var(--shadow);
}

/* fase 8B — navigatieschil */

button,
input,
select {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  color: var(--text);
}

button {
  background: var(--card);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-control);
  padding: 8px 14px;
  cursor: pointer;
}
button:active {
  transform: scale(0.98);
}

input,
select {
  background: var(--input-bg);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-control);
  padding: 8px 10px;
}

#fout-melding {
  background: var(--danger-bg);
  color: var(--danger-text);
  border-bottom: var(--border-width) solid var(--danger-border);
  padding: 10px 12px;
  font-size: var(--fs-min);
}

/* Op een breed scherm rekte alles mee: dagvakjes van bijna 200px met een
   datumcijfer en drie streepjes erin. De inhoud houdt nu een leesbare
   kolombreedte aan en staat gecentreerd; op een telefoon verandert er niets,
   want daar wint de ondergrens van de padding. */
:root {
  --leesbreedte: 880px;
}

/* Geïnstalleerd op een telefoon loopt de balk onder de statusbalk/notch door
   en de tabbalk onder de home-indicator. De insets tellen daarom op bij de
   eigen padding; op desktop zijn ze 0 en verandert er niets. */
#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px max(12px, calc((100% - var(--leesbreedte)) / 2));
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  border-bottom: var(--border-width) solid var(--border);
  background: var(--card);
  flex-shrink: 0;
}
#topbar-week {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.topbar-datum {
  font-family: var(--ff-display);
  font-size: 16px;
}
.topbar-week {
  font-size: var(--fs-min);
  color: var(--text-muted);
}
#topbar-rechts {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-shrink: 1;
}
.absentie-knop {
  font-size: var(--fs-min);
  padding: 6px 10px;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#schermen {
  flex: 1;
  min-height: 0;
}
.scherm {
  height: 100%;
  overflow-y: auto;
  padding: 16px max(16px, calc((100% - var(--leesbreedte)) / 2));
  position: relative;
}

.scherm-kop {
  font-family: var(--ff-head);
  font-size: 20px;
  margin: 0 0 4px;
}

#bottomnav {
  display: flex;
  border-top: var(--border-width) solid var(--border);
  background: var(--card);
  flex-shrink: 0;
  padding-inline: max(0px, calc((100% - var(--leesbreedte)) / 2));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.navknop {
  flex: 1;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 8px 4px;
  font-size: var(--fs-min);
  color: var(--text-muted);
}
.navknop[aria-current="true"] {
  color: var(--accent-strong);
  font-weight: 600;
}

#instellingen-paneel {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  align-items: flex-end;
  z-index: 10;
}
#instellingen-paneel:not([hidden]) {
  display: flex;
}
#instellingen-inhoud {
  background: var(--card);
  border: var(--border-width) solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: 0 1px 3px var(--shadow);
  padding: 16px;
  width: 100%;
  max-width: var(--leesbreedte);
  margin: 0 auto;
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#instellingen-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#instellingen-kop h2 {
  font-family: var(--ff-head);
  font-size: 18px;
}
/* Het paneel was één doorlopende kolom; per onderwerp een blok met een kop
   en een scheidingslijn maakt zichtbaar waar het een over het ander gaat. */
.instellingen-sectie {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: var(--border-width) solid var(--border-soft);
}
.vak-meetellen-regel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-min);
}
.instellingen-sectie h3 {
  font-size: 15px;
}
.instellingen-sectie .uitklap {
  margin-top: 0;
  border-top: none;
}
/* ⋯-menu achter een regel in Overzicht. <details> in plaats van eigen
   open/dicht-logica: werkt met toetsenbord en heeft geen JS nodig. */
.rij-menu {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
  align-self: flex-start;
}
/* Geen rand: met een omrand vakje per regel liepen er tientallen kleine
   dozen langs de rechterkant, die harder riepen dan de afspraken zelf. Het
   raakvlak blijft even groot — dat zit in de padding, niet in de rand. */
.rij-menu > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 10px;
  border: var(--border-width) solid transparent;
  border-radius: 4px;
  color: var(--text-faint);
  line-height: 1;
  letter-spacing: 0.08em;
}
.rij-menu > summary::-webkit-details-marker {
  display: none;
}
.rij-menu[open] > summary {
  border-color: var(--accent-border);
  background: var(--accent-bg);
  color: var(--accent-text);
}
.rij-menu-lijst {
  position: absolute;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 10rem;
  background: var(--card);
  border: var(--border-width) solid var(--border);
  border-radius: 4px;
  box-shadow: 0 2px 6px var(--shadow);
}
.rij-menu-lijst button {
  text-align: left;
  border: none;
  border-radius: 0;
  background: none;
  padding: 8px 10px;
  font-size: var(--fs-min);
}
.rij-menu-lijst button + button {
  border-top: var(--border-width) solid var(--border-soft);
}
/* Een knop die om bevestiging heeft gevraagd, staat in de waarschuwkleur tot
   je kiest — anders zie je niet dat je nog een keer moet tikken. */
.bevestig-actief {
  color: var(--danger-text);
  border-color: var(--danger-border);
  background: var(--danger-bg);
}
.rij-knop-gevaar.bevestig-actief,
.menu-knop-gevaar.bevestig-actief {
  font-weight: 600;
}

#eigen-beheer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}
.beheer-sectie {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: var(--border-width) solid var(--border-soft);
}
.beheer-sectie h3 {
  margin: 0;
  font-size: 15px;
}

.overzicht-toevoegen {
  display: flex;
}

.oplevering-notitie {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 4px;
}

.eigen-items-lijst ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eigen-item-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-min);
}
.eigen-items-leeg {
  color: var(--text-muted);
  font-size: var(--fs-min);
}
.export-waarschuwing {
  color: var(--danger-text);
}

#planner-form form,
.reis-form form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.veld-rij {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  align-items: center;
  gap: 8px;
}
.veld-label {
  color: var(--text-muted);
  font-size: var(--fs-min);
}
.veld-rij input,
.veld-rij select {
  min-width: 0;
  width: 100%;
}
.reis-vluchten {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reis-vlucht-rij {
  display: flex;
  gap: 6px;
  align-items: center;
}
.reis-vlucht-rij input {
  min-width: 0;
  flex: 1;
}
/* Drie niveaus in plaats van altijd rood: rood als er een tentamen, een
   presentatie of een harde deadline in de periode valt, geel als het alleen
   lessen kost, groen als de dagen vrij zijn. */
.kosten-waarschuwing {
  border-radius: var(--radius-control);
  padding: 8px 10px;
  font-size: var(--fs-min);
  background: var(--danger-bg);
  color: var(--danger-text);
}
.kosten-waarschuwing ul {
  margin: 4px 0 0;
  padding-left: 18px;
}
.kosten-waarschuwing.niveau-vrij {
  background: var(--accent-bg);
  color: var(--accent-text);
}
.kosten-waarschuwing.niveau-let-op {
  background: var(--waarschuwing-bg);
  color: var(--waarschuwing-text);
}
.kosten-waarschuwing.niveau-ernstig {
  background: var(--danger-bg);
  color: var(--danger-text);
}
.conflict-rij {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-min);
}
.reisstatus-paneel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.reisstatus-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-min);
}
#export-regel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-min);
}

.visueel-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.knop-als-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-control);
  padding: 8px 14px;
  cursor: pointer;
  font-size: var(--fs-base);
}
.knop-als-label:active {
  transform: scale(0.98);
}

/* fase 8C — scherm "Maand" */

.maand-header-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.maand-pijl {
  padding: 8px 12px;
  font-family: var(--ff-display);
}
.maand-naam {
  flex: 1;
  font-family: var(--ff-head);
  font-size: 20px;
}
.maand-vandaag-knop {
  font-size: var(--fs-min);
  padding: 8px 10px;
}

.maand-weekbalk {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: var(--fs-min);
}

.maand-weergave-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.maand-dagkoppen {
  display: grid;
  grid-template-columns: 28px repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 2px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-min);
}

.maand-weekrij {
  display: grid;
  grid-template-columns: 28px repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 2px;
}

/* FASE-9.md B5 punt 1 — weekgewicht: weeknummer + aantal zware momenten.
   Twee kale cijfers onder elkaar lazen als twee weeknummers; het aantal
   staat nu in een eigen rondje, zodat duidelijk is wat wat is. */
.maand-weekgewicht {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: var(--radius-day);
}
.maand-weekgewicht-week {
  font-family: var(--ff-display);
  font-size: 10px;
  color: var(--text-faint);
}
.maand-weekgewicht-getal {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--card2);
  border: var(--border-width) solid var(--border);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}
.maand-weekgewicht.zwaar {
  border: var(--border-width) solid var(--danger-border);
}
.maand-weekgewicht.zwaar .maand-weekgewicht-getal {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

/* min-height in plaats van aspect-ratio: een vierkant vakje is op een
   telefoon grotendeels leeg in de compacte stand, en te krap zodra er in de
   uitgebreide stand tekst in staat. Nu is een rij precies zo hoog als zijn
   inhoud nodig heeft. */
.dagvak {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-day);
  background: var(--card);
  padding: 4px;
  min-width: 0;
  min-height: 46px;
  overflow: hidden;
}
.dagvak.buiten-maand {
  opacity: 0.45;
}
.dagvak.buiten-periode {
  background: transparent;
  border-color: transparent;
  color: var(--text-faint);
  cursor: default;
}
.dagvak.status-gemarkeerd {
  background: var(--card2);
}
.dagvak.status-gemarkeerd .dagvak-cijfer {
  color: var(--text-faint);
}
.dagvak[data-vandaag="true"] {
  border: 2px solid var(--accent);
}
.dagvak.geselecteerd {
  background: var(--sel-bg);
}
.dagvak-cijfer {
  font-family: var(--ff-display);
  font-size: 15px;
}
.dagvak-streepjes {
  margin-top: auto;
  display: flex;
  gap: 2px;
  align-items: center;
}
.streepje {
  width: 8px;
  height: 3px;
  border-radius: 2px;
}
.stip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
/* Twee regels in plaats van één afgeknipte: op één regel bleef er in een
   vakje van ~50px maar zo'n zes tekens over ("General…"), wat niets zegt. */
.dagvak-regel {
  width: 100%;
  margin-top: 2px;
  font-size: 9px;
  line-height: 1.15;
  color: var(--text-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* Uitgebreide stand: per vak een eigen regel, elk afgekapt op de breedte van
   het vakje — zo blijft in elk geval de afkorting plus het begin leesbaar. */
.dagvak-onderwerp {
  width: 100%;
  margin-top: 1px;
  font-size: 9px;
  line-height: 1.2;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dagvak-eigen-balk {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 0 0 var(--radius-day) var(--radius-day);
}
/* Geboekt = volle band in de accentkleur, aangevraagd = alleen een omlijning.
   Het onderscheid moet in een vakje van 48px leesbaar zijn; de eerdere
   variant (accent-bg met accent-border) was op een witte kaart praktisch
   onzichtbaar, waardoor reizen in de maandweergave niet opvielen. */
.dagvak-reis-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--accent);
}
.dagvak-reis-band.reis-eerste {
  left: 2px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.dagvak-reis-band.reis-laatste {
  right: 2px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.dagvak-reis-band.reis-aangevraagd {
  background: var(--accent-bg);
  border: var(--border-width) solid var(--accent);
  border-style: dashed;
}
.dagvak-reis-vlucht {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  background: var(--accent);
  transform: rotate(45deg);
}

.maand-telling {
  color: var(--text-muted);
  font-size: var(--fs-min);
  margin: 8px 0 0;
}

.uitklap {
  margin-top: 12px;
  border-top: var(--border-width) solid var(--border-soft);
}
.uitklap > summary {
  display: flex;
  align-items: center;
  min-height: 36px;
  color: var(--text-muted);
  font-size: var(--fs-min);
  cursor: pointer;
}
/* Een uitklap die iets toevoegt is een actie, geen kopje. Stond in dezelfde
   grijstint als de "nog geen eigen items"-tekst eronder en was daardoor niet
   als knop te herkennen, terwijl Exporteer en Importeren ernaast wel een
   knoprand hadden. */
.uitklap-actie {
  border-top: none;
  margin-top: 8px;
}
.uitklap-actie > summary {
  justify-content: center;
  min-height: var(--tap-min);
  padding: 8px 14px;
  background: var(--card);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-control);
  color: var(--text);
  font-size: var(--fs-base);
  list-style: none;
}
.uitklap-actie > summary::-webkit-details-marker {
  display: none;
}
.uitklap-actie[open] > summary {
  border-color: var(--accent);
  color: var(--accent-text);
  margin-bottom: 8px;
}

.maand-legenda {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-min);
}
.maand-legenda li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.legenda-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legenda-swatch-reis {
  width: 14px;
  height: 5px;
  border-radius: 2px;
  background: var(--accent);
}

.dagblad-paneel {
  position: absolute;
  inset: 0;
  background: var(--bg);
  overflow-y: auto;
  padding: 16px max(16px, calc((100% - var(--leesbreedte)) / 2));
}
.dagblad-kop-rij {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.dagblad-kop-rij > button {
  flex-shrink: 0;
}
.dagblad-bladeren {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.dagblad-pijl {
  font-family: var(--ff-display);
  padding: 8px 10px;
}
.dagblad-pijl:disabled {
  color: var(--text-faint);
  cursor: default;
}
.dagblad-datum {
  font-family: var(--ff-head);
  font-size: 17px;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
}
.dagblad-kop {
  font-family: var(--ff-head);
  font-size: 15px;
  margin: 16px 0 4px;
}
.dagblad-klein {
  color: var(--text-muted);
  font-size: var(--fs-min);
}
.dagblad-onbekende-velden {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  font-size: var(--fs-min);
  color: var(--text-muted);
}
.dagblad-onbekende-velden input {
  width: 8em;
}

/* FASE-9.md B4 — lesblokken in het dagblad */
.lesblok {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: var(--border-width) solid var(--border-soft);
}
.lesblok-balkje {
  flex-shrink: 0;
  width: 4px;
  border-radius: 2px;
}
.lesblok-inhoud {
  flex: 1;
  min-width: 0;
}
.lesblok-kop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: var(--ff-head);
}
.lesblok-vak {
  font-size: 15px;
}
.lesblok-tijd {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: var(--fs-min);
}
.lesblok-meta {
  margin: 2px 0;
  color: var(--text-muted);
  font-size: var(--fs-min);
}
.lesblok-onderwerp {
  margin: 4px 0;
}
.lesblok-acties {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  font-size: var(--fs-min);
  color: var(--danger-text);
}
.lesblok-naar-vak {
  margin-top: 6px;
  font-size: var(--fs-min);
  padding: 4px 8px;
}
.dagblad-moment {
  padding: 8px 0;
  border-bottom: var(--border-width) solid var(--border-soft);
}

/* Knoppen die bij een regel horen: klein en terughoudend, want ze staan
   naast elke rij in een dichte lijst. */
.verberg-knop,
.rij-knop {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: var(--fs-min);
  color: var(--text-muted);
}

.dagblad-acties {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  border-top: var(--border-width) solid var(--border);
  padding-top: 12px;
}

/* fase 8D — scherm "Weken" */

.periodekiezer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.periode-knop {
  font-size: var(--fs-min);
  padding: 6px 10px;
}
.periode-knop[aria-current="true"] {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

.eigen-periode-velden {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
}
.eigen-periode-fout {
  color: var(--danger-text);
  font-size: var(--fs-min);
  margin: 0;
  width: 100%;
}

.weken-navigatie {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.weekkaart {
  padding: 12px;
  margin-bottom: 12px;
}
.weekkaart-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
  margin-bottom: 8px;
}
.weekkaart-titelblok {
  flex: 1 1 200px;
  min-width: 0;
}
.weekkaart-titel {
  display: block;
  font-family: var(--ff-head);
  font-size: 15px;
}
.weekkaart-collegeweek {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-min);
}
.weekkaart-badge {
  flex-shrink: 0;
  background: var(--purple-bg);
  color: var(--purple-text);
  border-radius: var(--radius-control);
  padding: 4px 8px;
  font-size: var(--fs-min);
}

.weekkaart-grid {
  display: grid;
  grid-template-columns: 16px repeat(7, 1fr);
  gap: 2px;
  align-items: center;
}
.weekkaart-dagkop {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-min);
  background: none;
  border: none;
  border-radius: var(--radius-control);
  padding: 2px 0;
  font-family: inherit;
  cursor: pointer;
}
.weekkaart-dagkop:hover,
.weekkaart-dagkop:focus-visible {
  background: var(--card2);
  color: var(--text);
}
.weekkaart-dagdeelkop {
  color: var(--text-muted);
  font-size: var(--fs-min);
  text-transform: uppercase;
}
.weekkaart-cel {
  min-height: 16px;
  border-radius: 3px;
  background: var(--border-soft);
}
.weekkaart-cel-vak {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--card);
  font-family: var(--ff-display);
  font-size: 10px;
  letter-spacing: 0.02em;
}
.weekkaart-reis-cel {
  height: 6px;
}
.weekkaart-reis-cel.bezet {
  background: var(--accent);
}
.weekkaart-reis-cel.reis-eerste {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.weekkaart-reis-cel.reis-laatste {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.weekkaart-reis-cel.reis-aangevraagd {
  background: var(--accent-bg);
  border: var(--border-width) dashed var(--accent);
}

.weekkaart-uitzonderingen {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: var(--fs-min);
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.weekkaart-knoppen {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.weekkaart-dagkiezer {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.weekkaart-dagkiezer button {
  font-size: var(--fs-min);
  padding: 6px 2px;
}

/* fase 8E — scherm "Overzicht" */

.telkaarten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.telkaart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px;
  text-align: left;
}
.telkaart-getal {
  font-family: var(--ff-display);
  font-size: 28px;
  line-height: 1;
}
.telkaart-tekst {
  font-size: var(--fs-min);
  color: var(--text-muted);
}

.project-kaart {
  padding: 12px;
  margin-bottom: 8px;
}
.project-kaart-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--ff-head);
  font-size: 15px;
  margin-bottom: 4px;
}
.project-kaart ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-min);
}
.project-waarschuwing {
  background: var(--danger-bg);
  color: var(--danger-text);
  border-radius: var(--radius-control);
  padding: 8px 10px;
  font-size: var(--fs-min);
  margin: 0 0 8px;
}

.eigen-project-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 20px;
}

.overzicht-weergave-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-bottom: 6px;
}
.weergave-knop {
  font-size: var(--fs-min);
  padding: 6px 10px;
}
.weergave-knop[aria-current="true"] {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

.overzicht-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.filter-chip {
  font-size: var(--fs-min);
  padding: 6px 10px;
}
.filter-chip[aria-current="true"] {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

/* Vakblok in Overzicht: zelfde kleurscheiding als de lesblokken in het
   dagblad — een balk in de vakkleur langs het hele blok, niet alleen een
   gekleurde kop. */
.overzicht-vakblok {
  border-left: 4px solid var(--vakblok-kleur);
  padding-left: 10px;
  margin-bottom: 14px;
}
.overzicht-vak-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-family: var(--ff-head);
  font-size: 15px;
  margin: 0 0 8px;
}
.overzicht-vak-kop::-webkit-details-marker {
  display: none;
}
/* "Waar is ruimte": de vensters waarin iets past, met hun prijs. Rustig
   gehouden — dit is een lijst om te scannen, niet om te bedienen. */
.overzicht-ruimte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-control);
  background: var(--card);
}
.ruimte-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ruimte-kop h3 {
  margin: 0;
  font-size: 15px;
}
.ruimte-keuze {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-min);
  color: var(--text-muted);
}
.ruimte-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ruimte-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-top: var(--border-width) solid var(--border-soft);
  font-size: var(--fs-min);
}
.ruimte-lengte {
  flex-shrink: 0;
  width: 46px;
  text-align: right;
  font-family: var(--ff-display);
  font-size: 15px;
}
.ruimte-midden {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.ruimte-lengte-ruim {
  color: var(--accent-text);
  font-weight: 600;
}
.ruimte-prijs,
.ruimte-risico {
  color: var(--text-muted);
}

.overzicht-gemist {
  padding: 8px 10px;
  border-radius: var(--radius-control);
  background: var(--danger-bg);
  color: var(--danger-text);
  font-size: var(--fs-min);
}
.overzicht-gemist h3 {
  margin: 0 0 4px;
  font-size: var(--fs-min);
}
.overzicht-gemist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.overzicht-gemist li {
  display: flex;
  align-items: center;
  gap: 4px;
}
.overzicht-vak-telling {
  flex-shrink: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-min);
  font-weight: normal;
  color: var(--text-muted);
}
.vak-chip {
  flex-shrink: 0;
  min-width: 32px;
  text-align: center;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.overzicht-vak-kop:first-child {
  margin-top: 0;
}

.overzicht-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
/* De scheidingslijn doet het werk dat eerst een gat van 8px deed; met een
   tapbare ⋯-knop erin werd elke regel anders 60px hoog. */
.overzicht-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  border-bottom: var(--border-width) solid var(--border-soft);
  font-size: var(--fs-min);
}
.overzicht-rij-datum {
  flex-shrink: 0;
  width: 66px;
  color: var(--text-muted);
  font-family: var(--ff-display);
}
.overzicht-rij-inhoud {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.overzicht-leeg {
  color: var(--text-muted);
  font-size: var(--fs-min);
}

/* fase 8F — scherm "Vakken" */

.vakken-lijst {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vak-kaart {
  padding: 16px;
  border-radius: var(--radius-card);
  border: none;
  text-align: left;
  font-family: var(--ff-head);
  font-size: 15px;
}

.vak-detail-kop {
  margin-bottom: 16px;
}
.vak-detail-naam {
  font-family: var(--ff-head);
  font-size: 20px;
  margin: 0;
  min-width: 0;
}
.vak-detail-regels {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: var(--fs-min);
}
.vak-detail-regels dt {
  color: var(--text-muted);
}
.vak-detail-regels dd {
  margin: 0;
}
.vak-detail-klein {
  color: var(--text-muted);
  font-size: var(--fs-min);
}

.onbekend-veld {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.onbekend-label {
  color: var(--danger-text);
}
.onbekend-veld input {
  padding: 4px 6px;
  font-size: var(--fs-min);
}


.vak-sectie-kop {
  font-family: var(--ff-head);
  font-size: 15px;
  margin: 20px 0 8px;
}

.weging-rij {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
  font-size: var(--fs-min);
}
.weging-balk-wrap {
  height: 8px;
  border-radius: 4px;
  background: var(--border-soft);
  overflow: hidden;
}
.weging-balk {
  height: 100%;
  background: var(--accent);
}

.teller-rij {
  display: flex;
  align-items: center;
  gap: 6px;
}
.teller-rij input[type="number"] {
  width: 64px;
}

.lesoverzicht-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-min);
}