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

.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; }

.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; } }