:root {
  --blauw: #201F9E;
  --rood: #E5384A;
  --inkt: #191A46;
  --oranje: #E88A1A;
  --grijs: #8A8BA3;
  --lijn: #E3E4EE;
  --vlak: #F5F6FA;
  --wit: #fff;
  --groen: #17894A;
  --paars: #9333EA; --paars-vlak: #F3E8FF; --paars-inkt: #6B21A8; /* status Op te volgen */
  /* plan 6 donkere modus: oppervlakken en vlakken als tokens (--wit blijft wit = tekst op gekleurde vlakken) */
  --kaart: #fff; --knop: #201F9E; --knop-druk: #191A46; --kop-bg: #201F9E; --toast-bg: #191A46;
  --uitleg-bg: #FFF4E5; --uitleg-rand: #F3D3A6; --reden-bg: #ECECF8; --druk: #F0F0FA; --kaart-vak: #E8EAF0;
  color-scheme: light;
  --tab-h: 64px;
  --veilig-onder: env(safe-area-inset-bottom, 0px);
}
/* Donkere modus zoals CV Planning (data-theme="dark", localStorage 'cv-theme'): Planning's donkere palet */
[data-theme="dark"] {
  --vlak: #0d0d0e;        /* Planning --bg */
  --kaart: #1c1c1e;       /* --card */
  --lijn: #2c2c2e;        /* --border */
  --inkt: #f0f0f2;        /* --text */
  --grijs: #aeaeb2;       /* --text-2 (leesbaarder dan --muted #636366 voor secundaire tekst) */
  --blauw: #5b7cf6;       /* --accent: tekst, links, randen */
  --knop: #3d5af1;        /* gevulde knoppen met witte tekst (contrast > 4.5) */
  --knop-druk: #2c44c4;
  --kop-bg: #1c1c1e;
  --toast-bg: #3a3a3c;    /* --border-2 */
  --groen: #34c26b;       /* tekstgroen; rood/oranje blijven (vlakken met witte tekst) */
  --paars: #b07cff; --paars-vlak: rgba(147,51,234,.22); --paars-inkt: #e2ccff;
  --uitleg-bg: rgba(234,108,0,.14); --uitleg-rand: rgba(234,108,0,.38);
  --reden-bg: rgba(91,124,246,.16); --druk: #1a1a1c; --kaart-vak: #1a1a1c;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Plan 7: kop en tabbalk staan vast; enkel <main> scrolt (eigen scrollcontainer). De body zelf beweegt nooit, ook niet bij
   rubber-band scrollen of het in-/uitschuiven van de Safari-werkbalk. */
html, body { height: 100%; }
body {
  margin: 0; background: var(--vlak); color: var(--inkt);
  font: 15px/1.45 Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  position: fixed; inset: 0; overflow: hidden; display: flex; flex-direction: column;
}
[hidden] { display: none !important; }
h1 { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; }
h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--blauw); margin: 22px 0 8px; }
a { color: var(--blauw); }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea {
  width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--kaart);
  font-size: 16px; /* geen iOS-zoom */
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blauw); outline-offset: 0; border-color: var(--blauw); }
label { display: block; font-size: 13px; font-weight: 600; color: var(--inkt); }
label > input, label > select, label > textarea { margin-top: 4px; font-weight: 400; }

/* Kop */
.kop {
  position: relative; flex: none; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; background: var(--kop-bg); color: var(--wit);
}
.kop-merk { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .01em; }
.kop-merk img { border-radius: 6px; background: #fff; }
.kop-rechts { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kop-naam { font-size: 13px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.knop-link { background: none; border: 0; color: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; padding: 10px 0; cursor: pointer; }

/* Schermen */
main {
  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
  padding-bottom: calc(var(--tab-h) + var(--veilig-onder) + 16px);
}
body:has(#tabbalk[hidden]) main { padding-bottom: 0; }
.scherm { padding: 16px; max-width: 720px; margin: 0 auto; }
.sub { color: var(--grijs); font-size: 13px; margin: 2px 0 0; }

/* Login */
.login { min-height: 100%; display: flex; align-items: center; justify-content: center; }
.login-kaart { width: 100%; max-width: 360px; background: var(--kaart); border-radius: 18px; padding: 28px 22px; box-shadow: 0 8px 30px rgba(25,26,70,.08); text-align: center; }
.login-logo { border-radius: 16px; }
.login-kaart h1 { margin-top: 10px; color: var(--blauw); }
.login-kaart form { text-align: left; margin-top: 20px; display: grid; gap: 14px; }
.fout { color: var(--rood); font-weight: 600; font-size: 14px; margin: 0; }
.melding { color: var(--groen); font-weight: 600; font-size: 14px; min-height: 1em; }

/* Knoppen */
.knop { min-height: 46px; padding: 10px 16px; border-radius: 12px; border: 0; font-weight: 700; cursor: pointer; }
.knop-hoofd { background: var(--knop); color: var(--wit); }
.knop-hoofd:active { background: var(--knop-druk); }
.knop-tweede { background: var(--kaart); color: var(--blauw); border: 1.5px solid var(--blauw); }
.breed { width: 100%; margin-top: 22px; }
.knop-gevaar { background: var(--kaart); color: var(--rood); border: 1.5px solid var(--rood); }
.bevestig .knop-gevaar, .knop-gevaar:active { background: var(--rood); color: var(--wit); }
.bevestig { margin-top: 14px; padding: 12px 14px; border: 1.5px solid var(--rood); border-radius: 14px; background: #FDECEE; }
.bevestig p { margin: 0 0 10px; font-weight: 600; }
.klant-form textarea { resize: vertical; min-height: 46px; }
.knoppenrij { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.knoppenrij .knop { flex: 1 1 150px; }

/* Mijn regio */
.regio-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.kiezer { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.kiezer select { margin: 0; width: auto; max-width: 190px; min-height: 40px; }
.uitleg { background: var(--uitleg-bg); border: 1px solid var(--uitleg-rand); border-radius: 12px; padding: 12px 14px; margin-top: 12px; font-size: 14px; }
.uitleg p { margin: 0; }
.filters { margin-top: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 36px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--lijn); background: var(--kaart);
  font-size: 13px; font-weight: 600; cursor: pointer; color: var(--inkt);
}
.chip.actief { background: var(--knop); border-color: var(--knop); color: var(--wit); }
.chips-klein { gap: 5px; }
.reden { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--reden-bg); color: var(--blauw); font-size: 12px; font-weight: 600; }
.meer-filters { margin-top: 10px; }
.meer-filters summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--blauw); padding: 8px 0; min-height: 36px; }
.filter-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 4px; }
.vink { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; font-weight: 600; min-height: 40px; cursor: pointer; }
.vink input { width: 22px; height: 22px; min-height: 0; margin: 0; flex: none; accent-color: var(--blauw); }
/* slider "minstens X maanden online" (0 = uit): groot tikvlak, waarde in het label */
.schuif { display: block; margin-top: 12px; }
.schuif-kop { display: block; font-size: 14px; font-weight: 600; }
.schuif-kop output { color: var(--blauw); font-weight: 800; }
.schuif input[type=range] { display: block; width: 100%; min-height: 44px; margin: 2px 0 0; padding: 0; border: 0; background: none; accent-color: var(--blauw); }
.schuif input[type=range]:focus { outline-offset: 2px; }
.schuif-schaal { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--grijs); margin-top: -6px; }
.lijst-status { color: var(--grijs); font-size: 13px; margin: 12px 0 8px; }
.lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.leeg { text-align: center; color: var(--grijs); padding: 32px 12px; background: var(--kaart); border-radius: 14px; }

/* Pandkaartje */
.pand {
  display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start; width: 100%; text-align: left;
  background: var(--kaart); border: 1px solid var(--lijn); border-radius: 14px; padding: 12px; cursor: pointer;
}
.pand:active { background: var(--druk); }
.score {
  width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--wit); font-weight: 800; font-size: 16px; flex: none; background: var(--grijs);
}
.score.hoog { background: var(--rood); }
.score.mid { background: var(--oranje); }
.score.laag { background: var(--grijs); }
.pand-tekst { min-width: 0; }
.pand-titel { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.pand-adres { color: var(--inkt); opacity: .8; font-size: 13px; overflow-wrap: anywhere; }
.pand-adres.onbekend { font-style: italic; opacity: .55; }
.pand-info { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 13px; }
.pand-prijs { font-weight: 700; color: var(--blauw); }
.pand-redenen { margin-top: 6px; }
.pand-notaris { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--inkt); }
.badges { display: inline-flex; gap: 4px; margin-left: 4px; vertical-align: middle; }
.badge { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.badge-nieuw { background: var(--knop); color: var(--wit); }
.badge-zm { background: var(--lijn); color: var(--blauw); }
.badge-prijs { background: var(--rood); color: var(--wit); }
.badge-4mnd { background: var(--oranje); color: var(--wit); }
.opv { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--grijs); }
.opv.actief { color: var(--groen); }
/* plan 6: kaartje = kaartknop + voetregel met de Opvolgen-knop (geen knop in een knop) */
.pand-kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 14px; overflow: hidden; }
.pand-kaart .pand { border: 0; border-radius: 0; }
.pand-voet { display: flex; gap: 8px; padding: 0 12px 10px 70px; }
.knop-opvolg {
  min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--blauw); background: var(--kaart); color: var(--blauw);
  font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.knop-opvolg.mijn { background: var(--paars-vlak); border-color: var(--paars); color: var(--paars-inkt); }
.knop-opvolg.ander { background: var(--vlak); border-color: var(--lijn); color: var(--inkt); }
.knop-opvolg:disabled { opacity: .6; }
.fiche-opvolg { display: flex; flex: 1 1 140px; }
.fiche-opvolg .knop-opvolg { flex: 1; }
.onderkaart .knop-opvolg { width: 100%; }

/* Panelen */
.paneel { position: fixed; inset: 0 0 calc(var(--tab-h) + var(--veilig-onder)) 0; z-index: 40; background: rgba(25,26,70,.35); display: flex; justify-content: center; }
.paneel-blad { background: var(--kaart); width: 100%; max-width: 720px; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.paneel-kop {
  position: sticky; top: 0; z-index: 2; background: var(--kaart); border-bottom: 1px solid var(--lijn);
  padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 6px;
}
.knop-terug { background: none; border: 0; color: var(--blauw); font-weight: 700; font-size: 16px; padding: 10px 8px; min-height: 44px; cursor: pointer; }
.paneel-inhoud { padding: 16px 16px 32px; }
.fiche-top { display: flex; gap: 12px; align-items: center; }
.fiche-top h2 { margin: 0; overflow-wrap: anywhere; }
.fiche-prijs { font-size: 22px; font-weight: 800; color: var(--blauw); margin: 12px 0 6px; }
.gegevens { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 14px; margin: 8px 0 12px; }
.gegevens dt { color: var(--grijs); }
.gegevens dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.status-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.status-knoppen button {
  min-height: 44px; border-radius: 10px; border: 1.5px solid var(--lijn); background: var(--kaart); font-weight: 700; font-size: 13px; cursor: pointer;
}
.status-knoppen button.actief { background: var(--knop); border-color: var(--knop); color: var(--wit); }
.status-knoppen button[data-status="geen-interesse"].actief { background: var(--grijs); border-color: var(--grijs); }
.datum { margin-top: 10px; }
.grafiek svg { width: 100%; height: auto; display: block; }
.grafiek .leeg { padding: 14px; background: var(--vlak); }
.lijn-lijst { list-style: none; margin: 0; padding: 0; }
.lijn-lijst li { padding: 9px 0; border-bottom: 1px solid var(--lijn); font-size: 14px; overflow-wrap: anywhere; }
.lijn-lijst li:last-child { border-bottom: 0; }
.lijn-lijst .sub { display: block; }
.lijn-lijst a { font-weight: 700; display: inline-block; padding: 4px 0; }
.notitie-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; margin-bottom: 6px; }
.notitie-form textarea { resize: vertical; min-height: 46px; }

/* Klantformulier */
.klant-form fieldset { border: 1px solid var(--lijn); border-radius: 14px; padding: 12px 14px 14px; margin: 14px 0 0; display: grid; gap: 12px; min-width: 0; }
.klant-form legend { font-weight: 800; font-size: 13px; color: var(--blauw); padding: 0 6px; text-transform: uppercase; letter-spacing: .05em; }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.segment { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--blauw); border-radius: 12px; overflow: hidden; margin-top: 12px; }
.segment label { margin: 0; }
.segment input { position: absolute; opacity: 0; pointer-events: none; width: 1px; min-height: 0; }
.segment span { display: flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 700; color: var(--blauw); cursor: pointer; }
.segment input:checked + span { background: var(--knop); color: var(--wit); }
.segment input:focus-visible + span { outline: 2px solid var(--rood); outline-offset: -3px; }
.gdpr { align-items: flex-start; margin-top: 16px; font-weight: 600; background: var(--uitleg-bg); border-radius: 12px; padding: 12px; }
.gdpr input { margin-top: 1px; }

.klant { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 14px; padding: 12px 14px; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.klant-tekst { min-width: 0; }
.klant-naam { font-weight: 700; overflow-wrap: anywhere; }
.klant-soort { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 1px 7px; border-radius: 6px; margin-right: 6px; vertical-align: middle; }
.klant-soort.verkoper { background: var(--rood); color: var(--wit); }
.klant-soort.koper { background: var(--knop); color: var(--wit); }
.klant .knop { min-height: 40px; padding: 6px 12px; font-size: 13px; flex: none; }

/* Admin */
.tabel-wrap { overflow-x: auto; background: var(--kaart); border-radius: 14px; border: 1px solid var(--lijn); }
.tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabel th, .tabel td { padding: 9px 8px; text-align: right; border-bottom: 1px solid var(--lijn); }
.tabel th:first-child, .tabel td:first-child { text-align: left; }
.tabel th { font-size: 11px; text-transform: uppercase; color: var(--grijs); letter-spacing: .04em; }
.tabel tr:last-child td { border-bottom: 0; }
.kleurstip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.bronnen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bronnen li { background: var(--kaart); border: 1px solid var(--lijn); border-left: 5px solid var(--groen); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.bronnen li.waarschuwing { border-left-color: var(--rood); background: #FDECEE; }
.bronnen strong { font-size: 14px; }
.gewichten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--kaart); border: 1px solid var(--lijn); border-radius: 14px; padding: 14px; }
.gewichten .knop { grid-column: 1 / -1; }
.kantoren { display: grid; gap: 10px; background: var(--kaart); border: 1px solid var(--lijn); border-radius: 14px; padding: 14px; }
.kantoor-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--lijn); }
.kantoor-rij label { font-size: 13px; }
.kantoor-rij input[type=text], .kantoor-rij input[type=url], .kantoor-rij select { width: 100%; }
.kantoor-rij .actief { display: flex; align-items: center; gap: 6px; }
.kantoor-rij .knop { min-height: 40px; padding: 6px 12px; font-size: 13px; }
.kantoren .knoppenrij { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 520px) { .kantoor-rij { grid-template-columns: 1fr; } }

/* Tabbalk */
.tabbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: var(--kaart);
  border-top: 1px solid var(--lijn); padding-bottom: var(--veilig-onder); box-shadow: 0 -4px 18px rgba(25,26,70,.06);
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
}
.tabbalk button {
  flex: 1; min-height: var(--tab-h); border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 11px; font-weight: 700; color: var(--grijs); cursor: pointer; position: relative; min-width: 0; padding: 0 2px;
}
.tab-badge {
  position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--rood); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--kaart);
}
.tabbalk .ico { font-size: 20px; line-height: 1; }
.tabbalk button.actief { color: var(--blauw); }
.tabbalk button.actief .ico { color: var(--rood); }

/* Kaart: volledig scherm tussen kop en tabbalk (safe-areas), overlays erboven */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#scherm-kaart {
  position: fixed; top: var(--kop-h, 60px); left: 0; right: 0; bottom: calc(var(--tab-h) + var(--veilig-onder));
  padding: 0; margin: 0; max-width: none; z-index: 1; overflow: hidden;
}
#kaart { position: absolute; inset: 0; margin: 0; background: var(--kaart-vak); }
#kaart > .leeg { margin: 16px; }
.scherm-kaart .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
.scherm-kaart .leaflet-bottom { bottom: 60px; } /* attributie boven het ingeklapte paneel */
.scherm-kaart .leaflet-top.leaflet-left { left: env(safe-area-inset-left, 0px); }
.scherm-kaart .leaflet-top.leaflet-right { right: env(safe-area-inset-right, 0px); }
.kaart-knoppen { display: grid; gap: 8px; }
.kaart-knop {
  width: 44px; height: 44px; min-height: 44px; border-radius: 12px; border: 0; background: var(--kaart); color: var(--blauw);
  font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(25,26,70,.25);
}
.kaart-knop:active { background: var(--vlak); }

/* markers: onzichtbaar tikvlak van 44 px rond een kleine stip / foto */
.pt { display: flex !important; align-items: center; justify-content: center; background: none; border: 0; }
.pt-stip { display: block; width: 24px; height: 24px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 5px rgba(25,26,70,.5); }
.pt.gekozen .pt-stip { width: 34px; height: 34px; border-width: 4px; box-shadow: 0 0 0 3px var(--inkt); }
/* notariële verkoop: vierkantje met donkere rand (blijft herkenbaar naast de bolletjes, ook in kleur hoog/mid/laag) */
.pt-stip.pt-notaris { border-radius: 4px; border-color: var(--inkt); width: 22px; height: 22px; }
.pt.gekozen .pt-stip.pt-notaris { width: 32px; height: 32px; }
.legende-rij .pt-stip.pt-notaris { width: 20px; height: 20px; border-width: 3px; }
.legende-rij .pt-stip { width: 20px; height: 20px; }
.pt-opv .opv-foto { border: 2px solid #fff; }
/* Ons aanbod: makelaarsfoto met CV-rand + huisje rechtsonder */
.aanbod-speld { position: relative; display: inline-flex; }
.aanbod-huis {
  position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--knop); color: #fff;
  font-size: 13px; line-height: 20px; text-align: center; font-weight: 800; border: 2px solid #fff;
}
.legende-rij .aanbod-huis { width: 14px; height: 14px; font-size: 9px; line-height: 14px; right: -3px; bottom: -3px; border-width: 1px; }
.pt-aanbod .avatar { border: 2px solid #fff; }
.pt-aanbod.gekozen .aanbod-speld { transform: scale(1.12); }
.aanbod-bol { background: var(--knop); color: #fff; font-size: 24px; }
.onderkaart-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--blauw); }
.pt-opv.gekozen .opv-foto { transform: scale(1.12); }
.legende-rij .pt-stip { flex: none; }
.cl { display: flex !important; align-items: center; justify-content: center; background: none; }
.cl-bol {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 800; font-size: 18px;
  border: 4px solid rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(25,26,70,.35);
}

/* onderpaneel (legende + filters) en onderkaart (gekozen pand) */
.kaart-paneel, .onderkaart {
  position: absolute; z-index: 1001; left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); bottom: 8px;
  max-width: 560px; margin: 0 auto; background: var(--kaart); border-radius: 16px; box-shadow: 0 6px 24px rgba(25,26,70,.25);
}
.kaart-paneel-knop {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 14px; border: 0; background: none;
  font-weight: 700; color: var(--blauw); cursor: pointer; text-align: left;
}
.kaart-telling { margin-left: auto; color: var(--grijs); font-size: 12px; font-weight: 600; }
.kaart-paneel .pijl { transition: transform .2s; }
.kaart-paneel.open .pijl { transform: rotate(180deg); }
.kaart-paneel-inhoud { max-height: min(52vh, calc(100dvh - var(--kop-h, 60px) - var(--tab-h) - 140px)); overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 14px; border-top: 1px solid var(--lijn); }
.kaart-paneel-inhoud .kiezer { margin: 12px 0 10px; }
.kaart-paneel-inhoud .kiezer select { flex: 1; max-width: none; min-height: 44px; }
.kaart-paneel-inhoud .chip { min-height: 44px; }
.kaart-lagen { border: 0; margin: 4px 0 0; padding: 0; display: grid; gap: 0; }
.kaart-lagen legend { padding: 0; margin: 10px 0 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--blauw); }
.kaart-lagen .vink { margin-top: 0; min-height: 44px; }
.kaart-legende h4 { margin: 14px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--blauw); }
.legende-uitleg { margin: 0 0 6px; font-size: 12px; color: var(--grijs); }
.legende-rij { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 13px; font-weight: 600; }
.score-schaal { height: 14px; border-radius: 7px; margin: 6px 0 2px; }
.score-schaal-getallen { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--grijs); margin-bottom: 4px; }
/* OSM-naamsvermelding: klein, na 5 s ingeklapt tot een ⓘ-knopje (tikvlak 44 px), tik = weer tonen */
.scherm-kaart .leaflet-control-attribution { font-size: 10px; line-height: 1.4; padding: 2px 6px; border-radius: 6px 0 0 0; }
.scherm-kaart .leaflet-control-attribution.ingeklapt {
  font-size: 0; width: 44px; height: 44px; padding: 0; background: none; box-shadow: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
/* ingeklapt: de (onzichtbare) link mag niet focusbaar zijn; visibility overleeft dat Leaflet de inhoud herschrijft */
.scherm-kaart .leaflet-control-attribution.ingeklapt > * { visibility: hidden; }
.scherm-kaart .leaflet-control-attribution.ingeklapt::before {
  content: "ⓘ"; font-size: 18px; line-height: 26px; width: 26px; height: 26px; text-align: center; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--blauw); box-shadow: 0 1px 4px rgba(25,26,70,.35);
}
.onderkaart { padding: 12px; display: grid; gap: 10px; }
.onderkaart-top { display: grid; grid-template-columns: 46px 1fr 44px; gap: 10px; align-items: start; }
.onderkaart-tekst { min-width: 0; }
.onderkaart-adres { font-weight: 700; overflow-wrap: anywhere; }
.onderkaart-opv { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 600; }
.onderkaart-sluit {
  width: 44px; height: 44px; min-height: 44px; border: 0; border-radius: 50%; background: var(--vlak); color: var(--inkt);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.onderkaart .knop { width: 100%; min-height: 44px; }
.onderkaart-knoppen { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.onderkaart-knoppen .knop { margin: 0; }
.fiche-acties { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.fiche-acties .knop { flex: 1 1 140px; }
.lijstkeuze { background: var(--vlak); border-radius: 12px; padding: 4px 12px 12px; margin-bottom: 8px; }
.lijstkeuze h3 { margin-top: 10px; }
.nieuwe-lijst { display: flex; gap: 8px; margin: 10px 0; }
.nieuwe-lijst input { flex: 1; min-width: 0; }
.nieuwe-lijst .knop { flex: none; }
.regio-knoppen { margin-top: 10px; }
.lijst-rij { grid-template-columns: 46px 1fr; }
.lijst-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--reden-bg); color: var(--blauw); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.route-lijst { padding: 0; }
.route-stop { display: grid; grid-template-columns: 46px 1fr; gap: 6px 12px; align-items: start; background: var(--kaart); border: 1px solid var(--lijn); border-radius: 14px; padding: 12px; }
.stop-knoppen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.stop-knoppen .knop { min-height: 44px; flex: 1 1 auto; }
.knop-x { min-width: 44px; min-height: 44px; border: 1px solid var(--lijn); background: var(--kaart); border-radius: 12px; font-size: 22px; color: var(--grijs); cursor: pointer; }
.straat-form { grid-column: 1 / -1; display: flex; gap: 8px; }
.straat-form input { flex: 1; min-width: 0; }
.route-delen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.route-delen .uitleg-klein { flex-basis: 100%; margin: 0; }
.lijst-verwijder { margin-top: 24px; display: grid; gap: 8px; }
.route-pt { display: flex !important; align-items: center; justify-content: center; background: none; border: 0; }
.route-nr { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--knop); color: #fff; font-weight: 800; font-size: 14px; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(25,26,70,.45); }
.flyer-blok h4 { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--blauw); }
.flyer-blok .kiezer select { max-width: none; flex: 1; }
.flyer-blok .knop.breed { width: 100%; min-height: 44px; margin-top: 4px; }
.flyer-blok .knop-link { min-height: 44px; }
.flyer-stip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.flyer-balk { position: absolute; z-index: 1002; top: 8px; left: 64px; right: 64px; display: flex; align-items: center; gap: 8px;
  background: var(--toast-bg); color: #fff; border-radius: 14px; padding: 6px 6px 6px 12px; font-size: 13px; font-weight: 700; box-shadow: 0 4px 16px rgba(25,26,70,.35); }
.flyer-balk span { flex: 1; min-width: 0; }
.flyer-balk .knop { min-height: 44px; padding: 0 14px; }
.flyer-kaart { padding: 12px 14px; z-index: 1003; }
.flyer-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.flyer-knoppen .knop { flex: 1 1 120px; min-height: 44px; }
.flyer-knoppen .knop-link { min-height: 44px; }
.knop-waze { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; text-decoration: none; font-weight: 700; border-radius: 12px; }


@media (min-width: 720px) {
  .lijst { grid-template-columns: 1fr 1fr; }
}

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--veilig-onder) + 14px); z-index: 60; transform: translate(-50%, 20px);
  max-width: calc(100vw - 32px); background: var(--toast-bg); color: var(--wit); padding: 10px 16px; border-radius: 12px;
  font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.zicht { opacity: 1; transform: translate(-50%, 0); }
.uitleg .keuzes { margin-top: 10px; }
.uitleg .chip { min-height: 40px; }

/* Profielfoto's (Hulp.avatar): foto over initialen in de regiokleur */
.avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; vertical-align: middle;
  border-radius: 50%; overflow: hidden; color: var(--wit); font-weight: 700; line-height: 1; letter-spacing: 0; user-select: none;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* Leaflet zet img in markers op width: auto (.leaflet-container .leaflet-marker-pane img): foto anders maar half breed */
.leaflet-container .leaflet-marker-pane .avatar img { width: 100%; height: 100%; }

/* Kopmenu */
.menu-knop {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 4px 0 4px 6px;
  background: none; border: 0; color: inherit; cursor: pointer;
}
.menu-knop .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.menu-knop .pijl { font-size: 12px; opacity: .8; }
.menu {
  position: absolute; top: 100%; right: 12px; z-index: 30; min-width: 220px; max-width: calc(100vw - 24px); margin-top: 4px; padding: 6px;
  background: var(--kaart); color: var(--inkt); border-radius: 14px; box-shadow: 0 10px 30px rgba(25,26,70,.22);
}
.menu-kop { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--lijn); }
.menu-kop .sub { display: block; }
.menu button[role=menuitem] {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px; text-align: left; font-weight: 600;
  background: none; border: 0; border-radius: 10px; cursor: pointer;
}
.menu button[role=menuitem]:hover, .menu button[role=menuitem]:focus-visible { background: var(--vlak); }
#uitloggen { color: var(--rood); }

/* Mijn profiel */
.profiel-top { display: flex; align-items: center; gap: 14px; }
.profiel-top h2 { margin: 0; }
.uitleg-klein { font-size: 13px; color: var(--grijs); margin: 12px 0 0; }
.profiel-form { display: grid; gap: 12px; max-width: 420px; }
.foto-voorbeeld { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; justify-self: center; background: var(--vlak); }
.bestand-knop { position: relative; display: flex; align-items: center; justify-content: center; font-size: 15px; overflow: hidden; }
.bestand-invoer { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Avatars naast namen */
#fiche-opvolger { display: flex; align-items: center; gap: 8px; }
.met-avatar { white-space: nowrap; }
.met-avatar .avatar { margin-right: 8px; }
/* op de kaart: toast boven het onderpaneel */
body:has(#scherm-kaart:not([hidden])) .toast { bottom: calc(var(--tab-h) + var(--veilig-onder) + 72px); }
body:has(#kaart-onderkaart:not([hidden])) .toast { bottom: auto; top: calc(var(--kop-h, 60px) + 12px); }
.legende-rij .avatar { margin-left: 3px; }
a.knop { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; }
#lijsten-inhoud > .knop-link { min-height: 44px; }
.knop-waze { white-space: nowrap; }

/* admin: eigen aanbod (Omnicasa-import) */
.eigen-uitleg p { margin: 0 0 6px; }
.eigen-knop { width: 100%; min-height: 48px; margin-top: 8px; }
.eigen-resultaat { margin-top: 10px; }
.eigen-tellers { list-style: none; margin: 6px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.eigen-tellers li { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 10px; padding: 8px 10px; font-size: 13px; display: grid; }
.eigen-tellers strong { font-size: 20px; color: var(--blauw); }
.eigen-tellers li.let-op strong { color: var(--rood); }
.eigen-makelaars { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 8px 0; }
.eigen-makelaar { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.eigen-fouten summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--blauw); cursor: pointer; }

/* donkere modus: themaknop, kop, kaart (enkel de tegels gefilterd, niet de markers of regiokleuren), grafiek, Leaflet-onderdelen */
.thema-knop {
  width: 44px; height: 44px; min-height: 44px; flex: none; border: 0; border-radius: 50%; background: rgba(255,255,255,.14);
  color: inherit; font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.thema-knop:active { background: rgba(255,255,255,.26); }
[data-theme="dark"] .kop { border-bottom: 1px solid var(--lijn); }
[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9); }
[data-theme="dark"] .leaflet-container { background: var(--kaart-vak); }
[data-theme="dark"] .leaflet-bar a, [data-theme="dark"] .leaflet-bar a:hover { background: var(--kaart); color: var(--inkt); border-bottom-color: var(--lijn); }
[data-theme="dark"] .leaflet-popup-content-wrapper, [data-theme="dark"] .leaflet-popup-tip { background: var(--kaart); color: var(--inkt); }
[data-theme="dark"] .leaflet-control-attribution { background: rgba(28,28,30,.85); color: var(--grijs); }
[data-theme="dark"] .leaflet-control-attribution a { color: var(--blauw); }
[data-theme="dark"] .scherm-kaart .leaflet-control-attribution.ingeklapt { background: none; }
[data-theme="dark"] .scherm-kaart .leaflet-control-attribution.ingeklapt::before { background: rgba(28,28,30,.92); color: var(--blauw); }
[data-theme="dark"] .grafiek line[stroke="#E3E4EE"] { stroke: var(--lijn); }
[data-theme="dark"] .grafiek path[stroke="#201F9E"] { stroke: var(--blauw); }
[data-theme="dark"] .grafiek circle[fill="#201F9E"] { fill: var(--blauw); }
[data-theme="dark"] .grafiek text[fill="#191A46"] { fill: var(--inkt); }
[data-theme="dark"] .grafiek text[fill="#8A8BA3"] { fill: var(--grijs); }
[data-theme="dark"] .kaart-paneel, [data-theme="dark"] .onderkaart, [data-theme="dark"] .menu { box-shadow: 0 6px 24px rgba(0,0,0,.6); }

/* ---- plan 7 ---- */
/* zoekveld */
.zoek { position: relative; margin: 0 0 10px; }
.zoek input { padding-left: 38px; border-radius: 12px; -webkit-appearance: none; appearance: none; }
.zoek::before { content: "⌕"; position: absolute; left: 12px; top: 50%; transform: translateY(-52%); font-size: 20px; color: var(--grijs); pointer-events: none; }
#scherm-notaris .zoek { margin-top: 12px; }
/* "op te volgen vandaag" in de kop van Mijn regio */
.vandaag-teller {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--paars); background: var(--paars-vlak); color: var(--paars-inkt); font-size: 14px; font-weight: 700;
}
/* lege toestand met knop */
.leeg .leeg-tekst { margin: 0; }
.leeg .knop { margin-top: 12px; min-height: 44px; }
/* skeletkaartjes + gedimde lijst tijdens het laden */
.skelet { display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 12px; background: var(--kaart); border: 1px solid var(--lijn); border-radius: 14px; }
.skelet-bol { width: 46px; height: 46px; border-radius: 50%; }
.skelet-tekst { display: grid; gap: 8px; padding-top: 4px; }
.skelet-lijn { display: block; height: 12px; border-radius: 6px; }
.skelet-lijn.l1 { width: 55%; height: 14px; } .skelet-lijn.l2 { width: 85%; } .skelet-lijn.l3 { width: 40%; }
.skelet-bol, .skelet-lijn { background: linear-gradient(90deg, var(--lijn) 25%, var(--vlak) 50%, var(--lijn) 75%); background-size: 200% 100%; animation: skelet 1.2s linear infinite; }
@keyframes skelet { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skelet-bol, .skelet-lijn { animation: none; } }
.lijst.laadt > .pand-kaart { opacity: .55; transition: opacity .15s; }
/* pull-to-refresh */
.ptr {
  position: fixed; z-index: 25; left: 50%; top: calc(var(--kop-h, 60px) - 40px); transform: translate(-50%, 0); display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; background: var(--kaart); color: var(--blauw); font-size: 13px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(25,26,70,.2); opacity: 0; pointer-events: none; transition: opacity .15s;
}
.ptr.zicht { opacity: 1; }
.ptr-ico { font-size: 18px; display: inline-block; transition: transform .2s; }
.ptr.klaar .ptr-ico { transform: rotate(180deg); }
.ptr.draait .ptr-ico { animation: draai .8s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
/* toast met actieknop (Ongedaan maken) */
.toast { display: flex; align-items: center; gap: 12px; width: max-content; }
.toast.met-actie { padding: 6px 6px 6px 16px; }
.toast.met-actie.zicht { pointer-events: auto; } /* uitgefade toast mag nooit tikken onderscheppen */
/* in een paneel (fiche) boven de vaste actiebalk */
body:has(.paneel:not([hidden])) .toast { bottom: calc(var(--tab-h) + var(--veilig-onder) + 84px); }
.toast-actie { min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: rgba(255,255,255,.16); color: #fff; font-weight: 800; cursor: pointer; white-space: nowrap; }
/* icoon + label in de knoppen (opvolgen, snelle lijst) */
.knop-opvolg, .knop-lijst { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.k-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-ico { flex: none; }
/* snelknop laatste lijst + ▾ */
.snel-lijst { display: inline-flex; min-width: 0; border: 1.5px solid var(--blauw); border-radius: 999px; overflow: hidden; background: var(--kaart); }
.knop-lijst, .knop-lijst-pijl { min-height: 44px; border: 0; background: none; color: var(--blauw); font-size: 14px; font-weight: 700; cursor: pointer; }
.knop-lijst { flex: 1; min-width: 0; padding: 0 6px 0 12px; gap: 3px; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.knop-lijst.bevat { background: var(--reden-bg); }
/* ▾ minstens 44 px breed (tikdoel, review K3 #5) */
.knop-lijst-pijl { flex: none; width: 44px; min-width: 44px; border-left: 1px solid var(--lijn); font-size: 13px; }
.knop-lijst:disabled { opacity: .6; }
/* onderkaart: greep + rij Opvolgen | lijst */
.onderkaart { transition: transform .16s ease-out; }
.onderkaart-greep { justify-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--lijn); margin: -4px 0 -2px; }
.onderkaart-rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 8px; }
.onderkaart-rij .knop-opvolg, .onderkaart-rij .snel-lijst { width: 100%; min-width: 0; }
.onderkaart .lijstkeuze { max-height: 38vh; overflow-y: auto; overscroll-behavior: contain; margin: 0; }
/* fiche: vaste actiebalk onderaan (boven de tabbalk) */
.paneel-blad { display: flex; flex-direction: column; }
.paneel-inhoud { flex: 1 0 auto; }
.fiche-balk {
  position: sticky; bottom: 0; z-index: 3; margin-top: auto; background: var(--kaart); border-top: 1px solid var(--lijn);
  box-shadow: 0 -6px 18px rgba(25,26,70,.08); padding: 8px 10px; padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px));
}
.fiche-balk .lijstkeuze { max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; margin: 0 0 8px; }
/* breedtes zo dat alles past op 360 px (review K3 #6): lijst (naam + ▾ 44 px) breder, Waze/Advert. smaller */
.fiche-balk-knoppen { display: flex; gap: 6px; }
.fiche-balk-knoppen > * { flex: 1 1 0; min-width: 0; }
.fiche-balk-knoppen > .fiche-snellijst { flex-grow: 1.75; }
.fiche-balk-knoppen > .balk-knop { flex-grow: .65; }
.fiche-balk-knoppen > [hidden] { display: none !important; }
.fiche-opvolg, .fiche-snellijst { display: flex; min-width: 0; }
.fiche-balk .knop-opvolg, .fiche-balk .knop-lijst, .balk-knop {
  flex: 1; min-width: 0; min-height: 52px; flex-direction: column; gap: 1px; padding: 4px 4px; font-size: 12px; border-radius: 12px;
}
.fiche-balk .k-ico { font-size: 18px; line-height: 1.1; }
.fiche-balk .k-lbl { max-width: 100%; }
.fiche-balk .snel-lijst { flex: 1; border-radius: 12px; }
.fiche-balk .knop-lijst { border-radius: 0; padding: 4px 2px; }
.fiche-balk .knop-lijst-pijl { width: 44px; min-height: 52px; }
.fiche-balk .k-lbl { font-size: 11.5px; }
/* "Opdracht binnen" mag op twee regels */
.fiche-balk .knop-opvolg.opdracht .k-lbl { white-space: normal; line-height: 1.1; text-align: center; }
.balk-knop {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 700; color: var(--blauw);
  border: 1.5px solid var(--blauw); background: var(--kaart);
}
.balk-knop .k-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.knop-stop { color: var(--rood); min-height: 44px; display: inline-block; margin-top: 4px; }
/* kaart: panden buiten de regio's (legende) */
.legende-rij .pt-stip.pt-buiten { opacity: .55; border-color: #5F6180; border-width: 2px; }
/* plan 8 K4: contact noteren + herinnering + tijdlijn */
.contact-knoppen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.contact-knoppen button {
  min-height: 56px; padding: 6px 4px; border-radius: 12px; border: 1.5px solid var(--lijn); background: var(--kaart); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center;
}
.contact-knoppen button span { font-size: 19px; line-height: 1; }
.contact-knoppen button:active { background: var(--druk); border-color: var(--blauw); }
.contact-knoppen button:disabled { opacity: .55; }
.contact-gesprek { margin-top: 10px; display: grid; gap: 8px; }
.contact-gesprek textarea { resize: vertical; }
.herinnering { margin-top: 10px; padding: 12px; border-radius: 14px; border: 1.5px solid var(--paars); background: var(--paars-vlak); }
.herinnering-vraag { margin: 0 0 8px; font-weight: 800; color: var(--paars-inkt); }
.herinnering-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.herinnering-keuzes .chip { min-height: 44px; padding: 6px 14px; }
.chip-datum { position: relative; display: inline-flex; align-items: center; overflow: hidden; }
.chip-datum input { position: absolute; inset: 0; opacity: 0; min-height: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; }
.tijdlijn { margin-top: 10px; }
.tijdlijn .contact-item { display: flex; align-items: flex-start; gap: 8px; }
.contact-tekst { flex: 1; min-width: 0; }
.contact-soort { font-weight: 700; }
.contact-notitie { margin: 4px 0 0; padding: 6px 10px; border-left: 3px solid var(--blauw); background: var(--vlak); border-radius: 0 8px 8px 0; white-space: pre-wrap; }
.contact-wis { flex: none; width: 44px; height: 44px; border: 0; background: none; color: var(--grijs); font-size: 16px; cursor: pointer; border-radius: 10px; }
.contact-wis:active { background: var(--druk); }
.badge-laat { background: var(--rood); color: var(--wit); }
.badge-vandaag { background: #9333EA; color: var(--wit); }
.vandaag-teller .te-laat { margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--rood); color: var(--wit); font-size: 12px; }
#fiche-datum.te-laat { border-color: var(--rood); color: var(--rood); font-weight: 700; }
/* plan 8 K5: seintjes over opgevolgde panden */
.badge-sein { background: #B45309; color: var(--wit); text-transform: none; }
.pand-seintje { margin-top: 4px; font-size: 13px; font-weight: 700; color: #B45309; }
[data-theme="dark"] .pand-seintje { color: #F5A35C; }
.seintjes { list-style: none; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--uitleg-bg); border: 1px solid var(--uitleg-rand); font-size: 14px; font-weight: 700; }
.seintjes li + li { margin-top: 4px; }
/* plan 8 K6: brief/mail-kiezer in de fiche + Mijn sjablonen */
.fiche-brief { margin-top: 14px; }
.brief-kiezer { margin-top: 10px; padding: 12px; border-radius: 14px; border: 1.5px solid var(--blauw); background: var(--kaart); }
.brief-kop { margin: 0 0 8px; font-weight: 800; color: var(--blauw); }
.brief-types { display: grid; gap: 6px; }
.brief-type { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 10px;
  border: 1.5px solid var(--lijn); background: var(--kaart); font-weight: 700; font-size: 14px; text-align: left; cursor: pointer; color: var(--inkt); }
.brief-type.actief { border-color: var(--knop); background: var(--knop); color: var(--wit); }
.brief-voorstel { flex: none; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--reden-bg); color: var(--blauw); }
.brief-type.actief .brief-voorstel { background: rgba(255,255,255,.22); color: var(--wit); }
.brief-acties { margin-top: 10px; }
.brief-acties .knop { min-height: 48px; }
.brief-acties .knop[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.brief-uitleg { margin-top: 8px; }
#brief-sjablonen { min-height: 44px; }
.brief-noteer { margin-top: 8px; padding: 12px; border-radius: 12px; border: 1.5px solid var(--paars); background: var(--paars-vlak); }
.sj-standaard { margin-top: 12px; }
.sjablonen-lijst { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.sj-item { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; min-height: 56px; padding: 10px 12px;
  border: 1px solid var(--lijn); border-radius: 14px; background: var(--kaart); text-align: left; cursor: pointer; color: var(--inkt); }
.sj-item:active { background: var(--druk); }
.sj-item-label { font-weight: 800; }
.sj-item-onderwerp { grid-column: 1; font-size: 13px; color: var(--grijs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-tag { grid-column: 2; grid-row: 1 / span 2; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--lijn); color: var(--inkt); }
.sj-tag.eigen { background: var(--knop); color: var(--wit); }
.sjabloon-editor { display: grid; gap: 10px; margin-top: 4px; }
.sjabloon-editor h3 { margin-top: 12px; }
.sjabloon-editor textarea { resize: vertical; min-height: 280px; line-height: 1.5; }
.sj-plaats-uitleg { margin: 0; }
.sj-plaats { display: flex; flex-wrap: wrap; gap: 6px; }
.sj-plaats .chip { min-height: 40px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.sj-voorbeeld { padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--blauw); background: var(--vlak); }
.sj-voorbeeld-onderwerp { margin: 4px 0 8px; font-weight: 800; color: var(--blauw); }
.sj-voorbeeld-tekst { white-space: pre-wrap; font-size: 14px; overflow-wrap: anywhere; }
.sj-knoppen .knop { min-height: 46px; }
.sj-annuleer { min-height: 44px; justify-self: center; }
/* review plan 8: wettelijke hint onder Mail, te lange mail = tekst om te kopiëren, nota voor admin */
.mail-wet { margin-top: 4px; font-weight: 600; }
.mail-lang { margin-top: 8px; padding: 12px; border-radius: 12px; border: 1px dashed var(--blauw); background: var(--vlak); display: grid; gap: 8px; }
.mail-lang textarea { width: 100%; font-size: 13px; line-height: 1.45; }
.mail-lang .knop { min-height: 46px; }
.sj-nota { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--rood); }
/* plan 9 K7: pand ingeven, eigen tip (ster), eigenaar */
.pand-nieuw-knop { width: 100%; min-height: 46px; margin: 0 0 10px; }
.pand-form { display: grid; gap: 10px; }
.pand-form label { display: grid; gap: 4px; }
.adres-raster { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.adres-raster .straat, .adres-raster .gemeente { grid-column: 1 / -1; }
.suggesties { list-style: none; margin: -4px 0 0; padding: 4px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--kaart); display: grid; gap: 2px; }
.suggestie { width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--inkt); text-align: left; font: inherit; cursor: pointer; }
.suggestie:active, .suggestie:focus-visible { background: var(--druk); }
.pand-eig { border: 1px solid var(--lijn); border-radius: 12px; padding: 8px 12px; background: var(--kaart); }
.pand-eig summary { min-height: 40px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.pand-dubbel { padding: 12px; border-radius: 12px; border: 1.5px solid var(--oranje); background: var(--vlak); display: grid; gap: 8px; }
.pand-dubbel p { margin: 0; }
.badge-tip { background: #B8860B; color: var(--wit); text-transform: none; }
.pt-tip { display: flex; align-items: center; justify-content: center; }
.tip-ster { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: #B8860B; color: #fff; font-size: 19px; line-height: 1; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(25,26,70,.45); }
.pt-tip.gekozen .tip-ster { transform: scale(1.2); }
.legende-ster { width: 24px; height: 24px; font-size: 14px; }
.tip-bol { background: #B8860B; color: #fff; font-size: 24px; }
.pand-hier .knop { min-height: 44px; white-space: nowrap; }
.eigenaar-blok { display: grid; gap: 8px; }
.eig-kaart { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--lijn); background: var(--kaart); }
.eig-naam { font-size: 16px; }
.eig-acties { display: grid; gap: 8px; }
.eig-acties .knop { min-height: 46px; overflow-wrap: anywhere; }
.eig-adres, .eig-notitie { margin: 0; white-space: pre-wrap; }
.eig-kaart .sub { margin: 0; }
.eig-form { display: grid; gap: 10px; }
.eig-velden { display: grid; gap: 10px; }
.eig-velden label { display: grid; gap: 4px; }
.eig-velden .eig-vink { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; }
.eig-velden .eig-vink input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.eig-gdpr { margin: 0; }
.knop-gevaar-tekst { color: var(--rood); }
/* review plan 9 #3: pand op "niet meer contacteren" */
.niet-contacteren { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--rood); color: var(--rood); background: var(--kaart); }
.niet-contacteren p { margin: 0; }
.niet-contacteren-uitleg { color: var(--rood); margin: 8px 0 0; }
.mail-hint { color: var(--rood); }
.eig-velden select { min-height: 44px; }
/* plan 9 K8: specialisaties in admin */
.spec-form { display: grid; gap: 8px; }
.spec-rij { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
.spec-naam { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.spec-rij select { min-height: 44px; max-width: 55%; }