/* Meldpunt demo. App-stijl "framed sheet": een getinte L-vormige rand (zijbalk + bovenbalk)
   met het werk op een wit vel. Geen schaduwen in rust, geen verlopen.
   Raster: zijbalk 228 + vel (inzet 8 rechts en onder). Binnen het vel 24 padding, één gat van 24. */

:root {
  --frame: #f3f4f2;          /* steen: een grijze kalksteentint in plaats van #f9fbfc */
  --surface: #ffffff;
  --raised: #f4f5f3;
  --active: #e8e9e6;
  --border: #e3e5e1;
  --rule: #eeefec;
  --control: #c9cbc6;
  --text: #131416;
  --muted: #5b5d5f;
  --accent: #1b6c80;
  --accent-pale: #e6f1f4;
  --primary: #1d1f20;
  --positive: #1e7b4f;
  --negative: #c4242a;
  --pill-positive-bg: #dcfae5; --pill-positive-ink: #04250e;
  --pill-negative-bg: #ffedea; --pill-negative-ink: #831c1e;
  --pill-warning-bg: #fffbeb; --pill-warning-ink: #92400e; --pill-warning-line: #fde68a;
  --pill-neutral-bg: #e8e9e6; --pill-neutral-ink: #353736;
  --radius-card: 8px; --radius-control: 6px; --radius-chip: 4px; --radius-sheet: 16px;
  --sheet-inset: 8px;
  --sidebar: 228px;
  --gap: 24px; --pad: 24px;
  --control-h: 32px;
  --fs-title: 22px; --fs-section: 16px; --fs-kpi: 28px; --fs-body: 14px; --fs-small: 12px;
  --font: "IBM Plex Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--frame); color: var(--text); font: 400 var(--fs-body)/20px var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--fs-title); line-height: 28px; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: var(--fs-section); line-height: 22px; font-weight: 600; }
h3 { font-size: var(--fs-body); line-height: 20px; font-weight: 600; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: #cfe5eb; color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 13px; }
.gedempt { color: var(--muted); }
.klein { font-size: var(--fs-small); line-height: 16px; }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
* { scrollbar-width: thin; scrollbar-color: #cfccc5 transparent; }

.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ic--klein { width: 14px; height: 14px; }
.merk { width: 28px; height: 28px; flex: none; display: block; }

/* ---------- knoppen ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-h); padding: 0 12px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease); }
.knop:hover { background: var(--raised); text-decoration: none; }
.knop:active { transform: translateY(1px); }
.knop:disabled { cursor: not-allowed; color: var(--muted); background: var(--raised); }
.knop--primair { background: var(--primary); border-color: var(--primary); color: #fff; }
.knop--primair:hover { background: #000; }
.knop--rood { color: var(--pill-negative-ink); border-color: #e9b8b5; }
.knop--rood:hover { background: var(--pill-negative-bg); }
.knop--stil { border-color: transparent; background: transparent; color: var(--muted); }
.knop--stil:hover { background: var(--active); color: var(--text); }
.knop--groot { height: 44px; padding: 0 18px; font-size: 15px; }
.knop--vol { width: 100%; }
.tekstknop { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 500; cursor: pointer; }
.tekstknop:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- pillen en labels ---------- */
.pil { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); font-size: var(--fs-small); font-weight: 500; line-height: 20px; white-space: nowrap; }
.pil .ic { width: 12px; height: 12px; }
.pil--spoed { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.pil--let { background: var(--pill-warning-bg); color: var(--pill-warning-ink); box-shadow: inset 0 0 0 1px var(--pill-warning-line); }
.pil--ok { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.pil--accent { background: var(--accent-pale); color: #0f4a59; }

.avatar { --tint: 200; display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: hsl(var(--tint) 45% 90%); color: hsl(var(--tint) 45% 26%); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.avatar--groot { width: 32px; height: 32px; font-size: 12px; }

/* ---------- de rand: zijbalk + bovenbalk + vel ---------- */
.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.zijbalk { grid-row: 1 / 3; display: flex; flex-direction: column; gap: 4px; padding: 12px 8px 12px 12px; position: sticky; top: 0; height: 100vh; height: 100dvh; }
.zijbalk__merk { display: flex; align-items: center; gap: 10px; padding: 0 4px 0 2px; height: 36px; margin-bottom: 12px; color: var(--text); text-decoration: none; }
.zijbalk__merk:hover { text-decoration: none; }
.zijbalk__naam { font-weight: 600; font-size: 15px; line-height: 18px; display: block; }
.zijbalk__scope { font-size: var(--fs-small); line-height: 16px; color: var(--muted); display: block; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__groep { margin: 20px 0 6px 10px; font-size: var(--fs-small); color: var(--muted); }
.nav__link { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: #45474a; font-size: 14px; text-decoration: none; cursor: pointer; text-align: left; width: 100%; }
.nav__link:hover { background: var(--active); color: var(--text); text-decoration: none; }
.nav__link.is-actief { background: var(--active); color: var(--text); font-weight: 500; }
.nav__teller { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--negative); color: #fff; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; }
.zijbalk__voet { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.zijbalk__wie { display: flex; align-items: center; gap: 10px; padding: 8px 10px 0; }
.voorbeeld { padding: 10px; border-radius: 8px; background: var(--pill-warning-bg); box-shadow: inset 0 0 0 1px var(--pill-warning-line); color: var(--pill-warning-ink); font-size: var(--fs-small); line-height: 16px; }

.bovenbalk { grid-column: 2; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 8px; }
.zoek { position: relative; width: min(548px, 100%); margin: 0 auto; }
.zoek .ic { position: absolute; left: 10px; top: 8px; color: var(--muted); }
.zoek input { width: 100%; height: 32px; padding: 0 12px 0 34px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
.zoek input::placeholder { color: #6b6b6b; }
.zoek input:focus { outline: none; border-color: var(--accent); }
.zoekpop { position: absolute; left: 0; right: 0; top: 38px; z-index: 30; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: 0 8px 24px rgba(20, 20, 18, .12); max-height: 60vh; overflow: auto; }
.zoekpop a { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 6px; color: var(--text); }
.zoekpop a:hover, .zoekpop a:focus-visible { background: var(--active); text-decoration: none; }
.zoekpop__leeg { padding: 10px; color: var(--muted); }
.zoekpop__groep + .zoekpop__groep { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--rule); }
.zoekpop__kop { padding: 6px 10px 2px; color: var(--muted); font-size: var(--fs-small); line-height: 16px; font-weight: 600; }
.zoekpop a.zoekpop__optie { align-items: center; cursor: pointer; }
.zoekpop a.zoekpop__optie:hover { background: transparent; }
.zoekpop a.zoekpop__optie.is-actief { background: var(--accent-pale); box-shadow: inset 3px 0 0 var(--accent); }
.zoekpop__label { flex: none; min-width: 54px; color: var(--muted); }
.zoekpop__tekst { display: flex; flex-direction: column; min-width: 0; }
.zoekpop__titel { font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.zoekpop__sub { color: var(--muted); font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoekpop mark { background: none; color: #0f4a59; font-weight: 600; }
.bovenbalk__zoekknop, .zoek__sluit { display: none; }
.zoek .zoek__sluit .ic { position: static; }
.bovenbalk__menu { display: none; }
.bovenbalk__titel { display: none; }

.vel { grid-column: 2; min-width: 0; margin: 0 var(--sheet-inset) var(--sheet-inset) 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sheet); padding: var(--pad); }

/* ---------- titelregel ---------- */
.titelrij { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: var(--gap); }
.titelrij__tekst { min-width: 0; }
.titelrij__zin { margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 22px; max-width: 72ch; }
.titelrij__zin strong { color: var(--text); font-weight: 500; }
.titelrij__zin a { text-decoration: underline; text-underline-offset: 2px; }
.titelrij__acties { display: flex; gap: 8px; flex: none; }
.kruimel { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--muted); font-size: 14px; }
.kruimel a { color: var(--muted); }
.kruimel a:hover { color: var(--text); }

/* ---------- tellers die filteren ---------- */
.tellers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: var(--gap); }
.teller { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 61px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); text-align: left; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); }
.teller:hover { border-color: var(--control); }
.teller[aria-current="true"] { border: 1.5px solid var(--accent); background: var(--accent-pale); padding: 11.5px; }
.teller__label { font-size: 13px; line-height: 16px; color: var(--muted); }
.teller__waarde { font-size: 16px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.teller__waarde .gedempt { font-weight: 400; font-size: 13px; }

/* ---------- het bord ---------- */
.bord-wrap { padding: 0 0 8px; overflow-x: auto; overscroll-behavior-x: contain; }
.bord { display: grid; grid-auto-flow: column; grid-auto-columns: 256px; gap: 12px; align-items: start; min-width: min-content; }
.kolom { display: flex; flex-direction: column; min-height: 240px; border-radius: 10px; background: var(--raised); padding: 8px; transition: background .15s var(--ease); }
.kolom.is-doel { background: var(--accent-pale); box-shadow: inset 0 0 0 1.5px var(--accent); }
.kolom__kop { display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px; }
.kolom__kop h2 { font-size: 14px; line-height: 20px; }
.kolom__aantal { color: var(--muted); font-variant-numeric: tabular-nums; }
.kolom__som { margin-left: auto; color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.kolom__uitleg { padding: 0 4px 8px; margin-top: -6px; font-size: var(--fs-small); line-height: 16px; color: var(--muted); }
.kolom__kaarten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kolom__leeg { padding: 14px 10px; border: 1px dashed var(--control); border-radius: var(--radius-card); color: var(--muted); font-size: 13px; line-height: 18px; }

.kaart { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); cursor: grab; transition: border-color .15s var(--ease), transform .15s var(--ease); }
.kaart:hover { border-color: var(--control); }
.kaart.is-sleep { opacity: .45; }
.kaart.is-nieuw { animation: binnen .5s var(--ease); }
@keyframes binnen { from { transform: translateY(-6px); background: var(--accent-pale); } to { transform: none; background: var(--surface); } }
.kaart__boven { display: flex; gap: 10px; align-items: flex-start; }
.kaart__link { flex: 1; min-width: 0; color: var(--text); }
.kaart__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.kaart__link:hover { text-decoration: none; }
.kaart__link:focus-visible { outline: none; }
.kaart:has(.kaart__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.kaart__titel { display: block; font-weight: 500; line-height: 19px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kaart__adres { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kaart__foto { width: 44px; height: 44px; flex: none; border-radius: 4px; object-fit: cover; background: var(--raised); }
.kaart__geenfoto { width: 44px; height: 44px; flex: none; border-radius: 4px; border: 1px dashed var(--control); display: grid; place-items: center; color: var(--muted); }
.kaart__labels { display: flex; flex-wrap: wrap; gap: 4px; }
.kaart__voet { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); line-height: 16px; color: var(--muted); }
.kaart__voet .ic { width: 13px; height: 13px; }
.kaart__wanneer { display: inline-flex; align-items: center; gap: 4px; }
.kaart__rechts { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.kaart__bedrag { color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- detail ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: var(--gap); align-items: start; }
.paneel { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); padding: 20px; }
.paneel + .paneel { margin-top: var(--gap); }
.paneel__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.paneel__kop .gedempt { font-size: 13px; }
.rail { display: flex; flex-direction: column; gap: var(--gap); }
.rail .paneel + .paneel { margin-top: 0; }

.citaat { font-size: 15px; line-height: 24px; max-width: 68ch; }
.citaat--whatsapp { display: inline-block; padding: 10px 12px; border-radius: 4px 12px 12px 12px; background: #e9f6e9; font-size: 14px; line-height: 20px; }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 16px; }
.fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; background: var(--raised); }
.fotos button { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 6px; }
.geenfoto { margin-top: 16px; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; background: var(--pill-warning-bg); box-shadow: inset 0 0 0 1px var(--pill-warning-line); color: var(--pill-warning-ink); }
.geenfoto .ic { margin-top: 2px; }
.geenfoto--boven { margin: 0 0 16px; }

.gegevens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin: 0; }
.gegevens div { min-width: 0; }
.gegevens dt { font-size: var(--fs-small); line-height: 16px; color: var(--muted); margin-bottom: 4px; }
.gegevens dd { margin: 0; line-height: 20px; }
.gegevens dd a { color: var(--text); text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: 3px; }

.voorstel { padding: 12px 14px; border-radius: 8px; background: var(--raised); }
.voorstel__kop { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.voorstel__kop .ic { color: var(--accent); }
.voorstel__wie { margin: 6px 0 4px; font-size: 16px; line-height: 22px; font-weight: 600; }
.voorstel p { color: #3d3f42; line-height: 20px; }
.voorstel__zeker { margin-top: 8px; font-size: var(--fs-small); color: var(--muted); }
.knoppenrij { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.knoppenrij .knop--primair { flex: 1 1 auto; }

.keuzes { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.keuze { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-card); cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); }
.keuze:hover { border-color: var(--control); }
.keuze:has(input:checked) { border-color: var(--accent); background: var(--accent-pale); box-shadow: inset 0 0 0 .5px var(--accent); }
.keuze input { margin: 2px 0 0; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.keuze__tekst { flex: 1; min-width: 0; line-height: 20px; }
.keuze__sub { display: block; color: var(--muted); font-size: 13px; line-height: 18px; }
.keuze .avatar { margin-top: -2px; }

.bericht { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.bericht__kop { padding: 8px 12px; background: var(--raised); font-size: 13px; line-height: 18px; color: var(--muted); }
.bericht__kop strong { color: var(--text); font-weight: 500; }
.bericht textarea { display: block; width: 100%; min-height: 168px; padding: 12px; border: 0; resize: vertical; line-height: 21px; background: var(--surface); }
.bericht textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }

.lijst { list-style: none; margin: 0; padding: 0; }
.lijst li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule); }
.lijst li:first-child { border-top: 0; padding-top: 0; }
.lijst__hoofd { flex: 1; min-width: 0; }
.lijst__hoofd a { color: var(--text); font-weight: 500; }
.lijst__sub { display: block; color: var(--muted); font-size: 13px; line-height: 18px; margin-top: 2px; }
.lijst__rechts { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.historie__kern { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.historie__getal { font-size: var(--fs-kpi); line-height: 32px; font-weight: 400; font-variant-numeric: tabular-nums; }
.historie__zin { color: #3d3f42; line-height: 20px; }
.tijdas { position: relative; height: 34px; margin: 2px 0 16px; }
.tijdas__lijn { position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--active); border-radius: 2px; }
.tijdas__punt { position: absolute; top: 5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
.tijdas__punt--nu { background: var(--accent); }
.tijdas__label { position: absolute; top: 22px; font-size: 11px; line-height: 12px; color: var(--muted); white-space: nowrap; transform: translateX(-50%); }
.tijdas__label--eind { transform: translateX(-100%); }
.tijdas__label--begin { transform: none; }

.logboek { list-style: none; margin: 0; padding: 0; }
.logboek li { position: relative; padding: 0 0 14px 18px; }
.logboek li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--control); }
.logboek li::after { content: ""; position: absolute; left: 6px; top: 18px; bottom: 0; width: 1px; background: var(--rule); }
.logboek li:last-child { padding-bottom: 0; }
.logboek li:last-child::after { display: none; }
.logboek li:last-child::before { background: var(--accent); }
.logboek__wie { font-weight: 500; }
.logboek__op { display: block; color: var(--muted); font-size: var(--fs-small); line-height: 16px; }

.melding-ok { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.melding-ok .ic { margin-top: 2px; }

/* Sleutelkastje bij de klus van de vakman (alleen zolang de afspraak staat) */
.sleutelkastje { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--accent-pale); }
.sleutelkastje .ic { margin-top: 2px; color: var(--accent); }
.sleutelkastje > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sleutelkastje__code { font-size: 1.25rem; letter-spacing: .08em; }

/* ---------- tabellen ---------- */
.tabel-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { height: 36px; padding: 0 12px; text-align: left; font-size: var(--fs-small); font-weight: 400; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
td { height: 48px; padding: 8px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
td a { color: var(--text); font-weight: 500; }
.td-sub { display: block; color: var(--muted); font-size: 13px; line-height: 18px; font-weight: 400; }
.streep { color: var(--muted); }

.twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }

/* ---------- velden ---------- */
.veld { display: flex; flex-direction: column; gap: 8px; }
.veld + .veld { margin-top: 16px; }
.veld label, .veld legend, .veld__label { font-weight: 500; line-height: 20px; }
.veld__hulp { color: var(--muted); font-size: 13px; line-height: 18px; margin-top: -4px; }
.invoer { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--control); border-radius: 8px; background: var(--surface); }
textarea.invoer { height: auto; min-height: 112px; padding: 10px 12px; line-height: 21px; resize: vertical; }
select.invoer { appearance: none; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b5d5f' stroke-width='1.5'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center / 18px; padding-right: 36px; }
.invoer:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px #d4e8ee; }
.invoer::placeholder { color: #6b6b6b; }
.veld.is-fout .invoer, .veld.is-fout .keuzes { border-color: var(--negative); }
.fout { display: flex; gap: 6px; align-items: center; color: var(--negative); font-size: 13px; line-height: 18px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* ---------- lightbox ---------- */
dialog.foto { padding: 0; border: 0; background: transparent; max-width: min(92vw, 1100px); }
dialog.foto::backdrop { background: rgba(10, 12, 12, .82); }
dialog.foto img { display: block; max-width: 100%; max-height: 86vh; border-radius: 8px; }
dialog.foto button { position: absolute; top: 8px; right: 8px; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translate(-50%, 16px); opacity: 0; padding: 10px 16px; border-radius: 8px; background: var(--primary); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); transition: opacity .2s var(--ease), transform .2s var(--ease); pointer-events: none; max-width: calc(100vw - 32px); }
.toast.is-zichtbaar { opacity: 1; transform: translate(-50%, 0); }

.voetregel { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 11px; line-height: 16px; }
.voetregel a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 48px auto; }
  .zijbalk { position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(300px, 86vw); background: var(--frame); transform: translateX(-102%); transition: transform .22s var(--ease); box-shadow: 0 0 0 100vmax rgba(10, 12, 12, 0); }
  .app.menu-open .zijbalk { transform: none; box-shadow: 0 0 0 100vmax rgba(10, 12, 12, .35); }
  .bovenbalk { grid-column: 1; padding: 0 12px; }
  .bovenbalk__menu { display: inline-flex; }
  .vel { grid-column: 1; margin: 0 var(--sheet-inset) var(--sheet-inset); }
  .detail { grid-template-columns: minmax(0, 1fr); }
  .rail { order: -1; }
}

/* ---------- telefoon ---------- */
@media (max-width: 640px) {
  :root { --pad: 16px; --gap: 16px; }
  .bovenbalk { gap: 8px; }
  .bovenbalk__titel { display: block; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zoek { display: none; }
  .zoek.is-open { display: block; position: absolute; left: 8px; right: 8px; top: 8px; width: auto; z-index: 35; }
  .zoek input { font-size: 16px; padding-right: 40px; }
  .zoek input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
  .zoek .zoek__sluit { display: inline-flex; position: absolute; right: 0; top: 0; width: 32px; padding: 0; }
  .bovenbalk__zoekknop { display: inline-flex; padding: 0 8px; }
  .zoekpop { max-height: min(60vh, 70dvh); }
  .zoekpop a.zoekpop__optie { min-height: 44px; }
  .vel { margin: 0; border-radius: 16px 16px 0 0; border-bottom: 0; }
  .titelrij { flex-direction: column; gap: 12px; }
  .titelrij__acties { width: 100%; }
  .titelrij__acties .knop { flex: 1; }
  .tellers { display: flex; overflow-x: auto; margin: 0 0 var(--gap); padding: 0 0 2px; scroll-snap-type: x proximity; }
  .teller { flex: none; width: auto; min-width: 116px; height: 56px; scroll-snap-align: start; }
  .fasetabs { display: flex; gap: 4px; overflow-x: auto; margin: 0 0 12px; padding: 0; border-bottom: 1px solid var(--border); }
  .fasetab { flex: none; height: 40px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-weight: 500; cursor: pointer; }
  .fasetab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
  .bord-wrap { margin: 0; padding: 0; overflow: visible; }
  .bord { display: block; min-width: 0; }
  .kolom { display: none; padding: 0; background: none; min-height: 0; }
  .kolom.is-zichtbaar { display: flex; }
  .kolom__kop { display: none; }
  .kolom__uitleg { margin: 0; padding: 0 0 10px; }
  .kaart { cursor: pointer; }
  .gegevens { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .twee { grid-template-columns: minmax(0, 1fr); }
  .knoppenrij .knop { flex: 1 1 auto; height: 44px; }
  .paneel { padding: 16px; }
  th.verberg-tel, td.verberg-tel { display: none; }
}
@media (min-width: 641px) { .fasetabs { display: none; } }

/* ================= huurderformulier en vakmanpagina (los, mobiel eerst) ================= */
.los { min-height: 100vh; background: var(--frame); padding: 0 0 48px; }
.los__kop { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; max-width: 640px; margin: 0 auto; }
.los__kop .zijbalk__naam { font-size: 15px; }
.los__vel { max-width: 640px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.los__vel + .los__vel { margin-top: 12px; }
.los h1 { font-size: 24px; line-height: 30px; }
.los__intro { margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 22px; }
.adreskaart { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 14px 16px; border-radius: 10px; background: var(--raised); }
.adreskaart .ic { margin-top: 2px; color: var(--accent); }
.adreskaart strong { display: block; font-size: 16px; line-height: 22px; font-weight: 600; }
.sectie { margin-top: 32px; }
.sectie > h2 { margin-bottom: 4px; }
.sectie > .veld__hulp { margin: 0 0 12px; }
.spoed { margin-top: 12px; padding: 14px 16px; border-radius: 10px; background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.spoed strong { display: block; font-size: 16px; line-height: 22px; margin-bottom: 4px; }
.spoed a { color: var(--pill-negative-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; font-size: 20px; line-height: 28px; display: inline-block; margin-top: 6px; }
.janee { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.janee .keuze { align-items: center; min-height: 44px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border: 1px solid var(--control); border-radius: 999px; cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease); }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip:has(input:checked) { background: var(--accent-pale); border-color: var(--accent); color: #0f4a59; font-weight: 500; }
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.upload { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.upload__vak { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--raised); }
.upload__vak img, .upload__vak video { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload__weg { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; cursor: pointer; }
.upload__knop { aspect-ratio: 1; border: 1.5px dashed var(--control); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; color: var(--muted); text-align: center; font-size: 13px; line-height: 17px; cursor: pointer; background: var(--surface); }
.upload__knop:hover { border-color: var(--accent); color: var(--accent); }
.upload__knop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload__knop:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.upload__knop .ic { width: 22px; height: 22px; }
.schakel { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.schakel input { appearance: none; flex: none; width: 34px; height: 20px; margin-top: 1px; border-radius: 999px; background: var(--control); position: relative; cursor: pointer; transition: background .15s var(--ease); }
.schakel input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s var(--ease); }
.schakel input:checked { background: var(--positive); }
.schakel input:checked::after { transform: translateX(14px); }
.schakel input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.versturen { margin-top: 32px; }
.versturen p { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 18px; }
.foutlijst { margin-top: 16px; padding: 12px 14px; border-radius: 8px; background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.foutlijst ul { margin: 6px 0 0; padding-left: 18px; }
.bevestiging__nummer { display: inline-block; margin: 8px 0 4px; font-family: var(--mono); font-size: 22px; line-height: 30px; font-weight: 500; }
.stappen { margin: 16px 0 0; padding-left: 20px; line-height: 22px; }
.stappen li + li { margin-top: 8px; }
.demobalk { max-width: 640px; margin: 0 auto 12px; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 13px; color: var(--muted); }
.demobalk select { height: 32px; border: 1px solid var(--control); border-radius: 6px; background: var(--surface); padding: 0 8px; max-width: 100%; }
@media (max-width: 640px) {
  .los__vel { border-radius: 0; border-left: 0; border-right: 0; padding: 20px 16px; }
  .los__vel + .los__vel { margin-top: 8px; }
  .janee { grid-template-columns: 1fr; }
}

/* =====================================================================================
   Reparatiebeheer V1: aanvullingen op de demo-stijl (zelfde tokens, zelfde rustige vel-stijl).
   ===================================================================================== */
.nav__link[aria-current="page"] { background: var(--active); color: var(--text); font-weight: 500; }
.zijbalk__wie { color: var(--text); border-radius: 8px; padding: 8px 10px; }
.zijbalk__wie:hover, .zijbalk__wie[aria-current="page"] { background: var(--active); text-decoration: none; }
.zijbalk__voet form { margin: 0; }
.voorbeeld a { color: inherit; text-decoration: underline; }
body.is-los, body.is-vakman { background: var(--frame); }
.los__voet { max-width: 640px; margin: 16px auto 0; padding: 0 16px; color: var(--muted); font-size: 12px; }
.los__kop .merk { width: 28px; height: 28px; }
.merk { width: 28px; height: 28px; flex: none; }

/* meldingen bovenaan (na een actie) */
.flits { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; padding: 10px 14px; border-radius: 8px; background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.flits--fout { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.flits .ic { flex: none; margin-top: 2px; }

/* mail: staat uit op de server (rode balk), of een mail van deze stap is niet verstuurd */
.balk-rood { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; padding: 12px 14px; border-radius: 8px; background: var(--pill-negative-bg); color: var(--pill-negative-ink); box-shadow: inset 0 0 0 1px #e9b8b5; }
.balk-rood .ic { flex: none; margin-top: 2px; }
.mail-mislukt { margin: 16px 0 0; padding: 14px 16px; border-radius: 10px; background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.mail-mislukt h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.mail-mislukt ul { list-style: none; margin: 10px 0 0; padding: 0; }
.mail-mislukt li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 8px 0; border-top: 1px solid #e9b8b5; }
.mail-mislukt li > span { min-width: 0; overflow-wrap: anywhere; }
.mail-mislukt a { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.mail-mislukt form { margin: 0; }
.mail-mislukt p { margin: 6px 0 0; }

/* formulieren */
.formulier { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.formulier--breed { max-width: none; }
.formulier .veld + .veld { margin-top: 0; }
.formulier .knoppenrij { margin-top: 4px; }
.veld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.veld__label { font-weight: 500; }
.veld__label h2 { display: inline; }
.veld-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.invoer { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font: inherit; }
textarea.invoer { resize: vertical; line-height: 21px; }
.invoer--klein { min-height: 32px; height: 32px; padding: 4px 10px; width: auto; max-width: 100%; }
.vinkje { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; line-height: 20px; }
.vinkje input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.veld.is-fout .vinkje { color: var(--pill-negative-ink); }
.fout { display: flex; gap: 6px; align-items: center; color: var(--negative); font-size: 13px; }
fieldset.veld, fieldset.sectie { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.sectie { margin-top: 32px; }
fieldset legend { padding: 0; margin-bottom: 6px; }
.keuzes { display: flex; flex-direction: column; gap: 8px; }
.keuzes--rij { flex-direction: row; flex-wrap: wrap; }
.keuzes--rij .keuze { flex: 1 1 240px; }
.keuze input { accent-color: var(--accent); margin-top: 3px; }
.keuze__tekst { display: flex; flex-direction: column; gap: 2px; }
.keuze__sub { color: var(--muted); font-size: 13px; font-weight: 400; }
.chip span { position: relative; }
.chip:has(input:checked) { background: var(--accent-pale); border-color: var(--accent); color: #0f4a59; font-weight: 500; }
.inline-form { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.knop--klein { height: 28px; padding: 0 10px; font-size: 13px; }
.knop--klein .ic { width: 14px; height: 14px; }
.tekstknop { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tekstknop:hover { text-decoration: underline; }

/* filters boven het bord */
.filterrij { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: -8px 0 var(--gap); }
.segment { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--raised); border: 1px solid var(--border); }
.segment a { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 6px; color: var(--muted); font-weight: 500; }
.segment a:hover { color: var(--text); text-decoration: none; }
.segment a[aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
.filterrij .pil a { color: inherit; display: inline-flex; }
a.teller { color: var(--text); text-decoration: none; }
.teller--spoed .teller__waarde { color: var(--negative); }
a.fasetab { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }

/* kaarten */
.kaart--spoed { box-shadow: inset 3px 0 0 var(--negative); }
.kaart__nr { color: var(--muted); font-size: 11px; margin-left: auto; margin-right: 8px; }
.kaart__beheerder { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--control); color: var(--muted); font-size: 10px; font-weight: 600; }
.kaart__rechts { display: inline-flex; gap: 4px; align-items: center; }

/* meldingdetail */
.vragen { margin: 0 0 16px; display: flex; flex-direction: column; gap: 14px; }
.vragen dt { color: var(--muted); font-size: 13px; margin-bottom: 2px; }
.vragen dd { margin: 0; font-size: 15px; line-height: 23px; overflow-wrap: anywhere; }
.galerij { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; margin-top: 4px; }
.galerij--groot { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.galerij__item { display: block; margin: 0; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--raised); border: 1px solid var(--border); }
.galerij__item img, .galerij__item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerij__item--bestand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; text-align: center; font-size: 13px; line-height: 17px; color: var(--muted); }
.opslag__meter { display: block; width: 100%; max-width: 420px; height: 12px; margin: 8px 0 12px; }
.opslag__lijst { margin: 0 0 12px; padding-left: 20px; }
.upload__melding { font-size: 13px; line-height: 18px; color: var(--muted); margin-top: 6px; }
.upload__melding.is-fout { color: var(--pill-negative-ink); }
.galerij__item--video video { object-fit: contain; background: #111; }
.toevoegen { margin-top: 16px; }
.toevoegen > summary { cursor: pointer; color: var(--accent); font-weight: 500; width: fit-content; }
.toevoegen > summary:hover { text-decoration: underline; }
.toevoegen[open] > summary { margin-bottom: 12px; }
.momenten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.momenten li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border-radius: 8px; background: var(--raised); }
.momenten li.is-gekozen { background: var(--pill-positive-bg); color: var(--pill-positive-ink); font-weight: 500; }
.paneel--spoed { border-color: #f3c7c3; background: linear-gradient(var(--pill-negative-bg), var(--pill-negative-bg)) top / 100% 4px no-repeat, var(--surface); }
.gegevens--smal { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 10px; }
.gegevens--smal dd .pil { margin-right: 6px; }
.voorstel__stap { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-weight: 500; }
.voorstel__stap .ic { flex: none; margin-top: 2px; color: var(--accent); }
.voorstel--wacht { margin-bottom: 12px; background: var(--raised); }
.persoon { display: flex; gap: 10px; align-items: center; }
.persoon strong { display: block; }
.moment-rij { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 8px; }
.bericht__tekst { padding: 12px; line-height: 21px; }
.mailtekst { font-size: 15px; line-height: 23px; max-width: 70ch; overflow-wrap: anywhere; }
.mailvan { margin: -8px 0 16px; overflow-wrap: anywhere; }
.mailkader { padding: 0; overflow: hidden; }
.mailvoorbeeld { display: block; width: 100%; height: 720px; border: 0; background: var(--frame); }
.mailtekstversie { margin-top: var(--gap); }
.mailtekstversie > summary { cursor: pointer; font-weight: 600; }
.mailtekstversie[open] > summary { margin-bottom: 12px; }
.afzender { line-height: 20px; overflow-wrap: anywhere; }

/* dialoog (bevestiging, AI-controle, afronden) */
dialog.dialoog { width: min(480px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 24px 64px rgba(10, 12, 12, .24); }
dialog.dialoog::backdrop { background: rgba(10, 12, 12, .45); }
dialog.dialoog h2 { font-size: 18px; line-height: 24px; margin-bottom: 8px; }
dialog.dialoog p { color: var(--muted); }
dialog.dialoog .stappen { margin-top: 8px; }
dialog.dialoog textarea { margin-top: 12px; }
dialog.dialoog .knoppenrij { margin-top: 20px; }

/* tabellen en lijsten */
.paneel--tabel { overflow-x: auto; }
.tabel td .lijst__sub { display: block; }
.tabel tr.is-uit td, .lijst li.is-uit { opacity: .55; }
.tabel__acties { white-space: nowrap; text-align: right; }
.tabel__acties form { display: inline; }
.tabel--klein td { height: 36px; font-size: 13px; }
.kolommen-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--gap); align-items: start; }
.kolommen-2 .paneel + .paneel { margin-top: 0; }
.eenheden li { flex-wrap: wrap; scroll-margin-top: 80px; }
.eenheden li:target { background: var(--accent-pale); box-shadow: 0 0 0 8px var(--accent-pale); border-radius: 2px; }
.eenheid__acties { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.linkveld { display: block; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.meer { position: relative; }
.meer > summary { list-style: none; }
.meer > summary::-webkit-details-marker { display: none; }
.meer__menu { position: absolute; right: 0; top: 32px; z-index: 20; min-width: 240px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 20, 18, .12); display: flex; flex-direction: column; }
.meer__menu .tekstknop { width: 100%; padding: 8px 10px; border-radius: 6px; color: var(--text); }
.meer__menu .tekstknop:hover { background: var(--active); text-decoration: none; }
.qr { flex-basis: 100%; display: flex; gap: 16px; align-items: center; margin-top: 12px; padding: 12px; border-radius: 8px; background: var(--raised); }
.qr img { background: #fff; border-radius: 8px; padding: 6px; flex: none; }
.tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: var(--gap); border-bottom: 1px solid var(--border); }
.tab { flex: none; height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 500; }
.tab:hover { color: var(--text); text-decoration: none; }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }

/* losse pagina's: huurder en vakman */
.los__vel h1 + .gedempt, .los__vel h1 + .los__intro { margin-bottom: 16px; }
.los__vel > h1 { margin-bottom: 4px; }
.los__vel .formulier { margin-top: 16px; }
.adreskaart { margin-top: 16px; }
.adreskaart div { display: flex; flex-direction: column; gap: 2px; }
.sectie h2 { margin-bottom: 4px; }
.veld__hulp { color: var(--muted); font-size: 14px; line-height: 20px; }
.spoedlijst { margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: var(--pill-warning-bg); box-shadow: inset 0 0 0 1px var(--pill-warning-line); color: var(--pill-warning-ink); line-height: 21px; }
.spoedlijst ul { margin: 6px 0 0; padding-left: 18px; }
.spoedlijst p { margin-top: 8px; }
.upload__vak.is-bezig { display: grid; place-items: center; color: var(--muted); font-size: 12px; text-align: center; padding: 8px; }
.upload__vak progress { width: 80%; accent-color: var(--accent); }
.upload__knop { position: relative; }
.upload__knop--breed { aspect-ratio: auto; flex-direction: row; min-height: 56px; }
.bericht-blok { text-align: center; padding: 24px 8px; }
.bericht-blok h1 { margin-top: 12px; }
.bericht-blok p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 22px; }
.bericht-blok__ic { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--pill-positive-bg); color: var(--positive); }
.bericht-blok__ic--let, .bericht-blok__ic--klok, .bericht-blok__ic--mail { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }
.bericht-blok__ic .ic { width: 24px; height: 24px; }
.melding-ok { margin-bottom: 16px; }

/* datumprikker */
.datumprikker__teller { position: sticky; top: 0; z-index: 5; margin: 16px -24px 0; padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--rule); font-weight: 600; }
.datumprikker__teller.is-klaar { color: var(--positive); }
.datumprikker__dagen { list-style: none; margin: 0; padding: 0; }
.dag { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.dag__naam { font-weight: 500; }
.dag--weekend .dag__naam { color: var(--pill-warning-ink); }
.dag__delen { display: flex; gap: 6px; }
.dagdeel { position: relative; cursor: pointer; }
.dagdeel input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.dagdeel span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 84px; height: 48px; padding: 0 10px; border: 1px solid var(--control); border-radius: 8px; font-weight: 500; line-height: 16px; }
.dagdeel small { color: var(--muted); font-weight: 400; font-size: 11px; }
.dagdeel--extra span { border-style: dashed; }
.dagdeel input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.dagdeel input:checked + span small { color: rgba(255, 255, 255, .8); }
.dagdeel input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.dagdeel input:disabled + span { opacity: .4; }
.versturen--plak { position: sticky; bottom: 0; margin: 16px -24px -24px; padding: 12px 24px 16px; background: linear-gradient(rgba(255, 255, 255, 0), var(--surface) 30%); }
/* Focus nooit achter de vaste balken (WCAG 2.4.11): scrol zo dat het element ruim vrij staat. */
html:has(.versturen--plak) { scroll-padding-bottom: 104px; }
html:has(.datumprikker__teller) { scroll-padding-top: 56px; }
.cijfers { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.cijfer { position: relative; }
.cijfer input { position: absolute; opacity: 0; inset: 0; }
.cijfer span { display: grid; place-items: center; height: 44px; border: 1px solid var(--control); border-radius: 8px; font-weight: 600; cursor: pointer; }
.cijfer input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.cijfer input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* vakman-app */
.titelrij--los { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.klussen { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.klus { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-card); color: var(--text); }
.klus:hover { border-color: var(--accent); text-decoration: none; }
.klus__titel { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.klus__sub { color: var(--muted); }
.klus__wanneer { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent); font-weight: 500; }

@media (max-width: 1100px) {
  .zoek { margin: 0; }
}
@media (max-width: 640px) {
  .filterrij { margin-top: -4px; }
  .filterrij select { flex: 1; }
  .kolommen-2 { grid-template-columns: minmax(0, 1fr); }
  .moment-rij { grid-template-columns: minmax(0, 1fr) 110px; }
  .dag { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .dag__delen { width: 100%; }
  .dagdeel { flex: 1; }
  .dagdeel span { min-width: 0; }
  .datumprikker__teller { margin: 12px -16px 0; padding: 10px 16px; }
  .versturen--plak { margin: 16px -16px -20px; padding: 12px 16px 16px; }
  .cijfers { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .qr { flex-direction: column; align-items: flex-start; }
  .linkveld { max-width: 28ch; }
  .eenheid__acties { justify-content: flex-start; width: 100%; }
  .tabel thead { display: none; }
  .tabel, .tabel tbody, .tabel tr, .tabel td { display: block; width: 100%; }
  .tabel tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .tabel td { height: auto; padding: 2px 0; border: 0; text-align: left; }
  .tabel td.num { text-align: left; }
  .tabel td[data-label]:not([data-label="Pand"]):not([data-label="Vakman"])::before { content: attr(data-label) ": "; color: var(--muted); }
  .tabel__acties { text-align: left; padding-top: 8px !important; }
  .bovenbalk__titel { display: none; }
}
.melding-ok__titel { margin: 0; font-size: inherit; line-height: inherit; font-weight: 600; color: inherit; }

/* ---------- wat is er nieuw (lib/wat_nieuw.php) ---------- */
dialog.nieuws { width: min(560px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 48px)); padding: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 24px 64px rgba(10, 12, 12, .24); overflow: hidden; }
dialog.nieuws[open] { display: flex; flex-direction: column; }
dialog.nieuws::backdrop { background: rgba(10, 12, 12, .45); }
.nieuws__vak { display: flex; flex-direction: column; min-height: 0; margin: 0; }
.nieuws__kop { padding: 24px 24px 16px; background: var(--accent-pale); border-bottom: 1px solid var(--rule); }
.nieuws__label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #0f4a59; }
.nieuws__kop h2 { margin-top: 4px; font-size: 20px; line-height: 26px; }
.nieuws__kop h2:focus, .nieuws__kop h2:focus-visible { outline: none; }
.nieuws__intro { margin-top: 6px; color: var(--muted); }
.nieuws__lijst { overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px; }
.nieuws__update { padding: 16px 0; }
.nieuws__update + .nieuws__update { border-top: 1px solid var(--rule); }
.nieuws__titel { font-size: 16px; line-height: 22px; font-weight: 600; }
.nieuws__datum { margin: 2px 0 8px; font-size: 14px; color: var(--muted); }
.nieuws__punten { margin: 0; padding-left: 20px; line-height: 1.55; }
.nieuws__punten li { margin-bottom: 6px; }
.nieuws__punten li::marker { color: var(--accent); }
.nieuws__voet { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 16px 24px 24px; border-top: 1px solid var(--rule); }
.nieuws--pagina { max-width: 720px; padding-top: 8px; padding-bottom: 8px; }
.nieuws--pagina .nieuws__titel { font-size: 18px; line-height: 24px; }
@media (max-width: 600px) {
  .nieuws__kop { padding: 20px 16px 12px; }
  .nieuws__lijst { padding: 4px 16px; }
  .nieuws__voet { flex-direction: column-reverse; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
  .nieuws__voet .knop { justify-content: center; }
}

/* ---------- de bel: wie je noemde ---------- */
.bel { position: relative; flex: none; margin-left: auto; }
.bel__knop { position: relative; width: 36px; padding: 0; }
.bel__teller { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--negative); color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; }
.bel__lijst { display: none; position: fixed; inset: 52px 12px auto auto; margin: 0; width: min(380px, calc(100vw - 24px)); max-height: min(70vh, 560px); overflow: auto; padding: 0; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: 0 12px 32px rgba(20, 20, 18, .16); z-index: 50; }
.bel__lijst.is-open { display: block; }
.bel__lijst:popover-open { display: block; }
.bel__kop { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface); border-bottom: 1px solid var(--rule); }
.bel__lijst ul { list-style: none; margin: 0; padding: 4px; }
.bel__lijst li a { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 6px; color: var(--text); }
.bel__lijst li a:hover, .bel__lijst li a:focus-visible { background: var(--active); text-decoration: none; }
.bel__lijst li.is-nieuw a { background: var(--accent-pale); }
.bel__lijst li.is-nieuw a:hover { background: #d6e8ee; }
.bel__wie { line-height: 18px; }
.bel__tekst { color: var(--muted); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.bel__op { color: var(--muted); font-size: var(--fs-small); line-height: 16px; }
.bel__leeg { padding: 14px; }

/* ---------- logboek: notities van beheerders en @-noemen ---------- */
.logboek li.logboek__notitie .logboek__tekst { display: block; margin-top: 4px; padding: 8px 10px; border-radius: 6px; background: var(--pill-warning-bg); box-shadow: inset 0 0 0 1px var(--pill-warning-line); overflow-wrap: anywhere; }
.logboek li.logboek__notitie::before { background: var(--pill-warning-ink); }
.logboek li:target .logboek__tekst { box-shadow: inset 0 0 0 2px var(--accent); }
.logboek__soort { color: var(--muted); font-size: var(--fs-small); }
.genoemd { color: var(--accent); font-weight: 600; }
.notitie-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); max-width: none; }
.notitie-form textarea { width: 100%; resize: vertical; min-height: 72px; }
.noem { position: relative; }
.noem__lijst { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; list-style: none; margin: 4px 0 0; padding: 4px; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: 0 8px 24px rgba(20, 20, 18, .12); }
.noem__lijst li { padding: 10px; border-radius: 6px; cursor: pointer; min-height: 40px; }
.noem__lijst li[aria-selected="true"], .noem__lijst li:hover { background: var(--active); }

/* ---------- pushmeldingen instellen ---------- */
.push-iphone { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; padding: 10px 12px; border-radius: 8px; background: var(--raised); color: var(--text); }
.push-iphone .ic { flex: none; margin-top: 2px; color: var(--muted); }
.push-kop { display: block; margin: 18px 0 8px; font-size: var(--fs-body); font-weight: 600; }
.push-soorten fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.push-soorten .schakel span { line-height: 20px; }
.push-geen { margin: 16px 0 0; }

/* ---------- feedback (lib/feedback.php) ---------- */
/* In de bovenbalk: zoekbalk, dan Feedback en de bel samen rechts. Op de telefoon alleen het icoon, even groot als de bel. */
.feedbackknop { flex: none; margin-left: auto; padding: 0 10px; }
.feedbackknop + .bel { margin-left: 0; }
dialog.dialoog--feedback { width: min(520px, calc(100vw - 32px)); }
dialog.dialoog--feedback .foutlijst { margin-top: 12px; }
dialog.dialoog--feedback .veld { margin-top: 14px; }
dialog.dialoog--feedback textarea { margin-top: 0; }
.feedback__kop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; }
.feedback__wie { flex: 1; min-width: 0; }
.feedback__gegevens { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 10px 0 0; font-size: 14px; line-height: 20px; }
.feedback__gegevens div { display: flex; gap: 6px; min-width: 0; }
.feedback__gegevens dt { color: var(--muted); }
.feedback__gegevens dd { margin: 0; overflow-wrap: anywhere; }
.feedback .galerij { max-width: 280px; margin-top: 12px; }
.feedback__status { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.feedback__status .veld { margin: 0; }
.feedback__notitie { flex: 1 1 260px; }
@media (max-width: 640px) {
  .bovenbalk .feedbackknop { width: 36px; padding: 0; }
  .bovenbalk .feedbackknop__tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .feedback__status .knop { flex: 1 1 100%; }
}
.feedbackgesprek__lijst { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: min(46vh, 380px); overflow-y: auto; }
.feedbackgesprek__bericht { max-width: 88%; padding: 10px 12px; border-radius: 12px; background: var(--raised); }
dialog .feedbackgesprek__bericht p { margin: 0; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.feedbackgesprek__bericht--gebruiker { align-self: flex-end; background: var(--accent-pale); border-bottom-right-radius: 4px; }
.feedbackgesprek__bericht--assistent { align-self: flex-start; border-bottom-left-radius: 4px; }
.feedbackgesprek__bericht--melding { align-self: stretch; max-width: none; background: none; padding: 0; }
dialog .feedbackgesprek__bericht--melding p { color: var(--muted); }
.feedbackgesprek__wie { display: block; margin-bottom: 2px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.feedbackgesprek .knoppenrij { margin-top: 16px; }
.feedback__samenvatting { margin-bottom: 8px; font-weight: 500; }
.feedback__gesprek { margin-top: 12px; }
.feedback__gesprek summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.feedback__gesprek ol { list-style: none; margin: 8px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--rule); display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 20px; }
.feedback__gesprek li.is-assistent { color: var(--muted); }

/* Factuuradres na het afmelden (vakman-app en de link uit de mail) */
.factuur { padding: 14px 16px; border-radius: var(--radius-card); background: var(--accent-pale); }
.factuur h2 { display: flex; align-items: center; gap: 8px; }
.factuur h2 .ic { color: var(--accent); }
.factuur p { margin: 6px 0 0; }
.factuur__adres { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-control); background: var(--surface); font-style: normal; line-height: 22px; }
.factuur .gegevens { margin-top: 10px; }

/* Vakman-app: knoppen naast de titel van het hoofdscherm */
.knoppenrij--klein { margin-top: 0; gap: 4px; }
.knoppenrij--klein form { display: contents; }

/* Alleen in de demo: "Bekijk als vakman" */
.bekijkbalk { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 16px; background: var(--primary); color: #fff; font-size: var(--fs-small); }
.bekijkbalk p { display: flex; align-items: center; gap: 8px; margin: 0; }
.bekijkbalk .knop { background: #fff; color: var(--primary); border-color: #fff; }
.bekijk-als .filterrij { margin: 0; }