/* LocatieGram — opmaak.
 *
 * Volgt het Stijlboek Zozijn-apps (Confluence RP 412909569). Er staat geen enkele
 * kleurwaarde in dit bestand: kleur, font, radius, schaduw en lagen komen uit
 * zozijn-tokens.css, dat ongewijzigd uit de gedeelde set komt en vóór dit bestand
 * geladen wordt. Wit op kleur is var(--zz-surface); doorschijnend wit op de
 * magenta header via color-mix() op dat token. Tests en de skill huisstijl-check
 * bewaken dit.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--zz-font); background: var(--zz-bg); color: var(--zz-text); min-height: 100vh; line-height: var(--zz-lh); }
.u-display-none { display: none !important; }
.u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Focus ──────────────────────────────────────────────────────────── */
button:focus-visible, a:focus-visible, [role="tab"]:focus-visible {
  outline: 2px solid var(--zz-magenta); outline-offset: 2px; }
header button:focus-visible { outline-color: var(--zz-surface); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--zz-magenta); box-shadow: var(--zz-focus-ring); }

/* ── Omgevingsbanner (niet op productie) ────────────────────────────── */
.env-banner { text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .3rem 1rem; color: var(--zz-surface); }
.env-banner.env-dev  { background: var(--zz-env-dev); }
.env-banner.env-tst  { background: var(--zz-env-test); }
.env-banner.env-test { background: var(--zz-env-test); }
.env-banner.env-acc  { background: var(--zz-env-acc); }
.env-banner.env-prd, .env-banner.env-prod, .env-banner.env-__APP_ENV__ { display: none; }

/* ── Laden ──────────────────────────────────────────────────────────── */
#app-loader { position: fixed; inset: 0; background: color-mix(in srgb, var(--zz-surface) 92%, transparent);
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; z-index: var(--zz-z-loader); }
#app-loader.show { display: flex; }
.spinner { width: 42px; height: 42px; border: 4px solid var(--zz-border); border-top-color: var(--zz-magenta);
  border-radius: 50%; animation: spin .8s linear infinite; }
.loader-text { color: var(--zz-muted); font-size: var(--zz-fs-base); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Aanmelden ──────────────────────────────────────────────────────── */
#login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { background: var(--zz-surface); border-radius: var(--zz-radius-xl); padding: 2.5rem; text-align: center;
  box-shadow: var(--zz-shadow-toast); max-width: 400px; width: 90%; }
.login-card .logo img { height: 64px; width: auto; margin-bottom: .75rem; }
.login-card h1 { font-size: var(--zz-fs-xl); color: var(--zz-heading); margin-bottom: .5rem; }
.login-card p { font-size: var(--zz-fs-base); color: var(--zz-muted); margin-bottom: 1.5rem; }

/* ── Header ─────────────────────────────────────────────────────────── */
header { background: var(--zz-magenta); color: var(--zz-surface); padding: .875rem 1.5rem; display: flex;
  align-items: center; justify-content: space-between; box-shadow: var(--zz-shadow-header);
  border-bottom: 3px solid var(--zz-lime); }
header h1 { font-size: var(--zz-fs-lg); font-weight: 700; }
header small { font-size: .75rem; opacity: .85; }
.merk { display: flex; align-items: center; gap: .85rem; }
.merk img { height: 34px; width: auto; flex: none; }
.user-info { display: flex; align-items: center; gap: .75rem; font-size: .85rem; }
.role-badge { background: color-mix(in srgb, var(--zz-surface) 20%, transparent); border-radius: var(--zz-radius-pill);
  padding: .2rem .65rem; font-size: var(--zz-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.btn-ghost { background: transparent; color: var(--zz-surface); border: 1px solid color-mix(in srgb, var(--zz-surface) 40%, transparent);
  border-radius: var(--zz-radius); padding: .35rem .75rem; font-size: var(--zz-fs-sm); cursor: pointer; font-family: inherit; }
.btn-ghost:hover { background: color-mix(in srgb, var(--zz-surface) 15%, transparent); }

/* ── Navigatie ──────────────────────────────────────────────────────── */
nav { background: var(--zz-surface); border-bottom: 1px solid var(--zz-border); padding: 0 1.5rem; display: flex; overflow-x: auto; }
.nav-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: .85rem 1rem; font-size: var(--zz-fs-base);
  color: var(--zz-muted); cursor: pointer; white-space: nowrap; font-family: inherit; }
.nav-tab:hover { color: var(--zz-text); }
.nav-tab.active { color: var(--zz-magenta); border-bottom-color: var(--zz-magenta); font-weight: 600; }

main { margin: 1.5rem auto; padding: 0 1.5rem; }
/* Lijstschermen houden de standaardbreedte; het boom+detailscherm mag breder,
   zodat lange namen in de boom leesbaar blijven. */
main > section { max-width: var(--zz-content-max); margin: 0 auto; }
main > section.split { max-width: 1680px; }
.split { display: grid; grid-template-columns: minmax(360px, 2fr) minmax(0, 3fr); gap: 1.25rem; align-items: start; }
/* min-width 0: anders rekt een brede tabel of tabbalk in het detail de hele pagina op (smal scherm). */
.split > * { min-width: 0; }
/* Lijstschermen: het detail opent rechts op het scherm zelf; zonder keuze is de lijst vol breed. */
main > section.split-lijst.heeft-detail { max-width: 1680px; }
.split-lijst.heeft-detail { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: 1.25rem; align-items: start; }
.split-lijst > * { min-width: 0; }
.split-lijst:not(.heeft-detail) > .detail-host { display: none; }
/* Het detail blijft in beeld terwijl je door een lange lijst scrolt. */
.split-lijst.heeft-detail > .detail-host { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
/* ── Kaarten ────────────────────────────────────────────────────────── */
.card { background: var(--zz-surface); border-radius: var(--zz-radius-lg); box-shadow: var(--zz-shadow-card); padding: 1.25rem; margin-bottom: 1.25rem; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.card-header h2 { font-size: var(--zz-fs-md); font-weight: 600; color: var(--zz-heading); }
.hint { font-size: .8rem; color: var(--zz-muted); margin-bottom: .75rem; }
.notice { background: var(--zz-magenta-soft); border-left: 4px solid var(--zz-magenta); color: var(--zz-grey-dark);
  padding: .75rem 1rem; border-radius: var(--zz-radius); font-size: .85rem; margin: 0 auto 1.25rem; max-width: var(--zz-content-max); }
/* Meldingsbalk (onder de navigatie): regels die blijven staan zolang de situatie duurt. */
.meldingsbalk .notice { margin-top: 1rem; }
.notice.melding-fout { background: var(--zz-danger-soft); border-left-color: var(--zz-danger); color: var(--zz-danger-text); font-weight: 600; }
.empty-state { text-align: center; color: var(--zz-muted); padding: 2rem 1rem; font-size: var(--zz-fs-base); }
.empty-state.error { color: var(--zz-danger-text); }

/* ── Knoppen ────────────────────────────────────────────────────────── */
.btn { border: none; border-radius: var(--zz-radius); padding: .5rem 1rem; font-size: var(--zz-fs-sm); font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background .15s; }
.btn-sm { padding: .35rem .7rem; font-size: .75rem; }
.btn-lg { padding: .75rem 1.5rem; font-size: .9rem; }
.btn-primary { background: var(--zz-magenta); color: var(--zz-surface); }
.btn-primary:hover { background: var(--zz-magenta-hover); }
.btn-secondary { background: var(--zz-border); color: var(--zz-heading); }
.btn-secondary:hover { background: var(--zz-border-input); }
.btn-danger { background: var(--zz-danger); color: var(--zz-surface); }
.btn-danger:hover { background: var(--zz-danger-hover); }
.btn-outline { background: var(--zz-surface); color: var(--zz-magenta); border: 1px solid var(--zz-magenta); }
.btn-outline:hover { background: var(--zz-magenta-soft); }
.btn:disabled, button:disabled { background: var(--zz-disabled-bg); color: var(--zz-disabled-text); cursor: not-allowed; border-color: transparent; }
.link-btn { background: none; border: none; color: var(--zz-magenta); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }

/* ── Boom ───────────────────────────────────────────────────────────── */
.tree-tools { position: relative; margin-bottom: .75rem; display: grid; gap: .5rem; }
/* Weergave: drie standen als gesegmenteerde knop. De radio's blijven echte radio's
   (toetsenbord: pijltjes binnen de groep), visueel verborgen; het label is de knop. */
.weergave { border: none; display: flex; align-items: center; gap: .4rem .6rem; flex-wrap: wrap; font-size: .8rem; color: var(--zz-heading); margin-bottom: .75rem; }
.weergave legend { font-weight: 600; float: left; margin-right: .25rem; }
/* Adres koppelen bij aanmaken (complex, pand, eenheid). */
.adres-keuze { border: 1px solid var(--zz-border); border-radius: var(--zz-radius); padding: .6rem .8rem .8rem; margin-top: 1rem; }
.adres-keuze legend { font-weight: 600; color: var(--zz-heading); padding: 0 .3rem; }
.adres-keuze .form-grid, .adres-keuze .hint { margin-top: .6rem; }
/* Gesegmenteerde knop: maat en opmaak horen bij .segment zelf, niet bij de omgeving,
   zodat hij in een formulier precies zo oogt als bij Weergave (stijlboek). */
.segment { display: inline-flex; align-self: flex-start; border: 1px solid var(--zz-magenta); border-radius: var(--zz-radius); overflow: hidden; font-size: .8rem; line-height: normal; }
.segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segment label { padding: .3rem .65rem; cursor: pointer; color: var(--zz-magenta); background: var(--zz-surface); font-weight: 600; }
.segment label + input + label { border-left: 1px solid var(--zz-magenta); }
.segment input:checked + label { background: var(--zz-magenta); color: var(--zz-surface); }
.segment input:focus-visible + label { outline: 2px solid var(--zz-magenta); outline-offset: 2px; position: relative; }
.weergave input[type="date"] { padding: .25rem .4rem; border: 1px solid var(--zz-border-input); border-radius: var(--zz-radius); font: inherit; }
.tree { max-height: 70vh; overflow-y: auto; font-size: var(--zz-fs-base); }
.tree ul { list-style: none; padding-left: 1rem; }
.tree > ul { padding-left: 0; }
.tree-row { display: flex; align-items: center; gap: .25rem; }
.tree-toggle { width: 1.5rem; height: 1.5rem; flex: none; background: none; border: none; cursor: pointer; color: var(--zz-muted);
  border-radius: var(--zz-radius-sm); font-size: .75rem; }
.tree-toggle:hover { background: var(--zz-border-subtle); }
.tree-spacer { width: 1.5rem; flex: none; }
.tree-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: .4rem; background: none; border: none; text-align: left;
  padding: .3rem .4rem; border-radius: var(--zz-radius-sm); cursor: pointer; font: inherit; color: var(--zz-text); }
.tree-label:hover { background: var(--zz-table-head); }
.tree-label.is-selected { background: var(--zz-magenta-soft); color: var(--zz-magenta-hover); font-weight: 600; }
.tree-label { align-items: flex-start; }
.tree-label .naam { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
/* Typelabel per niveau. Bewust omlijnd en neutraal: de gevulde groene/amber
   badges betekenen status (Actief/Toekomstig), een type mag daar niet op lijken. */
.node-type { flex: none; font-size: var(--zz-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border-radius: var(--zz-radius-sm); padding: .1rem .35rem; margin-top: .1rem; min-width: 4.6rem; text-align: center; }
.node-type { background: var(--zz-surface); border: 1px solid var(--zz-border-input); color: var(--zz-muted); }
.node-type.type-complex { border-color: var(--zz-magenta); color: var(--zz-magenta-hover); }
.tree-label .naam.geen-naam { color: var(--zz-muted); font-style: italic; }
.tree-label .teller { color: var(--zz-muted); font-size: .75rem; flex: none; margin-top: .15rem; white-space: nowrap; }
.tree-synthetic > .tree-row .tree-label { color: var(--zz-warning-text); font-style: italic; }
/* 'Alleen beëindigd': nog actieve ouders staan er als context, gedempt en met een label. */
.tree-label.is-context .naam { color: var(--zz-muted); }

/* ── Badges ─────────────────────────────────────────────────────────── */
.badge { display: inline-block; padding: .1rem .5rem; border-radius: var(--zz-radius-pill); font-size: var(--zz-fs-xs); font-weight: 700; flex: none; }
.badge.active  { background: var(--zz-success-soft); color: var(--zz-success-text); }
.badge.future  { background: var(--zz-warning-soft); color: var(--zz-warning-text); border: 1px solid var(--zz-warning-border); }
.badge.expired { background: var(--zz-neutral-soft); color: var(--zz-neutral-text); }
.badge.unknown { background: var(--zz-neutral-soft); color: var(--zz-neutral-text); }
.badge.match     { background: var(--zz-success-soft); color: var(--zz-success-text); }
.badge.different { background: var(--zz-warning-soft); color: var(--zz-warning-text); border: 1px solid var(--zz-warning-border); }
.badge.readonly  { background: var(--zz-neutral-soft); color: var(--zz-neutral-text); }
.badge.context   { background: var(--zz-surface); color: var(--zz-neutral-text); border: 1px solid var(--zz-border); font-weight: 600; }

/* ── Paginering ─────────────────────────────────────────────────────── */
.pager { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; margin-top: .75rem; font-size: var(--zz-fs-sm); }
.pager-status { color: var(--zz-muted); }
.pager-knoppen { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.pager select { padding: .25rem .4rem; border: 1px solid var(--zz-border-input); border-radius: var(--zz-radius); font: inherit; }

/* ── Zoekende keuzelijst (combobox) ─────────────────────────────────── */
.combo { position: relative; display: flex; flex-direction: column; gap: .3rem; }
/* In de flow, niet absoluut: de modal-body scrolt en zou een zwevende lijst afknippen. */
.combo-lijst { list-style: none; background: var(--zz-surface); border: 1px solid var(--zz-border);
  border-radius: var(--zz-radius); box-shadow: var(--zz-shadow-card-hover); max-height: 240px; overflow-y: auto; }
.combo-optie { padding: .45rem .65rem; cursor: pointer; border-bottom: 1px solid var(--zz-border-subtle); font-size: var(--zz-fs-base); }
.combo-optie:hover, .combo-optie.is-actief { background: var(--zz-magenta-soft); color: var(--zz-magenta-hover); }
.combo-oud { color: var(--zz-warning-text); }

/* ── Detail ─────────────────────────────────────────────────────────── */
.detail-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; flex-wrap: wrap; }
.detail-type { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--zz-muted); font-weight: 700; }
.detail-head h2 { font-size: 1.1rem; color: var(--zz-heading); margin: .15rem 0 .35rem; }
.detail-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.subtabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--zz-border); margin-bottom: 1rem; overflow-x: auto; }
.subtab { background: none; border: none; border-bottom: 2px solid transparent; padding: .5rem .75rem; font: inherit;
  font-size: var(--zz-fs-base); color: var(--zz-muted); cursor: pointer; white-space: nowrap; }
.subtab[aria-selected="true"] { color: var(--zz-magenta); border-bottom-color: var(--zz-magenta); font-weight: 600; }
.kv { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: .45rem 1rem; font-size: var(--zz-fs-base); }
.kv dt { color: var(--zz-muted); }
.kv dd { color: var(--zz-text); word-break: break-word; }
.kv dd.leeg { color: var(--zz-faint); }
.section-title { font-size: .85rem; font-weight: 600; color: var(--zz-heading); margin: 1.25rem 0 .5rem; }
.org-compare { border-left: 4px solid var(--zz-border); padding: .5rem .75rem; margin-top: .75rem; font-size: .85rem; background: var(--zz-table-head); border-radius: var(--zz-radius); }
.org-compare.different { border-left-color: var(--zz-warning); }
.org-compare.match { border-left-color: var(--zz-success); }

/* ── Tabellen ───────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--zz-fs-base); }
thead th { text-align: left; background: var(--zz-table-head); color: var(--zz-heading); font-weight: 600; padding: .55rem .6rem;
  border-bottom: 2px solid var(--zz-border); white-space: nowrap; }
.sorteer-knop { background: none; border: 0; padding: .1rem .2rem; margin: 0 -.2rem; font: inherit; font-weight: 600; color: inherit;
  cursor: pointer; border-radius: var(--zz-radius); }
.sorteer-knop:hover { color: var(--zz-magenta); }
.sorteer-pijl { color: var(--zz-muted); font-size: .8em; opacity: .6; }
.sorteer-knop.actief .sorteer-pijl { color: var(--zz-magenta); opacity: 1; }
tbody td { padding: .5rem .6rem; border-bottom: 1px solid var(--zz-border-subtle); vertical-align: top; }
tbody tr:hover { background: var(--zz-table-head); }
td.acties { white-space: nowrap; text-align: right; }
td.acties .btn + .btn { margin-left: .35rem; }
.table-search { padding: .45rem .65rem; border: 1px solid var(--zz-border-input); border-radius: var(--zz-radius); font: inherit;
  font-size: var(--zz-fs-base); min-width: 220px; flex: 1; }

/* ── Zoeken in de boom ──────────────────────────────────────────────── */
/* De zoekterm in een naam: gele markering met donkere tekst, los van de selectiekleur. */
.zoek-hit { background: var(--zz-warning-soft); color: var(--zz-warning-text); border-bottom: 2px solid var(--zz-warning-border); padding: 0 1px; }
.code-hint { color: var(--zz-muted); font-size: .8rem; }
.boom-zoek-status { margin: .25rem 0 0; min-height: 1.2em; }
.boom-zoek-status:empty { min-height: 0; margin: 0; }

/* ── Formulieren ────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.form-group { display: flex; flex-direction: column; gap: .3rem; }
.form-group.volle-breedte { grid-column: 1 / -1; }
.form-group label { font-size: var(--zz-fs-sm); font-weight: 600; color: var(--zz-heading); }
.form-group input, .form-group select { padding: .5rem .65rem; border: 1px solid var(--zz-border-input); border-radius: var(--zz-radius);
  font: inherit; font-size: var(--zz-fs-base); background: var(--zz-surface); color: var(--zz-text); }
.form-group input[readonly] { background: var(--zz-table-head); color: var(--zz-muted); }
.form-group .veld-hint { font-size: .75rem; color: var(--zz-muted); }
.form-group .veld-fout { font-size: .75rem; color: var(--zz-danger-text); }
.form-group.heeft-fout input, .form-group.heeft-fout select { border-color: var(--zz-danger); }
.form-errors { background: var(--zz-danger-soft); color: var(--zz-danger-text); border-radius: var(--zz-radius); padding: .6rem .8rem;
  font-size: .85rem; margin-bottom: 1rem; }
.form-errors ul { padding-left: 1.1rem; }
.melding-blokkerend { background: var(--zz-warning-soft); border: 1px solid var(--zz-warning-border); color: var(--zz-warning-text);
  border-radius: var(--zz-radius-sm); padding: .6rem .8rem; font-size: .85rem; margin-bottom: 1rem; }

/* ── Modal ──────────────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: var(--zz-overlay); display: none; align-items: center; justify-content: center;
  z-index: var(--zz-z-modal); padding: 1rem; }
.modal-overlay.open { display: flex; }
.modal { background: var(--zz-surface); border-radius: var(--zz-radius-xl); box-shadow: var(--zz-shadow-modal); width: 100%; max-width: 640px;
  max-height: 90vh; display: flex; flex-direction: column; }
.modal:focus { outline: none; box-shadow: var(--zz-shadow-modal), var(--zz-focus-ring); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--zz-border); }
.modal-header h2 { font-size: var(--zz-fs-lg); font-weight: 700; color: var(--zz-heading); }
.modal-close { background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--zz-muted); cursor: pointer; padding: 0 .25rem; }
.modal-body { padding: 1.25rem; overflow-y: auto; }
#modal-form-form { display: flex; flex-direction: column; min-height: 0; }
.modal-footer { display: flex; justify-content: flex-end; gap: .5rem; padding: .9rem 1.25rem; border-top: 1px solid var(--zz-border); }

/* ── Toasts ─────────────────────────────────────────────────────────── */
#toast-container { position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: var(--zz-z-toast); }
.toast { background: var(--zz-text); color: var(--zz-surface); padding: .7rem 1rem; border-radius: var(--zz-radius-lg); max-width: 320px;
  font-size: .85rem; box-shadow: var(--zz-shadow-toast); animation: slideIn .25s ease-out; }
.toast.success { background: var(--zz-success); }
.toast.error { background: var(--zz-danger); }
.toast.info { background: var(--zz-info); }
@keyframes slideIn { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Waarschuwing automatisch uitloggen ─────────────────────────────── */
/* Niet blokkerend (geen overlay), wel opvallend: vast onderaan in het midden. */
.sessie-waarschuwing { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: var(--zz-z-toast);
  width: min(420px, calc(100% - 2rem)); background: var(--zz-surface); border-top: 4px solid var(--zz-warning);
  border-radius: var(--zz-radius-xl); box-shadow: var(--zz-shadow-modal); padding: 1rem 1.25rem; }
.sessie-waarschuwing h2 { font-size: var(--zz-fs-lg); font-weight: 700; color: var(--zz-heading); margin-bottom: .35rem; }
.sessie-waarschuwing p { font-size: var(--zz-fs-base); color: var(--zz-text); margin-bottom: .9rem; }
#sessie-aftelling { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Smal scherm ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .split, .split-lijst.heeft-detail { grid-template-columns: minmax(0, 1fr); }
  /* Onder elkaar: geen sticky detail; de pagina scrolt ernaartoe (detailInBeeld). */
  .split-lijst.heeft-detail > .detail-host { position: static; max-height: none; overflow-y: visible; }
  .form-grid { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
  header { flex-wrap: wrap; gap: .5rem; }
  /* 16px van de rand, knop over de volle breedte. */
  .sessie-waarschuwing { width: calc(100% - 2rem); bottom: 1rem; }
  .sessie-waarschuwing .btn { width: 100%; }
}

/* ── Geërfde adressen ───────────────────────────────────────────────── */
/* Kop per blok (Direct gekoppeld, Geërfd) in de sectie Adressen onder Gegevens. */
.blok-kop { font-size: var(--zz-fs-base); font-weight: 700; color: var(--zz-heading); margin: 1rem 0 .35rem; }
.blok-kop:first-child { margin-top: 0; }
/* Herkomst, geen status: neutraal omlijnd en hoekig, zodat het niet op een statusbadge lijkt. */
.label-geerfd { display: inline-block; font-size: var(--zz-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border-radius: var(--zz-radius-sm); padding: .05rem .35rem; margin-left: .35rem;
  background: var(--zz-surface); border: 1px solid var(--zz-border-input); color: var(--zz-muted); }
.label-geerfd.is-gedempt { border-style: dashed; }
/* Overschreven of niet-geldig ouderadres: gedempt, met de reden eronder. */
tr.is-overschreven td { color: var(--zz-muted); }

/* ── Overzichten: tellers, Controle, Wijzigingen, export, Systeem (overzichten.js) ── */
.export-knoppen { display: flex; gap: .35rem; flex-wrap: wrap; }
.nowrap-cel { white-space: nowrap; }

/* Tellers boven de boom: twee smalle regels. De "zonder"-tellers zijn knoppen naar Controle. */
/* Buiten main: zelfde zijmarge als main, en niet breder dan het boomscherm. */
.kop-tellers { margin: 1rem max(1.5rem, calc((100% - 1680px) / 2)) 0; padding: .6rem 1rem; background: var(--zz-surface);
  border-radius: var(--zz-radius-lg); box-shadow: var(--zz-shadow-card); font-size: var(--zz-fs-sm); }
.kop-tellers-regel { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.kop-tellers-regel + .kop-tellers-regel { margin-top: .3rem; }
.kop-tellers-peil { color: var(--zz-muted); font-weight: 600; }
.kop-teller { color: var(--zz-text-strong); }
.kop-teller-link { background: none; border: none; padding: 0; font: inherit; color: var(--zz-magenta); text-decoration: underline; cursor: pointer; }
.kop-teller-link:hover { color: var(--zz-magenta-hover); }
.kop-teller-link.is-nul { color: var(--zz-muted); }

/* Controle: per controle een kaart met teller en een uitklapbare lijst. */
.controle-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.controle-kop h3 { font-size: var(--zz-fs-md); color: var(--zz-heading); margin-bottom: .2rem; }
.controle-teller { font-size: var(--zz-fs-stat); font-weight: 700; color: var(--zz-warning-text); line-height: 1; flex: none; }
.controle-teller.is-nul { color: var(--zz-success-text); }
.controle-acties { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .25rem; }
.controle-lijst { margin-top: 1rem; }

/* Wijzigingen: filters naast elkaar, op smal scherm onder elkaar. */
.filterbalk { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; align-items: flex-end; }
.filter-veld { display: flex; flex-direction: column; gap: .25rem; font-size: var(--zz-fs-sm); }
.filter-veld label { font-weight: 600; color: var(--zz-heading); }
.filter-veld input, .filter-veld select { padding: .4rem .55rem; border: 1px solid var(--zz-border-input); border-radius: var(--zz-radius);
  font: inherit; background: var(--zz-surface); color: var(--zz-text); }

/* Systeem: statustegels in twee kolommen (indeling zoals TAI). */
.status-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.status-tegel { display: flex; align-items: center; gap: .75rem; padding: .75rem; background: var(--zz-table-head);
  border-radius: var(--zz-radius); }
.status-label { flex: 1; font-size: var(--zz-fs-base); color: var(--zz-muted); }
.status-detail { font-size: .75rem; color: var(--zz-faint); text-align: right; overflow-wrap: anywhere; }
.badge.pending { background: var(--zz-neutral-soft); color: var(--zz-neutral-text); }
.badge.fout { background: var(--zz-danger-soft); color: var(--zz-danger-text); }
@media (max-width: 640px) {
  .status-raster { grid-template-columns: 1fr; }
}
/* ── Woonplaats in de boom ──────────────────────────────────────────── */
/* Virtueel bovenste niveau. Zelfde omlijnde typelabel als de andere niveaus. */
.node-type.type-woonplaats { border-color: var(--zz-heading); color: var(--zz-heading); }
.plaatsen-hint { color: var(--zz-muted); font-size: .8rem; }
.keuze-regel { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--zz-heading); }
.keuze-regel input { accent-color: var(--zz-magenta); }
.form-group .keuze-regel label { font-weight: 600; }

/* ── Secties onder Gegevens (Adressen, BAG) ─────────────────────────── */
.detail-sectie { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--zz-border); }
.sectie-kop { font-size: var(--zz-fs-md); font-weight: 700; color: var(--zz-heading); margin-bottom: .5rem; }

/* ── Adresformulier met de BAG ──────────────────────────────────────── */
.bag-acties { gap: .5rem; }
.bag-acties .btn { align-self: flex-start; }
.bag-resultaat { font-size: .85rem; }
.bag-resultaat .hint { margin-bottom: 0; }
.bag-match { color: var(--zz-success-text); background: var(--zz-success-soft); border-radius: var(--zz-radius-sm); padding: .45rem .65rem; }
.bag-fout { color: var(--zz-danger-text); background: var(--zz-danger-soft); border-radius: var(--zz-radius-sm); padding: .45rem .65rem; }
.bag-fout ul { padding-left: 1.1rem; }
.bag-keuze { border: 1px solid var(--zz-border); border-radius: var(--zz-radius); padding: .5rem .75rem; display: grid; gap: .35rem; margin-bottom: .5rem; }
.bag-keuze legend { font-weight: 600; color: var(--zz-heading); padding: 0 .25rem; }