/* Mimmir Data Portal — zelfde ontwerptaal als de CRM (Saga): paarse merkkleur,
   vaste statuskleuren (blauw/amber/groen/rood), mono voor cijfers, licht+donker. */
:root {
  --brand: #5b2d90;
  --brand-bright: #7b45c0;
  --brand-deep: #17102b;
  --brand-soft: #f1ebfa;
  --ink: #1c1830;
  --ink-soft: #6b6580;
  --surface: #ffffff;
  --bg: #f7f5fb;
  --line: #e8e4f0;
  --green: #1e7a5a;
  --green-soft: #e6f4ee;
  --amber: #b06a00;
  --amber-soft: #fdf1de;
  --red: #b3261e;
  --red-soft: #fdeceb;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Categorisch dataviz-palet — overgenomen uit de Saga-CRM, daar met de
     dataviz-skill-validator gecontroleerd voor licht én donker (CVD/contrast). */
  --viz-cat-1: #7C4DBE; --viz-cat-2: #eda100; --viz-cat-3: #2a78d6;
  --viz-cat-4: #eb6834; --viz-cat-5: #1baf7a; --viz-cat-rest: #857D99;
}
/* Donker thema via de expliciete toggle (js/theme.js zet data-theme op <html>).
   Bewust GEEN prefers-color-scheme meer: standaard licht, gebruiker kiest zelf. */
:root[data-theme="dark"] {
  --brand-soft: #2a2140;
  --ink: #eee9f7;
  --ink-soft: #a49dbb;
  --surface: #1e1930;
  --bg: #141021;
  --line: #322a4a;
  --green-soft: #16301f;
  --amber-soft: #33260f;
  --red-soft: #3a1a1a;
  --viz-cat-1: #9085e9; --viz-cat-2: #c98500; --viz-cat-3: #3987e5;
  --viz-cat-4: #d95926; --viz-cat-5: #199e70; --viz-cat-rest: #7A7292;
}

/* Icoon-knop (thema-toggle in de topbar). */
.icon-btn {
  background: transparent; border: 1px solid var(--line); border-radius: 9px;
  padding: 5px 9px; font-size: 15px; line-height: 1; cursor: pointer; color: var(--ink);
}
.icon-btn:hover { border-color: var(--brand-bright); }

* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg);
  font-size: 15px; line-height: 1.5;
}
a { color: var(--brand-bright); }
h1 { font-size: 24px; margin: 0 0 6px; }
h2 { font-size: 16px; margin: 0 0 10px; }
.muted { color: var(--ink-soft); }
.num { font-family: var(--mono); }
td.num, th.num { text-align: right; }
.pagesub { margin: 0 0 10px; font-size: 13px; }
.field-hint { font-size: 12px; color: var(--ink-soft); }

/* ---- Topbar ---- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 0 22px; min-height: 58px;
  background: linear-gradient(120deg, var(--brand-deep), #2a1a4d);
  color: #fff;
}
/* Meertalig: Poolse en Engelse labels zijn langer dan de Nederlandse. De balk
   mag daar niet van omvallen, dus de merknaam en de menu-items breken niet af en
   de menubalk schuift horizontaal als het krap wordt. */
.topbar .brand-name, .topbar .nav a, .topbar .client-name { white-space: nowrap; }
.topbar .nav { overflow-x: auto; scrollbar-width: none; }
.topbar .nav::-webkit-scrollbar { display: none; }
.topbar-right { flex: none; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: #fff; }
.brand-mark {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff7a59, #c8443a);
  box-shadow: 0 0 0 4px rgba(255,255,255,.10);
}
.brand-name { font-weight: 700; letter-spacing: .01em; }
.brand-sub { font-weight: 400; opacity: .72; }
.topbar .nav { display: flex; gap: 4px; margin-left: 10px; flex: 1; }
.topbar .nav a {
  color: rgba(255,255,255,.78); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 7px 12px; border-radius: 8px;
}
.topbar .nav a:hover { background: rgba(255,255,255,.10); color: #fff; }
.topbar .nav a.active { background: rgba(255,255,255,.16); color: #fff; }
.topbar-right { display: flex; align-items: center; gap: 12px; }

/* Beheer-uitklapmenu. Zonder JavaScript: :hover voor de muis, :focus-within
   voor het toetsenbord. Geen margin tussen knop en menu, anders valt de hover
   weg in het gat ertussen. Op mobiel weg — daar zit navigatie in de tabbalk
   onderin en staan de drie schermen los in de Meer-sheet. */
.nav-groep { position: relative; flex: none; }
.nav-groep > a {
  display: flex; align-items: center; gap: 5px;
  color: rgba(255,255,255,.78); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 7px 12px; border-radius: 8px; white-space: nowrap;
}
.nav-groep > a:hover, .nav-groep:focus-within > a { background: rgba(255,255,255,.10); color: #fff; }
.nav-groep.actief > a { background: rgba(255,255,255,.16); color: #fff; }
.nav-pijl { font-size: 10px; opacity: .7; }
.nav-submenu {
  position: absolute; top: 100%; right: 0; z-index: 60; min-width: 215px;
  display: none; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.nav-groep:hover .nav-submenu, .nav-groep:focus-within .nav-submenu { display: block; }
.nav-submenu a {
  display: block; padding: 8px 10px; border-radius: 7px;
  color: var(--ink); text-decoration: none; font-size: 14px; white-space: nowrap;
}
.nav-submenu a:hover { background: var(--brand-soft); }
.nav-submenu a.active { font-weight: 600; color: var(--brand); }
.client-name { font-size: 13px; opacity: .8; }

.page { max-width: 1040px; margin: 0 auto; padding: 26px 22px 60px; }
/* Op een groot scherm/beamer oogt 1040px als een smalle kolom met brede lege
   marges. Vanaf een ruime breedte de inhoud wat verbreden (grafieken/tabellen
   krijgen zo meer lucht); de normale desktop-layout (<1500px) blijft ongemoeid. */
@media (min-width: 1500px) { .page { max-width: 1280px; } }
@media (min-width: 1800px) { .page { max-width: 1440px; } }
.foot { text-align: center; color: var(--ink-soft); font-size: 12px; padding: 18px; }

/* ---- Kaarten ---- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px; margin-bottom: 18px;
}
.section-title { margin: 26px 0 12px; }

/* ---- Statusstrip ---- */
.status-strip {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: 10px; margin-bottom: 20px;
  border: 1px solid transparent; font-size: 14px;
}
.status-strip .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.status-dq-badge { margin-left: auto; text-decoration: none; }
.status-strip.ok { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 25%, transparent); }
.status-strip.ok .dot { background: var(--green); }
.status-strip.warn { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 25%, transparent); }
.status-strip.warn .dot { background: var(--amber); }
.status-strip.danger { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 25%, transparent); }
.status-strip.danger .dot { background: var(--red); }
.status-link { margin-left: auto; font-size: 13px; white-space: nowrap; }

/* ---- AI-transparantiemelding (artikel 50 AI-verordening) ---- */
/* Bewust rustig maar niet weg te kijken: de melding moet duidelijk en
   onderscheidbaar zijn, niet als kleine lettertjes. Zie
   docs/juridisch/ai-act-dossier.md in mimmir-datamanagement. */
.ai-disclosure {
  margin: 14px 0 0; padding: 11px 13px; font-size: 13px; line-height: 1.5;
  color: var(--ink); background: color-mix(in srgb, var(--brand-bright) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-bright) 28%, transparent);
  border-radius: 10px;
}
.ai-disclosure strong { color: var(--ink); }

/* ---- Vraagbalk ---- */
.ask-bar { display: flex; gap: 10px; margin: 14px 0 4px; }
.ask-bar input {
  flex: 1; padding: 12px 14px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
}
.ask-bar input:focus {
  outline: none; border-color: var(--brand-bright);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-bright) 18%, transparent);
}

/* ---- Voorbeeldprompts (Vraag je data) ---- */
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 18px; }
.chat-suggestions-label { font-size: 13px; color: var(--ink-soft); margin-right: 2px; }
.chat-suggestion {
  background: var(--surface); border: 1px solid var(--line); color: var(--brand-bright);
  border-radius: 999px; padding: 6px 13px; font-size: 13px; font-family: inherit; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.chat-suggestion:hover { border-color: var(--brand-bright); background: var(--brand-soft); }

/* ---- Tegels ---- */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tile {
  display: flex; flex-direction: column; gap: 5px; position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; text-decoration: none; color: var(--ink);
  transition: transform .12s ease, border-color .12s ease;
}
a.tile:hover { transform: translateY(-2px); border-color: var(--brand-bright); }
.tile-title { font-weight: 600; }
.tile-sub { font-size: 13px; color: var(--ink-soft); }
.tile-remove { margin-top: 8px; }

/* ---- Staafgrafiek (server-side, geen library) ---- */
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 110px; align-items: center; gap: 12px; }
.bar-label { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: var(--brand-soft); border-radius: 6px; height: 20px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--brand-bright), var(--brand)); }
.bar-value { font-size: 13px; text-align: right; }

/* ---- Tabellen ---- */
table { width: 100%; border-collapse: collapse; }

/* Gebruikersrechten ------------------------------------------------------- */
.access-explainer p { margin-bottom: 0; }
.access-users { display: grid; gap: 14px; }
.access-user { padding: 0; overflow: hidden; }
.access-user > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; cursor: pointer; list-style-position: inside;
}
.access-user > summary:hover { background: color-mix(in srgb, var(--brand-bright) 5%, transparent); }
.access-user > summary .muted { margin-left: 8px; font-weight: 400; }
.access-form { padding: 0 20px 20px; display: grid; gap: 18px; }
.access-form fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 0; }
.access-form legend { padding: 0 7px; font-weight: 700; }
.access-role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.access-choice { display: flex; gap: 9px; align-items: flex-start; border: 1px solid var(--line); border-radius: 9px; padding: 11px; cursor: pointer; }
.access-choice:has(input:checked) { border-color: var(--brand-bright); background: var(--brand-soft); }
.access-choice input { margin-top: 3px; }
.access-choice small { display: block; color: var(--ink-soft); margin-top: 3px; line-height: 1.35; }
.access-permission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.access-permission-grid > div { display: grid; align-content: start; gap: 7px; }
.access-permission-grid > div > strong { margin-bottom: 3px; }
.access-permission-grid label, .access-all-projects, .access-projects label { cursor: pointer; }
.access-all-projects { font-weight: 650; }
.access-projects { max-height: 270px; overflow: auto; display: grid; gap: 5px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.access-projects label { padding: 4px 3px; }
.access-projects label span { display: inline-block; min-width: 74px; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }

@media (max-width: 700px) {
  .access-user > summary { align-items: flex-start; }
  .access-user > summary .muted { display: block; margin: 3px 0 0; }
}
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
th { color: var(--ink-soft); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }

/* ---- Badges ---- */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; background: var(--brand-soft); color: var(--brand-bright);
}
.badge.ok { background: var(--green-soft); color: var(--green); }
.badge.danger { background: var(--red-soft); color: var(--red); }
.badge.warn { background: var(--amber-soft); color: var(--amber); }
.badge.muted { background: color-mix(in srgb, var(--ink-soft) 15%, transparent); color: var(--ink-soft); }

/* ---- Stappenlijst ---- */
.steps { list-style: none; padding: 0; margin: 0; }
.steps li { padding: 7px 0 7px 24px; position: relative; font-size: 14px; border-bottom: 1px solid var(--line); }
.steps li:last-child { border-bottom: none; }
.steps li::before { position: absolute; left: 0; top: 7px; font-weight: 700; }
.steps li.ok::before { content: "✓"; color: var(--green); }
.steps li.danger::before { content: "✕"; color: var(--red); }

/* ---- Knoppen ---- */
.btn {
  display: inline-block; background: linear-gradient(140deg, var(--brand-bright), var(--brand) 60%);
  color: #fff; padding: 10px 18px; border-radius: 9px; border: none; text-decoration: none;
  cursor: pointer; font-size: 14px; font-weight: 600; font-family: var(--sans);
}
.btn:hover { filter: brightness(1.06); }
.btn:disabled { opacity: .6; cursor: default; filter: none; }
.btn.small { padding: 5px 11px; font-size: 12px; border-radius: 7px; }
.btn.secondary { background: transparent; color: var(--brand-bright); border: 1px solid var(--line); }
/* Twee knoppen naast elkaar in een kaart (Status > Snelheid). */
.knoppenrij { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.btn.ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); }
.btn.btn-block { display: block; width: 100%; margin-top: 8px; text-align: center; }
.topbar .btn.secondary { color: #fff; border-color: rgba(255,255,255,.35); }
.form-actions { margin-top: 14px; }

/* ---- Formulier ---- */
label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
input[type="text"], input[type="email"], input[type="password"] {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 14px; font-family: inherit; background: var(--surface); color: var(--ink);
}
input:focus { outline: none; border-color: var(--brand-bright); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-bright) 18%, transparent); }

/* ---- Flash ---- */
.flash { padding: 11px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; border: 1px solid transparent; }
.flash.error { background: var(--red-soft); color: var(--red); border-color: color-mix(in srgb, var(--red) 25%, transparent); }
.flash.success { background: var(--green-soft); color: var(--green); border-color: color-mix(in srgb, var(--green) 25%, transparent); }
/* Openbare demo (demo.data.mimmir.nl): smalle balk onder de topbar. */
.demo-balk { padding: 7px 16px; text-align: center; font-size: 13px; background: var(--brand-soft); color: var(--ink); border-bottom: 1px solid var(--line); }

/* ---- Ingesloten kwaliteitsrapport ---- */
/* ---- Datakwaliteit: directeur-leesbare scorecard ---- */
.dq-scorekop { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.dq-score { display: flex; align-items: baseline; gap: 4px; padding: 14px 20px; border-radius: 12px; }
.dq-score-cijfer { font-size: 46px; font-weight: 800; line-height: 1; }
.dq-score-van { color: var(--ink-soft); font-size: 15px; }
.dq-ok { background: var(--green-soft); color: var(--green); }
.dq-warn { background: var(--amber-soft); color: var(--amber); }
.dq-danger { background: var(--red-soft); color: var(--red); }
.dq-score-uitleg { flex: 1 1 260px; min-width: 220px; }
.dq-score-zin { margin: 0 0 4px; font-size: 15px; }
.dq-score-zin .badge { margin-left: 6px; }
.dq-trend { flex: 1 1 300px; min-width: 260px; height: 110px; }
.dq-kpi-van { font-size: 12px; color: var(--ink-soft); font-weight: 400; margin-left: 2px; }
.dq-bevinding-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dq-bevinding-kop h2 { margin: 0; font-size: 17px; flex: 1; }
.dq-aantal { color: var(--ink-soft); font-size: 13px; white-space: nowrap; }
.dq-actie { background: color-mix(in srgb, var(--brand) 7%, transparent); border-left: 3px solid var(--brand); padding: 8px 12px; border-radius: 6px; font-size: 13.5px; }
.dq-samples summary { cursor: pointer; color: var(--brand-bright, var(--brand)); font-size: 13.5px; padding: 4px 0; }
.dq-samples table td, .dq-samples table th { font-size: 13px; }
.dq-ok-kop { font-size: 15px; margin: 0 0 8px; }
.dq-ok-lijst { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 13.5px; columns: 2; column-gap: 32px; }
@media (max-width: 700px) { .dq-ok-lijst { columns: 1; } }

/* Kwaliteitsrapport-iframe. Het rapport is een zelfstandig, licht HTML-document
   (uit de pipeline) en draait in een sandbox ZONDER allow-same-origin — we
   kunnen de inhoud dus niet cross-origin herthema-en of auto-fitten. Daarom
   presenteren we het bewust als een "document-sheet" (wit papier met schaduw op
   een neutrale mat), zodat het ook in dark mode als een ingesloten rapport oogt
   i.p.v. een felle witte doos. Hoogte schaalt met het scherm (min/max), scrollt
   intern bij een langer rapport. */
.report-sheet-mat { padding: 16px; border-radius: 10px; background: var(--surface-alt, #f3f1f8); }
.report-frame { display: block; width: 100%; max-width: 900px; margin: 0 auto; height: min(620px, 78vh);
  border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.14); }
@media (prefers-color-scheme: dark) { .report-sheet-mat { background: rgba(255,255,255,.04); } }
:root[data-theme="dark"] .report-sheet-mat { background: rgba(255,255,255,.04); }

/* ---- Login ---- */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1000px 600px at 20% 10%, #3b2566, transparent),
              radial-gradient(800px 500px at 85% 80%, #6d3ba6, transparent), var(--brand-deep);
  color: #fff;
}
.login-shell { width: 100%; max-width: 380px; padding: 20px; }
.login-brand { display: flex; align-items: center; gap: 9px; justify-content: center; margin-bottom: 18px; font-size: 18px; }
.login-card { background: var(--surface); color: var(--ink); border-radius: 14px; padding: 24px; }
.login-card h1 { font-size: 20px; }
/* Adresregel in stap 2 van het inloggen: het ingevulde adres links, de weg
   terug naar stap 1 rechts. Geen nieuw ontwerp, alleen deze ene regel. */
.login-adres { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.login-adres span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-adres a { font-size: 12px; }

/* "Wachtwoord vergeten?" onder het inlogformulier. Een <button> en geen <a>,
   want het adres uit stap 2 gaat als POST mee en hoort niet in de URL — maar
   het hóórt te lezen als een link, want het is een nevenactie naast de knop
   erboven. Vandaar deze ene regel die de knop van zijn knop-uiterlijk ontdoet. */
.login-nevenactie { margin-top: 12px; text-align: center; }
.linkknop {
  background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
  color: var(--brand-bright); cursor: pointer; text-decoration: underline;
}

/* ---- Klantkeuze ("Waar werk je vandaag?") ----
   Eén knop per omgeving; het formulier post de client_id van de knop waarop je
   klikt. Bewust geen select + submit: de keuze bepaalt met welke data je de dag
   ingaat, dus hij mag een scherm kosten en geen keuzelijstje zijn. */
.klantkeuze { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.klantkeuze-knop {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 11px; padding: 13px 16px;
  display: grid; gap: 2px;
}
.klantkeuze-knop:hover { border-color: var(--brand); }
.klantkeuze-knop.huidig { border-color: var(--brand); }
.klantkeuze-naam { font-weight: 600; font-size: 15px; }
.klantkeuze-sub { font-size: 12px; color: var(--ink-soft); }

/* ---- Mijn inzichten ---- */
.insight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.insight-card { display: flex; flex-direction: column; gap: 10px; margin-bottom: 0; }
.insight-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.insight-q { font-weight: 600; font-size: 15px; }
.insight-head form { margin: 0; }
.insight-a { font-size: 13.5px; color: var(--ink-soft); margin: 0; }
.insight-date { font-size: 12px; margin-top: auto; }

/* ---- Mijn dashboards (zelf samengestelde tegel-dashboards) ---- */
.dash-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.dash-list-item { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.dash-list-item:hover { border-color: var(--brand-bright); }
.dash-list-title { font-weight: 600; font-size: 15px; }
.dash-list-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-soft); }
.dash-list-date { font-size: 12px; margin-top: auto; }

.dash-title-input {
  font-size: 22px; font-weight: 700; font-family: inherit; color: var(--ink);
  background: var(--surface); border: 1px dashed var(--line); border-radius: 8px; padding: 4px 10px; min-width: 320px;
}
.inline-form { display: inline; }

.dash-canvas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.dash-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; min-width: 0;
}
.dash-tile.span-2 { grid-column: span 2; }
.dash-tile-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.dash-tile-title { font-size: 14.5px; font-weight: 600; margin: 0; }
.dash-tile-controls { display: flex; gap: 2px; }
.dash-ctl {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: 6px; font-size: 11px; padding: 2px 7px; cursor: pointer;
}
.dash-ctl:hover { border-color: var(--brand-bright); color: var(--ink); }
.dash-tile-body.is-loading { opacity: 0.5; }
.dash-tile-kpi .dash-tile-body { padding: 8px 0 4px; }
.dash-kpi-value { font-size: 30px; font-weight: 700; }
.dash-kpi-sub { margin-top: 6px; }
.dash-table-wrap { overflow-x: auto; }
.dash-table-row { cursor: pointer; }
.dash-table-row:hover td { background: color-mix(in srgb, var(--brand-bright) 8%, transparent); }
.dash-builder-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.brand-client-logo { height: 26px; max-width: 120px; object-fit: contain; border-radius: 4px; background: #fff; padding: 2px 4px; }
.insight-head-actions { display: flex; gap: 4px; align-items: center; }
.verkenner-dash-picker { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 0; }
.verkenner-dash-picker select, .verkenner-dash-picker input {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px;
  font-family: inherit; background: var(--surface); color: var(--ink);
}
.dash-builder-row input[type="text"] {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px;
  font-family: inherit; background: var(--surface); color: var(--ink);
}
@media (max-width: 860px) {
  .dash-canvas { grid-template-columns: 1fr; }
  .dash-tile.span-2 { grid-column: span 1; }
}

/* ---- Cross-filter (PowerBI-stijl klik-om-te-filteren) ---- */
.crossfilter-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between;
  background: color-mix(in srgb, var(--brand-bright) 12%, var(--surface)); border: 1px solid var(--brand-bright);
  border-radius: 12px; padding: 10px 16px; margin-bottom: 18px; font-size: 13.5px;
}
/* Totaal per grafiek: subtiele regel onder de sectietitel. */
.chart-total { margin: -4px 0 10px; font-size: 13px; font-weight: 600; }
/* P&L-drill-down per project (project -> post -> regel, calc vs. nacalc). */
.ppl-wrap { overflow-x: auto; }
table.project-pl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.project-pl thead th { text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
table.project-pl thead th:first-child { text-align: left; }
table.project-pl .ppl-subhead th { padding-top: 2px; font-weight: 600; }
table.project-pl .ppl-label { text-align: left; white-space: nowrap; }
table.project-pl td { padding: 5px 10px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
/* Getallen op één regel houden (geen € op een 2e rij); dashboard-crossfilter.js
   verkleint het font dynamisch als de tabel anders niet past. */
table.project-pl td.num, table.project-pl th.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.project-pl .ppl-l0 > td { font-weight: 700; }
table.project-pl .ppl-l0 { background: color-mix(in srgb, var(--brand-bright) 6%, var(--surface)); }
table.project-pl .ppl-l2 > td { color: var(--ink-soft); }
.ppl-toggle {
  border: none; background: none; cursor: pointer; color: var(--brand-bright);
  font-size: 11px; width: 16px; padding: 0; line-height: 1;
}
.ppl-bullet { display: inline-block; width: 16px; }
/* Maand-keuzelijst (makkelijker filteren dan op een balk klikken). */
/* Periode-kiezers (kwartaal + maand) naast elkaar; op een smal scherm onder
   elkaar met volle breedte, zoals de rest van de filtervelden. */
.report-monthpicker { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 14px; }
/* De uitsluitingsregel op een eigen regel onder de twee kiezers, niet ernaast:
   naast een select leest hij als een label bij die ene kiezer. */
.report-periode-hint { flex-basis: 100%; margin: -4px 0 0; }
@media (max-width: 720px) {
  .report-monthpicker { flex-direction: column; align-items: stretch; }
  .report-monthpicker .filter-field select { width: 100%; min-height: 44px; font-size: 15px; }
}
/* Filterpaneel met blokken (Projecten, Arbeid, Productiviteit — AJ/Elger
   2026-07-26: gedeeld, generiek patroon i.p.v. per-rapport ad-hoc structuur).
   Blokken heten naar hun INHOUDSTYPE (breed/checklist, bereik, compact), niet
   naar een specifiek rapport — zo blijft de naam kloppen ongeacht welk
   rapport 'm gebruikt (voorheen heette het brede blok "-projects" maar
   Productiviteit stopte er een medewerker-checklist in, wat de naam liet
   liegen). Elk blok een lichte kaart, zodat je meteen ziet welke velden bij
   elkaar horen zonder dat het geheel groot/hoog wordt. Deelt de `.filter-pane`
   buitenkant (kader/achtergrond/padding) met het vlakke Financieel-paneel
   hieronder — alleen de INHOUD van de vorm verschilt (blokken i.p.v. losse
   velden), vandaar `align-self` op de twee kind-divs i.p.v. een eigen
   buiten-klasse. */
.filter-pane > .filter-blocks,
.filter-pane > .filter-pane-actions { align-self: flex-start; }
.filter-blocks { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 auto; }
.filter-block {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px;
}
/* Breed: één of meer checklists (categorie+naam bij Projecten, medewerker bij
   Productiviteit) — groeit het hardst, meerdere checklists delen de ruimte. */
.filter-block--wide { flex: 3 1 380px; }
/* Compact: één enkele select (jaar). Grow:1 i.p.v. 0 — blijft ook als enige
   blok meegroeien i.p.v. hard op zijn minimum-breedte te blijven staan. */
.filter-block--compact { flex: 1 1 130px; }
.filter-pane-actions { display: flex; gap: 8px; align-items: flex-start; flex: none; padding-top: 2px; }
/* Doorzoekbare checklist (zoekveld + aanvinkbare, scrollbare lijst). Groeit
   mee met het blok i.p.v. op z'n minimum-breedte te blijven staan — anders
   blijft er (vooral met maar 1 checklist in een breed blok, zoals bij
   Productiviteit) een kale, lege strook over rechts van de lijst. */
.filter-block > .ms-filter,
.filter-block > .filter-field { flex: 1 1 190px; }
.ms-filter { min-width: 190px; }
.ms-filter .ms-count { font-weight: 500; }
.ms-search {
  width: 100%; padding: 7px 10px; margin-bottom: 4px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 8px; font-size: 13px;
  font-family: inherit; background: var(--surface); color: var(--ink);
}
.ms-search:focus { outline: none; border-color: var(--brand-bright); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-bright) 18%, transparent); }
.ms-list {
  max-height: 138px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); padding: 2px;
}
.ms-item {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px;
  font-size: 13px; font-weight: 400; color: var(--ink); cursor: pointer; border-radius: 6px;
  white-space: nowrap;
}
.ms-item:hover { background: color-mix(in srgb, var(--brand-bright) 10%, var(--surface)); }
/* Het zoekveld verbergt niet-treffers via het hidden-attribuut; onze eigen
   `.ms-item { display:flex }` zou dat overschrijven (auteur-regel wint van de
   browser-[hidden]-regel), dus hier expliciet verbergen (hogere specificiteit). */
.ms-item[hidden] { display: none; }
.ms-item input { accent-color: var(--brand-bright); flex: none; }
.ms-empty { padding: 6px 8px; font-size: 12px; }
.ms-filter[data-name="pnamen"] .ms-list { min-width: 260px; }
/* Even inzakken terwijl de live cross-filter #dashboard-body verVerst. */
#dashboard-body.is-loading { opacity: 0.55; transition: opacity 0.12s ease; }
/* Klikbare grafieken (cross-filter-bron) subtiel als aanwijzer markeren. */
.report-chart[data-crossfilter]:not([data-crossfilter=""]) .report-chart-canvas { cursor: pointer; }
/* Klikbare tabelrijen (cross-filter-bron, zoals de grafieken). */
table.clickable-table tr.clickable-row { cursor: pointer; }
table.clickable-table tr.clickable-row:hover,
table.clickable-table tr.clickable-row:focus-visible { background: color-mix(in srgb, var(--brand-bright) 8%, transparent); outline: none; }

/* ---- Filter-pane (dashboards) ---- */
.filter-pane {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 18px;
}
.filter-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.filter-field select {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px;
  font-family: inherit; background: var(--surface); color: var(--ink); min-width: 160px;
}
.filter-field select:focus { outline: none; border-color: var(--brand-bright); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-bright) 18%, transparent); }

/* ---- KPI-tegels ---- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
/* De streep bovenaan een kaart betekent IETS: groen goed, oranje let op, rood
   mis. Daarom is de neutrale kaart neutraal (Elger 2026-08-06: "wat is de logica
   achter de kleuren? Rood lijkt als iets negatiefs, maar hier is het gewoon ter
   info"). Stond op var(--brand) — de merkkleur op precies hetzelfde kanaal als de
   statuskleuren, dus "Medewerkers: 8" en "Omzet" kregen een gekleurde balk die
   naast een groene kaart als een oordeel leest. Eén kanaal, één betekenis: geen
   tone = geen kleur. */
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 3px;
  border-top: 3px solid var(--line);
  /* min-width:0 = de nowrap-waarde hieronder mag de grid-kolom niet oprekken;
     container-type = de waarde schaalt mee met de kaartbreedte. */
  min-width: 0; container-type: inline-size;
}
.kpi-ok { border-top-color: var(--green); }
.kpi-warn { border-top-color: var(--amber); }
.kpi-danger { border-top-color: var(--red); }
.kpi-muted { border-top-color: var(--line); }
/* Klikbare KPI-kaart (cross-filter-bron), zelfde aanwijzing als een klikbare
   tabelrij: aanwijzer + lichte hover, en een zichtbare focusring voor toetsenbord. */
.kpi-klikbaar { cursor: pointer; }
.kpi-klikbaar:hover { background: color-mix(in srgb, var(--brand-bright) 6%, var(--surface)); }
.kpi-klikbaar:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 2px; }
.kpi-label { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
/* Bedrag altijd op ÉÉN regel (AJ 2026-07-26: het euroteken belandde op een
   eigen regel zodra het bedrag te breed werd). nowrap voorkomt de afbreking,
   de container-query laat het lettertype meekrimpen met de kaart i.p.v. over
   de rand te lopen. Browsers zonder container queries houden gewoon 22px. */
.kpi-value { font-size: 22px; font-weight: 700; white-space: nowrap; }
@supports (container-type: inline-size) {
  .kpi-value { font-size: clamp(14px, 10cqi, 22px); }
}
.kpi-sub { font-size: 12px; color: var(--ink-soft); }

/* ---- Winst- en verliesrekening ---- */
.pl-table { width: 100%; border-collapse: collapse; }
.pl-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.pl-table td.num { text-align: right; font-family: var(--mono); }
.pl-table td.neg { color: var(--red); }
.pl-line td { color: var(--ink); }
.pl-subtotal td { font-weight: 600; background: color-mix(in srgb, var(--brand-soft) 40%, transparent); }
.pl-result td { font-weight: 700; border-top: 2px solid var(--brand); border-bottom: 2px solid var(--brand); }
.pl-result td.num:not(.neg) { color: var(--green); }
/* Dezelfde teken-kleuring en subtotaal-demping in een gewone secties-tabel,
   zodat de W&V-jaarvergelijking leest als de W&V zelf (AJ 2026-07-26). */
.dash-tabel-wrap td.neg { color: var(--red); }
/* Detailrij onder een tabelrij (Geschreven uren: de boekingen van een
   medewerker). Iets ingesprongen, gedempte achtergrond, eigen kleine tabel. */
.dash-tabel-wrap tr.rij-detail > td { padding: 4px 8px 10px 28px; background: color-mix(in srgb, var(--brand-soft) 25%, transparent); }
.dash-tabel-wrap .detail-tabel { width: 100%; font-size: 12.5px; }
.dash-tabel-wrap .detail-tabel th { font-weight: 600; color: var(--muted); }
.dash-tabel-wrap .detail-tabel td, .dash-tabel-wrap .detail-tabel th { padding: 3px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.dash-tabel-wrap tr.rij-met-details > td:first-child { white-space: nowrap; }
.dash-tabel-wrap tr.rij-subtotaal td { font-weight: 600; background: color-mix(in srgb, var(--brand-soft) 40%, transparent); }

/* ---- P&L drill-down (rekeninggroep -> rekening -> boeking), default
   ingeklapt via native <details> — geen JS nodig. ---- */
.pl-cell-full { padding: 0 !important; }
.pl-details { width: 100%; }
.pl-details > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: 14px; cursor: pointer;
}
.pl-details > summary::-webkit-details-marker { display: none; }
.pl-summary-label { display: flex; align-items: center; gap: 6px; }
.pl-summary-label::before {
  content: '▸'; display: inline-block; font-size: 10px; color: var(--ink-soft);
  transition: transform .12s ease;
}
.pl-details[open] > summary .pl-summary-label::before { transform: rotate(90deg); }
.pl-details-top > summary { font-weight: 600; }
.pl-children { padding: 2px 10px 6px 0; background: color-mix(in srgb, var(--bg) 55%, transparent); }
.pl-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 10px 5px 0; font-size: 13px; border-bottom: 1px dashed var(--line); }
.pl-row:last-child { border-bottom: none; }
.pl-row-label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--ink-soft); }
/* Boekingsdatum (journal_document_date) — vaste breedte zodat de kolom netjes
   uitlijnt over de chronologisch gesorteerde boekingen. */
.pl-row-date { font-family: var(--mono); font-size: 11.5px; min-width: 64px; flex: none; }
.pl-summary-value, .pl-row-value { font-family: var(--mono); }
.pl-summary-value.neg, .pl-row-value.neg { color: var(--red); }
.badge.pl-source { background: var(--brand-soft); color: var(--brand-bright); text-transform: uppercase; font-size: 10px; }

/* ---- Legenda (gedeeld) ---- */
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; font-size: 13px; color: var(--ink-soft); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* ---- Gegroepeerde kolomgrafiek ---- */
.grouped-chart { display: flex; gap: 14px; align-items: flex-end; height: 200px; padding-top: 6px; overflow-x: auto; }
.grouped-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 64px; height: 100%; }
.grouped-bars { display: flex; align-items: flex-end; gap: 4px; height: 100%; width: 100%; justify-content: center; }
.grouped-bar { width: 22px; border-radius: 4px 4px 0 0; min-height: 2px; align-self: flex-end; }
.grouped-label { font-size: 11px; color: var(--ink-soft); text-align: center; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Donut ---- */
.donut-wrap { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.donut { width: 150px; height: 150px; border-radius: 50%; flex: none; position: relative; }
.donut-hole {
  position: absolute; inset: 26px; background: var(--surface); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; text-align: center;
}
.donut-legend { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.donut-legend-row { display: grid; grid-template-columns: 16px 1fr auto auto; align-items: center; gap: 8px; font-size: 13px; }
.donut-legend-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend-row .num { font-size: 13px; }

/* ---- Badge-varianten voor tabellen ---- */
.badge.warn { background: var(--amber-soft); color: var(--amber); }

@media (max-width: 720px) {
  /* Mobiel: de topbar-nav verdwijnt — navigatie zit in de vaste tabbalk
     onderin (zie "Mobiele laag" onderaan dit bestand + partials/footer.ejs). */
  .topbar { height: 54px; padding: 0 14px; gap: 10px; }
  .topbar .nav { display: none; }
  .nav-groep { display: none; }   /* -> Meer-sheet */
  .topbar-right #theme-toggle { display: none; } /* -> Meer-sheet */
  .topbar-right .btn { display: none; }          /* Uitloggen -> Meer-sheet */
  .bar-row { grid-template-columns: 100px 1fr 90px; gap: 8px; }
  .donut-wrap { justify-content: center; }
}

/* ---- Interactieve rapport-grafieken (ECharts) ---- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { margin-bottom: 2px; }
.page-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.report-chart { position: relative; }
.report-chart-canvas { width: 100%; min-height: 300px; }
.report-chart-fallback { overflow-x: auto; }
.report-chart-fallback table { width: 100%; }

.report-chart-toolbar { display: flex; gap: 4px; justify-content: flex-end; margin-bottom: 6px; }
.report-chart-typebtn {
  font: inherit; font-size: 12px; padding: 3px 10px; cursor: pointer;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 7px;
}
.report-chart-typebtn:hover { color: var(--ink); }
.report-chart-typebtn.active { background: var(--surface-2, rgba(124,77,190,0.10)); color: var(--brand-bright); border-color: var(--brand-bright); }

/* Kleurthema-kiezer */
.viz-theme-picker { display: inline-flex; align-items: center; gap: 8px; }
.viz-theme-picker:empty { display: none; }
.viz-theme-picker-label { font-size: 12px; color: var(--ink-soft); }
.viz-theme-select {
  font: inherit; font-size: 13px; padding: 5px 9px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}

/* Het "Verken je cijfers"-blok onder de rapporten is verwijderd (AJ
   2026-07-26); .verkenner-dash-picker en .verkenner-vergelijk-check blijven
   omdat Mijn inzichten resp. de tegel-editor van Mijn dashboards ze hergebruiken. */

/* Live opgeslagen rapporten (Home / Mijn inzichten) */
.saved-report { width: 100%; }
.saved-report-canvas { width: 100%; min-height: 200px; }
.insight-live { display: inline-block; margin-top: 6px; font-size: 11px; }
.tile-report { grid-column: 1 / -1; }
.tile-report .saved-report { margin: 8px 0 4px; }

@media (max-width: 720px) {
  .page-head { flex-direction: column; }
  .report-chart-toolbar { justify-content: flex-start; }
}

/* ============================================================
   MOBIELE LAAG (ontwerp 2026-07-24, zie artifact "Mobiel ontwerp")
   Alles hieronder geldt uitsluitend ≤720px — desktop blijft ongemoeid.
   Navigatie: vaste tabbalk onderin (partials/footer.ejs) + Meer-sheet.
   ============================================================ */
.tabbar { display: none; }

@media (max-width: 720px) {
  /* Ruimte voor de vaste tabbalk (56px + safe-area) onder elke pagina. */
  .page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .foot { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .tabbar .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 48px; padding: 3px 0; border-radius: 9px;
    font-size: 10.5px; color: var(--ink-soft); text-decoration: none;
    -webkit-tap-highlight-color: transparent; cursor: pointer; list-style: none;
  }
  .tabbar .tab.active { color: var(--brand-bright, var(--brand)); font-weight: 700; }
  .tabbar .tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar summary.tab::-webkit-details-marker { display: none; }

  /* Meer-sheet: dim + paneel onderin, boven de tabbalk. */
  .meer-dim { position: fixed; inset: 0; background: rgba(20, 16, 31, .45); z-index: 61; }
  .meer-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 62;
    background: var(--surface); border-radius: 16px 16px 0 0;
    padding: 8px 18px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -14px 44px rgba(0, 0, 0, .28);
  }
  .meer-grip { width: 38px; height: 4px; border-radius: 3px; background: var(--line); margin: 4px auto 8px; }
  .meer-sheet a, .meer-sheet button {
    display: flex; width: 100%; align-items: center; gap: 10px;
    min-height: 48px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line);
    background: none; color: var(--ink); font: inherit; font-size: 15px;
    text-decoration: none; text-align: left; cursor: pointer;
  }
  .meer-sheet .meer-uitloggen { border-bottom: none; color: var(--ink-soft); }

  /* Compactere koppen + kaarten op een klein scherm. */
  .page { padding-left: 14px; padding-right: 14px; }
  h1 { font-size: 22px; }
  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px; }
  .page-head-actions { flex-wrap: wrap; }
}

/* ---- Mobiele filter-sheet (dashboard.ejs + filter-sheet.js) ---- */
.filter-mobiel { display: none; }
.filter-zone { display: contents; } /* desktop: onzichtbare wrapper, panelen zoals altijd */
.filter-zone-kop { display: none; }
.filter-dim { display: none; }

@media (max-width: 720px) {
  .filter-mobiel { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 14px; }
  .filter-chip {
    display: inline-flex; align-items: center; gap: 5px; max-width: 46vw;
    background: var(--brand-soft); color: var(--brand-bright, var(--brand));
    border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600;
    text-decoration: none; overflow: hidden; white-space: nowrap;
  }
  .filter-chip span { overflow: hidden; text-overflow: ellipsis; }
  .filter-chip .x { opacity: .6; flex: none; }

  /* De zone wordt een bottom-sheet: dicht = volledig verborgen. */
  .filter-zone { display: none; }
  .filter-zone.open {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 72;
    max-height: 82dvh; overflow-y: auto; background: var(--surface);
    border-radius: 16px 16px 0 0; padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -14px 44px rgba(0, 0, 0, .28);
  }
  .filter-dim { display: block; position: fixed; inset: 0; background: rgba(20, 16, 31, .45); z-index: 71; }
  .filter-dim[hidden] { display: none; }
  body.filter-sheet-open { overflow: hidden; }

  .filter-zone-kop { display: flex; align-items: center; gap: 10px; padding: 4px 0 10px; position: relative; }
  .filter-zone-kop .meer-grip { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); margin: 0; }
  .filter-zone-kop strong { font-size: 15px; margin-top: 8px; }
  .filter-zone-kop .filter-close { margin-left: auto; margin-top: 8px; min-width: 44px; min-height: 36px; }

  /* Panelen binnen de sheet: gestapeld, volle breedte, rustige randen. */
  .filter-zone .filter-pane {
    display: flex; flex-direction: column; align-items: stretch; gap: 12px;
    border: none; background: none; padding: 0; margin: 0 0 6px;
  }
  .filter-zone .filter-field { width: 100%; }
  .filter-zone .filter-field select, .filter-zone .ms-search { width: 100%; min-height: 44px; font-size: 15px; }
  .filter-zone .ms-item { min-height: 44px; align-items: center; }
  .filter-zone .filter-blocks { display: flex; flex-direction: column; gap: 12px; }
  .filter-zone .filter-apply { min-height: 46px; font-size: 15px; }
  .filter-zone .filter-pane-actions { position: sticky; bottom: 0; background: var(--surface); padding: 10px 0 2px; display: flex; gap: 8px; }
  .filter-zone .filter-pane-actions .btn { flex: 1; }

}

/* Ordercode vóór de projectnaam: gedempt en in tabulaire cijfers, zodat de
   codes onder elkaar uitlijnen en de naam het oog houdt. */
.rij-code { font-family: var(--mono); font-size: 0.92em; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-right: 2px; }

/* ---- Dichte tabellen (AJ 05-09-2026: "datums en geld op één lijn") ----
   Getallen, datums en bedragen breken NOOIT af: een datum over twee regels of
   een euroteken boven zijn bedrag is niet te lezen. De ruimte komt uit een
   lettergrootte die met het scherm meeschaalt: .tabel-dicht (vanaf tien
   kolommen, gezet in partials/dashboard-body.ejs) gaat van 11 px op een
   laptop naar 13,5 px op een breed scherm, met smallere celpadding. Past het
   dan nog niet, dan scrollt de wrapper horizontaal met een vaste eerste
   kolom -- maar dat is de uitzondering, niet de regel. */
.dash-tabel-wrap td.num, .dash-tabel-wrap th.num,
.dash-tabel-wrap td.num .badge { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-tabel-wrap .tabel-dicht th, .dash-tabel-wrap .tabel-dicht td {
  font-size: clamp(11px, 0.78vw, 13.5px);
  padding: 7px 7px;
}
.dash-tabel-wrap .tabel-dicht th { font-size: clamp(10px, 0.7vw, 12px); line-height: 1.2; }
.dash-tabel-wrap .tabel-dicht td.num .badge { font-size: clamp(10px, 0.7vw, 11.5px); padding: 1px 7px; }
/* De eerste kolom (het label) mag wél afbreken, maar niet eindeloos smal
   worden: anders duwen veertien getalkolommen hem tot één woord per regel. */
.dash-tabel-wrap .tabel-dicht td:first-child, .dash-tabel-wrap .tabel-dicht th:first-child { min-width: 14ch; }

/* ---- F3: tabellen op mobiel (ontwerp §05) ---- */
.ppl-hint-mobiel { display: none; }
.dash-tabel-wrap { overflow-x: auto; }

@media (max-width: 720px) {
  .ppl-hint-desktop { display: none; }
  .ppl-hint-mobiel { display: inline; }

  /* Projectuitsplitsing: calculatie-kolommen verbergen -> per post alleen de
     werkelijke (nacalculatie) omzet/kosten/winst. Celvolgorde is vast (label,
     calc-omzet, werk-omzet, calc-kosten, werk-kosten, calc-winst, werk-winst) —
     zie pplCell in partials/dashboard-body.ejs. De subkop (Calc./Werk.) vervalt;
     de hoofdkop (Omzet/Kosten/Winst, colspan 2) spant vanzelf de ene restkolom. */
  .project-pl td:nth-child(2), .project-pl td:nth-child(4), .project-pl td:nth-child(6) { display: none; }
  .project-pl .ppl-subhead { display: none; }

  /* Vaste eerste kolom bij horizontaal scrollen (projectuitsplitsing + de
     gewone sectietabellen): je raakt nooit kwijt naar wélke rij je kijkt. */
  .ppl-wrap { overflow-x: auto; }
  .project-pl .ppl-label,
  .project-pl thead th:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--surface);
  }
  .dash-tabel-wrap table th:first-child,
  .dash-tabel-wrap table td:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--surface);
    max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Tikdoelen: uitklap-pijltjes en P&L-regels op vingerformaat. */
  .ppl-toggle { min-width: 34px; min-height: 34px; }
  .pl-summary { min-height: 44px; align-items: center; }
  .pl-row.pl-leaf { padding-top: 8px; padding-bottom: 8px; }
  .clickable-row td { padding-top: 12px; padding-bottom: 12px; }
}

/* ---- F4: klein slijpwerk mobiel ---- */
@media (max-width: 720px) {
  .ask-bar { flex-direction: column; }
  .ask-bar .btn { min-height: 46px; }
  .crossfilter-banner .btn { min-height: 40px; }
  .dq-scorekop { gap: 14px; }
  .dq-score-cijfer { font-size: 38px; }
  .page-head-actions .btn { min-height: 42px; }
  .form-actions .btn { min-height: 44px; }
}

/* ---- Bronfilter (Financieel): multiselect Proteus/Exact in de filterbalk ---- */
.bron-opties { display: flex; gap: 12px; align-items: center; min-height: 33px; }
.bron-optie { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }
.bron-optie input { accent-color: var(--brand); width: 15px; height: 15px; }
@media (max-width: 720px) {
  .filter-zone .bron-opties { flex-direction: column; align-items: stretch; gap: 0; }
  .filter-zone .bron-optie { min-height: 44px; border-bottom: 1px solid var(--line); }
}

/* ============================================================
   LAAD-FEEDBACK (feature/laad-feedback, 2026-07-24)
   Eén taal voor "er gebeurt iets": (1) voortgangsbalk bovenin bij
   navigaties/verversingen, (2) shimmer-dim over content die live ververst
   wordt (de oude cijfers blijven zichtbaar — geen leeg scherm), (3) knop-
   spinner bij acties, (4) gefaseerde statustekst in de AI-chat.
   Bewust duidelijker dan Power BI-stijl spinners (AJ: die vallen niemand op).
   ============================================================ */
.laadbalk {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: transparent; pointer-events: none;
}
.laadbalk-vulling {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand-bright), var(--brand));
  box-shadow: 0 0 8px color-mix(in srgb, var(--brand-bright) 60%, transparent);
}
.laadbalk-actief { animation: laadbalk-groei 8s cubic-bezier(.15,.6,.3,1) forwards; }
.laadbalk-klaar { animation: none; width: 100% !important; transition: width .2s ease; }
@keyframes laadbalk-groei { 0% { width: 0; } 12% { width: 38%; } 45% { width: 72%; } 100% { width: 91%; } }
/* Laad-cursor (klantfeedback via Chris 2026-07-25: "loading balkje in de
   muis"): zolang er geladen wordt toont de muis pijl+activiteit. `progress`
   i.p.v. `wait` — klikken blijft gewoon mogelijk. !important zodat 'ie ook
   wint van cursor:pointer op knoppen/links. loading.js zet de klasse. */
.laden-cursor, .laden-cursor * { cursor: progress !important; }

/* Live-verversing (cross-filter, Mijn dashboards): de bestaande content dimt
   en pulseert licht; de balk bovenin draagt het hoofdsignaal. */
#dashboard-body.is-loading .card,
#dashboard-body.is-loading .kpi,
.dash-canvas.is-loading .dash-tile {
  opacity: .55; pointer-events: none;
  animation: laad-puls 1.1s ease-in-out infinite alternate;
}
@keyframes laad-puls { from { opacity: .55; } to { opacity: .8; } }

/* Knop-spinner: compacte draairing ín de knop (bv. "Vraag het"). */
.btn.is-laden { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-laden::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: laad-draai .7s linear infinite;
}
.btn.secondary.is-laden::after { border-color: color-mix(in srgb, var(--brand) 30%, transparent); border-top-color: var(--brand); }
@keyframes laad-draai { to { transform: rotate(360deg); } }

/* AI-chat: geanimeerde puntjes achter de gefaseerde statustekst. */
.chat-laden #answer-text::after { content: ""; animation: chat-punten 1.4s steps(4, end) infinite; }
@keyframes chat-punten { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

@media (prefers-reduced-motion: reduce) {
  .laadbalk-actief { animation: none; width: 60%; }
  #dashboard-body.is-loading .card, #dashboard-body.is-loading .kpi,
  .dash-canvas.is-loading .dash-tile { animation: none; }
  .btn.is-laden::after { animation-duration: 1.4s; }
  .chat-laden #answer-text::after { content: "…"; animation: none; }
}

/* ============================================================
   UITLEG-PAGINA (AJ 2026-07-26) — accordeon met uitleg per rapport.
   details/summary: op een telefoon eerst de inhoudsopgave, dan pas de tekst.
   ============================================================ */
.uitleg-lijst { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.uitleg-item { margin-bottom: 0; padding: 0; }
.uitleg-item > summary {
  display: flex; flex-direction: column; gap: 3px;
  padding: 15px 18px; cursor: pointer; list-style: none;
}
.uitleg-item > summary::-webkit-details-marker { display: none; }
.uitleg-item > summary::after {
  content: '▸'; position: absolute; right: 18px; color: var(--ink-soft); transition: transform .12s ease;
}
.uitleg-item { position: relative; }
.uitleg-item[open] > summary::after { transform: rotate(90deg); }
.uitleg-item > summary:hover { background: var(--brand-soft); }
.uitleg-titel { font-weight: 600; font-size: 15px; padding-right: 22px; }
.uitleg-intro { font-size: 13px; }
.uitleg-body { padding: 0 18px 16px; max-width: 70ch; }
.uitleg-body h3 { font-size: 14px; margin: 14px 0 4px; }
.uitleg-body p { margin: 0 0 10px; }
.uitleg-begrippen { margin: 0; display: grid; grid-template-columns: minmax(140px, 22%) 1fr; gap: 8px 18px; }
.uitleg-begrippen dt { font-weight: 600; }
.uitleg-begrippen dd { margin: 0; color: var(--ink-soft); }
.uitleg-hulp p { max-width: 70ch; margin-bottom: 0; }
@media (max-width: 720px) {
  /* Term boven de uitleg i.p.v. ernaast — twee kolommen van 150px lezen niet. */
  .uitleg-begrippen { grid-template-columns: 1fr; gap: 2px; }
  .uitleg-begrippen dd { margin-bottom: 10px; }
  .uitleg-item > summary { min-height: 52px; }
}

/* Secundaire tabelkolommen op een telefoon verbergen (s.hideMobile in de
   sectie-definitie) — anders is een tabel van 5-7 kolommen alleen met veel
   schuiven te lezen. Zie dashboard-body.ejs. */
.tabel-mob-hint { display: none; }
@media (max-width: 720px) {
  .dash-tabel-wrap .col-mob-hide { display: none; }
  .tabel-mob-hint { display: block; margin: 8px 0 0; }
  /* KPI-waarde: "€ 5.040.000" past bij 22px niet in een halve schermbreedte en
     brak dan over twee regels. Iets kleiner + cijferbreedte gelijk = één regel. */
  .kpi-value { font-size: 19px; font-variant-numeric: tabular-nums; }
}

/* Sorteerbare kolomkoppen in rapporttabellen (js/tabel-sorteren.js). Subtiele
   affordance: het pijltje verschijnt bij hover/focus, en blijft staan op de
   kolom waarop gesorteerd is. */
.dash-tabel-wrap table tr:first-child th { cursor: pointer; user-select: none; position: relative; }
.dash-tabel-wrap table tr:first-child th:hover { color: var(--brand-bright); }
.dash-tabel-wrap table tr:first-child th:focus-visible {
  outline: 2px solid var(--brand-bright); outline-offset: -2px;
}
.dash-tabel-wrap table tr:first-child th::after {
  content: '↕'; margin-left: 5px; font-size: 11px; opacity: 0; transition: opacity .12s ease;
}
.dash-tabel-wrap table tr:first-child th:hover::after,
.dash-tabel-wrap table tr:first-child th:focus-visible::after { opacity: .55; }
.dash-tabel-wrap table tr:first-child th[data-sorteer]::after { opacity: 1; color: var(--brand-bright); }
.dash-tabel-wrap table tr:first-child th[data-sorteer="op"]::after { content: '↑'; }
.dash-tabel-wrap table tr:first-child th[data-sorteer="af"]::after { content: '↓'; }

/* ---- Procesatlas (/processen) ----------------------------------------------
   Klant-specifieke pagina waarop de klant door z'n eigen processen loopt en per
   verbeterpunt de stand bijhoudt. Bewust GEEN horizontale kolommen zoals de
   originele procesplaten: dat is een poster, geen scherm. Per fase een verticale
   lijst van stappen, die op een telefoon net zo leest als op een beamer.
   Uitklappen gebeurt met <details name="pa-stap"> — de browser houdt er zelf één
   open, dus hier is geen JavaScript voor nodig (en dat mag ook niet: de CSP
   staat geen inline scripts toe). */
.pa-intro { max-width: 78ch; }
.pa-sectie-intro { max-width: 78ch; margin: -6px 0 12px; font-size: 13.5px; }
.pa-groep-hint { font-weight: 400; font-size: 13px; margin-left: 6px; }
.pa-kruimel { font-size: 12.5px; margin: 0 0 4px; }
.pa-procesmeta { font-size: 12.5px; margin: 6px 0 0; }

/* Voortgang: vier segmenten die samen het geheel vormen (delen-van-een-geheel,
   dus stapelen mag — zelfde regel als in de rapporten). */
.pa-voortgang-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pa-balk {
  display: flex; height: 12px; border-radius: 6px; overflow: hidden;
  background: var(--line); margin: 10px 0; width: 100%;
}
.pa-balk-klein { height: 6px; margin: 8px 0 2px; }
.pa-balk-deel { display: block; height: 100%; }
.pa-balk-deel.is-gereed, .pa-stip.is-gereed { background: var(--green); }
.pa-balk-deel.is-loopt, .pa-stip.is-loopt { background: var(--amber); }
.pa-balk-deel.is-open, .pa-stip.is-open { background: var(--red); }
.pa-balk-deel.is-vervalt, .pa-stip.is-vervalt { background: var(--ink-soft); }
.pa-legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--ink-soft); }
.pa-legenda li { display: flex; align-items: center; gap: 7px; }
.pa-stip { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.pa-proceskaart .pa-balk { margin-top: auto; }
.pa-proceskaart .dash-list-meta { gap: 4px 12px; }

/* Markering-iconen: klein, gekleurd vierkant met het teken erin. */
.pa-mark {
  font-style: normal; font-size: 10px; line-height: 1; font-weight: 700; color: #fff;
  width: 16px; height: 16px; border-radius: 3px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.pa-nr { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); flex: none; min-width: 34px; }
.pa-land { font-size: 11px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; margin-left: auto; white-space: nowrap; }
.pa-stop { background: var(--red); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 1px 6px; border-radius: 9px; }
.pa-sprong { font-family: var(--mono); font-size: 12.5px; margin-right: 8px; }

/* Filterchips (markering en andere processen) */
.pa-markeringfilter { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.pa-chip {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
}
.pa-chip:hover { border-color: var(--brand-bright); }
.pa-chip.is-actief { background: var(--brand); border-color: var(--brand); color: #fff; }
.pa-chip u { text-decoration: none; opacity: .6; font-weight: 400; }
.pa-filters { margin-bottom: 14px; }

/* Fase (kolom uit de originele plaat) */
.pa-fase { margin: 0 0 22px; }
.pa-fase-kop { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; font-size: 15px; }
.pa-fase-badge {
  width: 26px; height: 26px; border-radius: 50%; color: #fff; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700;
}
.pa-fase-titel { font-weight: 700; }
.pa-fase-aantal { font-weight: 400; font-size: 12.5px; }

/* Stapkaart: dichte regel om te scannen, uitklapbaar voor het verhaal erachter. */
.pa-stappen { display: flex; flex-direction: column; gap: 6px; }
.pa-stap { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.pa-stap[open] { border-color: var(--brand-bright); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.pa-stap.is-keuze .pa-stap-kop { background: color-mix(in srgb, var(--brand-bright) 6%, transparent); }
.pa-stap.is-eind .pa-stap-kop { background: color-mix(in srgb, var(--ink-soft) 7%, transparent); }
.pa-stap-kop {
  cursor: pointer; padding: 9px 13px 9px 10px; border-left: 4px solid var(--line);
  border-radius: 9px 9px 0 0; list-style: none; display: block;
}
.pa-stap:not([open]) .pa-stap-kop { border-radius: 9px; }
.pa-stap-kop::-webkit-details-marker { display: none; }
.pa-stap-kop:hover { background: color-mix(in srgb, var(--brand-bright) 8%, transparent); }
.pa-stap-kop:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: -2px; }
.pa-stap-regel { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pa-stap-tekst { flex: 1 1 320px; font-size: 14px; }
.pa-stap-status { flex: none; }
.pa-stap-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 12px; color: var(--ink-soft); margin-top: 4px; padding-left: 41px; }

/* Uitgeklapt paneel */
.pa-paneel { padding: 4px 16px 16px 16px; border-top: 1px solid var(--line); margin-top: 2px; }
.pa-grens { font-size: 13px; color: var(--ink-soft); margin: 12px 0 0; }
.pa-notitie { border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; padding: 10px 13px; margin-top: 12px; background: var(--bg); }
/* De kopkleur per soort staat hier en niet als inline-stijl uit de data: één
   kleur kan niet tegelijk leesbaar zijn op wit en op bijna-zwart. De gekleurde
   rand links komt wél uit de data (die werkt in beide thema's). */
.pa-notitie h3 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 4px; color: var(--pa-kop); }
.pa-notitie-knelpunt { --pa-kop: #a3211a; }
.pa-notitie-lus { --pa-kop: #7d420f; }
.pa-notitie-ai { --pa-kop: #63339a; }
.pa-notitie-wacht { --pa-kop: #57526a; }
.pa-notitie-bijgewerkt { --pa-kop: #196547; }
:root[data-theme="dark"] .pa-notitie-knelpunt { --pa-kop: #f1938c; }
:root[data-theme="dark"] .pa-notitie-lus { --pa-kop: #e3ab6c; }
:root[data-theme="dark"] .pa-notitie-ai { --pa-kop: #c4a4ee; }
:root[data-theme="dark"] .pa-notitie-wacht { --pa-kop: #b0a9c4; }
:root[data-theme="dark"] .pa-notitie-bijgewerkt { --pa-kop: #7fd3b1; }
/* Fasekleuren komen uit de originele plaat en zijn op wit gekozen; op donker
   zijn de donkerblauwe tinten te zwak. Hue behouden, helderheid optrekken. */
:root[data-theme="dark"] .pa-fase-titel { filter: brightness(1.75) saturate(.9); }
.pa-notitie p { margin: 0; font-size: 13.5px; }
.pa-feiten { display: grid; grid-template-columns: 92px 1fr; gap: 5px 14px; margin: 14px 0 0; font-size: 13px; }
.pa-feiten dt { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); padding-top: 2px; }
.pa-feiten dd { margin: 0; }
.chip { display: inline-block; font-size: 11.5px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 5px; margin: 0 4px 4px 0; color: var(--ink-soft); background: var(--bg); }

/* Statusformulier: hier houdt de klant de verbetering bij. */
.pa-statusform { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.pa-statusform h3 { font-size: 13px; margin: 0 0 10px; }
.pa-statusform-rij { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.pa-statusform-rij .filter-field { flex: 1 1 190px; }
.pa-statusform input[type="text"], .pa-statusform textarea {
  font: inherit; font-weight: 400; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; width: 100%;
}
.pa-statusform textarea { resize: vertical; }
.pa-statusform input:focus, .pa-statusform textarea:focus, .pa-statusform select:focus {
  outline: none; border-color: var(--brand-bright);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-bright) 18%, transparent);
}
.pa-statusform-actie { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 12.5px; }

/* Verbeterlijst op de overzichtspagina */
.pa-punten { display: flex; flex-direction: column; gap: 8px; }
.pa-punt { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; margin-bottom: 0; }
.pa-punt:hover { border-color: var(--brand-bright); }
.pa-punt-kop { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pa-punt-stap { flex: 1 1 300px; font-weight: 600; font-size: 14px; }
.pa-punt-tekst { font-size: 13.5px; color: var(--ink-soft); }

.pa-legendakaart h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 14px 0 8px; }
.pa-legendakaart h3:first-child { margin-top: 0; }
.pa-legenda-lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; font-size: 13px; }
.pa-legenda-lijst li { display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: start; }
.pa-legenda-rollen { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 7px 22px; font-size: 13px; }
.pa-legenda-rollen li { display: flex; align-items: center; gap: 7px; }
.pa-rolstreep { width: 20px; height: 4px; border-radius: 2px; flex: none; }
.pa-hulp { margin-top: 22px; }

@media (max-width: 720px) {
  .pa-stap-meta { padding-left: 0; }
  .pa-feiten { grid-template-columns: 1fr; gap: 2px; }
  .pa-feiten dd { margin-bottom: 8px; }
  .pa-land { margin-left: 0; }
  .pa-punt-stap, .pa-stap-tekst { flex-basis: 100%; }
}

/* ---- Procesatlas: het verbeterplan (/processen/plan) ---------------------- */
.pa-plankaart { border-left: 4px solid var(--brand); }
.pa-plankaart-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pa-plankaart-kop h2 { margin-bottom: 2px; }
.pa-plankaart-golf { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 14px 0 8px; }
.pa-planlijst { margin: 0; padding-left: 22px; display: grid; gap: 7px; font-size: 13.5px; }
.pa-planlijst li > a { font-weight: 600; }
.pa-planlijst li > span.muted { display: block; font-size: 13px; }

.pa-routekaart h2 { margin-bottom: 10px; }
.pa-routelijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 13px; }
.pa-routelijst li { display: grid; grid-template-columns: 68px 1fr; gap: 10px; align-items: start; }
.pa-routebadge {
  display: inline-block; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent;
}
.pa-routebadge.is-neven { background: transparent !important; font-weight: 600; }

.pa-golf-kop { display: flex; align-items: center; gap: 10px; }
.pa-golf-badge {
  width: 24px; height: 24px; border-radius: 50%; color: #fff; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}

.pa-themas { display: flex; flex-direction: column; gap: 10px; }
.pa-thema { padding: 0; margin-bottom: 0; }
.pa-thema[open] { border-color: var(--brand-bright); }
.pa-thema-kop { cursor: pointer; padding: 14px 18px; list-style: none; display: block; border-radius: 12px; }
.pa-thema-kop::-webkit-details-marker { display: none; }
.pa-thema-kop:hover { background: color-mix(in srgb, var(--brand-bright) 6%, transparent); }
.pa-thema-kop:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: -2px; }
.pa-thema-regel { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pa-thema-nr {
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 6px; min-width: 26px; text-align: center; padding: 1px 0;
}
.pa-thema-titel { font-size: 16px; font-weight: 700; flex: 1 1 260px; }
.pa-thema-wat { display: block; margin-top: 6px; font-size: 14px; color: var(--ink); }
.pa-thema-meta { display: flex; flex-wrap: wrap; gap: 5px 12px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--ink-soft); }
.pa-thema-body { padding: 0 18px 18px; }
.pa-thema-h { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 18px 0 8px; }
.pa-hoe { margin: 0; padding-left: 20px; display: grid; gap: 7px; font-size: 13.5px; }
.pa-verdeling { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.pa-verdeling-blok {
  flex: 1 1 260px; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; background: var(--bg);
}
.pa-verdeling-blok h4 { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 5px; }
.pa-verdeling-blok p { margin: 0; font-size: 13.5px; }
.pa-thema-feiten { grid-template-columns: 128px 1fr; margin-top: 18px; }
.pa-themapunten { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.pa-themapunten a {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13px;
}
.pa-themapunten a:hover { border-color: var(--brand-bright); background: color-mix(in srgb, var(--brand-bright) 6%, transparent); }
.pa-themapunt-tekst { flex: 1 1 260px; }
.pa-themapunt-proces { font-size: 12px; }

/* Het plan-blok in het paneel van een stap. */
.pa-notitie-plan { --pa-kop: var(--brand); border-left-color: var(--brand); }
:root[data-theme="dark"] .pa-notitie-plan { --pa-kop: var(--brand-bright); }

@media (max-width: 720px) {
  .pa-routelijst li { grid-template-columns: 1fr; gap: 3px; }
  .pa-routelijst .pa-routebadge { justify-self: start; }
  .pa-thema-feiten { grid-template-columns: 1fr; }
  .pa-thema-titel { flex-basis: 100%; }
}
.pa-openstaand { display: grid; gap: 4px 0; margin: 0; }
.pa-openstaand dt { font-weight: 650; font-size: 14px; margin-top: 12px; }
.pa-openstaand dt:first-child { margin-top: 0; }
.pa-openstaand dd { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.pa-voorwaarden { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.pa-voorwaarde { margin-bottom: 0; border-top: 3px solid var(--amber); }
.pa-voorwaarde h3 { display: flex; align-items: center; gap: 9px; font-size: 15px; margin: 0 0 8px; }
.pa-voorwaarde p { font-size: 13.5px; margin: 0 0 8px; }
.pa-voorwaarde p:last-child { margin-bottom: 0; }
.pa-voorwaarde-gevolg { color: var(--ink); }

/* ---- Taalkiezer in de topbar (AJ 2026-08-01) ------------------------------
   Een gewoon formulier: submit-on-change zou JavaScript vragen en dat mag niet
   onder de CSP. Op een telefoon verhuist hij naar de "Meer"-lade, want in de
   balk is geen ruimte. */
.taalkiezer { display: flex; align-items: center; gap: 4px; }
.taalkiezer select {
  font: inherit; font-size: 12.5px; padding: 4px 4px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff;
}
/* In de balk alleen de taalcode (NL/PL/EN): de volledige naam kost ruimte die de
   navigatie nodig heeft, en staat als tooltip en in Beheer wel voluit. */
.topbar .taalkiezer select { width: 4.4em; }
.taalkiezer select option { color: var(--ink); background: var(--surface); }
.taalkiezer .icon-btn { border-color: rgba(255,255,255,.35); color: #fff; padding: 4px 8px; font-size: 12px; }
.visueel-verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 900px) { .taalkiezer { display: none; } }
.meer-sheet .taalkiezer { display: flex; padding: 10px 4px; }
.meer-sheet .taalkiezer select { color: var(--ink); border-color: var(--line); }
.meer-sheet .taalkiezer .icon-btn { color: var(--ink); border-color: var(--line); }

/* ---- Besluitenlog (/processen/besluiten) ---------------------------------- */
.pa-besluiten { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pa-besluit { margin-bottom: 0; border-left: 4px solid var(--brand); }
.pa-besluit-kop { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pa-besluit-kop h2 { margin: 0; font-size: 17px; flex: 1 1 300px; }
.pa-besluit-datum { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.pa-besluit-wat { font-size: 14.5px; margin: 0; }
.pa-besluit-feiten { margin-top: 14px; grid-template-columns: 110px 1fr; }
.pa-besluit-themas { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-besluit-themas .pa-chip { font-size: 11.5px; padding: 3px 9px; }
.pa-voorwaarde.is-beantwoord { border-top-color: var(--green); }
.pa-voorwaarde-antwoord { font-size: 13.5px; }
.pa-voorwaarde-was summary { cursor: pointer; font-size: 12.5px; padding: 4px 0; }
.pa-voorwaarde-was p { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
@media (max-width: 720px) { .pa-besluit-feiten { grid-template-columns: 1fr; } }

/* ---- Sporen: de genummerde reeksen uit de sessies (AJ 2026-08-05) ---------
   Een spoor is een route en geen plan, dus het mag visueel rustiger zijn dan een
   thema: geen kaart per stap, wel een duidelijke code links zodat de klant zijn
   eigen A.1/B.2 in één oogopslag vindt. De verwijzing naar het thema staat
   onderaan elke stap, want dáár staat de inhoud. */
.pa-spoorblok { display: grid; gap: 18px; }
.pa-spoorblok > h3 { font-size: 16px; margin: 0; }
.pa-spoorblok-uitleg { font-size: 13.5px; margin: -12px 0 0; max-width: 78ch; }
.pa-spoor { border-top: 1px solid var(--line); padding-top: 14px; }
.pa-spoorblok > .pa-spoor:first-of-type { border-top: 0; padding-top: 0; }
.pa-spoor-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; margin: 0 0 6px; }
.pa-spoorcode {
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: #fff; background: var(--brand);
  width: 24px; height: 24px; border-radius: 6px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
:root[data-theme="dark"] .pa-spoorcode { background: var(--brand-bright); color: #10121a; }
.pa-spoor-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin-left: auto; font-size: 12px; color: var(--ink-soft); }
.pa-spoor-uitleg { font-size: 13px; margin: 0 0 10px; max-width: 78ch; }
.pa-spoorstappen { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pa-spoorstappen > li {
  display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13.5px;
}
.pa-spoorstap-kop { display: flex; gap: 9px; align-items: baseline; }
.pa-spoorstap-wat { flex: 1 1 auto; }
.pa-spoorstap-klaar { font-size: 12.5px; color: var(--ink-soft); padding-left: 43px; }
.pa-spoorstappen .pa-sprong {
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding-left: 43px; margin-right: 0; font-family: inherit; font-size: 12.5px;
}
@media (max-width: 720px) {
  .pa-spoorstap-klaar, .pa-spoorstappen .pa-sprong { padding-left: 0; }
  .pa-spoor-meta { margin-left: 0; }
}

/* ---- Voortgang per project (rapport Lopende projecten) --------------------
   Elger via AJ 2026-08-14: "de persoon die hiernaar kijkt snapt niet al die
   cijfers, dat is te druk — hij wil gewoon zien hoever ze zijn". Twee balken op
   dezelfde schaal (uren en tijd) met de begroting als streep; het VERSCHIL
   tussen de balken is het signaal. Geen grafiekbibliotheek: dit moet ook in een
   smalle kolom en op een telefoon werken. */
.vg-lijst { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.vg-rij { padding: 12px 14px; border-radius: 10px; border-left: 4px solid var(--line); background: var(--bg); }
.vg-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vg-naam { font-weight: 600; font-size: 14.5px; }
.vg-stand { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
/* 'Op het spel' in uren: de sleutel waarop deze lijst gesorteerd staat. Bewust
   NIET in de stand-kleur — de stand zegt hoe erg, dit zegt hoe groot, en die
   twee door elkaar halen maakt een klein project rood-en-groot. Duwt de stand
   met margin-left:auto naar rechts, zodat de kolom rechts uitgelijnd blijft. */
.vg-impact { font-size: 12px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; margin-left: auto; }
.vg-balken { position: relative; display: flex; flex-direction: column; gap: 3px; margin: 9px 0 7px; }
/* De begrotingsstreep loopt door beide sporen heen: dat maakt "erover" zichtbaar
   zonder een getal. */
.vg-balken::after {
  content: ''; position: absolute; top: -2px; bottom: -2px; left: var(--streep);
  width: 2px; background: var(--ink-soft); opacity: .55;
}
.vg-spoor { height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--ink-soft) 14%, transparent); overflow: hidden; }
.vg-vul { display: block; height: 100%; border-radius: 6px; }
/* De tijdbalk is bewust neutraal grijs (de kleur zegt niets, alleen de LENGTE
   telt) maar moet wel duidelijk van het lege spoor verschillen — anders lijkt
   een volle tijdbalk op een lege. */
.vg-vul-tijd { background: color-mix(in srgb, var(--ink-soft) 80%, transparent); }
/* Het percentage dat de BRON zelf voert (dim_project.voortgang_pct), als ruitje
   op dezelfde schaal als de twee balken. Een derde balk zou de rij vol maken
   en dit is geen meting van ons -- het is een claim uit Proteus, en het hoort
   er ook zo uit te zien. Alleen getekend als de klant die kolom heeft. */
.vg-metbron::before {
  content: ''; position: absolute; top: -5px; left: var(--bron);
  width: 7px; height: 7px; margin-left: -4px; transform: rotate(45deg);
  background: var(--ink-soft); opacity: .8; z-index: 1;
}
/* Wijkt de bron meer dan de marge van onze urenstand af, dan is dat het punt
   van de hele kolom -- dan mag het opvallen. Vet, niet rood: het is geen
   fout, het is een verschil van mening tussen twee bronnen. */
.vg-bron-afwijkend { font-weight: 700; color: var(--ink); }
.vg-stip-bron { background: var(--ink-soft); border-radius: 1px; transform: rotate(45deg); width: 7px; height: 7px; }
.vg-labels { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--ink-soft); }
.vg-stip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.vg-stip-tijd { background: color-mix(in srgb, var(--ink-soft) 80%, transparent); }
.vg-zin { margin: 7px 0 0; font-size: 13.5px; }

/* De stand bepaalt de kleur van de urenbalk, de rand en het woord ernaast —
   drie keer hetzelfde signaal, zodat kleur nooit de enige drager is. */
.vg-op-koers { border-left-color: var(--green); }
.vg-op-koers .vg-stand { color: var(--green); }
.vg-op-koers .vg-vul-uren, .vg-op-koers .vg-stip-uren { background: var(--green); }
.vg-let-op, .vg-loopt-uit { border-left-color: var(--amber); }
.vg-let-op .vg-stand, .vg-loopt-uit .vg-stand { color: var(--amber); }
.vg-let-op .vg-vul-uren, .vg-let-op .vg-stip-uren,
.vg-loopt-uit .vg-vul-uren, .vg-loopt-uit .vg-stip-uren { background: var(--amber); }
.vg-boven-begroting, .vg-over-de-datum { border-left-color: var(--red); }
.vg-boven-begroting .vg-stand, .vg-over-de-datum .vg-stand { color: var(--red); }
.vg-boven-begroting .vg-vul-uren, .vg-boven-begroting .vg-stip-uren,
.vg-over-de-datum .vg-vul-uren, .vg-over-de-datum .vg-stip-uren { background: var(--red); }
.vg-onbekend .vg-stand { color: var(--ink-soft); }
.vg-onbekend .vg-vul-uren, .vg-onbekend .vg-stip-uren { background: var(--ink-soft); }

@media (max-width: 720px) {
  .vg-kop { flex-direction: column; gap: 2px; }
  .vg-spoor { height: 14px; }
}

/* ---------------------------------------------------------------------------
   PROJECTBOOM (Lopende projecten): merk/programma > project > orders.
   <details>/<summary>, dus geen JavaScript -- werkt ook in de zelfstandige
   HTML-export en in de mailweergave, waar geen script draait.

   De standkleur komt uit de .vg-*-regels hierboven: die zetten alleen
   border-left-COLOR, en .bm-knoop levert de stijl en de dikte erbij. Zo staat
   de kleurindeling van "over de datum / loopt uit / op koers" op EEN plek --
   twee lijstjes zouden na de eerste wijziging uit elkaar lopen.
   --------------------------------------------------------------------------- */
/* De boom van Lopende projecten: klant > project > order als ÉÉN raster.
   Elke regel -- kop, klant, project, order -- is een grid met dezelfde
   kolommen (--bm-cijfers komt uit de view), zodat de som op een klantregel
   recht boven de orders staat waaruit hij bestaat. De laag zie je aan de
   inspringing van de naam en de zwaarte van de rand, niet aan een andere
   opmaak van de cijfers. */
.bm-boom {
  display: flex; flex-direction: column; gap: 6px;
  overflow-x: auto;
  font-variant-numeric: tabular-nums;
}
.bm-rij {
  display: grid;
  /* naam | stand | de cijferkolommen (--bm-cijfers komt uit de view) */
  grid-template-columns: minmax(250px, 3fr) minmax(120px, 1.1fr) repeat(var(--bm-cijfers, 5), minmax(72px, 1fr));
  align-items: center;
  gap: 0 10px;
  padding: 7px 12px;
  min-width: 720px;
}
.bm-kop {
  font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2;
  color: var(--ink-soft); padding-bottom: 4px; border-bottom: 1px solid var(--line);
}
.bm-cel { min-width: 0; }
.bm-cel.num { text-align: right; white-space: nowrap; font-size: 13px; }
.bm-kop .bm-cel.num { white-space: normal; }
.bm-stand { text-align: left; }
.bm-stand .badge { font-size: 11px; }
.bm-naamcel { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bm-naam { font-size: 14px; overflow-wrap: anywhere; }
.bm-knoop {
  border: 1px solid var(--line);
  border-left: 3px solid color-mix(in srgb, var(--ink-soft) 35%, transparent);
  border-radius: 8px;
  background: var(--surface, transparent);
}
.bm-knoop > summary {
  cursor: pointer; list-style: none;
  padding-left: 30px; position: relative;
}
/* Eigen driehoekje, zodat hij op elke browser hetzelfde staat en meedraait. */
.bm-knoop > summary::-webkit-details-marker { display: none; }
.bm-knoop > summary::before {
  content: '▸'; color: var(--ink-soft); font-size: 11px;
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
}
.bm-knoop[open] > summary::before { content: '▾'; }
.bm-knoop > summary:hover { background: color-mix(in srgb, var(--ink-soft) 6%, transparent); }
.bm-klant > summary .bm-naam { font-weight: 700; font-size: 14.5px; }
.bm-klant[open] > summary { border-bottom: 1px solid var(--line); }
/* Tweede laag: ingesprongen, lichter, en de rand in de stand-kleur. */
.bm-bundel { margin: 6px 8px 6px 22px; }
.bm-bundel > summary .bm-naam { font-weight: 600; }
/* Derde laag: de orders, nog een stap verder naar binnen en zonder rand. */
.bm-order { padding-left: 30px; font-size: 13px; }
.bm-bundel > .bm-order { padding-left: 46px; }
.bm-order .bm-naam { font-weight: 400; font-size: 13px; }
.bm-order + .bm-order { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
/* "uit de ordernamen": een groep die wij hebben afgeleid i.p.v. uit Proteus
   overgenomen. Gedempt en cursief -- het is een voetnoot bij de naam, geen
   waarschuwing. */
.bm-afgeleid { font-size: 11.5px; font-style: italic; color: var(--ink-soft); }
.bm-meta { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-over { font-size: 12px; font-weight: 600; color: var(--red); white-space: nowrap; }
/* Randkleur volgt de stand van de knoop, zelfde palet als de badges. */
.bm-knoop.vg-over-de-datum, .bm-knoop.vg-boven-begroting { border-left-color: var(--red); }
.bm-knoop.vg-loopt-uit, .bm-knoop.vg-let-op { border-left-color: var(--amber); }
.bm-knoop.vg-op-koers { border-left-color: var(--green); }

@media (max-width: 720px) {
  /* Op een telefoon vallen de kolommen met col-mob-hide weg (zelfde klasse als
     in de tabellen) en de inspringing wordt kleiner; het niveau blijft
     zichtbaar aan het driehoekje en de randkleur. */
  .bm-boom .col-mob-hide { display: none; }
  .bm-rij { min-width: 0; grid-template-columns: minmax(140px, 2fr) minmax(90px, 1fr) repeat(3, minmax(52px, 1fr)); padding: 7px 8px; gap: 0 6px; }
  .bm-knoop > summary { padding-left: 22px; }
  .bm-knoop > summary::before { left: 7px; }
  .bm-bundel { margin: 4px 4px 4px 8px; }
  .bm-order, .bm-bundel > .bm-order { padding-left: 22px; }
}

/* Top-N met schakelaar (Stand van zaken). Radio + label als tabs; het paneel
   dat hoort bij de aangevinkte radio is zichtbaar. Geen script. */
.top-schakel { display: flex; flex-wrap: wrap; gap: 6px; }
.top-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.top-tab {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink-soft);
  background: var(--bg);
}
.top-tab:hover { color: var(--ink); }
.top-radio:focus-visible + .top-tab { outline: 2px solid var(--brand); outline-offset: 2px; }
.top-radio-0:checked ~ label[for$="-uren"],
.top-radio-1:checked ~ label[for$="-financieel"] {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.top-paneel { display: none; flex-basis: 100%; margin-top: 8px; }
.top-radio-0:checked ~ .top-paneel-0, .top-radio-1:checked ~ .top-paneel-1 { display: block; }
.top-tabel { width: 100%; }
.top-tabel .top-rang { width: 2.2em; color: var(--ink-soft); font-weight: 600; }
.top-tabel td:first-child + td { font-weight: 600; }

/* "Meer detail": de onderbouwing onder de compacte kop, standaard dicht. */
.dash-detail { margin: 6px 0 18px; }
.dash-detail > summary {
  cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 12px 16px; border: 1px dashed var(--line); border-radius: 10px;
  font-weight: 600; color: var(--ink);
}
.dash-detail > summary::-webkit-details-marker { display: none; }
.dash-detail > summary::before { content: '▸'; color: var(--ink-soft); font-size: 12px; }
.dash-detail[open] > summary::before { content: '▾'; }
.dash-detail[open] > summary { border-style: solid; border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 12px; }
.dash-detail-hint { font-weight: 400; font-size: 13px; color: var(--ink-soft); }

/* Begrotingsraster: een vakje waar geen bedrag in te lezen valt. Alleen een
   hint tijdens het typen — de server weigert 'm alsnog met een nette melding. */
.invoer-fout {
  border-color: var(--danger, #c0392b);
  background: rgba(192, 57, 43, 0.06);
}