/* ---------------------------------------------------------------------------
   aanwezig.nu — design system
   Eén set variabelen, twee invullingen. Het thema volgt het systeem, tenzij de
   bezoeker zelf kiest; die keuze wordt onthouden op het toestel zelf.
   De accentkleur komt uit de gegevens van de klant en wordt door de server in
   :root gezet (zie App.razor).
--------------------------------------------------------------------------- */

:root {
  /* Accent: het blauw van aanwezig.nu, met het verloop naar paars voor de hoofdknoppen. Heeft
     een klant een eigen kleur, dan zet App.razor --brand op die kleur en wordt het verloop één
     effen kleur: zijn huisstijl, niet de onze. */
  --brand: #2563EB;
  --brand-2: #7C3AED;
  --brand-gradient: linear-gradient(135deg, var(--brand), var(--brand-2));
  --brand-ink: #ffffff;
  --brand-soft: color-mix(in srgb, var(--brand) 12%, transparent);
  --brand-line: color-mix(in srgb, var(--brand) 38%, transparent);
  /* Het accent als tekstkleur (links, actief tabblad). In het donker lichter gemaakt: een donkere
     klantkleur zoals marineblauw is anders onleesbaar op de donkere achtergrond. */
  --brand-text: var(--brand);

  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --info: #2563EB;

  /* Statuslabels als zachte pillen: achtergrond en tekstkleur per uitkomst. */
  --pill-ok-bg: #DCFCE7;     --pill-ok-fg: #166534;
  --pill-warn-bg: #FEF3C7;   --pill-warn-fg: #92400E;
  --pill-danger-bg: #FEE2E2; --pill-danger-fg: #B91C1C;
  --pill-info-bg: #E4E9FF;   --pill-info-fg: #1D4ED8;
  --pill-bg: #F0EDFF;        --pill-fg: #5B5484;

  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(31, 27, 61, .05);
  --shadow: 0 14px 34px rgba(31, 27, 61, .06);
  --shadow-lg: 0 18px 44px rgba(31, 27, 61, .12);

  /* Het lettertype van het systeem zelf: snel, scherp op elk scherm, en er vertrekt niets naar
     een lettertypedienst. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Licht thema */
  --bg: #F9F8FF;
  --bg-elevated: #ffffff;
  --bg-sunken: #F3F0FF;
  --ink: #1F1B3D;
  --ink-soft: #474170;
  --ink-muted: #6B6592;
  --line: #E7E3F7;
  --line-strong: #CFC9E8;
  --field: #ffffff;
  --overlay: rgba(31, 27, 61, .45);
  color-scheme: light;
}

/* Donker thema: eerst wanneer het systeem erom vraagt, daarna wanneer de bezoeker het zelf kiest.
   Dezelfde paarse ondertoon als het lichte thema, zodat het één huisstijl blijft. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121027;
    --bg-elevated: #1B1836;
    --bg-sunken: #0D0B1F;
    --ink: #F4F2FF;
    --ink-soft: #CAC5E8;
    --ink-muted: #9C96C2;
    --line: rgba(255, 255, 255, .10);
    --line-strong: rgba(255, 255, 255, .20);
    --field: rgba(255, 255, 255, .04);
    --overlay: rgba(6, 5, 18, .7);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 16px 40px -18px rgba(0, 0, 0, .8);
    --shadow-lg: 0 34px 70px -28px rgba(0, 0, 0, .9);
    --pill-ok-bg: rgba(34, 197, 94, .16);   --pill-ok-fg: #86EFAC;
    --pill-warn-bg: rgba(245, 158, 11, .16); --pill-warn-fg: #FCD34D;
    --pill-danger-bg: rgba(239, 68, 68, .16); --pill-danger-fg: #FCA5A5;
    --pill-info-bg: rgba(59, 130, 246, .18); --pill-info-fg: #93C5FD;
    --pill-bg: rgba(255, 255, 255, .08);     --pill-fg: #CAC5E8;
    --brand-text: color-mix(in srgb, var(--brand) 45%, #fff);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #121027;
  --bg-elevated: #1B1836;
  --bg-sunken: #0D0B1F;
  --ink: #F4F2FF;
  --ink-soft: #CAC5E8;
  --ink-muted: #9C96C2;
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .20);
  --field: rgba(255, 255, 255, .04);
  --overlay: rgba(6, 5, 18, .7);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 16px 40px -18px rgba(0, 0, 0, .8);
  --shadow-lg: 0 34px 70px -28px rgba(0, 0, 0, .9);
  --pill-ok-bg: rgba(34, 197, 94, .16);   --pill-ok-fg: #86EFAC;
  --pill-warn-bg: rgba(245, 158, 11, .16); --pill-warn-fg: #FCD34D;
  --pill-danger-bg: rgba(239, 68, 68, .16); --pill-danger-fg: #FCA5A5;
  --pill-info-bg: rgba(59, 130, 246, .18); --pill-info-fg: #93C5FD;
  --pill-bg: rgba(255, 255, 255, .08);     --pill-fg: #CAC5E8;
  --brand-text: color-mix(in srgb, var(--brand) 45%, #fff);
  color-scheme: dark;
}

/* --- basis --- */
*, *::before, *::after { box-sizing: border-box; }

/* Na elke navigatie zet Blazor de focus op de titel, zodat een schermlezer de nieuwe pagina
   voorleest en wie met het toetsenbord werkt bovenaan verdergaat (zie Routes.razor). De browser
   tekent daar een rand rond, en die blijft staan tot je ergens klikt. Zo'n element is met de
   tabtoets toch niet te bereiken, dus de rand toont niemand iets: enkel de rand weg, het
   focusgedrag blijft. */
[tabindex="-1"]:focus { outline: none; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Grote titels licht en ruim, zoals op de startpagina; kleinere koppen in kaarten stevig, want
   daar moet je snel kunnen scannen. */
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; color: var(--ink); }
h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 400; }
h2 { font-size: clamp(1.15rem, 2.2vw, 1.35rem); font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--brand-text); text-decoration: none; }
a:hover { text-decoration: underline; }
small, .small { font-size: .82rem; }
.muted { color: var(--ink-muted); }
.soft { color: var(--ink-soft); }

/* --- layout --- */
.app-shell { display: flex; flex-direction: column; min-height: 100dvh; }

.app-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 10px clamp(14px, 3vw, 28px);
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.app-main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(18px, 3vw, 34px) clamp(14px, 3vw, 28px) 64px; }

.app-footer {
  border-top: 1px solid var(--line);
  padding: 18px clamp(14px, 3vw, 28px);
  color: var(--ink-muted);
  font-size: .8rem;
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
}

.brand { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: var(--brand-gradient);
  display: grid; place-items: center; color: var(--brand-ink);
  box-shadow: 0 8px 18px -8px var(--brand);
  overflow: hidden;
}
/* Staat er een eigen logo, dan wijkt onze kleur. Het logo heeft zijn eigen achtergrond en
   huisstijl; er een gekleurd vierkant en een gloed achter zetten maakt er een andere van.
   Ook niet meer bijsnijden: een rechthoekig logo hoort volledig zichtbaar te blijven. */
.brand-mark:has(img) { background: none; box-shadow: none; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-mark svg { width: 20px; height: 20px; }
.brand-sub { color: var(--ink-muted); font-weight: 500; }

.spacer { flex: 1; }

/* --- kaarten --- */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 28px);
}
.card + .card { margin-top: 18px; }
.grid > .card + .card, .tellers > .card + .card { margin-top: 0; }
.card-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

/* Het zoekblok boven de opleidingenlijst neemt dichtgeklapt één regel in. De status blijft
   zichtbaar, zodat een kortere lijst nooit onverklaard lijkt. */
.filter-card { padding: 0; margin-bottom: 18px; overflow: clip; }
.filter-card > summary {
  display: flex; align-items: center; gap: 10px; padding: clamp(16px, 2vw, 20px) clamp(18px, 3vw, 28px);
  cursor: pointer; list-style: none; color: var(--ink); font-weight: 700;
}
.filter-card > summary::-webkit-details-marker { display: none; }
.filter-card > summary::after {
  content: ""; width: 7px; height: 7px; margin-left: auto; flex: none;
  border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted);
  transform: rotate(45deg); transition: transform .18s ease;
}
.filter-card[open] > summary::after { transform: rotate(225deg); }
.filter-card > summary:hover { background: var(--bg-sunken); }
.filter-card > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.filter-card-body {
  padding: clamp(18px, 3vw, 28px); border-top: 1px solid var(--line);
}

.grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* --- knoppen --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: 9px;
  border: 1px solid transparent; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .93rem;
  background: var(--brand-gradient); color: var(--brand-ink);
  transition: transform .12s ease, filter .18s ease, background .18s ease, border-color .18s ease;
  text-decoration: none;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none; }
.btn-ghost { background: var(--bg-elevated); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg-elevated); border-color: var(--ink-muted); filter: none; }
.btn-soft { background: var(--brand-soft); color: var(--brand-text); border-color: var(--brand-line); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-lg { min-height: 52px; padding: 14px 26px; font-size: 1rem; border-radius: 9px; }
.btn-block { width: 100%; }
.btn-icon { min-height: 38px; padding: 9px; border-radius: 9px; background: transparent; color: var(--ink-soft); border-color: var(--line); }
.btn-icon:hover { background: var(--bg-sunken); color: var(--ink); }
.btn-icon svg { width: 18px; height: 18px; }

/* --- formulieren --- */
label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: 6px; color: var(--ink-soft); }

/* Blazor rendert een <InputText> zonder type-attribuut, vandaar de brede selector met
   uitzonderingen in plaats van een opsomming van types. In :where(), zodat deze basisregel geen
   gewicht heeft: anders won ze van elke specifiekere regel, zoals het typveld in het labelvak, dat
   daardoor een eigen rand en vulling kreeg binnen de rand van het vak. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden])),
select, textarea {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--field); color: var(--ink);
  font: inherit; font-size: .95rem; outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.field + .field { margin-top: 14px; }

/* Die ruimte hoort tussen velden die ónder elkaar staan. In een grid is het tweede veld de
   buurman rechts, geen volgende regel: daar duwt dezelfde marge de hele kolom omlaag en staan
   de labels van links en rechts niet meer op één lijn. */
.grid > .field + .field { margin-top: 0; }
.grid > .field { align-self: start; }
.validation-message, .field-error { color: var(--danger); font-size: .82rem; margin-top: 5px; }

/* --- statuslabels --- */
/* Zachte pillen zonder rand, zoals op de startpagina: de kleur draagt de betekenis. */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; letter-spacing: 0;
  border: none; color: var(--pill-fg); background: var(--pill-bg);
  white-space: nowrap;
}
.badge-ok { color: var(--pill-ok-fg); background: var(--pill-ok-bg); }
.badge-warn { color: var(--pill-warn-fg); background: var(--pill-warn-bg); }
.badge-danger { color: var(--pill-danger-fg); background: var(--pill-danger-bg); }
.badge-info { color: var(--pill-info-fg); background: var(--pill-info-bg); }
.badge-brand { color: var(--brand-text); background: var(--brand-soft); }

/* --- tabellen --- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-elevated); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); font-weight: 700; background: color-mix(in srgb, var(--bg-sunken) 45%, var(--bg-elevated)); border-bottom-color: var(--line); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--brand) 4%, transparent); }

/* --- meldingen --- */
.notice { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-sunken); color: var(--ink); }
.notice-ok { border-color: transparent; background: var(--pill-ok-bg); color: var(--pill-ok-fg); }
.notice-warn { border-color: transparent; background: var(--pill-warn-bg); color: var(--pill-warn-fg); }
.notice-danger { border-color: transparent; background: var(--pill-danger-bg); color: var(--pill-danger-fg); }
.notice a { color: inherit; text-decoration: underline; }

/* --- hulpklassen --- */
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.right { margin-left: auto; }
.center { text-align: center; }
.hidden { display: none !important; }

/* --- foutpagina van Blazor --- */
#blazor-error-ui {
  position: fixed; inset: auto 0 0 0; z-index: 1000;
  display: none; align-items: center; gap: 12px;
  padding: 14px 20px;
  background: var(--danger); color: #fff;
  box-shadow: var(--shadow-lg);
}
#blazor-error-ui .dismiss { margin-left: auto; cursor: pointer; font-size: 1.3rem; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --- handtekening --- */
.signature { --signature-ink: var(--ink); margin: 8px 0 4px; }
.signature-frame {
  position: relative;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--field);
  height: clamp(170px, 30vh, 260px);
  overflow: hidden;
  touch-action: none;
}
.signature-frame canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.signature-hint {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--ink-muted); pointer-events: none; font-size: .9rem;
}
.signature-hint svg { width: 42px; height: 42px; opacity: .5; }
.signature-baseline {
  position: absolute; left: 8%; right: 8%; bottom: 26%;
  border-bottom: 1px solid var(--line-strong); pointer-events: none;
}
.signature-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.signature-error { display: none; }
.signature.signature-missing .signature-frame { border-color: var(--danger); border-style: solid; }
.signature.signature-missing .signature-error { display: block; }
.signature.has-signature .signature-frame { border-style: solid; border-color: var(--brand-line); }

.btn-sm { min-height: 36px; padding: 7px 14px; font-size: .85rem; border-radius: 8px; }

/* --- statusbord van de lesgever --- */
.board-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.board-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.stat {
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elevated);
  padding: 12px 18px; min-width: 110px; box-shadow: var(--shadow-sm);
}
.stat b { display: block; font-size: 1.75rem; font-weight: 400; letter-spacing: -.02em; line-height: 1.15; }
.stat span { font-size: .7rem; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .1em; }

/* Op het bord van de lesgever zijn de tellers tegelijk de filters. Ze moeten er dus als een
   knop uitzien zonder de rustige rij cijfers te verstoren; de gekozen tegel krijgt de accent-
   kleur, zodat je in één oogopslag ziet dat je naar een selectie kijkt en niet naar iedereen. */
button.stat {
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s, background .12s;
}
button.stat:hover { border-color: var(--brand-line); }
button.stat.is-active {
  border-color: var(--brand); background: var(--brand-soft);
}
button.stat.is-active b, button.stat.is-active span { color: var(--brand-text); }
.stat-plain { cursor: default; }

/* De feedbackknop, rechtsonder op elk beheerscherm. Moet opvallen zonder in de weg te staan:
   vandaar de accentkleur, en een paneel dat pas opengaat als je erop duwt. */
.feedback-fab { position: fixed; right: 18px; bottom: 18px; z-index: 60; }
.feedback-fab > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: .9rem;
  background: var(--brand-gradient); color: var(--brand-ink);
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--brand) 60%, transparent);
  transition: transform .12s;
}
.feedback-fab > summary::-webkit-details-marker { display: none; }
.feedback-fab > summary:hover { transform: translateY(-1px); }
.feedback-fab > summary svg { width: 17px; height: 17px; flex: none; }
.feedback-fab[open] > summary { border-radius: 12px; }

.feedback-panel {
  position: absolute; right: 0; bottom: calc(100% + 10px); width: min(360px, calc(100vw - 36px));
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px; box-shadow: var(--shadow-lg); text-align: left;
}
.feedback-panel h3 { margin: 0 0 4px; font-size: 1rem; }
.feedback-panel textarea { width: 100%; margin-top: 10px; }
.feedback-panel .hint { font-size: .78rem; color: var(--ink-muted); margin: 6px 0 0; }

/* Het bedankje na het versturen: rechtsonder, waar de knop stond. */
.feedback-thanks {
  position: fixed; right: 18px; bottom: 74px; z-index: 60; max-width: 340px;
  box-shadow: var(--shadow-lg);
}

/* Feedback die we al afgehandeld hebben, mag naar de achtergrond. */
.feedback-done { opacity: .62; }
.feedback-message { white-space: pre-wrap; line-height: 1.55; }

/* Het logboek: een lijst wijzigingen met een streepje ervoor, zodat een dag leesbaar blijft. */
.logboek { display: grid; gap: 14px; }
.logboek-item { border-left: 2px solid var(--brand-line); padding-left: 14px; }
.logboek-item strong { font-size: .95rem; }

/* Een getal dat boven de grens van het abonnement zit. */
td.over { color: var(--danger); font-weight: 700; }

/* Een snelkeuze die op dit moment aanstaat, bv. de periode "deze maand". */
.btn.is-active {
  border-color: var(--brand); background: var(--brand-soft); color: var(--brand-text);
}

/* Tabbladen binnen één scherm, bv. de gegevens, de mensen en de sessies van een opleiding.
   Bewust gewone links met het gekozen tabblad in de URL: dan werkt de knop terug van de
   browser, en kan je iemand een link naar precies dat tabblad sturen. */
.tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.tabs .tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; text-decoration: none; color: var(--ink-muted);
  font-weight: 600; font-size: .92rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs .tab:hover { color: var(--ink); }
.tabs .tab.is-active { color: var(--brand-text); border-bottom-color: var(--brand); }
.tab-count {
  font-size: .74rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--bg-sunken); color: var(--ink-muted);
}
.tabs .tab.is-active .tab-count { background: var(--brand-soft); color: var(--brand-text); }

.people { display: grid; gap: 10px; }
.person {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-elevated); text-decoration: none; color: inherit;
}
.person:hover { text-decoration: none; }
.person > span:not(.avatar):not(.right) { min-width: 0; }
.person-name {
  font-weight: 600; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-sub { font-size: .8rem; color: var(--ink-muted); }
.person .right { display: flex; align-items: center; gap: 10px; }
.person-signed { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 7%, transparent); }
.person-action { border-color: var(--brand-line); background: var(--brand-soft); }

.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  background: var(--bg-sunken); color: var(--ink-soft); border: 1px solid var(--line);
}

.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: livepulse 2s infinite; }
@keyframes livepulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* --- publieke ondertekenpagina --- */
.sign-page { max-width: 560px; margin: 0 auto; }
.sign-meta { display: grid; gap: 6px; margin: 16px 0 22px; font-size: .92rem; }
.sign-meta div { display: flex; gap: 10px; }
.sign-meta dt, .sign-meta .k { color: var(--ink-muted); min-width: 92px; }
.big-check {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px;
  background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); font-size: 2rem;
}

.person-absent { opacity: .72; border-style: dashed; }

/* --- beheerportaal --- */
.admin-nav {
  position: sticky; top: 64px; z-index: 15;
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);

  /* Geen overflow meer: dat zou de uitklapmenus afknippen. Het menu is nu kort genoeg om te
     wikkelen op een smal scherm. */
}
.admin-nav-inner {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto; padding: 0 clamp(8px, 3vw, 22px);
}
.admin-nav a {
  display: block; padding: 12px 14px; white-space: nowrap;
  color: var(--ink-soft); font-weight: 600; font-size: .9rem;
  border-bottom: 2px solid transparent;
}
.admin-nav a:hover { color: var(--ink); text-decoration: none; }
.admin-nav a.active { color: var(--brand-text); border-bottom-color: var(--brand); }

.page-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { margin: 0 0 2px; }

.picker {
  max-height: 320px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-sunken);
  padding: 6px;
}
.picker label {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  font-weight: 500; color: var(--ink); font-size: .9rem;
}
.picker label:hover { background: var(--bg-elevated); }
.picker input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--brand); flex: none; }
.picker .sub { color: var(--ink-muted); font-size: .8rem; }

.switch-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.switch-row:first-of-type { border-top: 0; }
.switch-row input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.switch-row label { margin: 0; font-weight: 600; color: var(--ink); }
.switch-row .hint { font-size: .82rem; color: var(--ink-muted); font-weight: 400; }

.recipient-settings { margin: 14px 0 0; padding: 0; border: 0; }
.recipient-settings legend { margin-bottom: 9px; color: var(--ink); font-weight: 600; }
.recipient-options {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.recipient-option {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--bg-elevated); color: var(--ink); cursor: pointer; font-weight: 600;
}
.recipient-option:hover { border-color: var(--brand); }
.recipient-option:has(input:checked) {
  border-color: var(--brand); background: var(--brand-soft); color: var(--ink);
}
.recipient-option:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--brand-soft); }
.recipient-option input { width: 17px; height: 17px; margin: 0; accent-color: var(--brand); }

@media (max-width: 620px) {
  .recipient-options { grid-template-columns: 1fr; }
  .recipient-option { justify-content: flex-start; }
}

.history-panel { margin-top: 26px; }
.history-panel > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; color: var(--ink); font-size: 1.2rem; font-weight: 700;
}
.history-panel > summary::marker { color: var(--brand-text); }
.history-panel[open] > summary { margin-bottom: 18px; }
.history-filters {
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(170px, .55fr) auto auto;
  align-items: end; gap: 10px; margin-bottom: 18px;
}
.history-filters .field + .field { margin-top: 0; }

@media (max-width: 720px) {
  .history-filters { grid-template-columns: 1fr; }
  .history-filters .btn { width: 100%; }
}

/* Een vinkje naast een zoekveld: één regel, aanklikbaar op het woord ernaast. */
.check-inline {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: .85rem; color: var(--ink-muted); cursor: pointer; user-select: none;
}
.check-inline input[type=checkbox] {
  width: 16px; height: 16px; accent-color: var(--brand); flex: none; margin: 0; cursor: pointer;
}

.inherited { font-size: .78rem; color: var(--ink-muted); margin-top: 5px; }

.empty { text-align: center; padding: 40px 20px; color: var(--ink-muted); }
.empty svg { width: 40px; height: 40px; opacity: .4; margin-bottom: 10px; }

@media (max-width: 640px) { .hide-small { display: none; } }

/* Het herhaalpatroon bij het inplannen van sessies. De dagen als aanklikbare pillen: dat leest
   sneller dan zeven aankruisvakjes onder elkaar, en het past op een telefoon. */
.herhaling {
  margin-top: 18px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-sunken);
}
.herhaling-titel { font-size: .85rem; font-weight: 600; color: var(--ink-muted); }

.dagen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dag {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--bg-elevated); cursor: pointer; user-select: none;
  font-size: .85rem; font-weight: 500; color: var(--ink);
}
.dag:hover { border-color: var(--brand); }
.dag input[type=checkbox] {
  width: 15px; height: 15px; accent-color: var(--brand); flex: none; margin: 0; cursor: pointer;
}
.dag:has(input:checked) {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}

/* Het kruimelpad. Een lange opleidingsnaam mag de regel niet openbreken: hij wordt afgekapt en
   de volledige naam staat in de tooltip. Op een telefoon mag het pad over twee regels vallen. */
.kruimels {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: .82rem; color: var(--ink-muted); margin-bottom: 2px;
}
.kruimel {
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-muted); text-decoration: none;
}
a.kruimel:hover { color: var(--brand-text); text-decoration: underline; }
.kruimel-hier { color: var(--ink); font-weight: 500; }
.kruimel-scheiding { color: var(--line-strong); flex: none; }

@media (max-width: 560px) {
  .kruimel { max-width: 14ch; }
}

/* Uitleg achter een vraagteken. Verschijnt op hover, op toetsenbordfocus en bij een tik op een
   telefoon — dat laatste is precies waarom dit een knop is en geen title-attribuut. */
.uitleg { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }

.uitleg-knop {
  width: 17px; height: 17px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--bg-sunken); color: var(--ink-muted);
  font-size: .68rem; font-weight: 700; line-height: 1; cursor: help;
  display: inline-flex; align-items: center; justify-content: center;
}
.uitleg-knop:hover, .uitleg-knop:focus-visible { border-color: var(--brand); color: var(--brand-text); }

.uitleg-tekst {
  position: absolute; top: calc(100% + 7px); left: -8px; z-index: 40;
  width: max-content; max-width: 290px;
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--bg-elevated); color: var(--ink);
  font-size: .8rem; font-weight: 400; line-height: 1.45; text-align: left;
  box-shadow: 0 8px 24px rgb(0 0 0 / .14);
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
}
.uitleg:hover .uitleg-tekst,
.uitleg:focus-within .uitleg-tekst { opacity: 1; visibility: visible; }

/* Dicht bij de rechterrand zou de tekst anders buiten het scherm vallen. */
@media (max-width: 560px) {
  .uitleg-tekst { left: auto; right: -8px; max-width: min(290px, 78vw); }
}

/* De handtekening die de deelnemer na het tekenen terugziet. */
.getekend { margin: 20px 0 0; }
.getekend img {
  max-width: 260px; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.getekend figcaption { margin-top: 8px; }

/* Mappen in het beheermenu. Een <details> van de browser zelf: werkt met muis, toetsenbord en
   op een telefoon, zonder javascript en zonder dat er iets kan blijven openstaan na een klik. */
.nav-groep { position: relative; }
.nav-groep > summary {
  display: block; padding: 12px 14px; white-space: nowrap; cursor: pointer; list-style: none;
  color: var(--ink-soft); font-weight: 600; font-size: .9rem;
  border-bottom: 2px solid transparent;
}
.nav-groep > summary::-webkit-details-marker { display: none; }
.nav-groep > summary::after { content: " ▾"; font-size: .7em; opacity: .6; }
.nav-groep > summary:hover { color: var(--ink); }
.nav-groep[open] > summary { color: var(--ink); }

.nav-groep-uit {
  position: absolute; top: calc(100% - 2px); left: 0; z-index: 30;
  min-width: 190px; padding: 6px;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-elevated);
  box-shadow: 0 14px 34px -10px rgb(0 0 0 / .28);
}
.nav-groep-uit a { border-bottom: none; border-radius: 8px; padding: 9px 12px; }
.nav-groep-uit a:hover { background: var(--bg-sunken); }
.nav-groep-uit a.active { background: color-mix(in srgb, var(--brand) 12%, transparent); }

/* Een openstaand bericht hoort op te vallen, niet weggestopt te zitten. */
.admin-nav a.nav-melding {
  color: var(--brand-text); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  border-radius: 999px; padding: 6px 13px; margin-left: 4px;
}

/* Labels als gekleurde pillen. De tint komt uit de naam (zie Labels.Hue en tags.js), zodat
   hetzelfde label overal dezelfde kleur heeft zonder dat er een kleur bewaard moet worden. */
.label-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
  background: hsl(var(--h, 250) 65% 50% / .14);
  color: hsl(var(--h, 250) 60% 34%);
  border: 1px solid hsl(var(--h, 250) 60% 50% / .35);
}

:root[data-theme="dark"] .label-pill { color: hsl(var(--h, 250) 70% 74%); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .label-pill { color: hsl(var(--h, 250) 70% 74%); }
}

.label-rij { display: inline-flex; flex-wrap: wrap; gap: 5px; vertical-align: middle; }

/* De invoer: bestaande pillen met een kruisje, en een veld om verder te typen. */
.tag-invoer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 7px 9px; min-height: 44px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg-elevated);
}
.tag-invoer:focus-within { border-color: var(--brand); }
.tag-invoer input {
  flex: 1; min-width: 140px; border: none; background: none; padding: 2px; margin: 0;
  color: var(--ink); font: inherit; font-size: .9rem;
}
.tag-invoer input:focus { outline: none; box-shadow: none; }
.tag-invoer .label-pill button {
  border: none; background: none; padding: 0; margin: 0 -2px 0 0; cursor: pointer;
  color: inherit; font-size: 1rem; line-height: 1; opacity: .6;
}
.tag-invoer .label-pill button:hover { opacity: 1; }

/* Rapportraster: de naamkolom blijft staan wanneer je door veel sessies scrolt. */
.rapport .rapport-naam { position: sticky; left: 0; z-index: 1; background: var(--bg-elevated); white-space: nowrap; }
.rapport th.rapport-naam { background: color-mix(in srgb, var(--bg-sunken) 45%, var(--bg-elevated)); }
.rapport td, .rapport th { padding-left: 8px; padding-right: 8px; }

/* Wie aangemeld is, bovenaan: naam met het adres eronder. */
.header-user { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; font-size: .82rem; }
.header-user .muted { font-size: .75rem; }

/* Op een gsm passen naam, status en knoppen niet naast elkaar: dan duwde de rij de hele pagina
   breder dan het scherm. Knoppen en nota schuiven onder de naam. */
@media (max-width: 620px) {
  .person { flex-wrap: wrap; }
  .person > span:not(.avatar):not(.right) { flex: 1 1 0; }
  .person .right { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; margin-left: 0; }
  .person details { flex: 1 1 100%; }
}

/* Smalle schermen: de bedrijfsnaam mag inkorten, de knoppen bovenaan moeten zichtbaar blijven. */
.app-header .brand { min-width: 0; }
.app-header .brand > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-header > * { flex-shrink: 0; }
.app-header > .brand { flex-shrink: 1; }
@media (max-width: 560px) { .app-header { gap: 8px; } }
.app-header > .brand { min-width: 34px; overflow: hidden; }
@media (max-width: 640px) { .header-user { display: none; } }

/* De titel van een sessie kort in met "…" in plaats van de pagina breder te duwen. */
.board-head > div:first-child { min-width: 0; max-width: 100%; }

/* Een label als link, en labels om aan en uit te zetten in een filter. Aangezet krijgt de pil een
   vinkje en een rand, uitgezet blijft ze zichtbaar maar gedempt. Een echt aankruisvakje eronder,
   zodat het formulier ook zonder javascript werkt en met het toetsenbord bediend kan worden. */
a.label-pill { text-decoration: none; }
a.label-pill:hover { border-color: hsl(var(--h, 250) 60% 50% / .8); }
.label-keuze { cursor: pointer; position: relative; display: inline-flex; }
.label-keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.label-keuze .label-pill { opacity: .55; }
.label-keuze input:checked + .label-pill { opacity: 1; box-shadow: 0 0 0 2px hsl(var(--h, 250) 60% 50% / .55); }
.label-keuze input:checked + .label-pill::before { content: "✓"; }
.label-keuze input:focus-visible + .label-pill { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Het logo van aanwezig.nu (hoed met vinkje) waar geen klantlogo staat. Het heeft zijn eigen
   kleuren, dus net als bij een klantlogo wijkt het gekleurde vierkant erachter. De rand rond het
   vinkje neemt de kleur van de balk aan, zodat het ook in het donkere thema los komt. */
.aanwezig-logo { --logo-line: #2563EB; --logo-ring: var(--bg-elevated); }
.brand-mark:has(.aanwezig-logo) { background: none; box-shadow: none; overflow: visible; }
.brand-mark .aanwezig-logo { width: 32px; height: 32px; }
:root[data-theme="dark"] .aanwezig-logo { --logo-line: #7FA6FF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aanwezig-logo { --logo-line: #7FA6FF; } }

/* Het sessie-overzicht bovenaan het beheer: vier tellers, filters en een voortgangsbalk per sessie. */
.tellers { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 18px; }
.teller { display: block; padding: 18px 22px; color: inherit; transition: border-color .15s; }
.teller:hover { text-decoration: none; border-color: var(--brand-line); }
.teller span { color: var(--ink-muted); font-size: .88rem; }
.teller b { display: block; margin-top: 6px; font-size: 2.2rem; font-weight: 400; letter-spacing: -.02em; line-height: 1.1; }
.teller-let-op b { color: var(--warn); }

.sessie-filters {
  display: grid; gap: 10px; align-items: end;
  grid-template-columns: repeat(2, minmax(130px, 160px)) repeat(3, minmax(150px, 1fr)) auto;
}
.sessie-filters .field { margin: 0; }
@media (max-width: 960px) { .sessie-filters { grid-template-columns: repeat(2, 1fr); } }

.voortgang { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.voortgang-balk { flex: 1; height: 8px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.voortgang-balk > span { display: block; height: 100%; border-radius: inherit; background: var(--brand-gradient); }
.voortgang-getal { font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .tellers { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .teller { padding: 14px 16px; }
  .teller b { font-size: 1.8rem; }
}