/* ==========================================================================
   sv-base.css — basis voor tools, webapps en sites in de huisstijl van
   Sint-Victor Alsemberg. Hoort bij de skill "vormgeving".  Versie 2.2 (2026-10-18)

   Stijl: navy zijbalk links (logo, menu, profiel onderaan, torenmotief), werkruimte
   rechts zonder hero: compacte paginakop, zoekbalk, filterchips, overzichtblokken,
   witte panelen en tegels op een lichtgrijze grond, compacte lijsten met icoonkolommen.

   Gebruik: plak de delen die je nodig hebt in één <style>-blok (GAS
   HtmlService, artifact, losse pagina). Laad de letters via <link>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

   Principes: werkruimte op volle breedte naast de zijbalk, alleen lopende tekst begrensd;
   mobiel eerst; tokens overal, geen losse hex-waarden in componenten.
   ========================================================================== */

/* ---------- 1. Tokens: altijd licht (geen donkere modus) ---------- */
:root {
  color-scheme: light;           /* altijd licht, ook als het systeem donker staat */

  /* Merk */
  --sv-navy: #07153B;            /* schoolblauw (schoolwebsite, SV-Toolbox) */
  --sv-navy-2: #0A1D52;
  --sv-navy-3: #13296B;          /* hover op navy, avatar zonder foto */
  --sv-goud: #F5A623;            /* accent, ALLEEN op navy (8,8:1); nooit op wit (2:1) */
  --sv-logo-mark: #00024C;       /* het logo houdt zijn eigen kleur op wit */
  --sv-logo-type: #000000;

  /* Vlakken (van achter naar voor) */
  --canvas: #F4F5F9;             /* lichtgrijze paginagrond */
  --surface: #FFFFFF;            /* panelen, tegels, tabellen, velden */
  --surface-2: #F8F9FB;          /* tabelkop, hover in menu's, toetsaanduiding */
  --sunken: #ECEEF4;             /* skelet, alleen-lezen veld, rustvlak */
  --shell: #07153B;              /* zijbalk, topbalk op gsm */
  --on-shell: #FFFFFF;
  --on-shell-2: #C6C8E6;         /* secundaire tekst op navy (10,9:1) */
  --shell-line: rgba(255,255,255,.18);
  --shell-hover: rgba(255,255,255,.10);
  --shell-fill: rgba(255,255,255,.06);

  /* Tekst */
  --ink: #0D1030;                /* 18,5:1 op wit */
  --ink-2: #3C4063;              /* secundair, 10:1 */
  --ink-3: #5F6486;              /* metadata, ≥4,5:1 ook op de grijze grond */

  /* Actie */
  --action: #07153B;             /* primaire knop, actieve chip */
  --action-hover: #13296B;
  --on-action: #FFFFFF;
  --accent: #1D3F9A;             /* links, focus, bewerk-icoon (9,4:1) */
  --accent-soft: #E7ECF7;        /* selectie, badge, zachte knop */
  --row-hover: rgba(7, 21, 59, .055); /* rij onder de muis: subtiel donkerder, ook over statuskleuren */
  --focus: #1D3F9A;
  --ring: rgba(29, 63, 154, .28);

  /* Lijnen */
  --line: #E3E5EE;               /* rand van panelen en tegels, scheiding in tabellen */
  --line-2: #D3D6E3;             /* rand bij hover, secundaire knop */
  --field: #8A8FA8;              /* rand van invoervelden (3,2:1) */

  /* Status (tekst + achtergrond, beide AA) */
  --ok: #16683F;    --ok-bg: #E6F4EC;
  --warn: #7A4D00;  --warn-bg: #FBEFD3;
  --bad: #B3261E;   --bad-bg: #FBE8E6;
  --info: #1D3F9A;  --info-bg: #E7ECF7;

  /* Typografie — Google Sans voor titels, knoppen, labels; Roboto voor tekst */
  --font-title: "Google Sans", "Google Sans Text", Roboto, system-ui, sans-serif;
  --font: Roboto, "Google Sans Text", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-2xs: 0.78125rem; /* 12,5 — bijschrift onder een cijfer, tabelkop */
  --fs-xs: 0.8125rem;   /* 13 — metadata, labels van velden, statuslabels */
  --fs-sm: 0.875rem;    /* 14 — tabelcellen, knoppen, tegeltitels */
  --fs-md: 0.9375rem;   /* 15 — lopende tekst in tools */
  --fs-lg: 1.125rem;    /* 18 — paneeltitels, naam van de tool */
  --fs-xl: clamp(1.5rem, 1.2rem + .8vw, 1.875rem); /* 24–30 — paginatitel */
  --fs-stat: 1.75rem;   /* 28 — kerncijfers */
  --fs-2xl: 2.25rem;    /* 36 — paginatitel op sites */
  --fs-display: clamp(2.5rem, 1.6rem + 4.2vw, 6rem); /* alleen Overtuigen */
  --lh-body: 1.5;
  --lh-tight: 1.15;

  /* Ruimte — 4px-basis */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;
  --gutter: clamp(16px, 2.4vw, 40px);  /* zijmarge van de werkruimte */
  --gap: 10px;                         /* tussen tegels, kerncijfers */
  --gap-lg: clamp(16px, 1.6vw, 24px);  /* tussen panelen */

  /* Vorm — scherp maar afgerond */
  --radius-sm: 4px;              /* statuslabel, icoonknop, toetsaanduiding */
  --radius: 6px;                 /* tegels, panelen, knoppen, velden, icoontegel */
  --radius-lg: 8px;              /* zoekbalk, menu, dialoog */
  --radius-pill: 999px;          /* alleen filterchips en de avatar */

  /* Diepte */
  --shadow-1: 0 1px 2px rgba(13, 16, 48, .06), 0 1px 1px rgba(13, 16, 48, .04); /* tegels, panelen */
  --shadow-2: 0 10px 30px -12px rgba(7, 21, 59, .22), 0 4px 10px -6px rgba(7, 21, 59, .12); /* tegel-hover, zoekbalk met focus */
  --shadow-3: 0 24px 60px -20px rgba(7, 21, 59, .35); /* menu, dialoog, toast */

  /* Beweging */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms;

  /* Afmetingen */
  --rail-w: 248px;               /* navy zijbalk */
  --target: 44px;                /* minimale aanraakhoogte */
  --tabbar-h: 60px;
  --measure: 70ch;
}

/* ---------- 2. Geen donkere modus ----------
   Bewust weggelaten: Sint-Victor-tools zijn altijd licht. Voeg geen
   prefers-color-scheme: dark of data-theme="dark" toe. */

/* ---------- 3. Reset en basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--line-2) transparent; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--canvas);
  color: var(--ink);
  font: 400 var(--fs-md)/var(--lh-body) var(--font);
  accent-color: var(--action);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 500; line-height: var(--lh-tight); letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: .75em; }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sv-icon { flex: none; display: block; width: 18px; height: 18px; }
.sv-num, td.num, .sv-table .num { font-variant-numeric: tabular-nums; text-align: right; }
.sv-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sv-skip { position: absolute; left: var(--s-4); top: -100px; z-index: 100; background: var(--surface); padding: var(--s-2) var(--s-4); border-radius: var(--radius); }
.sv-skip:focus { top: var(--s-2); }

/* ---------- 4. App-shell: navy zijbalk links, werkruimte rechts op VOLLE BREEDTE ----------
   Geen hero: de werkruimte begint meteen bovenaan, zodat er bij veel informatie niet
   onnodig gescrold moet worden.
   <body class="sv-has-tabbar">
   <div class="sv-app">
     <aside class="sv-rail">  merk · .sv-rail-new (optioneel) · nav.sv-nav · .sv-rail-foot (Beheer + profiel) · motief </aside>
     <header class="sv-topbar"> (alleen <1024 px) merk · spacer · avatar </header>
     <main class="sv-main"> .sv-pagehead · zoekbalk/filters · inhoud </main>
   </div>
   <nav class="sv-tabbar"> (alleen <1024 px) dezelfde bestemmingen als .sv-nav </nav> */
.sv-app { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.sv-rail { display: none; }

/* Merk: wit logo + scheidingslijntje + naam van de tool (+ ondertitel in de zijbalk) */
.sv-brand { display: flex; align-items: center; gap: var(--s-3); color: inherit; text-decoration: none; min-width: 0; }
.sv-brand svg { height: 34px; width: auto; flex: none; --sv-logo-mark: #FFFFFF; --sv-logo-type: #FFFFFF; }
.sv-brand .sv-sep { width: 1px; height: 26px; background: var(--shell-line); flex: none; }
.sv-brand .sv-appname { display: grid; min-width: 0; font: 500 var(--fs-lg)/1.1 var(--font-title); letter-spacing: .01em; }
.sv-brand .sv-appname b { font-weight: 700; }
.sv-brand .sv-appname small { font: 400 var(--fs-2xs)/1.3 var(--font); color: var(--on-shell-2); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-brand .sv-appname > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Topbalk op gsm en tablet (<1024 px): navy, compact, plakt bovenaan */
.sv-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 56px; padding: env(safe-area-inset-top) var(--gutter) 0;
  background: var(--shell); color: var(--on-shell);
}
.sv-topbar .sv-brand { margin-right: auto; }
.sv-topbar .sv-brand svg { height: 28px; }
.sv-topbar .sv-brand .sv-sep { height: 22px; }
.sv-topbar .sv-brand .sv-appname { font-size: var(--fs-md); }
.sv-topbar .sv-brand .sv-appname small { display: none; }
.sv-topbar .sv-avatar { width: 34px; height: 34px; }

/* Zijbalk (≥1024 px): navy, 248 px, plakt over de volle hoogte, scrolt zelf als het menu lang is */
@media (min-width: 1024px) {
  .sv-app { grid-template-columns: var(--rail-w) minmax(0, 1fr); grid-template-rows: 1fr; }
  .sv-topbar { display: none; }
  .sv-rail {
    position: sticky; top: 0; height: 100dvh; overflow: hidden auto; isolation: isolate; scrollbar-width: thin; scrollbar-color: var(--shell-line) transparent;
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--s-5) var(--s-3) var(--s-3);
    background: var(--shell); color: var(--on-shell);
  }
}
.sv-rail .sv-brand { padding: 0 var(--s-2) var(--s-5); }
.sv-rail .sv-brand svg { height: 34px; }
.sv-rail .sv-brand .sv-appname { font-size: 1.0625rem; }
/* Hoofdactie bovenaan de zijbalk (optioneel): witte knop */
.sv-rail .sv-rail-new { margin: 0 0 var(--s-4); background: var(--on-shell); color: var(--shell); }
.sv-rail .sv-rail-new:hover { background: var(--on-shell-2); box-shadow: none; }

/* Menu-items: icoon + woord (+ aantal), 40 px; actief = wit met navy tekst */
.sv-nav { display: flex; flex-direction: column; gap: 2px; }
.sv-nav a, .sv-nav button {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 40px; padding: 0 var(--s-3); border-radius: var(--radius);
  color: var(--on-shell-2); font: 500 var(--fs-sm)/1.2 var(--font-title);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.sv-nav a:hover, .sv-nav button:hover { background: var(--shell-hover); color: var(--on-shell); }
.sv-nav a:focus-visible, .sv-nav button:focus-visible { outline: 2px solid var(--on-shell); outline-offset: -2px; }
.sv-nav [aria-current="page"] { background: var(--on-shell); color: var(--shell); }
.sv-nav .sv-icon { width: 18px; height: 18px; }
.sv-nav .sv-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-nav .sv-count { font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; opacity: .75; }
.sv-nav .sv-count--alert { opacity: 1; background: var(--bad-bg); color: var(--bad); padding: 1px 6px; border-radius: var(--radius-sm); }
.sv-nav-label { margin: var(--s-4) var(--s-3) var(--s-1); font: 500 var(--fs-2xs)/1 var(--font-title); letter-spacing: .08em; text-transform: uppercase; color: var(--on-shell-2); opacity: .8; }

/* Voet van de zijbalk: Beheer e.d. en het profiel. Het torenmotief staat erachter. */
.sv-rail-foot { margin-top: auto; padding-top: var(--s-4); display: grid; gap: 2px; }
.sv-rail-foot .sv-nav { margin-bottom: var(--s-2); }
.sv-motief {
  position: absolute; z-index: -1; pointer-events: none;
  right: -48px; bottom: 0;
  width: auto; height: 260px; color: var(--on-shell); opacity: .07;
}
@media (max-height: 640px) { .sv-motief { display: none; } }

/* Profiel: ronde foto (initialen als er geen foto is) + naam + e-mail; klik opent "Aangemeld als".
   In de zijbalk een brede knop onderaan, in de topbalk alleen de foto. Het menu opent naar boven
   (zijbalk) of naar beneden (topbalk). */
.sv-profile { position: relative; flex: none; }
.sv-profile-btn {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 10px; padding: var(--s-3) var(--s-2) var(--s-2);
  border-top: 1px solid var(--shell-line); border-radius: 0 0 var(--radius) var(--radius);
}
.sv-profile-btn:hover, .sv-profile-btn[aria-expanded="true"] { background: var(--shell-hover); }
.sv-profile-btn:focus-visible { outline: 2px solid var(--on-shell); outline-offset: -2px; }
.sv-profile-btn .sv-who-text { display: grid; min-width: 0; line-height: 1.25; }
.sv-profile-btn .sv-who-text b { font: 500 var(--fs-sm)/1.25 var(--font-title); color: var(--on-shell); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-profile-btn .sv-who-text span { font-size: var(--fs-2xs); color: var(--on-shell-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-avatar {
  display: grid; place-items: center; flex: none; overflow: hidden; padding: 0;
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); background: var(--sv-navy-3); color: var(--on-shell);
  font: 500 var(--fs-sm)/1 var(--font-title); letter-spacing: .02em; user-select: none;
  transition: border-color var(--t-base) var(--ease-out);
}
button.sv-avatar { cursor: pointer; }
button.sv-avatar:hover, button.sv-avatar[aria-expanded="true"], .sv-profile-btn:hover .sv-avatar { border-color: var(--on-shell); }
.sv-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-menu .sv-avatar, .sv-avatar--lg { width: 48px; height: 48px; border: 0; background: var(--accent-soft); color: var(--shell); font-size: var(--fs-md); cursor: default; }
.sv-rail .sv-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: 0; min-width: 0; transform-origin: bottom left; }  /* binnen de zijbalk blijven: die knipt af */

/* Werkruimte */
.sv-main { min-width: 0; padding: var(--s-6) var(--gutter) calc(var(--s-7) + env(safe-area-inset-bottom)); }
@media (max-width: 1023px) { .sv-main { padding-top: var(--s-5); } }
@media (min-width: 2200px) { :root { --gutter: 56px; } }

/* Paginakop: één regel context, titel, één zin; acties rechts. Compact: geen hero.
   <div class="sv-pagehead"><div><div class="sv-eyebrow">Financieel</div><h1>Overzicht</h1>
   <p class="sv-sub">…</p></div><div class="sv-actions">…</div></div> */
.sv-pagehead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-5); }
.sv-eyebrow { font: 500 var(--fs-2xs)/1 var(--font-title); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sv-pagehead h1 { margin-top: 6px; font-size: var(--fs-xl); line-height: 1.12; }
.sv-pagehead h1 .sv-naam { color: var(--accent); }   /* alleen de voornaam in een begroeting */
.sv-pagehead .sv-sub { margin-top: 6px; color: var(--ink-2); max-width: var(--measure); }
.sv-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 640px) { .sv-pagehead { grid-template-columns: 1fr; } .sv-pagehead .sv-actions > * { flex: 1; } }

/* Onderbalk op gsm en tablet (<1024 px, max 5 bestemmingen, altijd icoon + tekst) */
.sv-tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.sv-tabbar a, .sv-tabbar button {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0;
  min-height: var(--tabbar-h); padding: var(--s-1) 2px;
  font: 500 var(--fs-2xs)/1.2 var(--font-title); color: var(--ink-3); text-align: center;
}
.sv-tabbar .sv-icon { width: 22px; height: 22px; }
.sv-tabbar [aria-current="page"] { color: var(--action); }
.sv-tabbar [aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 50%; width: 14px; height: 7px; transform: translateX(-50%); background: var(--action); clip-path: polygon(0 0, 100% 0, 50% 100%); }
@media (max-width: 1023px) { .sv-has-tabbar .sv-main { padding-bottom: calc(var(--tabbar-h) + var(--s-6) + env(safe-area-inset-bottom)); } }
@media (min-width: 1024px) { .sv-tabbar { display: none; } }

/* ---------- 5. Zoekbalk ---------- */
.sv-search {
  display: flex; align-items: center; gap: var(--s-3);
  height: 52px; padding: 0 var(--s-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.sv-search:focus-within { border-color: var(--accent); box-shadow: var(--shadow-2), 0 0 0 4px var(--ring); }
.sv-search .sv-icon { color: var(--ink-3); }
.sv-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 16px; }
.sv-search input::placeholder { color: var(--ink-3); }
.sv-kbd {
  display: inline-flex; align-items: center; padding: 3px 7px;
  border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink-3); font: 500 12px/1 var(--font-title); white-space: nowrap;
}
@media (max-width: 640px), (pointer: coarse) { .sv-search .sv-kbd { display: none; } }

/* ---------- 6. Filterchips ---------- */
.sv-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.sv-search + .sv-chips { margin-top: var(--s-3); }
.sv-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 13px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink-2);
  font: 500 var(--fs-sm)/1 var(--font-title);
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
@media (pointer: coarse) { .sv-chip { height: 40px; } }
.sv-chip:hover { border-color: var(--line-2); color: var(--ink); }
.sv-chip[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: var(--on-action); }
.sv-chip .sv-count { opacity: .6; font-size: 12px; font-variant-numeric: tabular-nums; }
/* Gsm: chips op één rij die zijwaarts scrolt (binnen de rij, nooit de pagina) */
@media (max-width: 640px) {
  .sv-chips--scroll { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); scrollbar-width: none; scroll-padding-inline: var(--gutter); }
  .sv-chips--scroll::-webkit-scrollbar { display: none; }
  .sv-chips--scroll .sv-chip { flex: none; }
}

/* ---------- 7. Secties ---------- */
/* <div class="sv-sectionhead"><h2>Administratie</h2><span class="sv-count">7</span></div> */
.sv-section { margin-top: 22px; }
.sv-sectionhead { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 10px; }
.sv-sectionhead h2 { font-size: var(--fs-md); }
.sv-sectionhead .sv-count { color: var(--ink-3); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; }
.sv-sectionhead::after { content: ""; flex: 1; height: 1px; background: var(--line); align-self: center; margin-left: 6px; }
.sv-sectionhead .sv-actions { order: 3; display: flex; gap: var(--s-2); align-self: center; }

/* ---------- 8. Rasters die de breedte BENUTTEN ---------- */
.sv-grid { display: grid; gap: var(--gap-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 17rem)), 1fr)); }
.sv-grid--tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.sv-split { display: grid; gap: var(--gap-lg); align-items: start; }
@media (min-width: 900px) { .sv-split { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); } }
@media (min-width: 900px) and (max-width: 1599px) { .sv-split--detail { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1600px) { .sv-split--detail { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); } }
.sv-split > * { min-width: 0; }
.sv-workspace { display: grid; gap: var(--gap-lg); align-items: start; }
.sv-workspace > * { min-width: 0; }
@media (min-width: 1100px) { .sv-workspace { grid-template-columns: minmax(22rem, 30rem) minmax(0, 1fr); } .sv-workspace > form, .sv-workspace > .sv-panel:first-child { position: sticky; top: var(--s-5); } }
.sv-prose { max-width: var(--measure); }
.sv-prose > * + * { margin-top: .9em; }

/* ---------- 9. Panelen, tegels, badges ---------- */
/* Wit op de grijze grond, dunne rand, nauwelijks schaduw. Geen kaartjes in kaartjes. */
.sv-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: var(--s-4) clamp(var(--s-4), 1.4vw, var(--s-5)); }
.sv-panel > h2, .sv-panel > h3 { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.sv-panel--flush { padding: 0; overflow: hidden; }
.sv-stack-lg > * + * { margin-top: var(--gap-lg); }

/* Tegel: klikbaar item met gekleurde icoontegel (tool, rubriek, snelkoppeling).
   <a class="sv-tile sv-tint--blue" href="…"><span class="sv-tile-icon"><svg…/></span>
     <span class="sv-tile-text"><h3>ICT-melding <span class="sv-badge">nieuw</span></h3><p>Meld een probleem…</p></span></a> */
.sv-tile {
  position: relative; display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); min-height: 66px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1);
  color: inherit; text-decoration: none;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
@media (hover: hover) {
  a.sv-tile:hover, button.sv-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--line-2); }
}
a.sv-tile:active { transform: none; }
.sv-tile-icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--radius); background: var(--tint-bg, var(--accent-soft)); color: var(--tint-fg, var(--accent));
}
.sv-tile-icon .sv-icon { width: 20px; height: 20px; }
.sv-tile-text { flex: 1; min-width: 0; }
.sv-tile h3 { display: flex; align-items: center; gap: 6px; font-size: 0.90625rem; line-height: 1.3; }
.sv-tile p { margin: 2px 0 0; color: var(--ink-3); font-size: var(--fs-2xs); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Tintparen voor icoontegels en categorieën (icoon ≥3:1 op zijn tint; nooit als vlak achter tekst) */
.sv-tint--navy   { --tint-bg: #E7EAF3; --tint-fg: #07153B; }
.sv-tint--blue   { --tint-bg: #E3EDFF; --tint-fg: #1A56DB; }
.sv-tint--teal   { --tint-bg: #DFF5F2; --tint-fg: #0F766E; }
.sv-tint--green  { --tint-bg: #E3F5E8; --tint-fg: #188038; }
.sv-tint--violet { --tint-bg: #EFE7FF; --tint-fg: #6D28D9; }
.sv-tint--rose   { --tint-bg: #FDE7EC; --tint-fg: #C2185B; }
.sv-tint--amber  { --tint-bg: #FFF1D6; --tint-fg: #B45309; }
.sv-tint--slate  { --tint-bg: #ECEEF3; --tint-fg: #475069; }

.sv-badge {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent); font: 500 10.5px/1 var(--font-title); white-space: nowrap;
}
.sv-badge--muted { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }

/* ---------- 10. Kerncijfers (overzichtblokken) ----------
   <div class="sv-stats"><div class="sv-stat sv-tint--green">
     <div class="sv-stat-label">Inkomsten</div><span class="sv-stat-icon"><svg…/></span>
     <div class="sv-stat-value sv-pos">€ 17 167,31</div><div class="sv-stat-note">Ontvangen in deze periode</div></div></div> */
.sv-stats { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); }
.sv-stat {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--s-2);
  padding: 14px var(--s-4); min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.sv-stat-label { font-size: var(--fs-xs); color: var(--ink-2); padding-top: 2px; }
.sv-stat-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius); background: var(--tint-bg, var(--accent-soft)); color: var(--tint-fg, var(--accent)); }
.sv-stat-icon .sv-icon { width: 16px; height: 16px; }
.sv-stat-value { grid-column: 1 / -1; margin-top: var(--s-3); font: 500 var(--fs-stat)/1.1 var(--font-title); font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.sv-stat-note { grid-column: 1 / -1; margin-top: var(--s-1); font-size: var(--fs-2xs); color: var(--ink-3); }
.sv-pos { color: var(--ok); }
.sv-neg { color: var(--bad); }
@media (max-width: 640px) {
  .sv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .sv-stat { padding: var(--s-3); }
  .sv-stat-value { font-size: 1.375rem; margin-top: var(--s-2); }
  .sv-stat-note { display: none; }
}

/* Werkruimte met zijkolom rechts: het werk (lijst, formulier) begint bovenaan links; overzicht-
   blokken, een samenvatting of hulp staan rechts. Pas vanaf 1600 px is daar plaats voor; daaronder
   wordt de zijkolom een compacte strook BOVEN het werk (of eronder met .sv-aside--after).
   <div class="sv-layout"><div class="sv-layout-main">zoekbalk · chips · lijst</div>
     <aside class="sv-aside" aria-label="Overzicht"><div class="sv-stats">…</div></aside></div> */
.sv-layout { display: grid; gap: var(--gap-lg); align-items: start; }
.sv-layout > * { min-width: 0; }
.sv-layout-main > * + * { margin-top: var(--s-4); }
.sv-layout > .sv-aside { order: -1; }
.sv-layout > .sv-aside--after { order: 1; }
.sv-aside > * + * { margin-top: var(--gap-lg); }
@media (max-width: 1599px) {                              /* compacte strook: weinig hoogte */
  .sv-aside .sv-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--gap); }
  .sv-aside .sv-stat { padding: 10px 14px; }
  .sv-aside .sv-stat-icon { width: 24px; height: 24px; }
  .sv-aside .sv-stat-value { font-size: 1.25rem; margin-top: 4px; }
  .sv-aside .sv-stat-note { display: none; }
}
@media (max-width: 640px) {                               /* gsm: één rij die zijwaarts scrolt */
  .sv-aside .sv-stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(9.5rem, 44%); overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 4px; scrollbar-width: none; }
  .sv-aside .sv-stats::-webkit-scrollbar { display: none; }
}
@media (min-width: 1600px) {
  .sv-layout { grid-template-columns: minmax(0, 1fr) clamp(260px, 17vw, 340px); }
  .sv-layout > .sv-aside, .sv-layout > .sv-aside--after { order: 0; position: sticky; top: var(--s-5); }
  .sv-aside .sv-stats { grid-template-columns: 1fr; }
}

/* ---------- 11. Knoppen ---------- */
.sv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 40px; padding: 0 var(--s-4);
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--action); color: var(--on-action);
  font: 500 var(--fs-sm)/1 var(--font-title); text-decoration: none; cursor: pointer; white-space: nowrap;
  touch-action: manipulation;
  transition: background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
@media (pointer: coarse) { .sv-btn { min-height: var(--target); } }
.sv-btn:hover { background: var(--action-hover); box-shadow: 0 6px 16px -8px rgba(7, 21, 59, .6); }
.sv-btn:active { transform: translateY(1px); }
.sv-btn .sv-icon { width: 16px; height: 16px; }
.sv-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.sv-btn--secondary:hover { background: var(--surface-2); box-shadow: none; border-color: var(--field); }
.sv-btn--ghost { background: transparent; color: var(--accent); }
.sv-btn--ghost:hover { background: var(--accent-soft); box-shadow: none; }
.sv-btn--danger { background: transparent; color: var(--bad); }
.sv-btn--danger:hover { background: var(--bad-bg); box-shadow: none; }
.sv-btn--danger-solid { background: var(--bad); color: #fff; }
.sv-btn--sm { min-height: 32px; padding: 0 var(--s-3); font-size: var(--fs-xs); }
.sv-btn[disabled]:not([aria-busy="true"]), .sv-btn[aria-disabled="true"]:not([aria-busy="true"]) { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
/* Bezig: label blijft leesbaar, draaiertje ervoor. Zet aria-busy="true" én disabled. */
.sv-btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.sv-btn[aria-busy="true"]::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: sv-spin .7s linear infinite; }
.sv-iconbtn { width: 36px; height: 36px; padding: 0; background: transparent; color: var(--ink-2); border: 0; border-radius: var(--radius-sm); cursor: pointer; display: inline-grid; place-items: center; }
.sv-iconbtn:hover { background: var(--sunken); color: var(--ink); }
@media (pointer: coarse) { .sv-iconbtn { width: var(--target); height: var(--target); } }

/* ---------- 12. Formulieren en filterpaneel ---------- */
.sv-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.sv-label { font: 500 var(--fs-xs)/1.2 var(--font-title); color: var(--ink-2); }
.sv-help { font-size: var(--fs-2xs); color: var(--ink-3); }
.sv-error { font-size: var(--fs-xs); color: var(--bad); font-weight: 500; }
.sv-input, .sv-select, .sv-textarea {
  width: 100%; min-width: 0; min-height: 40px; padding: 0 var(--s-3);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--field); border-radius: var(--radius);
  font-size: var(--fs-md); outline: 0;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
@media (max-width: 640px), (pointer: coarse) { .sv-input, .sv-select, .sv-textarea { font-size: 16px; min-height: var(--target); } } /* geen inzoomen op iPhone */
.sv-textarea { min-height: 7rem; padding: 10px var(--s-3); resize: vertical; line-height: 1.45; }
.sv-input:hover, .sv-select:hover, .sv-textarea:hover { border-color: var(--ink-3); }
.sv-input:focus, .sv-select:focus, .sv-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.sv-input[aria-invalid="true"], .sv-select[aria-invalid="true"], .sv-textarea[aria-invalid="true"] { border-color: var(--bad); }
.sv-input::placeholder, .sv-textarea::placeholder { color: var(--ink-3); }
.sv-input[readonly] { background: var(--sunken); }
fieldset.sv-field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.sv-field > legend { padding: 0; margin-bottom: 6px; }
.sv-stack > * + * { margin-top: var(--s-5); }
.sv-form-grid { display: grid; gap: var(--s-4) var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.sv-form-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
@media (max-width: 640px) {
  .sv-form-actions--sticky { position: sticky; bottom: 0; z-index: 5; margin-inline: calc(-1 * var(--s-4)); padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
  .sv-form-actions--sticky .sv-btn { flex: 1; }
}
/* Keuzeknoppen (lesuren, dagdelen, klassen) */
.sv-choices { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr)); }
.sv-choices label { position: relative; }
.sv-choices input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sv-choices span { display: grid; place-items: center; min-height: 40px; padding: var(--s-1) var(--s-2); border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); font: 500 var(--fs-sm)/1.2 var(--font-title); text-align: center; overflow-wrap: anywhere; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.sv-choices small { display: block; font-weight: 400; font-size: var(--fs-2xs); opacity: .8; }
.sv-choices input:hover + span { background: var(--surface-2); border-color: var(--field); }
.sv-choices input:checked + span { background: var(--action); border-color: var(--action); color: var(--on-action); }
.sv-choices input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.sv-choices input:disabled + span { opacity: .45; }
@media (pointer: coarse) { .sv-choices span { min-height: var(--target); } }

/* Filterpaneel: wit paneel met gelabelde velden, chips en de acties rechts onderaan.
   <form class="sv-panel sv-filterpanel"><div class="sv-filter-row">velden…</div>
     <div class="sv-filter-row"><div class="sv-field sv-field--wide">…<div class="sv-chips">…</div></div>
     <div class="sv-filter-actions">[Laden] [Filters wissen] [Grafieken]</div></div></form> */
.sv-filterpanel { display: grid; gap: var(--s-4); }
.sv-filter-row { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-3); align-items: flex-end; }
.sv-filter-row > .sv-field { flex: 1 1 9.5rem; }
.sv-filter-row > .sv-field--wide, .sv-filter-row > .sv-field:has(input[type="search"]) { flex: 3 1 18rem; }
.sv-filter-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-left: auto; }
@media (max-width: 640px) {
  .sv-filter-row > .sv-field { flex: 1 1 calc(50% - var(--s-3)); min-width: 0; }
  .sv-filter-row .sv-input[type="date"] { padding-inline: var(--s-2); }
  .sv-filter-row > .sv-field--wide, .sv-filter-row > .sv-field:has(input[type="search"]), .sv-filter-actions { flex-basis: 100%; }
  .sv-filter-actions .sv-btn { flex: 1; }
}
/* Chips als filter in een veld: compacter */
.sv-field .sv-chips { gap: 6px; }

/* ---------- 13. Tabellen: compact, volle breedte, op gsm als lijst ---------- */
.sv-table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow-x: auto; }
.sv-panel > .sv-table-wrap { border: 0; box-shadow: none; border-radius: 0; }
.sv-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.sv-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2); color: var(--ink-3);
  font: 500 var(--fs-2xs)/1.2 var(--font-title); text-align: left; white-space: nowrap;
  padding: 8px var(--s-3); border-bottom: 1px solid var(--line);
}
.sv-table td { padding: 9px var(--s-3); border-top: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.sv-table tbody tr:first-child td { border-top: 0; }
.sv-table td.wrap { white-space: normal; min-width: 14rem; }
.sv-table td.date { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sv-table td.sv-pos, .sv-table td.sv-neg { font-variant-numeric: tabular-nums; }
.sv-table .sv-strong { font-weight: 500; color: var(--ink); }
.sv-table .sv-meta { color: var(--ink-3); font-size: var(--fs-2xs); }
/* Rij met een betekenis (bv. inkomsten, geannuleerd): zachte tint over de volle rij */
.sv-table tbody tr[data-tone="ok"]   > td { background-color: var(--ok-bg); }
.sv-table tbody tr[data-tone="warn"] > td { background-color: var(--warn-bg); }
.sv-table tbody tr[data-tone="bad"]  > td { background-color: var(--bad-bg); }
.sv-table tbody tr[data-tone="info"], .sv-table tbody tr[aria-selected="true"] { background: var(--accent-soft); }
/* Rij onder de muis of met toetsenbordfocus: subtiel donkerder over de volle breedte, als laag
   óver de eigen rijkleur, plus een schoolblauwe streep links. Lege/laadrijen (één cel) niet. */
.sv-table tbody tr:not(:has(> td:only-child)):is(:hover, :focus-within) > td { background-image: linear-gradient(var(--row-hover), var(--row-hover)); }
.sv-table tbody tr:not(:has(> td:only-child)):is(:hover, :focus-within) > td:first-child { box-shadow: inset 3px 0 0 var(--action); }
.sv-table th[aria-sort] button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.sv-table th[aria-sort] button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Icoonkolommen: document en acties. Elke knop heeft aria-label + title. */
.sv-table th.sv-col-icon, .sv-table td.sv-col-icon { text-align: center; width: 1%; padding-inline: var(--s-2); }
.sv-table th.sv-col-actions, .sv-table td.sv-col-actions { width: 1%; text-align: right; padding-right: var(--s-3); }
.sv-rowacts { display: inline-flex; gap: 2px; justify-content: flex-end; }
.sv-rowact {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-3); cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.sv-rowact .sv-icon { width: 18px; height: 18px; }
.sv-rowact:hover { background: var(--sunken); color: var(--ink); }
.sv-rowact--edit { color: var(--accent); }
.sv-rowact--done[aria-pressed="true"] { color: var(--ok); }
.sv-rowact--delete { color: var(--bad); }
.sv-rowact--delete:hover { background: var(--bad-bg); color: var(--bad); }
.sv-rowact--doc { color: var(--accent); }          /* document aanwezig: openen */
.sv-rowact--upload { color: var(--ink-3); }        /* nog geen document: opladen */
.sv-rowact--slot { visibility: hidden; }         /* lege plaats houden zodat de iconen onder elkaar blijven */
@media (pointer: coarse) { .sv-rowact { width: 40px; height: 40px; } }
/* Gsm (≤720 px): elke rij wordt een compact lijstitem.
   Regel 1: identiteit (td[data-primary], vet) en rechts de hoofdwaarde (td[data-end], bv. bedrag).
   Regel 2: de overige cellen klein naast elkaar, met hun label ervoor (zonder label: .sv-nolabel-sm).
   Regel 3: icoon- en actiecellen. Onbelangrijke kolommen: .sv-hide-sm. */
@media (max-width: 720px) {
  .sv-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sv-table--stack, .sv-table--stack tbody { display: block; width: 100%; }
  .sv-table--stack tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
  .sv-table--stack tr:first-child { border-top: 0; }
  .sv-table--stack tr::before { content: ""; order: 25; flex-basis: 100%; height: 0; }
  .sv-table--stack tr::after { content: ""; order: 45; flex-basis: 100%; height: 0; }
  .sv-table--stack td { order: 30; flex: none; display: block; border: 0; padding: 0; white-space: normal; text-align: left; background: none !important; font-size: var(--fs-xs); color: var(--ink-2); min-width: 0; }
  .sv-table--stack td::before { content: attr(data-label) " "; color: var(--ink-3); }
  .sv-table--stack td.sv-nolabel-sm::before, .sv-table--stack td[data-primary]::before, .sv-table--stack td[data-end]::before,
  .sv-table--stack td.sv-col-icon::before, .sv-table--stack td.sv-col-actions::before { content: none; }
  .sv-table--stack td.sv-hide-sm { display: none; }
  .sv-table--stack td[data-primary] { order: 10; flex: 1 1 0; min-width: 55%; font-size: var(--fs-md); color: var(--ink); }
  .sv-table--stack td[data-end] { order: 20; margin-left: auto; font-size: var(--fs-md); font-weight: 500; color: var(--ink); text-align: right; }
  .sv-table--stack td[data-end].sv-pos { color: var(--ok); }
  .sv-table--stack td[data-end].sv-neg { color: var(--bad); }
  .sv-table--stack td.wrap { min-width: 0; }
  .sv-table--stack td.sv-col-icon, .sv-table--stack td.sv-col-actions { order: 50; width: auto; padding: 0; margin-top: var(--s-1); }
  .sv-table--stack td.sv-col-icon { margin-left: calc(-1 * var(--s-2)); }
  .sv-table--stack td.sv-col-actions { margin-left: auto; }
  .sv-table--stack .sv-rowacts { gap: var(--s-1); }
  .sv-table--stack tbody tr[data-tone="ok"]   { background: var(--ok-bg); }
  .sv-table--stack tbody tr[data-tone="warn"] { background: var(--warn-bg); }
  .sv-table--stack tbody tr[data-tone="bad"]  { background: var(--bad-bg); }
  .sv-table--stack tbody tr:not(:has(> td:only-child)):is(:hover, :focus-within) > td,
  .sv-table--stack tbody tr:not(:has(> td:only-child)):is(:hover, :focus-within) > td:first-child { background-image: none; box-shadow: none; }
  .sv-table--stack tbody tr:not(:has(> td:only-child)):is(:hover, :focus-within) {
    background-image: linear-gradient(var(--action), var(--action)), linear-gradient(var(--row-hover), var(--row-hover));
    background-size: 3px 100%, 100% 100%; background-repeat: no-repeat;
  }
  .sv-table--stack td:only-child { flex: 1 1 100%; }
}
/* Tablet (721–1100 px): kolommen die minder belangrijk zijn verbergen, zodat de icoonkolommen
   rechts in beeld blijven. Zet de klasse op de th én de td's. */
@media (min-width: 721px) and (max-width: 1100px) { .sv-table .sv-hide-md { display: none; } }
/* Voet onder een lijst: aantal, totaal, paginering */
.sv-table-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: 10px var(--s-3); border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-xs); }

/* ---------- 14. Status en meldingen ---------- */
.sv-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: var(--radius-sm);
  font: 500 var(--fs-2xs)/1.5 var(--font-title); white-space: nowrap;
  background: var(--info-bg); color: var(--info);
}
.sv-status::before { content: ""; width: 7px; height: 7px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
/* Vorm verschilt per status: ▲ ok/info · ◆ let op · ■ probleem · ● neutraal */
.sv-status--ok { background: var(--ok-bg); color: var(--ok); }
.sv-status--warn { background: var(--warn-bg); color: var(--warn); }
.sv-status--warn::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 8px; height: 8px; }
.sv-status--bad { background: var(--bad-bg); color: var(--bad); }
.sv-status--bad::before { clip-path: none; }
.sv-status--neutral { background: var(--sunken); color: var(--ink-2); }
.sv-status--neutral::before { clip-path: circle(50%); }

.sv-notice { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--info-bg); color: var(--ink); }
.sv-notice--ok { background: var(--ok-bg); } .sv-notice--warn { background: var(--warn-bg); } .sv-notice--bad { background: var(--bad-bg); }
.sv-notice strong { display: block; font-family: var(--font-title); font-weight: 500; }

.sv-toast {
  position: fixed; z-index: 200; left: 50%; bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  transform: translateX(-50%); max-width: min(92vw, 32rem);
  display: flex; gap: var(--s-3); align-items: center;
  padding: var(--s-3) 18px; border-radius: var(--radius-lg);
  background: #15172B; color: #FFFFFF; font-size: var(--fs-sm); box-shadow: var(--shadow-3);
  animation: sv-rise var(--t-base) var(--ease-out);
}
.sv-toast--bad { background: var(--bad); }
@media (max-width: 1023px) { .sv-has-tabbar .sv-toast { bottom: calc(var(--tabbar-h) + var(--s-3) + env(safe-area-inset-bottom)); } }

/* Lege staat: legt uit en biedt de volgende stap */
.sv-empty { display: grid; justify-items: center; text-align: center; gap: var(--s-2); padding: var(--s-7) var(--s-5); color: var(--ink-3); }
.sv-empty .sv-tile-icon { width: 56px; height: 56px; margin-bottom: var(--s-2); }
.sv-empty h3 { color: var(--ink); font-size: var(--fs-lg); }
.sv-empty p { max-width: 48ch; }

/* Laden: skeletten op de plaats van de inhoud, geen spinner in het midden */
.sv-skel { display: block; height: 1em; border-radius: var(--radius-sm); background: var(--sunken); animation: sv-pulse 1.4s ease-in-out infinite; }

/* ---------- 15. Menu en dialoog ---------- */
.sv-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; min-width: 270px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3); padding: var(--s-2);
  transform-origin: top right; animation: sv-pop var(--t-fast) var(--ease-out);
}
.sv-menu .sv-who { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); align-items: center; padding: 10px var(--s-3) var(--s-3); border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.sv-menu .sv-who-label { grid-column: 1 / -1; font-size: var(--fs-2xs); color: var(--ink-3); margin-bottom: var(--s-2); }
.sv-menu .sv-who .sv-avatar { grid-row: span 2; }
.sv-menu .sv-who strong { font: 500 var(--fs-md)/1.3 var(--font-title); overflow-wrap: anywhere; }
.sv-menu .sv-who span { color: var(--ink-3); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.sv-menu .sv-who .sv-badges { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-2); }
.sv-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px var(--s-3); border: 0; border-radius: var(--radius); background: none; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; font-size: var(--fs-sm); }
.sv-menu-item:hover { background: var(--surface-2); }
.sv-menu-item .sv-icon { width: 16px; height: 16px; color: var(--ink-3); }

dialog.sv-dialog { border: 0; padding: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); width: min(92vw, 36rem); box-shadow: var(--shadow-3); }
dialog.sv-dialog::backdrop { background: rgba(7, 21, 59, .45); }
.sv-dialog header, .sv-dialog .sv-dialog-body, .sv-dialog footer { padding: var(--s-5); }
.sv-dialog header { padding-bottom: 0; } .sv-dialog header h2 { font-size: var(--fs-lg); }
.sv-dialog footer { display: flex; justify-content: flex-end; gap: var(--s-2); padding-top: 0; }
@media (max-width: 640px) {
  dialog.sv-dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: env(safe-area-inset-bottom); }
}

/* ---------- 16. Overtuigen/Lezen (websites) ---------- */
.sv-band { padding: clamp(64px, 9vw, 176px) var(--gutter); }
.sv-band--navy { background: var(--shell); color: var(--on-shell); }
.sv-band--navy a { color: var(--on-shell); }
.sv-display { font: 500 var(--fs-display)/.98 var(--font-title); letter-spacing: -0.02em; }
.sv-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-lg); }

/* ---------- 17. Beweging ---------- */
@keyframes sv-spin { to { transform: rotate(360deg); } }
@keyframes sv-rise { from { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes sv-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes sv-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 18. Afdrukken ---------- */
@media print {
  .sv-rail, .sv-topbar, .sv-tabbar, .sv-actions, .sv-filterpanel, .sv-search, .sv-chips, .sv-btn, .sv-col-actions { display: none !important; }
  .sv-app { display: block; }
  body { background: #fff; color: #000; }
  .sv-panel, .sv-table-wrap, .sv-stat { box-shadow: none; break-inside: avoid; }
}