/* Planning (operationeel jaaroverzicht). Viewportvullend (Outlook-model, B-46),
   UNIFORM met de andere operationele schermen: hergebruikt de GLOBALE listgrid-
   chrome (.lg / .lg-bar / .lg-zoek / .lg-menu / .instelflyout) voor de werkbalk,
   het zoekveld en het tandwiel (schermsettings) - identiek aan Vrijwilligers/
   Voertuigen. Alleen de weergavekiezer, de periodepijlen en de matrix/maand/
   lijst-inhoud zijn planning-eigen. Datamaat overal var(--fs-data). */

/* .view--planning draagt ook de globale .lg-klasse (flex-kolom, vol scherm); hier
   alleen de paginavlak-achtergrond. */
.view--planning { background: var(--bg-50); }

/* ---- Tandwiel-inhoud: planning-eigen stukjes binnen de GLOBALE .instelflyout
   (aandacht-telling + de twee filtervelden); de menu-chrome zelf is globaal. ---- */
.pl-gear__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);
}
/* Sectiekop binnen een tandwiel-tab: korte titel + de gedeelde (i)-toelichting,
   uniform met de werkschermen (geen lange tekstalinea naast de bedienelementen). */
.pl-gear__sectiekop { display: flex; align-items: center; gap: 2px; }
.pl-gear__sectiekop .pl-gear__kop { flex: 1 1 auto; }
.pl-gear__leeg { margin: 0; padding: 4px 10px; color: var(--muted); font-size: var(--fs-data); }
.pl-gear__lbl { flex: 1 1 auto; }
/* Snelle-filterknop: vlak links uitgelijnd (geen vink-inspringing, alleen het
   signaal-icoon vooraan); de telling staat achteraan als telbadge - dezelfde
   ronde pill-conventie als de mappentelling in het Postvak (.mail__map-telt). */
.pl-gear__filter { gap: 8px; }
/* Eén leading-slot (gelijke breedte) voor het icoon/merk-badge van Snelle filters,
   Acties EN Mijn filters, zodat de labels in alle drie de groepen op DEZELFDE x
   uitlijnen (B-114). De merk-badge is zelf al 22px; de bare iconen krijgen hier een
   even brede, gecentreerde slot. */
.pl-gear__ico { flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; }
.pl-gear__n {
  flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--blue-100); color: var(--blue-700);
  font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* Een telling van 0 (geen aandachtspunten) krijgt een neutrale, gedempte pill
   in plaats van de blauwe accentkleur, zodat 0 niet als signaal oogt. */
.pl-gear__n[data-nul] { background: var(--bg-50); color: var(--muted); }
.pl-gearveld { display: flex; flex-direction: column; gap: 3px; padding: 5px 10px; font-size: .78rem; }
.pl-gearveld > span { color: var(--muted); font-weight: 600; }
.pl-gearveld select,
.pl-gearveld input {
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); font: inherit; font-size: var(--fs-data); color: var(--ink-900);
}
.pl-gearveld select:focus-visible,
.pl-gearveld input:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 1px; }
/* Een filterveld met een gekozen (niet-"Alle") waarde is onmiskenbaar actief:
   blauw label + blauw omrande, licht gevulde keuzelijst (zoals het toolbar-trechtertje). */
.pl-gearveld.is-actief > span { color: var(--blue-700); }
.pl-gearveld.is-actief select,
.pl-gearveld.is-actief input { border-color: var(--blue-700); background: var(--blue-100); color: var(--blue-700); font-weight: 600; }
/* Actieve snelle-filterknop (globale .is-actief = blauw vlak): de telbadge en het
   signaal-icoon krijgen het accent zodat ze niet wegvallen tegen het vlak. */
.pl-gear__filter.is-actief svg { color: var(--blue-700); }
.pl-gear__filter.is-actief .pl-gear__n:not([data-nul]) { background: var(--blue-700); color: var(--paper); }

/* Filtercluster (prominente dropdown + geintegreerde wis-knop, naast het
   zoekveld). De filterknop erft het uniforme uiterlijk EN de .is-actief-
   markering van de globale .filterknop (base.css); hier alleen de plaatsing en
   de gedeelde dropdown-knopmaat (die ook de weergavekiezer links gebruikt). De
   menu-wrap is zelf de .filtercluster (position: relative voor de flyout). */
.pl-weergaven-wrap { flex: 0 0 auto; }
.pl-weergaven-knop { gap: 6px; max-width: 230px; }
.pl-weergaven-knop__lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-weergaven-knop .pl-weergaven-knop__pijl { width: 14px; height: 14px; opacity: .65; }
/* min-height: 0 (niet auto) zodat het paneel kan krimpen en zelf scrolt; de voet
   (Reset/Bewaar/Sluiten) blijft daardoor altijd onderin in beeld. */
.pl-weergaven-paneel { min-height: 0; }

/* Weergavekiezer (compacte dropdown links in de balk): hergebruikt de
   .pl-weergaven-knop-stijl en de globale .instelflyout__paneel-knoppen, dus geen
   eigen uiterlijk - alleen de plaatsing/menubreedte. */
.pl-weergavekiezer-wrap { flex: 0 0 auto; }
/* Deze dropdown staat uiterst links in de balk: hij opent naar RECHTS (left:0
   i.p.v. de globale right:0), anders schuiven de opties onder de navigatiebalk. */
.pl-weergavekiezer-menu { min-width: 184px; left: 0; right: auto; }
.pl-weergavekiezer-paneel { min-height: auto; }

/* Legenda (tandwiel-tab Legenda) */
.pl-leg { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pl-leg--extra { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.pl-leg__item { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-data); color: var(--ink-900); }
.pl-leg__item svg { width: 13px; height: 13px; color: var(--muted); }
.pl-leg__item--door { color: var(--muted); text-decoration: line-through; }
.pl-leg__stip { width: 11px; height: 11px; border-radius: 50%; background: var(--pl-kleur, var(--muted)); }
.pl-leg__detail { color: var(--muted); }

/* ---- Werkbalk: planning-eigen knoppen binnen de GLOBALE .lg-bar ----------- */
/* Periodekiezer (vorige / label / volgende / vandaag): compact, de pijlen hugen
   het label (geen brede min-width meer rond het jaartal). */
.pl-nav { display: inline-flex; align-items: center; gap: 3px; }
.pl-nav__stap {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper);
  color: var(--ink-900); cursor: pointer;
}
.pl-nav__stap:hover { background: var(--bg-50); }
.pl-nav__stap svg { width: 16px; height: 16px; }
.pl-nav__label {
  min-width: 0; padding: 0 4px; text-align: center; font-family: var(--font-heading);
  font-weight: 600; font-size: 1rem; color: var(--blue-700); white-space: nowrap;
}
.pl-nav__vandaag { margin-left: 8px; }

/* De scrollzone omsluit de matrix-scroller en draagt de zwevende scroll-knoppen
   (position:relative als anker). */
.pl-scrollzone { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.pl-inhoud { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; }
/* Zwevende scroll-knoppen, verticaal gecentreerd aan de rechter-/linkerrand: een
   hoge, smalle pill met merk-accent (goud vlak + blauwe chevron, zoals de globale
   .btn; op hover omgekeerd naar blauw), zodat hij duidelijk opvalt tegen het lichte
   raster. Ze verschijnen bij hover boven de matrix en alleen als er die kant op te
   scrollen valt; een klik scrollt de planning een stuk op. */
.pl-scrollknop {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 28px; height: 66px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: var(--gold-500); color: var(--blue-700);
  box-shadow: var(--shadow); cursor: pointer;
  opacity: 0; transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.pl-scrollknop[hidden] { display: none; }
.pl-scrollknop svg { width: 22px; height: 22px; }
.pl-scrollknop--links { left: 8px; }
.pl-scrollknop--rechts { right: 8px; }
/* Hover/focus: omgekeerd vlak (blauw met goud), net als de .btn-hover. */
.pl-scrollknop:hover { background: var(--blue-700); color: var(--gold-500); }
.pl-scrollknop:focus-visible { background: var(--blue-700); color: var(--gold-500); outline: 2px solid var(--blue-700); outline-offset: 2px; opacity: 1; }
/* Tonen zodra je in de matrixzone hovert (en de knop niet verborgen is). */
/* 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. */
@media (hover: hover) and (pointer: fine) {
  .pl-scrollzone:hover .pl-scrollknop:not([hidden]) { opacity: 1; }
}
/* Op touch bestaat die hover niet: daar staan de knoppen gewoon altijd aan.
   Belangrijk detail: de basis is opacity 0 ZONDER pointer-events none, dus
   verborgen laten zou onzichtbare knoppen opleveren die tikken onderscheppen. */
@media (hover: none) {
  .pl-scrollknop:not([hidden]) { opacity: 1; }
}

/* ---- Jaarmatrix ----------------------------------------------------------
   Het info-blok links (Locatie + de zichtbare metakolommen) is BEVROREN (elke
   bevroren cel is position:sticky met een eigen left-offset, in JS gezet); alleen
   de maandkolommen scrollen. Zo schuift er nooit tekst onder de Locatie-kolom
   (het oude clipping-probleem) en blijft het hele info-blok in beeld - net als de
   bevroren kolommen in Meiny's Excel. */
.pl-matrix-wrap { padding: 0; }
.pl-matrix {
  border-collapse: separate;
  border-spacing: 0;
  /* Exact zo breed als de som van de kolombreedtes (geen min-width:100%, anders
     rekt de tabel op een breed scherm op en kloppen de bevroren left-offsets niet). */
  width: max-content;
  font-size: var(--fs-data);
  table-layout: fixed;
}
.pl-matrix th, .pl-matrix td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 5px 10px;
  vertical-align: middle;
  background: var(--paper);
}
/* Koprij: standaard datatabel-look (bg-50, blauw, hoofdletters), sticky bovenin. */
.pl-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-50);
  color: var(--blue-700);
  font-weight: 600;
  text-align: left;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* In een fixed-layout-tabel bepaalt de breedte van de KOP-cel de kolombreedte;
   de maandkolommen krijgen daarom hier een vaste breedte (de bevroren info-
   kolommen krijgen die per kolom via inline-style in JS). */
.pl-matrix thead th.pl-m__maand { text-align: center; width: 58px; }
.pl-matrix thead th.pl-m__maand.is-nu { background: var(--blue-100); }

/* Bevroren info-kolommen: breedte + cumulatieve left-offset komen uit CSS-vars
   (--plw-<sleutel> / --pll-<sleutel>) die JS op de tabel zet. Zo zijn de kolommen
   LIVE versleepbaar (alleen de vars updaten, geen her-render van alle rijen). */
.pl-matrix .pl-fz {
  position: sticky;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Koppen mogen overlopen zodat de versleepgreep op de kolomgrens niet wegvalt. */
.pl-matrix thead th.pl-fz { z-index: 3; overflow: visible; }
.pl-matrix .pl-fz--rand { box-shadow: 2px 0 0 var(--line); }
.pl-matrix th.pl-fz--loc { text-align: left; }
.pl-matrix .pl-fz--locatie     { width: var(--plw-locatie, 208px);     min-width: var(--plw-locatie, 208px);     max-width: var(--plw-locatie, 208px);     left: var(--pll-locatie, 0); }
.pl-matrix .pl-fz--provincie   { width: var(--plw-provincie, 110px);   min-width: var(--plw-provincie, 110px);   max-width: var(--plw-provincie, 110px);   left: var(--pll-provincie, 0); }
.pl-matrix .pl-fz--voertuig    { width: var(--plw-voertuig, 88px);     min-width: var(--plw-voertuig, 88px);     max-width: var(--plw-voertuig, 88px);     left: var(--pll-voertuig, 0); }
.pl-matrix .pl-fz--frequentie  { width: var(--plw-frequentie, 132px);  min-width: var(--plw-frequentie, 132px);  max-width: var(--plw-frequentie, 132px);  left: var(--pll-frequentie, 0); }
.pl-matrix .pl-fz--vergunning  { width: var(--plw-vergunning, 104px);  min-width: var(--plw-vergunning, 104px);  max-width: var(--plw-vergunning, 104px);  left: var(--pll-vergunning, 0); }
.pl-matrix .pl-fz--planner     { width: var(--plw-planner, 140px);     min-width: var(--plw-planner, 140px);     max-width: var(--plw-planner, 140px);     left: var(--pll-planner, 0); }
.pl-matrix .pl-fz--actieleider { width: var(--plw-actieleider, 140px); min-width: var(--plw-actieleider, 140px); max-width: var(--plw-actieleider, 140px); left: var(--pll-actieleider, 0); }
/* Kolomgreep (globale .lg-kolomgreep) boven de buurcel zodat hij grijpbaar blijft. */
.pl-matrix .lg-kolomgreep { z-index: 6; }
body.pl-resizing { cursor: col-resize; user-select: none; }
/* Pannen met de ingedrukte rechtermuisknop: grijp-cursor + geen tekstselectie. */
body.pl-panning, body.pl-panning .pl-inhoud { cursor: grabbing; user-select: none; }
/* De scrollende tijdkolom-koppen (dag-/maandkoppen) zijn grijpbaar: sleep ze met
   ingedrukte muisknop om horizontaal door de planning te scrollen. Hand-cursor bij
   hover, grijp-cursor tijdens het slepen (body.pl-panning wint qua specificiteit). */
.pl-matrix thead th.pl-m__dag,
.pl-matrix thead th.pl-m__maand { cursor: grab; }
body.pl-panning .pl-matrix thead th.pl-m__dag,
body.pl-panning .pl-matrix thead th.pl-m__maand { cursor: grabbing; }
.pl-fz__naam { display: block; font-weight: 600; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; }
.pl-fz__sub { display: block; color: var(--muted); font-size: .68rem; overflow: hidden; text-overflow: ellipsis; }
/* Kolomkop met titel + (optioneel) filtertrechtertje: de titel krimpt met een
   ellipsis, het trechtertje (globale .lg-th-filter) blijft altijd zichtbaar. */
.pl-matrix thead th.pl-fz .pl-fz__kop { display: flex; align-items: center; min-width: 0; }
.pl-fz__koptekst { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-matrix tbody tr:hover td, .pl-matrix tbody tr:hover th { background: var(--bg-50); }

.pl-cel { text-align: center; padding: 3px 4px; min-width: 46px; }
.pl-cel.is-leeg { cursor: default; }

/* Dag-chip in een maandcel van de matrix */
.pl-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 22px;
  height: 20px;
  margin: 1px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pl-kleur, var(--muted)) 38%, var(--line));
  background: color-mix(in srgb, var(--pl-kleur, var(--muted)) 14%, var(--paper));
  color: color-mix(in srgb, var(--pl-kleur, var(--muted)) 72%, var(--ink-900));
  font: inherit;
  font-size: .7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  line-height: 1;
}
.pl-chip svg { width: 11px; height: 11px; }
.pl-chip:hover { filter: brightness(.97); border-color: var(--pl-kleur, var(--muted)); }
.pl-chip.is-laag { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--warn) 60%, transparent); }
.pl-chip.is-vervallen { text-decoration: line-through; opacity: .6; }

/* ---- Maandmatrix: smalle dagkolommen + gekleurde stippen ------------------
   Zelfde bevroren info-blok als de jaarmatrix; alleen de scrollende kolommen
   zijn nu de dagen van de maand i.p.v. de maanden van het jaar. */
/* Elke dagkolom exact even breed. width + min + max op dezelfde waarde pinnen
   dwingt gelijke kolommen af in zowel fixed- als auto-tabellayout, zodat een lege
   dag niet smaller wordt en een dag met meerdere stippen niet breder (de stippen
   breken dan netjes om binnen de vaste breedte i.p.v. de kolom op te rekken). */
.pl-matrix--dag thead th.pl-m__dag {
  width: 36px; min-width: 36px; max-width: 36px;
  text-align: center; padding: 4px 2px; line-height: 1.1;
}
.pl-m__dag-wd { display: block; font-size: .56rem; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.pl-m__dag-nr { display: block; font-size: .72rem; font-weight: 700; }
.pl-matrix--dag thead th.pl-m__dag.is-weekend { background: var(--bg-50); }
.pl-matrix--dag thead th.pl-m__dag.is-nu { background: var(--blue-100); }
.pl-matrix--dag thead th.pl-m__dag.is-nu .pl-m__dag-wd,
.pl-matrix--dag thead th.pl-m__dag.is-nu .pl-m__dag-nr { color: var(--blue-700); }
.pl-cel--dag { width: 36px; min-width: 36px; max-width: 36px; padding: 3px 2px; line-height: 0; }
.pl-cel--dag.is-weekend { background: var(--bg-50); }
/* Bolletjes-rij: centreert de stippen in de dagcel op hun eigen hart. Het hoek-
   driehoekje (.pl-issuevlag--hoek, absoluut) telt niet mee, dus de stip blijft
   gecentreerd en het driehoekje ligt er rechtsboven overheen. */
.pl-stippen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
/* Een actie als gekleurd stipje (kleur = staat); breekt netjes om bij meerdere. */
.pl-stip {
  position: relative;   /* anker voor het hoek-overlay-driehoekje (.pl-issuevlag--hoek) */
  display: inline-block; width: 12px; height: 12px; margin: 1px; vertical-align: middle;
  border: 0; padding: 0; border-radius: 999px; cursor: pointer;
  background: var(--pl-kleur, var(--muted));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pl-kleur, var(--muted)) 55%, transparent);
}
.pl-stip:hover { filter: brightness(.94); }
.pl-stip:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.pl-stip.is-vervallen { opacity: .5; }
/* In de maand-matrix is er ruimte zat per dagcel: een groter, beter zichtbaar
   en makkelijker aanklikbaar stipje (het kleinere basis-stipje blijft voor de
   compacte agenda-dagflyout). */
/* flex: 0 0 auto - in de centrerende flex-rij (.pl-stippen) mag het bolletje niet
   krimpen of rekken, anders wordt de cirkel een ovaal/capsule. */
.pl-cel--dag .pl-stip { width: 20px; height: 20px; margin: 2px; flex: 0 0 auto; }

.pl-vtg {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--blue-100);
  color: var(--blue-700);
  font-size: .68rem;
  font-weight: 600;
}
.pl-leeg-veld { color: var(--muted); font-style: italic; font-size: .7rem; }

/* ---- Agenda (maandkalender) ----------------------------------------------
   Hergebruikt de globale .agenda-grid*-stijl van de Agenda-pagina (agenda.css is
   overal geladen): weeknummerkolom, weekend-tint, vandaag-cirkel, gelijke
   celhoogtes en de "+N meer"-dagflyout. Alleen de planning-specifieke
   staatkleuring van de chips is hier nodig (--pl-kleur, zoals de overige chips). */
.pl-agenda { margin: 14px; }
.pl-agendachip {
  background: color-mix(in srgb, var(--pl-kleur, var(--muted)) 16%, var(--paper));
  color: color-mix(in srgb, var(--pl-kleur, var(--muted)) 78%, var(--ink-900));
}
.pl-agendachip:hover {
  background: color-mix(in srgb, var(--pl-kleur, var(--muted)) 26%, var(--paper));
  color: color-mix(in srgb, var(--pl-kleur, var(--muted)) 88%, var(--ink-900));
}
.pl-agendachip.is-vervallen { text-decoration: line-through; opacity: .6; }
/* Stip + naam in de "+N meer"-dagflyout (hergebruikt .agenda-flyout*). */
.agenda-flyout__item .pl-stip { flex: 0 0 12px; }
.agenda-flyout__ond.is-vervallen { text-decoration: line-through; opacity: .6; }

/* ---- Lijst (komende acties) ---------------------------------------------- */
.pl-lijst { padding: 8px 14px 18px; }
.pl-lijst__dag {
  margin: 14px 0 6px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .82rem;
  color: var(--blue-700);
  text-transform: capitalize;
}
.pl-lijst__dag:first-child { margin-top: 4px; }

.pl-lr {
  display: grid;
  grid-template-columns: 14px minmax(160px, 1.4fr) 110px minmax(90px, 1fr) minmax(110px, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  margin-bottom: 5px;
  font: inherit;
  font-size: var(--fs-data);
  text-align: left;
  color: var(--ink-900);
  cursor: pointer;
}
.pl-lr:hover { background: var(--bg-50); }
.pl-lr__stip { width: 11px; height: 11px; border-radius: 50%; background: var(--pl-kleur, var(--muted)); }
.pl-lr__loc { min-width: 0; }
.pl-lr__naam { display: block; font-weight: 600; }
.pl-lr__naam.is-vervallen { text-decoration: line-through; color: var(--muted); }
.pl-lr__sub { display: block; color: var(--muted); font-size: .68rem; }
.pl-lr__vtg, .pl-lr__leider { min-width: 0; }
.pl-lr__leider { color: var(--ink-900); }

/* Bezettingsbalk (gedeeld door lijst + detail) */
.pl-bez { display: inline-flex; align-items: center; gap: 7px; }
.pl-bez--leeg { color: var(--muted); font-size: .7rem; }
.pl-bez__balk {
  flex: 0 0 60px;
  width: 60px;
  height: 7px;
  border-radius: 999px;
  background: var(--blue-100);
  overflow: hidden;
}
.pl-bez__balk i { display: block; height: 100%; background: var(--ok); }
.pl-bez.is-laag .pl-bez__balk i { background: var(--warn); }
.pl-bez__txt { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-900); }

/* ---- Detailvenster per keer ---------------------------------------------- */
.pl-modal__scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--modal-scrim);
}
/* Maat + frame komen uit de gedeelde utility .modal-venster (modal.css); hier
   alleen de breedte-override (huidige maat) + de eigen padding. Vaste hoogte
   (tier groot) i.p.v. max-height = stilstaand venster bij tabwissel. */
.pl-modal {
  --modal-w-groot: min(760px, 100%);
  padding: 18px 20px 20px;
}
/* De gedeelde lefttab-opzet binnen de modal: strook links, scrollend paneel rechts. */
.pl-modal .inst-lijstindeling { flex: 1 1 auto; min-height: 0; }
.pl-modal .inst-lijstpanelen { min-height: 0; overflow-y: auto; }
.pl-modal .inst-lefttab-paneel { padding-right: 4px; }
.pl-d__kop { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pl-d__titel { margin: 0; font-size: 1.1rem; }
.pl-d__sub { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-data); }
/* Sluitknop = de globale .btn-ico btn-ico--blauw (zie markup); hier alleen de
   plaatsing in de flex-kop, het uiterlijk komt uit de global. */
.pl-d__sluit { flex: 0 0 32px; }
/* Kopknoppen (potlood-bewerken + Sluiten) rechts in de kop; alleen plaatsing,
   het uiterlijk komt uit de globale .btn-ico-varianten. */
.pl-d__kopknoppen { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
/* Actiebalk van het keer-bewerkformulier (globale .form__acties): de prullenbak
   blijft links, Annuleren/Opslaan schuiven naar rechts. Alleen plaatsing. */
.pl-keerform__rechts { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.pl-d__velden { margin: 0; }
.pl-d__rij {
  display: grid;
  grid-template-columns: 110px 1fr;
  /* Label en waarde op EEN tekst-baseline (gelijk aan .lg-detail__rij/.lg-form__rij),
     zodat badge/bezettingsbalk/select op de labellijn komen i.p.v. te zakken. */
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-data);
}
.pl-d__rij:first-child { border-top: 0; }
.pl-d__rij dt { color: var(--muted); font-weight: 600; }
.pl-d__rij dd { margin: 0; color: var(--ink-900); }
.pl-d__merk { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: .7rem; }
.pl-d__merk svg { width: 12px; height: 12px; }
/* Standplaats-keuze per keer (wisselende locatie): de select + navigeerlink. */
.pl-d__pin { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-d__pin-keuze { max-width: 260px; padding: 4px 8px; font-size: var(--fs-data); }
/* "Op de kaart"-knop: oogt als een link (opent de interne standplaats-popup). */
.pl-d__kaartknop {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; color: var(--blue-700); cursor: pointer; white-space: nowrap;
}
.pl-d__kaartknop:hover { text-decoration: underline; }
.pl-d__kaartknop svg { width: 13px; height: 13px; vertical-align: -2px; }
.pl-d__acties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ---- Tabpanelen in het keer-detail (Vrijwilligers / Voertuig / Vergunning) -- */
.pl-d__laden { margin: 10px 2px; color: var(--muted); font-size: var(--fs-data); }
.pl-tab__kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.pl-tab__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pl-tab__rij {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 2px; border-top: 1px solid var(--line); font-size: var(--fs-data);
}
.pl-tab__rij:first-child { border-top: 0; }
.pl-tab__naam { color: var(--ink-900); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-tab__sub { color: var(--muted); font-size: .82em; }
.pl-tab__chauf { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-900); white-space: nowrap; }
.pl-tab__chauf svg { width: 14px; height: 14px; color: var(--muted); }
.pl-tab__kaart { padding: 6px 0; border-top: 1px solid var(--line); }
.pl-tab__kaart:first-of-type { border-top: 0; }
.pl-tab__leeg { display: flex; align-items: flex-start; gap: 8px; margin: 6px 2px; color: var(--muted); font-size: var(--fs-data); }
.pl-tab__leeg svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; }
.pl-tab__fout { margin: 8px 2px; color: var(--err); font-size: var(--fs-data); }

/* ---- Staten (skelet / leeg / fout) --------------------------------------- */
.pl-skelet { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.pl-skelet__rij {
  height: 30px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--blue-100) 25%, var(--bg-50) 37%, var(--blue-100) 63%);
  background-size: 400% 100%;
  animation: pl-puls 1.3s ease-in-out infinite;
}
@keyframes pl-puls { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.pl-staat {
  max-width: 460px;
  margin: 8vh auto 0;
  text-align: center;
  padding: 24px;
  color: var(--muted);
}
.pl-staat--klein { margin-top: 5vh; }
.pl-staat svg { width: 34px; height: 34px; color: var(--blue-700); opacity: .7; }
.pl-staat h2 { margin: 12px 0 6px; font-size: 1.05rem; }
.pl-staat p { margin: 0 0 14px; font-size: var(--fs-data); }
.pl-staat--fout svg { color: var(--err); opacity: 1; }

/* ---- Aandachtspunten: waarschuwingsdriehoekje + hover-tooltip + popup ------
   EEN indicator op elke actie (chip/stip/agenda/lijst) zodra er aandachtspunten
   zijn. Kleur uit de huisstijl-tokens: rood (--err) bij een hard punt, amber
   (--warn) bij alleen zachte. Vlakke callout in het detail (geen accentbalk). */
.pl-issuevlag {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 13px; height: 13px; cursor: pointer; color: var(--err);
}
.pl-issuevlag svg { width: 12px; height: 12px; }
.pl-issuevlag--zacht { color: var(--warn); }
.pl-issuevlag--hard { color: var(--err); }
.pl-issuevlag:hover { filter: brightness(.88); }
/* Hoek-overlay (maand-stip): klein driehoekje rechtsboven op een wit schijfje,
   zodat het loskomt van de gekleurde stip (.pl-stip is hiervoor het anker). */
.pl-issuevlag--hoek {
  position: absolute; top: -7px; right: -7px; width: 15px; height: 15px;
  background: var(--paper); border-radius: 50%; box-shadow: 0 0 0 1px var(--paper);
}
.pl-issuevlag--hoek svg { width: 12px; height: 12px; }
/* De staat-cel in de lijst: driehoekje vóór de staat-badge. */
.pl-lr__staat { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }

/* Hover-tooltip met alle aandachtspunten (zwevend, klikt niet mee). */
.pl-issuetip {
  position: fixed; z-index: 95; max-width: 280px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); box-shadow: var(--shadow); pointer-events: none;
}
/* Issuelijst (gedeeld door tooltip, popup en keer-detail). */
.pl-issue__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pl-issue__rij { display: flex; align-items: flex-start; gap: 7px; font-size: var(--fs-data); color: var(--ink-900); }
.pl-issue__rij svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 1px; }
.pl-issue__rij--hard svg { color: var(--err); }
.pl-issue__rij--zacht svg { color: var(--warn); }

/* Compacte issues-popup (tier klein). */
.pl-issuepop { --modal-w-klein: min(440px, 100%); }
.pl-issuepop__voet { margin-top: 16px; }
.pl-issuepop .pl-d__titel { display: inline-flex; align-items: center; gap: 7px; }
.pl-issuepop__icoon { width: 18px; height: 18px; }
.pl-issuepop__icoon--hard { color: var(--err); }
.pl-issuepop__icoon--zacht { color: var(--warn); }

/* Aandacht-callout bovenaan het keer-detail (vlak, volledige 1px-rand). */
.pl-d__aandacht {
  margin-bottom: 14px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-50);
}
.pl-d__aandacht--hard { border-color: color-mix(in srgb, var(--err) 40%, var(--line)); background: color-mix(in srgb, var(--err) 7%, var(--paper)); }
.pl-d__aandacht--zacht { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 10%, var(--paper)); }
.pl-d__aandacht-kop { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-weight: 700; font-size: .8rem; color: var(--ink-900); }
.pl-d__aandacht-kop svg { width: 15px; height: 15px; }
.pl-d__aandacht--hard .pl-d__aandacht-kop svg { color: var(--err); }
.pl-d__aandacht--zacht .pl-d__aandacht-kop svg { color: var(--warn); }

/* ---- Responsief ---------------------------------------------------------- */
@media (max-width: 760px) {
  .pl-lr { grid-template-columns: 14px 1fr auto; }
  .pl-lr__bez, .pl-lr__vtg, .pl-lr__leider { display: none; }
}

/* ---- Werving-modal (B-100): straatvrijwilligers kiezen + uitnodigen -------
   Alleen lay-out; kleuren/maten via tokens, knoppen via .btn, badges via
   .lg-badge. De werven-actie staat rechts in de Vrijwilligers-tab-kop. */
.pl-tab__kop-acties { margin-left: auto; }
.pl-werf { padding: 16px 18px; }
.pl-werf__intro { margin: 0 0 12px; color: var(--muted); font-size: var(--fs-data); }
.pl-werf__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.pl-werf__alles { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-data); color: var(--ink-900); cursor: pointer; }
.pl-werf__teller { font-size: var(--fs-data); color: var(--muted); }
.pl-werf__lijst { display: flex; flex-direction: column; margin-top: 4px; }
.pl-werf__rij { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pl-werf__rij.is-uit { opacity: .6; cursor: default; }
.pl-werf__rij input { flex: 0 0 auto; }
.pl-werf__wie { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.pl-werf__meta { color: var(--muted); font-size: .78rem; }
.pl-werf__voorbeeld { margin-top: 14px; }
.pl-werf__voorbeeld summary { cursor: pointer; font-size: var(--fs-data); color: var(--blue-700); font-weight: 600; }
.pl-werf__voorbeeld-body { margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-50); color: var(--ink-900); font-size: var(--fs-data); }
.pl-werf__voorbeeld-body p { margin: 0 0 8px; }
.pl-werf__cta { color: var(--muted); font-style: italic; }
/* Annuleren/Uitnodigingen-versturen plakken onderaan: .pl-werf is de .modal-body
   (overflow-y auto) en de kandidatenlijst kan lang zijn, dus de knoppen mogen niet
   uit beeld scrollen. Negatieve marges trekken de balk tot de modalranden, de eigen
   achtergrond dekt de inhoud af en de onderpadding gaat weg zodat de balk flush zit. */
.pl-werf:has(.pl-werf__voet) { padding-bottom: 0; }
.pl-werf__voet {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 16px -18px 0;
  padding: 12px 18px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}