/* BLENDR huisstijl (grid-docs/docs/huisstijl.md), stijl "Concept B --
   Minimalistisch Scandinavisch" (frontend/design-concepts/concept-b.html +
   README.md, gekozen door Rob na de stijlreview van 2026-08-31, PR #389).
   Bron van waarheid voor de tokens/regels hieronder is die mockup -- dit
   bestand past dezelfde tokens toe op de ECHTE app-klassen/structuur uit
   app.js/index.html. Geen logo-bestand beschikbaar in dit project --
   woordmerk blijft in tekst (Raleway Extra Bold), zoals voorheen. */

:root {
  --page-bg: #f6f1ea;
  --surface: #fffcf8;
  --surface-alt: #efe8df;
  --text: #38322d;
  --text-strong: #1f1a16;
  --text-muted: #46403a;
  --border: #e3dacf;
  --ctl-border: #7b7168;
  --focus: #1f1a16;
  --brand: #f68712;
  --on-brand: #1a1617;
  --nav-actief-bg: #1f1a16;
  --nav-actief-tekst: #fffcf8;
  --keuze-bg: #1f1a16;
  --keuze-tekst: #fffcf8;
  --tegel-bg: #efe8df;
  --tegel-tekst: #38322d;
  --bord-bg: #fffcf8;
  --bord-rand: #1f1a16;
  --prio-hoog: #7c3a1e;
  --on-prio-hoog: #ffffff;
  --prio-midden: #b4613a;
  --prio-midden-wash: #f5e3d8;
  --prio-midden-tekst: #6b2f14;
  --prio-laag: #857a70;
  --norm-binnen: #2f7d4f;
  --norm-binnen-wash: #e2f0e6;
  --norm-binnen-tekst: #1a5230;
  --on-norm-binnen: #ffffff;
  --norm-boven: #b07a14;
  --norm-boven-wash: #f8eccf;
  --norm-boven-tekst: #634204;
  --on-norm-boven: #1a1617;
  --norm-ver: #a83c2c;
  --norm-ver-wash: #f6deda;
  --norm-ver-tekst: #7a2416;
  --on-norm-ver: #ffffff;
  --spark-vlak: #efe8df;
  --spark-lijn: #38322d;
  --radius: 0.75rem;
  --header-h: 4.25rem; /* hoogte sticky header; de sticky filterbalk plakt eronder */

  --font-koppen: "Livvic", "DIN", Arial, Inter, sans-serif;
  --font-body: "Catamaran", "DIN", Arial, Inter, sans-serif;
  --font-branding: "Raleway", "DIN", Arial, Inter, sans-serif;

  color-scheme: light dark;
}

/* Automatisch donker thema (systeemvoorkeur) -- zelfde tokens als
   concept-b.html. Een handmatige thema-toggle staat sinds het side-menu
   (design-concepts/concept-b.html, PR #392) ook echt in de app -- zie
   "Side-menu" verderop in dit bestand en THEME_KEY in app.js. */
@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #1a1714;
    --surface: #232019;
    --surface-alt: #2c2822;
    --text: #e6dfd6;
    --text-strong: #f7f2eb;
    --text-muted: #c6bdb2;
    --border: #3a342d;
    --ctl-border: #8c8277;
    --focus: #f7f2eb;
    --brand: #f68712;
    --on-brand: #1a1617;
    --nav-actief-bg: #f7f2eb;
    --nav-actief-tekst: #1a1714;
    --keuze-bg: #f7f2eb;
    --keuze-tekst: #1a1714;
    --tegel-bg: #2c2822;
    --tegel-tekst: #e6dfd6;
    --bord-bg: #232019;
    --bord-rand: #f7f2eb;
    --prio-hoog: #e39a78;
    --on-prio-hoog: #1a1617;
    --prio-midden: #c97b52;
    --prio-midden-wash: #3a2a20;
    --prio-midden-tekst: #f2c9b0;
    --prio-laag: #8c8277;
    --norm-binnen: #5cb27a;
    --norm-binnen-wash: #1e3426;
    --norm-binnen-tekst: #9ed8b2;
    --on-norm-binnen: #1a1617;
    --norm-boven: #d9a23a;
    --norm-boven-wash: #3a2e14;
    --norm-boven-tekst: #f0cf84;
    --on-norm-boven: #1a1617;
    --norm-ver: #e07a66;
    --norm-ver-wash: #3f2320;
    --norm-ver-tekst: #f5b3a7;
    --on-norm-ver: #1a1617;
    --spark-vlak: #2c2822;
    --spark-lijn: #f7f2eb;
    color-scheme: dark;
  }
}

html[data-theme="dark"] {
  --page-bg: #1a1714;
  --surface: #232019;
  --surface-alt: #2c2822;
  --text: #e6dfd6;
  --text-strong: #f7f2eb;
  --text-muted: #c6bdb2;
  --border: #3a342d;
  --ctl-border: #8c8277;
  --focus: #f7f2eb;
  --brand: #f68712;
  --on-brand: #1a1617;
  --nav-actief-bg: #f7f2eb;
  --nav-actief-tekst: #1a1714;
  --keuze-bg: #f7f2eb;
  --keuze-tekst: #1a1714;
  --tegel-bg: #2c2822;
  --tegel-tekst: #e6dfd6;
  --bord-bg: #232019;
  --bord-rand: #f7f2eb;
  --prio-hoog: #e39a78;
  --on-prio-hoog: #1a1617;
  --prio-midden: #c97b52;
  --prio-midden-wash: #3a2a20;
  --prio-midden-tekst: #f2c9b0;
  --prio-laag: #8c8277;
  --norm-binnen: #5cb27a;
  --norm-binnen-wash: #1e3426;
  --norm-binnen-tekst: #9ed8b2;
  --on-norm-binnen: #1a1617;
  --norm-boven: #d9a23a;
  --norm-boven-wash: #3a2e14;
  --norm-boven-tekst: #f0cf84;
  --on-norm-boven: #1a1617;
  --norm-ver: #e07a66;
  --norm-ver-wash: #3f2320;
  --norm-ver-tekst: #f5b3a7;
  --on-norm-ver: #1a1617;
  --spark-vlak: #2c2822;
  --spark-lijn: #f7f2eb;
  color-scheme: dark;
}

html[data-theme="light"] {
  --page-bg: #f6f1ea;
  --surface: #fffcf8;
  --surface-alt: #efe8df;
  --text: #38322d;
  --text-strong: #1f1a16;
  --text-muted: #46403a;
  --border: #e3dacf;
  --ctl-border: #7b7168;
  --focus: #1f1a16;
  --brand: #f68712;
  --on-brand: #1a1617;
  --nav-actief-bg: #1f1a16;
  --nav-actief-tekst: #fffcf8;
  --keuze-bg: #1f1a16;
  --keuze-tekst: #fffcf8;
  --tegel-bg: #efe8df;
  --tegel-tekst: #38322d;
  --bord-bg: #fffcf8;
  --bord-rand: #1f1a16;
  --prio-hoog: #7c3a1e;
  --on-prio-hoog: #ffffff;
  --prio-midden: #b4613a;
  --prio-midden-wash: #f5e3d8;
  --prio-midden-tekst: #6b2f14;
  --prio-laag: #857a70;
  --norm-binnen: #2f7d4f;
  --norm-binnen-wash: #e2f0e6;
  --norm-binnen-tekst: #1a5230;
  --on-norm-binnen: #ffffff;
  --norm-boven: #b07a14;
  --norm-boven-wash: #f8eccf;
  --norm-boven-tekst: #634204;
  --on-norm-boven: #1a1617;
  --norm-ver: #a83c2c;
  --norm-ver-wash: #f6deda;
  --norm-ver-tekst: #7a2416;
  --on-norm-ver: #ffffff;
  --spark-vlak: #efe8df;
  --spark-lijn: #38322d;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

/* Lettergrootte A−/A/A+ (app.js: setTekstgrootte). Alle maten staan in rem,
   dus alles schaalt mee met deze basis -- tekst, kaarten, balken, het
   kamerbordje. Standaard ("normaal") = 16px, de browser-standaard. */
html[data-tekst="klein"] {
  font-size: 87.5%;
}

html[data-tekst="groot"] {
  font-size: 125%;
}

#tekst-select button:nth-child(1) {
  font-size: 0.8125rem;
}

#tekst-select button:nth-child(3) {
  font-size: 1.125rem;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.7;
}

h1,
h2,
h3 {
  font-family: var(--font-koppen);
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 0.75rem;
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.0625rem;
}

#app {
  max-width: 47.5rem;
  margin: 0 auto;
  padding: 0.5rem 1rem 6rem;
}

.laden {
  padding: 3rem 0;
  text-align: center;
  color: var(--text-muted);
}

/* ── Login / foutmelding -- rustige, gecentreerde kaart ───────────────── */

.login-scherm,
.foutmelding {
  max-width: 26.25rem;
  margin: 15vh auto 0;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.login-scherm p,
.foutmelding p {
  color: var(--text);
}

/* ── Tenant-kiezer -- kaarten + Bevestigen i.p.v. een kale <select onchange>
   (design-concepts/concept-b.html "Tenant-kiezer"/"Klant wisselen", feedback
   Rob 2026-09-01). Zelfde .grid-header/.wordmerk-opmaak als boven de
   werkvoorraad, zowel voor de allereerste keuze na inloggen als voor het
   "Andere klant"-scherm vanuit het side-menu -- zie renderTenantKiezer() in
   app.js. De klant-kaart/-radio-klassen hieronder worden ook gebruikt door
   het "Andere klant"-pad, niet alleen door de allereerste keuze. ──────── */

.tenant-kiezer {
  max-width: 30rem;
  margin: 8vh auto 0;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2.5rem 1.5rem;
}

/* Compound selector (i.p.v. losse .tenant-kiezer-header) zodat dit wint van
   .grid-header's eigen padding, ongeacht broncode-volgorde tussen de twee
   secties in dit bestand -- zelfde specificiteit zou anders afhangen van
   welke regel toevallig later staat. */
.grid-header.tenant-kiezer-header {
  justify-content: center;
  padding: 0 0 1.75rem;
}

.tenant-kiezer-kaart {
  max-width: 26.25rem;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
}

.tenant-kiezer-kaart h2 {
  font-size: 1.0625rem;
  margin-bottom: 0.375rem;
}

.tenant-kiezer-kaart p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
}

.tenant-kiezer-kaart .klant-lijst {
  text-align: left;
  max-width: none;
}

.tenant-kiezer-kaart .btn-primary {
  width: 100%;
}

.klant-lijst {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 1.25rem 0 1.5rem;
  max-width: 26.25rem;
}

.klant-kaart {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--surface);
}

.klant-kaart:hover {
  background: var(--surface-alt);
}

.klant-kaart.geselecteerd {
  background: var(--surface-alt);
  border-color: var(--text-strong);
}

.klant-radio {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 1.5px solid var(--ctl-border);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.klant-radio.aangevinkt {
  border-color: var(--text-strong);
}

/* Demo-kaart + inklapbare "overige klanten" (feedback Rob, werkitem #114):
   driehoekje bij de demo-kaart, zelfde aria-expanded/hidden/chevron-patroon
   als .mk-signalen-toggle in mockup.css. Badge + toggle delen één rechts-
   uitgelijnde wrapper (i.p.v. losse absolute positionering) zodat de
   demo-kaart precies even hoog blijft als de overige kaarten. */
.klant-kaart-rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.overige-klanten-toggle {
  background: none;
  border: none;
  padding: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  cursor: pointer;
}

.overige-klanten-toggle:hover {
  color: var(--text-strong);
}

.overige-klanten-lijst {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 0.625rem;
}

/* Zonder deze regel wint deze class (auteur-stylesheet, "display: flex")
   van de browser-default voor [hidden] (user-agent-stylesheet, "display:
   none") ondanks gelijke specificiteit -- auteur-normaal verslaat UA-
   normaal altijd. [hidden] heeft door het attribuutselector wél hogere
   specificiteit dan de kale class hierboven, dus deze regel wint alsnog
   (bevestigd: Rob zag de overige klanten altijd open ondanks een dicht
   driehoekje, computed display was "flex" i.p.v. "none"). */
.overige-klanten-lijst[hidden] {
  display: none;
}

.klant-radio.aangevinkt::after {
  content: "";
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: var(--text-strong);
}

.klant-naam {
  font-weight: 600;
  color: var(--text-strong);
  font-size: 0.9375rem;
}

.klant-huidig-badge {
  font-size: 0.8125rem;
  color: var(--text-muted);
  background: var(--surface-alt);
  padding: 0.1875rem 0.625rem;
  border-radius: 62.4375rem;
}

.btn-primary:disabled,
.btn-primary[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary:disabled:hover,
.btn-primary[disabled]:hover {
  background: var(--brand);
  filter: none;
}

/* ── Header (dunne topnav i.p.v. sidebar) ─────────────────────────────── */

.grid-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--header-h);
  padding: 0.5rem 0;
  /* Sticky header + menuknop bij scrollen (Robs mockup-review 2026-09-17,
     scope WP-API-5): voorheen scrolde de header gewoon met de pagina mee en
     verdween 'm uit beeld -- de menuknop (hamburger) moet altijd bereikbaar
     blijven. `background` nodig omdat de inhoud eronder anders doorscrolt in
     dezelfde kleur als --page-bg (dus geen zichtbaar verschil, maar wel
     nodig zodra de achtergrond ooit een patroon/afbeelding krijgt). Geldt
     voor elke `.grid-header` (werkvoorraad, detail, mockup, v2, ...) --
     Rob's feedback was algemeen, niet views-specifiek. */
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--page-bg);
}

.wordmerk {
  font-family: var(--font-branding);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-strong);
  font-size: 1.0625rem;
}

.wordmerk-accent {
  color: var(--brand);
}

.header-schema {
  background: var(--surface-alt);
  border-radius: 62.4375rem;
  padding: 0.3125rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.grid-header .btn-link:last-child {
  margin-left: auto;
}

/* Tag naast de schema-badge voor BLENDR-interne routes (renderHeader's
   `tag`-parameter) en de bijbehorende banner (bouwInternBanner). */
.header-tag {
  color: var(--text-strong);
  background: var(--surface-alt);
}

.intern-banner {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 0.875rem 1.125rem;
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.intern-banner a {
  color: var(--text-strong);
}

.intern-banner-kop {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.intern-banner-label {
  font-family: var(--font-koppen);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8125rem;
  color: var(--text-strong);
  background: var(--surface-alt);
  padding: 0.1875rem 0.625rem;
  border-radius: 62.4375rem;
}

.intern-banner-terug {
  margin-left: auto;
}

.intern-banner-extra {
  margin-top: 0.5rem;
}

/* Microfoonknop bij een notitieveld (spraaktest; de mockup toont 'm
   decoratief). `.luistert` is de actieve opnamestand. */
.mic-knop {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--ctl-border);
  background: var(--surface);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mic-knop:hover {
  color: var(--text-strong);
  border-color: var(--text-strong);
  background: var(--surface-alt);
}

.mic-knop.luistert {
  background: var(--keuze-bg);
  border-color: var(--keuze-bg);
  color: var(--keuze-tekst);
  animation: mic-puls 1.4s ease-in-out infinite;
}

@keyframes mic-puls {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--text-strong) 40%, transparent);
  }
  50% {
    box-shadow: 0 0 0 0.625rem rgba(246, 135, 18, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mic-knop.luistert {
    animation: none;
  }
}

.menu-trigger {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.5rem;
}

.menu-trigger:hover {
  background: var(--surface-alt);
  color: var(--text-strong);
}

/* ── Side-menu (hamburger-paneel: account + thema) ────────────────────────
   Bevat vooralsnog alleen de "Account"-sectie (Andere klant/Team/Thema/
   Uitloggen) uit design-concepts/concept-b.html (PR #392). De "Filteren op
   locatie"-boomsectie uit diezelfde mockup (PR #391) is NOOIT in de echte
   app geproduceerd -- er is geen locatie-boomdata-endpoint in de API (zie
   js/api.js) -- dus die sectie ontbreekt hier bewust. Wanneer die alsnog
   wordt gebouwd, is dit paneel de plek om 'm onder een <hr class="menu-
   divider"> toe te voegen (zie mockup voor de opzet). ── */

.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(35, 31, 32, 0.35);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.menu-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.menu-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 21.25rem;
  max-width: 88vw;
  background: var(--surface);
  z-index: 61;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  /* Geen schaduw in de dichte stand: het paneel staat buiten beeld, maar een
     schaduw zou als grijze rand aan de schermrand blijven staan. */
  box-shadow: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, visibility 0s linear 0.25s;
}

.menu-drawer.open {
  transform: translateX(0);
  visibility: visible;
  box-shadow: -1rem 0 2.5rem rgba(35, 31, 32, 0.12);
  transition-delay: 0s;
}

.menu-drawer-head {
  display: flex;
  align-items: center;
  padding: 1.375rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.menu-drawer-head h2 {
  font-size: 1.0625rem;
  margin: 0;
}

.menu-sluit {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 1.0625rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  width: 2.75rem;
  height: 2.75rem;
}

.menu-sluit:hover {
  color: var(--text-strong);
}

.menu-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.375rem 1.5rem;
}

.menu-drawer-body h3 {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.account-lijst {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.375rem 0;
}

.account-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.625rem 0.5rem;
  min-height: 2.75rem;
  border-radius: 0.5rem;
  border: none;
  background: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  cursor: pointer;
}

.account-item:hover {
  background: var(--surface-alt);
}

.account-item:disabled {
  color: var(--text-muted);
  cursor: default;
}

.account-item:disabled:hover {
  background: none;
}

.account-item.uitloggen {
  color: var(--text-strong);
  font-weight: 600;
}

.thema-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.5rem;
}

.thema-rij span {
  font-size: 0.9375rem;
  color: var(--text);
}

/* ── Keuzecomponenten (besluit Rob 2026-10-09, WP-FE-37) ────────────────
   Precies twee soorten, overal gelijk:
   1. .iv2-schakel  -- schakelbalk, PRECIES EEN keuze (role=radiogroup,
      knoppen role=radio + aria-checked, pijltjestoetsen). Eén buitenrand
      om de hele balk; het gekozen deel is oranje met donkere tekst, zonder
      eigen rand of tussenlijnen; de rest is transparant.
   2. .iv2-filter   -- filterknop, aan/uit, meerdere tegelijk (aria-pressed).
      Aan: oranje vulling + vinkje, GEEN rand. Uit: transparant + dunne
      neutrale rand.
   Beide: 44 px hoog, zelfde radius, letter en maat, licht en donker gelijk.
   Een actieve knop heeft nooit een zichtbare rand. De focusring staat los
   (outline met offset) en valt nooit over een rand. */

.iv2-schakel {
  display: inline-flex;
  align-items: stretch;
  height: 2.75rem;
  box-sizing: border-box;
  border: 1px solid var(--ctl-border);
  border-radius: 62.4375rem;
  background: transparent;
}

.iv2-schakel button,
.iv2-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: 62.4375rem;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.iv2-schakel button {
  min-height: 0;
  border: none;
  background: transparent;
}

.iv2-schakel button:hover {
  background: var(--surface-alt);
}

.iv2-schakel button[aria-checked="true"],
.iv2-schakel button[aria-checked="true"]:hover {
  background: var(--keuze-bg);
  /* De schaduw dekt de buitenrand van de balk af waar het gekozen deel
     eraan grenst: rond het gekozen vlak is nooit een grijs lijntje zichtbaar. */
  box-shadow: 0 0 0 1px var(--keuze-bg);
  color: var(--keuze-tekst);
  font-weight: 700;
}

.iv2-filter {
  box-sizing: border-box;
  border: 1px solid var(--ctl-border);
  background: transparent;
}

.iv2-filter:hover {
  background: var(--surface-alt);
}

.iv2-filter[aria-pressed="true"],
.iv2-filter[aria-pressed="true"]:hover {
  border-color: transparent; /* geen zichtbare rand; houdt de maat gelijk */
  background: var(--keuze-bg);
  color: var(--keuze-tekst);
  font-weight: 700;
}

/* Vinkje (alleen als aan). Masker, zodat het de tekstkleur (--keuze-tekst) volgt. */
.iv2-filter[aria-pressed="true"]::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Focusring los van de rand: bij de schakelbalk om de hele balk (nooit over
   de buitenrand), bij de filterknop met offset buiten de knop. */
.iv2-schakel button:focus-visible {
  outline: none;
}

.iv2-schakel:has(button:focus-visible) {
  outline: 2px solid var(--text-strong);
  outline-offset: 0.1875rem;
}

.iv2-filter:focus-visible {
  outline: 2px solid var(--text-strong);
  outline-offset: 0.1875rem;
}

/* ── Knoppen ────────────────────────────────────────────────────────── */

.btn,
.btn-link {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--ctl-border);
  border-radius: 62.4375rem;
  padding: 0.625rem 1.25rem;
  min-height: 2.75rem;
  cursor: pointer;
}

.btn:hover {
  background: var(--surface-alt);
}

.btn:active {
  background: var(--surface-alt);
}

.btn-link {
  border: none;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
}

.btn-link:hover {
  color: var(--text-strong);
  background: transparent;
}

.btn-primary {
  background: var(--brand);
  border: none;
  color: var(--on-brand);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.8125rem 1.75rem;
}

.btn-primary:hover {
  filter: brightness(0.92);
}

/* ── Hero-titel ────────────────────────────────────────────────────────── */

.hero-title {
  font-family: var(--font-branding);
  font-weight: 800;
  font-size: 1.875rem;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin: 0.5rem 0 1.75rem;
}

/* ── Teltegels (KPI-tiles) ─────────────────────────────────────────────── */

.teltegels {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 2.25rem;
}

.tegel {
  flex: 1;
  background: var(--surface-alt);
  border-radius: var(--radius);
  padding: 1.375rem 1.25rem;
  text-align: center;
}

.tegel-getal {
  display: block;
  font-family: var(--font-koppen);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--text-strong);
}

.tegel-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.375rem;
}

/* ── Zoeken / filteren ─────────────────────────────────────────────────── */

.filterbar {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 1.75rem;
}

.filterbar input[type="search"] {
  width: 100%;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--ctl-border);
  border-radius: 62.4375rem;
  font: 0.9375rem var(--font-body);
  background: var(--surface);
  color: var(--text);
}

.filterbar input[type="search"]:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 0.1875rem var(--surface-alt);
}

.filterbar select {
  align-self: flex-start;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: 0.8125rem var(--font-body);
  padding: 0.25rem 0.25rem 0.25rem 0;
  cursor: pointer;
}

.filterbar select:focus {
  outline: none;
  color: var(--text-strong);
}

/* ── Bundels / inzicht-kaarten ("kaart-per-positie") ──────────────────── */

.bundel-kaart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.bundel-kaart summary {
  padding: 1.125rem 1.5rem 0.375rem;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-strong);
  list-style: none;
}

.bundel-kaart summary::-webkit-details-marker {
  display: none;
}

.bundel-inhoud {
  padding-bottom: 0.25rem;
}

.inzicht-kaart {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.5rem;
  text-decoration: none;
  color: inherit;
}

.inzicht-kaart + .inzicht-kaart {
  border-top: 1px solid var(--border);
}

.inzicht-kaart:hover {
  background: var(--surface-alt);
}

.inzicht-tekst {
  flex: 1;
  font-size: 0.9375rem;
}

.impact-band {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  font-weight: 700;
  font-family: var(--font-koppen);
  font-size: 0.8125rem;
  border: 2px solid transparent;
  flex-shrink: 0;
}

/* Prioriteit in klei, drie dichtheden (kleur is nooit de enige drager: getal
   en woord staan er altijd bij): hoog gevuld, midden wasje met ring, laag
   alleen een dunne ring. */
.impact-band.impact-hoog {
  background: var(--prio-hoog);
  border-color: var(--prio-hoog);
  color: var(--on-prio-hoog);
}

.impact-band.impact-midden {
  background: var(--prio-midden-wash);
  border-color: var(--prio-midden);
  color: var(--prio-midden-tekst);
}

.impact-band.impact-laag {
  background: transparent;
  border: 1px solid var(--prio-laag);
  color: var(--text);
}

.status-badge {
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
  margin-top: 0.25rem;
}

.leeg-bericht {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem 0;
}

/* ── Detailscherm -- brede kolom, secties gescheiden door witruimte ────── */

#terug-inbox {
  display: inline-block;
  margin-bottom: 1.25rem;
}

.detailkaart {
  background: transparent;
  padding: 0;
}

.detailkaart .impact-band {
  margin-bottom: 1.125rem;
}

.detailkaart h1 {
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 600;
  margin-bottom: 0.625rem;
}

.detail-meta {
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin-bottom: 2.25rem;
}

.praktijkcheck,
.actie-formulier {
  margin-bottom: 2.25rem;
}

.actie-verwoording {
  background: var(--surface-alt);
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
}

.actie-formulier form {
  display: grid;
  gap: 0.875rem;
  max-width: 30rem;
  margin-top: 0.5rem;
}

.actie-formulier label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-strong);
  margin-top: 0.5rem;
}

.actie-formulier select,
.actie-formulier textarea,
.actie-formulier input,
.veld {
  padding: 0.75rem 0.875rem;
  min-height: 2.75rem;
  border: 1px solid var(--ctl-border);
  border-radius: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  background: var(--surface);
  color: var(--text);
}

.actie-formulier select:focus,
.actie-formulier textarea:focus,
.actie-formulier input:focus,
.veld:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 0.1875rem var(--surface-alt);
}

.actie-formulier textarea {
  min-height: 5.625rem;
  resize: vertical;
}

.actie-status {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.laatst-bijgewerkt {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
}

.historie,
.eerdere-afhandeling {
  background: transparent;
  padding: 0;
  margin-top: 2.25rem;
}

.historie ul,
.eerdere-afhandeling ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--text);
}

/* Zichtbare toetsenbordfocus voor alle bedienbare onderdelen. */
:focus-visible {
  outline: 2px solid var(--text-strong);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.header-schema {
  white-space: nowrap;
}

/* Smal scherm: de BLENDR-intern-tag past niet naast schema en menuknop. */
@media (max-width: 480px) {
  .grid-header .header-tag {
    display: none;
  }
}