/* SAPI Agenda — restyled for usability
   Font: Inter (Google Fonts) + system fallback
   Tone: neutral near-white, single restrained accent (indigo)
   Category colors kept but desaturated into quiet chips
*/

:root {
  /* Neutrals */
  --bg:          oklch(0.985 0.002 250);
  --surface:    #ffffff;
  --surface-2:  oklch(0.97 0.003 250);
  --surface-3:  oklch(0.94 0.004 250);
  --border:     oklch(0.90 0.005 250);
  --border-2:   oklch(0.94 0.004 250);
  --text:       oklch(0.20 0.02 260);
  --text-muted: oklch(0.48 0.015 260);
  --text-faint: oklch(0.62 0.012 260);

  /* Accent */
  --accent:     oklch(0.55 0.17 265);
  --accent-2:   oklch(0.65 0.14 265);
  --accent-bg:  oklch(0.96 0.03 265);
  --accent-ring:oklch(0.55 0.17 265 / 0.25);

  /* Category colors — muted */
  --c-les:         oklch(0.62 0.13 150);
  --c-les-bg:      oklch(0.95 0.04 150);
  --c-wacht:       oklch(0.60 0.17 355);
  --c-wacht-bg:    oklch(0.95 0.04 355);
  --c-vergadering: oklch(0.65 0.14 60);
  --c-vergadering-bg: oklch(0.96 0.05 60);
  --c-andere:      oklch(0.60 0.14 230);
  --c-andere-bg:   oklch(0.95 0.04 230);
  --c-verlof:      oklch(0.60 0.18 25);
  --c-verlof-bg:   oklch(0.95 0.04 25);
  --c-feestdag:    oklch(0.50 0.05 60);
  --c-feestdag-bg: oklch(0.94 0.02 60);
  --c-vakantie:    oklch(0.55 0.03 250);
  --c-vakantie-bg: oklch(0.94 0.01 250);

  /* Klas-kleur voor "Wacht" — vaste optie, geen door de gebruiker aangemaakte klas */
  --k-wacht:oklch(0.60 0.17 355);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.16), 0 6px 12px rgba(15, 23, 42, 0.06);

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: var(--safe-bottom);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: none; }

/* ---------- Layout shell ---------- */

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px 64px;
}

/* ---------- App title (in de toolbar zelf — spaart een volledige rij hoogte) ---------- */

.app-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0; /* voorkomt dat de h1-marge uit main.css hier binnensijpelt */
  flex-shrink: 0;
}

.app-title .mark {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0;
}

.schooljaar {
  color: var(--text-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* De gedeelde .lk-main (styles/admin.css) zet enkel overflow-x:hidden, maar per CSS-spec
   berekent een niet-'visible' overflow-x de andere as (overflow-y, hier nog op de
   standaardwaarde 'visible') automatisch óók als 'auto' zodra één van beide niet
   'visible' is. Dat maakt .lk-main een scroll-container — maar omdat de hoogte 'auto'
   blijft (past exact rond de inhoud), scrolt er intern nooit iets, en elke
   position:sticky-nakomeling (hieronder) heeft dan geen ruimte om te "plakken": hij
   scrollt gewoon mee weg met de pagina i.p.v. te blijven staan. Enkel op deze pagina
   overschrijven (laatst geladen stylesheet, zie CLAUDE.md) i.p.v. globaal in admin.css,
   want andere backend-pagina's zijn hier niet door getroffen (lpd-tool/labelbeheer
   hebben geen sticky-nakomeling van .lk-main zelf) en overflow-x:hidden kan daar nog
   wel nodig zijn tegen brede tabellen. */
.lk-main { overflow-x: visible; }

/* De gedeelde .lk-nav is enkel position:sticky (main.css) — die "laat los" zodra haar
   containing block (body) op is, d.w.z. bij het einde van de pagina, en kan daarnaast al
   eerder tijdens het scrollen kort loslaten door de combinatie met .sticky-header
   hieronder (2 gestapelde sticky+backdrop-filter-lagen is een gekende browser-eigenaardigheid).
   Op deze pagina, met lessenlijsten van soms 100+ rijen, is dat duidelijk merkbaar. Enkel
   hier overschrijven naar position:fixed (kan per definitie nooit meer loslaten, ongeacht
   scroll-diepte) i.p.v. globaal in main.css, want dat zou elke pagina op de site raken.
   body krijgt de gecompenseerde padding-top omdat de nav nu geen ruimte meer reserveert in
   de normale document-flow (ze ligt er immers buiten, position:fixed) — bewust padding en
   geen margin-top op .lk-admin, want een margin zou met body's eigen margin kunnen
   collapsen en een dubbele lege ruimte onder de nav veroorzaken. */
.lk-nav--admin {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
body {
  padding-top: 72px;
}

/* ---------- Sticky header: toolbar + legende blijven samen plakken ---------- */

.sticky-header {
  position: sticky;
  top: 72px; /* blijft net onder de gedeelde .lk-nav--admin-header (72px hoog) plakken */
  z-index: 30;
  background: color-mix(in oklch, var(--bg), transparent 8%);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  margin: 0 -20px;
  padding: 10px 20px 0;
  border-bottom: 1px solid var(--border-2);
  transform: translateZ(0);
  will-change: transform;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
}

.btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s, border-color .12s, transform .05s;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.btn-icon {
  width: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

.select {
  height: 36px;
  padding: 0 32px 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13.5px;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 7.5l3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color .12s;
}
.select:hover { border-color: color-mix(in oklch, var(--border) 60%, var(--text-muted)); }
.select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

.toolbar-spacer { flex: 1; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 10px 4px 14px;
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ---------- Main 2-column layout ---------- */

.agenda-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  align-items: start;
}

/* ---------- Agenda list ---------- */

.agenda-main { min-width: 0; }

.agenda-list {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* ---------- Date header (one per day) ---------- */

.date-header {
  position: relative;
  /* Zorgt dat btn-today's scrollIntoView({block:'start'}) de dag onder de nav + het
     sticky-header (filters/legende) laat landen i.p.v. erachter verstopt — browsers
     houden vanzelf rekening met scroll-margin-top bij scrollIntoView. */
  scroll-margin-top: calc(72px + var(--sticky-header-h, 140px));
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border-top: 1px solid var(--border-2);
}
.date-header:first-child { border-top: 0; }

.date-header .datebox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 1;
}
.date-header .datebox .weekday {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: 4px;
}
.date-header .datebox .daynum {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.date-header .label {
  min-width: 0;
  color: var(--text-muted);
  font-size: 13px;
}
.date-header .label .title {
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  display: block;
}
.date-header .label .sub {
  display: block;
  font-size: 12.5px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* Vandaag: volledig gevulde accentbalk zodat de dag meteen opvalt in de lijst */
.date-header.vandaag { background: var(--accent); }
.date-header.vandaag .datebox .weekday { color: oklch(1 0 0 / 0.8); }
.date-header.vandaag .datebox .daynum,
.date-header.vandaag .label .title { color: #fff; }
.date-header.vandaag .label .sub { color: oklch(1 0 0 / 0.85); }
/* :not(.open) — op mobiel klapt .day-actions open als witte popup, daar gewone knoppen */
.date-header.vandaag .day-actions:not(.open) .day-btn {
  background: oklch(1 0 0 / 0.14);
  border-color: oklch(1 0 0 / 0.35);
  color: #fff;
}
.date-header.vandaag .day-actions:not(.open) .day-btn:hover,
.date-header.vandaag .day-actions:not(.open) .day-btn.active {
  background: #fff;
  border-color: #fff;
  color: var(--accent);
}

.date-header.vakantie { background: color-mix(in oklch, var(--c-vakantie-bg) 70%, white); }
.date-header.vakantie .datebox .daynum,
.date-header.vakantie .label .title { color: var(--c-vakantie); }

.date-header.feestdag .label .title { color: var(--c-feestdag); }

.date-header.leeg { background: var(--surface-2); }
.date-header.leeg .datebox .daynum,
.date-header.leeg .label .title { color: var(--text-faint); font-weight: 500; }

.date-header.past { opacity: 0.72; }

/* Day action buttons */
.day-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.day-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .12s;
}
.day-btn:hover { background: var(--surface-2); color: var(--text); border-color: color-mix(in oklch, var(--border) 50%, var(--text-muted)); }

.day-btn.active {
  background: var(--accent-bg);
  border-color: color-mix(in oklch, var(--accent) 40%, var(--border));
  color: var(--accent);
}
.day-btn.verlof.active {
  background: var(--c-verlof-bg);
  border-color: color-mix(in oklch, var(--c-verlof) 40%, var(--border));
  color: var(--c-verlof);
}
.day-btn.pw.active      { background: oklch(0.95 0.04 310); border-color: oklch(0.55 0.17 310 / 0.4); color: oklch(0.50 0.17 310); }
.day-btn.kr.active      { background: oklch(0.96 0.05 30);  border-color: oklch(0.60 0.17 30 / 0.4);  color: oklch(0.55 0.17 30); }
.day-btn.uitstap.active { background: oklch(0.95 0.05 180); border-color: oklch(0.55 0.12 180 / 0.4); color: oklch(0.48 0.12 180); }

.day-btn.add {
  color: var(--text-muted);
  padding: 0 8px;
  width: 28px;
  justify-content: center;
}
.day-btn.add:hover {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: color-mix(in oklch, var(--accent) 40%, var(--border));
}

/* Day-actions menu on mobile (hidden on desktop) */
.day-more-btn { display: none; }

/* ---------- Agenda row ---------- */

.agenda-item {
  display: grid;
  grid-template-columns: 76px 56px 72px 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--border-2);
  font-size: 13.5px;
  position: relative;
}

.agenda-item .spacer { visibility: hidden; }

.agenda-item .uur {
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  font-size: 12px;
  white-space: nowrap;
}

.agenda-item .categorie {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  vertical-align: 1px;
}
.agenda-item .categorie.les         { background: var(--c-les); }
.agenda-item .categorie.wacht       { background: var(--c-wacht); }
.agenda-item .categorie.vergadering { background: var(--c-vergadering); }
.agenda-item .categorie.andere      { background: var(--c-andere); }
.agenda-item .categorie.verlof      { background: var(--c-verlof); }
.agenda-item .categorie.feestdag    { background: var(--c-feestdag); }
.agenda-item .categorie.vakantie    { background: var(--c-vakantie); }

.agenda-item .klas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 2px 8px;
  height: 22px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid transparent;
  white-space: nowrap;
}
.agenda-item .klas { background: color-mix(in oklch, var(--klas-c, var(--text-faint)) 14%, white); color: color-mix(in oklch, var(--klas-c, var(--text-faint)) 85%, black); }

.klas-spacer { width: 56px; }

.agenda-item .notitie {
  min-width: 0;
  color: var(--text);
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}
.agenda-item .notitie:empty::before {
  content: "—";
  color: var(--text-faint);
}
.agenda-item .notitie-thema { display: block; }
.agenda-item .notitie-tekst { display: block; margin-top: 2px; }

.agenda-item:hover { background: var(--surface-2); }
.agenda-item:not(.verlof):not(.geblokkeerd) { cursor: pointer; }

.agenda-item.done { color: var(--text-faint); }
.agenda-item.done .klas { opacity: 0.65; }
.agenda-item.done .notitie { color: var(--text-faint); }

.agenda-item.vandaag {
  background: var(--accent-bg);
  box-shadow: inset 4px 0 0 var(--accent);
}
.agenda-item.vandaag:hover { background: color-mix(in oklch, var(--accent-bg) 70%, var(--accent)); }

.agenda-item.verlof,
.agenda-item.geblokkeerd {
  background: repeating-linear-gradient(
    135deg,
    transparent 0 10px,
    color-mix(in oklch, var(--surface-3), transparent 50%) 10px 12px
  );
  color: var(--text-muted);
}
.agenda-item.verlof .notitie,
.agenda-item.geblokkeerd .notitie { text-decoration: line-through; }

.agenda-item.handmatig { background: color-mix(in oklch, var(--c-vergadering-bg) 55%, white); }
.agenda-item.handmatig:hover { background: var(--c-vergadering-bg); }
.agenda-item.handmatig::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 2px;
  background: var(--c-vergadering);
  border-radius: 0 2px 2px 0;
}

.agenda-item .actions { display: flex; gap: 4px; }
.agenda-item .actions button {
  width: 28px; height: 28px;
  border-radius: 6px;
  color: var(--text-faint);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.agenda-item .actions button:hover { background: var(--c-verlof-bg); color: var(--c-verlof); }

/* Lessenreeks badges */
.reeks-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 6px;
  vertical-align: 1px;
  background: var(--surface-3);
  color: var(--text-muted);
}
.reeks-badge.start { background: var(--c-les-bg); color: var(--c-les); }
.reeks-badge.einde { background: var(--c-verlof-bg); color: var(--c-verlof); }

/* ---------- Stats sidebar ---------- */

.stats-sidebar {
  /* Bewust NIET sticky — de kaart is te hoog geworden (elke klas krijgt nu een
     thema-overzicht) om permanent te blijven plakken zonder de rest te verdringen. */
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.stats-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.stats-totaal {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-2);
}
.stats-totaal span {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-faint);
  margin-left: 4px;
}

.stat-klas {
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 6px;
  background: var(--surface-2);
  position: relative;
}
.stat-klas::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--klas-c, var(--text-faint));
}

.stat-klas-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}
.stat-klas-naam {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.stat-klas-vrij {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat-klas-vrij-totaal {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-faint);
  margin-left: 3px;
}
.stat-klas-detail {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.stat-klas .progress-bar {
  height: 4px;
  background: var(--border-2);
  border-radius: 2px;
  overflow: hidden;
}
.stat-klas .progress-bar .fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .3s ease;
}

.stat-klas-thema {
  list-style: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-2);
  font-size: 11.5px;
  color: var(--text-faint);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stat-klas-thema li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.stat-thema-titel { min-width: 0; overflow-wrap: break-word; }
.stat-thema-uren {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}
.stat-klas-thema li.lopend { color: var(--text); font-weight: 600; }
.stat-klas-thema li.lopend .stat-thema-uren { color: var(--text-muted); }

/* ---------- Modals ---------- */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: color-mix(in oklch, var(--text), transparent 50%);
  z-index: 100;
  justify-content: center;
  align-items: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal.active { display: flex; }

.modal-content {
  background: var(--surface);
  padding: 22px;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-lg);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.modal-content h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.modal-content .modal-sub {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 16px;
}

.modal-content label {
  display: block;
  margin: 10px 0 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.modal-content input[type="text"],
.modal-content input[type="number"],
.modal-content input[type="date"],
.modal-content select,
.modal-content textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.modal-content textarea { resize: vertical; min-height: 72px; }

.modal-content .btn-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 18px;
}

.modal-content button.primary {
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  font-size: 14px;
}
.modal-content button.primary:hover { background: var(--accent-2); }
.modal-content button.cancel {
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
  border: 1px solid var(--border);
}
.modal-content button.cancel:hover { background: var(--surface-3); }

.modal-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: 10px;
}
.modal-tabs .tab {
  flex: 1;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  transition: background .12s, color .12s;
}
.modal-tabs .tab:hover { color: var(--text); }
.modal-tabs .tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.tab-content { display: none; }
.tab-content.active { display: block; }

.dag-modal-uren {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 10px;
  background: var(--surface-2);
  border-radius: 10px;
  border: 1px solid var(--border-2);
  margin-bottom: 6px;
}
.uur-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 7px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  font-size: 13px;
  cursor: pointer;
  transition: all .12s;
}
.uur-checkbox:hover { border-color: var(--accent); }
.uur-checkbox input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent); }
.uur-checkbox:has(input:checked) { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.na-school-label {
  grid-column: 1 / -1;
  justify-content: flex-start;
  padding: 10px 12px;
  margin-top: 4px;
  border-style: dashed;
}

/* Radio rows in reeks form */
.radio-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.radio-row label {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.radio-row label:has(input:checked) {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}
.radio-row input[type="radio"] { accent-color: var(--accent); }

#reeks-bestaand {
  padding: 12px 14px;
  background: var(--c-vergadering-bg);
  border: 1px solid color-mix(in oklch, var(--c-vergadering) 25%, transparent);
  border-radius: 10px;
  margin-bottom: 12px;
}
#reeks-bestaand strong { font-size: 14px; }
#reeks-bestaand-info { color: var(--text-muted); font-size: 12.5px; }

.reeks-resize-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.reeks-resize-row label {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.reeks-resize-row input[type="number"] {
  width: 64px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
}
#reeks-aanpassen {
  padding: 6px 12px;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
#reeks-aanpassen:hover { background: var(--accent-2); }

#reeks-verwijder {
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 7px;
  background: var(--c-verlof);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
}
#reeks-verwijder:hover { background: color-mix(in oklch, var(--c-verlof), black 10%); }

#reeks-preview {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 7px;
  min-height: 18px;
}

/* ---------- Geblokkeerd summary row ---------- */
.agenda-item.samenvatting {
  grid-template-columns: 76px 1fr;
  font-style: italic;
  color: var(--text-muted);
  background: var(--surface-2);
}
.agenda-item.samenvatting:hover { background: var(--surface-3); cursor: default; }

/* ---------- Empty state ---------- */
.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-faint);
  font-size: 14px;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .agenda-layout {
    grid-template-columns: 1fr;
  }
  .stats-sidebar {
    order: -1;
  }
  .stats-sidebar.collapsed .stats-body { display: none; }
  .stats-header-toggle {
    display: flex !important;
  }
}

.stats-header-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  cursor: pointer;
  user-select: none;
}
.stats-header-toggle .chev {
  transition: transform .2s;
  color: var(--text-faint);
}
.stats-sidebar.collapsed .stats-header-toggle .chev { transform: rotate(-90deg); }

@media (max-width: 720px) {
  .container { padding: 0 12px 40px; }
  .sticky-header { margin: 0 -12px; padding: 10px 12px 0; }
  .toolbar { gap: 8px; padding-bottom: 8px; }
  .toolbar .btn, .toolbar .select { height: 34px; font-size: 13px; }

  .app-title { font-size: 14px; }
  .schooljaar { font-size: 11.5px; }

  .legend { gap: 8px 12px; font-size: 11.5px; }

  .date-header {
    grid-template-columns: 54px 1fr auto;
    padding: 12px 14px;
    gap: 10px;
  }
  .date-header .datebox .daynum { font-size: 19px; }
  .date-header .label .title { font-size: 13.5px; }

  /* Collapse day actions into a single ⋯ menu */
  .day-actions { position: relative; }
  .day-actions > .day-btn:not(.add):not(.more) { display: none; }
  .day-actions.open > .day-btn:not(.add):not(.more) { display: inline-flex; }
  .day-actions.open {
    position: absolute;
    right: 14px;
    top: 54px;
    background: var(--surface);
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    flex-direction: column;
    align-items: stretch;
    z-index: 25;
    min-width: 140px;
  }
  .day-actions.open .day-btn { justify-content: flex-start; }
  .day-more-btn { display: inline-flex; }

  .agenda-item {
    grid-template-columns: 54px 48px 1fr auto;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
  }
  .agenda-item .klas { display: none; }
  .agenda-item .klas-spacer { display: none; }

  /* Show klas as small prefix in notitie column on mobile */
  .agenda-item .mobile-klas {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: 1px;
    background: var(--surface-3);
  }
  .agenda-item .mobile-klas { background: color-mix(in oklch, var(--klas-c, var(--text-faint)) 14%, white); color: color-mix(in oklch, var(--klas-c, var(--text-faint)) 85%, black); }

  .stats-sidebar { padding: 14px; }
  .stats-totaal { font-size: 28px; }

  .dag-modal-uren { grid-template-columns: repeat(3, 1fr); }
  .modal-content { padding: 18px; max-width: 100%; }
}

/* Desktop: hide mobile-klas prefix */
@media (min-width: 721px) {
  .agenda-item .mobile-klas { display: none; }
}

/* Make selects/buttons feel native on iOS */
input, select, textarea { font-size: 16px; }
@media (min-width: 480px) {
  input, select, textarea { font-size: 14px; }
}

/* Terug-naar-beheer link */
.back-to-admin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 8px;
}
.back-to-admin:hover { color: var(--accent); }

/* Instellingen-modal */
.modal-content.wide { max-width: 720px; }
.modal-content .modal-tabs { margin-bottom: 14px; }
.settings-day-block { margin-bottom: 18px; }
.settings-day-title { font-size: 13px; font-weight: 600; text-transform: capitalize; margin-bottom: 8px; color: var(--text); }
.settings-day-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.settings-row { display: grid; grid-template-columns: 70px 1fr 28px; gap: 8px; align-items: center; }
.settings-row--vakantie { grid-template-columns: 1fr 1fr 1fr 28px; }
.settings-row--feestdag { grid-template-columns: 1fr 1fr 28px; }
.settings-row--klas { grid-template-columns: 1fr 48px 28px; }
.klas-kleur {
  width: 48px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}
.settings-row input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  width: 100%;
}
.settings-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.row-remove {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.row-remove:hover { background: var(--c-verlof-bg); color: var(--c-verlof); border-color: var(--c-verlof); }
.btn-add-row {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
}
.btn-add-row:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.settings-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.settings-save-status { font-size: 12px; color: var(--text-faint); margin-right: auto; align-self: center; }

.danger-zone {
  margin-top: 22px;
  padding: 14px;
  border: 1px dashed var(--c-verlof);
  border-radius: var(--radius);
  background: var(--c-verlof-bg);
}
.danger-zone-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-verlof);
  margin-bottom: 6px;
}
.btn-danger {
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--c-verlof);
  background: var(--surface);
  color: var(--c-verlof);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
}
.btn-danger:hover { background: var(--c-verlof); color: #fff; }