/*
 * Makelaarsdash, ontwerp v5: de opbouw van Brixio (axiops-platform app.css:
 * IBM Plex Sans, 13px, vlakke panelen met randen, één accentkleur, compacte
 * rijen) in de kleuren en vormen van Realworks (realworks.nl: blauw #0056A3,
 * marineblauw #131946, lichtblauw #98C4F5; pilvormige knoppen, afgeronde
 * panelen) met twee 21st.dev-componenten als opbouw:
 * "Records Table" (theshanelevine, id 23604: zichtbare rasterlijnen, vaste
 * eerste kolom, sorteerknop in de kop, rekenregel onderaan) en
 * "InlineAnalyticsTable" (ruixen.ui, id 7475: kleine voortgangsbalk in de cel
 * in plaats van losse grafiektegels). Geen kleurverloop, gloed, blur of
 * ronde pillen. Geen build-stap en een strikte CSP, dus gewone CSS en
 * server-SVG; lettertype lokaal (fonts.css).
 */

:root {
  /* Oppervlakken en tekst */
  --grond: #F2F6FB;
  --kaart: #FFFFFF;
  --kaart-2: #F7FAFD;
  --inkt: #131946;
  --inkt-2: #2B3460;
  --gedempt-tekst: #56607F;
  --vaag: #6A7391;
  --rand: #E1E9F3;
  --rand-sterk: #C9D6E6;
  --zweef: #EEF4FB;
  --navy: #131946;

  /* Eén accent (Realworks-blauw), plus de vaste statusset */
  --accent: #0056A3;
  --accent-donker: #00427E;
  --accent-tint: #0056A314;
  --accent-zacht: #E0ECF9;
  --licht-blauw: #98C4F5;
  --goed: #24A148; --goed-bg: #EAF4EE; --goed-inkt: #14532D;
  --let: #B28600;  --let-bg: #FBF3E2;  --let-inkt: #946200;
  --fout: #DA1E28; --fout-bg: #FBEDF0; --fout-inkt: #991B1B;
  --info: #1F5FA8; --info-bg: #E8EFF7;
  --neutraal-bg: #E8ECF0; --neutraal-inkt: #2A3B4D;

  /* Grafieken: dit jaar blauw, vorig jaar lichtblauw, doel als marineblauwe stippellijn */
  --reeks-1: #0056A3;
  --reeks-2: #98C4F5;
  --doel: #131946;

  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  /* Vormen van Realworks: afgeronde panelen, pilvormige knoppen en labels */
  --r: 8px;
  --r-paneel: 14px;
  --r-pil: 999px;
  --rij-h: 30px;
  --veld-h: 30px;
  --knop-h: 30px;
  --schaduw-zwevend: 0 8px 28px rgba(19, 25, 70, .14);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grond: #0C1033;
    --kaart: #131946;
    --kaart-2: #182055;
    --inkt: #E8EEF8;
    --inkt-2: #C4D0E6;
    --gedempt-tekst: #9AA8C6;
    --vaag: #7F8CAD;
    --rand: #242C66;
    --rand-sterk: #2F3878;
    --zweef: #1B2459;
    --navy: #98C4F5;
    --accent: #7FB3F0;
    --accent-donker: #98C4F5;
    --accent-tint: #7FB3F026;
    --accent-zacht: #1D2A63;
    --goed: #5BBE7C; --goed-bg: #16281D; --goed-inkt: #9FE0B4;
    --let: #D8AC42;  --let-bg: #2B2413;  --let-inkt: #E8C878;
    --fout: #F0757D; --fout-bg: #2E1A1D; --fout-inkt: #F3A6AB;
    --info: #6BA6E8; --info-bg: #17263A;
    --neutraal-bg: #26303B; --neutraal-inkt: #C6CED7;
    --reeks-1: #7FB3F0;
    --reeks-2: #3C5A9A;
    --doel: #E8EEF8;
    --schaduw-zwevend: 0 8px 28px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 13px/1.45 var(--font); color: var(--inkt); background: var(--grond); -webkit-font-smoothing: antialiased; }
a { color: var(--inkt-2); text-decoration: underline; text-decoration-color: var(--rand-sterk); text-underline-offset: 3px; }
a:hover { color: var(--inkt); text-decoration-color: currentColor; }
h1 { font-size: 17px; line-height: 1.25; margin: 0; font-weight: 600; }
h2 { font-size: 13px; line-height: 1.35; margin: 0; font-weight: 600; }
p { margin: 0; }
.gedempt { color: var(--gedempt-tekst); }
.klein { font-size: 12px; }
.getal { font-variant-numeric: tabular-nums; }
.mono { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icoon { width: 16px; height: 16px; flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- App-shell: kopbalk boven, zijbalk links ---------- */

.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: 44px 1fr; grid-template-areas: "kop kop" "zij hoofd"; min-height: 100vh; }
.balk {
  grid-area: kop; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 0 12px 0 8px; background: var(--kaart); border-bottom: 1px solid var(--rand-sterk);
}
.balk__merk { display: flex; align-items: baseline; width: 200px; min-width: 0; padding-left: 4px; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--inkt); }
.balk__merk .punt-merk, .inlog__merk .punt-merk { color: var(--accent); }
.balk__pad { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--gedempt-tekst); }
.balk__pad .icoon { display: none; }
.balk__pad span.sep { color: var(--rand-sterk); }
.balk__pad span.kantoor { white-space: nowrap; }
.balk__pad b { font-weight: 600; color: var(--inkt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balk__rechts { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.menu-knop { display: inline-flex; }

.zijbalk {
  grid-area: zij; position: sticky; top: 44px; height: calc(100vh - 44px); display: flex; flex-direction: column;
  background: var(--kaart); border-right: 1px solid var(--rand-sterk); padding: 4px 8px 8px; overflow-y: auto;
}
.zijbalk__groep { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--vaag); padding: 14px 8px 4px; }
.zijbalk__nav { display: grid; gap: 0; }
.zijbalk__nav a {
  display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 8px; border-radius: var(--r);
  text-decoration: none; color: var(--gedempt-tekst); font-weight: 500; 
}
.zijbalk__nav a .icoon { width: 15px; height: 15px; }
.zijbalk__nav a:hover { background: var(--zweef); color: var(--inkt); }
.zijbalk__nav a[aria-current="page"] { background: var(--accent-zacht); color: var(--accent); font-weight: 600; }

/* Koppelingsstatus onderin: een feitelijke regel, geen kaartje. */
.zijbalk__kaartje { margin-top: auto; padding: 10px 8px; border-top: 1px solid var(--rand); display: grid; gap: 2px; font-size: 12px; }
.zijbalk__kaartje .mini { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--vaag); }
.zijbalk__kaartje b { font-size: 12px; font-weight: 600; color: var(--goed-inkt); }
.zijbalk__kaartje.fout b { color: var(--fout); }
.zijbalk__kaartje.nooit b { color: var(--gedempt-tekst); }
.zijbalk__kaartje p { color: var(--gedempt-tekst); line-height: 1.4; }
.zijbalk__kaartje a { font-weight: 500; width: fit-content; margin-top: 2px; }
.zijbalk__voet { display: flex; align-items: center; gap: 8px; padding: 10px 8px 0; border-top: 1px solid var(--rand); }
.zijbalk__nav:last-of-type + .zijbalk__voet { margin-top: auto; }
.zijbalk__wie { min-width: 0; flex: 1; line-height: 1.3; }
.zijbalk__wie b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zijbalk__wie span { display: block; font-size: 11px; color: var(--gedempt-tekst); }
.zijbalk__voet form { margin: 0; }
.zijbalk__copy { font-size: 10px; color: var(--vaag); padding: 6px 8px 0; }

.hoofd { grid-area: hoofd; min-width: 0; }
.inhoud { width: 100%; padding: 16px 24px 32px; display: grid; gap: 12px; align-content: start; }

/* ---------- Paginakop ---------- */

.paginakop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 52px; padding: 8px 16px; background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--r-paneel); }
.paginakop p { margin-top: 2px; color: var(--gedempt-tekst); font-size: 12px; max-width: 80ch; }
.paginakop__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Tabs met onderstreping in plaats van een segmentpil. */
.segment { display: inline-flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--rand); }
.segment a, .segment button {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; margin-bottom: -1px;
  font: 500 12px/1 var(--font); color: var(--gedempt-tekst); text-decoration: none; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
}
.segment a:hover { color: var(--inkt); }
.segment [aria-current="page"] { color: var(--inkt); font-weight: 600; border-bottom-color: var(--accent); }

/* ---------- Paneelraster met gedeelde randen ---------- */

.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.cel { min-width: 0; margin: 0; padding: 12px 16px; background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--r-paneel); display: flex; flex-direction: column; gap: 10px; }
.cel--3 { grid-column: span 3; }
.cel--4 { grid-column: span 4; }
.cel--5 { grid-column: span 5; }
.cel--6 { grid-column: span 6; }
.cel--7 { grid-column: span 7; }
.cel--8 { grid-column: span 8; }
.cel--12 { grid-column: span 12; }
.cel--vlak { padding: 0; gap: 0; }
.cel__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cel__kop h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cel__kop p { font-size: 12px; color: var(--gedempt-tekst); margin-top: 1px; }
.cel--vlak > .cel__kop { padding: 10px 16px; border-bottom: 1px solid var(--rand); }

.kaart { background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--r-paneel); min-width: 0; }
.kaart__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 8px 16px; border-bottom: 1px solid var(--rand); }
.kaart__kop p { margin-top: 1px; font-size: 12px; color: var(--gedempt-tekst); }
.kaart__inhoud { padding: 12px 16px 16px; }
.kaart__inhoud--vlak { padding: 0; }
.kaart__voet { padding: 8px 16px; border-top: 1px solid var(--rand); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--kaart-2); }
.raster { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--zij { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.raster--instellingen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.stapel { display: grid; gap: 12px; }

/* ---------- Kerncijfers: één strook met scheidingslijnen ---------- */

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--r-paneel); }
.kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { padding: 10px 16px 12px; display: grid; gap: 4px; align-content: start; border: 0; border-right: 1px solid var(--rand); border-radius: 0; background: none; }
.kpi:last-child { border-right: 0; }
.kpi__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--gedempt-tekst); }
.kpi__kop .icoon { display: none; }
.kpi__midden { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.kpi__waarde { font-size: 22px; line-height: 1.15; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi__hint { font-size: 12px; color: var(--gedempt-tekst); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.kpi__hint a { color: var(--inkt-2); }
.trend { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; font-variant-numeric: tabular-nums; }
.trend .icoon { width: 12px; height: 12px; }
.trend--goed { color: var(--goed-inkt); }
.trend--slecht { color: var(--fout); }
.pil { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 5px; border-radius: var(--r-pil); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--goed-bg); color: var(--goed-inkt); }
.pil .icoon { width: 11px; height: 11px; }
.pil--slecht { background: var(--fout-bg); color: var(--fout-inkt); }

/* ---------- Grafieken: vlak, met eenheid, legenda en bron ---------- */

.legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 11px; color: var(--gedempt-tekst); }
.legenda li { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--reeks-1); }
.legenda i.oranje, .legenda i.vorig { background: var(--reeks-2); }
.legenda i.doel { width: 14px; height: 0; background: none; border-top: 1.5px dashed var(--doel); }
.grafiek { width: 100%; height: auto; max-height: 300px; display: block; overflow: visible; }
.grafiek .raster-lijn { stroke: var(--rand); stroke-width: 1; shape-rendering: crispEdges; }
.grafiek .as { stroke: var(--rand-sterk); stroke-width: 1; shape-rendering: crispEdges; }
.grafiek text { font: 11px var(--font); fill: var(--gedempt-tekst); font-variant-numeric: tabular-nums; }
.grafiek .staaf { fill: var(--reeks-1); }
.grafiek .staaf--vorig { fill: var(--reeks-2); }
.grafiek .staaf-top { display: none; }
.grafiek .doel { stroke: var(--doel); stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; }
.grafiek .trap { fill: none; stroke-width: 2; stroke-linejoin: miter; }
.grafiek .trap--teal, .grafiek .trap--nu { stroke: var(--reeks-1); }
.grafiek .trap--oranje, .grafiek .trap--vorig { stroke: var(--reeks-2); stroke-dasharray: 4 3; }
.grafiek .stip--teal { fill: var(--reeks-1); }
.grafiek .stip--oranje { fill: var(--reeks-2); }
.grafiek .kolom { fill: transparent; }
.grafiek g.punt:hover .kolom { fill: var(--zweef); }
.grafiek .tip { opacity: 0; pointer-events: none; }
.grafiek g.punt:hover .tip { opacity: 1; }
.grafiek .tip rect { fill: var(--kaart); stroke: var(--rand-sterk); }
.grafiek .tip text { fill: var(--gedempt-tekst); font-size: 11px; }
.grafiek .tip text.w { fill: var(--inkt); font-weight: 600; }
.bron { font-size: 11px; color: var(--vaag); }
details.tabel-uit summary { cursor: pointer; font-size: 12px; color: var(--gedempt-tekst); width: fit-content; }
details.tabel-uit[open] summary { margin-bottom: 8px; }

/* ---------- Voortgang in de cel (InlineAnalyticsTable) ---------- */

.voortgang { display: flex; align-items: center; gap: 8px; }
.voortgang svg { flex: 1 1 0; width: 0; height: 6px; display: block; min-width: 40px; }
.voortgang__bak { fill: var(--neutraal-bg); }
.voortgang__vul { fill: var(--reeks-1); }
.voortgang__vul--goed { fill: var(--goed); }
.voortgang__vul--let { fill: var(--let); }
.voortgang__doel { stroke: var(--inkt); stroke-width: 1.5; }
.voortgang span { font-size: 12px; color: var(--gedempt-tekst); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }

.makelaar__naam { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; min-width: 0; }
.makelaar { display: grid; gap: 6px; }
.makelaar__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.makelaar__meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--gedempt-tekst); font-variant-numeric: tabular-nums; }

/* Activiteitenlijst: scanbaar, zonder icoonblokken. */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 12px; align-items: baseline; padding: 7px 16px; border-top: 1px solid var(--rand); }
.feed li:first-child { border-top: 0; }
.feed__icoon { display: none; }
.feed__tekst { min-width: 0; flex: 1; line-height: 1.35; }
.feed__tekst a { font-weight: 500; text-decoration: none; color: var(--inkt); }
.feed__tekst a:hover { text-decoration: underline; }
.feed__tekst span { display: block; font-size: 11px; color: var(--gedempt-tekst); margin-top: 1px; }
.feed__bedrag { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.rustig { flex: 1; display: grid; align-content: center; gap: 2px; padding: 12px 0; color: var(--gedempt-tekst); font-size: 12px; }
.rustig .icoon { display: none; }
.rustig b { color: var(--goed-inkt); font-weight: 600; font-size: 13px; }

/* Werkbak: uitzonderingen met aantal, direct door naar de gefilterde lijst. */
.openlijst { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rand); border-radius: var(--r-paneel); }
.openlijst li + li { border-top: 1px solid var(--rand); }
.openlijst a { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 34px; padding: 0 12px; text-decoration: none; color: var(--inkt); }
.openlijst a:hover { background: var(--zweef); }
.openlijst b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--let-inkt); }

.avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; }
.avatar--klein { width: 22px; height: 22px; font-size: 10px; }

/* ---------- Statuslabels: rechthoekig, kleur alleen met betekenis ---------- */

.badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px; border-radius: var(--r-pil); font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--neutraal-bg); color: var(--neutraal-inkt); }
.badge--vol { background: var(--navy); color: #fff; }
.badge--zacht { background: var(--neutraal-bg); color: var(--neutraal-inkt); }
.badge--goed { background: var(--goed-bg); color: var(--goed-inkt); }
.badge--let { background: var(--let-bg); color: var(--let-inkt); }
.badge--fout { background: var(--fout-bg); color: var(--fout-inkt); }
.badge--stip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Tabellen (Records Table) ---------- */

.tabelwrap { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
th, td { text-align: left; padding: 0 12px; height: var(--rij-h); border-bottom: 1px solid var(--rand); vertical-align: middle; }
th { height: 32px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gedempt-tekst); white-space: nowrap; background: var(--kaart-2); position: sticky; top: 0; z-index: 2; }
td + td, th + th { border-left: 1px solid var(--rand); }
th:first-child, td:first-child { padding-left: 16px; }
th:last-child, td:last-child { padding-right: 16px; }
tbody tr:hover td { background: var(--zweef); }
tbody tr:last-child td { border-bottom: 0; }
tfoot td { border-bottom: 0; border-top: 1px solid var(--rand-sterk); font-weight: 600; background: var(--kaart-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.mono { font-variant-numeric: tabular-nums; }
td.sterk { font-weight: 500; }
a.rijlink { text-decoration: none; font-weight: 500; color: var(--inkt); }
a.rijlink:hover { text-decoration: underline; }
.tabel--records td:first-child, .tabel--records th:first-child { position: sticky; left: 0; z-index: 1; background: var(--kaart); }
.tabel--records th:first-child { z-index: 3; background: var(--kaart-2); }
.tabel--records tfoot td:first-child { background: var(--kaart-2); }
.tabel--records tbody tr:hover td:first-child { background: var(--zweef); }
.rekenregel td { color: var(--gedempt-tekst); font-weight: 500; }
.rekenregel td b { color: var(--inkt); font-weight: 600; }
.leeg { padding: 28px 16px; text-align: left; color: var(--gedempt-tekst); display: grid; gap: 2px; }
.leeg .icoon { display: none; }
.leeg b { color: var(--inkt); font-weight: 600; }
.tabel--compact th, .tabel--compact td { padding: 0 4px; }
.tabel--compact th:first-child, .tabel--compact td:first-child { padding-left: 16px; white-space: nowrap; }
.tabel--compact th:last-child, .tabel--compact td:last-child { padding-right: 16px; }
.tabel--compact input.cel { width: 56px; padding: 0 5px; font-size: 12px; height: 24px; }

/* ---------- Formulieren ---------- */

label { display: block; font-size: 12px; font-weight: 500; margin-bottom: 4px; color: var(--inkt-2); }
.veld { margin-bottom: 12px; }
.veld__hulp { font-size: 11px; color: var(--gedempt-tekst); margin-top: 4px; }
.velden { display: grid; gap: 0 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], select, textarea {
  font: inherit; font-size: 13px; height: var(--veld-h); padding: 0 8px; width: 100%; color: var(--inkt);
  background: var(--kaart); border: 1px solid var(--rand-sterk); border-radius: var(--r);
}
textarea { height: auto; padding: 6px 8px; resize: vertical; }
select { appearance: none; padding-right: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B7B' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; background-size: 13px; }
input:hover, select:hover, textarea:hover { border-color: var(--gedempt-tekst); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; background: var(--kaart-2); color: var(--vaag); }
input[type=file] { font: inherit; font-size: 13px; max-width: 100%; }
input[type=file]::file-selector-button { font: inherit; font-weight: 500; margin-right: 10px; height: var(--knop-h); padding: 0 12px; border-radius: var(--r); border: 1px solid var(--rand-sterk); background: var(--kaart); color: var(--inkt); cursor: pointer; }
input.smal { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
input.cel { height: 26px; width: 80px; padding: 0 6px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
td:first-child input[type=text] { min-width: 140px; }
td input[type=text] { min-width: 90px; }
td input[type=text].cel { min-width: 0; }
td select { min-width: 72px; height: 26px; }
.rij { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.rij > div { min-width: 0; }
.rij .groei { flex: 1 1 200px; }

.knop {
  font: 500 13px/1 var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--knop-h); padding: 0 12px;
  border-radius: var(--r-pil); border: 1px solid var(--accent); background: var(--accent); color: #fff;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.knop:hover { background: var(--accent-donker); border-color: var(--accent-donker); color: #fff; }
.knop .icoon { width: 14px; height: 14px; }
.knop--rand { background: var(--kaart); color: var(--inkt); border-color: var(--rand-sterk); }
.knop--rand:hover { background: var(--zweef); border-color: var(--gedempt-tekst); color: var(--inkt); }
.knop--spook { background: transparent; color: var(--inkt-2); border-color: transparent; }
.knop--spook:hover { background: var(--zweef); border-color: transparent; color: var(--inkt); }
.knop--klein { height: 24px; padding: 0 8px; font-size: 12px; }
.knop--icoon { width: var(--knop-h); padding: 0; }
.knop--icoon.knop--klein { width: 28px; height: 28px; }
.knop--gevaar { color: var(--fout); }

/* ---------- Meldingen ---------- */

.melding { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: var(--r-paneel); border: 1px solid var(--rand); border-left-width: 3px; background: var(--kaart); font-size: 13px; }
.melding .icoon { margin-top: 1px; width: 15px; height: 15px; }
.melding--ok { border-left-color: var(--goed); color: var(--goed-inkt); background: var(--goed-bg); }
.melding--fout { border-left-color: var(--fout); color: var(--fout-inkt); background: var(--fout-bg); }
.melding--let { border-left-color: var(--let); color: var(--let-inkt); background: var(--let-bg); }
pre.code { margin: 0; padding: 10px 12px; border-radius: var(--r); background: var(--kaart-2); border: 1px solid var(--rand); font: 12px/1.6 var(--mono); overflow-x: auto; }

/* ---------- In verkoop (bord): neutrale kolommen, naam, aantal ---------- */

.bord { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); align-items: stretch; overflow-x: auto; background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--r-paneel); }
.bord__kolom { padding: 0 0 8px; display: grid; gap: 6px; align-content: start; min-width: 220px; border-right: 1px solid var(--rand); background: var(--kaart-2); }
.bord__kolom:last-child { border-right: 0; }
.bord__kop { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 10px; border-bottom: 1px solid var(--rand); background: var(--kaart); }
.bord__kop h2 { font-size: 12px; }
.bord__kolom > .woningkaart, .bord__kolom > .bord__leeg { margin: 0 8px; }
.bord__kolom > .woningkaart:first-of-type { margin-top: 2px; }
.woningkaart { background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--r); padding: 8px 10px; display: grid; gap: 4px; }
.woningkaart:hover { border-color: var(--rand-sterk); }
.woningkaart__adres { font-weight: 600; font-size: 13px; line-height: 1.3; }
.woningkaart__plaats { font-size: 12px; color: var(--gedempt-tekst); }
.woningkaart__voet { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.woningkaart__prijs { font-weight: 600; font-variant-numeric: tabular-nums; }
.woningkaart__makelaar { color: var(--inkt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bord__leeg { font-size: 12px; color: var(--gedempt-tekst); padding: 10px 2px; }

/* ---------- Detail (objectpagina) ---------- */

.feiten { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: 12px; color: var(--gedempt-tekst); }
.feiten span { display: inline-flex; align-items: center; gap: 5px; }
.feiten .icoon { width: 13px; height: 13px; }
.terug { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gedempt-tekst); text-decoration: none; margin-bottom: 4px; }
.terug:hover { color: var(--inkt); }
.terug .icoon { width: 13px; height: 13px; }
.totaal td { font-weight: 600; }

/* ---------- Inloggen ---------- */

.inlog { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--grond); }
.inlog__kaart { width: 100%; max-width: 360px; padding: 24px; display: grid; gap: 16px; }
.inlog__merk { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.inlog__merk .merkteken { display: none; }
.inlog .knop { width: 100%; height: 32px; }

/* Inlogscherm in twee helften. Links alleen de foto, afgerond en zonder
   bewerking. Rechts de opbouw van Apple Account: productnaam in een balk met
   haarlijn, grote gecentreerde titel, hoge velden met het label in het veld,
   een effen blauwe knop. Geen verloop, glas, iconen of beeldmerk.
   Onder 900px alleen het paneel. */
.inlog:has(> .inlog-split) { display: block; place-items: normal; padding: 0; }
.inlog-split { width: 100%; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px; background: var(--kaart); }

.inlog-beeld { position: relative; overflow: hidden; min-height: calc(100dvh - 24px); border-radius: 20px; background: var(--kaart-2); }
.inlog-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }

.inlog-paneel { display: grid; grid-template-rows: auto 1fr auto; min-height: calc(100dvh - 24px); padding: 0 48px; }
/* Balk, formulier en voet delen één kolom, zodat alle linker- en rechterkanten op dezelfde lijn staan. */
.inlog-paneel > * { width: 100%; max-width: 380px; justify-self: center; }
.inlog-balk { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.inlog-balk__naam { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--inkt); text-decoration: none; }
.inlog-balk__link { font-size: 13px; color: var(--gedempt-tekst); text-decoration: none; }
.inlog-balk__link:hover { color: var(--inkt); }

.inlog-split .inlog__kaart { align-self: center; justify-self: center; width: 100%; max-width: 380px; padding: 48px 0 72px; gap: 32px; border: 0; background: none; }
.inlog__kop { text-align: left; }
.inlog__kop .inlog__datum { font-variant-numeric: tabular-nums; margin: 0 0 10px; font-size: 14px; font-weight: 500; color: var(--gedempt-tekst); }
.inlog__kop h1 { font-size: 44px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; margin: 0; }
.inlog__kop p { margin: 12px 0 0; font-size: 17px; line-height: 1.45; color: var(--inkt-2); }

.zweefveld { position: relative; margin-bottom: 12px; }
.zweefveld input { width: 100%; height: 56px; padding: 22px 16px 8px; font: 400 16px/1.2 var(--font); color: var(--inkt); background: var(--zweef); border: 1px solid transparent; border-radius: 12px; box-shadow: none; transition: background-color .15s ease, border-color .15s ease; }
.zweefveld input:hover { background: var(--rand); }
.zweefveld input:focus-visible { outline: none; background: var(--kaart); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.zweefveld label { position: absolute; left: 17px; top: 18px; margin: 0; font-size: 16px; font-weight: 400; color: var(--gedempt-tekst); pointer-events: none; transition: top .15s ease, font-size .15s ease; }
.zweefveld input:focus + label, .zweefveld input:not(:placeholder-shown) + label { top: 9px; font-size: 12px; }

.inlog-knop { display: flex; width: 100%; height: 52px; margin-top: 8px; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font: 600 16px/1 var(--font); text-decoration: none; cursor: pointer; }
.inlog-knop:hover { background: var(--accent-donker); color: #fff; }
.inlog-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inlog-knop--rand { background: var(--kaart); color: var(--accent); border: 1px solid var(--rand-sterk); }
.inlog-knop--rand:hover { background: var(--zweef); color: var(--accent-donker); }
.inlog__fout { margin: 2px 0 10px; font-size: 13px; color: var(--fout); }
.inlog__hulp { margin: 0 0 8px; font-size: 13px; color: var(--gedempt-tekst); }
.inlog__klein { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gedempt-tekst); }

.inlog-voet { padding: 16px 0 24px; font-size: 12px; color: var(--vaag); }
.inlog-voet a { margin-left: 12px; color: var(--gedempt-tekst); text-decoration: none; }
.inlog-voet a:hover { color: var(--inkt); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .zweefveld label, .zweefveld input { transition: none; } }
@media (prefers-color-scheme: dark) { .inlog-knop, .inlog-knop:hover { color: #0C1033; } }

@media (max-width: 900px) {
  .inlog-split { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .inlog-beeld { display: none; }
  .inlog-paneel { min-height: 100dvh; padding: 0 20px; }
  .inlog-balk { height: 52px; }
  .inlog-balk__naam { font-size: 18px; }
  .inlog-split .inlog__kaart { align-self: start; padding: 40px 0; }
  .inlog__kop h1 { font-size: 36px; }
}

/* Welkomstscherm na het inloggen: de begroeting komt rustig omhoog, staat
   even en het hele vlak fadet daarna weg naar het dashboard eronder. Alleen
   CSS; na de animatie is het vlak onzichtbaar en niet meer klikbaar. */
.welkom { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: var(--kaart); animation: welkom-uit .7s cubic-bezier(.4, 0, .2, 1) 1.9s forwards; }
.welkom__inhoud { text-align: center; }
.welkom__inhoud > * { margin: 0; opacity: 0; animation: welkom-in .8s cubic-bezier(.2, .7, .2, 1) forwards; }
.welkom__groet { font-size: 15px; color: var(--gedempt-tekst); }
.welkom__naam { font-size: 48px; line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; color: var(--inkt); }
.welkom__kantoor { font-size: 13px; color: var(--vaag); }
.welkom__inhoud > .welkom__groet { animation-delay: .1s; }
.welkom__inhoud > .welkom__naam { margin-top: 6px; animation-delay: .25s; }
.welkom__inhoud > .welkom__kantoor { margin-top: 14px; animation-delay: .45s; }
@keyframes welkom-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes welkom-uit { to { opacity: 0; visibility: hidden; } }
@media (max-width: 600px) { .welkom__naam { font-size: 34px; } }
@media (prefers-reduced-motion: reduce) {
  .welkom { animation-duration: .3s; animation-delay: 1.2s; }
  .welkom__inhoud > * { opacity: 1; animation: none; }
}
@media print { .welkom { display: none; } }

/* ---------- Inklappen en kleinere schermen ---------- */

.app.dicht { grid-template-columns: 0 minmax(0, 1fr); }
.app.dicht .zijbalk { visibility: hidden; padding: 0; border: 0; overflow: hidden; }
.scherm { display: none; }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(2) { border-right: 0; }
  .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--rand); }
  .kpis--3 .kpi:nth-child(2) { border-right: 1px solid var(--rand); }
  .cel--3 { grid-column: span 6; }
  .cel--4, .cel--5, .cel--6, .cel--7, .cel--8 { grid-column: span 12; }
  .raster--zij, .raster--2, .raster--instellingen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .app, .app.dicht { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kop" "hoofd"; }
  .balk__merk { width: auto; }
  .zijbalk { position: fixed; top: 44px; left: 0; bottom: 0; height: auto; width: 260px; z-index: 40; transform: translateX(-100%); box-shadow: var(--schaduw-zwevend); visibility: visible; }
  .app.dicht .zijbalk { visibility: visible; padding: 4px 8px 8px; border-right: 1px solid var(--rand-sterk); }
  .app.open .zijbalk { transform: none; }
  .scherm { position: fixed; inset: 44px 0 0 0; z-index: 30; background: rgb(18 26 38 / .35); border: 0; padding: 0; }
  .app.open .scherm { display: block; }
  .inhoud { padding: 12px; gap: 12px; }
  .raster { grid-template-columns: minmax(0, 1fr); }
  .kpis--3 { grid-template-columns: minmax(0, 1fr); }
  .kpis--3 .kpi { border-right: 0; border-bottom: 1px solid var(--rand); }
  .balk__pad { display: none; }
}
@media (max-width: 520px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .kpi { border-right: 0; border-bottom: 1px solid var(--rand); }
  .kpi:last-child { border-bottom: 0; }
  .cel--3 { grid-column: span 12; }
  th:first-child, td:first-child { padding-left: 12px; }
  th:last-child, td:last-child { padding-right: 12px; }
  .cel { padding: 10px 12px; }
  .paginakop { padding: 8px 12px; }
}
figure.cel { margin: 0; }
td.getal { white-space: nowrap; }

/* ================= Zoeken, filters, inzicht, meldingen, rapport ================= */

kbd { font: 500 10px/1 var(--font); padding: 3px 4px; border-radius: var(--r); border: 1px solid var(--rand-sterk); background: var(--kaart); color: var(--gedempt-tekst); }
.mono.inline { font-size: 12px; background: var(--kaart-2); border: 1px solid var(--rand); border-radius: var(--r); padding: 0 4px; }

/* Zoekveld in de kopbalk met duidelijke scope */
.zoekknop { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 6px 0 8px; margin-left: 8px; border: 1px solid var(--rand-sterk); border-radius: var(--r-pil); background: var(--kaart); color: var(--vaag); text-decoration: none; font-size: 12px; width: 320px; }
.zoekknop:hover { border-color: var(--gedempt-tekst); color: var(--inkt); }
.zoekknop .icoon { width: 14px; height: 14px; }
.zoekknop kbd { margin-left: auto; }
.bel { position: relative; }
.bel__stip { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.zijbalk__nav .teller { margin-left: auto; min-width: 18px; height: 18px; padding: 0 6px; border-radius: var(--r-pil); background: var(--accent); color: #fff; font: 600 10px/18px var(--font); text-align: center; }

.palet { width: min(620px, calc(100vw - 32px)); max-height: min(540px, calc(100vh - 120px)); margin: 12vh auto auto; padding: 0; border: 1px solid var(--rand-sterk); border-radius: var(--r-paneel); background: var(--kaart); color: var(--inkt); box-shadow: var(--schaduw-zwevend); overflow: hidden; }
.palet[open] { display: flex; flex-direction: column; }
.palet::backdrop { background: rgb(18 26 38 / .35); }
.palet__veld { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--rand); }
.palet__veld .icoon { color: var(--gedempt-tekst); }
.palet__veld input[type=search] { border: 0; box-shadow: none; height: 44px; padding: 0; font-size: 14px; background: transparent; }
.palet__veld input[type=search]:focus-visible { box-shadow: none; }
.palet__lijst { overflow-y: auto; padding: 4px 0; flex: 1; min-height: 60px; }
.palet__groep { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--vaag); padding: 10px 12px 4px; }
.palet__item { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; text-decoration: none; color: var(--inkt); border-left: 2px solid transparent; }
.palet__item .icoon { color: var(--gedempt-tekst); width: 14px; height: 14px; }
.palet__item b { font-weight: 500; white-space: nowrap; }
.palet__item span { font-size: 12px; color: var(--gedempt-tekst); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.palet__item[aria-selected="true"] { background: var(--accent-zacht); border-left-color: transparent; border-radius: var(--r); }
.palet__leeg { padding: 20px 12px; color: var(--gedempt-tekst); font-size: 13px; }
.palet__voet { display: flex; gap: 16px; padding: 6px 12px; border-top: 1px solid var(--rand); background: var(--kaart-2); font-size: 11px; color: var(--gedempt-tekst); }
.palet__voet kbd { margin-right: 3px; }

/* Filterbalk: compacte toolbar */
.filterbalk { background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--r-paneel); padding: 8px 12px; display: grid; gap: 8px; }
.filterbalk__rij { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.filterbalk__rij > select { width: auto; min-width: 140px; flex: 0 1 auto; }
.zoekveld { position: relative; flex: 1 1 280px; margin: 0; display: block; }
.zoekveld .icoon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--vaag); width: 14px; height: 14px; pointer-events: none; }
.zoekveld input { padding-left: 28px; }
.zoekveld--smal { flex: 0 1 240px; }
.veldje { margin: 0; display: grid; gap: 2px; font-weight: 400; }
.veldje span { font-size: 11px; color: var(--gedempt-tekst); }
.veldje input, .veldje select { width: 150px; }
.vinkje { display: inline-flex; align-items: center; gap: 6px; height: var(--veld-h); margin: 0; font-weight: 400; font-size: 13px; color: var(--inkt); }
.vinkje input { accent-color: var(--accent-donker); width: 14px; height: 14px; }
.filterbalk__meer summary { cursor: pointer; font-size: 12px; color: var(--gedempt-tekst); width: fit-content; }
.filterbalk__meer[open] summary { margin-bottom: 8px; }
.filterbalk__chips { display: flex; flex-wrap: wrap; gap: 4px; }
/* Actieve filters zijn echte chips: wegklikbaar. */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; border-radius: var(--r-pil); font-size: 12px; text-decoration: none; background: var(--accent-zacht); color: var(--accent-donker); border: 1px solid transparent; }
.chip .icoon { width: 11px; height: 11px; }
.chip:hover { border-color: var(--accent); color: var(--accent-donker); }
.chip--leeg { background: transparent; color: var(--gedempt-tekst); border-color: var(--rand); }
.chip--weergave { background: var(--kaart-2); border-color: var(--rand); color: var(--inkt); padding: 0; }
.chip--weergave a { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; height: 100%; text-decoration: none; color: inherit; }
.lijstkop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 6px 16px; border-bottom: 1px solid var(--rand); }
.lijstkop p { font-size: 12px; }
.bewaar { display: flex; gap: 6px; align-items: center; margin: 0; }
.bewaar input { width: 200px; height: 24px; font-size: 12px; }
th.sorteer a { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
th.sorteer .icoon { width: 11px; height: 11px; opacity: .4; }
th.sorteer.actief { color: var(--inkt); }
th.sorteer.actief .icoon { opacity: 1; color: var(--accent); }
th.num.sorteer a { justify-content: flex-end; }
.paginering { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 16px; border-top: 1px solid var(--rand); font-size: 12px; color: var(--gedempt-tekst); }
.paginering > span:last-child { display: flex; gap: 4px; }

/* Meldingen */
.feed li.ongelezen { box-shadow: inset 2px 0 0 var(--accent); }
.feed li .badge { align-self: center; }

/* Inzicht */
.trechter { display: grid; gap: 12px; }
.trechter__stap { display: grid; gap: 4px; }
.trechter__kop { display: flex; justify-content: space-between; font-size: 13px; }
.trechter__stap svg { width: 100%; height: 8px; display: block; }
.trechter__vul { fill: var(--reeks-1); }
.trechter__vul--waardebepalingen { fill: var(--reeks-2); }
.trechter__vul--verkocht { fill: var(--navy); }
.trechter__conv { font-size: 11px; color: var(--gedempt-tekst); }
.prognose { display: grid; gap: 12px; }
.prognose svg { width: 100%; height: 16px; display: block; overflow: visible; }
.prognose__pijplijn { fill: var(--reeks-2); }
.prognose__doel { stroke: var(--doel); stroke-width: 2; stroke-dasharray: 3 3; }
.cijferlijst { margin: 0; display: grid; gap: 0; }
.cijferlijst div { display: flex; justify-content: space-between; gap: 12px; height: var(--rij-h); align-items: center; border-bottom: 1px solid var(--rand); font-size: 13px; }
.cijferlijst div:last-child { border-bottom: 0; }
.cijferlijst dt { color: var(--gedempt-tekst); display: flex; align-items: center; gap: 8px; }
.cijferlijst dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.stip { width: 10px; height: 10px; border-radius: 3px; display: inline-block; background: var(--rand-sterk); }
.stip--teal { background: var(--reeks-1); }
.stip--licht { background: var(--reeks-2); }
.stip--doel { background: none; border-top: 2px dashed var(--doel); height: 0; width: 12px; }
.balkenlijst { display: grid; gap: 8px; }
.balkenlijst__rij { display: grid; grid-template-columns: minmax(120px, 160px) 1fr 52px; align-items: center; gap: 12px; font-size: 13px; }
.balkenlijst__rij svg { width: 100%; height: 8px; display: block; }
.balkenlijst__rij b { text-align: right; font-variant-numeric: tabular-nums; }

/* Schakelaar (maandrapport aan/uit): rechthoekig */
.schakel { display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 8px 0 4px; border-radius: var(--r-pil); border: 1px solid var(--rand-sterk); background: var(--kaart); color: var(--gedempt-tekst); font: 500 12px var(--font); cursor: pointer; }
.schakel span { width: 26px; height: 14px; border-radius: var(--r-pil); background: var(--rand-sterk); position: relative; }
.schakel span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.schakel.aan { color: var(--inkt); }
.schakel.aan span { background: var(--goed); }
.schakel.aan span::after { transform: translateX(12px); }

/* Maandrapport, ook om te printen */
.rapport { display: grid; gap: 12px; }
.rapport__kop { display: flex; align-items: center; gap: 12px; }
.rapport__titel { font-size: 17px; }
@media print {
  @page { size: A4; margin: 14mm; }
  body { background: #fff; color: #000; font-size: 11px; }
  .balk, .zijbalk, .scherm, .palet, .geen-print, .melding { display: none !important; }
  .app { display: block; }
  .inhoud { padding: 0; max-width: none; }
  .kaart, .kpis, .cel { break-inside: avoid; }
  th { position: static; }
  a { text-decoration: none; }
}
@media (max-width: 860px) {
  .zoekknop { width: auto; margin-left: 4px; }
  .zoekknop span, .zoekknop kbd { display: none; }
  .veldje input, .veldje select { width: 100%; }
  .veldje { flex: 1 1 140px; }
  .bewaar input { width: 150px; }
  .balkenlijst__rij { grid-template-columns: minmax(100px, 130px) 1fr 44px; }
}
.paginakop__acties select { width: auto; min-width: 120px; }
@media (max-width: 520px) { .paginakop__acties { width: 100%; } .paginakop__acties select { flex: 1 1 120px; min-width: 0; } .rapport__kop { align-items: flex-start; } }
.inhoud > *, .rapport > *, .stapel > * { min-width: 0; }

/* Afgeronde panelen: inhoud die tegen de rand ligt (tabelkoppen, voeten) volgt de hoek. */
.kaart, .cel--vlak, .kpis, .bord, .openlijst { overflow: hidden; }
.kaart__voet { border-radius: 0 0 var(--r-paneel) var(--r-paneel); }