/* ==========================================================================
   NUX Marktbericht — basisstijl. Eén bestand met tokens, layout en bouwstenen.
   Zie ONTWERP.md voor de keuzes. Pagina's hebben daarnaast hoogstens één eigen css.
   Licht ontwerp, bewust: het dashboard wordt op kantoor op een laptop gelezen.
   ========================================================================== */
:root {
  color-scheme: light;
  /* Grond en lijnen: wit papier, koelgrijs met een tikje blauw (past bij de accentkleur) */
  --papier: #FFFFFF;
  --papier-2: #F5F7FA;          /* verzonken vlakken, tabelkoppen, hover */
  --papier-3: #EBEFF4;          /* actieve tabs, zachte nadruk */
  --lijn: #E2E6EC;
  --lijn-2: #C7CED8;            /* randen van invoervelden en knoppen */
  /* Inkt */
  --inkt: #14202E;
  --inkt-2: #3B4653;
  --inkt-3: #67717E;
  --inkt-4: #98A2AE;
  /* Accent: één kleur voor alles wat je kunt bedienen */
  --accent: #1F4E9E;
  --accent-donker: #173C7B;
  --accent-tint: #E7EEFA;
  /* Betekenis (nooit als reekskleur gebruiken) */
  --op: #157A4C;      --op-tint: #E0F2E8;
  --neer: #BF3A2B;    --neer-tint: #FBE6E2;
  --let-op: #A86B0B;  --let-op-tint: #FBEFD6;
  --fout: #BF3A2B;    --fout-tint: #FBE6E2;
  --goed: #157A4C;    --goed-tint: #E0F2E8;
  /* Producten: herkenning, geen reekskleur. Donkere variant voor tekst op wit. */
  --pinda: #C28A18;   --pinda-tekst: #8F6408;  --pinda-tint: #FBF0D8;
  --amandel: #B0483F; --amandel-tekst: #8E362F; --amandel-tint: #F9E5E2;
  --cashew: #2E7D5B;  --cashew-tekst: #23624A; --cashew-tint: #DDEFE6;
  --valuta: #4B5563;  --valuta-tekst: #374151; --valuta-tint: #E5E7EB;
  /* Reeksen in grafieken: vaste volgorde, gevalideerd voor kleurenblindheid (dataviz-validator, light) */
  --reeks-1: #2E6BC7; --reeks-2: #D9602C; --reeks-3: #189C6C; --reeks-4: #8B5CF6; --reeks-5: #D4699A; --reeks-6: #B8860B;
  /* Type */
  --f-ui: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-kop: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-16: 16px; --t-20: 20px; --t-26: 26px; --t-34: 34px;
  /* Maat */
  --r-s: 4px; --r-m: 8px; --r-l: 12px; --r-pil: 999px;
  --schaduw: 0 8px 24px rgba(20, 32, 46, .12), 0 1px 2px rgba(20, 32, 46, .06);
  --breedte: 1360px;
  --gutter: 24px;
}

/* ---- Reset en basis ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--papier); -webkit-text-size-adjust: 100%; }
body { font-family: var(--f-ui); font-size: var(--t-14); line-height: 1.45; color: var(--inkt); background: var(--papier); min-height: 100vh; display: flex; flex-direction: column; font-feature-settings: "tnum" 1, "lnum" 1; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; text-wrap: balance; }
h1 { font-family: var(--f-kop); font-size: var(--t-26); letter-spacing: -0.01em; }
h2 { font-size: var(--t-16); }
h3 { font-size: var(--t-14); }
p { max-width: 70ch; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-s); }
svg.ic { width: 16px; height: 16px; flex-shrink: 0; vertical-align: -3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
.stil { color: var(--inkt-3); }
.zacht { color: var(--inkt-4); } /* alleen voor decoratie; tekst die gelezen moet worden krijgt --inkt-3 (contrast 5:1) */
.code { font-family: var(--f-mono); font-size: .92em; color: var(--inkt-2); word-break: break-all; }
.klein { font-size: var(--t-12); }
.rechts { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---- Topbalk ------------------------------------------------------------ */
.topbalk { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px; height: 56px; padding: 0 var(--gutter); background: var(--papier); border-bottom: 1px solid var(--lijn); }
.merk { display: flex; align-items: baseline; gap: 8px; color: var(--inkt); text-decoration: none; }
.merk:hover { text-decoration: none; }
.merk-naam { font-family: var(--f-kop); font-weight: 600; font-size: 22px; letter-spacing: .02em; }
.merk-sub { font-size: var(--t-12); color: var(--inkt-3); font-weight: 500; }
.hoofdnav { display: flex; gap: 4px; height: 100%; }
.navitem { display: flex; align-items: center; padding: 0 12px; font-size: var(--t-14); font-weight: 500; color: var(--inkt-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.navitem:hover { color: var(--inkt); text-decoration: none; background: var(--papier-2); }
.navitem.actief { color: var(--inkt); border-bottom-color: var(--inkt); font-weight: 600; }
/* Telling naast een navitem (Controle): hoeveel cijfers op een antwoord wachten. */
.navitem .tel { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: var(--r-pil); background: var(--let-op-tint); color: var(--let-op); font-size: 11.5px; font-weight: 600; }
.topbalk-rechts { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.agent-status { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-12); color: var(--inkt-3); white-space: nowrap; }
.stip-status { width: 8px; height: 8px; border-radius: 999px; background: var(--goed); box-shadow: 0 0 0 3px var(--goed-tint); }
.agent-status.oud .stip-status, .bijgewerkt-telefoon.oud .stip-status { background: var(--let-op); box-shadow: 0 0 0 3px var(--let-op-tint); }
.weergave { display: inline-flex; border: 1px solid var(--lijn-2); border-radius: var(--r-pil); overflow: hidden; }
.weergave button { padding: 4px 11px; font-size: var(--t-12); font-weight: 600; color: var(--inkt-3); background: var(--papier); white-space: nowrap; }
.weergave button + button { border-left: 1px solid var(--lijn); }
.weergave button.actief { background: var(--inkt); color: var(--papier); cursor: default; }
.weergave button:not(.actief):hover { background: var(--papier-2); color: var(--inkt); }
.gebruiker { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-13); color: var(--inkt-2); }
.avatar { width: 28px; height: 28px; border-radius: 999px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: var(--t-13); }
.gebruiker:hover .gebruiker-naam, .gebruiker.actief .gebruiker-naam { text-decoration: underline; text-underline-offset: 3px; }
.uitloggen-form { display: contents; }
.uitloggen { font-size: var(--t-12); color: var(--inkt-3); padding: 0; }
.uitloggen:hover { color: var(--inkt); }

/* ---- Pagina ------------------------------------------------------------- */
main { flex: 1; width: 100%; max-width: var(--breedte); margin: 0 auto; padding: 24px var(--gutter) 56px; }
main.breed { max-width: 1600px; }
.paginakop { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.paginakop .intro { color: var(--inkt-3); font-size: var(--t-14); margin-top: 4px; }
.bijgewerkt-telefoon { display: none; align-items: center; gap: 7px; margin-top: 6px; font-size: var(--t-12); color: var(--inkt-3); }
.paginakop .rechts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.voet { display: flex; gap: 24px; padding: 14px var(--gutter); border-top: 1px solid var(--lijn); font-size: var(--t-12); color: var(--inkt-4); }

/* Rasters: kolommen die op smalle schermen onder elkaar gaan */
.raster { display: grid; gap: 20px; align-items: start; }
.raster > * { min-width: 0; }
.raster.twee { grid-template-columns: 1fr 1fr; }
.raster.drie { grid-template-columns: repeat(3, 1fr); }
.raster.hoofd-zij { grid-template-columns: minmax(0, 1fr) 360px; }
.raster.zij-hoofd { grid-template-columns: 360px minmax(0, 1fr); }
.kolom { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Secties: standaard géén kader. Een sectie heeft een kop met titel, uitleg en acties. */
.sectie { min-width: 0; }
.sectiekop { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--lijn); flex-wrap: wrap; }
.sectiekop h2 { font-size: var(--t-16); }
.sectiekop .uitleg { font-size: var(--t-13); color: var(--inkt-3); }
.sectiekop .rechts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Kaart: alleen voor wat echt een object is (kerncijfer, grafiek, formulier) */
.kaart { background: var(--papier); border: 1px solid var(--lijn); border-radius: var(--r-l); }
.kaart.vlak { background: var(--papier-2); border-color: transparent; }
.kaart-inhoud { padding: 16px 18px; }
.leeg { color: var(--inkt-3); font-size: var(--t-13); padding: 24px 16px; text-align: center; }

/* ---- Tekst en cijfers --------------------------------------------------- */
.label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--inkt-3); }
.cijfer { font-variant-numeric: tabular-nums lining-nums; font-weight: 600; letter-spacing: -0.01em; }
.cijfer .eenheid { font-weight: 500; color: var(--inkt-3); font-size: .62em; margin-left: .25em; letter-spacing: 0; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--t-13); white-space: nowrap; }
.delta svg { width: 9px; height: 9px; fill: currentColor; }
.delta.op { color: var(--op); } .delta.neer { color: var(--neer); } .delta.gelijk { color: var(--inkt-3); }
.delta.gelijk svg { display: none; }
.delta small { font-weight: 400; color: var(--inkt-3); font-size: var(--t-12); margin-left: 3px; }
.delta.klein { font-size: var(--t-12); }
/* Productstip en productkleur als context (--kleur op elk element met de klasse) */
.pinda { --kleur: var(--pinda); --kleur-tekst: var(--pinda-tekst); --tint: var(--pinda-tint); }
.amandel { --kleur: var(--amandel); --kleur-tekst: var(--amandel-tekst); --tint: var(--amandel-tint); }
.cashew { --kleur: var(--cashew); --kleur-tekst: var(--cashew-tekst); --tint: var(--cashew-tint); }
.valuta { --kleur: var(--valuta); --kleur-tekst: var(--valuta-tekst); --tint: var(--valuta-tint); }
.stip { display: inline-block; width: 10px; height: 10px; border-radius: 999px; background: var(--kleur, var(--inkt-4)); flex-shrink: 0; vertical-align: -1px; }
.productnaam { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--kleur-tekst, var(--inkt)); }

/* ---- Chips ---------------------------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; line-height: 1.3; padding: 2px 8px; border-radius: var(--r-pil); white-space: nowrap; background: var(--papier-3); color: var(--inkt-2); }
.chip.stil { background: var(--papier-2); color: var(--inkt-3); }
.chip.ok { background: var(--goed-tint); color: var(--goed); }
.chip.fout { background: var(--fout-tint); color: var(--fout); }
.chip.aandacht { background: var(--let-op-tint); color: var(--let-op); }
.chip.bezig, .chip.info { background: var(--accent-tint); color: var(--accent); }
.chip.product { background: var(--tint); color: var(--kleur-tekst); }
.chip.product .stip { width: 7px; height: 7px; }
.chip.lijn { background: transparent; border: 1px solid var(--lijn-2); color: var(--inkt-2); font-weight: 500; }

/* ---- Knoppen ------------------------------------------------------------ */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; font-size: var(--t-13); font-weight: 600; line-height: 1.2; border-radius: var(--r-m); border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap; min-height: 36px; }
.knop:hover { background: var(--accent-donker); border-color: var(--accent-donker); text-decoration: none; }
.knop.stil { background: var(--papier); color: var(--inkt); border-color: var(--lijn-2); }
.knop.stil:hover { background: var(--papier-2); }
.knop.klein { padding: 5px 10px; min-height: 30px; font-size: var(--t-12); }
.knop.gevaar { background: var(--papier); color: var(--neer); border-color: var(--lijn-2); }
.knop.gevaar:hover { background: var(--neer-tint); }
.knop:disabled { opacity: .5; cursor: not-allowed; }
.knop svg.ic { width: 15px; height: 15px; }
.link { color: var(--accent); font-weight: 600; font-size: var(--t-13); padding: 0; }
.link.doel { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; margin: -4px 0; border-radius: var(--r-s); } /* ruim klikdoel in lijsten (Fitts) */
.link:hover { text-decoration: underline; }
.knoppen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Segmentkeuze (periode, eenheid): de gekozen staat is donker, dus altijd zichtbaar */
.segment { display: inline-flex; border: 1px solid var(--lijn-2); border-radius: var(--r-m); overflow: hidden; background: var(--papier); }
.segment > a, .segment > button { padding: 6px 12px; font-size: var(--t-13); font-weight: 500; color: var(--inkt-2); text-decoration: none; white-space: nowrap; border-right: 1px solid var(--lijn); background: var(--papier); min-height: 32px; display: inline-flex; align-items: center; }
.segment > :last-child { border-right: none; }
.segment > a:hover, .segment > button:hover { background: var(--papier-2); color: var(--inkt); text-decoration: none; }
.segment > .actief, .segment > .actief:hover { background: var(--inkt); color: var(--papier); font-weight: 600; }
.kiezer { display: flex; flex-direction: column; gap: 4px; }
.kiezer > .label { padding-left: 2px; }
/* Tabs binnen een pagina */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--lijn); margin-bottom: 16px; }
.tabs a { padding: 8px 12px; font-size: var(--t-14); font-weight: 500; color: var(--inkt-3); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.tabs a:hover { color: var(--inkt); }
.tabs a.actief { color: var(--inkt); border-bottom-color: var(--inkt); font-weight: 600; }
.tabs a .tel { color: var(--inkt-4); font-weight: 400; margin-left: 4px; font-variant-numeric: tabular-nums; }
/* Filterpillen */
.filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.filters a, .filters button { font-size: var(--t-12); font-weight: 500; color: var(--inkt-2); padding: 4px 10px; border-radius: var(--r-pil); border: 1px solid var(--lijn-2); background: var(--papier); text-decoration: none; }
.filters a:hover, .filters button:hover { background: var(--papier-2); text-decoration: none; }
.filters a.actief, .filters button.actief { background: var(--inkt); color: var(--papier); border-color: var(--inkt); font-weight: 600; }

/* ---- Tabellen ----------------------------------------------------------- */
.tabel-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-13); }
th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--inkt-3); padding: 8px 10px; border-bottom: 1px solid var(--lijn-2); white-space: nowrap; background: var(--papier); }
td { padding: 8px 10px; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:hover td { background: var(--papier-2); }
tr:last-child td { border-bottom: none; }

/* ---- Formulieren -------------------------------------------------------- */
input, select, textarea { font: inherit; font-size: var(--t-14); color: var(--inkt); padding: 8px 10px; border: 1px solid var(--lijn-2); border-radius: var(--r-m); background: var(--papier); width: 100%; min-height: 36px; }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; accent-color: var(--accent); margin: 0; }
input[type=file] { padding: 6px; font-size: var(--t-13); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
textarea { resize: vertical; min-height: 72px; line-height: 1.45; }
.veld { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-12); font-weight: 500; color: var(--inkt-3); }
.veld .hint { font-weight: 400; color: var(--inkt-3); }
.formulier { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.formulier .breed { grid-column: 1 / -1; }
form.regel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
form.regel input, form.regel select { width: auto; }
.schakel { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-13); color: var(--inkt-2); cursor: pointer; }
.melding { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-m); font-size: var(--t-13); margin-bottom: 16px; border: 1px solid var(--lijn); background: var(--papier-2); }
.melding.ok { background: var(--goed-tint); color: var(--goed); border-color: transparent; }
.melding.fout { background: var(--fout-tint); color: var(--fout); border-color: transparent; }
.melding.info { background: var(--accent-tint); color: var(--accent); border-color: transparent; }

/* ---- Uitklappen --------------------------------------------------------- */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.chevron { width: 16px; height: 16px; color: var(--inkt-4); transition: transform .15s ease-out; flex-shrink: 0; }
details[open] > summary .chevron, .open > .chevron, .open .chevron.mee { transform: rotate(180deg); }

/* ---- Kerncijfer (kpi) --------------------------------------------------- */
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; min-width: 0; }
.kpi .kop { display: flex; align-items: center; gap: 8px; font-size: var(--t-13); font-weight: 600; color: var(--inkt-2); }
.kpi .kop .stil { font-weight: 400; }
.kpi .cijfer { font-size: var(--t-26); line-height: 1.1; }
.kpi .sub { font-size: var(--t-12); color: var(--inkt-3); }
.kpi .sub a { color: var(--inkt-3); text-decoration: underline; text-decoration-color: var(--lijn-2); text-underline-offset: 2px; }
.kpi .sub a:hover { color: var(--accent); }

/* ---- Grafieken (gedeeld) ------------------------------------------------ */
.grafiek svg { display: block; width: 100%; overflow: visible; font-family: var(--f-ui); }
.grafiek svg text { font-size: 11.5px; fill: var(--inkt-3); font-variant-numeric: tabular-nums; }
.grafiek svg .as-titel { fill: var(--inkt-4); font-weight: 500; }
.grafiek svg .grid line { stroke: var(--lijn); stroke-width: 1; }
.grafiek svg .basis line { stroke: var(--lijn-2); stroke-width: 1; }
.grafiek svg .lijn { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafiek svg .lijn.streep { stroke-dasharray: 6 4; }
.grafiek svg .lijn.gat { stroke: var(--inkt-4); stroke-width: 1; stroke-dasharray: 2 4; }
.grafiek svg .gedimd { opacity: .2; }
.grafiek svg .kruis line { stroke: var(--inkt-4); stroke-width: 1; stroke-dasharray: 3 3; }
.grafiek svg .eind text .naam { fill: var(--inkt); font-weight: 600; }
.grafiek svg .eind text .w { fill: var(--inkt-3); }
.grafiek svg .eind line { stroke: var(--inkt-4); stroke-width: 1; stroke-dasharray: 2 3; }
.spark { display: block; overflow: visible; }
.spark .lijn { fill: none; stroke: var(--kleur, var(--reeks-1)); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark .vlak { fill: var(--kleur, var(--reeks-1)); opacity: .08; }
.spark .eindpunt { fill: var(--kleur, var(--reeks-1)); }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--t-12); color: var(--inkt-2); }
.legenda .sleutel { display: inline-block; width: 12px; height: 3px; border-radius: 2px; background: var(--reeks, var(--inkt-3)); vertical-align: 3px; margin-right: 6px; }

/* ---- Feedback (knop in de balk, paneel als kaart; gedrag in feedback.js) --- */
.feedback-knop { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px; margin: 0 -8px 0 -4px; border-radius: var(--r-s); font-size: var(--t-13); font-weight: 500; color: var(--accent); white-space: nowrap; }
.feedback-knop:hover { background: var(--accent-tint); }
.feedback-knop[aria-expanded=true] { background: var(--accent-tint); color: var(--accent-donker); }
.feedback-paneel { position: fixed; top: 64px; right: var(--gutter); z-index: 30; width: 400px; max-width: calc(100vw - 2 * var(--gutter)); padding: 16px 18px; box-shadow: var(--schaduw); border-color: var(--lijn-2); }
.feedback-paneel form { display: flex; flex-direction: column; gap: 12px; }
.feedback-paneel .fb-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.feedback-paneel .fb-kop h2 { font-size: var(--t-16); }
.feedback-paneel .fb-sluit { display: inline-flex; width: 32px; height: 32px; margin: -6px -8px -6px 0; align-items: center; justify-content: center; border-radius: var(--r-s); color: var(--inkt-3); }
.feedback-paneel .fb-sluit:hover { background: var(--papier-2); color: var(--inkt); }
.feedback-paneel .veld { color: var(--inkt-2); }
.feedback-paneel textarea { min-height: 96px; }
.feedback-paneel .schakel { align-items: flex-start; }
.feedback-paneel .schakel input { margin-top: 3px; }
.feedback-paneel .fb-melding.melding { margin: 0; }
.feedback-paneel.klaar .veld, .feedback-paneel.klaar .schakel, .feedback-paneel.klaar .knoppen { display: none; } /* na versturen blijft alleen het bedankje over */
.feedback-paneel .knoppen .knop { min-width: 110px; }
@media (max-width: 700px) {
  .feedback-knop { padding: 0 6px; min-height: 40px; margin: 0 -6px 0 0; }
  .feedback-paneel { top: 12px; left: 12px; right: 12px; width: auto; max-width: none; }
  .feedback-paneel .knoppen .knop { flex: 1; min-height: 40px; }
}

/* ---- Inloggen ----------------------------------------------------------- */
body.inlog { display: grid; place-items: center; background: var(--papier-2); padding: 24px; }
.inlogkaart { width: 100%; max-width: 380px; background: var(--papier); border: 1px solid var(--lijn); border-radius: var(--r-l); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.inlogkaart h1 { font-size: var(--t-20); }
.inlogkaart form { display: flex; flex-direction: column; gap: 12px; }

/* ---- Responsief ------------------------------------------------------------ */
/* Op een laptop (1280) past de beheerbalk niet met zeven navitems, "bijgewerkt ma 14 sep 16:38", de schakelaar, ? en Feedback:
   tot 1500 breed gaat de tekst bij de stip weg (de stip houdt zijn title), dan de ondertitel van het merk. */
@media (max-width: 1500px) { .agent-status .tekst { display: none; } .merk-sub { display: none; } .topbalk { gap: 20px; } .topbalk-rechts { gap: 12px; } }
@media (max-width: 1100px) { .raster.hoofd-zij, .raster.zij-hoofd { grid-template-columns: 1fr; } .raster.drie { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .agent-status .tekst { display: none; } .gebruiker-naam { display: none; } .topbalk { gap: 16px; } .navitem { padding: 0 9px; } }
@media (max-width: 700px) {
  :root { --gutter: 16px; }
  main { padding-top: 16px; }
  /* De balk op een telefoon: twee regels van elk 44px. Regel 1 = merk, (schakelaar,) ?, Feedback, avatar;
     regel 2 = de nav als één schuifregel (de actieve pagina wordt in beeld geschoven, zie het script in html.ts).
     Niet plakkerig: elke pixel is voor de inhoud. Naam en uitloggen staan op /account, waar de avatar heen gaat. */
  .topbalk { position: relative; top: auto; height: auto; flex-wrap: wrap; padding: 0 var(--gutter); gap: 0 6px; }
  .merk { min-height: 44px; align-items: center; margin-right: auto; }
  .merk-sub { display: none; }
  .hoofdnav { order: 3; flex: 0 0 auto; width: calc(100% + 2 * var(--gutter)); height: 44px; flex-wrap: nowrap; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 calc(var(--gutter) - 10px); }
  .hoofdnav::-webkit-scrollbar { display: none; }
  .navitem { padding: 0 10px; font-size: var(--t-13); white-space: nowrap; flex-shrink: 0; margin-bottom: 0; }
  /* Een vervaagde rand rechts zolang er nog navitems buiten beeld staan (Zeigarnik: laat zien dat er meer is). */
  .topbalk::before, .topbalk::after { content: ""; position: absolute; bottom: 0; width: 36px; height: 44px; pointer-events: none; opacity: 0; transition: opacity .15s; }
  .topbalk::after { right: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--papier) 70%); }
  .topbalk::before { left: 0; background: linear-gradient(270deg, rgba(255, 255, 255, 0), var(--papier) 70%); }
  .topbalk.nav-meer::after, .topbalk.nav-eerder::before { opacity: 1; }
  .topbalk-rechts { margin-left: 0; gap: 2px; flex-wrap: nowrap; min-height: 44px; }
  .agent-status, .gebruiker-naam, .uitloggen-form { display: none; }
  .gebruiker { min-width: 40px; min-height: 40px; justify-content: center; gap: 0; margin-right: -6px; border-radius: var(--r-s); }
  .rondleiding-knop { margin-right: 2px; }
  /* De weergaveschakelaar: alleen de knop naar de andere weergave; de huidige staat is al te zien aan de pagina. */
  .weergave { margin-right: 4px; }
  .weergave button { min-height: 36px; padding: 0 10px; font-size: 11px; white-space: nowrap; }
  .weergave button.actief { display: none; }
  .weergave button + button { border-left: 0; }
  /* De stand van de agents hoort bij het Overzicht; op een telefoon staat hij onder de titel in plaats van als losse stip in de balk. */
  .bijgewerkt-telefoon { display: inline-flex; }
  .raster.twee, .raster.drie { grid-template-columns: 1fr; }
  .formulier { grid-template-columns: 1fr; }
  h1 { font-size: 22px; }
  .kpi .cijfer { font-size: 22px; }
  .voet { flex-wrap: wrap; gap: 6px 16px; }
}
@media print { .topbalk, .voet, .weergave, .feedback-paneel { display: none !important; } main { padding: 0; max-width: none; } }

/* ---- Rondleiding (static/rondleiding.js + driver.js) --------------------------
   De "?" in de balk en de popover van driver.js in de taal van de app: papier, inkt, één accent,
   IBM Plex, 4px-raster, klikdoelen 32px (40 op telefoon). De regels staan op .nux-rondleiding zodat
   ze winnen van driver.css, dat later wordt geladen. Geen zwaardere schaduw dan een kaart. */
.rondleiding-knop { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--lijn-2); border-radius: 50%; font-size: var(--t-14); font-weight: 600; line-height: 1; color: var(--accent); background: var(--papier); }
.rondleiding-knop:hover { background: var(--accent-tint); border-color: var(--accent); }
@media (max-width: 700px) { .rondleiding-knop { width: 40px; height: 40px; } }
.driver-popover.nux-rondleiding { font-family: var(--f-ui); color: var(--inkt); background: var(--papier); border: 1px solid var(--lijn); border-radius: var(--r-l); box-shadow: var(--schaduw); min-width: 0; width: 320px; max-width: calc(100vw - 32px); padding: 16px; }
.driver-popover.nux-rondleiding .driver-popover-arrow { border-color: var(--papier); }
.driver-popover.nux-rondleiding .driver-popover-arrow-side-left { border-left-color: var(--papier); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; }
.driver-popover.nux-rondleiding .driver-popover-arrow-side-right { border-right-color: var(--papier); border-top-color: transparent; border-left-color: transparent; border-bottom-color: transparent; }
.driver-popover.nux-rondleiding .driver-popover-arrow-side-top { border-top-color: var(--papier); border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; }
.driver-popover.nux-rondleiding .driver-popover-arrow-side-bottom { border-bottom-color: var(--papier); border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; }
.driver-popover.nux-rondleiding .driver-popover-title { font-family: var(--f-ui); font-size: var(--t-16); font-weight: 600; line-height: 1.25; color: var(--inkt); }
.driver-popover.nux-rondleiding .driver-popover-title + .driver-popover-description { margin-top: 8px; }
.driver-popover.nux-rondleiding .driver-popover-description { font-size: var(--t-14); line-height: 1.45; color: var(--inkt-2); }
.driver-popover.nux-rondleiding .driver-popover-footer { margin-top: 16px; gap: 8px; }
.driver-popover.nux-rondleiding .driver-popover-progress-text { font-size: var(--t-12); color: var(--inkt-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.driver-popover.nux-rondleiding .driver-popover-navigation-btns { gap: 4px; }
.driver-popover.nux-rondleiding .driver-popover-navigation-btns button + button { margin-left: 0; }
.driver-popover.nux-rondleiding .driver-popover-footer-btn { font-family: var(--f-ui); font-size: var(--t-13); font-weight: 500; line-height: 1; min-height: 32px; padding: 0 12px; border-radius: var(--r-s); border: 1px solid transparent; background: none; color: var(--inkt-2); text-shadow: none; }
.driver-popover.nux-rondleiding .driver-popover-footer-btn:hover { background: var(--papier-2); color: var(--inkt); }
.driver-popover.nux-rondleiding .driver-popover-footer-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.driver-popover.nux-rondleiding .driver-popover-next-btn { background: var(--accent); color: var(--papier); border-color: var(--accent); font-weight: 600; }
.driver-popover.nux-rondleiding .driver-popover-next-btn:hover { background: var(--accent-donker); color: var(--papier); }
.driver-popover.nux-rondleiding .driver-popover-overslaan { color: var(--inkt-3); margin-right: 4px; }
.driver-popover.nux-rondleiding .driver-popover-close-btn { display: none; }
@media (max-width: 700px) { .driver-popover.nux-rondleiding .driver-popover-footer-btn { min-height: 40px; padding: 0 14px; } }
.driver-overlay { transition: none; }