/* Excel-lijsten (B-131): vrijwilliger zoeken in de Excel-lijsten op SharePoint.
   Het UITERLIJK komt uit de globale componenten: .card (forms.css), .datatabel +
   .tabel-scroll (tabel.css), .lg-zoek, .lg-badge (listgrid.css), .btn/.btn--licht,
   .btn-actie(--primair), .btn-ico .btn-ico--kader (globale maat), .melding
   (base.css) en de popup via .modal-venster.modal-venster--klein + .modal-body
   (modal.css, B-88). Dit bestand regelt ALLEEN layout/plaatsing en de eigen
   markeringen van de module: de hoofdbestandrij, de Excel-knop-overlay en de
   lokale breedte-token van de popup. Geen linker-accentbalk, kaarten vlak. */

/* ---- Scherm: kaarten onder elkaar ------------------------------------------ */
.xl { display: flex; flex-direction: column; gap: 16px; }
.xl-kaart { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
/* Scrollen naar een kaart: de sticky topbalk (60px) mag de kaartkop niet afdekken. */
.xl-kaart, [data-xl="resultaat"] { scroll-margin-top: 76px; }
.xl-kaart__kop { display: flex; align-items: center; gap: 10px; }
.xl-kaart__kop h2 { margin: 0; font-size: 1.05rem; }
.xl-kaart__kop > svg { flex: 0 0 auto; }
.xl-kaart__rechts { margin-left: auto; }

/* Zoekregel: het globale zoekveld vult de breedte, de knop ernaast. */
.xl-zoek { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Het zoekveld is bewust niet vensterbreed: een naam, e-mailadres of nummer past ruim in 480px. */
.xl-zoek .lg-zoek { flex: 1 1 260px; max-width: 480px; }
.xl-zoek .lg-zoek input { flex: 1 1 auto; width: auto; }

/* Statusregel (indexstatus) en de details bij onleesbare lijsten. */
/* Indexstatus: klein, rechts in de kaartkop naast de verversknop (geen extra regel). */
.xl-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin: 0; font-size: var(--fs-data); color: var(--muted); }
.xl-status:empty { display: none; }
.xl-status__fout { color: var(--warn); font-weight: 600; }
.xl-fouten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-data); }
.xl-fouten li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xl-fouten__naam { font-weight: 600; }
.xl-fouten__reden { color: var(--muted); }

/* Meldingen boven de resultaten: gewone .melding, alleen de onderlinge ruimte. */
[data-xl="resultaat"] { display: flex; flex-direction: column; gap: 12px; }
[data-xl="resultaat"]:empty { display: none; }
.xl-regel p, .xl-banner p { margin: 0; }

/* Persoonskop boven de treffers. */
.xl-persoon { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.xl-persoon__naam { font-family: var(--font-heading); font-weight: 600; }
.xl-persoon__meta { color: var(--muted); font-size: var(--fs-data); }
.xl-voet { margin: 0; color: var(--muted); font-size: var(--fs-data); }

/* ---- Tabellen (globale .datatabel) -------------------------------------------- */
.xl-tabel .xl-vink { width: 34px; }
.xl-tabel tr[data-key] { cursor: pointer; }
.xl-tabel tr[data-key]:focus-visible { outline: 2px solid var(--blue-700); outline-offset: -2px; }
.xl-tabel .xl-naam { font-weight: 600; }
/* De hoofdbestand-cel mag afbreken (hint, Non-actief-reden), zodat de tabel niet
   onnodig horizontaal scrollt; de badges zelf blijven heel. */
.xl-tabel .xl-hoofdcel { white-space: normal; min-width: 220px; }
.xl-tabel .xl-hoofdrij + .xl-hoofdrij { margin-left: 8px; }
.xl-tabel .xl-col-excel { width: 1%; text-align: right; }

/* Hoofdbestand: subtiele 1px gestreepte kaderlijn rond de rij, licht vlak, vet. */
.xl-tabel .xl-hoofd { outline: 1px dashed color-mix(in srgb, var(--blue-700) 55%, white); outline-offset: -1px; }
.xl-tabel .xl-hoofd td { background: var(--bg-50); font-weight: 600; }

/* Excel-knop: het officiele Excel-pictogram op de globale omrande .btn-ico, met
   een klein nieuw-venster-teken rechtsboven. De overlay-maat moet winnen van
   `.lg .btn-ico svg` (16px), vandaar de extra klasse in de selector. */
.xl-excel { position: relative; }
.lg .xl-excel svg.xl-excel__uit {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 12px;
  height: 12px;
  padding: 1px;
  background: var(--paper);
  border-radius: 3px;
  color: var(--blue-700);
}

/* ---- Popup (module-eigen helper op het globale modalsysteem, B-88) ---------- */
/* EEN breedte-instelling voor alle popups van de module: de lokale token op de
   wrapper, niets op :root en geen width/max-height/overflow op het venster. */
.xl-modal {
  --xl-popup-breedte: 1120px;
  --modal-w-klein: min(var(--xl-popup-breedte), calc(100vw - 32px));
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.xl-modal__scrim { position: absolute; inset: 0; background: var(--modal-scrim); }
.xl-modal__venster { position: relative; }
.xl-modal__kop { padding: 18px 20px 10px; }
.xl-modal__kop h2 { margin: 0; font-size: 1.05rem; }
.xl-modal__body { padding: 0 20px; display: flex; flex-direction: column; gap: 12px; }
.xl-modal__voet { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; }
.xl-popup__tekst { margin: 0; font-size: var(--fs-data); line-height: 1.5; }