/* ---------------------------------------------------------------------------
   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: standaardwaarde, wordt per klant overschreven */
  --brand: #6366f1;
  --brand-ink: #ffffff;
  --brand-soft: color-mix(in srgb, var(--brand) 14%, transparent);
  --brand-line: color-mix(in srgb, var(--brand) 40%, transparent);

  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --info: #0891b2;

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

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  --shadow: 0 10px 30px -12px rgba(15, 23, 42, .25);
  --shadow-lg: 0 30px 60px -25px rgba(15, 23, 42, .35);

  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Licht thema */
  --bg: #f6f7fb;
  --bg-elevated: #ffffff;
  --bg-sunken: #eceef6;
  --ink: #111827;
  --ink-soft: #4b5563;
  --ink-muted: #6b7280;
  --line: #e2e5ef;
  --line-strong: #cbd2e1;
  --field: #ffffff;
  --overlay: rgba(15, 23, 42, .45);
  color-scheme: light;
}

/* Donker thema: eerst wanneer het systeem erom vraagt, daarna wanneer de bezoeker het zelf kiest. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0f1d;
    --bg-elevated: #131a2b;
    --bg-sunken: #070b16;
    --ink: #f3f5fb;
    --ink-soft: #c2cade;
    --ink-muted: #8e99b5;
    --line: rgba(255, 255, 255, .10);
    --line-strong: rgba(255, 255, 255, .20);
    --field: rgba(255, 255, 255, .04);
    --overlay: rgba(2, 6, 23, .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);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0a0f1d;
  --bg-elevated: #131a2b;
  --bg-sunken: #070b16;
  --ink: #f3f5fb;
  --ink-soft: #c2cade;
  --ink-muted: #8e99b5;
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .20);
  --field: rgba(255, 255, 255, .04);
  --overlay: rgba(2, 6, 23, .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);
  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%;
}

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--brand); 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;
  padding: 12px clamp(14px, 3vw, 28px);
  background: color-mix(in srgb, var(--bg-elevated) 88%, 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-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 45%, #22d3ee));
  display: grid; place-items: center; color: var(--brand-ink);
  box-shadow: 0 8px 18px -8px var(--brand);
  overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.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-sm);
  padding: clamp(18px, 3vw, 28px);
}
.card + .card { margin-top: 18px; }
.card-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

.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;
  padding: 11px 18px; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .93rem;
  background: var(--brand); 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.06); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg-sunken); }
.btn-soft { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-lg { padding: 15px 26px; font-size: 1rem; border-radius: var(--radius-lg); }
.btn-block { width: 100%; }
.btn-icon { padding: 9px; border-radius: 11px; 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. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
select, textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  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 4px 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 --- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: .76rem; font-weight: 700; letter-spacing: .01em;
  border: 1px solid var(--line-strong); color: var(--ink-soft); background: var(--bg-sunken);
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.badge-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.badge-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.badge-info { color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); background: color-mix(in srgb, var(--info) 12%, transparent); }
.badge-brand { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); }

/* --- tabellen --- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-elevated); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); font-weight: 700; background: var(--bg-sunken); }
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: var(--radius); border: 1px solid var(--line-strong); background: var(--bg-sunken); }
.notice-ok { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.notice-warn { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.notice-danger { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); }

/* --- 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 { padding: 8px 14px; font-size: .85rem; border-radius: 11px; }

/* --- 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: var(--radius); background: var(--bg-elevated);
  padding: 10px 16px; min-width: 104px;
}
.stat b { display: block; font-size: 1.5rem; line-height: 1.2; }
.stat span { font-size: .76rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; }

/* 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); }
.stat-plain { cursor: default; }

/* 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);
}

/* 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); 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); }

.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-name { font-weight: 600; }
.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: 59px; z-index: 15;
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.admin-nav-inner {
  display: flex; gap: 4px; align-items: center;
  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); 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; }

/* 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; } }