/* Basis-styling, afgestemd op de nieuwe Sjofar-website. Bouw schermspecifieke
   stijl op met de tokens uit tokens.css; vermijd losse hex-kleuren. */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

/* ---- Zichtbare focusstijl (F7.6) --------------------------------------------
   Een uniforme, goed zichtbare focusring voor toetsenbordgebruikers op ELK
   interactief element dat geen eigen :focus-visible-stijl meedraagt (zijbalk-
   menu, topbalk, account-menu, generieke knoppen/links/velden). Bewust een
   2px-ring in het primaire blauw - conform de huisstijl (agenda gebruikt de
   gouden variant binnen zijn eigen regels). Lage specificiteit (element-
   selectors) zodat de bestaande, fijner afgestemde component-:focus-visible-
   regels in mailbox.css/agenda.css/layout.css altijd voorgaan. We gebruiken
   :focus-visible (niet :focus), zodat de ring alleen bij toetsenbordnavigatie
   verschijnt en niet bij een muisklik. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[contenteditable="true"]:focus-visible {
  outline: 2px solid var(--blue-700);
  outline-offset: 2px;
}

body {
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--bg-50);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Kolom-layout zodat de footer onderaan blijft, ook op korte pagina's. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Gouden merk-accent langs de bovenrand (een TOP-accent - geen linkerbalk). */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gold-500);
  z-index: 100;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--blue-700);
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.3;
}

a { color: var(--blue-700); }

#app { max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 24px; flex: 1 0 auto; }

/* Knop - zoals op de website: goud vlak met blauwe tekst, hover omgekeerd.
   Flex zodat een icoon (bv. het vinkje bij Opslaan) netjes naast de tekst
   uitlijnt in plaats van scheef op de tekstbasislijn te hangen. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.4;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--gold-500);
  color: var(--blue-700);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
.btn:hover, .btn:focus { background: var(--blue-700); color: var(--blue-100); }
/* Zonder deze regel verliest de UA-regel [hidden]{display:none} van de class-
   `display:inline-flex` hierboven, waardoor een .btn met het hidden-attribuut
   toch zichtbaar blijft. Dat gaf in de bericht-wizard een spookknop: op de
   laatste stap toonde de (verborgen) "Volgende" naast "Verstuur bericht", en
   klikken erop deed niets (dode knop). Zelfde patroon als .btn-actie[hidden]. */
.btn[hidden] { display: none; }

/* Werkbalk-actieknop (Outlook-model, F3.2) - DE globale knopstijl voor
   werkbalken: compact (32px), vlak met 1px-rand, icoon + label. In gebruik
   bij de mailbox, agenda, taken en het listgrid; --primair is de gouden
   hoofdactie, --gevaar de rode variant. Het hidden-attribuut expliciet
   afdekken: de UA-regel [hidden]{display:none} verliest anders van de
   eigen display-regel. */
.btn-actie {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-sm);
  color: var(--ink-900);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Een actieknoplabel blijft altijd op EEN regel (bv. "Snel bewerken" in een
     krappe, ingebedde werkbalk); liever de werkbalk laten meegeven dan de tekst
     over twee regels te breken. */
  white-space: nowrap;
}
.btn-actie svg { width: 16px; height: 16px; }
/* Uitgezonderd de actieve stand: een .is-actief-knop heeft een eigen vlak (vaak
   blauw met lichte tekst). Zou de generieke lichte hover daar de achtergrond
   overschrijven, dan bleef de lichte tekst achter op een lichte grond (onleesbaar,
   zoals de actieve weergave-tab in Communicatie). De actieve knop houdt dus zijn
   eigen vlak op hover; wil een component daar een hover-tint bij, dan definieert
   het die zelf (bv. .lg-bar .btn-actie.is-actief:hover). */
.btn-actie:not(.is-actief):hover:not(:disabled) { background: var(--bg-50); }
.btn-actie:disabled { opacity: .45; cursor: default; }
.btn-actie[hidden] { display: none; }
.btn-actie--primair {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--blue-700);
}
.btn-actie--primair:hover:not(:disabled) { background: var(--gold-300); }
.btn-actie--gevaar { color: var(--err); border-color: var(--line); }

/* ---- Filter-cluster (B-113): de uniforme filter-pil in elke werkbalk --------
   DE uniforme filterknop voor elke werkbalk (planning, listgrid): een .btn-actie
   die de actieve filtercontext toont (label), de filter-flyout opent en oplicht
   zodra er een filter aanstaat - met exact dezelfde .is-actief-markering als de
   kolomkop-trechter (.lg-th-filter.is-actief), zodat alle filter-affordances er
   hetzelfde "aan" uitzien. De WIS-actie zit als segment IN de pil (algemeen
   gangbare "verwijderbare-filterchip"-opzet): zodra er een filter aanstaat
   verschijnt rechts in de knop een X die alle filters wist; de rest van de knop
   opent de flyout. .filtercluster is de menu-wrap zelf (position: relative voor de
   flyout). De X toggelt met het hidden-attribuut (binnen .lg dekt `.lg [hidden]`
   dat met display:none af). */
.filtercluster { display: inline-flex; align-items: center; }
.filterknop { gap: 6px; max-width: 230px; }
.filterknop__lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filterknop__pijl { width: 14px; height: 14px; opacity: .65; flex: 0 0 auto; }
.filterknop.is-actief { background: var(--blue-100); border-color: var(--blue-700); color: var(--blue-700); }
.filterknop.is-actief svg { color: var(--blue-700); }
/* Geintegreerde wis-knop: vormt samen met de filterknop EEN pil (verwijderbare
   chip). Alleen aanwezig als er een filter aanstaat; dan vierkant de filterknop
   zijn rechterkant af en levert de X de scheidslijn + ronde rechterhoek. */
.filtercluster:has(.filterknop__wis:not([hidden])) .filterknop {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.filterknop__wis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--blue-700);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--blue-100);
  color: var(--blue-700);
  cursor: pointer;
}
.filterknop__wis svg { width: 15px; height: 15px; }
.filterknop__wis:hover, .filterknop__wis:focus-visible { background: var(--blue-700); color: var(--blue-100); }

/* Per-veld filtercontrol in een filter-flyout (B-114): label + control + een
   wis-X die ALLEEN verschijnt als het veld een filter heeft (zoals het
   wiskruisje in een zoekveld), zodat je een filter niet meer via de "Alle"-optie
   hoeft op te zoeken. EEN globale class, app-breed (listgrid + planning). De X
   wist alleen dat ene veld; voor "alles wissen" is er de filter-pil. */
.filterveld { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: var(--radius-sm); }
.filterveld__rij { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.filterveld__rij > span { flex: 0 0 38%; font-size: var(--fs-data); color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filterveld.is-actief .filterveld__rij > span { color: var(--blue-700); font-weight: 600; }
.filterveld__rij select,
.filterveld__rij input {
  flex: 1 1 auto; min-width: 0; height: 28px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); font: inherit; font-size: var(--fs-data); color: var(--ink-900);
}
.filterveld.is-actief .filterveld__rij select,
.filterveld.is-actief .filterveld__rij input { border-color: var(--blue-700); background: var(--blue-100); color: var(--blue-700); font-weight: 600; }
.filterveld__bereik { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; }
.filterveld__bereik input { width: 0; }
.filterveld__wis {
  flex: 0 0 auto; width: 26px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--blue-700); border-radius: var(--radius-sm);
  background: var(--blue-100); color: var(--blue-700); cursor: pointer;
}
.filterveld__wis svg { width: 14px; height: 14px; }
.filterveld__wis:hover, .filterveld__wis:focus-visible { background: var(--blue-700); color: var(--blue-100); }
/* In een instelflyout-paneel wint de brede ".instelflyout__paneel button"-regel
   (width:100%, border:0, gedempte svg) van de losse .filterveld__wis, waardoor de
   X als volle-breedte knop op een 2e regel belandt. Scoped overschrijven (net als
   .instelflyout__slot) zodat de wis-X ook in de flyout een compacte, omrande chip
   op DEZELFDE regel als het veld blijft. */
.instelflyout__paneel .filterveld__wis {
  flex: 0 0 auto;
  width: 26px;
  border: 1px solid var(--blue-700);
  background: var(--blue-100);
  color: var(--blue-700);
}
.instelflyout__paneel .filterveld__wis:hover,
.instelflyout__paneel .filterveld__wis:focus-visible { background: var(--blue-700); color: var(--blue-100); }
.instelflyout__paneel .filterveld__wis svg { width: 14px; color: inherit; }

/* Teller-badge - DE globale stijl voor alle icoon-/menutellers (zijbalk,
   topbalk, enz.): een gouden pil met blauwe tekst, zoals .btn. Plekken van
   gebruik regelen alleen hun eigen positionering (bv. .nav-badge,
   .topbar-badge); kleur en vorm staan uitsluitend hier. */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gold-500);
  color: var(--blue-700);
  font-size: .66rem;
  font-weight: 700;
  line-height: 1;
}
.badge[hidden] { display: none; }

/* Anker voor een teller die OP een icoon zit (topbalk-actie-iconen en de
   menu-iconen in de zijbalk): een box op de icoonmaat met de .badge absoluut op
   de rechterbovenhoek. DE bron voor de PLEK van zo'n teller, zodat topbalk en
   menu uniform zijn - de uitsteek staat als token (--badge-uitsteek) en een
   wijziging daaraan werkt overal door. Het uiterlijk komt uit de globale .badge;
   de ring-kleur zet elke gebruiker zelf (matcht zijn eigen achtergrond). */
.ico-teller {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--icon-chrome);
  width: var(--icon-chrome);
  height: var(--icon-chrome);
}
.ico-teller > .badge {
  position: absolute;
  top: calc(-1 * var(--badge-uitsteek));
  right: calc(-1 * var(--badge-uitsteek));
  pointer-events: none;
}

/* Header: linksboven het "Connect"-wordmerk + ondertitel (de app-identiteit) */
.app-header {
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding: 18px 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.app-brand { display: flex; flex-direction: column; gap: 3px; }
.app-naam {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.9rem;
  letter-spacing: -0.3px;
  line-height: 1;
  color: var(--blue-700);
}
.app-ondertitel {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: .6rem;
  color: var(--muted);
}
.brand-mark { color: var(--gold-500); } /* eerste letter van de appnaam in goud */

/* Footer: het Sjofar-logo als afzender, onderaan */
.app-footer {
  max-width: var(--maxw);
  width: 100%;
  margin: 40px auto 0;
  padding: 18px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: .85rem;
}
.app-footer__logo { height: 40px; width: auto; display: block; }

/* Meldingkaart: een nette boodschap binnen een vlakke kaart. Gebruikt voor
   login-status, "geen toegang" en schermen die nog in ontwikkeling zijn. */
.melding {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.melding h1 { margin: 0 0 6px; }
.melding p { color: var(--muted); margin: 4px 0; }
.melding code { background: var(--bg-50); padding: 1px 5px; border-radius: 4px; }
/* Knoprij in een meldingkaart (bv. vrijwilliger bevestigen/afmelden). Alleen
   lay-out; de knoppen zelf zijn globale .btn/.btn-actie. */
.melding__acties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.melding__gegevens { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-50); }
.melding__gegevens dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.melding__gegevens dd { margin: 0 0 8px; color: var(--ink-900); font-weight: 600; }

/* Sectielabel: het uniforme mini-kopje boven een groep bedienelementen of chips
   (bv. STATUS / ROL / OPGESLAGEN DOELGROEPEN in een kiezer, of een veldgroep-kop).
   Eén globale schrijfwijze - Poppins, klein, getrackt, mutekleur - zodat zulke
   labels overal in de app hetzelfde ogen. Consumers die deze class gebruiken
   regelen ALLEEN hun eigen plaatsing (kolombreedte, wrap, uitlijning); het
   uiterlijk blijft hier centraal. */
.sectielabel {
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Teaser-label "In ontwikkeling" - goud vlak met blauwe tekst (zoals .btn). */
.melding__badge {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 11px;
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue-700);
  background: var(--gold-500);
  border-radius: 999px;
}

/* ---- Instelflyout (globaal patroon, B-55/B-61) --------------------------------
   Klein voorkeurenpaneel met een verticale tabkolom LINKS en een voet met
   alleen "Sluiten" (keuzes werken direct door), zoals onder het tandwiel van
   elke lijst. Herbruikbaar in nieuwe schermen: geef de container de klasse
   `instelflyout` en gebruik __tabs/__tab, __paneel, __rij/__vink/__slot/
   __scheiding en __voet. Maatvoering: de tabtitels staan bewust een maat
   GROTER dan de instellingen; de instellingen zelf een slag kleiner dan de
   gegevens in het scherm. De voetknop is een gewone .btn (globale knopstijl). */
div.instelflyout {
  display: grid;
  /* De tab-kolom groeit mee met het breedste tab-label (nowrap), zodat ook
     een langere titel als "Zichtbare kolommen" altijd op een regel past. */
  grid-template-columns: max-content 1fr;
  grid-template-areas:
    'tabs paneel'
    'voet voet';
  /* Rij 1 (tabs/paneel) is krimpbaar en scrolt zelf; rij 2 (de voet met acties)
     houdt zijn eigen hoogte en blijft daardoor ALTIJD in beeld - ook als de
     inhoud langer is dan het (op .lg-menu begrensde) flyout-venster. */
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: 8px;
}
/* Buiten een .lg-root (bv. de mailbox-flyout) moet het hidden-attribuut de
   display:grid hierboven verslaan, anders blijft de flyout zichtbaar. De
   class+attribuut-selector (0,2,0) wint van div.instelflyout (0,1,1). */
.instelflyout[hidden] { display: none; }
.instelflyout__tabs {
  grid-area: tabs;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin: 0;
  padding-right: 8px;
  border-right: 1px solid var(--line);
  /* Een lange tabkolom scrolt mee binnen de begrensde rij i.p.v. de voet weg te duwen. */
  min-height: 0;
  overflow-y: auto;
}
.instelflyout__tab {
  padding: 7px 9px;
  border: 0;
  background: none;
  font: inherit;
  font-family: var(--font-heading);
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  border-radius: var(--radius-sm);
}
.instelflyout__tab:hover { color: var(--blue-700); background: var(--bg-50); }
.instelflyout__tab.is-actief {
  color: var(--blue-700);
  background: var(--blue-100);
}

.instelflyout__paneel {
  grid-area: paneel;
  display: flex;
  flex-direction: column;
  /* In een begrensde flyout scrolt ALLEEN het paneel; de voet eronder blijft staan.
     flex: 1 1 auto geldt voor de platte flex-flyout (planning-filters), grid-area
     voor de tandwiel-grid; min-height:0 + overflow maken het scrollen mogelijk. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  align-content: flex-start;
}
.instelflyout__paneel button {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 5px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: .78rem; /* een slag kleiner dan de lijst-/schermwaarden */
  color: var(--ink-900);
  cursor: pointer;
}
.instelflyout__paneel button:hover:not(:disabled) { background: var(--bg-50); }
.instelflyout__paneel button:disabled { opacity: .65; cursor: default; }
.instelflyout__paneel button.is-actief {
  background: var(--blue-100);
  color: var(--blue-700);
  font-weight: 600;
}
.instelflyout__paneel button.is-aangevinkt { color: var(--blue-700); }

.instelflyout__vink { flex: 0 0 14px; text-align: center; }
.instelflyout__paneel button.is-aangevinkt .instelflyout__vink::before {
  content: '\2713';
  color: var(--blue-700);
  font-weight: 700;
}

.instelflyout__rij { display: flex; align-items: center; gap: 2px; }
.instelflyout__rij > button:first-child { flex: 1 1 auto; }
/* Slot-styling op .instelflyout__paneel scopen (NIET op .instelflyout): de platte
   filter-flyout (planning "Mijn filters") hergebruikt deze rijen wel, maar de
   CONTAINER draagt daar geen .instelflyout-class. Zonder deze scoping vielen de
   icoonknoppen terug op ".instelflyout__paneel button { width:100% }" en stonden
   ze als volle kolommen ver uit elkaar. Het paneel heeft de class wel overal, en
   de extra class wint qua specificiteit van de brede paneel-knopregel hierboven. */
.instelflyout__paneel .instelflyout__slot {
  flex: 0 0 auto;
  width: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.instelflyout__paneel button.instelflyout__slot:hover { background: var(--blue-100); }
.instelflyout__paneel .instelflyout__slot svg { width: 13px; height: 13px; }
.instelflyout__paneel button.instelflyout__slot[aria-pressed="true"] { color: var(--blue-700); }

/* flex:0 0 auto - het paneel is een flex-kolom met max-height + overflow-y; een
   leeg 1px-divje krijgt anders min-height:auto (0) en wordt bij een lange lijst
   (veel kolommen) platgedrukt tot een sub-pixel, waardoor de scheidingslijn
   wegvalt. Zo blijft hij overal even strak als in de planning. */
.instelflyout__scheiding { height: 1px; flex: 0 0 auto; margin: 6px 4px; background: var(--line); }

/* Sectiekop binnen een tandwiel-tab: korte titel + de gedeelde (i)-toelichting,
   uniform met de werkschermen (geen tekstalinea naast de bedienelementen). De
   werkschermen vallen hierop terug i.p.v. een eigen kop-stijl. */
.instelflyout__kop {
  display: block;
  padding: 5px 10px 2px;
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.instelflyout__sectiekop { display: flex; align-items: center; gap: 2px; }
.instelflyout__sectiekop .instelflyout__kop { flex: 1 1 auto; }

/* Actieknoppen in het paneel met een Feather-icoontje (maat van de tekst). */
.instelflyout__paneel button svg { width: 13px; height: 13px; flex: 0 0 13px; color: var(--muted); }

.instelflyout__voet {
  grid-area: voet;
  /* Niet meekrimpen/meescrollen: de actiebalk blijft onderaan staan (flex-flyout). */
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 4px 2px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
/* Voetknoppen delen een compacte, gelijke hoogte zodat een voet meerdere acties
   (reset/opslaan/sluiten) als een nette, uitgelijnde rij toont. */
.instelflyout__voet .btn,
.instelflyout__voet .btn-actie { height: 30px; padding: 0 12px; font-size: .8rem; }
/* Een actie links in de voet (bv. "Reset alle filters") wordt naar links geduwd;
   de overige knoppen blijven rechts. */
.instelflyout__voet .instelflyout__voet-links { margin-right: auto; }

/* ---- Popup-voetlink naar het volledige overzicht (globaal) ------------------
   DE gedeelde onderste link in een dropdown/popover/flyout die maar een SUBSET
   toont en doorverwijst naar de bijbehorende volledige pagina: het taken-belletje
   -> Mijn taken, de mail-menu's -> alle e-mailinstellingen / categoriebeheer. Een
   volle-breedte rij met een scheidingslijn erboven (de voet), een leidend
   context-icoon, het label, en rechts een pijl als "ga hierheen"-signaal. Val
   hierop terug i.p.v. losse blauwe-link-styling; plekken van gebruik regelen
   alleen hun plaatsing - het uiterlijk staat uitsluitend hier, zodat een latere
   aanpassing overal doorwerkt. */
.menu-voetlink {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: none;
  font: inherit;
  font-family: var(--font-heading);
  font-size: .82rem;
  font-weight: 600;
  color: var(--blue-700);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-voetlink:hover,
.menu-voetlink:focus-visible { background: var(--blue-100); outline: none; }
.menu-voetlink svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--blue-700); }
.menu-voetlink__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* De pijl rechts is een richtingssignaal (gedempt), geen tweede actie-icoon. */
.menu-voetlink svg.menu-voetlink__pijl { color: var(--muted); }

/* ---- Popup binnen het scherm (globaal) -------------------------------------
   DE gedeelde "blijf binnen de viewport"-regel voor elk dropdown-/flyout-menu:
   capt de hoogte op de beschikbare ruimte en laat de inhoud zelf scrollen, i.p.v.
   onder de schermrand te verdwijnen (waardoor de onderste opties + de voetlink
   onbereikbaar werden). Val hierop terug i.p.v. een losse max-height per menu.
   --popup-reserve = de ruimte boven de menutop (afstand van de knop tot de
   bovenrand + marge); de plek van gebruik zet die per anker - default = vlak
   onder de topbalk; werkbalk-/dieper-gankerde menu's zetten een grotere waarde. */
.popup-scrollbaar {
  max-height: calc(100dvh - var(--popup-reserve, 96px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---- Toelichting-tooltip (components/toelichting-tooltip.js, globaal) --------
   DE i-knop bij een veld met toelichting; overal hetzelfde (formulier,
   detailkaart, record-popup). De tekst opent als zwevende ballon bij de knop. */
.toelichting-knop {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--toelichting-knop);
  height: var(--toelichting-knop);
  align-self: center;
  vertical-align: middle;
  color: var(--muted);
}
.toelichting-knop svg { width: var(--toelichting-knop-svg); height: var(--toelichting-knop-svg); }
.toelichting-knop[aria-expanded="true"] { color: var(--blue-700); background: var(--blue-100); }

/* De ballon: donker vlak met pijlpunt, position: fixed zodat scrollende
   panelen en modals hem niet afknippen (boven alles, een tegelijk). De pijl
   volgt de i-knop via --tip-pijl-x, ook als de ballon aan de vensterrand is
   geklemd; de variant --onder hangt de ballon onder de knop. */
.toelichting-tip {
  position: fixed;
  z-index: 110;
  max-width: 320px;
  padding: 9px 12px;
  background: var(--ink-900);
  color: #fff;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(28, 42, 57, .35);
  font-size: var(--fs-data);
  line-height: 1.45;
}
.toelichting-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--tip-pijl-x, 50%);
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--ink-900);
}
.toelichting-tip--onder::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--ink-900);
}

/* ---- Contactkaart (components/contactkaart.js, globaal) ----------------------
   Zwevende kaart met de contactgegevens van een betrokkene (naam/rol/telefoon/
   e-mail) plus snelacties; overal hetzelfde (planning-grid, keer-detailpopup).
   Vlakke kaart (volledige 1px-rand + lichte schaduw), position: fixed boven de
   modals (z-index 120, gelijk aan de contactkaart bij de mail-chips). De
   snelactie-icoonknoppen erven de globale .btn-ico. */
.contactkaart {
  position: fixed;
  z-index: 120;
  width: 290px;
  max-width: calc(100vw - 16px);
  padding: 12px 14px;
  background: var(--paper);
  color: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: var(--fs-data);
}
.contactkaart__kop { margin-bottom: 8px; }
.contactkaart__naam { display: block; font-weight: 600; }
.contactkaart__rol { color: var(--muted); }
.contactkaart__velden { margin: 0; display: grid; gap: 6px; }
.contactkaart__rij { display: flex; align-items: center; gap: 8px; }
.contactkaart__rij dt { flex: 0 0 52px; color: var(--muted); }
.contactkaart__rij dd { margin: 0; display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.contactkaart__waarde { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.contactkaart__acties { flex: 0 0 auto; display: inline-flex; gap: 4px; }
.contactkaart__acties .btn-ico { width: 28px; height: 28px; }
.contactkaart__acties .btn-ico svg { width: 15px; height: 15px; }
.contactkaart__leeg { margin: 0; color: var(--muted); }
.contactkaart__scheiding { height: 1px; background: var(--line); margin: 10px 0; }

/* Klikbare persoonsnaam die de contactkaart opent (grid-metakolom, keer-detail).
   Oogt als een tekstlink, niet als een knop; respecteert de cel-ellipsis. */
.contactnaam {
  display: inline-block;
  max-width: 100%;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--blue-700);
  cursor: pointer;
  text-align: left;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contactnaam:hover, .contactnaam:focus-visible { text-decoration: underline; }

/* Verborgen host voor een listgrid dat ALLEEN zijn detailpopup levert (bv. de
   planning die de Locaties-/Vergunningen-detailkaart als losse popup opent): het
   grid wordt buiten beeld opgebouwd; de popup zelf staat gewoon op de body. */
.lg-verborgen-host { position: fixed; left: -99999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* ---- Kleurkiezer (gedeeld component, components/kleurkiezer.js) --------------
   Een rij kleur-swatches uit het huisstijl-palet i.p.v. een tekst-dropdown met
   kleurnamen. De swatch-kleur per sleutel volgt hetzelfde palet als de listgrid-
   badges (.lg-badge--<sleutel>). De gekozen swatch krijgt een blauwe focusring. */
.kleurkiezer { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kleurkiezer__swatch {
  width: 26px; height: 26px; padding: 0; border-radius: 7px;
  border: 1px solid rgba(28, 42, 57, .2); cursor: pointer;
  background-clip: padding-box; transition: transform .08s ease;
}
.kleurkiezer__swatch:hover:not(:disabled) { transform: scale(1.08); }
.kleurkiezer__swatch:disabled { cursor: default; opacity: .5; }
.kleurkiezer__swatch.is-gekozen,
.kleurkiezer__swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blue-700, #004780);
}
.kleurkiezer__swatch--ok       { background: var(--ok, #2e7d52); }
.kleurkiezer__swatch--warn     { background: var(--warn, #c08a1e); }
.kleurkiezer__swatch--err      { background: var(--err, #b3261e); }
.kleurkiezer__swatch--gold     { background: var(--gold-500, #e8b400); }
.kleurkiezer__swatch--blauw    { background: var(--blue-700, #004780); }
.kleurkiezer__swatch--neutraal { background: var(--muted, #8595a6); }

/* ---- Icoonkiezer (gedeeld component, components/icoonkiezer.js) --------------
   Een rooster icoon-knoppen, zelfde gedrag/markering als de kleurkiezer-swatch
   (blauwe focus-/keuze-ring). */
.icoonkiezer { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.icoonkiezer__optie {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border-radius: 7px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-900);
  cursor: pointer; transition: transform .08s ease, background-color .12s ease;
}
.icoonkiezer__optie svg { width: 15px; height: 15px; }
.icoonkiezer__optie:hover:not(:disabled) { transform: scale(1.08); background: var(--bg-50); }
.icoonkiezer__optie:disabled { cursor: default; opacity: .5; }
.icoonkiezer__optie.is-gekozen,
.icoonkiezer__optie:focus-visible {
  outline: none; color: var(--blue-700);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blue-700, #004780);
}

/* ---- Filter-merk (gedeeld, components/filter-merk.js) ------------------------
   Het badge (icoon in gekleurd chip) links van een opgeslagen filter/doelgroep,
   plus de twee-rij-kiezer (icoon + kleur) in een save-/edit-dialoog. De chip-
   kleuren volgen hetzelfde getinte palet als de listgrid-badges (.lg-badge--*). */
.filtermerk {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line);
}
.filtermerk svg { width: 14px; height: 14px; }
.filtermerk--ok       { color: var(--ok);       border-color: color-mix(in srgb, var(--ok) 35%, white);       background: color-mix(in srgb, var(--ok) 12%, white); }
.filtermerk--warn     { color: var(--warn);     border-color: color-mix(in srgb, var(--warn) 35%, white);     background: color-mix(in srgb, var(--warn) 12%, white); }
.filtermerk--err      { color: var(--err);      border-color: color-mix(in srgb, var(--err) 35%, white);      background: color-mix(in srgb, var(--err) 12%, white); }
.filtermerk--gold     { color: #7a5c00;         border-color: color-mix(in srgb, var(--gold-500) 45%, white); background: color-mix(in srgb, var(--gold-500) 18%, white); }
.filtermerk--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); }
.filtermerk--neutraal { color: var(--muted);    border-color: var(--line);                                    background: var(--bg-50); }

.filtermerk-kiezer { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.filtermerk-kiezer__rij { display: flex; align-items: center; gap: 10px; }
.filtermerk-kiezer__label {
  flex: 0 0 44px; font-family: var(--font-heading); font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}

/* ---- Rol-kiezer (gedeeld, components/filter-merk.js) -------------------------
   Toggle-pillen om een org-filter te taggen ('Iedereen' + rol per chip), zelfde
   "aan"-stijl als de overige filterchips. Gebruikt door de save-popup en de
   beheerrubriek, zodat de keuze overal hetzelfde oogt en werkt. */
.rolkiezer { display: flex; flex-wrap: wrap; gap: 6px; }
.rolkiezer__chip {
  display: inline-flex; align-items: center; padding: 5px 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  color: var(--ink-900); font: inherit; font-size: var(--fs-data); cursor: pointer;
}
.rolkiezer__chip:hover { border-color: var(--blue-700); }
.rolkiezer__chip.is-aan { background: var(--blue-700); border-color: var(--blue-700); color: var(--blue-100); }

/* ---- Profielfoto's op avatars (XC11) ----------------------------------------
   Alle initialen-avatars (mailbox-lijst, leeskop, personen-kiezer, ontvanger-
   chips) dragen een `...avatar`-element met de initialen als terugval. Heeft de
   persoon een echte Entra-profielfoto, dan zet lib/avatar-foto.js die als
   achtergrond en de klasse `heeft-foto`; de foto vult de cirkel en de initialen
   (de tekst-inhoud) worden onzichtbaar. Generiek (lage specificiteit), zodat
   elke avatar-variant meedoet zonder eigen regel. */
.heeft-foto {
  background-size: cover !important;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent !important; /* de initialen verbergen achter de foto */
}

/* ---- Bestandsnaam met altijd zichtbare extensie (lib/bestandsnaam.js) --------
   Globale component voor elke plek die een bestandsnaam toont (bijlage-chips,
   bijlage-tegels, viewer-titel): wordt de ruimte te krap, dan breekt de BASIS
   af met een ellipsis en blijft de extensie staan ("Beheergegeven....docx").
   Consumers zetten hooguit een eigen klasse ernaast voor plaatsing/typografie;
   het afbreekgedrag staat alleen hier. */
.bestandsnaam { display: inline-flex; min-width: 0; max-width: 100%; white-space: nowrap; }
.bestandsnaam__basis { overflow: hidden; text-overflow: ellipsis; }
.bestandsnaam__ext { flex: 0 0 auto; }