/* Uniform listgrid (components/listgrid.js) + wijzigingen-popup
   (components/wijzigingenmodal.js). Vlakke kaarten (volledige 1px-rand +
   lichte schaduw), huisstijl-tokens, geen accentbalken. */

/* ---- View-kolom (fullbleed, B-46) --------------------------------------- */
/* Listgrid-views vullen het venster zoals de mailbox: de werkbalk is een witte
   strook direct onder de topbalk, daaronder vult de romp (paginavlak) de rest
   met de tabel en het detail; panelen scrollen intern, geen paginascroll. */
.view--lijst {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.view--lijst > .lg-bezig,
.view--lijst > .lg-fout { margin: 16px; }
.lg {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.lg-romp {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
}

/* ---- Laad-/foutstate --------------------------------------------------- */
.lg-bezig { color: var(--muted); font-size: .9rem; }
.lg-fout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(179, 38, 30, .06);
  border: 1px solid var(--err);
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--ink-900);
  max-width: 520px;
}
.lg-fout p { margin: 0; flex: 1 1 auto; }

/* `hidden` wint ALTIJD: eigen display-regels (flex/inline-flex) zouden anders
   het hidden-attribuut overschrijven, waardoor menu's, de bewerkbalk en de
   zoek-wisknop permanent zichtbaar bleven (bug 12/06/2026). */
.lg [hidden],
.lg-modal [hidden],
.wm [hidden] { display: none !important; }

/* Alleen-visueel-verborgen tekst (toegankelijke kolomkop voor de actiekolom). */
.vis-verborgen {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Werkbalk ----------------------------------------------------------- */
/* Zelfde model als de mailbox-werkbalk (uniform, F3.2): een witte strook met
   32px-hoge btn-actie-knoppen links, rechts de teller (gedempte tekst), het
   zoekveld en de omrande icoonknoppen. */
.lg-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Nooit afbreken naar een tweede regel: alles blijft op EEN rij. Wordt het
     krap, dan geeft het zoekveld mee (krimpt, zie .lg-zoek/min-width:0) terwijl
     de knoppen/iconen op hun maat blijven; de .lg-bar__vul vangt de slack. */
  flex-wrap: nowrap;
  flex: 0 0 auto;
  min-width: 0;
  padding: 10px 16px;
  background: var(--paper);
}
.lg-bar__vul { flex: 1 1 auto; }
/* Statusslot = de meegroeiende vuller (zoals .lg-bar__vul) plus het zichtbare,
   transiente feedback-slot. Doordat het de vrije ruimte vult en zijn inhoud met
   ellipsis afkapt, verschuift het verschijnen/verdwijnen van een melding de balk
   niet (geen reflow, ook niet bij een afbrekende werkbalk op 150% zoom). De
   selectie wordt apart, alleen-visueel-verborgen, aangekondigd (.vis-verborgen). */
.lg-bar__status {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: .85rem;
}
.lg-bar__tel { color: var(--muted); font-size: .82rem; white-space: nowrap; }

/* Icoon-knop en knopvarianten (per scherm gedefinieerd, conform base.css).
   Standaard binnen het listgrid randloos; de marker .btn-ico--kader sluit een knop
   hiervan uit zodat die terugvalt op de globale (omrande) .btn-ico - dezelfde
   "echte knop"-look als het tandwiel/de werkbalk-iconen. Gebruikt voor de
   Bewerken- en Verwijderen-icoonknoppen (verzoek Harm: app-breed omrand). */
.lg .btn-ico:not(.btn-ico--kader), .lg-modal .btn-ico:not(.btn-ico--kader), .wm .btn-ico:not(.btn-ico--kader) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--blue-700);
  cursor: pointer;
}
.lg .btn-ico:hover:not(.btn-ico--kader), .lg-modal .btn-ico:hover:not(.btn-ico--kader), .wm .btn-ico:hover:not(.btn-ico--kader) { background: var(--blue-100); }
.lg .btn-ico.is-actief { background: var(--blue-100); border-color: var(--blue-700); }
.lg .btn-ico svg, .lg-modal .btn-ico svg, .wm .btn-ico svg { width: 16px; height: 16px; }

/* De icoonknoppen DIRECT in de werkbalk (filterreset, wijzigingen, tandwiel)
   zijn omrand, een-op-een de mailbox-werkbalk; de kleine btn-ico's elders
   (zoek-wisknop, trechtertjes in de kolomkoppen, rij-acties) blijven randloos. */
.lg-bar > .btn-ico,
.lg-bar .lg-menu-wrap > .btn-ico {
  border-color: var(--line);
  background: var(--paper);
}
.lg-bar > .btn-ico:hover,
.lg-bar .lg-menu-wrap > .btn-ico:hover { background: var(--bg-50); }
.lg-bar > .btn-ico svg,
.lg-bar .lg-menu-wrap > .btn-ico svg { width: 18px; height: 18px; }

.lg .btn--licht, .lg-modal .btn--licht, .wm .btn--licht {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--blue-700);
}
.lg .btn--licht:hover, .lg-modal .btn--licht:hover, .wm .btn--licht:hover { background: var(--blue-100); }
.lg .btn--gevaar, .lg-modal .btn--gevaar {
  background: var(--paper);
  border: 1px solid var(--err);
  color: var(--err);
}
.lg .btn--gevaar:hover, .lg-modal .btn--gevaar:hover { background: var(--err); color: #fff; }

/* Zoekveld met wisknop - zelfde uiterlijk en maat als het mailbox-zoekveld. */
.lg-zoek {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-50);
  /* Het meegevende element van de werkbalk: bij ruimtegebrek krimpt het zoekveld
     (en blijft alles op EEN rij). flex-shrink staat aan; min-width:0 doorbreekt de
     standaard flex-ondergrens (auto), die het anders niet onder de inhoud laat zakken. */
  flex: 0 1 auto;
  min-width: 0;
}
.lg-zoek svg { width: 15px; height: 15px; color: var(--muted); flex: 0 0 auto; }
.lg-zoek input {
  border: 0;
  outline: none;
  background: none;
  font: inherit;
  font-size: .85rem;
  color: var(--ink-900);
  height: 30px;
  padding: 0;
  /* Comfortabele breedte als er ruimte is; min-width:0 laat het veld meekrimpen
     binnen .lg-zoek zodra de werkbalk krap wordt (i.p.v. de balk te laten afbreken). */
  width: clamp(260px, 34vw, 560px);
  min-width: 0;
}
.lg-zoek:focus-within { box-shadow: 0 0 0 3px rgba(0, 71, 128, .12); }
/* De wisknop in het veld blijft een kleine, randloze knop (zoals de mailbox). */
.lg .lg-zoek .btn-ico { width: 24px; height: 24px; color: var(--muted); }
.lg .lg-zoek .btn-ico:hover { background: none; color: var(--ink-900); }

/* Dropdown-menu's (tandwiel, filter) - zelfde patroon als de mailbox. */
.lg-menu-wrap { position: relative; }
.lg-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 180px;
  max-height: 60vh;
  overflow-y: auto;
  /* Een dropdownmenu scrolt NOOIT horizontaal: de inhoud past zich aan de
     (gemaximeerde) breedte aan; krappe inhoud reflowt i.p.v. een scrollbalk. */
  overflow-x: hidden;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.lg-menu > * { min-width: 0; max-width: 100%; }
.lg-menu__kop {
  padding: 6px 10px 2px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.lg-menu__scheiding { height: 1px; margin: 6px 4px; background: var(--line); }
/* Alleen het kolomfilter-menu: het tandwielpaneel (instelflyout) heeft zijn
   eigen globale item-styling en de voetknoppen volgen de gewone .btn-stijl. */
.lg-menu--kolom button {
  display: block;
  width: 100%;
  text-align: left;
  /* Niet meekrimpen: het menu is een flex-kolom met max-height + overflow-y.
     Knoppen met overflow:hidden krijgen anders een automatische min-hoogte van 0
     en worden bij een lange waardenlijst (bv. ~30 planners) platgedrukt zodat de
     tekst overlapt; met flex:0 0 auto behoudt elke knop zijn hoogte en scrolt het
     menu netjes. */
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: .88rem;
  color: var(--ink-900);
  cursor: pointer;
  /* Vrije kolommen filteren op datawaarden (B-59): lange waarden netjes afkappen. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lg-menu--kolom button:hover { background: var(--bg-50); }
.lg-menu--kolom button.is-actief {
  background: var(--blue-100);
  color: var(--blue-700);
  font-weight: 600;
}
.lg-menu--kolom button:disabled { color: var(--muted); cursor: default; background: none; }

/* Tekst- en bereikfilter in het kolomfiltermenu: compacte invoer die live
   filtert tijdens het typen; de wisknop volgt de gewone menu-itemstijl. */
.lg-menu__invoer { padding: 4px 6px 6px; }
.lg-menu__invoer input {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font: inherit;
  font-size: .85rem;
}
.lg-menu__invoer input:focus-visible { outline: 2px solid var(--blue-700); outline-offset: -1px; }
.lg-menu__invoer--bereik { display: flex; gap: 8px; }
.lg-menu__invoer--bereik label {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .72rem;
  color: var(--muted);
}

/* Filter-cluster in de werkbalk (B-113): de filterknop (globale .filterknop)
   plus de geintegreerde wis-knop (globale .filtercluster/.filterknop__wis, base.css).
   Hier alleen de plaatsing; het uiterlijk en de .is-actief-markering komen uit de
   globale .filterknop/.btn-actie - gelijk aan de kolomkop-trechter. */
.lg-filtercluster { flex: 0 0 auto; }

/* De flyout erft het instelflyout-patroon (paneel + voet); de per-veld controls
   gebruiken de globale .filterveld (base.css, B-114), hier alleen de breedte. */
.lg-filtermenu { min-width: 264px; }
.lg-filter-leeg { margin: 2px 6px 6px; font-size: .8rem; color: var(--muted); }

/* Wis-X op het kolomkop-trechtertje (B-114, Outlook-stijl): een klein merk dat
   bij een ACTIEF filter op hover/focus van het trechtertje verschijnt. De
   trechter blijft het menu openen (verfijnen); de X (data-kolomkop-wis) wist dat
   kolomfilter in een klik. Dezelfde affordance, app-breed via .lg (planning erft
   'm: die kolomkoppen dragen ook .lg-th-filter binnen een .lg-root). */
.lg-th-filterhoek { position: relative; display: inline-flex; flex: 0 0 auto; }
.lg-th-wis {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--blue-700);
  border-radius: 50%;
  background: var(--paper);
  color: var(--blue-700);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s ease;
}
.lg-th-wis svg { width: 10px; height: 10px; }
.lg-th-wis:hover, .lg-th-wis:focus-visible { background: var(--blue-700); color: var(--paper); }
/* Hover-onthulling = desktop-gedrag (iOS-dubbeltik, zie B-122/v0.5.18):
   op touch telt de eerste tik anders als hover en pas de tweede als klik.
   De :focus-within-variant staat bewust BUITEN deze media query: focus komt
   pas na de interactie en blokkeert geen tik, en zo blijft het toetsenbord
   overal werken. */
.lg-th-filterhoek:focus-within .lg-th-wis { opacity: 1; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  .lg-th-filterhoek:hover .lg-th-wis { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { .lg-th-wis { transition: none; } }

/* Kolomkop-filtermenu: invoer + per-veld wis-X (globale .filterveld__wis) op EEN rij. */
.lg-menu__invoer-rij { display: flex; align-items: center; gap: 6px; }
.lg-menu__invoer-rij .lg-menu__invoer { flex: 1 1 auto; min-width: 0; }

/* Het tandwielpaneel zelf is het globale instelflyout-patroon (base.css);
   hier alleen de maat en verankering binnen de listgrid-werkbalk. Het paneel
   groeit mee met de inhoud (alle tabtitels altijd in beeld), met een
   ondergrens voor rust en een bovengrens binnen het scherm. */
/* De instel-/filterflyout scrolt NIET als geheel (anders verdwijnt de voet onder
   de vouw): de container clipt op zijn max-hoogte en de inhoud (tabs/paneel)
   scrolt zelf, zodat de actiebalk onderin altijd in beeld blijft. */
.lg-menu--instel { width: max-content; min-width: 320px; max-width: calc(100vw - 24px); overflow: hidden; }

/* Cel die aan het opslaan is (quickedit): niet uitschakelen (focusverlies),
   wel zichtbaar dempen tot de uitkomst er is. */
.lg-cel.is-bezig { opacity: .6; }

/* ---- Snel bewerken: onmiskenbare modus-signalen --------------------------- */
/* Goudgetinte modusbalk boven de tabel (volledige 1px-rand, geen accentbalk). */
.lg-bewerkbalk {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 7px 12px;
  background: rgba(232, 180, 0, .14);
  border: 1px solid var(--gold-500);
  border-radius: var(--radius);
  font-size: .88rem;
  color: var(--ink-900);
}
.lg-bewerkbalk > svg { width: 16px; height: 16px; color: var(--blue-700); flex: 0 0 auto; }
.lg-bewerkbalk > span { flex: 1 1 auto; }
.lg-bewerkbalk .btn { padding: 4px 12px; }

/* De bewerkbare tabel zelf krijgt een gouden ring zolang de modus aanstaat. */
.lg--bewerk .lg-scroll {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 1px var(--gold-500), var(--shadow);
}

/* De actieknoppen (Nieuw, Snel bewerken) houden hun maat: bij een krappe werkbalk
   (bv. ingebed in Applicatiebeheer) geeft het zoekveld mee (zie .lg-zoek,
   min-width:0), niet de knoptekst. Sluit aan op de flex-opzet van .lg-bar. */
.lg-bar .btn-actie { flex-shrink: 0; }

/* De aan/uit-knop in actieve stand: duidelijk "aan" (goud, zoals de gouden
   hoofdactie); hover licht goud, zoals btn-actie--primair. */
.lg-bar .btn-actie.is-actief {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--blue-700);
}
.lg-bar .btn-actie.is-actief:hover { background: var(--gold-300); }

/* ---- Vlak: lijst + detail ------------------------------------------------ */
/* Vult de resterende romphoogte (fullbleed-keten via .view--lijst); de tabel
   en het detail scrollen intern, net als de panelen van de mailbox. */
.lg-vlak {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}
.lg--rechts .lg-vlak { flex-direction: row; }
.lg--onder .lg-vlak { flex-direction: column; }

.lg-lijst {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.lg--rechts .lg-lijst { flex: 0 0 var(--lg-lijst-breedte, 62%); }
.lg--onder .lg-lijst { flex: 0 0 var(--lg-lijst-hoogte, 55%); }
.lg--popup .lg-lijst { flex: 1 1 auto; }

.lg-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.lg-leeg { flex: 1 1 auto; }

/* Splitters: alleen het handvat van de actieve stand is zichtbaar. */
.lg--rechts .lg-splitter--h { display: none; }
.lg--onder .lg-splitter--b { display: none; }
.lg--popup .lg-splitter--b, .lg--popup .lg-splitter--h { display: none; }
.lg--popup .lg-detail { display: none; }

/* ---- Tabel ---------------------------------------------------------------- */
/* De koprij scrolt NOOIT verticaal mee (globale listgrid-regel): sticky koppen.
   border-collapse moet daarvoor op separate, anders scrollen de celranden van
   de sticky koppen weg. table-layout: fixed maakt de kolombreedtes (colgroup,
   persoonlijke instelling) deterministisch versleepbaar. */
.lg-tabel { border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.lg-tabel .lg-col-acties { width: 44px; }

/* Greep op de kolomrand: smalle sleepzone over de randlijn heen. */
.lg-kolomgreep {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
  touch-action: none;
}
/* De greeplijn is in rust subtiel zichtbaar als dunne scheidingslijn tussen de
   kolomkoppen (verzoek 12/06/2026) en kleurt blauw bij hover/focus.
   Let op de positie: de lijn staat net BINNEN de eigen kop (left: 3px = 1px
   voor de kolomgrens). Precies op de grens wordt hij overschilderd door de
   dekkende achtergrond van de volgende sticky kolomkop (gelijke z-index,
   later in de DOM). De kleur is --muted op 45%: --line heeft op de
   bg-50-kopachtergrond te weinig contrast. */
.lg-kolomgreep::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 3px;
  width: 1px;
  background: rgba(91, 107, 123, .45);
  transition: background .12s ease;
}
.lg-kolomgreep:hover::before,
.lg-kolomgreep:focus-visible::before { background: var(--blue-700); }
.lg-kolomgreep:focus-visible { outline: 2px solid var(--blue-100); outline-offset: -2px; }
.lg-tabel thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-50);
}
.lg-tabel th { padding: 0; }
.lg-sorteer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  /* Compacte koprij, in lijn met de compacte rijen van .lg-tabel td. Links
     14px zodat de koptekst uitlijnt met de celtekst (td-padding); rechts juist
     krap (2px), zodat een versmalde kolom geen loze ruimte tussen het
     sorteerpijltje en het trechtertje houdt voordat de tekst moet afkappen
     (verzoek 12/06/2026). */
  padding: 7px 2px 7px 14px;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-data);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue-700);
  cursor: pointer;
  white-space: nowrap;
  /* Bij een extreem smalle kolom clipt de knop zijn eigen inhoud, zodat hij
     nooit over het trechtertje heen schuift. */
  overflow: hidden;
}
.lg-sorteer:hover { background: var(--blue-100); }
.lg-sorteer svg { width: 13px; height: 13px; flex: 0 0 auto; }
/* De koptekst krimpt en kapt af met een ellipsis; het sorteerpijltje en het
   trechtertje (flex: 0 0 auto) blijven zo ALTIJD zichtbaar, hoe smal de
   gebruiker de kolom ook sleept. */
.lg-sorteer__tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-th-acties { width: 44px; }

/* Kolomkop-filter: trechtertje naast de sorteerknop; licht op bij een actieve
   kolomfilter. Het menu zelf staat fixed (de koprij leeft in een scrollkader). */
.lg-th { display: flex; align-items: center; min-width: 0; }
.lg-th .lg-sorteer { flex: 1 1 auto; min-width: 0; }
/* Smal trechtertje (20px om een 12px-icoon, hoogte 24px als klikdoel); de
   4px rechtermarge houdt hem net vrij van de sleepzone van de kolomgreep. */
.lg .lg-th-filter { width: 20px; height: 24px; margin-right: 4px; color: var(--muted); flex: 0 0 auto; }
.lg .lg-th-filter svg { width: 12px; height: 12px; }
.lg .lg-th-filter.is-actief { color: var(--blue-700); background: var(--blue-100); border-color: var(--blue-700); }
.lg-menu--kolom { position: fixed; right: auto; z-index: 90; max-width: 300px; }

.lg-tabel tbody tr { cursor: pointer; }
.lg-tabel tbody tr:focus-visible { outline: 2px solid var(--blue-700); outline-offset: -2px; }
.lg-tabel tbody tr.is-gekozen td { background: var(--blue-100); }
.lg-tabel td {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Compacte rijen (verzoek Harm, 12/06/2026): minder witruimte boven en
     onder de celtekst dan de ruime .datatabel-standaard (10px), zodat er
     duidelijk meer records in beeld staan. */
  padding-top: 4px;
  padding-bottom: 4px;
}
.lg-geen { color: var(--muted); }

/* Quickedit-cellen: invoer die als tabel leest (Excel-gevoel). */
.lg--bewerk .lg-tabel td { padding: 4px 6px; }
.lg-cel {
  width: 100%;
  min-width: 70px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font: inherit;
  font-size: var(--fs-data); /* zelfde maat als de niet-bewerkbare cellen */
}
.lg-cel:focus { outline: none; box-shadow: 0 0 0 3px rgba(0, 71, 128, .12); border-color: var(--blue-700); }
input.lg-cel[type="checkbox"] { width: auto; min-width: 0; accent-color: var(--blue-700); }
.lg-td-acties { width: 44px; }
.lg-verwijder { color: var(--err); }
.lg-verwijder:hover { background: rgba(179, 38, 30, .1); }

/* Opslaan-feedback per cel: korte groene/rode gloed (geen accentbalk). */
@keyframes lg-flits-ok { 0% { box-shadow: 0 0 0 3px rgba(46, 125, 82, .55); } 100% { box-shadow: none; } }
@keyframes lg-flits-fout { 0% { box-shadow: 0 0 0 3px rgba(179, 38, 30, .55); } 100% { box-shadow: none; } }
.lg-cel.is-ok { animation: lg-flits-ok 1.2s ease-out; }
.lg-cel.is-fout { animation: lg-flits-fout 1.2s ease-out; }

/* ---- Detailkaart ------------------------------------------------------------ */
.lg-detail {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* Geen bovenpadding: de sticky kop kan binnen zijn container niet hoger
     plakken dan die padding, waardoor de veldrijen erboven doorschemeren
     (bug 12/06/2026). De kop draagt de bovenpadding zelf. */
  padding: 0 16px 14px;
}
.lg--rechts .lg-detail { margin-left: 4px; }
.lg--onder .lg-detail { margin-top: 4px; }
.lg-detail__leeg {
  color: var(--muted);
  font-size: var(--fs-data);
  font-style: italic;
  padding: 24px 0;
  text-align: center;
}
.lg-detail__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  /* Scroll-lock: de kop (titel + Bewerken/Verwijderen) blijft bovenin staan
     terwijl de velden eronderdoor scrollen. Eigen vlak + dunne lijn, anders
     schijnen de rijen door de kop en de marge eronder heen. */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper);
  margin-bottom: 0;
  padding-top: 14px; /* overgenomen van .lg-detail (zie daar) */
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.lg-detail__kop h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--blue-700);
}
.lg-detail__velden { margin: 0; }
.lg-detail__rij {
  display: flex;
  /* Label (dt) en waarde (dd) op EEN tekst-baseline, gelijk aan .lg-form__rij.
     Zo blijft het label op de waarde uitgelijnd, ook op rijen met een hogere
     inline (i)-knop of een badge/veldactie-icoon in de waarde (die de regel-
     box anders asymmetrisch ophoogt waardoor het label zichtbaar zakt). */
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
.lg-detail__rij:last-child { border-bottom: 0; }
.lg-detail__rij dt {
  flex: 0 0 130px;
  color: var(--muted);
  font-size: var(--fs-data);
}
.lg-detail__rij dd { margin: 0; font-size: var(--fs-data); overflow-wrap: anywhere; }

/* Veld-actie-icoon (kolom-hook veldActie, bv. Google Maps op de standplaats).
   Het uiterlijk komt uit de globale .btn-ico; deze class regelt ALLEEN de
   plaatsing: compact (kleiner dan de werkbalkknoppen), midden uitgelijnd, niet
   meerekken, en verborgen zolang er geen link is (in het formulier). De maat-
   en zichtbaarheidsregels evenaren bewust de specificiteit van `.lg .btn-ico`/
   `.lg-modal .btn-ico` (en staan erna), zodat ze daarvan winnen. */
.lg-veldactie { flex: 0 0 auto; align-self: center; vertical-align: middle; }
/* Een echte, omrande icoonknop (niet alleen een los icoontje): zelfde chrome als
   de omrande werkbalk-icoonknoppen, zodat duidelijk is dat je erop kunt klikken. */
.lg .lg-veldactie, .lg-modal .lg-veldactie {
  width: 26px; height: 26px;
  border-color: var(--line);
  background: var(--paper);
}
.lg .lg-veldactie:hover, .lg-modal .lg-veldactie:hover { background: var(--bg-50); }
.lg .lg-veldactie svg, .lg-modal .lg-veldactie svg { width: 15px; height: 15px; }
/* Merk-icoon (bv. officieel Google Maps-pictogram): een afbeelding i.p.v. een
   feather-svg; eigen maat want het volgt de merkkleuren, niet currentColor. */
.lg .lg-veldactie__img, .lg-modal .lg-veldactie__img { width: 16px; height: 16px; display: block; }
.lg .lg-veldactie[hidden], .lg-modal .lg-veldactie[hidden] { display: none; }
.lg-detail__rij dd .lg-veldactie { margin-left: 4px; }

/* URL-velden (kolomconfig `url: true`): klikbaar, openen in een nieuw venster,
   met een external-link-icoon dat dat aangeeft. */
.lg-url { color: var(--blue-700); text-decoration: underline; overflow-wrap: anywhere; }
.lg-url:hover { color: var(--ink-900); }
.lg-url svg { width: 13px; height: 13px; vertical-align: -2px; margin-left: 1px; }

/* ---- Statusbadge (kolom-hook `badge`): een vlakke pill, geen accentbalk -------
   Zachte tint uit een huisstijl-token (color-mix), met 1px-rand. De palet-sleutel
   (ok/warn/err/gold/blauw/neutraal) komt uit de beheerbare config; zie
   domain/vergunningen.js (KLEUR_OPTIES). */
.lg-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--fs-data);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid var(--line);
  background: var(--bg-50);
  color: var(--ink-900);
}
.lg-badge--ok       { color: var(--ok);       border-color: color-mix(in srgb, var(--ok) 35%, white);       background: color-mix(in srgb, var(--ok) 12%, white); }
.lg-badge--warn     { color: var(--warn);     border-color: color-mix(in srgb, var(--warn) 35%, white);     background: color-mix(in srgb, var(--warn) 12%, white); }
.lg-badge--err      { color: var(--err);      border-color: color-mix(in srgb, var(--err) 35%, white);      background: color-mix(in srgb, var(--err) 12%, white); }
.lg-badge--gold     { color: #7a5c00;         border-color: color-mix(in srgb, var(--gold-500) 45%, white); background: color-mix(in srgb, var(--gold-500) 18%, white); }
.lg-badge--blauw    { color: var(--blue-700); border-color: color-mix(in srgb, var(--blue-700) 30%, white); background: color-mix(in srgb, var(--blue-700) 10%, white); }
.lg-badge--neutraal { color: var(--muted);    border-color: var(--line);                                    background: var(--bg-50); }
.lg-badge-link { text-decoration: none; display: inline-block; }
.lg-badge-link:hover .lg-badge { text-decoration: underline; filter: brightness(0.98); }
.lg-badge-link:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 1px; border-radius: 999px; }
/* Badge als ACTIEKNOP (kolom-hook badge.actie): knop-reset zodat hij oogt als de
   badge-link maar een interne actie opent (bv. de standplaats-kaartpopup). */
.lg-badge-knop { border: 0; background: none; padding: 0; margin: 0; font: inherit; cursor: pointer; }

/* ---- Generieke listgrid-modal (popup-detail + formulier) --------------------- */
/* z-index 95: de record-detail/-formulier-popup hoort BOVEN de page-level popups
   (planning-keerpopup en instellingen-venster, beide 90) zodat hij vanuit die
   schermen als losse popup bovenop opent, maar ONDER de bevestiging (100),
   toelichting-tip (110) en contactkaart (120) die juist boven hem moeten staan. */
.lg-modal { position: fixed; inset: 0; z-index: 95; }
.lg-modal__scrim { position: absolute; inset: 0; background: rgba(28, 42, 57, .45); }
.lg-modal__venster {
  position: relative;
  margin: 7vh auto 0;
  width: min(640px, calc(100vw - 32px));
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(28, 42, 57, .28);
}
.lg-modal__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.lg-modal__kop h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--blue-700);
}
/* De icoonknoppen rechts in de header (bv. Bewerken naast Sluiten) als één groep;
   regelt alleen de plaatsing, het uiterlijk komt uit de globale .btn-ico. */
.lg-modal__kopknoppen { display: flex; align-items: center; gap: 6px; }
/* DE scroller binnen het venster: flex:1 1 auto + min-height:0 zodat alleen de
   inhoud scrollt en de kop (titel + Bewerken/Sluiten) stil blijft staan, ook bij
   een lang record (zelfde patroon als de stabiele modal-utility). */
.lg-modal__inhoud { flex: 1 1 auto; min-height: 0; padding: 14px 16px; overflow: auto; }
/* Formulier-modal: geen onderpadding op de scroller, anders blijft er onder de
   vastgeplakte actiebalk een strook waarin de formulierinhoud doorschemert
   (bug "Bijzonderheden onder de knoppen", 12/06/2026). */
.lg-modal--formulier .lg-modal__inhoud { padding-bottom: 0; }

/* Formulier in de modal (nieuw/bewerken). */
.lg-form__rij {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.lg-form__rij > span {
  flex: 0 0 130px;
  font-size: var(--fs-data);
  color: var(--ink-900);
}
.lg-form__rij input[type="text"], .lg-form__rij select, .lg-form__rij textarea { flex: 1 1 auto; }
.lg-form__rij input[type="checkbox"] { accent-color: var(--blue-700); }
/* Rij met een blok-control (multikeuze-kiezer, maatwerk-veldcontrol zoals de
   standplaats-kaartpicker, of een meerregelige textarea): label bovenaan
   uitlijnen, control vult de rest. */
.lg-form__rij--blok { align-items: flex-start; }
/* Enkele checkbox (ja/nee): een kaal vakje heeft geen tekst-baseline (de browser
   pakt de onderrand), waardoor het label op de baseline te laag zou vallen. Zo'n
   rij centreert daarom verticaal i.p.v. baseline. Treft alleen de janee-rij: de
   multikeuze-vinkjes zitten in .lg-form__multi, geen directe kind-checkbox. */
.lg-form__rij:has(> input[type="checkbox"]) { align-items: center; }
.lg-form__veldcontrol { flex: 1 1 auto; min-width: 0; }
/* Meerkeuzeveld (bv. rollen): vinkjes in twee kolommen binnen de rij. */
.lg-form__multi {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
}
.lg-form__vink {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-data);
  color: var(--ink-900);
  cursor: pointer;
}
.lg-form__vink input { accent-color: var(--blue-700); }

/* Meerkeuze met kiezer-modal (kolom-hook `kiezer`): de gekozen waarden als chips
   met snel-verwijderen, plus de knop die de doorzoekbare kiezer opent. De vinkjes
   zelf staan verborgen (bron van waarheid). Valt terug op de globale tokens. */
.lg-form__multi--kiezer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.lg-form__kiezer-overzicht {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.lg-form__kiezer-leeg { font-size: var(--fs-data); color: var(--muted); }
.lg-form__kiezer-label { font-size: var(--fs-data); color: var(--muted); margin-right: 2px; }
.lg-form__kiezer-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  background: var(--bg-50);
  border: 1px solid var(--line);
  border-radius: 999px;
}
/* Chip-tekst is een knop: opent de kiezer en springt naar dit item. */
.lg-form__kiezer-chip-naar {
  border: 0;
  background: none;
  padding: 0 2px;
  font: inherit;
  font-size: var(--fs-data);
  color: var(--ink-900);
  cursor: pointer;
  border-radius: 999px;
}
.lg-form__kiezer-chip-naar:hover { color: var(--blue-700); text-decoration: underline; }
.lg-form__kiezer-chip-weg {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.lg-form__kiezer-chip-weg:hover { color: var(--err); }
.lg-form__kiezer-chip-weg svg { width: 13px; height: 13px; }
.lg-form__kiezer-knop { align-self: flex-start; }

/* Compacte invoer in de modal: dezelfde datamaat als de listgrid zelf
   (uniforme popup-maat, verzoek Harm 12/06/2026). De i-knop bij een veld met
   toelichting is het globale .toelichting-knop-componentje (styles/base.css):
   EEN maat app-breed via --toelichting-knop. Hier alleen de plaatsing achter
   de veldnaam, niet de maat (uiterlijk hoort in de global). */
.lg-form .form__input { padding: 6px 10px; font-size: var(--fs-data); }
.lg-detail__rij dt .toelichting-knop { margin-left: 2px; }
/* De toelichting-knop draagt OOK .btn-ico, dus binnen het listgrid (.lg/.lg-modal/
   .wm) zou de generieke .btn-ico-maat (32px, hierboven) hem overschrijven. Houd
   EEN maat app-breed via het token door 'm hier met GELIJKE specificiteit als
   `.lg .btn-ico:not(.btn-ico--kader)` te herhalen (bewust, net als .lg-veldactie)
   en NA die regel te plaatsen zodat de tie in ons voordeel valt. De maat zelf
   blijft een token (een bron); dit regelt alleen dat de global hier doorwerkt. */
.lg .btn-ico.toelichting-knop,
.lg-modal .btn-ico.toelichting-knop,
.wm .btn-ico.toelichting-knop { width: var(--toelichting-knop); height: var(--toelichting-knop); }
.lg .btn-ico.toelichting-knop svg,
.lg-modal .btn-ico.toelichting-knop svg,
.wm .btn-ico.toelichting-knop svg { width: var(--toelichting-knop-svg); height: var(--toelichting-knop-svg); }
/* Scroll-lock: de actieknoppen plakken onderaan de scrollende modal-inhoud,
   zodat Annuleren/Opslaan bij een lang formulier nooit uit beeld raken. */
.lg-form__acties {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 12px -16px 0;
  padding: 10px 16px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
/* ALLE knoppen in het formulier delen dezelfde compacte maat (uniformiteit,
   verzoek Harm 15/06/2026): de "Voertuigen kiezen..."-knop mag nooit hoger zijn
   dan Opslaan/Annuleren. Geldt dus voor de actieknoppen EN inline-knoppen (kiezer). */
.lg-form .btn { padding: 5px 12px; font-size: .8rem; }
.lg-form__status { flex: 1 1 auto; color: var(--muted); font-size: var(--fs-data); }

/* ---- Wijzigingen-popup -------------------------------------------------------- */
.wm { position: fixed; inset: 0; z-index: 80; }
.wm__scrim { position: absolute; inset: 0; background: rgba(28, 42, 57, .45); }
/* Maat + frame uit de gedeelde utility (.modal-venster --breed, modal.css): een
   VASTE hoogte i.p.v. max-height = stilstaand venster bij filteren/paneelwissel
   (de twee kolommen .wm__zijde/.wm__detail scrollen zelf intern). De lokale tokens
   houden de eigen breedte en hoogte; de top-positionering (margin) blijft hier. */
.wm__venster {
  position: relative;
  margin: 6vh auto 0;
  --modal-w-breed: min(860px, calc(100vw - 32px));
  --modal-h-breed: 86vh;
}
.wm__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.wm__kop h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--blue-700);
}
.wm__bezig { color: var(--muted); font-size: var(--fs-data); padding: 16px; }
.wm__fout {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px;
  padding: 10px 14px;
  background: rgba(179, 38, 30, .06);
  border: 1px solid var(--err);
  border-radius: var(--radius);
  font-size: var(--fs-data);
}
.wm__fout p { margin: 0; flex: 1 1 auto; }
.wm__body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.wm__body > .melding { margin: 24px auto; }

/* Linker zijde: zoekveld (live filter) boven de lijst. */
.wm__zijde {
  flex: 0 0 290px;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
}
.wm__zoek {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 32px;
  margin: 8px 8px 0;
  padding: 0 4px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-50);
}
.wm__zoek svg { width: 15px; height: 15px; color: var(--muted); flex: 0 0 auto; }
.wm__zoek input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font: inherit;
  font-size: .85rem;
  color: var(--ink-900);
  height: 30px;
  padding: 0;
}
.wm__zoek:focus-within { box-shadow: 0 0 0 3px rgba(0, 71, 128, .12); }
.wm .wm__zoek .btn-ico { width: 24px; height: 24px; color: var(--muted); }
.wm .wm__zoek .btn-ico:hover { background: none; color: var(--ink-900); }
/* Datumbereik (van/tot) onder het zoekveld. */
.wm__datums { display: flex; gap: 6px; margin: 6px 8px 0; }
.wm__datum {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-data);
  color: var(--muted);
}
.wm__datum input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-50);
  font: inherit;
  font-size: .85rem;
  color: var(--ink-900);
}
.wm__datum input:focus { outline: none; box-shadow: 0 0 0 3px rgba(0, 71, 128, .12); }
.wm__geen { margin: 8px 10px; color: var(--muted); font-size: var(--fs-data); }
.wm__lijst {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wm__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: var(--fs-data);
  cursor: pointer;
}
.wm__item:hover { background: var(--bg-50); }
.wm__item.is-actief { background: var(--blue-100); }
.wm__item svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; color: var(--blue-700); }
.wm__item-tekst small { color: var(--muted); }
.wm__tag {
  display: inline-block;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--bg-50);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-data);
}

.wm__detail { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 14px 18px; }
.wm__detail h3 {
  margin: 0 0 2px;
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--blue-700);
}
.wm__actie {
  font-family: var(--font-sans);
  font-size: var(--fs-data);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1px 8px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--bg-50);
  color: var(--muted);
  vertical-align: 2px;
}
.wm__actie--aangemaakt { color: var(--ok); border-color: var(--ok); background: rgba(46, 125, 82, .08); }
.wm__actie--verwijderd { color: var(--err); border-color: var(--err); background: rgba(179, 38, 30, .07); }
.wm__meta { margin: 0 0 12px; color: var(--muted); font-size: var(--fs-data); }

.wm__diff { width: 100%; border-collapse: collapse; font-size: var(--fs-data); }
.wm__diff th, .wm__diff td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.wm__diff thead th {
  font-size: var(--fs-data);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--blue-700);
  background: var(--bg-50);
}
.wm__diff tbody th { color: var(--muted); font-weight: 500; width: 130px; }

/* Uitklapbaar volledig recordbeeld onder de veld-diff. */
.wm__meer { margin-top: 12px; }
.wm__meer summary { cursor: pointer; color: var(--blue-700); font-size: var(--fs-data); }
.wm__meer[open] summary { margin-bottom: 6px; }
/* De velden die bij deze wijziging veranderden: vlakke goudtint over de rij. */
.wm__rij--gewijzigd th, .wm__rij--gewijzigd td { background: rgba(232, 180, 0, .13); }

.wm__acties { margin-top: 14px; }
.wm__acties .btn + .btn { margin-left: 8px; }
.wm__teruggedraaid {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--ok);
  font-size: var(--fs-data);
}
.wm__teruggedraaid svg { width: 15px; height: 15px; }

/* Record-popup: het actuele record, boven de wijzigingen-popup. */
.wm__record { position: fixed; inset: 0; z-index: 90; }
.wm__record-scrim { position: absolute; inset: 0; background: rgba(28, 42, 57, .35); }
.wm__record-venster {
  position: relative;
  margin: 12vh auto 0;
  width: min(560px, calc(100vw - 48px));
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(28, 42, 57, .28);
}
.wm__record-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.wm__record-kop h3 { margin: 0; font-family: var(--font-heading); font-size: 1rem; color: var(--blue-700); }
.wm__record-body { overflow-y: auto; padding: 8px 16px 14px; }

.wm__voet {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}
.wm__positie { color: var(--muted); font-size: var(--fs-data); min-width: 70px; text-align: center; }
.wm__status { flex: 1 1 auto; text-align: right; color: var(--muted); font-size: var(--fs-data); }
/* Compacte knoppen in de popup (uniforme popup-maat). */
.wm .btn { padding: 5px 12px; font-size: .8rem; }

/* ---- Smal scherm: stapelen, splitters uit ------------------------------------- */
/* Smal scherm (telefoon, B-122): de werkbalk-regel "nooit afbreken" is een
   desktopkeuze; op ~390px past "Nieuwe X + Snel bewerken + teller + zoeken +
   filter" niet op een regel en werd de filterknop onbereikbaar afgeknipt
   (.lg heeft overflow:hidden). Daarom mag de balk hier wel wrappen. */
@media (max-width: 767px) {
  .lg-bar { flex-wrap: wrap; row-gap: 6px; }
}

@media (max-width: 860px) {
  .lg-vlak { flex-direction: column !important; height: auto; }
  .lg--rechts .lg-lijst, .lg--onder .lg-lijst { flex: 0 0 auto; }
  .lg-scroll { max-height: 55vh; }
  .lg-splitter--b, .lg-splitter--h { display: none !important; }
  .lg--rechts .lg-detail { margin-left: 0; margin-top: 8px; }
  .wm__body { flex-direction: column; }
  .wm__zijde { flex: 0 0 auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .wm__lijst { max-height: 30vh; }
}

/* ---- Ingebed listgrid (.lg-embed op de omhullende container) ------------------ */
/* Markeer de container met `lg-embed` als je een listgrid ergens INBEDT (bv. in
   een beheerpaneel zoals Stamgegevens) i.p.v. als fullbleed view. Een listgrid
   vult normaal de vensterhoogte (height:100%) en de lijst krijgt via de splitter
   een vaste PIXEL-breedte; ingebed is de breedte beperkt, waardoor het zonder
   deze regels uit zijn kader breekt. Twee smaken:

   1. Content-gedreven (kale `lg-embed`): de omhullende container heeft GEEN vaste
      hoogte (bv. Rollen). Het listgrid krijgt een content-hoogte en ALTIJD de
      gestapelde layout (lijst boven, detail eronder), onafhankelijk van de
      viewport-breedte; de lijst scrolt binnen een eigen maximum. Splitters hebben
      hier geen zin (geen vaste totaalhoogte om te verdelen), dus die staan uit.
   2. Vullend (`lg-embed lg-embed--vast`): de container heeft WEL een vaste hoogte
      (bv. Stamgegevens' .inst-stamdata). Het listgrid vult die hoogte en de
      lijst/detail-splitter komt terug, zodat de gebruiker zelf bepaalt hoeveel
      ruimte het detail krijgt (NFR-9; voorkomt een te lage detailkaart).

   Globaal en herbruikbaar: een nieuwe inbedding voegt `lg-embed` toe (en
   `lg-embed--vast` als de container een vaste hoogte heeft). */
.lg-embed { min-width: 0; }
.lg-embed:not(.lg-embed--vast) .lg { height: auto; }
.lg-embed:not(.lg-embed--vast) .lg-vlak { flex-direction: column; height: auto; }
.lg-embed:not(.lg-embed--vast) .lg--rechts .lg-lijst,
.lg-embed:not(.lg-embed--vast) .lg--onder .lg-lijst { flex: 0 0 auto; }
.lg-embed:not(.lg-embed--vast) .lg-scroll { max-height: 52vh; }
.lg-embed:not(.lg-embed--vast) .lg-splitter--b,
.lg-embed:not(.lg-embed--vast) .lg-splitter--h { display: none !important; }
.lg-embed .lg--rechts .lg-detail { margin-left: 0; margin-top: 8px; }

/* Vullende inbedding: vul de vaste containerhoogte, gestapeld, met een werkende
   HORIZONTALE (lijst/detail) splitter. De verticale splitter heeft hier geen
   functie; in popup-stand is er niets te verdelen. De lijst krijgt de
   ingestelde hoogte (--lg-lijst-hoogte, gedeeld met de fullbleed onder-stand),
   het detail vult de rest en scrolt intern. */
.lg-embed--vast .lg { height: 100%; }
.lg-embed--vast .lg-vlak { flex-direction: column; flex: 1 1 auto; height: auto; min-height: 0; }
.lg-embed--vast .lg--rechts .lg-lijst,
.lg-embed--vast .lg--onder .lg-lijst { flex: 0 0 var(--lg-lijst-hoogte, 55%); }
.lg-embed--vast .lg--popup .lg-lijst { flex: 1 1 auto; }
.lg-embed--vast .lg-scroll { max-height: none; }
.lg-embed--vast .lg-splitter--h { display: block; }
.lg-embed--vast .lg-splitter--b,
.lg-embed--vast .lg--popup .lg-splitter--h { display: none; }
/* Zoekveld: de vaste vw-breedte (34vw) is bedoeld voor een fullbleed view en
   loopt in het smalle paneel over. Ingebed vult het zoekveld de volle
   toolbarbreedte (eigen regel) en krimpt netjes mee. */
.lg-embed .lg-zoek { flex: 1 1 100%; min-width: 0; }
.lg-embed .lg-zoek input { width: auto; flex: 1 1 auto; min-width: 0; }

/* ---- Detail-sublijst "Acties" (werving, B-100) ---------------------------
   Read-only lijstje in het detailvenster: voor welke acties is deze persoon
   uitgenodigd/bevestigd. Alleen lay-out; badges via .lg-badge. */
.lg-deelnames__kop { margin: 14px 0 6px; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.lg-deelnames { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lg-deelnames__rij { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-data); color: var(--ink-900); }
.lg-deelnames__leeg, .lg-deelnames__laden { color: var(--muted); font-size: var(--fs-data); }