/* ── MERKLETTERS, ZELF GEHOST ─────────────────────────────────────────────────────────────
   core.css vroeg al om "Montserrat" en "Open Sans", maar ze werden nergens geladen en er was
   geen enkele @font-face: elke browser viel terug op de systeemletter. De bedoelde typografie
   rendeerde dus niet, en dat viel niet op omdat een fallback er nu eenmaal ook uitziet als een
   letter. (gevonden 21-09)

   Zelf hosten en niet via fonts.googleapis.com: een fontverzoek naar Google draagt het IP-adres
   van de bezoeker mee — bij ons een clublid, in de education-vertical een ouder of een kind —
   nog voordat die iets heeft kunnen kiezen. Sinds 21-09 staat er geen enkele externe host meer
   in onze CSP (gate 32), en dit hoort daarbij.

   Het zijn VARIABELE bestanden: één woff2 per familie dekt het hele gewichtsbereik, vandaar
   `font-weight: 100 900` in plaats van een blok per gewicht. Subset latin, alleen woff2 — elke
   browser sinds 2020 kan dat en de rest is dode last. Herkomst + licentie: vendor/fonts/README.txt.
   Ontbreken de bestanden, dan valt alles terug op de systeemstack en blijft het werken. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../vendor/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../vendor/fonts/opensans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================================
   custom.css  ?  UI-stijlen voor beheeromgeving
   -----------------------------------------------------------------------------
   ? Design tokens (CSS custom properties) met theming via --brand (PHP)
   ? Basis typografie/achtergrond
   ? Tabel weergaves (desktop + mobile card pattern)
   ? Gestandaardiseerde actieknoppen (edit/history/delete) + responsive sizing
   ? FAB (+) en Back-FAB (met semitransparante achtergrondlaag)
   ? ?Lead-only? modal mode
   ? Badges, loaders & toasts, iOS safe-areas
   -----------------------------------------------------------------------------
   Aannames:
   - PHP zet :root --brand via print_app_css_vars()
   - Bootstrap 5 aanwezig
   - Iconen via Bootstrap Icons
============================================================================= */

/* ============================================================================
   1) DESIGN TOKENS (te themen via --brand)
============================================================================= */
:root{
  /* Kleur uit PHP (print_app_css_vars) */
  --ui-brand: var(--brand);

  /* Palet */
  --accent:     #51cf66;
  /* --ink was een TWEEDE tekstkleur naast --ui-text; body gebruikte 'm, de rest --ui-text. In
     sport-modus bleef daardoor élke pagina-kop zwart-op-zwart (owner 2026-08-17). Nu een alias:
     één bron voor tekstkleur, dus één plek om te kantelen. Licht verschuift van #0b0b0c naar
     #0f172a — beide vrijwel zwart, met het oog niet te zien. */
  --ink:        var(--ui-text);
  --bg:         #f6f9fb;
  --ui-bg:      #f6f7f9;
  --ui-card:    #ffffff;
  --ui-border:  #e8ecf0;
  --ui-text:    #0f172a;
  --ui-muted:   #64748b;
  --ui-muted-strong: rgb(71 85 105); /* slate-600 — bijtekst op wit: 7.6:1 (WCAG AAA), leesbaar op 50+ ogen */

  /* Comfort-baseline (ui-ux-design-system §8, "60+ vrijwilligers").
     ÉÉN bron voor leesbaarheid en raakvlak: de chrome (rail · header · streams-landing)
     consumeert deze tokens i.p.v. eigen px-waarden, en tools/ci/uxcheck-scan.sh bewaakt dat er geen
     kleinere waarden bijkomen.
     LET OP — html.l2s-comfort schaalt deze tokens NIET op. Hier stond dat het dat wél deed; de code
     zegt iets anders: comfort zet alleen `body{font-size:1.0625rem}` plus een handvol regels voor
     .l2s-menu*/.l2s-tasks*/.l2s-onboard* (zie onderaan dit bestand). Wie op comfort meet, meet dus
     dezelfde drempels. html.l2s-sport verlaagt ze juist bewust (15/14/14/18px, raakvlak 40/38). */
  --ui-fs-base:   16px;  /* interface-tekst — ondergrens, nooit lager */
  --ui-fs-sm:     15px;  /* bijtekst, sub-navigatie                   */
  --ui-fs-label:  15px;  /* eyebrow/kop-labels — ondergrens, gelijk aan de gate-drempel */
  --ui-fs-input:  16px;  /* INVOER: iOS zoomt in op een veld < 16px en die zoom maakt de hele
                            pagina horizontaal panbaar (owner-screenshot 23-09). Nooit kleiner. */
  --ui-fs-title:  19px;  /* kaart- en paneeltitels                    */
  --ui-target:    48px;  /* raakvlak knoppen/rijen (§8: ≥48px)        */
  --ui-target-sm: 44px;  /* compacte varianten (WCAG 2.2 AA-minimum)  */

  --ui-warm:    #f4b740; /* edit-knop (amber) */
  --ui-danger:  #dc3545; /* Bootstrap danger */

  /* GOED en LET-OP — semantische kleuren, owner-akkoord 28-09-2026.
     Er was wél een --ui-danger maar geen tegenhanger voor «dit is gelukt» en «hier mist nog iets».
     Gevolg: modules schreven hun eigen groen en amber uit — planning.css alleen al dertig keer, en
     finance en members doen hetzelfde. Eén kleurwijziging kostte dan een zoektocht langs vijf
     bestanden, en in donkere modus veranderde er niets mee.
     De waarden zijn EXACT wat planning.css al gebruikte, zodat er in licht niets verschuift. */
  --ui-ok-bg:    #f0fdf4;
  --ui-ok-line:  #bbf7d0;
  --ui-ok-ink:   #15803d;
  --ui-ok-ink-strong: #14532d;
  --ui-ok-bg-strong:  #dcfce7;

  --ui-warn-bg:   #fffbeb;
  --ui-warn-line: rgba(217,119,6,.35);
  --ui-warn-ink:  #92400e;
  --ui-warn-bg-strong: #fef3c7;
  --ocean:      #0c6f8f; /* filter-button oceaanblauw */
  --radius:     18px;
  --register-form-brand: var(--brand, #0d6efd);
  --register-form-card-bg: var(--bs-body-bg, #fff);
  --register-form-card-shadow: 0 10px 25px rgba(16,24,40,.08), 0 4px 8px rgba(16,24,40,.05);
  --register-form-card-radius: 20px;

  /* Schaduwen */
  --ui-shadow:        0 8px 22px rgba(15,23,42,.06);
  --ui-shadow-h:      0 12px 28px rgba(15,23,42,.09);

  /* 3D card effect */
  --ui-shadow-outer:   0 10px 24px rgba(15,23,42,.10);
  --ui-shadow-outer-h: 0 14px 30px rgba(15,23,42,.14);
  --ui-shadow-outer-a: 0 6px 18px rgba(15,23,42,.10);
  --ui-inset-top:      inset 0 1px 0 rgba(255,255,255,.90);
  --ui-inset-bottom:   inset 0 -12px 20px rgba(15,23,42,.06);
  --ui-inset-bottom-h: inset 0 -14px 22px rgba(15,23,42,.07);
  --ui-inset-bottom-a: inset 0 -10px 16px rgba(15,23,42,.07);
  --ui-inset-edge:     inset 0 0 0 1px rgba(255,255,255,.65);
  --ui-inset-edge-h:   inset 0 0 0 1px rgba(255,255,255,.70);
  --ui-inset-edge-a:   inset 0 0 0 1px rgba(255,255,255,.60);

  /* FAB Back ? RGB basis (zodat we alpha kunnen gebruiken) */
  --fab-back-rgb: 220, 53, 69; /* zelfde rood als --ui-danger */

  /* Vlak-lagen (licht). Bestonden impliciet als hardcoded #fff/#f8fafc door de hele file heen;
     hier benoemd zodat sport-modus ze in één keer kan omzetten. */
  --ui-raise:   #ffffff;   /* verhoogd vlak binnen een kaart (balk, kop, sub-paneel) */
  --ui-sunken:  #f8fafc;   /* verzonken vlak (rij-hover, code, inzet)                */
  /* Tekst ÓP een gekleurd vlak. LET OP — deze twee zijn de DEFAULTS voor pagina's zonder merk-CSS.
     Zodra clubs/<key>/branding/css/app-vars.css.php meeladt, worden ze per tenant BEREKEND uit de
     luminantie van --brand / --sub (core/frontend/brand-css-vars.inc.php, l2s_contrast_ink). Tot
     20-09-2026 stond hier "blijft altijd wit" — dat was precies de bug: een club met een licht merk
     kreeg witte tekst op een licht vlak. Gebruik --ui-on-brand ALLEEN op een --ui-brand-vlak en
     --ui-on-sub op een --sub-vlak; op een ander vlak kloppen ze per definitie niet. */
  --ui-on-brand:#ffffff;
  --ui-on-sub:  var(--ui-on-brand);
  /* De TWEEDE CLUBKLEUR ALS TEKST, op een licht vlak. Niet hetzelfde als --ui-on-sub: dat is de inkt
     die je ÓP een --sub-vlak legt; dit is --sub zelf, zover bijgetrokken dat je 'm kunt lezen.
     Waarom een apart token: --sub werd op 18 plekken rechtstreeks als tekstkleur gebruikt, en bij
     een club met een LICHTE tweede kleur stond de paginatitel en élke naam in élke lijst op
     1,25-1,34:1. Onleesbaar, en per tenant verschillend, dus onzichtbaar bij het
     bouwen (browsercheck 21-09). De echte waarde komt per club uit l2s_readable_ink(); dit is de
     val-terug voor een pagina zonder merk-CSS. */
  --sub-ink:    var(--ui-text);
  /* Tekst op een VAST donker vlak dat niets met het merk te maken heeft (--ocean, een statusbadge,
     de notificatie-stip, de go-pijl). Die mogen NIET meekantelen met een licht clubmerk, dus staat
     hier een constante. Zonder dit token zou elk van die plekken --ui-on-brand lenen en bij een
     geel/licht merk omslaan naar donkere tekst op een donker vlak. */
  --ui-on-dark: #ffffff;

  /* ACTIE-RAIL (standards/manage-actions-ccp.md §3.4). --ui-ar-w is TWEE dingen tegelijk: de breedte
     van de rail én de rechter-goot die .container-xxl op ≤900px vrijhoudt. Eén getal, dus er kan per
     definitie geen inhoud onder de rail verdwijnen. --ui-sheet-ease is de "blad"-curve: snel weg van
     de vinger, zacht aan het eind. */
  --ui-ar-w:    56px;
  --ui-ar-x:    8px;
  --ui-ar-gap:  8px;
  --ui-sheet-ease: cubic-bezier(.32, .72, 0, 1);
  --ui-glow:    none;      /* merk-gloed; alleen in sport-modus zichtbaar             */
  --ui-ring:    inset 0 0 0 1px rgba(255,255,255,.65);

  /* STATUS-KLEUREN — ÉÉN set voor het hele platform (2026-08-17).
     Stonden verspreid over members, customers en communication, elk met eigen tinten voor hetzelfde
     begrip (#15803d én #0f7a43 voor "goed", drie verschillende ambers voor "let op"). Daardoor kon
     donkere modus ze niet kantelen en zag "Actief" er per scherm anders uit.
     Per status drie rollen: `-bg` vlak · `-line` rand · `-ink` tekst. In donker wordt het vlak een
     doorschijnende tint van dezelfde kleur en de tekst juist lichter — een groene pil op een
     donkere kaart moet leesbaar blijven, niet alleen groen zijn. */
  --st-ok-bg:   #dcfce7;  --st-ok-line:   #bbf7d0;  --st-ok-ink:   #15803d;
  --st-warn-bg: #fef3c7;  --st-warn-line: #f3d9a4;  --st-warn-ink: #b45309;
  --st-err-bg:  #fee2e2;  --st-err-line:  #f6c6cb;  --st-err-ink:  #b91c1c;
  /* Ontdek-hulp (demo-missies): het eigen status-palet van de hulpbel — «wacht» amber, «af» groen.
     Stond hardcoded in core/frontend/src/styles/ontdek-hulp.css; kleuren horen HIER te wonen en
     schermen aliassen (gate 23, één kleurbron). De lichte waarden zijn ONGEWIJZIGD overgenomen,
     dus het scherm ziet er precies hetzelfde uit; de donkere set hieronder is nieuw en repareert
     meteen dat de hulpbel niet meekantelde in donkere modus. */
  --od-wacht-bg: #fbf1dd;  --od-wacht-line: #b0770f;  --od-wacht-ink: #5c4310;  --od-wacht-ink2: #7a5310;
  --od-af-bg:    #e4f5ed;  --od-af-ink:     #136c4b;  --od-af-vink:   #5fd3a0;
  --st-info-bg: #dbeafe;  --st-info-line: #bfdbfe;  --st-info-ink: #1d4ed8;
  --st-neut-bg: #f1f5f9;  --st-neut-line: #e2e8f0;  --st-neut-ink: #475569;
}

/* ============================================================================
   1b) SPORT-MODUS — donker + compacter (owner 2026-08-17)
   ---------------------------------------------------------------------------
   ANDERE DOELGROEP, bewust andere maatvoering: de comfort-baseline hierboven is voor 60+
   vrijwilligers, sport-modus is voor tech-savvy gebruikers van ~25-40 (owner). Daarom mag het hier
   dichter — maar nooit onder WCAG 2.2 AA (raakvlak ≥24px); we houden ruim 40px aan, en tekst blijft
   op 14px+. Standaard UIT en een keuze van de gebruiker zelf (localStorage), nooit per tenant.

   Alles loopt via DEZE tokens. Staat er ergens nog een kale kleur, dan blijft dat vlak licht — dat
   is de resterende migratie, niet een tweede donkere stylesheet. Zie modules/website/README.md noch
   een dark-variant per component: één bron, twee waardensets.
============================================================================= */
html.l2s-sport{
  color-scheme: dark;      /* scrollbars, formuliervelden en autofill volgen mee */

  /* Diep blauw-grijs i.p.v. zwart: puur zwart oogt goedkoop, een koele tint oogt duur. */
  --ui-bg:      #0a0e14;
  --ui-card:    #121a24;
  --ui-raise:   #17212d;
  --ui-sunken:  #0e151d;
  --ui-border:  #223044;
  --ui-text:    #e9eef5;
  --ui-muted:   #93a3b6;
  --ui-muted-strong: #b7c4d2;
  --ui-on-brand:#ffffff;
  --ui-on-sub:  var(--ui-on-brand);
  --sub-ink:    var(--ui-text);   /* zie de uitleg in het comfort-blok hierboven */

  /* Dichter, niet kleiner-om-het-kleiner: −1px op tekst, −8px op raakvlak. */
  --ui-fs-base:   15px;
  --ui-fs-sm:     14px;
  --ui-fs-label:  14px;
  --ui-fs-input:  16px;  /* invoer krimpt niet mee: onder 16px zoomt iOS bij focus */
  --ui-fs-title:  18px;
  --ui-target:    40px;
  --ui-target-sm: 38px;
  --ui-ar-w:      48px;   /* icoon-only: het label is visueel geklemd, dus de rail mag smaller */

  /* De "dure" laag: fijne ring, diepe schaduw, zachte halo in de kleur van de tenant. */
  --ui-glow: 0 0 0 1px color-mix(in srgb, var(--ui-brand) 22%, transparent),
             0 10px 30px rgba(0,0,0,.55),
             0 0 26px color-mix(in srgb, var(--ui-brand) 15%, transparent);
  --ui-ring:           inset 0 0 0 1px rgba(255,255,255,.06);
  --ui-shadow:         0 8px 24px rgba(0,0,0,.45);
  --ui-shadow-h:       0 14px 34px rgba(0,0,0,.55);
  --ui-shadow-outer:   0 10px 26px rgba(0,0,0,.45);
  --ui-shadow-outer-h: 0 16px 36px rgba(0,0,0,.55);
  --ui-shadow-outer-a: 0 6px 18px rgba(0,0,0,.45);
  --ui-inset-top:      inset 0 1px 0 rgba(255,255,255,.05);
  --ui-inset-bottom:   inset 0 -12px 20px rgba(0,0,0,.25);
  --ui-inset-bottom-h: inset 0 -14px 22px rgba(0,0,0,.30);
  --ui-inset-bottom-a: inset 0 -10px 16px rgba(0,0,0,.28);
  --ui-inset-edge:     inset 0 0 0 1px rgba(255,255,255,.06);
  --ui-inset-edge-h:   inset 0 0 0 1px rgba(255,255,255,.09);
  --ui-inset-edge-a:   inset 0 0 0 1px rgba(255,255,255,.05);

  /* Status in donker: vlak = doorschijnende tint van de eigen kleur (blijft "groen" voelen zonder
     te schreeuwen), tekst juist lichter zodat een pil op een donkere kaart leesbaar blijft.
     LET OP — deze declaraties stonden eerst BUITEN dit blok (na de sluit-accolade), waardoor ze
     nooit toegepast werden en élk statusvlak licht bleef. Gevonden door
     tests/smoke/theming-contrast.smoke.js; geen enkele gate ziet zoiets, want CSS-syntax wordt
     nergens geparseerd. */
  --st-ok-bg:   rgba(34,197,94,.14);   --st-ok-line:   rgba(34,197,94,.34);   --st-ok-ink:   #6ee7a8;
  --st-warn-bg: rgba(245,158,11,.14);  --st-warn-line: rgba(245,158,11,.34);  --st-warn-ink: #fbbf24;
  --st-err-bg:  rgba(239,68,68,.14);   --st-err-line:  rgba(239,68,68,.36);   --st-err-ink:  #fca5a5;
  --od-wacht-bg: rgba(245,158,11,.14); --od-wacht-line: rgba(245,158,11,.40); --od-wacht-ink: #fcd34d; --od-wacht-ink2: #fbbf24;
  --od-af-bg:    rgba(34,197,94,.14);  --od-af-ink:     #6ee7a8;              --od-af-vink:   #5fd3a0;
  --st-info-bg: rgba(59,130,246,.14);  --st-info-line: rgba(59,130,246,.34);  --st-info-ink: #93c5fd;
  --st-neut-bg: rgba(255,255,255,.05); --st-neut-line: rgba(255,255,255,.12); --st-neut-ink: #b7c4d2;

  /* Het Bootstrap-rood haalt op een donkere kaart maar 3,87 — te weinig voor tekst.
     Lichtere tint in donker; het merk-rood zelf blijft ongemoeid. */
  --ui-danger: #fca5a5;

  /* Dezelfde twee begrippen in donker. De lichte tinten (#f0fdf4 op #15803d) halen op een donkere
     kaart bij lange na geen leesbaar contrast; vandaar alpha-vlakken met een lichte inkt, net als
     --st-info-* hierboven. */
  --ui-ok-bg:    rgba(34,197,94,.14);
  --ui-ok-line:  rgba(34,197,94,.34);
  --ui-ok-ink:   #6ee7a8;
  --ui-ok-ink-strong: #a7f3d0;
  --ui-ok-bg-strong:  rgba(34,197,94,.22);

  --ui-warn-bg:   rgba(245,158,11,.14);
  --ui-warn-line: rgba(245,158,11,.34);
  --ui-warn-ink:  #fcd34d;
  --ui-warn-bg-strong: rgba(245,158,11,.22);
}
html.l2s-sport body{ background: var(--ui-bg); color: var(--ui-text); }
/* Lijnen en vlak-verlopen zijn alpha-gebaseerd en dus NIET te aliassen: donkerblauw op 10% is op
   een donkere kaart onzichtbaar. Alleen deze twee krijgen daarom een eigen donkere waarde. */
html.l2s-sport .l2s-menu{
  --l2s-menu-line: rgba(255,255,255,.10);
  --l2s-menu-line-strong: rgba(255,255,255,.18);
  --l2s-menu-media: linear-gradient(135deg, var(--ui-raise), var(--ui-sunken));
}

/* ============================================================================
   2) BASIS
============================================================================= */
body{
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--ui-bg);
}

h1{
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}

/* LEESBAARHEIDSVLOER op Bootstrap's `small`/.small (= 0.875em, dus 14px onder bodytekst). Dat is
   ÉÉN oorzaak achter een hele reeks losse metingen (pagina-ondertitels, hulpteksten, meta-regels);
   daarom hier één keer, bij de bron, i.p.v. per scherm een eigen font-size. `max()` houdt het
   relatieve gedrag waar de ouder groter is (een <small> in een kop blijft kleiner dan die kop) en
   legt alleen een bodem onder de gewone bijtekst. Norm: designsysteem §8 (>= 15px).
   Wie bewust kleiner moet (gedrukt document), overschrijft met hogere specificiteit — zie
   `.contract-doc .small`. */
small,
.small{
  font-size: max(0.875em, var(--ui-fs-sm, 15px));
}

/* Primair merk-knopje */
.btn-brand{
  background: var(--ui-brand);
  border: 1px solid var(--ui-brand);
  color: var(--ui-on-brand);
}
.btn-brand:hover{
  filter: brightness(.92);
  color: var(--ui-on-brand);
}

/* Kaart-omhulling rond tabellen */
.table-wrap{
  background: var(--ui-card);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 1rem;
}

/* Sticky table header met merk-kleur */
th.sticky{
  position: sticky;
  top: 0;
  background: var(--ui-brand);
  color: var(--ui-text) !important;
  z-index: 1;
}

/* Loader & toasts */
.loader{ display: none; }
.loader.show{ display: inline-block; }
.toast-container{ z-index: 2000; }

/* Bootstrap zebra/accents uit voor cleane ?cards? */
.table,
.table.table-striped{
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: transparent !important;
  --bs-table-accent-bg: transparent !important;
}
.table.table-striped > tbody > tr:nth-of-type(odd) > *{
  --bs-table-accent-bg: transparent !important;
}
.table > :not(caption) > * > *{
  background-color: transparent !important;
}



/* ============================================================================
   3) TABLES ? DESKTOP + MOBILE ?CARD? PATTERN (generiek)
   ========================================================================== */

/* De mobiele kaart-weergave van een tabel woont sinds 21-09-2026 in ÉÉN blok: `.l2s-tbl-cards`,
   onderaan dit bestand. De oude `.table-cards--mobile` (gecentreerde tekst, eigen 767,98px-grens,
   losse regels voor status-badge en actiekolom) is vervallen; de meta-crud-shell zet nu dezelfde
   klasse als members en workforce. Zie manage-actions-ccp §3.5. */

/* ============================================================================
   4) ACTIEKNOPPEN ? gestandaardiseerd (herbruikbaar)
============================================================================= */

/* Container */
.actions{
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* Basisknop (effect/schaduw) */
.btn-action{
  border-radius: .6rem;
  font-weight: 600;
  transition:
    background-color .16s ease,
    color .16s ease,
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
  box-shadow: 0 2px 6px rgba(15,23,42,.06);
}
.btn-action:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(15,23,42,.10);
}
.btn-action:active{ transform: translateY(0); }

/* Variants ---------------------------------------------------- */

/* EDIT (geel) */
.btn-action--edit,
.btn-edit{ /* compat alias voor bestaande HTML */
  background: var(--ui-warm);
  color: var(--ui-text);
  border: none;
}
.btn-action--edit:hover,
.btn-edit:hover{ filter: brightness(1.05); }

/* DELETE (rode outline) */
.btn-action--delete,
.btn-verwijderen{ /* compat alias */
  border: 2px solid var(--bs-danger);
  background: transparent;
  color: var(--bs-danger);
}
.btn-action--delete:hover,
.btn-verwijderen:hover{ background-color: rgba(220,53,69,.10); }

/* HISTORY (donkergrijs outline) */
.btn-action--history,
.btn-hist{ /* compat alias */
  border: 2px solid #444;
  background: transparent;
  color: #444;
}
.btn-action--history:hover,
.btn-hist:hover{
  background-color: rgba(68,68,68,.08);
  color: #222;
}

/* Icoonmaat */
.actions .btn-action i{ font-size: 1.05em; line-height: 1; }

/* Volgorde (optioneel): history ? edit ? delete */
td.actions .btn-action--history, td.actions .btn-hist{ order: 1; }
td.actions .btn-action--edit,    td.actions .btn-edit{ order: 2; }
td.actions .btn-action--delete,  td.actions .btn-verwijderen{ order: 3; }

/* Responsive sizing ------------------------------------------- */
@media (max-width: 767.98px){
  .table-cards td.actions .btn-action{
    padding: .62rem 1rem;
    font-size: 1.05rem;
    min-width: 52px;
  }
  /* Edit extra nadruk op mobiel */
  .table-cards td.actions .btn-action--edit,
  .table-cards td.actions .btn-edit{
    padding: .70rem 1.1rem;
    font-size: 1.15rem;
    min-width: 56px;
    min-height: 56px;
  }
}
@media (min-width: 768px){
  .actions .btn-action{
    padding: .50rem .78rem;
    font-size: .98rem;
    min-width: 46px;
  }
}

/* ?Lead? vervolg-knop (inline bij status) */
.btn-follow-lead{
  border: 2px solid var(--ui-warm);
  background: transparent;
  color: var(--ui-warm);
  font-weight: 600;
  border-radius: .6rem;
  transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn-follow-lead:hover{
  background: var(--ui-warm);
  color: var(--ui-text);
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(15,23,42,.10);
}
.btn-follow-lead:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(15,23,42,.08);
}

/* Filterknop ?Verlengen? (outline oceaan) */
.btn-outline-verlengen{
  border: 1px solid var(--ocean);
  color: var(--ocean);
  background: transparent;
  font-weight: 600;
  border-radius: .2rem;
  transition: background-color .18s ease, color .18s ease, transform .16s ease, box-shadow .16s ease;
}
.btn-outline-verlengen:hover,
.btn-outline-verlengen:focus{
  background-color: rgba(12,111,143,.12);
  color: var(--ocean);
}
.btn-check:checked + .btn-outline-verlengen,
.btn-check:active  + .btn-outline-verlengen{
  background-color: var(--ocean);
  border-color: var(--ocean);
  color: var(--ui-on-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,.10);
}
.btn-check:checked + .btn-outline-verlengen:focus{
  box-shadow: 0 0 0 .2rem rgba(12,111,143,.25);
}

/* ============================================================================
   5) FAB (+) EN FAB BACK
============================================================================= */

/* Hoofd-FAB (+) */
.fab{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 0;
  background: var(--ui-brand);
  color: var(--ui-on-brand);
  display: grid;
  place-items: center;
  box-shadow: 0 14px 26px rgba(15,23,42,.18), inset 0 -2px 6px rgba(255,255,255,.15);
  cursor: pointer;
  z-index: 1060;
  transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.fab:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 30px rgba(15,23,42,.22), inset 0 -2px 6px rgba(255,255,255,.15);
}
.fab i{
  font-size: 1.7rem;
  transition: transform .25s ease;
  transform-origin: center;
}
.fab.open i{ transform: rotate(45deg); }

/* MOBIEL MET TABBAR (29-08, owner): op smal scherm draagt body.has-l2sb de vaste tabbar (64px +
   safe-area, app-sidebar.php) — de FAB en het menu stonden eronder/erdoorheen. Zelfde clearance
   als de rail ("rail stopt boven de tabbar"); menu houdt z'n 68px-afstand tot de FAB. */
@media (max-width: 900px){
  body.has-l2sb .fab{ bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 14px); }
  body.has-l2sb .fab-menu{ bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 14px + 68px); }
  body.has-l2sb .fab-live{ bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 14px); }
}

/* FAB menu */
.fab-menu{
  position: fixed;
  right: 22px;
  bottom: 90px;
  display: grid;
  gap: .5rem;
  transform-origin: bottom right;
  transform: translateY(8px) scale(.98);
  opacity: 0;
  pointer-events: none;
  z-index: 1059;
  transition: opacity .18s ease, transform .18s ease;
}
.fab-menu.open{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* FAB menu-item */
.fab-item{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .8rem;
  border-radius: 12px;
  border: 1px solid var(--ui-border, #e8ecf0);
  background: var(--ui-card, #fff);
  color: var(--ui-text, #0f172a);
  box-shadow: 0 8px 18px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.7);
  font-weight: 600;
  white-space: nowrap;
}
.fab-item i{ font-size: 1.05rem; }
.fab-item:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(15,23,42,.10);
}

/* =========================================================================
   .l2s-fab-menu — canoniek FAB-create-menu (popover-kaart)
   Canon: standards/ui-ux-design-system.md §4/§5 — menu-card-DNA in popover-vorm.
   #fabMenu draagt .fab-menu (fixed positie + open-animatie) en .l2s-fab-menu (look).
   Merk-kleur = alleen chip-icoon (accent); go-pijl = donker-slate (nav); geen regenboog.
   ========================================================================= */
.l2s-fab-menu{
  display: block;
  width: min(320px, calc(100vw - 44px));
  padding: 0;
  background: var(--ui-card, #fff);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  box-shadow: 0 .8rem 1.8rem rgba(15,23,42,.12);
  overflow: hidden;
}
.l2s-fab-menu__head{
  font-size: var(--ui-fs-label, 15px);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ui-muted, #64748b);
  padding: 12px 15px 8px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.l2s-fab-menu__body{
  display: grid;
  gap: 2px;
  padding: 6px;
}
.l2s-fab-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 11px;
  color: var(--ui-text, #0f172a);
  text-decoration: none;
  transition: background .14s ease;
}
.l2s-fab-item:hover,
.l2s-fab-item:focus-visible{
  background: rgba(15,23,42,.04);
  outline: none;
}
.l2s-fab-item:focus-visible{
  box-shadow: inset 0 0 0 2px var(--ui-brand, var(--brand, #d2232a));
}
.l2s-fab-item__chip{
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f8f9fa, #eef1f4);
  color: var(--ui-brand, var(--brand, #d2232a));
  font-size: 1.15rem;
}
.l2s-fab-item__body{
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.l2s-fab-item__title{
  font-size: var(--ui-fs-base, 16px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ui-text, #0f172a);
}
.l2s-fab-item__text{
  font-size: var(--ui-fs-sm, 15px);
  line-height: 1.3;
  color: var(--ui-muted, #64748b);
  white-space: normal;
}
.l2s-fab-item__go{
  flex: none;
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: #94a3b8;
  transition: color .14s ease;
}
.l2s-fab-item:hover .l2s-fab-item__go,
.l2s-fab-item:focus-visible .l2s-fab-item__go{
  color: var(--ui-text);
}
@media (max-width: 600px){
  .l2s-fab-menu{ width: calc(100vw - 32px); }
}

/* =========================================================================
   .l2s-access-matrix — rechten-matrix (rol x module -> niveau). Canon: ui-ux-design-system.
   Niveau-intensiteit: Geen (dashed grijs) -> Lezen -> Bewerken -> Volledig (donker-slate). Merk = Opslaan-knop.
   ========================================================================= */
.l2s-access-matrix{ background: var(--ui-card, #fff); border: 1px solid rgba(15,23,42,.10); border-radius: 16px; box-shadow: 0 .35rem 1.2rem rgba(15,23,42,.07); overflow: auto; }
.l2s-access-matrix__table{ width: 100%; border-collapse: collapse; }
.l2s-access-matrix__table th, .l2s-access-matrix__table td{ padding: 10px 12px; border-bottom: 1px solid rgba(15,23,42,.08); text-align: center; vertical-align: middle; }
.l2s-access-matrix__table tbody tr:last-child td{ border-bottom: 0; }
.l2s-access-matrix__modhead, .l2s-access-matrix__module{ text-align: left; }
.l2s-access-matrix__modhead{ font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted, #64748b); }
.l2s-access-matrix__role{ font-size: 12.5px; font-weight: 700; color: var(--ui-text, #0f172a); }
.l2s-access-matrix__super{ font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--ui-on-sub); background: #0f172a; border-radius: 5px; padding: 1px 6px; margin-left: 6px; }
.l2s-access-matrix__modname{ font-size: 13px; font-weight: 700; color: var(--ui-text, #0f172a); }
.l2s-access-matrix__lvl{ font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 8px; border: 1px solid rgba(15,23,42,.14); background: #eef1f4; color: var(--ui-muted-strong); cursor: pointer; }
.l2s-access-matrix__lvl:focus{ outline: none; box-shadow: 0 0 0 2px var(--ui-brand, var(--brand, #d2232a)); }
.l2s-access-matrix__lvl.lvl-cur{ background: #dbe1e8; color: #1e293b; }
.l2s-access-matrix__lvl.lvl-crud{ background: #0f172a; color: var(--ui-on-sub); border-color: var(--ui-text); }
.l2s-access-matrix__lvl.lvl-no_access{ background: transparent; color: #94a3b8; border-style: dashed; }
.l2s-access-matrix__lvl.is-changed{ box-shadow: 0 0 0 2px var(--ui-brand, var(--brand, #d2232a)); }
.l2s-access-matrix__lvl option{ color: var(--ui-text); background: var(--ui-card); }
.l2s-access-matrix__status{ font-size: 12.5px; color: var(--ui-muted, #64748b); }
.l2s-access-matrix__status.is-ok{ color: #1e293b; }
.l2s-access-matrix__status.is-err{ color: var(--ui-danger, #dc3545); }

/* Matrix-shell (owner 2026-09-03): 14 rol-kolommen waren op mobiel onwerkbaar en de horizontale
   scroll op desktop onvindbaar. Rol-focus-pill (filterbar-canon) + sticky module-kolom/kopregel +
   randschaduwen & hint als affordance. Comfort-baseline: 16px/44px touch op mobiel. */
.l2s-access-matrix-shell{ display: flex; flex-direction: column; gap: 10px; }
.l2s-access-matrix__fb .l2s-fb{ margin: 0; }
.l2s-access-matrix__hint{ font-size: 15px; color: var(--ui-muted); align-self: center; white-space: nowrap; }
.l2s-access-matrix-scrollwrap{ position: relative; }
.l2s-access-matrix-scrollwrap::before,
.l2s-access-matrix-scrollwrap::after{ content: ""; position: absolute; top: 0; bottom: 0; width: 26px;
  pointer-events: none; opacity: 0; transition: opacity .15s ease; z-index: 4; border-radius: 16px; }
.l2s-access-matrix-scrollwrap::before{ left: 0; background: linear-gradient(to right, rgba(15,23,42,.16), transparent); }
.l2s-access-matrix-scrollwrap::after{ right: 0; background: linear-gradient(to left, rgba(15,23,42,.16), transparent); }
.l2s-access-matrix-scrollwrap.has-more-left::before{ opacity: 1; }
.l2s-access-matrix-scrollwrap.has-more-right::after{ opacity: 1; }
/* Verticale scroll BINNEN de kaart, zodat de sticky kopregel én module-kolom blijven staan. */
.l2s-access-matrix{ max-height: 72vh; }
.l2s-access-matrix__table thead th{ position: sticky; top: 0; background: var(--ui-card); z-index: 2;
  box-shadow: 0 1px 0 rgba(15,23,42,.10); }
.l2s-access-matrix__table th:first-child,
.l2s-access-matrix__table td:first-child{ position: sticky; left: 0; background: var(--ui-card); z-index: 1;
  box-shadow: 1px 0 0 rgba(15,23,42,.10); }
.l2s-access-matrix__table thead th:first-child{ z-index: 3; }
@media (max-width: 767.98px){
  .l2s-access-matrix{ max-height: none; }
  .l2s-access-matrix__lvl{ min-height: 44px; font-size: 16px; padding: 8px 12px; width: 100%; }
  .l2s-access-matrix__cell{ min-width: 0; }
  .l2s-access-matrix__table th, .l2s-access-matrix__table td{ padding: 12px 10px; }
  .l2s-access-matrix__hint{ display: none; } /* mobiel start in rol-focus — hint is desktop-affordance */
}

/* Uitleg-modal rollen & rechten (owner 2026-09-03): documentatie ín het scherm — curated uitleg +
   per rol de LIVE rechten. Eigen lichte modal (klasse-gedreven, geen dependencies). */
.l2s-acm-help-knop{ font-size: 15px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(15,23,42,.14); background: var(--ui-card); color: var(--ui-text);
  cursor: pointer; min-height: 36px; }
.l2s-acm-help-knop:hover{ border-color: var(--ui-brand, var(--brand)); }
/* Uitleg-banner op het rollen-beheer (modules/users user_type.plugin.js): intro + stappenplan-knop. */
.l2s-acm-help-banner{ display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; background: var(--ui-card); border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px; padding: 14px 18px; margin: 0 0 14px; font-size: 15px; color: var(--ui-text); }
.l2s-acm-help-banner__sub{ color: var(--ui-muted); }
.l2s-acm-help__link{ font-weight: 700; color: var(--ui-brand, var(--brand)); text-decoration: none; }
.l2s-acm-help__link:hover{ text-decoration: underline; }
.l2s-acm-help-overlay{ position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1080;
  display: flex; align-items: center; justify-content: center; padding: 18px; }
.l2s-acm-help-kaart{ background: var(--ui-card); color: var(--ui-text);
  border-radius: 16px; box-shadow: 0 1rem 3rem rgba(15,23,42,.25); width: min(680px, 100%);
  max-height: min(84vh, 900px); display: flex; flex-direction: column; }
.l2s-acm-help-kaart__kop{ display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid rgba(15,23,42,.10); font-size: 16px; }
.l2s-acm-help-kaart__sluit{ border: 0; background: transparent; font-size: 26px; line-height: 1;
  cursor: pointer; color: var(--ui-muted); padding: 4px 10px; min-height: 44px; }
.l2s-acm-help-kaart__body{ overflow-y: auto; padding: 6px 18px 18px; }
.l2s-acm-help__kop{ font-size: 15px; font-weight: 800; margin: 16px 0 6px; }
.l2s-acm-help__tekst{ font-size: 15px; line-height: 1.55; color: var(--ui-text); margin: 4px 0; }
.l2s-acm-help__niveaus{ display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.l2s-acm-help__niveau{ display: flex; align-items: baseline; gap: 10px; }
.l2s-acm-help__chip{ cursor: default; flex: 0 0 auto; min-width: 84px; text-align: center; }
.l2s-acm-help__groep{ margin-top: 14px; }
.l2s-acm-help__groepkop{ font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ui-muted); margin: 10px 0 2px; }
.l2s-acm-help__intro{ color: var(--ui-muted); }
.l2s-acm-help__rol{ border: 1px solid rgba(15,23,42,.10); border-radius: 12px; padding: 0 12px; margin: 8px 0; }
.l2s-acm-help__rolkop{ cursor: pointer; padding: 12px 0; font-weight: 700; font-size: 15px; min-height: 44px;
  display: flex; align-items: center; gap: 8px; list-style-position: inside; }
.l2s-acm-help__rol[open]{ padding-bottom: 10px; }
.l2s-acm-help__rechten{ font-size: 15px; line-height: 1.6; margin: 6px 0; }
@media (max-width: 767.98px){
  .l2s-acm-help-overlay{ padding: 0; align-items: stretch; }
  .l2s-acm-help-kaart{ width: 100%; max-height: none; border-radius: 0; }
}

/* Verberg FAB (+ en menu) als er een modal open is — en om dezelfde reden de actie-rail: zodra er
   een blad open staat, ÍS dat blad de bediening (manage-actions-ccp §3.3). */
body.modal-open #fab,
body.modal-open #fabMenu,
body.modal-open .l2s-ar{
  display: none !important;
}

/* Z-index onder modal/backdrop */
#fab, #fabBack, #fabLive { z-index: 1060; }
#fabMenu { z-index: 1059; }

/* Back FAB ? links-onder, met semitransparante achtergrondlaag
   ----------------------------------------------------------------
   - We gebruiken ::before voor de (rode) achtergrond met alpha,
     zodat het icoon zelf 100% dekkend blijft. */
.fab-back{
  left: 22px;
  right: auto;
  bottom: calc(22px + env(safe-area-inset-bottom, 0));
  position: fixed;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ui-on-brand);
  z-index: 1060;
  overflow: hidden; /* clip de ::before */
}
.fab-back::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(var(--fab-back-rgb), .82); /* ? opacity van de rode achtergrond */
  box-shadow: 0 14px 26px rgba(15,23,42,.18), inset 0 -2px 6px rgba(255,255,255,.15);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.fab-back i{
  position: relative; /* boven de ::before */
  font-size: 1.7rem;
}
.fab-back:hover::before{
  transform: translateY(-1px);
  box-shadow: 0 18px 30px rgba(15,23,42,.22), inset 0 -2px 6px rgba(255,255,255,.15);
}
/* ============================================================================
   MIDDEN-FAB: "Bekijk site" (Live indicator)
   - Tekst i.p.v. icoon
   - Groen pulserend live-bolletje
   - Exact gecentreerd tussen back en plus
============================================================================ */
/* ========================================================================
   MIDDEN-FAB: "Bekijk site" + live dot (altijd exact gecentreerd)
======================================================================== */

.fab-live{
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0));
  transform: translateX(-50%);

  width: 92px;
  height: 92px;
  border-radius: 50%;

  background: var(--ui-danger);
  color: var(--ui-on-brand);

  /* 🔑 dit centreert alles perfect */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  gap: 6px;

  z-index: 1060;
  box-shadow:
    0 14px 26px rgba(15,23,42,.18),
    inset 0 -2px 6px rgba(255,255,255,.15);

  font-weight: 800;
  font-size: .95rem;
  line-height: 1.05;

  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.fab-live:hover{
  transform: translateX(-50%) translateY(-1px);
  box-shadow:
    0 18px 30px rgba(15,23,42,.22),
    inset 0 -2px 6px rgba(255,255,255,.15);
}

/* Tekst */
.fab-live-label{
  pointer-events: none;
}

/* Live dot (altijd gecentreerd boven tekst) */
.fab-live-dot{
  order: -1; /* zet dot altijd boven label, ook als HTML andersom is */
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2ecc71;

  /* glow */
  box-shadow:
    0 0 0 0 rgba(46,204,113,.55),
    0 0 14px rgba(46,204,113,.55);

  animation: fab-live-pulse 1.6s infinite;
}

/* Pulse / ?fonkelen? */
@keyframes fab-live-pulse{
  0%{
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(46,204,113,.55),
      0 0 14px rgba(46,204,113,.55);
    filter: brightness(1);
  }
  50%{
    transform: scale(1.12);
    box-shadow:
      0 0 0 10px rgba(46,204,113,0),
      0 0 18px rgba(46,204,113,.75);
    filter: brightness(1.08);
  }
  100%{
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(46,204,113,0),
      0 0 14px rgba(46,204,113,.55);
    filter: brightness(1);
  }
}

/* consistent met jouw modal gedrag */
body.modal-open #fabLive{ display: none !important; }
body.modal-open #fabBack{ display: none !important; }


/* ============================================================================
   6) LEAD-ONLY MODAL MODE (alleen ?Company? tab tonen)
============================================================================= */
#sponsorModal.lead-only #frmTabs{ display: none !important; }
#sponsorModal.lead-only #frmAcc button[data-target]:not([data-target="#tab-company"]){ display: none !important; }
#sponsorModal.lead-only .tab-pane{ display: none !important; opacity: 0 !important; }
#sponsorModal.lead-only #tab-company{ display: block !important; opacity: 1 !important; }

/* ============================================================================
   7) PAGE HEADER HULPJES (zoekveld & logo)
============================================================================= */
.page-title{ text-align: center; }
/* Pagina-/module-titel volgt de club z'n SECUNDAIRE kleur (--sub), default donker-slate/ink. Merk (--brand)
   blijft gereserveerd voor primaire acties. Zie ui-ux-design-system.md §2. */
#MetaPageTitle{ color: var(--sub-ink, var(--ui-text, #0f172a)); }

.club-logo-wrap{ line-height: 1; }
.club-logo{ max-height: 56px; width: auto; display: block; }
@media (max-width: 576px){
  .club-logo{ max-height: 48px; }
}

.page-header .header-controls{ width: 100%; }
.page-header .header-controls .input-group{
  min-width: 280px;
  max-width: 520px;
  width: 100%;
}
@media (min-width: 768px){
  .page-header .header-controls{ justify-content: flex-end; }
}

/* ============================================================================
   8) FOOTER BRAND GLOW (subtiele merk-gloed onderin)
============================================================================= */
.footer-brand-glow{
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0);
  height: 2px;
  background: var(--ui-brand, #0e5b4f);
  box-shadow:
    0 0 8px  var(--ui-brand, #0e5b4f),
    0 0 14px var(--ui-brand, #0e5b4f);
  opacity: .55;
  pointer-events: none;
  z-index: 1030;
}
.footer-brand-glow::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -10px;
  height: 22px;
  background: var(--ui-brand, #0e5b4f);
  filter: blur(10px);
  opacity: .28;
  pointer-events: none;
}
body.modal-open .footer-brand-glow{ opacity: .30; }

/* ============================================================================
   9) BADGES (rustiger tinten)
============================================================================= */
.badge.text-bg-success{ background-color: #2e7d6b !important; }
.badge.text-bg-danger{  background-color: #c53a4a !important; }
.badge.text-bg-warning{ background-color: #e3b23c !important; color:var(--ui-text) !important; }

/* ============================================================================
   10) SAFE AREA SUPPORT (iOS e.d.)
============================================================================= */
@supports (padding: env(safe-area-inset-bottom)){
  #btnBack{ margin-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .footer-brand-glow{ bottom: env(safe-area-inset-bottom); }
}


/* Zorg dat hij boven de sticky table header ligt maar onder modals */
#stateFilters.sticky-top,
#emailListToolbar.sticky-top {
  z-index: 1030;
}

@supports (backdrop-filter: blur(4px)) {
  #stateFilters.sticky-top,
  #emailListToolbar.sticky-top {
    backdrop-filter: blur(4px);
  }
}

/* Heb je ooit een fixed navbar? Geef dan top-offset mee: */
:root { --sticky-offset: 0px; }          /* pas aan als nodig */
#stateFilters.sticky-top { top: var(--sticky-offset); }

/* Zelfde sticky gedrag voor email lists toolbar */
#emailListsToolbar.sticky-top {
  z-index: 1030;
  top: var(--sticky-offset);
}

@supports (backdrop-filter: blur(4px)) {
  #emailListsToolbar.sticky-top {
    backdrop-filter: blur(4px);
  }
}

#MetaCrudModal .modal-body > .row,
#MetaCrudModal #MetaFormFields {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#MetaCrudModal #MetaFormFields .accordion {
  width: 100% !important;
  max-width: 100% !important;
}






/* ============================================================================
   11) ONBOARDING & REGISTRATION FORMS
============================================================================= */


.register-form-body { background: var(--bs-body-bg); }

/* Container & hero */
.register-form {}
.register-form-hero { text-align:center; margin:1rem auto 1.5rem; }

/* Inloggen: «of» + Doorgaan met Google/Microsoft (users identity-platform F5, mockup scherm 5a). Geen eigen kleuren:
   de merklogo's zijn losse SVG's (assets/branding/providers/), de rest komt uit Bootstrap-variabelen. */
.l2s-sso__or { display:flex; align-items:center; gap:.75rem; margin:0 0 .75rem; font-size:15px; color:var(--bs-secondary-color); }
.l2s-sso__or::before, .l2s-sso__or::after { content:""; flex:1; border-top:1px solid var(--bs-border-color); }
.l2s-sso__btn { display:flex; align-items:center; justify-content:center; gap:.6rem; min-height:48px; font-size:16px; white-space:nowrap; }
.l2s-sso__btn img { flex:none; }
.l2s-sso__hint { font-size:15px; }
.register-form-brand { color: var(--register-form-brand); }

/* Card */
.register-form-card{
  background: var(--register-form-card-bg);
  border: 0;
  border-radius: var(--register-form-card-radius);
  box-shadow: var(--register-form-card-shadow);
  padding: clamp(1rem, 2vw, 2rem);
}

/* QR-gebied */
.register-form-qrcode{
  width:240px; height:240px; margin:1rem auto;
  border-radius: 16px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, #fff, #f7f9fc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 20px rgba(0,0,0,.06);
}

/* Key/Value lijst */
.register-form-kv li{ margin:.15rem 0; }

/* Monospace helper */
.mono{ font-family: ui-monospace, Menlo, Consolas, monospace; font-size:.95rem }

/* Contextuele hulpteksten standaard uit, JS toont juiste variant */
.register-form-help-ios,
.register-form-help-android { display:none; }

/* Secret + copy: netjes op ??n regel op grotere schermen,
   maar onder elkaar (knop onder) op mobiel */
.register-form-secret{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-top:.25rem;
  flex-wrap:wrap; /* fallback */
}

.register-form-secret-text{
  /* lange Base32 strings mooi breken */
  overflow-wrap:anywhere;
  word-break:break-word;
}

.register-form-copy-btn{ cursor:pointer; }

/* Mobiel: knop onder het secret en 100% breed */
@media (max-width: 576px){
  .register-form-secret{
    flex-direction:column;
    align-items:stretch;
  }
  .register-form-copy-btn{
    width:100%;
  }
}

/* Call-to-action styling (herbruikbare brand-knop) */
.btn-brand{
  background: var(--register-form-brand);
  border-color: var(--register-form-brand);
  color:var(--ui-on-brand);
  /* Gloed + focus-ring in de CLUBKLEUR (MAIN_HEX_COLOR_1 → --brand-rgb). Stond hardcoded op
     Bootstrap-blauw: blauw schijnsel onder een rode knop op elke auth-pagina. (owner 04-09-2026) */
  box-shadow: 0 4px 14px rgba(var(--brand-rgb, 13,110,253), .3);
}
.btn-brand:hover{ filter: brightness(.96); }
.btn-brand:focus, .btn-brand:focus-visible{
  box-shadow: 0 4px 14px rgba(var(--brand-rgb, 13,110,253), .3),
              0 0 0 .25rem rgba(var(--brand-rgb, 13,110,253), .35);
}





/* ============================================================================
   12) CHECKLIST BUTTON PWD
============================================================================= */


/* ===== Password policy UI (L2S) ===== */
.pw-checklist {
  margin-top: .5rem;
  padding: .625rem .75rem;
  border-radius: .75rem;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,248,248,.95));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,   /* subtiele highlight (3D) */
    0 6px 14px rgba(0,0,0,.06);           /* zachte drop shadow */
}

.pw-checklist-title {
  font-weight: 600;
  font-size: .95rem;
  margin: 0 0 .25rem 0;
  color: #222;
}

.pw-checklist-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pw-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem 0;
  font-size: .92rem;
  color: #6b7280; /* neutraal */
  transition: color .16s ease, transform .12s ease;
}
.pw-check::before {
  content: '\25CB'; /* ○ — nog niet beoordeeld (was per ongeluk '?' na encoding-verlies) */
  flex: 0 0 auto;
  width: 1.1rem;
  text-align: center;
  font-weight: 700;
  opacity: .8;
}

.pw-check--ok {
  color: #137333;              /* zacht groen */
  transform: translateZ(0);    /* GPU hint */
}
.pw-check--ok::before {
  content: '\2713'; /* ✓ */
}

/* mislukte regel expliciet (alleen wanneer je het wil markeren) */
.pw-check--fail {
  color: #b00020;              /* zacht rood */
}
.pw-check--fail::before {
  content: '\2715'; /* ✕ */
}

/* a11y: voorkom onnodige animatie bij reduce motion */
@media (prefers-reduced-motion: reduce) {
  .pw-check { transition: none; }
}

/* Submitknop subtiel pulsen als alles klopt (mag je weglaten) */
.pw-ready {
  box-shadow: 0 8px 18px rgba(19,115,51,.15);
  transform: translateY(-1px);
}




/* ============================================================================
   13) CONTRACT FROM SPONSORS
============================================================================= */


.contract-doc { font-size: .95rem; line-height: 1.45; }
.contract-head { display:flex; align-items:center; gap:1rem; border-bottom:2px solid var(--brand, #d2232a); padding-bottom:.5rem; margin-bottom:1rem; }
.contract-head .logo { width:60px; height:60px; object-fit:contain; }
.contract-head .title h2 { margin:0; font-size:1.25rem; }
.contract-head .sub { color:#6c757d; font-size:.9rem; }
.contract-doc h3 { font-size:1.05rem; margin:.9rem 0 .4rem; }
.contract-doc ul { margin:0 0 .5rem 1rem; }
.contract-doc .party { margin-bottom:.5rem; }
.contract-doc .sign-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:.5rem; }
.contract-doc .small { font-size:.85em; }

/* Printvriendelijk */
@media print {
  .contract-doc { font-size: 12pt; }
  .modal, .btn, #fab { display:none !important; }
}




/* ============================================================================
   14) FLOWS MAIL PREVIEW
============================================================================= */


/* === FLOWS MAIL PREVIEW ? definitive sizing & scrolling ================= */

/* modal body as flex so preview can grow */
.flow-mail-dialog .modal-body {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-height: 0;
}

/* wrapper flex child */
.flow-mail-modal .flow-preview-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* the preview area defines the height; iframe fills it */
.flow-mail-modal .flow-preview {
  flex: 1 1 auto;
  min-height: 260px;            /* nice floor */
  height: auto;                 /* JS zet exacte px-hoogte */
  max-height: none !important;  /* overschrijf oude 50vh caps */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--ui-card);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: .5rem;
  padding: .5rem;
}

/* iframe always fills container */
.flow-mail-modal .flow-preview .flow-iframe {
  display: block;
  width: 100%;
  height: 100% !important;  /* cruciaal: vul container-hoogte */
  border: 0;
  background: var(--ui-card);
}

/* mobile: nothing special ? JS rekent hoogte al uit */



/* ============================================================================
   15 MODALS ? brand header line + subtiele glow
============================================================================ */
.modal-content{
  /* Override Bootstrap variabelen ? werkt op alle modals */
  --bs-modal-header-border-color: var(--ui-brand);
  --bs-modal-header-border-width: 2px;
}

/* Optioneel: extra zachte glow precies onder de rand */
.modal-header{
  position: relative; /* nodig voor ::after */
}
.modal-header::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;                          /* even hoog als de border */
  background: var(--ui-brand);
  box-shadow:
    0 0 8px  var(--ui-brand),
    0 0 14px var(--ui-brand);
  opacity: .35;                          /* subtiel houden */
  pointer-events: none;
}



/* ============================================================================
  16  Flow buttons ? witte bg + brand border, filled op click
============================================================================ */

.btn-flow{
  background: var(--ui-card) !important;
  color: var(--ui-brand) !important;
  border: 1.5px solid var(--ui-brand) !important;
  border-radius: .6rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(15,23,42,.06);
  transition:
    background-color .16s ease,
    color .16s ease,
    transform .12s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

.btn-flow:hover{
  background: rgba(var(--brand-rgb), .06) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(15,23,42,.10);
}

.btn-flow:active,
.btn-flow:focus:active{
  background: var(--ui-brand) !important;
  color: var(--ui-on-brand) !important;
  border-color: var(--ui-brand) !important;
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(var(--brand-rgb), .25);
}

.btn-flow:disabled,
.btn-flow.disabled{
  opacity: .55;
  transform: none;
  box-shadow: none;
}





/* ============================================================================
   17) CONTRACT2PDF
============================================================================= */

.contract-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
  justify-content: flex-end; /* <--- rechts uitlijnen */
}

/* ============================================================================
   LANDING-PAGE BASE (SCHOON, GEEN BACKGROUND IMAGE)
============================================================================ */

/* Landing body: rustige basis, met overflow fix */
body.landing {
  min-height: 100vh;
  position: relative;
  background: var(--ui-bg);
  overflow-x: hidden;
}

/* Verwijder oude foto / overlay lagen */
body.landing::before,
body.landing::after {
  content: none !important;
  display: none !important;
}


/* ============================================================================
   HERO ELEMENTEN
============================================================================ */

.hero-veil {
  display: inline-block;
  padding: .3rem .75rem;
  border-radius: .75rem;
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.06);
}

.hero-title {
  font-weight: 800;
  letter-spacing: .2px;
  text-shadow:
    0 1px 0 rgba(255,255,255,.9),
    0 8px 22px rgba(0,0,0,.25);
}


/* ============================================================================
   3D APP CARDS (PREMIUM UI ? COMPLEET HERSTELD)
============================================================================ */


/* BASIS 3D TILE */
.card-3d {
  --tile-r: 20px;
  --tile-brd: rgba(0,0,0,.06);

  position: relative;
  border-radius: var(--tile-r);
  border: 1px solid var(--tile-brd);

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.98),
    rgba(255,255,255,.90)
  );

  box-shadow:
    0 16px 30px rgba(15,23,42,.12),
    0 3px 8px rgba(15,23,42,.06);

  backdrop-filter: blur(4px);
  transform: translateZ(0);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

/* GLOW + INNER HIGHLIGHT */
.card-3d::before,
.card-3d::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--tile-r);
  pointer-events: none;
}

.card-3d::before {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.card-3d::after {
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb), .22);
  opacity: .7;
}


/* HOVER DEPTH */
.card-3d:hover {
  transform: translateY(-6px);
  box-shadow:
    0 22px 42px rgba(15,23,42,.18),
    0 8px 16px rgba(15,23,42,.10);
  border-color: rgba(var(--brand-rgb), .35);
}

.card-3d:active {
  transform: translateY(-2px);
}


/* MICRO TILT */
@media (pointer: fine) {
  .card-3d:hover .card-body {
    transform: perspective(900px) rotateX(1deg);
    transition: transform .2s ease;
  }
}

/* A11Y */
@media (prefers-reduced-motion: reduce) {
  .card-3d, .card-3d * {
    transition: none !important;
  }
}


/* BRAND TITLES */
.card-3d h5,
.card-3d .display-6,
.card-3d .display-6 i,
.card-3d .bi {
  color: var(--ui-brand) !important;
}

.card-3d h5 {
  display: inline-block;
  position: relative;
}

.card-3d h5::after {
  display: none !important;
}

.card-3d .text-muted {
  color: #5f6b7a !important;
}


/* FOCUS OUTLINE */
a:focus .card-3d,
.card-3d:focus-within {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(var(--brand-rgb), .25),
    0 18px 36px rgba(15,23,42,.16);
}


/* MOBIEL TILE LAYOUT */
@media (max-width: 576px) {
  .row.g-3 > [class*="col-"] {
    display: flex;
    justify-content: center;
    align-items: stretch;
  }
  .card-3d {
    width: min(88vw, 360px);
    margin-left: auto;
    margin-right: auto;
  }
}


/* ICON MINI ANIMATIE */
.card-3d:hover i {
  transform: translateY(-2px) scale(1.03);
}


/* ============================================================================
   19) READ MODAL LAYOUT FOR FLOWS (EMAIL_LISTS.JSON, ETC.)
============================================================================= */
/* read-modal generic styles */
.rm-open { overflow: hidden; }
#read-modal .rm-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  z-index: 1050;
}
#read-modal .rm-card{
  background:var(--ui-card); color:#222; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.2);
  width: min(1100px, 96vw);
  display:flex; flex-direction:column; max-height:90vh; overflow:hidden;
}
#read-modal .rm-card.rm-sm{ width:min(520px, 96vw); }
#read-modal .rm-card.rm-md{ width:min(820px, 96vw); }
#read-modal .rm-card.rm-lg{ width:min(1100px, 96vw); }

#read-modal .rm-header{ display:flex; align-items:center; gap:.75rem; padding:14px 16px; border-bottom:1px solid #eee; }
#read-modal .rm-title{ margin:0; font-size:1.25rem; font-weight:600; }
#read-modal .rm-toolbar{ display:flex; gap:.5rem; align-items:center; padding:10px 12px; border-bottom:1px solid #f1f1f1; }
#read-modal .rm-toolbar .rm-filter{ max-width: 340px; }
#read-modal .rm-body{ overflow:auto; -webkit-overflow-scrolling:touch; }
#read-modal .rm-footer{ padding:12px 16px; border-top:1px solid #f1f1f1; display:flex; justify-content:flex-end; gap:.5rem; }

#read-modal .rm-table{ width:100%; border-collapse:collapse; }
#read-modal .rm-table thead th{
  position: sticky; top: 0; background:var(--ui-card); z-index:1;
  border-bottom:2px solid #e6e6e6; padding:10px 12px; text-align:left; font-weight:600;
}
#read-modal .rm-table tbody td{ border-bottom:1px solid #f0f0f0; padding:10px 12px; vertical-align:top; }
#read-modal code{ background:#fafafa; border:1px solid #eee; border-radius:6px; padding:.15rem .35rem; display:inline-block; }

/* ========================================================================
  20 STICKY FOOTER LAYOUT (voor pagina's met .layout-sticky-footer op <body>)
   ===================================================================== */

html,
body {
  height: 100%;
}

body.layout-sticky-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* hoofdcontent vult de ruimte */
body.layout-sticky-footer main {
  flex: 1 0 auto;
}

/* sponsors-balk fungeert als footer en plakt onderaan */
body.layout-sticky-footer .top-sponsors {
  margin-top: auto;
}


/* ============================================================================
   21) PARTIALS FOOTER TOP SPONSORS
============================================================================= */


.top-sponsors {
  background-color: var(--brand);
  padding: 1.5rem 1rem;
}

.top-sponsors-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
}

.top-sponsor {
  margin: 0;
  padding: 0.5rem 1rem;
  /* optioneel lichte transparante achtergrond voor contrast */
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 0.75rem;
}

.top-sponsor-logo {
  display: block;
  max-height: 60px;
  max-width: 180px;
  height: auto;
  width: auto;
  object-fit: contain;
}


/* ============================================================================
   22) LANDINGPAGE HEADER IMAGES 
============================================================================= */
.landing-header-logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

/* Middenlogo (club) */
.landing-logo-main {
  display: block;
  height: 120px;     /* hoofdmaat */
  width: auto;
  object-fit: contain;
}

/* Zijlogo's ~20% kleiner dan main */
.landing-logo-side {
  display: block;
  height: 60px;     /* 20% kleiner dan 60px */
  width: 60px;
  object-fit: contain;
  opacity: .95;
}

/* Kleinere schermen: alles kleiner, verhouding blijft 20% */
@media (max-width: 576px) {
  .landing-header-logos-row {
    gap: 1.25rem;
  }

  .landing-logo-main {
    height: 100px;
  }

  .landing-logo-side {
    height: 40px;
  }
}

/* ============================================================================
   EVENTS ? GRID VIEW (cards i.p.v. standaard tabel)
   ========================================================================== */

body.module-events #MetaTable {
  border-collapse: separate;
  border-spacing: 0;
}

/* Header weg; info zit op de card zelf */
body.module-events #MetaTable thead {
  display: none;
}

/* Tbody als flex-grid container */
body.module-events #MetaTable tbody {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: flex-start;
}

/* Elke <tr> wordt ??n ?tile? */
body.module-events #MetaTable tbody tr {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Breedtes per breakpoint */
body.module-events #MetaTable tbody tr {
  flex: 0 0 100%;
}

@media (min-width: 576px) {
  body.module-events #MetaTable tbody tr {
    flex: 0 0 calc(50% - 1.25rem);
  }
}

@media (min-width: 768px) {
  body.module-events #MetaTable tbody tr {
    flex: 0 0 calc(33.333% - 1.25rem);
  }
}

@media (min-width: 1200px) {
  body.module-events #MetaTable tbody tr {
    flex: 0 0 calc(25% - 1.25rem); /* 4 per rij */
  }
}

/* Cellen zelf: card-cel tonen, rest verbergen via JS-class */
body.module-events #MetaTable tbody tr td {
  padding: 0;
  border: 0;
}

/* Nieuwe kaart-cel die je in JS maakt */
body.module-events #MetaTable td.event-card-cell {
  display: block !important;
}

/* Originele data/flow/actie-cellen, door JS gemarkeerd */
body.module-events #MetaTable td.event-row-hidden-cell {
  display: none !important;
}


/* ====================================================================
   EVENTS ? Maand-pills in brand-kleur
   ==================================================================== */

body.module-events #stateFilters .btn-primary {
  background-color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  color: var(--ui-on-brand) !important;
  box-shadow: 0 2px 6px rgba(var(--brand-rgb), .35);
}

/* Seizoenslabel boven de maand-pills */
body.module-events #stateFilters .season-label {
  color: var(--ui-brand);
  font-weight: 700;
  text-align: center;
}

body.module-events #stateFilters .btn-primary:hover,
body.module-events #stateFilters .btn-primary:focus {
  filter: brightness(1.03);
  background-color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  box-shadow: 0 4px 10px rgba(var(--brand-rgb), .45);
}

/* ?Niet actieve? pills ? outline variant in brand-kleur */
body.module-events #stateFilters .btn-outline-primary {
  background-color: transparent !important;
  color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  box-shadow: none;
}

body.module-events #stateFilters .btn-outline-primary:hover,
body.module-events #stateFilters .btn-outline-primary:focus {
  background-color: rgba(var(--brand-rgb), .06) !important;
  color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  box-shadow: 0 2px 6px rgba(var(--brand-rgb), .25);
}


/* ============================================================================
   EVENTS ? CARD STYLE (gebaseerd op landing-page card-feature)
   ========================================================================== */

/* Outer card: overal waar .event-card voorkomt (manage, public, embedded) */
.event-card {
  --card-r: 22px;

  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;

  border-radius: var(--card-r);
  background: var(--ui-card);
  box-shadow:
    0 16px 34px rgba(15,23,42,.14),
    0 4px 10px rgba(15,23,42,.06);
  overflow: hidden;
  transform: translateZ(0);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

.event-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 22px 46px rgba(15,23,42,.18),
    0 8px 16px rgba(15,23,42,.10);
}

.event-card:active {
  transform: translateY(-2px);
}

/* Media bovenin: 16:9 banner, zelfde gradient als card-feature */
.event-card__media {
  position: relative;
  padding-top: 56%;
  background:
    linear-gradient(
      135deg,
      rgba(var(--brand-rgb), .10),
      rgba(var(--brand-rgb), .22)
    );
  border-radius: var(--card-r) var(--card-r) 0 0;
  overflow: hidden;
}

.event-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;              /* onder pill */
}

/* Datum / tijd pill bovenin de banner */
.event-card__pill {
  position: absolute;
  left: .75rem;
  top: .75rem;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: var(--ui-brand);
  color: var(--ui-on-brand);
  font-size: .8rem;
  z-index: 2;              /* boven img */
}

/* Grotere datum-pill op publieke landing */
body.landing .event-card__pill {
  padding: .25rem .75rem;
  font-size: .9rem;
  font-weight: 600;
  border-radius: 999px;
}

/* Titel + tekst van event-kaart centreren op publieke landing */
body.landing .event-card__title,
body.landing .event-card__meta,
body.landing .event-card__desc {
  text-align: center;
}

/* Titel net wat groter */
body.landing .event-card__title {
  font-size: 1.25rem;
}

/* Beschrijving beter leesbaar */
body.landing .event-card__desc {
  font-size: 1rem;
  line-height: 1.5;
}


/* Body van de kaart */
.event-card__body {
  padding: 1.1rem 1.25rem 0.9rem;
}

.event-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 .3rem;
  color: var(--ui-text);
}

.event-card__meta {
  margin: 0;
  font-size: .94rem;
  line-height: 1.4;
  color: var(--ui-muted);
}

.event-card__desc {
  margin-top: .45rem;
  font-size: .94rem;
  color: var(--ui-text);
}

/* Footer binnen de kaart ? flows boven, acties eronder, alles gecentreerd */
.event-card__footer {
  padding: 0 1.25rem 1.25rem;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  text-align: center;
}

.event-card__flows,
.event-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
}

/* Buttons in de footer in brand-kleur */
.event-card__footer .btn-primary,
.event-card__footer .btn-brand {
  background-color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  box-shadow: 0 4px 10px rgba(var(--brand-rgb), .35);
}

.event-card__footer .btn-primary:hover,
.event-card__footer .btn-brand:hover,
.event-card__footer .btn-primary:focus,
.event-card__footer .btn-brand:focus {
  filter: brightness(1.03);
  background-color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  box-shadow: 0 6px 14px rgba(var(--brand-rgb), .45);
}

/* Focus outline zoals op landing cards */
.event-card:focus-within {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(var(--brand-rgb), .25),
    0 22px 46px rgba(15,23,42,.2);
}

/* Optioneel: korte omschrijving clampen (mag global voor alle event-cards) */
.event-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ============================================================
   Sponsor product ? publish status badge
   (admin webshop cards)
   ============================================================ */

.sp-publish-badge {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: .35rem .85rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 6px 14px rgba(15,23,42,.18);
  z-index: 3;
  white-space: nowrap;
}

.sp-publish-badge--on {
  background: #2fb344;
  color: var(--ui-on-dark);
  box-shadow:
    0 6px 14px rgba(47,179,68,.35),
    inset 0 -1px 0 rgba(255,255,255,.25);
}

.sp-publish-badge--off {
  background: #6c757d;
  color: var(--ui-on-dark);
  box-shadow:
    0 6px 14px rgba(108,117,125,.35),
    inset 0 -1px 0 rgba(255,255,255,.2);
}


/* ============================================================================
   EVENTS_PUBLIC ? MODAL + CARD DESCRIPTION
   ========================================================================== */

/* Alleen op de publieke read-pagina (public-read) de event-info modal centreren */
body.public-read #eventInfoModal .modal-header,
body.public-read #eventInfoModal .modal-body,
body.public-read #eventInfoModal .modal-footer {
  text-align: center;
}

body.public-read #eventInfoModal .modal-header {
  flex-direction: column;
  align-items: center;
}

body.public-read #eventInfoModal .modal-title {
  width: 100%;
  margin-bottom: .5rem;
}

body.public-read #eventInfoSponsorLogo {
  margin-top: .25rem;
}

/* Kaart-description: max 2 regels + ellipsis, alleen op events-cards */
body.module-events .event-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ============================================================================
   23) ACCORDION THEME
============================================================================= */

/* Item: brand-border + zachte 3D card-look */
.accordion .accordion-item{
  border: 1px solid rgba(var(--brand-rgb), .35);
  border-radius: 16px;                         /* consistent met jouw UI */
  background: var(--ui-card);
  box-shadow:
    0 8px 22px rgba(15,23,42,.06),             /* drop shadow */
    inset 0 1px 0 rgba(255,255,255,.85),       /* top highlight (3D) */
    inset 0 -10px 16px rgba(15,23,42,.04);     /* bodem-inset (diepte) */
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.accordion .accordion-item:hover{
  transform: translateY(-1px);
  box-shadow:
    0 12px 28px rgba(15,23,42,.09),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -12px 18px rgba(15,23,42,.05);
}

/* Header-knop: rustige gradient + brand-underline wanneer open */
.accordion .accordion-button{
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-radius: 16px;             /* matcht de item radius */
  color: var(--ui-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.accordion .accordion-button:focus{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 .2rem rgba(var(--brand-rgb), .25);
}
.accordion .accordion-button:not(.collapsed){
  background: linear-gradient(180deg, rgba(var(--brand-rgb), .06), #ffffff);
  border-bottom: 1px solid rgba(var(--brand-rgb), .35); /* ?tab?-gevoel */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 0 rgba(var(--brand-rgb), .15);
}

/* Body: lichte binnenrand zodat het paneel ?ingezet? voelt */
.accordion .accordion-body{
  background: var(--ui-card);
  border-radius: 0 0 16px 16px;
  box-shadow:
    inset 0 0 0 1px rgba(var(--brand-rgb), .08),
    inset 0 10px 18px rgba(15,23,42,.03);
}


/* ====================================================================
   REPORTS ? PUBLIC NEWSFEED (FEED-CARDS BINNEN EEN FIXED-CARD)
   ==================================================================== */

/* === 1. Layout van de reports-card zelf ============================= */

body.landing .card-feature--reports {
  display: flex;
  flex-direction: column;
  height: 100%; /* blijft net zo hoog als de andere cards */
}

body.landing .card-feature--reports .card-feature__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* nodig voor scroll in child */
}

/* Feedcontainer die scrollt */
body.landing .card-feature--reports .report-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(480px, 65vh); /* pas aan naar smaak */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Binnen de card geen extra marge */
body.landing .card-feature--reports .report-feed-table {
  margin-bottom: 0;
}



/* Titel + ondertitel van de hoofdkaarten centreren + brandkleur */
body.landing .card-feature--reports .card-feature__body,
body.landing .card-feature--events  .card-feature__body,
body.landing .card-feature--tabs    .card-feature__body {
  text-align: center;
}

body.landing .card-feature--reports .card-feature__title,
body.landing .card-feature--events  .card-feature__title,
body.landing .card-feature--tabs    .card-feature__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ui-brand);
  margin-bottom: .35rem;
}

body.landing .card-feature--reports .card-feature__text,
body.landing .card-feature--events  .card-feature__text,
body.landing .card-feature--tabs    .card-feature__text {
  font-size: 1rem;
  color: var(--ui-muted);
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
}

/* ====================================================================
   2. MetaTable ? feedcards i.p.v. tabel
   ==================================================================== */

body.module-events_reports #MetaTable {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

body.module-events_reports #MetaTable thead {
  display: none; /* tabelhead niet nodig */
}

body.module-events_reports #MetaTable tbody {
  display: block;
}

/* Elke <tr> is ??n feed-kaart */
body.module-events_reports #MetaTable tbody tr {
  display: block;
  margin: 0 0 1.2rem 0;
}

/* E?n cel per kaart, fullwidth */
body.module-events_reports #MetaTable tbody tr > td {
  display: block;
  padding: 0;
  border: 0;
}



/* ====================================================================
   3. Feed-card styling (zoals je screenshot)
   ==================================================================== */

.report-feed-item {
  background: var(--ui-card);
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow:
    0 10px 24px rgba(15,23,42,.08),
    0 2px 6px rgba(15,23,42,.04);
  padding: 1rem 1.25rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* ---- header ---- */

.report-feed-header {
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
}

.report-feed-header-main {
  display: flex;
  gap: .75rem;
  align-items: center;
}

.report-feed-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.report-feed-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.report-feed-meta {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.report-feed-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem;
}

.report-feed-team {
  font-weight: 600;
  color: var(--ui-text);
}

.report-feed-type {
  font-size: .85rem;
  color: var(--ui-muted);
}

.report-feed-date {
  font-size: .82rem;
  color: var(--ui-muted);
}

/* ---- body ---- */

.report-feed-body {
  font-size: .94rem;
}

.report-feed-link {
  color: var(--ui-brand);
  text-decoration: none;
}

.report-feed-link:hover {
  text-decoration: underline;
}

.report-feed-snippet {
  margin: .25rem 0 0;
  color: var(--ui-text);
}

.report-feed-snippet a {
  font-weight: 600;
  text-decoration: none;
  color: var(--ui-brand);
}

.report-feed-snippet a:hover {
  text-decoration: underline;
}

/* ---- image ---- */

.report-feed-image-wrap {
  margin: .25rem 0 0;
}

.report-feed-image-wrap img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 12px;
}

/* ---- footer ---- */

.report-feed-footer {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .4rem 0 .1rem;
  font-size: .85rem;
  color: var(--ui-muted);
}

.report-feed-footer .icon-btn {
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.report-feed-footer .icon-btn i {
  font-size: 1rem;
}

.report-feed-footer .feed-comment-link {
  text-decoration: none;
  color: var(--ui-muted);
}

.report-feed-footer .feed-comment-link:hover {
  text-decoration: underline;
}

/* ---- mobiel ---- */

@media (max-width: 576px) {
  body.module-events_reports #MetaTable tbody tr {
    margin-bottom: 1.6rem;
  }
}

/* ==== EVENTS CARD: feed scrolt binnen de kaart ==== */

body.landing .card-feature--events {
  display: flex;
  flex-direction: column;
  height: 100%; /* gelijke hoogte met andere cards */
}

body.landing .card-feature--events .card-feature__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* belangrijk i.c.m. overflow */
}

body.landing .card-feature--events .events-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(480px, 65vh); /* pas gerust aan */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.landing .card-feature--events .event-feed-table {
  margin-bottom: 0;
}

/* Events-table zelf als verticale lijst kaarten */
#EventsTable {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

#EventsTable thead {
  display: none; /* header verbergen, info zit al in de card */
}

#EventsTable tbody {
  display: block;
}

#EventsTable tbody tr {
  display: block;
  margin: 0 0 1.2rem 0;
}

#EventsTable tbody tr > td {
  display: block;
  padding: 0;
  border: 0;
}

/* optioneel: op mobiel wat extra ruimte tussen kaarten */
@media (max-width: 576px) {
  #EventsTable tbody tr {
    margin-bottom: 1.6rem;
  }
}

/* Maand-pills op publieke reports/events pagina in zelfde merkstijl als beheer */
body.landing.module-events_reports #EventsFilters .btn-primary {
  background-color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  color: var(--ui-on-brand) !important;
  box-shadow: 0 2px 6px rgba(var(--brand-rgb), .35);
}

body.landing.module-events_reports #EventsFilters .btn-primary:hover,
body.landing.module-events_reports #EventsFilters .btn-primary:focus {
  filter: brightness(1.03);
  background-color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  box-shadow: 0 4px 10px rgba(var(--brand-rgb), .45);
}

/* Outline-variant (niet-actieve maanden) */
body.landing.module-events_reports #EventsFilters .btn-outline-primary {
  background-color: transparent !important;
  color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  box-shadow: none;
}

body.landing.module-events_reports #EventsFilters .btn-outline-primary:hover,
body.landing.module-events_reports #EventsFilters .btn-outline-primary:focus {
  background-color: rgba(var(--brand-rgb), .06) !important;
  color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  box-shadow: 0 2px 6px rgba(var(--brand-rgb), .25);
}


/* ====================================================================
   SPONSOR_PRODUCT_PUBLIC + SHOP_PUBLIC ? GRID VIEW
   ==================================================================== */

body.module-sponsor_product_public #MetaTable,
body.module-shop_public #MetaTable,
body.module-webshop_public #MetaTable {
  border-collapse: separate;
  border-spacing: 0;
}

/* Header weg; info zit op de kaart */
body.module-sponsor_product_public #MetaTable thead,
body.module-shop_public #MetaTable thead,
body.module-webshop_public #MetaTable thead {
  display: none;
}

/* Tbody als flex-grid container */
body.module-sponsor_product_public #MetaTable tbody,
body.module-shop_public #MetaTable tbody,
body.module-webshop_public #MetaTable tbody {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
}

/* Elke <tr> wordt ??n ?tile? */
body.module-sponsor_product_public #MetaTable tbody tr,
body.module-shop_public #MetaTable tbody tr,
body.module-webshop_public #MetaTable tbody tr {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  flex: 0 0 100%;
}

@media (min-width: 576px) {
  body.module-sponsor_product_public #MetaTable tbody tr,
  body.module-shop_public #MetaTable tbody tr,
  body.module-webshop_public #MetaTable tbody tr {
    flex: 0 0 calc(50% - 1.25rem);
  }
}

@media (min-width: 768px) {
  body.module-sponsor_product_public #MetaTable tbody tr,
  body.module-shop_public #MetaTable tbody tr,
  body.module-webshop_public #MetaTable tbody tr {
    flex: 0 0 calc(33.333% - 1.25rem);
  }
}

@media (min-width: 1200px) {
  body.module-sponsor_product_public #MetaTable tbody tr,
  body.module-shop_public #MetaTable tbody tr,
  body.module-webshop_public #MetaTable tbody tr {
    flex: 0 0 calc(25% - 1.25rem);
  }
}

/* Table-cellen voor cards */
body.module-sponsor_product_public #MetaTable tbody tr td,
body.module-shop_public #MetaTable tbody tr td,
body.module-webshop_public #MetaTable tbody tr td {
  padding: 0;
  border: 0;
}

/* De kaart-cel die je JS maakt */
body.module-sponsor_product_public #MetaTable td.sponsor-card-cell,
body.module-shop_public #MetaTable td.sponsor-card-cell,
body.module-webshop_public #MetaTable td.sponsor-card-cell {
  display: block !important;
}

body.module-sponsor_product_public #MetaTable td.sponsor-card-cell,
body.module-shop_public #MetaTable td.sponsor-card-cell,
body.module-webshop_public #MetaTable td.sponsor-card-cell {
  display: flex;
  justify-content: center;
}

/* ====================================================================
   SPONSOR_PRODUCT (ADMIN) ? zelfde grid als public
   ==================================================================== */

body.meta-page.module-sponsor_product #MetaTable {
  border-collapse: separate;
  border-spacing: 0;
}

/* Header weg; info zit op de kaart */
body.meta-page.module-sponsor_product #MetaTable thead {
  display: none;
}

/* Tbody als flex-grid container */
body.meta-page.module-sponsor_product #MetaTable tbody {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: flex-start;
}

/* Elke <tr> wordt ??n ?tile? */
body.meta-page.module-sponsor_product #MetaTable tbody tr {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Breedtes per breakpoint (zelfde als public) */
body.meta-page.module-sponsor_product #MetaTable tbody tr {
  flex: 0 0 100%;
}

@media (min-width: 576px) {
  body.meta-page.module-sponsor_product #MetaTable tbody tr {
    flex: 0 0 calc(50% - 1.25rem);
  }
}

@media (min-width: 768px) {
  body.meta-page.module-sponsor_product #MetaTable tbody tr {
    flex: 0 0 calc(33.333% - 1.25rem);
  }
}

@media (min-width: 1200px) {
  body.meta-page.module-sponsor_product #MetaTable tbody tr {
    flex: 0 0 calc(25% - 1.25rem); /* 4 per rij */
  }
}

/* Table-cellen voor cards */
body.meta-page.module-sponsor_product #MetaTable tbody tr td {
  padding: 0;
  border: 0;
}

/* Nieuwe kaart-cel */
body.meta-page.module-sponsor_product #MetaTable td.sponsor-card-cell {
  display: block !important;
}

/* Originele data/actie-cellen die we in JS verstoppen */
body.meta-page.module-sponsor_product #MetaTable td.sp-admin-hidden-cell {
  display: none !important;
}



/* ====================================================================
   SPONSOR_PRODUCT_WEBSHOP (ADMIN) ? zelfde grid als sponsor_product
   ==================================================================== */

/* ====================================================================
   SPONSOR_PRODUCT_WEBSHOP + SPONSOR_PRODUCT_TICKET (ADMIN)
   ? zelfde grid/card layout
   ==================================================================== */

body.meta-page.module-sponsor_product_webshop #MetaTable,
body.meta-page.module-sponsor_product_ticket #MetaTable {
  border-collapse: separate;
  border-spacing: 0;
}

/* Header weg; info zit op de kaart */
body.meta-page.module-sponsor_product_webshop #MetaTable thead,
body.meta-page.module-sponsor_product_ticket #MetaTable thead {
  display: none;
}

/* Tbody als flex-grid container */
body.meta-page.module-sponsor_product_webshop #MetaTable tbody,
body.meta-page.module-sponsor_product_ticket #MetaTable tbody {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: flex-start;
}

/* Elke <tr> wordt ??n ?tile? */
body.meta-page.module-sponsor_product_webshop #MetaTable tbody tr,
body.meta-page.module-sponsor_product_ticket #MetaTable tbody tr {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  flex: 0 0 100%;
}

@media (min-width: 576px) {
  body.meta-page.module-sponsor_product_webshop #MetaTable tbody tr,
  body.meta-page.module-sponsor_product_ticket #MetaTable tbody tr {
    flex: 0 0 calc(50% - 1.25rem);
  }
}

@media (min-width: 768px) {
  body.meta-page.module-sponsor_product_webshop #MetaTable tbody tr,
  body.meta-page.module-sponsor_product_ticket #MetaTable tbody tr {
    flex: 0 0 calc(33.333% - 1.25rem);
  }
}

@media (min-width: 1200px) {
  body.meta-page.module-sponsor_product_webshop #MetaTable tbody tr,
  body.meta-page.module-sponsor_product_ticket #MetaTable tbody tr {
    flex: 0 0 calc(25% - 1.25rem);
  }
}

/* Table-cellen voor cards */
body.meta-page.module-sponsor_product_webshop #MetaTable tbody tr td,
body.meta-page.module-sponsor_product_ticket #MetaTable tbody tr td {
  padding: 0;
  border: 0;
}

/* Nieuwe kaart-cel */
body.meta-page.module-sponsor_product_webshop #MetaTable td.sponsor-card-cell,
body.meta-page.module-sponsor_product_ticket #MetaTable td.sponsor-card-cell {
  display: block !important;
}

/* Originele data/actie-cellen die we in JS verstoppen */
body.meta-page.module-sponsor_product_webshop #MetaTable td.sp-admin-hidden-cell,
body.meta-page.module-sponsor_product_ticket #MetaTable td.sp-admin-hidden-cell {
  display: none !important;
}

/* ============================================================
   SPONSOR PRODUCT MODAL ? Premium Styling
   ============================================================ */


/* Top-sponsors balk compacter maken in INFO + CHECKOUT + LEAD */
#sponsorProductInfoModal .top-sponsors,
#shopCheckoutModal .top-sponsors,
#spLeadModal .top-sponsors{
  background: transparent !important;
  padding: 0;
  margin-bottom: .35rem;
}

#sponsorProductInfoModal .top-sponsors-inner,
#shopCheckoutModal .top-sponsors-inner,
#spLeadModal .top-sponsors-inner{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

#sponsorProductInfoModal .top-sponsor,
#shopCheckoutModal .top-sponsor,
#spLeadModal .top-sponsor{
  padding: 0;
  background: transparent;
  box-shadow: none;
}

#sponsorProductInfoModal .top-sponsor-logo,
#shopCheckoutModal .top-sponsor-logo,
#spLeadModal .top-sponsor-logo{
  max-height: 38px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.12));
}


/* Titel in modal header */
#sponsorProductInfoModal .modal-title {
  color: var(--ui-brand);
  font-weight: 700;
  font-size: 1.25rem;
}


#sponsorProductInfoModal .modal-content {
  border-radius: 22px;
  background: var(--ui-card);
  box-shadow:
    0 18px 48px rgba(15,23,42,.18),
    0 4px 12px rgba(15,23,42,.08);
  overflow: hidden;
}

#sponsorProductInfoModal .modal-header,
#sponsorProductInfoModal .modal-body,
#sponsorProductInfoModal .modal-footer {
  text-align: center;
}

/* Titel */
#sponsorProductInfoModal h5.modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ui-brand);
  margin-bottom: 0;
}

/* Productnaam onder de afbeelding */
#spInfoName {
  font-weight: 800;
  font-size: 1.45rem;
  color: var(--ui-brand);
  text-align: center;
}

/* Prijs + squad */
#spInfoSummary {
  font-size: 1rem;
  color: var(--ui-muted);
  margin-bottom: .25rem;
}

/* 3D IMAGE WRAP */
#spInfoImageWrap {
  margin: 1rem auto 1.4rem;
}

#spInfoImage {
  border-radius: 22px;
  box-shadow:
    0 14px 32px rgba(15,23,42,.18),
    0 3px 8px rgba(15,23,42,.08);
  background-size: cover !important;
  background-position: center !important;
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease;
}

#spInfoImage:hover {
  transform: translateY(-6px);
  box-shadow:
    0 22px 46px rgba(15,23,42,.25),
    0 8px 14px rgba(15,23,42,.10);
}

/* Omschrijving */
#spInfoDesc {
  font-size: 1.05rem;
  color: var(--ui-text);
  margin-bottom: 1.1rem;
  line-height: 1.55;
  text-align: center;
}

/* Sektion-titles */
#sponsorProductInfoModal h5,
#sponsorProductInfoModal h4 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 1.25rem 0 .5rem;
  color: var(--ui-brand);
}

/* Bulletlist (tegenprestaties) met CHECKMARKS */
#spInfoFavours {
  list-style: none;
  padding-left: 0;
  margin: 0 auto 1.4rem;
  max-width: 420px;
  text-align: left;
}

#spInfoFavours li {
  position: relative;
  padding-left: 28px;
  margin: .4rem 0;
  font-size: 1rem;
  color: var(--ui-text);
}

#spInfoFavours li::before {
  content: "?";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--ui-brand);
  font-size: 1.1rem;
}

/* Business club leden */
#spInfoBusinessClub {
  margin-top: 1.25rem;
  font-size: .9rem;
  color: var(--ui-muted);
}

#spInfoBusinessClub a {
  color: var(--ui-brand);
  font-weight: 600;
  text-decoration: none;
}

#spInfoBusinessClub a:hover {
  text-decoration: underline;
}

/* Footer button */
#sponsorProductInfoModal .modal-footer button {
  font-size: 1rem;
  padding: .55rem 1.25rem;
  border-radius: 10px;
}


/* Sponsor product modal slider */

.sp-slider {
  position: relative;
}

.sp-slider-viewport {
  border-radius: 18px;
  overflow: hidden;
}

.sp-slider-images {
  position: relative;
  width: 100%;
  padding-top: 56%; /* 16:9, net als je oude div */
  background: #eee;
}

.sp-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}

.sp-slide.is-active {
  opacity: 1;
}

.sp-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: color-mix(in srgb, var(--ui-brand) 85%, transparent) !important;
  color: var(--ui-on-brand);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.sp-slider-arrow--prev { left: 8px; }
.sp-slider-arrow--next { right: 8px; }

.sp-slider-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}

.sp-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
}

.sp-slider-dot.is-active {
  background: var(--ui-card);
}

/* Als er maar 1 afbeelding is ? pijlen verstoppen */
.sp-slider--single .sp-slider-arrow {
  display: none;
}


/* Shared skin voor info + checkout modal */
.sp-product-modal{
  border-radius: 22px;
  background: var(--ui-card);
  box-shadow:
    0 18px 48px rgba(15,23,42,.18),
    0 4px 12px rgba(15,23,42,.08);
  overflow: hidden;
}

/* Centeren zoals info modal */
#shopCheckoutModal .modal-header,
#shopCheckoutModal .modal-body,
#shopCheckoutModal .modal-footer{
  text-align:center;
}

#shopCheckoutModal .modal-title{
  color: var(--ui-brand);
  font-weight: 700;
  font-size: 1.25rem;
}

#checkoutName{
  font-weight: 800;
  font-size: 1.45rem;
  color: var(--ui-brand);
  text-align: center;
}

#checkoutSummary{
  font-size: 1rem;
  color: var(--ui-muted);
  margin-bottom: .25rem;
}

/* Blokken (gender/maat) net als je ?Wat krijg je terug?? sectie */
#shopCheckoutModal h5{
  font-size: 1.15rem;
  font-weight: 700;
  margin: 1.25rem 0 .5rem;
  color: var(--ui-brand);
}

/* Choice buttons row */
.sp-choice-row{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}

/* ============================================================
   Checkout choice buttons ? intu?tiever states
   Default = neutraal
   Checked = brand filled
   ============================================================ */

.sp-choice-btn{
  border-radius: 999px;
  padding: .55rem 1.15rem;
  font-weight: 700;

  background: var(--ui-card) !important;
  color: var(--ui-text) !important;
  border: 1.5px solid color-mix(in srgb, var(--ui-brand) 28%, #cbd5e1) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.06);
  transition:
    background-color .16s ease,
    color .16s ease,
    border-color .16s ease,
    transform .12s ease,
    box-shadow .16s ease;
}

.sp-choice-btn:hover{
  background: rgba(var(--brand-rgb), .06) !important;
  border-color: color-mix(in srgb, var(--ui-brand) 55%, #cbd5e1) !important;
  color: var(--ui-brand) !important;
  transform: translateY(-1px);
}

.btn-check:focus + .sp-choice-btn{
  box-shadow:
    0 0 0 3px rgba(var(--brand-rgb), .18),
    0 2px 8px rgba(15,23,42,.08);
}

/* Actief = duidelijk gevuld */
.btn-check:checked + .sp-choice-btn{
  background: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  color: var(--ui-on-brand) !important;
  box-shadow: 0 8px 18px rgba(var(--brand-rgb), .28);
  transform: translateY(-1px);
}

/* Disabled varianten, bv maat uitverkocht */
.btn-check:disabled + .sp-choice-btn{
  background: #f8fafc !important;
  color: #94a3b8 !important;
  border-color: #e2e8f0 !important;
  box-shadow: none;
  opacity: .72;
  cursor: not-allowed;
}





/* ============================================================
   Public sponsor lead modal ? unified clean styling
   ============================================================ */

#spLeadModal .modal-content.sp-lead-modal {
  border-radius: 22px;
  background: var(--ui-card);
  box-shadow:
    0 18px 48px rgba(15,23,42,.18),
    0 4px 12px rgba(15,23,42,.08);
  overflow: hidden;
}

/* Top-sponsors header (zelfde als info-modal) */
#spLeadModal .top-sponsors {
  background: transparent !important;
  padding: 0;
  margin-bottom: .35rem;
}
#spLeadModal .top-sponsors-inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}
#spLeadModal .top-sponsor {
  padding: 0;
  background: transparent;
  box-shadow: none;
}
#spLeadModal .top-sponsor-logo {
  max-height: 34px;
  max-width: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.12));
}

/* Titel + subtitel */
#spLeadModal .modal-title {
  color: var(--ui-brand);
  font-weight: 700;
  font-size: 1.25rem;
  text-align: center;
}

.sp-lead-product-summary {
  font-family: "Montserrat", sans-serif;
  text-align: center;
}

.sp-lead-product-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ui-brand);
}

/* Form wrapper */
.sp-lead-form {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Elke form-group netjes onder elkaar */
.sp-lead-form-group {
  margin-bottom: 1rem;
  text-align: left;
}

/* Labels altijd boven de velden */
#spLeadModal .form-label {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .35rem;
  color: var(--ui-text, #111827);
}

/* Inputs / textarea modern styling */
#spLeadModal .form-control {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: .95rem;
  padding: .55rem .75rem;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease;
}

#spLeadModal .form-control::placeholder {
  color: #9ca3af;
}

#spLeadModal .form-control:focus {
  background: var(--ui-card);
  border-color: color-mix(in srgb, var(--ui-brand) 90%, #ffffff 10%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-brand) 25%, transparent);
  outline: none;
}

#spLeadModal textarea.form-control {
  min-height: 110px;
  resize: vertical;
}

/* Disclaimer */
.sp-lead-disclaimer {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  color: var(--ui-muted);
}

/* Footer buttons */
#spLeadModal .modal-footer .btn {
  border-radius: 999px;
  padding: .55rem 1.35rem;
  font-size: .95rem;
}

#spLeadSubmit.btn-brand {
  min-width: 160px;
}


/* ====================================================================
   SPONSORS_PUBLIC ? GRID VIEW (zelfde layout als sponsor_product_public)
   ==================================================================== */

body.module-sponsors_public #MetaTable {
  border-collapse: separate;
  border-spacing: 0;
}

/* Header weg; info zit in de kaart */
body.module-sponsors_public #MetaTable thead {
  display: none;
}

/* Tbody als flex-grid container */
body.module-sponsors_public #MetaTable tbody {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: flex-start;
}

/* Elke <tr> = ??n tile */
body.module-sponsors_public #MetaTable tbody tr {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Breedtes per breakpoint (zelfde als products) */
body.module-sponsors_public #MetaTable tbody tr {
  flex: 0 0 100%;
}

@media (min-width: 576px) {
  body.module-sponsors_public #MetaTable tbody tr {
    flex: 0 0 calc(50% - 1.25rem);
  }
}

@media (min-width: 768px) {
  body.module-sponsors_public #MetaTable tbody tr {
    flex: 0 0 calc(33.333% - 1.25rem);
  }
}

@media (min-width: 1200px) {
  body.module-sponsors_public #MetaTable tbody tr {
    flex: 0 0 calc(25% - 1.25rem); /* 4 per rij */
  }
}

body.module-sponsors_public #MetaTable tbody tr td {
  padding: 0;
  border: 0;
}

body.module-sponsors_public #MetaTable td.sponsor-card-cell {
  display: block !important;
}

/* ====================================================================
   Sponsor card ? logo header + rode label
   ==================================================================== */

.sponsor-card {
  /* zelfde look & feel als event/sponsor-product cards */
}

.sponsor-card__media {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f9fafb;
  min-height: 180px; /* hoogte van het ?plaatje?-deel */
}

/* Rode label linksboven over de afbeelding (tekst komt uit Sponsor_type_name) */
.sponsor-card__pill {
  background-color: var(--ui-brand);
  color: var(--ui-on-brand);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  position: absolute;
  left: 0.85rem;
  top: 0.75rem;
}

/* Button onderin wat ronder en voller */
.sponsor-card .btn.btn-brand.btn-sm {
  border-radius: 999px;
  padding-inline: 1rem;
}
/* ===========================
   VIDEO HERO ? LANDING PAGE
   =========================== */

/* Basis: mobiele / tablet card */
.landing-hero {
  position: relative;
  margin: 1.5rem auto 2.5rem;
  max-width: 1200px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 26px 60px rgba(15,23,42,.34),
    0 10px 22px rgba(15,23,42,.18);
  background: #000; /* fallback als video niet laadt */
}

/* Videolaag */
.landing-hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* BELANGRIJK: altijd een minimale hoogte, anders zie je niets */
.landing-hero,
.landing-hero__video-wrap,
.landing-hero__video {
  min-height: 280px;
}

.landing-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);          /* luxe mini-zoom */
  filter: brightness(.78) saturate(1.05);
}

/* Overlay voor leesbaarheid van logo + tekst */
.landing-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.45) 0%,
      rgba(0,0,0,.35) 30%,
      rgba(0,0,0,.15) 65%,
      rgba(0,0,0,0)   100%
    );
}

/* Inhoud boven de video */
.landing-hero__inner {
  position: relative;
  z-index: 2;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;      /* mobiel: logos + tekst centreren */
  justify-content: center;
  text-align: center;
  padding: 1.75rem 1rem 2.25rem;
}

/* Logo-row (basis = mobiel/tablet) */
.landing-header-logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  margin-bottom: 0.75rem;
}

/* Veil-bubbeltje onder logo?s */
.landing-hero__text {
  margin-top: .25rem;
}

.hero-veil {
  display: inline-block;
  padding: .3rem .9rem;
  border-radius: .9rem;
  background: rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.35);
  color: #f9fafb;
  font-size: .9rem;
  font-weight: 600;
}

/* Logo-formattering (basis = tablet) */
.landing-logo-main {
  display: block;
  height: 110px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.45));
}

.landing-logo-side {
  display: block;
  height: 70px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.45));
  opacity: .95;
}

/* =======================
   MOBIEL
   ======================= */

@media (max-width: 576px) {
  .landing-hero {
    margin: 1.25rem 1rem 1.75rem;
    border-radius: 18px;
  }

  .landing-hero__inner {
    min-height: 260px;
    padding: 1.25rem 1rem 1.75rem;
  }

  .landing-header-logos-row {
    flex-direction: row;
    gap: 1.25rem;
  }

  .landing-logo-main {
    height: 80px;
  }

  .landing-logo-side {
    height: 44px;
  }

  .hero-veil {
    font-size: .8rem;
    padding: .25rem .7rem;
  }
}

/* =======================
   TABLET
   ======================= */

@media (min-width: 577px) and (max-width: 991.98px) {
  .landing-hero__inner {
    min-height: 320px;
  }
}

/* =======================
   DESKTOP ? FULL WIDTH + MEER HEIGHT
   ======================= */

@media (min-width: 992px) {
  /* Hero over hele breedte scherm */
  .landing-hero {
    max-width: none;
    width: 100%;
    margin: 0 0 3.5rem;
    border-radius: 0 0 36px 36px;   /* onderkant nog lekker rond */
    box-shadow:
      0 32px 70px rgba(15,23,42,.35),
      0 14px 28px rgba(15,23,42,.20);
  }

  /* Hogere hero / video op desktop */
  .landing-hero,
  .landing-hero__video-wrap,
  .landing-hero__video {
    min-height: 520px;
    height: 520px;
  }

  /* Logo?s duidelijk naar boven in de video */
  .landing-hero__inner {
    align-items: center;
    justify-content: flex-start;      /* niet meer verticaal gecentreerd */
    text-align: center;
    padding-top: 3.75rem;
    padding-bottom: 2.5rem;
    padding-inline: clamp(2rem, 6vw, 5rem);
  }

  .landing-header-logos-row {
    justify-content: center;
    gap: 3rem;
    margin-bottom: 1.25rem;
  }

  .landing-logo-main {
    height: 130px;
  }

  .landing-logo-side {
    height: 80px;
  }

  .hero-veil {
    font-size: .9rem;
    padding: .35rem 1rem;
  }
}
/* =============================================================================
   PREMIUM 3D BRAND HEADER (MATCHT JE UI)
============================================================================= */

header#l2sHeader {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--ui-card);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .07);
}
/* De merk-underline (::after) is geretireerd: de topbar is nu een schone kaart (op desktop zwevend, net
   als de rail) en het merk staat in de rail. Een rechte gekleurde onderrand paste niet meer op de kaart. */

/* Typography ? zwart, zoals origineel */
#l2sHeader .navbar-brand,
#l2sHeader .nav-link,
#l2sHeader .navbar-text,
#l2sHeader i {
  color: var(--ui-text) !important;
}

/* Hover: subtiel */
#l2sHeader .nav-link:hover {
  color: var(--ui-brand) !important;
}

/* Toggler (mobile) */
#l2sHeader .navbar-toggler {
  border-color: rgba(0,0,0,.15);
  /* Bootstrap's eigen maat gaf 40px hoog — net onder de comfort-norm, en dit is de knop waarmee je
     op élke pagina het menu opent (browsercheck 22-09). Aan het token gekoppeld, dus sport houdt
     z'n eigen, bewust lagere maat. */
  min-height: var(--ui-target-sm, 44px);
}
#l2sHeader .navbar-toggler-icon {
  filter: brightness(0);
}

/* Logout button opnieuw wit-stijl */
#l2sHeader #btnLogout {
  border-color: var(--ui-danger);
  color: var(--ui-danger);
}
#l2sHeader #btnLogout:hover {
  background: rgba(var(--fab-back-rgb), .12);
}

/* Prevent overflow of menu items */
#l2sNav .navbar-nav {
  flex-wrap: wrap;
}

/* =============================================================================
   HEADER V2 — logo-als-home + hub-navigatie (owner 2026-07-23)
   Brand = home-knop (→ landing-page); nav = alleen hub-menu's als pills.
============================================================================= */
#l2sHeader .navbar { padding-top: .55rem; padding-bottom: .55rem; }

/* --- Merk/logo als home-knop --- */
#l2sHeader .l2s-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .2rem .35rem;
  border-radius: 12px;
  text-decoration: none;
  transition: transform .15s ease, background-color .15s ease;
}
#l2sHeader .l2s-brand:hover { background: rgba(var(--brand-rgb, 210,35,42), .07); transform: translateY(-1px); }
#l2sHeader .l2s-brand:focus-visible { outline: 2px solid var(--ui-brand); outline-offset: 2px; }
#l2sHeader .l2s-brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  color: var(--ui-on-brand) !important;
  font-size: 1.05rem;
  background: linear-gradient(135deg,
      var(--ui-brand) 0%,
      color-mix(in srgb, var(--ui-brand) 65%, #000) 100%);
  box-shadow:
      0 2px 6px rgba(var(--brand-rgb, 210,35,42), .35),
      inset 0 1px 0 rgba(255,255,255,.25);
}
#l2sHeader .l2s-brand__mark i { color: var(--ui-on-brand) !important; }
#l2sHeader .l2s-brand__word {
  font-weight: 800;
  letter-spacing: -.01em;
  font-size: 1.12rem;
  line-height: 1;
  /* Verloop op de tekstkleur i.p.v. een vaste #111 — anders is het merk in sport-modus donker
     op donker (owner 2026-08-17). */
  background: linear-gradient(90deg, var(--ui-text), color-mix(in srgb, var(--ui-brand) 80%, var(--ui-text)));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* --- Hub-navigatie (pills) --- */
#l2sHeader .l2s-hubnav { gap: .35rem; align-items: center; margin-left: .5rem; }
#l2sHeader .l2s-hublink {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem !important;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  color: #1f2530 !important;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#l2sHeader .l2s-hublink i { font-size: 1rem; opacity: .85; }
#l2sHeader .l2s-hublink:hover {
  background: rgba(var(--brand-rgb, 210,35,42), .10);
  border-color: rgba(var(--brand-rgb, 210,35,42), .25);
  color: var(--ui-brand) !important;
}
#l2sHeader .l2s-hublink:hover i { opacity: 1; }
#l2sHeader .l2s-hublink:focus-visible { outline: 2px solid var(--ui-brand); outline-offset: 2px; }

@media (max-width: 991.98px) {
  #l2sHeader .l2s-hubnav { gap: .1rem; margin-left: 0; }
  #l2sHeader .l2s-hublink { width: 100%; justify-content: flex-start; }
}

/* Userbar rechtsboven (website · meldingen · hulp · instellingen · welkom · uitloggen).
   REGEL (§8): een icoon draagt ALTIJD zijn woord — een 🔔 zonder label is raden voor de
   doelgroep. Past het niet? Dan scrollt de balk horizontaal; labels verbergen doen we niet. */
/* GEEN overflow op deze balk: een uitklapmenu (Hulp/Meldingen) binnen een scroll-container wordt
   geklipt en lijkt dan niet te openen (bug 2026-08-14). Past het niet? Dan breekt de balk netjes
   af naar een tweede regel — labels verbergen doen we niet (§8). */
#l2sHeader .l2s-userbar { max-width: 100%; flex-wrap: wrap; justify-content: flex-end; row-gap: .4rem; }

/* MOBIEL (owner 2026-08-16): vijf knoppen mét woord passen niet op 390px — dan brak de balk naar
   twee regels en dat oogde rommelig. Op een telefoon horen Website/Meldingen/Hulp/Instellingen
   in het "Meer"-menu van de tabbar (daar is wél ruimte voor woorden, in duimbereik); de header
   houdt alleen het merk en Uitloggen. Labels verbergen doen we dus NIET — we verplaatsen ze. */
@media (max-width: 767.98px) {
  #l2sHeader .l2s-userbar > li:not(.l2s-userbar__always) { display: none; }
  #l2sHeader .l2s-userbar { flex-wrap: nowrap; row-gap: 0; }
}
/* KNOP-LOOK VAN DE HEADER — één bron voor élke pagina (owner 2026-08-17).
   Aanleiding: de header zag er per module ánders uit. communication.css definieert een KALE `.btn`
   (0,1,0) en laadt als laatste, dus die won van Bootstrap's `.btn-sm`/`.btn-outline-danger` binnen
   de gedeelde header — witte pillen op de ene pagina, Bootstrap-defaults op de andere, en Uitloggen
   verloor daar z'n rood. De owner vond die module-look het mooist, dus die is hier opgetild naar de
   PLATFORM-chrome: witte pil, haarlijn-rand, ruimer dan `btn-sm`.
   De selector is bewust `#l2sHeader .l2s-userbar .btn` (id + 2 classes): dat wint van élke module-CSS
   die later laadt, ongeacht volgorde — de header is dus overal identiek, zonder dat een module iets
   hoeft aan te passen. Maten blijven op de comfort-tokens (≥15px tekst, ≥44px raakvlak, §8). */
#l2sHeader .l2s-userbar .btn {
  min-height: var(--ui-target-sm, 44px);
  min-width: var(--ui-target-sm, 44px);   /* ook in de breedte een duim-doel (WCAG 2.2 AAA) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem .9rem;
  font-size: var(--ui-fs-sm, 15px);
  font-weight: 600;
  white-space: nowrap;
  background: var(--ui-card);
  border: .5px solid var(--ui-border);
  border-radius: 12px;
  color: var(--ui-text);
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}
#l2sHeader .l2s-userbar .btn:hover {
  background: var(--ui-bg);
  border-color: var(--ui-muted);
  color: var(--ui-text);
}
/* Uitloggen houdt z'n rode signaal — wél in dezelfde vormtaal (§8: een onomkeerbare actie blijft
   herkenbaar). Het icoon laten we met rust: dat volgt de bestaande header-icoonregel. */
#l2sHeader .l2s-userbar .btn-outline-danger,
#l2sHeader .l2s-userbar .btn-outline-danger:hover {
  color: var(--ui-danger);
  border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border));
}
#l2sHeader .l2s-userbar .btn-outline-danger:hover {
  background: color-mix(in srgb, var(--ui-danger) 8%, var(--ui-card));
  border-color: var(--ui-danger);
}
/* Sport-modus schakelt de RAIL — dus alleen tonen waar een rail staat (app-sidebar.php zet
   `has-l2sb` op de body). Zonder rail zou de knop niets doen, en dat is erger dan geen knop. */
#l2sHeader .l2s-userbar__sport { display: none; }
body.has-l2sb #l2sHeader .l2s-userbar__sport { display: block; }
#l2sHeader .l2s-userbar .btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--ui-brand) 12%, var(--ui-card));
  border-color: var(--ui-brand);
  color: var(--ui-brand);
}
#l2sHeader .l2s-userbar .navbar-text { font-size: var(--ui-fs-sm, 15px); white-space: nowrap; }
#l2sHeader .l2s-userbar__rol {
  display: inline-block;
  margin-left: .45rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, .06);
  color: var(--ui-muted-strong);
  font-size: var(--ui-fs-label, 15px);
  font-weight: 700;
}
#l2sHeader .l2s-userbar .dropdown-item { min-height: var(--ui-target, 48px); display: flex; align-items: center; font-size: var(--ui-fs-base, 16px); }
#l2sHeader .l2s-userbar .btn:focus-visible { outline: 2px solid var(--ui-brand); outline-offset: 2px; }

/* =============================================================================
   UITSLAGEN, PROGRAMMA, STAND
============================================================================= */

/* Highlight eigen team in de stand */
.table-row--own-team {
  background: rgba(var(--brand-rgb, 210,35,42), .06) !important;
  border-top: 1px solid rgba(var(--brand-rgb, 210,35,42), .45) !important;
  border-bottom: 1px solid rgba(var(--brand-rgb, 210,35,42), .45) !important;
  font-weight: 600;
}


/* ============================================================================
   Players & Trainers ? FIFA cards (public + admin CRUD)
   ========================================================================== */

/* GRID / TABLE WRAP
   ----------------- */

body.public-read.module-players_public .table-wrap,
body.meta-page.module-players .table-wrap,
body.meta-page.module-trainers .table-wrap {
  /* geen horizontale scroll, we doen een flex-grid */
}

body.public-read.module-players_public .table-cards,
body.meta-page.module-players .table-cards,
body.meta-page.module-trainers .table-cards {
  border-collapse: separate;
  border-spacing: 0;
}

body.public-read.module-players_public .table-cards thead,
body.meta-page.module-players .table-cards thead,
body.meta-page.module-trainers .table-cards thead {
  display: none; /* kop is niet nodig voor kaarten */
}

body.public-read.module-players_public .table-cards tbody,
body.meta-page.module-players .table-cards tbody,
body.meta-page.module-trainers .table-cards tbody {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* kaartenblok centreren */
  gap: 1.25rem;
}

/* ?? tr zelf is nu een flex-item EN flex-container
      zodat de kaart in het midden staat, ook op mobiel */
body.public-read.module-players_public .table-cards tr,
body.meta-page.module-players .table-cards tr,
body.meta-page.module-trainers .table-cards tr {
  display: flex;
  justify-content: center;   /* kaart in het midden van de kolom */
  border: 0;
  padding: 0;
  flex: 1 1 100%;
}

/* Elke rij is 1 kaart-kolom */
body.public-read.module-players_public .table-cards td,
body.meta-page.module-players .table-cards td,
body.meta-page.module-trainers .table-cards td {
  border: 0;
  padding: 0;
}

/* Responsive kolommen:
   - xs: 1 per rij
   - sm: 2 per rij
   - md: 3 per rij
   - lg: 4 per rij
   - xl+: 5 per rij (20%)
*/
@media (min-width: 576px) {
  body.public-read.module-players_public .table-cards tr,
  body.meta-page.module-players .table-cards tr,
  body.meta-page.module-trainers .table-cards tr {
    flex: 1 1 calc(50% - 1.25rem);
  }
}

@media (min-width: 768px) {
  body.public-read.module-players_public .table-cards tr,
  body.meta-page.module-players .table-cards tr,
  body.meta-page.module-trainers .table-cards tr {
    flex: 1 1 calc(33.333% - 1.25rem);
  }
}

@media (min-width: 992px) {
  body.public-read.module-players_public .table-cards tr,
  body.meta-page.module-players .table-cards tr,
  body.meta-page.module-trainers .table-cards tr {
    flex: 1 1 calc(25% - 1.25rem);
  }
}

@media (min-width: 1400px) {
  body.public-read.module-players_public .table-cards tr,
  body.meta-page.module-players .table-cards tr,
  body.meta-page.module-trainers .table-cards tr {
    flex: 1 1 calc(20% - 1.25rem); /* max 5 per rij */
  }
}

/* In CRUD verstoppen we de oude cellen (maar laten ze in de DOM) */
body.meta-page.module-players .player-row-hidden-cell,
body.meta-page.module-trainers .player-row-hidden-cell {
  display: none !important;
}

/* ---- card base ---- */

body.public-read.module-players_public .fifa-card,
body.public-read.module-squads_public .fifa-card,
body.meta-page.module-players .fifa-card,
body.meta-page.module-trainers .fifa-card {
  width: 310px;
  height: 470px;
  position: relative;
  overflow: hidden;
  border-radius: 26px;

  background: linear-gradient(180deg, #f7f7f7 0%, #d9d9d9 50%, #ececec 100%);
  background-image:
    radial-gradient(rgba(255,255,255,0.35) 1px, transparent 1px),
    linear-gradient(140deg, rgba(255,255,255,0.6), rgba(0,0,0,0.08));
  background-size: 5px 5px, 100% 100%;

  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.55);

  clip-path: path(
    "M20 0 H290 Q310 0 310 20 V360 Q310 400 190 470 Q155 490 120 470 Q0 400 0 360 V20 Q0 0 20 0 Z"
  );
}

/* ---- Header ---- */

body.public-read.module-players_public .fifa-card .rating,
body.public-read.module-squads_public .fifa-card .rating,
body.meta-page.module-players .fifa-card .rating,
body.meta-page.module-trainers .fifa-card .rating {
  position: absolute;
  top: 28px;
  left: 28px;
  font-size: 42px;
  font-weight: 900;
  color: #4a4217;
}

body.public-read.module-players_public .fifa-card .position,
body.public-read.module-squads_public .fifa-card .position,
body.meta-page.module-players .fifa-card .position,
body.meta-page.module-trainers .fifa-card .position {
  position: absolute;
  top: 78px;
  left: 32px;
  font-size: 24px;
  font-weight: 700;
  color: #4a4217;
}

body.public-read.module-players_public .fifa-card .flag,
body.public-read.module-squads_public .fifa-card .flag,
body.meta-page.module-players .fifa-card .flag,
body.meta-page.module-trainers .fifa-card .flag {
  position: absolute;
  top: 30px;
  right: 43px;
  width: 44px;
}

/* ---- Photo + circle ---- */

body.public-read.module-players_public .fifa-card .photo-wrapper,
body.public-read.module-squads_public .fifa-card .photo-wrapper,
body.meta-page.module-players .fifa-card .photo-wrapper,
body.meta-page.module-trainers .fifa-card .photo-wrapper {
  position: absolute;
  left: calc(50% - 7px);
  top: 105px;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  pointer-events: none;
}

body.public-read.module-players_public .fifa-card .photo-bg,
body.public-read.module-squads_public .fifa-card .photo-bg,
body.meta-page.module-players .fifa-card .photo-bg,
body.meta-page.module-trainers .fifa-card .photo-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid var(--ui-brand, #d40000);
  box-shadow: 0 8px 18px rgba(0,0,0,0.3);
  background: radial-gradient(circle at 30% 20%, #ffffff, #d7d7d7);
}

body.public-read.module-players_public .fifa-card .player-img,
body.public-read.module-squads_public .fifa-card .player-img,
body.meta-page.module-players .fifa-card .player-img,
body.meta-page.module-trainers .fifa-card .player-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: auto;
  object-fit: contain;
}

/* ---- Info blok ---- */

body.public-read.module-players_public .fifa-card .info,
body.public-read.module-squads_public .fifa-card .info,
body.meta-page.module-players .fifa-card .info,
body.meta-page.module-trainers .fifa-card .info {
  position: absolute;
  top: 275px;
  left: calc(50% - 7px);
  transform: translateX(-50%);
  text-align: center;
  color: #4a4217;
  width: 250px;
}

body.public-read.module-players_public .fifa-card .player-name,
body.public-read.module-squads_public .fifa-card .player-name,
body.meta-page.module-players .fifa-card .player-name,
body.meta-page.module-trainers .fifa-card .player-name {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

body.public-read.module-players_public .fifa-card .stats,
body.public-read.module-squads_public .fifa-card .stats,
body.meta-page.module-players .fifa-card .stats,
body.meta-page.module-trainers .fifa-card .stats {
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
}

/* ---- Admin actions onder de naam (alleen CRUD) ---- */

body.meta-page.module-players .fifa-card__actions,
body.meta-page.module-trainers .fifa-card__actions {
  margin-top: 0.6rem;
  display: flex;
  justify-content: center;
  gap: .5rem;
}

body.meta-page.module-players .fifa-card__actions .btn,
body.meta-page.module-trainers .fifa-card__actions .btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ============================================================================
   READ.PHP?MODULE=SQUADS_PUBLIC MAIN SPONSOR BANNER
   ========================================================================== */
/* ===========================================
   SQUADS_PUBLIC ? HEADER + SPONSOR BANNER
   =========================================== */

body.public-read.module-squads_public .squad-header-card {
  max-width: 1400px;
  margin: 0 auto 2rem;
  padding-inline: 0;
  border-radius: 0;
}

/* Titelblok boven de banner */
body.public-read.module-squads_public .header-info {
  text-align: center;
  margin-bottom: .75rem;
}

/* ---------------------------
   Hoofdsponsor-banner
   --------------------------- */

body.public-read.module-squads_public .header-main-sponsor-wrap {
  width: 100%;
}

body.public-read.module-squads_public .squad-main-sponsors {
  display: flex;
  flex-wrap: wrap;          /* NOOIT meer wegvallen */
  justify-content: center;
  align-items: center;
  gap: 1.8rem 2.4rem;
  background: #c62828;
  padding: 1.4rem 1rem;
  border-radius: 0;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* Elk item (link of div) */
body.public-read.module-squads_public .squad-main-sponsor-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Logo's zelf */
body.public-read.module-squads_public .squad-main-sponsor-logo {
  height: 60px !important;     /* basismaat */
  width: auto;
  object-fit: contain;
  display: block;
}

/* schaal bij veel sponsors (JS zet deze klassen) */
body.public-read.module-squads_public .squad-main-sponsors--md .squad-main-sponsor-logo {
  height: 54px !important;
}
body.public-read.module-squads_public .squad-main-sponsors--lg .squad-main-sponsor-logo {
  height: 48px !important;
}
body.public-read.module-squads_public .squad-main-sponsors--xlg .squad-main-sponsor-logo {
  height: 40px !important;
}

/* Tekstfallback (als er geen logo is) */
body.public-read.module-squads_public .squad-main-sponsor-text {
  color: var(--ui-on-brand);
  font-weight: 600;
  font-size: .9rem;
}

/* ========= MOBIEL: 3 per rij ========= */

@media (max-width: 768px) {
  body.public-read.module-squads_public .squad-main-sponsor-item {
    flex: 0 0 calc(33.33% - 1rem);  /* 3 per rij */
  }

  body.public-read.module-squads_public .squad-main-sponsor-logo {
    height: 42px !important;
  }

  body.public-read.module-squads_public .squad-main-sponsors {
    gap: 1rem 1.4rem;
    padding-inline: .75rem;
  }
}

/* ========= SLIDER FULL-WIDTH + RONDE ARROWS ========= */

body.public-read.module-squads_public .squad-slider {
  margin-top: 0;
  border-radius: 0;
  overflow: hidden;
}

body.public-read.module-squads_public .squad-slider .carousel-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* custom arrows in Nike-stijl */
body.public-read.module-squads_public .squad-slider-arrow {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 0;
  background: #c62828;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  top: 50%;
  transform: translateY(-50%);
}

body.public-read.module-squads_public .squad-slider-arrow .slider-arrow-icon {
  font-size: 1.4rem;
  color: var(--ui-on-brand);
  line-height: 1;
}

body.public-read.module-squads_public .carousel-control-prev.squad-slider-arrow {
  left: 1.5rem;
}
body.public-read.module-squads_public .carousel-control-next.squad-slider-arrow {
  right: 1.5rem;
}

@media (max-width: 768px) {
  body.public-read.module-squads_public .squad-slider-arrow {
    width: 40px;
    height: 40px;
  }
}


/* ============================================================
   RELATED MANAGERS BAR (MetaCrudModal) ? brand-ui + centered
   Targets: #relatedManagers bar in manage.php
============================================================ */

/* 1) Card header ook in brand feel (optioneel, maar matcht je UI) */
#MetaCrudModal #relatedManagers .card-header{
  background: linear-gradient(180deg, rgba(var(--brand-rgb), .06), #ffffff) !important;
  color: var(--ui-text) !important;
  border-bottom: 1px solid rgba(var(--brand-rgb), .22) !important;
  font-weight: 700;
}

/* 2) Button row centreren */
#MetaCrudModal #relatedManagers .card-body{
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;   /* <-- center */
  align-items: center;
  gap: .6rem !important;
}

/* 3) Shared button ?brand-ui? skin */
#MetaCrudModal #relatedManagers .btn{
  border-radius: 12px;
  font-weight: 700;
  padding: .55rem 1rem;          /* iets voller dan default btn-sm */
  line-height: 1.1;
  box-shadow: 0 2px 8px rgba(15,23,42,.08);
  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
}

#MetaCrudModal #relatedManagers .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(15,23,42,.12);
}

/* 4) Brand filled (= jouw ?blauwe? buttons) */
#MetaCrudModal #relatedManagers .btn.btn-primary{
  background: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  color: var(--ui-on-brand) !important;
  box-shadow: 0 6px 14px rgba(var(--brand-rgb), .25);
}

#MetaCrudModal #relatedManagers .btn.btn-primary:hover{
  filter: brightness(.96);
  box-shadow: 0 10px 20px rgba(var(--brand-rgb), .30);
}

/* 5) Brand outline (= jouw ?witte? buttons met border) */
#MetaCrudModal #relatedManagers .btn.btn-outline-primary{
  background: var(--ui-card) !important;
  color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  border-width: 1.5px;
}

#MetaCrudModal #relatedManagers .btn.btn-outline-primary:hover{
  background: rgba(var(--brand-rgb), .06) !important;
  color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
}

/* ?Pressed/active?: outline mag even filled worden */
#MetaCrudModal #relatedManagers .btn.btn-outline-primary:active,
#MetaCrudModal #relatedManagers .btn.btn-outline-primary.active{
  background: var(--ui-brand) !important;
  color: var(--ui-on-brand) !important;
  border-color: var(--ui-brand) !important;
  transform: translateY(0);
  box-shadow: 0 10px 18px rgba(var(--brand-rgb), .28);
}

/* 6) Mobile: buttons iets breder/leesbaarder */
@media (max-width: 576px){
  #MetaCrudModal #relatedManagers .btn{
    padding: .6rem 1.05rem;
    width: auto;
  }
}


/* ============================================================
   FINANCE STATS IN MANAGE FINANCE_SPONSORS
============================================================ */

.finance-stats {
  margin-top: 12px;
  margin-bottom: 10px;
}

.finance-stats .card-soft {
  background: var(--bs-body-bg);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding: 10px 14px;
  min-width: 160px;
  text-align: center;
}

.finance-stats .card-soft .label {
  font-size: .85rem;
  color: rgba(0,0,0,.55);
}

.finance-stats .card-soft .value {
  font-weight: 700;
  font-size: 1.15rem;
}




/* ============================================================
   THANK YOU PAGE ? KUNSTGRASVELD / JUBILEUMSHIRT
   ============================================================ */

.thanks-page .hero-veil strong{
  color: var(--ui-on-brand);
}

.thanks-shell{
  max-width: 1120px;
  margin: 0 auto;
}

.thanks-card{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 24px;
  box-shadow:
    0 18px 48px rgba(15,23,42,.12),
    0 6px 18px rgba(15,23,42,.06);
  padding: clamp(1.25rem, 2vw, 2rem);
}

.thanks-card + .thanks-card{
  margin-top: 1.5rem;
}

.thanks-kicker{
  display: inline-block;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), .10);
  color: var(--ui-brand);
  font-weight: 700;
  letter-spacing: .2px;
  margin-bottom: .9rem;
}

.thanks-title{
  font-weight: 800;
  margin-bottom: .75rem;
}

.thanks-lead{
  color: var(--ui-muted);
  font-size: 1.05rem;
  max-width: 760px;
  margin: 0 auto;
}

.thanks-metrics{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.thanks-metric{
  background: var(--ui-card);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
  text-align: center;
}

.thanks-metric__label{
  font-size: .9rem;
  color: var(--ui-muted);
  margin-bottom: .25rem;
}

.thanks-metric__value{
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ui-text);
}

.thanks-status{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  background: rgba(46, 204, 113, .12);
  color: #137333;
  font-weight: 700;
  margin-top: 1rem;
}

.thanks-status__dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 0 6px rgba(46, 204, 113, .14);
}

.thanks-story p{
  margin-bottom: 1rem;
  color: var(--ui-text);
}

.thanks-list{
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  display: grid;
  gap: .75rem;
}

.thanks-list li{
  background: var(--ui-card);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: .9rem 1rem;
  box-shadow: 0 6px 18px rgba(15,23,42,.05);
  font-weight: 600;
}

.thanks-partners{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.thanks-partner{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .9rem;
  background: var(--ui-card);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 20px;
  padding: 1.1rem;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  text-align: left;
  height: 100%;
}

.thanks-partner__name{
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ui-brand);
  margin-bottom: .35rem;
}

.thanks-partner__text{
  color: var(--ui-muted);
  font-size: .95rem;
  line-height: 1.5;
  margin: 0;
  overflow-wrap: anywhere;
}

.thanks-partner__link{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  color: var(--ui-brand);
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.thanks-partner__link:hover{
  text-decoration: underline;
}

.thanks-cta-row{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 1.5rem;
}

.thanks-note{
  color: var(--ui-muted);
  text-align: center;
  margin-top: 1rem;
}

body.thanks-page .landing-hero__overlay{
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.42) 0%,
      rgba(0,0,0,.52) 45%,
      rgba(0,0,0,.30) 100%
    );
}

@media (max-width: 991.98px){
  .thanks-metrics,
  .thanks-partners{
    grid-template-columns: 1fr;
  }
}


/* ============================================================================
   SHOP PUBLIC ? HERO + CART HEADER
============================================================================= */

.shop-cart-hero {
  margin-top: .25rem;
}

.shop-cart-hero__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem 1.25rem;
  background: var(--ui-card);
  border: 1px solid var(--ui-border, #e8ecf0);
  border-radius: 20px;
  box-shadow:
    0 10px 24px rgba(15,23,42,.08),
    0 2px 6px rgba(15,23,42,.04);
}

.shop-cart-hero__eyebrow {
  display: inline-block;
  margin-bottom: .35rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ui-brand);
}

.shop-cart-hero__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ui-brand);
}

.shop-cart-hero__text {
  color: var(--ui-muted, #64748b);
  max-width: 42rem;
}

.shop-cart-hero__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.shop-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 52px;
  padding: .7rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--brand-rgb), .20);
  background: var(--ui-card);
  color: var(--ui-brand);
  text-decoration: none;
  font-weight: 700;
  box-shadow:
    0 8px 18px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.8);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease;
}

.shop-cart-link:hover,
.shop-cart-link:focus {
  color: var(--ui-brand);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow:
    0 12px 22px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.85);
  background: rgba(var(--brand-rgb), .04);
  border-color: rgba(var(--brand-rgb), .35);
}

.shop-cart-link i {
  font-size: 1.25rem;
  line-height: 1;
}

.shop-cart-link__label {
  white-space: nowrap;
}

.shop-cart-badge {
  position: absolute;
  top: -6px;
  right: -2px;
  min-width: 22px;
  height: 22px;
  padding: 0 .35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-brand);
  color: var(--ui-on-brand);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 6px 12px rgba(15,23,42,.16);
}

.shop-cart-badge.is-bump {
  animation: shop-cart-bump .28s ease;
}

@keyframes shop-cart-bump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@media (max-width: 767.98px) {
  .shop-cart-hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .shop-cart-hero__actions {
    justify-content: center;
  }

  .shop-cart-link {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================================
   SHOP PUBLIC ? STICKY CART HEADER
============================================================================= */

#shopCartHero.sticky-top {
  top: var(--sticky-offset, 0px);
  z-index: 1025;
  background: transparent;
}

#shopCartHero .shop-cart-hero__inner {
  transition:
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

@supports (backdrop-filter: blur(8px)) {
  #shopCartHero.sticky-top {
    backdrop-filter: blur(8px);
  }

  #shopCartHero .shop-cart-hero__inner {
    background: rgba(255,255,255,.92);
  }
}

@media (max-width: 767.98px) {
  #shopCartHero.sticky-top {
    top: calc(var(--sticky-offset, 0px) + .25rem);
  }

  #shopCartHero .shop-cart-hero__inner {
    padding: .85rem 1rem;
    border-radius: 16px;
  }

  .shop-cart-hero__title {
    font-size: 1.2rem;
  }

  .shop-cart-hero__text {
    font-size: .95rem;
  }
}

/* ============================================================================
   SHOP CHECKOUT ? DETAILS SECTION
============================================================================= */

.checkout-details-section {
  margin-top: .75rem;
  padding: 1rem;
  border: 1px solid rgba(var(--brand-rgb), .12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow:
    0 8px 18px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.85);
}

.checkout-details-head h5 {
  color: var(--ui-brand);
  font-weight: 700;
}

.checkout-details-section.is-opening {
  animation: checkoutDetailsReveal .18s ease;
}

@keyframes checkoutDetailsReveal {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}





/* =========================================================
   Events ? communicatiebalk onder maandfilters
   ========================================================= */

.events-comm-toolbar {
  margin-top: 0.75rem;
}

.events-comm-toolbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
  padding: 0.75rem 1rem;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.125));
  border-radius: 0.75rem;
}

.events-comm-toolbar__label {
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  white-space: nowrap;
}

.events-comm-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.events-comm-toolbar__actions .btn {
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .events-comm-toolbar__row {
    align-items: stretch;
    justify-content: stretch;
  }

  .events-comm-toolbar__label {
    width: 100%;
    text-align: center;
  }

  .events-comm-toolbar__actions {
    width: 100%;
    flex-direction: column;
  }

  .events-comm-toolbar__actions .btn {
    width: 100%;
  }
}
/* ============================================================================
   AUTH: Setup 2FA
   Uses Bootstrap + brand variables from app-vars.css.php.
============================================================================ */
.setup-2fa-card {
  max-width: 860px;
  margin-inline: auto;
}

.setup-2fa-qr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 272px;
  min-height: 272px;
  padding: 1rem;
  background: var(--register-form-card-bg, #fff);
  border: 1px solid var(--ui-border, #e8ecf0);
  border-radius: var(--register-form-card-radius, 20px);
  box-shadow: var(--ui-shadow, 0 8px 22px rgba(15,23,42,.06));
}

.setup-2fa-qr img,
.setup-2fa-qr canvas,
.setup-2fa-qr svg {
  display: block;
  max-width: 240px;
  max-height: 240px;
}

.setup-2fa-secret {
  display: block;
  word-break: break-all;
  white-space: normal;
  padding: .9rem 1rem;
  border-radius: .75rem;
  border: 1px solid var(--ui-border, #e8ecf0);
  background: rgba(var(--brand-rgb, 13,110,253), .06);
  color: var(--ui-text, #0f172a);
  font-size: .95rem;
}

.setup-2fa-code {
  letter-spacing: .18em;
  font-weight: 700;
}

.btn-outline-brand {
  border-color: var(--ui-brand);
  color: var(--ui-brand);
  background: transparent;
}

.btn-outline-brand:hover,
.btn-outline-brand:focus {
  border-color: var(--ui-brand);
  background: var(--ui-brand);
  color: var(--ui-on-brand);
}

@media (max-width: 767.98px) {
  .setup-2fa-qr {
    min-width: 240px;
    min-height: 240px;
  }
}


/* ============================================================================
   MENU / LANDING HUB — clean slate cards (manage-aligned)
   Self-contained component for core/views/menu/landing-page.php (hoofd-landing
   + producten-hub). Themed via --ui-brand/--brand (per-tenant). Neutrale slate-
   literals spiegelen de products manage-v4 look. Raakt .card-feature* NIET.
   ========================================================================== */
/* De menu-tokens WIJZEN NAAR de basistokens i.p.v. eigen kleurwaarden te herhalen (2026-08-17).
   Ze waren een derde set naast --ui-* en --ink; daardoor bleef élke hub-titel donker in sport-modus
   terwijl de rest wél kantelde (owner). Waarden zijn identiek aan wat hier stond, dus licht
   verandert niet — maar er is nu één plek die de modus bepaalt. */
.l2s-menu {
  --l2s-menu-ink: var(--ui-text);
  --l2s-menu-muted: var(--ui-muted);
  --l2s-menu-muted-2: var(--ui-muted-strong);
  --l2s-menu-line: rgba(15, 23, 42, .10);
  --l2s-menu-line-strong: rgba(15, 23, 42, .18);
  --l2s-menu-surface: var(--ui-card);
  --l2s-menu-media: linear-gradient(135deg, #f8f9fa, #eef1f4);
  --l2s-menu-brand: var(--ui-brand, var(--brand, #d2232a));
  --l2s-menu-dark: var(--ui-text);

  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem) 0 3rem;
}

.l2s-menu__head { margin: 0 0 clamp(1rem, 2.5vw, 1.5rem); }

.l2s-menu__eyebrow {
  margin: 0 0 .4rem;
  font-size: var(--ui-fs-label, 15px);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--l2s-menu-muted);
}

.l2s-menu__title {
  margin: 0 0 .45rem;
  font-size: clamp(1.5rem, 3.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--l2s-menu-ink);
}

.l2s-menu__subtitle {
  margin: 0;
  max-width: 48ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--l2s-menu-muted);
}

.l2s-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.85rem, 1.6vw, 1.15rem);
}

@media (max-width: 900px) { .l2s-menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .l2s-menu__grid { grid-template-columns: 1fr; } }

.l2s-menu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid var(--l2s-menu-line);
  border-radius: 16px;
  background: var(--l2s-menu-surface);
  box-shadow: 0 .35rem 1.2rem rgba(15, 23, 42, .07);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.l2s-menu-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .8rem 1.8rem rgba(15, 23, 42, .12);
  border-color: var(--l2s-menu-line-strong);
}

.l2s-menu-card:focus-visible {
  outline: 2px solid var(--l2s-menu-brand);
  outline-offset: 2px;
}

.l2s-menu-card__media {
  position: relative;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--l2s-menu-media);
  overflow: hidden;
}
/* DARK/SPORT-MODUS: het icoon-vlak krijgt hetzelfde subtiele merk-puntjesraster als de rail + header,
   zodat de menu-kaarten meekleuren met het donkere thema. Over de bestaande media-gradient heen. */
html.l2s-sport .l2s-menu-card__media {
  background-image:
    radial-gradient(color-mix(in srgb, var(--l2s-menu-brand) 26%, transparent) 1.3px, transparent 1.4px),
    var(--l2s-menu-media);
  background-size: 13px 13px, auto;
  background-repeat: repeat, no-repeat;
}

.l2s-menu-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.l2s-menu-card__icon {
  font-size: 2.35rem;
  line-height: 1;
  color: var(--l2s-menu-brand);
}

.l2s-menu-card__chip {
  position: absolute;
  top: .6rem;
  left: .6rem;
  z-index: 1;
  font-size: var(--ui-fs-label, 15px);
  font-weight: 600;
  color: var(--l2s-menu-brand);
  background: var(--ui-card);
  border-radius: 999px;
  padding: .2rem .6rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

/* "Begin hier" (§8: één duidelijke ingang per scherm). Config: 'primary' => true op precies ÉÉN
   kaart per hub — de rest blijft rustig, zodat een nieuwe gebruiker weet waar te starten. */
.l2s-menu-card.is-primary {
  border-color: var(--l2s-menu-brand);
  box-shadow: 0 0 0 1px var(--l2s-menu-brand), 0 10px 26px rgba(15, 23, 42, .10);
}
.l2s-menu-card__start {
  position: absolute;
  top: .6rem;
  left: .6rem;
  z-index: 2;
  font-size: var(--ui-fs-label, 13px);
  font-weight: 800;
  color: white;
  background: var(--l2s-menu-brand);
  border-radius: 999px;
  padding: .25rem .7rem;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
}
/* Chip wijkt opzij zodra "Begin hier" die hoek claimt (geen overlap). */
.l2s-menu-card.is-primary .l2s-menu-card__chip { left: auto; right: .6rem; }
.l2s-menu-card.is-primary .l2s-menu-card__notif { top: 2.6rem; }

/* Notificatie-teller (bv. finance "Controle": aantal openstaande goedkeuringen). Rood, rechtsboven, valt op. */
.l2s-menu-card__notif {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
  min-width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .45rem;
  font-size: var(--ui-fs-label, 15px);
  font-weight: 800;
  color: var(--ui-on-dark);
  background: #dc2626;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(220, 38, 38, .5);
  animation: l2s-notif-pulse 2s ease-in-out infinite;
}
@keyframes l2s-notif-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) { .l2s-menu-card__notif { animation: none; } }

.l2s-menu-card__body {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1;
  padding: 1rem 1.05rem 1.05rem;
}

.l2s-menu-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--l2s-menu-ink);
}

.l2s-menu-card__text {
  margin: 0;
  flex: 1;
  font-size: var(--ui-fs-sm, 15px);
  line-height: 1.5;
  color: var(--l2s-menu-muted);
}

/* Kaart-meter (owner 2026-09-10): voortgangslijn op een hub-kaart die een `meter` declareert —
   zelfde cijfer als de rail (gedeelde resolver l2s_hub_card_meter) en dezelfde 80/40-banden als
   de module zelf, zodat hetzelfde getal overal hetzelfde betekent. */
.l2s-menu-card__meter {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .55rem;
}

.l2s-menu-card__meterbar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
  overflow: hidden;
}

.l2s-menu-card__meterbar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .5s ease;
}

/* doel-voortgang, geen kwaliteitsoordeel → merkkleur (zie customers.spotlight.css voor de regel) */
.l2s-menu-card__meterbar i { background: var(--brand, #0f766e); }

.l2s-menu-card__meterpct {
  flex: none;
  font-size: var(--ui-fs-label, 13px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.l2s-menu-card__meterpct { color: var(--brand, #0f766e); }

@media (prefers-reduced-motion: reduce) {
  .l2s-menu-card__meterbar i { transition: none; }
}

.l2s-menu-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .35rem;
}

.l2s-menu-card__meta {
  font-size: var(--ui-fs-label, 15px);
  font-weight: 700;
  border-radius: 999px;
  padding: .18rem .55rem;
  background: rgba(15, 23, 42, .06);
  color: var(--l2s-menu-muted-2);
}

.l2s-menu-card__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  margin-left: auto;
  border: 1px solid var(--l2s-menu-line);
  border-radius: 9px;
  color: var(--l2s-menu-muted-2);
  font-size: 1.05rem;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.l2s-menu-card:hover .l2s-menu-card__go {
  background: var(--l2s-menu-dark);
  border-color: var(--l2s-menu-dark);
  color: var(--ui-on-dark);
}

.l2s-menu__empty {
  border: 1px dashed var(--l2s-menu-line-strong);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  color: var(--l2s-menu-muted);
  background: var(--ui-card);
}


/* ============================================================================
   BEVESTIGEN & TERUGDRAAIEN (ui-ux-design-system §8 "vergevingsgezind")
   - .l2s-sheet__gevolg  het uitgeschreven gevolg in Confirm() — waarom dit zwaar is
   - .l2s-sheet          op smal scherm schuift dezelfde dialoog van ONDEREN in beeld,
                         zodat de knoppen in duimbereik liggen (geen aparte component)
   - .l2s-toast-undo     Toast.undo() — terugdraaien binnen handbereik i.p.v. waarschuwen vooraf
   Bron: core/frontend/src/lib/ui.js (Confirm / Toast.undo).
   ========================================================================== */
.l2s-sheet__gevolg {
  margin: 1rem 0 0;
  padding: .7rem .85rem;
  background: rgb(255 247 247);
  border-left: 3px solid var(--ui-brand);
  border-radius: 0 8px 8px 0;
  font-size: var(--ui-fs-sm, 15px);
  color: var(--ui-text);
}
.l2s-sheet .modal-title { font-size: var(--ui-fs-title, 19px); }
.l2s-sheet .modal-body  { font-size: var(--ui-fs-base, 16px); }
.l2s-sheet .modal-footer .btn { min-height: var(--ui-target, 48px); font-size: var(--ui-fs-base, 16px); font-weight: 700; }

@media (max-width: 575.98px) {
  /* Bottom sheet: onderaan vastgeplakt, knoppen onder elkaar en op volle breedte. */
  .l2s-sheet .modal-dialog { margin: 0; position: absolute; left: 0; right: 0; bottom: 0; max-width: none; }
  .l2s-sheet .modal-content { border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .l2s-sheet .modal-footer { flex-direction: column-reverse; gap: .6rem; }
  .l2s-sheet .modal-footer .btn { width: 100%; margin: 0; }
}

.l2s-toast-undo { --bs-toast-max-width: 420px; }
.l2s-toast-undo .toast-body { font-size: var(--ui-fs-sm, 15px); }
.l2s-toast-undo__btn { min-height: var(--ui-target-sm, 44px); font-weight: 700; white-space: nowrap; }

/* ============================================================================
   STEP-UP — «Bevestig dat jij het bent» (users identity-platform F2, plan S3)
   Mockup: standards/mockups/users-identity/users-identity.mockup.html → modal() (🔐, zes vakjes,
   donkere knop «Bevestigen», «Gebruik passkey» als tweede). Bron: core/frontend/src/lib/step-up.js.
   Donker vlak = de tekstinkt (--ui-text, dezelfde leisteen als de mockup) met kaartwit erop; BEWUST niet de tweede
   clubkleur: die is per club anders en soms licht (DevDoorn: lichtbeige → een bleke knop, gezien 27-09). Geen eigen kleuren.
   Op smal scherm schuift het als blad van onderen in beeld (.l2s-sheet hierboven).
   ========================================================================== */
.l2s-stepup-modal .modal-content { padding: 22px 22px 18px; text-align: center; }
/* z-index: .modal-body (position:relative) komt later in de DOM en lag er anders óver — kruisje onklikbaar (27-09). */
.l2s-stepup__close { position: absolute; z-index: 2; top: 10px; right: 10px; min-width: var(--ui-target-sm, 44px); min-height: var(--ui-target-sm, 44px); }
.l2s-stepup-modal .modal-body { padding: 0; }
.l2s-stepup__icon {
  width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 16px;
  display: grid; place-items: center; font-size: 22px;
  background: var(--ui-text); color: var(--ui-card);
}
.l2s-stepup__title { font-size: var(--ui-fs-title, 19px); font-weight: 800; margin: 0 0 6px; color: var(--ui-text); }
.l2s-stepup__lead { font-size: var(--ui-fs-sm, 15px); color: var(--ui-muted); margin: 0 0 14px; }
.l2s-stepup__form { display: grid; gap: 10px; }
.l2s-stepup__otp { position: relative; display: flex; gap: 7px; justify-content: center; margin: 0 auto 6px; }
.l2s-stepup__cell {
  width: 44px; height: 54px; border: 1px solid var(--ui-border); border-radius: 10px;
  display: grid; place-items: center; font-size: 22px; font-weight: 800;
  background: var(--ui-card); color: var(--ui-text);
}
.l2s-stepup__cell.is-active { border: 2px solid var(--ui-text); }
/* Het echte veld ligt onzichtbaar óver de vakjes: tikken, plakken en autofill werken gewoon. 16px = geen iOS-zoom. */
.l2s-stepup__code {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0;
  font-size: 16px; color: transparent; caret-color: transparent; background: transparent;
}
.l2s-stepup__field { min-height: var(--ui-target, 48px); font-size: var(--ui-fs-input, 16px); text-align: center; }
.l2s-stepup__err { margin: 0; font-size: var(--ui-fs-sm, 15px); font-weight: 700; color: var(--ui-danger); }
.l2s-stepup__confirm {
  width: 100%; min-height: var(--ui-target, 48px); font-size: var(--ui-fs-base, 16px); font-weight: 700;
  background: var(--ui-text); border-color: var(--ui-text); color: var(--ui-card);
}
.l2s-stepup__confirm:hover, .l2s-stepup__confirm:focus-visible { background: var(--ui-text); border-color: var(--ui-text); color: var(--ui-card); opacity: .9; }
.l2s-stepup__alts { display: grid; gap: 2px; }
.l2s-stepup__alt {
  width: 100%; min-height: var(--ui-target-sm, 44px); font-size: var(--ui-fs-sm, 15px); font-weight: 700;
  background: transparent; border-color: transparent; color: var(--ui-muted-strong);
}
.l2s-stepup__alt:hover { background: var(--ui-sunken); }

/* ============================================================================
   GEBRUIKER — DETAILPAGINA (users identity-platform F2, mockup users-identity scherm 2)
   Bron: modules/users/frontend/users-detail.js. Alleen wat Bootstrap niet heeft: avatar, tijdlijn-stip,
   staafjes per week. Kleuren = bestaande tokens; de staafjes in de tekstinkt, de laatste week in het merk.
   ========================================================================== */
.l2s-udet__avatar {
  width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 800; font-size: 19px;
  background: var(--ui-sunken); color: var(--ui-text); border: 1px solid var(--ui-border);
}
.l2s-udet__tabs .nav-link { min-height: var(--ui-target-sm, 44px); font-weight: 700; font-size: var(--ui-fs-sm, 15px); color: var(--ui-muted); }
.l2s-udet__tabs .nav-link:hover { color: var(--ui-text); }
.l2s-udet__tabs .nav-link.active { color: var(--ui-text); border-bottom-color: var(--ui-text); }   /* mockup: grijs, actief donker */
.l2s-udet__dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; flex: 0 0 12px; background: var(--ui-muted); }
.l2s-udet__dot--ok { background: var(--bs-success); }
.l2s-udet__dot--fail { background: var(--ui-danger); }
.l2s-udet__dot--info { background: var(--ui-muted); }
.l2s-udet__bars { display: flex; align-items: flex-end; gap: 6px; height: 130px; padding-top: 6px; }
.l2s-udet__bar { flex: 1; min-width: 6px; background: var(--ui-text); opacity: .8; border-radius: 5px 5px 2px 2px; }
.l2s-udet__bar:last-child { background: var(--ui-brand); opacity: 1; }
.l2s-udet__bars-x { display: flex; gap: 6px; margin-top: 4px; }
.l2s-udet__bars-x span { flex: 1; font-size: var(--ui-fs-sm, 15px); color: var(--ui-muted); white-space: nowrap; overflow: visible; }
.l2s-udet__rights td, .l2s-udet__rights th { font-size: var(--ui-fs-sm, 15px); }
/* F4 (mockup tab Activiteit): tijd per onderdeel (hbar) en dag × uur (heat). Kleur = tekstinkt; intensiteit via opacity (CSSOM). */
.l2s-udet__hbar { display: grid; grid-template-columns: minmax(90px, 38%) 1fr 48px; align-items: center; gap: 8px; padding: 4px 0; font-size: var(--ui-fs-sm, 15px); }
.l2s-udet__hbar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l2s-udet__hbar-t { height: 10px; background: var(--ui-sunken); border-radius: 5px; overflow: hidden; }
.l2s-udet__hbar-t i { display: block; height: 100%; background: var(--ui-text); opacity: .8; border-radius: 5px; }
.l2s-udet__hbar-v { text-align: right; }
.l2s-udet__heat { display: grid; grid-template-columns: 28px repeat(24, minmax(8px, 1fr)); gap: 2px; align-items: center; }
.l2s-udet__heat-h, .l2s-udet__heat-d { font-size: var(--ui-fs-sm, 15px); color: var(--ui-muted); text-align: center; }
.l2s-udet__heat-c { display: block; aspect-ratio: 1; min-height: 8px; background: var(--ui-text); border-radius: 2px; }
/* F4 «Toegang & veiligheid» (mockup scherm 3): icoon-vakjes met statuskleur, 2FA-balk groen bij 100% en oranje daaronder. */
.l2s-ins__ic { flex: 0 0 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--ui-sunken); font-size: 17px; }
.l2s-ins__ic--danger { background: var(--st-err-bg); }
.l2s-ins__ic--warn { background: var(--st-warn-bg); }
.l2s-ins.is-busy .card { opacity: .55; transition: opacity .15s ease; }
.l2s-ins__cov.is-ok .l2s-udet__hbar-t i { background: var(--st-ok-ink); opacity: 1; }
.l2s-ins__cov.is-warn .l2s-udet__hbar-t i { background: var(--st-warn-ink); opacity: 1; }

/* MIJN ACCOUNT (users F2, mockup scherm 7) — bron: core/frontend/src/lib/my-account.js. */
.l2s-me__codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.l2s-me__code { font-size: var(--ui-fs-base, 16px); font-weight: 700; letter-spacing: .04em; padding: 6px 8px;
  background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 8px; color: var(--ui-text); text-align: center; }
.l2s-userbar__naam { text-decoration: none; min-height: var(--ui-target-sm, 44px); color: var(--ui-text); }   /* neutraal: je naam is geen waarschuwing */

/* ============================================================================
   MENU/LANDING — exclusiviteit + 60+ gemak (verlengt het .l2s-menu design-system)
   - .l2s-tasks    taak-startpunt "Wat wil je doen?" (werkwoord-knoppen, 1 primair)
   - .l2s-onboard  onboarding-checklist + signature succes-staat
   - .l2s-a11y     tekstgrootte-schakelaar + html.l2s-comfort (grote tekst, 60+)
   Alles per-tenant via --ui-brand; rood = alleen primair (kleur-disciplineregel).
   ========================================================================== */
/* Idem: naar core i.p.v. een eigen kopie van dezelfde slate-set. */
.l2s-tasks, .l2s-onboard, .l2s-statusband {
  --a-ink: var(--ui-text);
  --a-muted: var(--ui-muted);
  --a-muted-2: var(--ui-muted-strong);
  --a-line: rgba(15, 23, 42, .10);
  --a-line-strong: rgba(15, 23, 42, .18);
  --a-surface: var(--ui-card);
  --a-brand: var(--ui-brand, var(--brand, #d2232a));
}

/* ---- Statusband (optioneel per hub: korte feiten bovenaan het scherm) ---- */
.l2s-statusband {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
  padding: .7rem 1rem;
  border: 1px solid var(--a-line);
  border-radius: 14px;
  background: var(--a-surface);
  font-size: var(--ui-fs-sm, 15px);
}
.l2s-statusband__item { display: inline-flex; align-items: baseline; gap: .4rem; }
.l2s-statusband__label { color: var(--a-muted); }
.l2s-statusband__value { color: var(--a-ink); font-weight: 700; }
a.l2s-statusband__value { color: var(--a-brand); text-decoration: none; }
a.l2s-statusband__value:hover { text-decoration: underline; }

/* ---- Taak-startpunt ---- */
.l2s-tasks { margin: 0 0 clamp(1.25rem, 3vw, 1.75rem); }
.l2s-tasks__label {
  margin: 0 0 .6rem;
  font-size: var(--ui-fs-label, 15px);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--a-muted);
}
.l2s-tasks__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .7rem;
}
.l2s-task {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: .85rem 1.05rem;
  border: 1px solid var(--a-line);
  border-radius: 14px;
  background: var(--a-surface);
  color: var(--a-ink);
  text-decoration: none;
  box-shadow: 0 .25rem .9rem rgba(15, 23, 42, .05);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.l2s-task:hover { transform: translateY(-2px); box-shadow: 0 .7rem 1.6rem rgba(15, 23, 42, .10); border-color: var(--a-line-strong); }
.l2s-task:focus-visible { outline: 2px solid var(--a-brand); outline-offset: 2px; }
.l2s-task__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(15, 23, 42, .05);
  color: var(--a-brand);
  font-size: 1.3rem;
}
.l2s-task__label { font-size: 1rem; font-weight: 600; line-height: 1.25; }
.l2s-task--primary {
  background: var(--a-brand);
  border-color: var(--a-brand);
  color: var(--ui-on-brand);
  box-shadow: 0 .5rem 1.4rem rgba(var(--brand-rgb, 210, 35, 42), .26); /* schaduw volgt de clubkleur */
}
.l2s-task--primary .l2s-task__icon { background: rgba(255, 255, 255, .18); color: var(--ui-on-brand); }
.l2s-task--primary:hover { box-shadow: 0 .8rem 1.8rem rgba(var(--brand-rgb, 210, 35, 42), .32); }

/* ---- Onboarding-checklist + signature succes ---- */
.l2s-onboard {
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--a-line);
  border-radius: 16px;
  background: var(--a-surface);
  box-shadow: 0 .35rem 1.2rem rgba(15, 23, 42, .07);
}
.l2s-onboard__head { display: flex; align-items: flex-start; gap: 12px; }
.l2s-onboard__head-main { min-width: 0; flex: 1 1 auto; }
.l2s-onboard__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--a-ink); }
.l2s-onboard__sub { margin: .15rem 0 0; font-size: var(--ui-fs-sm, 15px); color: var(--a-muted); }
.l2s-onboard__progress { height: 6px; border-radius: 999px; background: rgba(15, 23, 42, .08); margin: .85rem 0 1rem; overflow: hidden; }
.l2s-onboard__bar { width: 0; height: 100%; border-radius: 999px; background: var(--a-brand); transition: width .5s ease; }
.l2s-onboard__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.l2s-onboard__step {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: .55rem .7rem;
  border-radius: 11px;
  text-decoration: none;
  color: var(--a-ink);
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
}
.l2s-onboard__step:hover { background: rgba(15, 23, 42, .03); border-color: var(--a-line); }
.l2s-onboard__step:focus-visible { outline: 2px solid var(--a-brand); outline-offset: 2px; }
.l2s-onboard__check {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  border: 2px solid rgba(15, 23, 42, .18);
  color: transparent;
}
.l2s-onboard__step.is-done .l2s-onboard__check { background: var(--a-brand); border-color: var(--a-brand); color: var(--ui-on-brand); }
.l2s-onboard__step-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.l2s-onboard__step-label { font-size: .95rem; font-weight: 600; }
.l2s-onboard__step.is-done .l2s-onboard__step-label { color: var(--a-muted); text-decoration: line-through; }
.l2s-onboard__step-hint { font-size: var(--ui-fs-label, 15px); color: var(--a-muted); }
.l2s-onboard__step-arrow { flex: none; color: var(--a-muted); font-size: 1.05rem; }
.l2s-onboard__step.is-done .l2s-onboard__step-arrow { visibility: hidden; }
.l2s-onboard.is-complete { border-color: rgba(var(--brand-rgb, 210, 35, 42), .30); background: rgba(var(--brand-rgb, 210, 35, 42), .04); }
.l2s-onboard__done { display: flex; align-items: center; gap: 14px; }
.l2s-onboard__done-badge {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--a-brand);
  color: var(--ui-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.l2s-onboard__done-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--a-ink); }
.l2s-onboard__done-sub { margin: .1rem 0 0; font-size: var(--ui-fs-sm, 15px); color: var(--a-muted); }

/* ---- 60+ toegankelijkheid: tekstgrootte-schakelaar + comfort-modus ---- */
.l2s-menu__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem 1rem; }
.l2s-menu__head-main { min-width: 0; flex: 1 1 auto; }
.l2s-a11y {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .45rem .8rem;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 999px;
  background: var(--ui-card);
  color: var(--ui-muted-strong);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.l2s-a11y:hover { border-color: rgba(15, 23, 42, .28); color: var(--ui-text); }
.l2s-a11y:focus-visible { outline: 2px solid var(--ui-brand, var(--brand, #d2232a)); outline-offset: 2px; }
.l2s-a11y__aa { font-size: 1.05rem; font-weight: 700; line-height: 1; }
html.l2s-comfort .l2s-a11y { background: var(--ui-brand, #d2232a); color: var(--ui-on-brand); border-color: var(--ui-brand, #d2232a); }

/* Comfort-modus = grotere tekst. Mild GLOBAAL (body-tekst; veilig op elke pagina die core.css
   laadt, raakt geen px-structuur) + sterker op de menu-componenten. */
html.l2s-comfort body { font-size: 1.0625rem; }
html.l2s-comfort .l2s-menu__title { font-size: clamp(1.7rem, 4vw, 2.15rem); }
html.l2s-comfort .l2s-menu__subtitle { font-size: 1.15rem; }
html.l2s-comfort .l2s-menu-card__title { font-size: 1.2rem; }
html.l2s-comfort .l2s-menu-card__text { font-size: 1.02rem; }
html.l2s-comfort .l2s-tasks__label,
html.l2s-comfort .l2s-tasks__row { font-size: 1.02rem; }
html.l2s-comfort .l2s-task__label { font-size: 1.14rem; }
html.l2s-comfort .l2s-task { min-height: 68px; }
html.l2s-comfort .l2s-onboard__step-label { font-size: 1.06rem; }
html.l2s-comfort .l2s-onboard__step-hint { font-size: .9rem; }
html.l2s-comfort .l2s-onboard__step { min-height: 54px; }

@media (max-width: 600px) {
  .l2s-tasks__row { grid-template-columns: 1fr; }
}


/* ============================================================================
   CLUBINSTELLINGEN — settings-module admin (core/views/settings/clubinstellingen.php)
   Slate + per-tenant --ui-brand. ACL-gated view; save via /core/api/public/settings/save.php.
   ========================================================================== */
/* Tokens WIJZEN NAAR core (2026-08-17). Stonden hier als eigen kleurwaarden — dezelfde slate-set
   als in .l2s-menu en .l2s-tasks — waardoor deze pagina in sport-modus niet mee kantelde en de titel
   zwart-op-zwart bleef (owner-screenshot). Waarden identiek, dus licht verandert niet. */
.l2s-set {
  --s-ink: var(--ui-text); --s-muted: var(--ui-muted); --s-line: rgba(15,23,42,.10); --s-line2: rgba(15,23,42,.18);
  --s-brand: var(--ui-brand, var(--brand, #d2232a)); --s-dark: var(--ui-text);
  max-width: 1040px; margin: 0 auto; padding: clamp(1.25rem, 3vw, 2rem) 0 3rem;
}
.l2s-set__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem 1rem; margin-bottom: clamp(1rem, 2.5vw, 1.5rem); }
.l2s-set__eyebrow { margin: 0 0 .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--s-muted); }
.l2s-set__title { margin: 0 0 .35rem; font-size: clamp(1.5rem, 3.4vw, 1.9rem); font-weight: 700; letter-spacing: -.01em; color: var(--s-ink); }
.l2s-set__sub { margin: 0; max-width: 52ch; font-size: 1rem; line-height: 1.5; color: var(--s-muted); }
.l2s-set__lock { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: .8rem; font-weight: 600; color: #b45309; background: #fdf0e3; border-radius: 999px; padding: 6px 12px; }
.l2s-set__denied { border: 1px solid var(--s-line); border-radius: 14px; background: var(--ui-card); padding: 2rem; text-align: center; color: var(--s-muted); }
/* Sinds 22-09 geen zijkolom meer: de panelen navigeren via de tabblad-canon (l2s-nav-tabs) bóven
   het formulier — zelfde streep als verkoop, kanalen en mijn dag. Eén kolom dus. */
.l2s-set__layout { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--ui-card); border: 1px solid var(--s-line); border-radius: 16px; box-shadow: 0 .35rem 1.2rem rgba(15,23,42,.06); overflow: hidden; }
/* De items dragen de nav-tab-canon; hier alleen nog de plaatsing van de rij in de kaart. */
.l2s-set__nav { padding: 6px 16px 0; }
.l2s-set__navitem i { font-size: 18px; }
.l2s-set__form { padding: 22px; min-width: 0; }
.l2s-set__panel { display: none; }
.l2s-set__panel.on { display: block; }
.l2s-set__field { margin-bottom: 16px; }
.l2s-set__label { display: block; font-size: 13px; font-weight: 600; color: var(--s-ink); margin-bottom: 6px; }
/* TUSSENKOP in een instellingen-tab (owner 18-09): Communicatie gaat nu over twee dingen —
   de kanaal-koppelingen en de afzender van uitgaande mail. Zonder kop leest dat als één rij
   velden die allemaal over Instagram zouden gaan. Descriptor-gestuurd ('kop'), dus alleen waar
   het is gezet. */
.l2s-set__subkop { margin: 26px 0 2px; font-size: 16px; font-weight: 700; color: var(--s-ink); }
/* «Binnenkort met één klik» boven het handmatige stappenplan (owner 18-09): eerlijk zijn over de
   route die een club nu voor zich heeft, zonder de bestaande uitleg te verstoppen. */
.l2s-help__soon { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px;
  padding: 12px 14px; border-radius: 10px; background: var(--ui-sunken, rgba(15,23,42,.04));
  border: 1px solid var(--s-line); font-size: 15px; line-height: 1.5; color: var(--s-ink); }
.l2s-help__soon .bi { flex: 0 0 auto; margin-top: 2px; color: var(--s-muted); }
.l2s-set__subkop:first-child { margin-top: 0; }
.l2s-set__subuitleg { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--s-muted); max-width: 62ch; }
.l2s-set__input { width: 100%; min-height: 44px; border: 1px solid var(--s-line2); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: var(--ui-fs-input, 16px); color: var(--s-ink); background: var(--ui-card); } /* ≥16px: anders zoomt iOS bij focus en pant de hele pagina */
.l2s-set__input:focus { outline: 2px solid var(--s-brand); outline-offset: 1px; border-color: var(--s-brand); }
.l2s-set__input:disabled { background: #f6f7f9; color: var(--s-muted); }
.l2s-set__colorrow { display: flex; align-items: center; gap: 10px; }
.l2s-set__color { width: 52px; height: 44px; border: 1px solid var(--s-line2); border-radius: 10px; background: var(--ui-card); cursor: pointer; padding: 3px; flex: none; }
.l2s-set__color-hex { max-width: 160px; }
.l2s-set__err { margin: 6px 0 0; font-size: 12.5px; color: #b91c1c; }
.l2s-set__secret { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--s-muted); border: 1px dashed var(--s-line2); border-radius: 10px; padding: 10px 12px; }
.l2s-set__save { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 18px; background: var(--ui-card); border: 1px solid var(--s-line); border-radius: 14px; box-shadow: 0 .35rem 1.2rem rgba(15,23,42,.06); }
.l2s-set__status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--s-muted); }
.l2s-set__status.ok { color: #15803d; }
.l2s-set__status.dirty { color: #b45309; }
.l2s-set__status.err { color: #b91c1c; }
.l2s-set__btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 14px; font-weight: 600; min-height: 44px; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--s-line2); background: var(--ui-card); color: var(--s-ink); cursor: pointer; }
.l2s-set__btn.brand { background: var(--s-brand); border-color: var(--s-brand); color: var(--ui-on-brand); }
.l2s-set__btn:disabled { opacity: .6; cursor: not-allowed; }

/* UPLOAD-RIJ in Clubinstellingen (owner 01-10-2026). De beeld-uploader is gebouwd voor de
   Bootstrap-schermen; dit scherm draait op het eigen designsysteem, waar `input-group` en
   `btn btn-outline-secondary` niets betekenen — twee kale knopjes tussen afgeronde velden.
   Hier staat de opmaak die daarbij hoort: veld op volle breedte, knoppen eronder met lucht,
   voorbeeld daar weer onder. De knoppen zelf hergebruiken gewoon `.l2s-set__btn`. */
.l2s-set__upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.l2s-set__upload > .l2s-set__input { flex: 1 1 100%; }
.l2s-set__thumb { max-height: 44px; border-radius: 8px; border: 1px solid var(--s-line2); background: var(--ui-card); padding: 2px; }
.l2s-set__thumb[hidden] { display: none; }

/* KANAAL-KAARTEN in de Communicatie-tab (B4, owner 18-09). Eén kaart per kanaal met status,
   gekoppelde pagina en één knop. Geen eigen kleuren: de badge tint bestaande tokens met
   color-mix, zodat sport-/donkermodus meekantelt en er geen losse hex bijkomt. Het raster is
   auto-fit — op een telefoon wordt het vanzelf één kolom, zonder media-query. */
.l2s-chan { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 0 0 18px; }
.l2s-chan__kaart { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--s-line); border-radius: 14px; background: var(--ui-card); }
.l2s-chan__kop { display: flex; align-items: center; gap: 9px; font-size: var(--ui-fs-title); }
.l2s-chan__kop b { font-size: var(--ui-fs-base); }
.l2s-chan__badge { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: var(--ui-fs-sm); font-weight: 600; }
.l2s-chan__badge.is-on   { background: color-mix(in srgb, var(--accent) 20%, transparent);     color: color-mix(in srgb, var(--accent) 55%, var(--ui-text)); }
.l2s-chan__badge.is-warn { background: color-mix(in srgb, var(--ui-warm) 24%, transparent);    color: color-mix(in srgb, var(--ui-warm) 45%, var(--ui-text)); }
.l2s-chan__badge.is-off  { background: color-mix(in srgb, var(--ui-muted) 14%, transparent);   color: var(--ui-muted-strong); }
.l2s-chan__wie { margin: 0; font-size: var(--ui-fs-base); color: var(--s-ink); overflow-wrap: anywhere; }
.l2s-chan__leeg { color: var(--ui-muted-strong); font-style: italic; }
.l2s-chan__fout { margin: 0; font-size: var(--ui-fs-sm); line-height: 1.45; color: var(--ui-danger); display: flex; gap: 7px; align-items: flex-start; }
.l2s-chan__acties { margin-top: auto; padding-top: 4px; }
.l2s-chan__acties .l2s-set__btn { width: 100%; justify-content: center; }
/* «Verbinding wissen» staat NAAST de hoofdknop en mag die niet beconcurreren: zelfde raakvlak,
   rustiger tekst. Geen eigen kleur — dit is geen gevaarlijke actie, alleen een omkeerbare reset. */
.l2s-chan__acties { display: grid; gap: 8px; }
.l2s-chan__wis { font-weight: 500; color: var(--ui-muted-strong); }
@media (max-width: 640px) {
  .l2s-set__layout { grid-template-columns: 1fr; }
  .l2s-set__nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--s-line); padding: 10px; }
  .l2s-set__navitem { border: 1px solid var(--s-line); border-radius: 999px; white-space: nowrap; }
}


/* Clubinstellingen — secret-velden (Mollie e.d.): maskering + editor + status */
.l2s-set__secret { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.l2s-secret-mask { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; }
.l2s-secret-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.l2s-secret-editor .l2s-secret-input { flex: 1 1 220px; }
.l2s-secret-editor-actions { display: flex; gap: 8px; }
.l2s-secret-warn { margin: 6px 0 0; font-size: 12.5px; color: #b45309; }
.l2s-secret-status { margin: 6px 0 0; font-size: 12.5px; }
.l2s-secret-status.ok { color: #15803d; }
.l2s-secret-status.err { color: #b91c1c; }
.l2s-secret-status.busy { color: var(--ui-muted); }

/* ============================ PRODUCTS — Embed-kanalen (manage-toolbar + modal) ============================ */
/* Generieke toolbar-slot boven de zoekbalk; leeg = geen ruimte. Modules vullen 'm (bv. de Embed-knop). */
.l2s-manage-toolbar:empty { display: none !important; }
/* btn-sm van Bootstrap levert 31px — onder de comfort-baseline (§8: raakvlak >= 44px). */
.l2s-embed__btn { border-color: var(--ui-brand); color: var(--ui-brand);
  min-height: var(--ui-target-sm, 44px); font-size: var(--ui-fs-sm, 15px);
  display: inline-flex; align-items: center; }
.l2s-embed__btn:hover { background: var(--ui-brand); color: var(--ui-on-brand); }
.l2s-embed__overlay { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: flex-start;
  justify-content: center; padding: 5vh 1rem; background: rgba(15,23,42,.55); overflow-y: auto; }
.l2s-embed__dialog { width: 100%; max-width: 640px; max-height: 88vh; display: flex; flex-direction: column;
  padding: 1.25rem 1.25rem 1rem; background: var(--ui-card); }
.l2s-embed__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; }
.l2s-embed__body { overflow-y: auto; }
.l2s-embed__channel { padding: .75rem 0; border-top: 1px solid rgba(17,24,39,.10); }
.l2s-embed__channel:first-child { border-top: 0; padding-top: 0; }
.l2s-embed__title { font-weight: 700; margin: 0 0 .35rem; }
.l2s-embed__row { display: flex; align-items: stretch; gap: .5rem; }
.l2s-embed__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; resize: vertical; }
.l2s-embed__copy { white-space: nowrap; align-self: flex-start; }
@media (max-width: 575.98px) { .l2s-embed__row { flex-direction: column; } .l2s-embed__copy { align-self: stretch; } }

/* "Bekijk pagina's"-modal: elk publiek kanaal als klikbare kaart (deelt de l2s-embed overlay-schil). */
.l2s-pubpages__list { display: flex; flex-direction: column; gap: .5rem; }
.l2s-pubpages__item { margin: 0; }
.l2s-pubpages__link { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem;
  border: 1px solid rgba(17,24,39,.12); border-radius: 12px; text-decoration: none; color: inherit;
  background: var(--ui-card); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.l2s-pubpages__link:hover, .l2s-pubpages__link:focus-visible {
  border-color: var(--brand); box-shadow: 0 2px 10px rgba(17,24,39,.08); transform: translateY(-1px); }
.l2s-pubpages__icon { flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center;
  justify-content: center; border-radius: 9px; background: rgba(var(--brand-rgb), .12); color: var(--brand); }
.l2s-pubpages__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.l2s-pubpages__title { font-weight: 600; }
.l2s-pubpages__url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l2s-pubpages__go { flex: 0 0 auto; color: var(--ui-muted); }
.l2s-pubpages__item.is-disabled { display: flex; flex-direction: column; padding: .75rem .9rem;
  border: 1px dashed rgba(17,24,39,.18); border-radius: 12px; }

/* ============================================================================
   FILTERBAR-CANON — de ÉNE filtergrammatica voor alle lijstschermen (owner 2026-08-30).
   Opbouw: zoekveld + tab-rij (primaire as, met tellingen) + dropdown-pills (secundaire
   assen, select-semantiek). JS-eilanden bouwen dit via @lib/filterbar.js; server-
   gerenderde views (finance) renderen dezelfde klassen als <a>-links. Modules stylen
   dit NIET opnieuw — één look, hier. Maatvoering = comfort-baseline (§8): tekst via
   --ui-fs-*, raakvlak via --ui-target-sm. Actief/gekozen = --sub (slate); de merkkleur
   blijft gereserveerd voor primaire acties (ui-ux-design-system §2).
   ============================================================================ */
/* width:100% + min-width:0 — de balk hangt soms ZELF als flex-item in een pagina-container
   (products zet 'm in de `d-flex flex-wrap`-rij van manage.php). Zonder deze twee krijgt hij daar
   `flex: 0 1 auto` met `min-width: auto` en kan hij niet onder zijn eigen inhoudsbreedte krimpen —
   dan steekt de hele balk (en dus de pagina) een paar pixels buiten het scherm en scrollt het
   geheel horizontaal. Gemeten op een telefoon 14-09: exact 2px over, over de hele keten. */
.l2s-fb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px;
  width: 100%; min-width: 0; }

/* Zoekveld — groeit mee; het input-font blijft ≥16px zodat iOS niet inzoomt. */
.l2s-fb-search { flex: 1 1 220px; min-width: 180px; min-height: var(--ui-target-sm, 44px);
  display: inline-flex; align-items: center; gap: 8px; padding: 0 14px;
  border: 1px solid var(--ui-border, #e8ecf0); border-radius: 999px; background: var(--ui-card); }
.l2s-fb-search:focus-within { border-color: var(--sub, #0f172a); }
.l2s-fb-search input { border: 0; outline: 0; flex: 1; min-width: 0;
  font-size: var(--ui-fs-base, 16px); color: var(--ui-text); background: transparent; }
.l2s-fb-searchicon { flex: 0 0 auto; color: var(--ui-muted); }
.l2s-fb-search .l2s-fb-clr { color: var(--ui-muted); text-decoration: none; padding: 4px 6px; }

/* Icon-font-iconen (server-gerenderde variant) meten mee met de canon. */
.l2s-fb-pill i, .l2s-fb-mi i { flex: 0 0 auto; pointer-events: none; }
.l2s-fb-mi i { width: 18px; text-align: center; color: var(--ui-muted); }

/* Tab-rij (primaire as) — overflowt horizontaal i.p.v. chips samen te persen. */
/* min-width:0 is hier GEEN detail: een flex-item heeft standaard min-width:auto, dus deze rij zou
   niet onder zijn eigen inhoudsbreedte krimpen. Met 8 type-tabs rekt hij dan de hele balk — en dus
   de PAGINA — op, en scrollt het hele scherm horizontaal mee (owner-vangst mobiel 14-09; de
   responsive-canon §8 noemt horizontaal scrollen een harde overtreding). Met min-width:0 krimpt de
   rij netjes en scrollt alleen de tab-rij zelf, zoals bedoeld. */
.l2s-fb-tabs { display: flex; gap: 6px; min-width: 0; max-width: 100%; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 2px; }
.l2s-fb-tabs::-webkit-scrollbar { height: 5px; }
.l2s-fb-tabs::-webkit-scrollbar-thumb { background: var(--ui-border, #e8ecf0); border-radius: 999px; }

/* Tab en pill delen één basis; werkt op <button> (JS-eiland) én <a> (server/link-gedreven). */
.l2s-fb-tab, .l2s-fb-pill { appearance: none; font: inherit; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--ui-target-sm, 44px);
  padding: 0 14px; border: 1px solid var(--ui-border, #e8ecf0); border-radius: 999px;
  background: var(--ui-card); font-size: var(--ui-fs-sm, 15px); font-weight: 700;
  color: var(--ui-muted-strong); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: color .12s ease, border-color .12s ease, background-color .12s ease; }
.l2s-fb-tab:hover, .l2s-fb-pill:hover { color: var(--ui-text); border-color: var(--sub, #0f172a); }
.l2s-fb-tab:focus-visible, .l2s-fb-pill:focus-visible, .l2s-fb-mi:focus-visible {
  outline: 2px solid var(--sub, #0f172a); outline-offset: 2px; }
.l2s-fb-tab.is-active, .l2s-fb-pill.is-active {
  background: var(--sub, #0f172a); border-color: var(--sub, #0f172a); color: var(--ui-on-sub, #fff); }

/* ── TABBLAD-CANON: NAVIGATIE (owner 22-09-2026) ─────────────────────────────────────────────
   «Pills filteren, de streep navigeert.» Twee betekenissen, elk één vaste vorm:
     · een FILTER-as (klantsoort, status — mét tellingen) = de pillen hierboven; gevuld = aan;
     · een NAVIGATIE-tab («waar sta ik»: Overzicht/Bestellingen/Voorraad, kanaalsoorten,
       instellingen-panelen, Mijn dag/rooster/uren) = deze onderstreep-look.
   De vorm komt uit de kanalen-tabs die de owner op 19-08 al verkoos («chips werden over het
   hoofd gezien»); hij is nu de éne bron, zodat er nooit meer per module een eigen tab-stijl
   bijkomt (gate 34 R4 bewaakt dat). Werkt op <button> én <a>. */
.l2s-nav-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--ui-border);
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.l2s-nav-tabs::-webkit-scrollbar { display: none; }
.l2s-nav-tab {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--ui-fs-sm, 15px);
  font-weight: 600;
  color: var(--ui-muted-strong);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  min-height: var(--ui-target-sm, 44px);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;                    /* de streep valt op de rand van de rij */
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  scroll-snap-align: start;
  transition: color .12s ease, border-color .12s ease;
}
.l2s-nav-tab:hover { color: var(--ui-text); }
.l2s-nav-tab:focus-visible { outline: 2px solid var(--sub); outline-offset: -2px; }
.l2s-nav-tab.is-active { color: var(--ui-text); border-bottom-color: var(--brand); }
.l2s-nav-tab:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 900px) {
  /* de rij loopt zichtbaar door: de vervaagde rand zegt «er is meer, veeg maar» */
  .l2s-nav-tabs {
    -webkit-mask-image: linear-gradient(90deg, black 88%, transparent);
    mask-image: linear-gradient(90deg, black 88%, transparent);
  }
}

/* Telling-badge — in tabs, pills en menu-items. */
.l2s-fb-count { font-size: var(--ui-fs-sm, 15px); font-weight: 700; min-width: 22px; text-align: center;
  padding: 0 7px; border-radius: 999px; background: var(--ui-sunken, #eef1f5); color: var(--ui-muted); }
.l2s-fb-tab.is-active .l2s-fb-count, .l2s-fb-pill.is-active .l2s-fb-count {
  background: rgba(255, 255, 255, .22); color: var(--ui-on-sub, #fff); }

/* Dropdown-pill (secundaire as): pill toont de gekozen optie + chevron; menu eronder. */
.l2s-fb-pillwrap { position: relative; flex: 0 0 auto; }
.l2s-fb-chev { font-size: var(--ui-fs-sm, 15px); color: var(--ui-muted); pointer-events: none; }
.l2s-fb-pill.is-active .l2s-fb-chev { color: var(--ui-on-brand, #fff); }
.l2s-fb-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px;
  max-width: min(340px, calc(100vw - 32px)); max-height: 62vh; overflow-y: auto;
  background: var(--ui-card); border: 1px solid var(--ui-border, #e8ecf0); border-radius: 12px;
  box-shadow: var(--ui-shadow-h, 0 12px 28px rgba(15, 23, 42, .09)); padding: 6px; z-index: 70; display: none; }
.l2s-fb-menu.open { display: block; }
.l2s-fb-menu--end { left: auto; right: 0; }
.l2s-fb-mi { appearance: none; font: inherit; display: flex; align-items: center; gap: 9px;
  width: 100%; min-height: var(--ui-target-sm, 44px); padding: 6px 12px; border: 0; border-radius: 9px;
  background: none; cursor: pointer; font-size: var(--ui-fs-sm, 15px); color: var(--ui-text);
  text-decoration: none; text-align: left; }
.l2s-fb-mi:hover { background: var(--ui-sunken, #eef1f5); }
.l2s-fb-mi.is-active { background: var(--ui-sunken, #eef1f5); font-weight: 700; }
.l2s-fb-mi .l2s-fb-count { margin-left: auto; }

/* Segment-rij bovenin een menu (bv. periode: seizoen/kwartaal/maand). */
.l2s-fb-seg { display: flex; gap: 5px; padding: 4px 4px 8px;
  border-bottom: 1px solid var(--ui-border, #e8ecf0); margin-bottom: 5px; }
.l2s-fb-seg a, .l2s-fb-seg button { appearance: none; font: inherit; flex: 1; display: inline-flex;
  align-items: center; justify-content: center; min-height: var(--ui-target-sm, 44px);
  border: 1px solid var(--ui-border, #e8ecf0); border-radius: 999px; background: var(--ui-card);
  font-size: var(--ui-fs-sm, 15px); color: var(--ui-muted-strong); text-decoration: none; cursor: pointer; }
.l2s-fb-seg a.is-active, .l2s-fb-seg button.is-active {
  background: var(--sub, #0f172a); border-color: var(--sub, #0f172a); color: var(--ui-on-sub, #fff); }

/* Rechts-uitlijner voor niet-filter-bediening in dezelfde balk (bv. Grid/Rijen-toggle). */
.l2s-fb-end { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }

/* Her-renderbare slot in een persistente balk: onzichtbaar voor de flex-layout. */
.l2s-fb-slot { display: contents; }


/* Lege state-filterbalk = ONZICHTBAAR, overal (owner 07-09: "die gekke streep zonder functie mag
   echt overal weg"; opnieuw gemeld 14-09 nadat commit 74140068 deze regel had verwijderd).
   NIET WEGHALEN zonder de balk elders te verbergen: hij draagt bg-body + shadow + py-2 en is dus
   een zichtbare witte streep op élk meta-scherm dat 'm niet vult.

   STAND 21-09-2026: het oude commentaar noemde sponsors/trainers/shop_order als vullers. Dat klopte
   niet meer — de enige overgebleven vuller is modules/players (de team-keuze). Die draagt sinds
   vandaag zijn as ook in de actie-rail en markeert de balk met `data-manage-actions-replaces`, dus
   op smal scherm verdwijnt hij daar. Deze regel blijft voor alle schermen die de balk leeg laten. */
#stateFilters:empty { display: none; }

@media (max-width: 640px) {
  .l2s-fb-search { flex-basis: 100%; order: -1; }
  .l2s-fb-pillwrap { flex: 1 1 45%; }
  .l2s-fb-pillwrap .l2s-fb-pill { width: 100%; justify-content: space-between; }
  .l2s-fb-end { margin-left: 0; flex: 1 1 100%; justify-content: flex-end; }
}

/* ============================================================================
   ACTIE-RAIL — de mobiele bediening van élk beheerscherm (.l2s-ar + .l2s-sheet--ar)
   ---------------------------------------------------------------------------
   Canon: standards/manage-actions-ccp.md · mockup: standards/mockups/platform/actie-rail-mobiel.mockup.html
   Owner-besluit 2026-09-20: variant A (verticale rail), woorden AAN in comfort, WEG in sport-modus.

   HET MENTALE MODEL
     LINKS / ONDER = WAAR BEN IK      .l2sb (rail) + .l2sb-tabs (tabbar) — navigatie, globaal
     RECHTS        = WAT DOE IK HIER  .l2s-ar                            — acties, lokaal aan dit scherm

   WAAROM DIT BLOK ONDERAAN STAAT: core.css wordt door meerdere parallelle takken geraakt. Een
   aangehecht blok + een paar losse tokens in :root houdt de merge-conflictkans op vrijwel nul.

   DE VORM is bewust identiek aan de sport-modus-rail uit core/views/partials/app-sidebar.php:
   merk-capsule met puntjesraster + diagonale gradient, ring + diepteschaduw + merk-halo, en
   "primair" = WITTE pill met merk-tekst (hetzelfde idioom als `.l2sb a.is-on`). Zo voelt het als
   één familie in plaats van een tweede uitvinding.

   GEEN backdrop-filter: dat maakt een containing block voor `position:fixed` kinderen en knipt in
   Chrome uitstekende kinderen weg — precies de val die de flyout van de nav-rail sloopte
   (ui-ux-design-system §8).
   ========================================================================== */

/* Boven de rail-grens bestaat de rail niet: daar rendert de filterbar-canon (.l2s-fb*). */
.l2s-ar { display: none; }

@media (max-width: 900px) {

  /* DE VORM (owner-referentie 2026-09-20): een ZWEVENDE CAPSULE — volledig rond, in de clubkleur,
     met een zachte verticale verloop van licht naar donker en een glas-achtige doorkijk. Wit
     lijn-icoon, ruime tussenruimte. Dat is de look die de owner aanwees; de kleur komt uit
     var(--ui-brand), dus elke club krijgt 'm in zijn eigen hoofdkleur. */
  /* DE BALK ONDERAAN (owner 25-09). Was een zwevende capsule rechts; nu één horizontale balk op
     de plek waar eerst de hub-tabbar stond. Reden: één plek voor álle bediening (de tabbar is
     vervallen, z'n «Meer» is hier «Menu» geworden) en horizontaal is er ~60px per punt — ruim
     genoeg voor de woorden, terwijl ze in de 56px-capsule niet meer pasten. */
  .l2s-ar {
    position: fixed;
    left: var(--ui-ar-x, 8px);
    right: var(--ui-ar-x, 8px);
    bottom: calc(var(--ui-ar-x, 8px) + env(safe-area-inset-bottom, 0px));
    z-index: 1060;                     /* zelfde laag als de FAB die hij vervangt */
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 2px;
    padding: 7px 6px;
    border-radius: 22px;
    /* Ondoorzichtige basis = de vangnet-laag. Kan de browser geen glas, dan blijft dit staan en is
       het contrast nog steeds precies wat de contrast-smoke meet. */
    background-color: var(--ui-brand);
    background-image: linear-gradient(180deg,
      color-mix(in srgb, var(--ui-brand) 88%, var(--ui-raise)),
      color-mix(in srgb, var(--ui-brand) 84%, var(--ui-text)));
    /* GEEN vaste-kleur terugval hier, en dat is een bewuste keuze (browsercheck 21-09).
       color-mix() bestaat pas vanaf Safari 16.2 / Chrome 111 / Firefox 113; oudere browsers laten
       deze regel vallen en tonen de capsule dan zónder dit randje. Een `rgba(255,255,255,…)` ervoor
       zou dat oplossen — maar alleen voor clubs met een DONKERE merkkleur. `--ui-on-brand` wordt per
       club berekend (l2s_contrast_ink) en is bij een lichte clubkleur juist donker; een witte rand
       op een lichte capsule is dan zichtbaar fout. Liever een ontbrekend randje op een browser uit
       2022 dan een verkeerde kleur bij een deel van de clubs. */
    border: 1px solid color-mix(in srgb, var(--ui-on-brand) 26%, transparent);
    box-shadow:
      0 1px 0 color-mix(in srgb, var(--ui-on-brand) 22%, transparent) inset,
      0 14px 34px rgba(15, 23, 42, .28),
      0 0 26px color-mix(in srgb, var(--ui-brand) 30%, transparent);
    transition: transform .22s var(--ui-sheet-ease), opacity .18s ease;
  }
  /* (De luwte — wegglijden tijdens het scrollen — is 25-09 vervallen: nu de balk ook de deur
     naar het menu draagt, is áltijd zichtbaar rustiger. De filter-strip reageert nog wél op scroll.) */

  /* ── NATIVE-GEVOEL IN DE BROWSER (owner 23-09) ─────────────────────────────────────────────
     1. TREK-OM-TE-VERVERSEN: de wijzer die @lib/gestures.js bovenaan neerzet terwijl je trekt.
        `overscroll-behavior-y: contain` dempt de browser-eigen versie (Chrome-Android) zodat er
        op elk toestel precies ÉÉN gebaar bestaat; iOS-Safari had er geen. */
  /* De rem hing aan `has-l2s-ar` — de klasse van een GEMOUNTE balk. In een flow is die er soms niet
     (een scherm mag z'n bediening opruimen), en dan was de browser-eigen trek-om-te-verversen daar
     weer actief. `has-l2sb` staat op élke pagina met de app-schil, dus dáár hoort de rem (26-09). */
  body.has-l2sb,
  body.has-l2s-ar { overscroll-behavior-y: contain; }
  .l2s-ptr {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1070;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-card);
    color: var(--ui-muted-strong);
    border: 1px solid var(--ui-border);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
    opacity: 0;
    pointer-events: none;
  }
  .l2s-ptr__ico { font-size: 18px; line-height: 1; }
  .l2s-ptr.is-klaar { color: var(--ui-brand); border-color: var(--ui-brand); }
  @media (prefers-reduced-motion: no-preference) {
    .l2s-ptr.is-bezig .l2s-ptr__ico { animation: l2s-ptr-draai .7s linear infinite; }
  }

  /* 2. TAP-FEEDBACK: een korte, voelbare indruk op alles wat je aanraakt — hét verschil tussen
        "website" en "app". Alleen mét bewegingsvoorkeur; de kleurtaal verandert niet. */
  @media (prefers-reduced-motion: no-preference) {
    .l2s-tbl-cards tr:active,
    .l2s-sheet__row:active,
    .l2s-sheet__pil:active,
    .l2s-fb-tab:active,
    .l2s-nav-tab:active,
    .l2s-ar__btn:active {
      transform: scale(.97);
      transition: transform .06s ease;
    }
  }
  /* Glas — alléén waar de browser het kan. BELANGRIJK: het verbod op backdrop-filter in
     ui-ux-design-system §8 gaat over de NAV-rail, omdat die een `position:fixed` flyout als KIND
     heeft; een filter maakt daar een containing block van en zet die flyout op de verkeerde plek.
     De actie-rail heeft geen fixed kinderen — de bladen zijn losse modals aan document.body — dus
     hier speelt dat niet. De vulling blijft bewust ≥82% dekkend: je moet de iconen ook kunnen lezen
     boven een foto. Meten doet tests/smoke/theming-contrast.smoke.js. */
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .l2s-ar {
      background-image: linear-gradient(180deg,
        color-mix(in srgb, var(--ui-brand) 84%, transparent),
        color-mix(in srgb, var(--ui-brand) 92%, var(--ui-text)));
      -webkit-backdrop-filter: blur(14px) saturate(1.25);
      backdrop-filter: blur(14px) saturate(1.25);
    }
  }

  /* (De oude regel «naast de tabbar» is 25-09 vervallen: waar de rail staat is er géén tabbar meer
     — de rail STÁAT op die plek en draagt met «Menu» de deur naar de modules. Zie app-sidebar.php.) */

  /* GEEN GOOT MEER (owner 23-09: „records over het hele scherm — nu houd je echt een hele rail
     over aan de zijkant”). Tot 23-09 kreeg elk body-kind hier padding-right zodat inhoud de rail
     niet raakte (gemeten 21-09: kaarten liepen 32px onder de rail door). Dat besluit is omgekeerd
     nu de rail LUWTE heeft: tijdens het scrollen — hét moment waarop je rijknoppen aan de rechterrand
     bedient — is de capsule van het scherm af, en in rust ligt hij als overlay óver de volle-breedte
     inhoud. De inline-goot-schrijver in manage-actions.js is met dezelfde beweging verwijderd;
     `data-l2s-geen-goot` bestaat niet meer. */

  /* WAT DE RAIL VERVANGT, VERDWIJNT — anders staat elke knop er twee keer.
     Een module markeert de balk die de rail overneemt met `data-manage-actions-replaces`; op smal
     scherm verbergt core 'm. Dit is bewust een ATTRIBUUT en geen module-klasse: de regel hoort bij
     de rail (core), niet bij de module, en zo hoeft geen enkele module eigen verberg-CSS te schrijven.
     Gevonden in de dry-run van de customers-pilot: de kopknoppen "Groepen & tags", "Importeren" en
     "+ Nieuwe klant" stonden óók nog boven de lijst terwijl ze al in de rail zaten.

     LET OP — deze regel is NIET genoeg, en dat bleek pas in de browser (21-09). De zoekkaart van de
     meta-crud-schil draagt de Bootstrap-klasse `d-flex`, en die zet `display: flex` met de
     prioriteitsvlag erachter.
     Specificiteit doet er dan niet meer toe: de kaart bleef staan naast de rail, op élk meta-crud
     scherm — dus op élke module die de generieke laag gebruikt. De rail zet daarom bij het mounten
     óók een inline `display:none` mét prioriteit (manage-actions.js, verbergVervangen); alleen
     inline-met-prioriteit wint van een utility-klasse. Deze CSS-regel blijft staan als vangnet voor
     het geval JS niet draait. (De css-discipline-gate telt die vlag ook in COMMENTAAR mee, dus hij
     staat hier bewust uitgeschreven in plaats van als code.) */
  body.has-l2s-ar [data-manage-actions-replaces] { display: none; }

  /* De rail vervangt de FAB op smal scherm: "Nieuw" is het onderste slot. We verbergen de SCHIL
     #globalFab — die bevat zowel de plus-knop als het menu, dus één selector volstaat. Bewust NIET
     de knop-id zelf: die bestaat uit drie hex-letters en de css-discipline-gate telt zo'n selector
     als een hardgecodeerde kleur. Zie footer.fab.inc.php voor de structuur. */
  body.has-l2s-ar #globalFab { display: none; }

  /* #fabLive ("Bekijk site") leeft BUITEN die schil en blijft dus staan — maar hij zweeft rechtsonder
     en zou onder de rail vallen. Schuif 'm naar links van de rail. */
  body.has-l2s-ar .fab-live {
    right: calc(var(--ui-ar-w, 56px) + var(--ui-ar-x, 8px) + 12px);
  }

  /* Wegschuiven bij naar-beneden-scrollen. Comfort, geen correctie: de goot houdt de inhoud al vrij,
     dus wie dit uitzet verliest niets. */
  .l2s-ar.is-away {
    transform: translateX(calc(100% + var(--ui-ar-x, 8px) + 10px));
    opacity: 0;
    pointer-events: none;
  }

  /* DE FILTER-HERINNERING BOVENIN (owner 22-09). Scroll je de paginakop uit beeld, dan verdwijnt
     elk spoor van wat je aan het bekijken bent — en wie vergeten is dat «Alleen actief» aanstond,
     denkt dat er klanten kwijt zijn. Deze pil zegt subtiel wélk filter of welke zoekterm er
     aanstaat, en tikken opent het bijbehorende blad. Hij bestaat alleen als er echt iets afwijkt
     van de standaard; JS zet .is-zichtbaar zodra de kop uit beeld is (manage-actions.js).
     Gevulde --sub = "hier staat een keuze aan", dezelfde taal als de filterbar en de tel-badge. */
  .l2s-ar-topfilter {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 50%;
    z-index: 1050;                       /* onder de bladen (modals) en onder de rail */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100vw - var(--ui-ar-w, 56px) - 44px);
    min-height: 32px;                    /* bewust compacter dan een tikdoel-knop: het is een
                                            herinnering; het echte werk gebeurt in het blad dat
                                            de tik opent, en 44px zou hier een balk maken */
    padding: 4px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--sub);
    color: var(--ui-on-sub);
    font-size: var(--ui-fs-sm, 15px);   /* de comfort-ondergrens — "subtiel" zit 'm in de vorm, niet in onleesbaarheid */
    font-weight: 700;
    box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .22);
    opacity: 0;
    transform: translateX(-50%) translateY(-12px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    cursor: pointer;
  }
  .l2s-ar-topfilter.is-zichtbaar {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }
  /* Comfort-maat zonder een balk te worden: de pil oogt 32px, maar het RAAKVLAK is 48px —
     de onzichtbare rand eromheen vangt de tik. Zelfde afspraak als elders: klein mag er alleen
     UITZIEN, niet aanvoelen. */
  .l2s-ar-topfilter::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 999px;
  }
  .l2s-ar-topfilter__icoon { opacity: .85; }   /* erft de tekstmaat; kleiner maken zakte onder de comfort-ondergrens */
  .l2s-ar-topfilter__tekst {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (prefers-reduced-motion: reduce) {
    .l2s-ar-topfilter { transition: none; }
  }

  /* OFFLINE-EERLIJKHEID (§14.11): een slanke balk onderin, boven de tabbar, die zegt dat de
     verbinding weg is — en heel even dat hij terug is. Statuskleuren uit de gedeelde tokens. */
  .l2s-offline {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);   /* boven de mobiele tabbar */
    z-index: 1049;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--st-warn-line);
    background: var(--st-warn-bg);
    color: var(--st-warn-ink);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .18);
  }
  .l2s-offline.is-terug {
    border-color: var(--st-ok-line);
    background: var(--st-ok-bg);
    color: var(--st-ok-ink);
  }

  .l2s-ar__btn {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--ui-target-sm, 44px);
    padding: 6px 2px 5px;
    border-radius: 999px;
    color: var(--ui-on-brand);
    position: relative;
    /* `manipulation` zet de dubbeltik-zoom uit; zonder dat wacht een mobiele browser tot ~300ms
       af of er een tweede tik komt, en precies die pauze maakt een webapp "traag" waar een
       native app dat niet is. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .12s ease, color .12s ease, transform .06s ease;
  }
  /* Indrukken moet je ZIEN vóór er iets geladen is — dat is het verschil tussen "reageert" en
     "hangt". 60ms, dus het voelt als een knop en niet als een animatie. */
  .l2s-ar__btn:active { transform: scale(.94); }
  @media (prefers-reduced-motion: reduce) { .l2s-ar__btn:active { transform: none; } }
  .l2s-ar__btn:hover {
    background-color: color-mix(in srgb, var(--ui-on-brand) 14%, transparent);  /* geen vaste terugval — zie de rand van .l2s-ar */
    color: var(--ui-on-brand);
  }
  .l2s-ar__btn:focus-visible {
    outline: 3px solid var(--ui-on-brand);
    outline-offset: -3px;
  }

  /* Bootstrap-icoon (<i class="bi bi-…">). 22px is BEWUST geen raakvlak — de knop eromheen is dat
     (≥44px, zie .l2s-ar__btn hierboven). */
  .l2s-ar__ico { font-size: 23px; line-height: 1; flex: 0 0 auto; }

  /* ICOON-ONLY (`.l2s-ar--icons`) — de zwevende icoonpil uit de owner-referentie. Het label is dan
     alleen VISUEEL geklemd; `display:none` zou het ook voor schermlezers wissen en blijft verboden
     (ui-ux-design-system §8). Zet deze klasse alleen als de owner dat voor dit scherm koos. */
  .l2s-ar--icons { gap: 10px; padding: 12px 6px; }
  .l2s-ar--icons .l2s-ar__lbl {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .l2s-ar--icons .l2s-ar__btn { padding: 0; }

  /* Gelijke breedte per punt: de balk verdeelt zichzelf, dus 4 of 6 punten oogt allebei rustig. */
  .l2s-ar__btn { flex: 1 1 0; min-width: 0; }

  /* Ruimte onder de laatste rij, zodat de balk nooit inhoud afdekt. Eén regel voor élk scherm met
     een rail; app-sidebar.php laat z'n eigen tabbar-spacer dan bewust vallen (één van de twee matcht). */
  body.has-l2s-ar::after {
    content: "";
    display: block;
    height: calc(80px + env(safe-area-inset-bottom, 0px));
  }
  .l2s-ar__lbl {
    font-size: var(--ui-fs-label, 15px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.01em;
  }
  /* «Kanalen» (het langste slot-woord) paste niet in de capsule van 56px (owner 23-09, gezien op
     producten): alleen dát label een maat kleiner + iets strakker gespatieerd. Bewuste, gerichte
     uitzondering op de 15px-vloer — de overige labels blijven op de comfort-baseline. */
  .l2s-ar__btn[data-act="channels"] .l2s-ar__lbl {
    font-size: 12.5px;
    letter-spacing: -.02em;
  }

  /* PRIMAIR = "Nieuw": witte pill met merk-tekst. Exact `.l2sb a.is-on`. */
  .l2s-ar__btn--primary {
    background-color: var(--ui-card);
    color: var(--ui-brand);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    border-radius: 15px;               /* pil i.p.v. cirkel: horizontaal is de knop breder dan hoog */
  }
  /* («Nieuw» droeg z'n woord sinds 23-09 alleen voor schermlezers: in de 56px-capsule at het witte
     rondje het witte label op. In de balk onderaan is die reden vervallen — er is ruime plek, dus
     het woord staat er weer gewoon, zoals bij elk ander punt: designsysteem §8.) */

  .l2s-ar__btn--primary:hover {
    background-color: var(--ui-card);
    color: var(--ui-brand);
    filter: brightness(.97);
  }
  html.l2s-sport .l2s-ar__btn--primary { background-color: var(--ui-on-brand); }

  /* Een actief filter mag NOOIT onzichtbaar zijn — zelfde regel als de select-semantiek van de
     filterbar-canon (ui-ux-design-system §5). */
  /* "HIER STAAT IETS AAN" — ÉÉN VORM, TWEE MATEN. De badge draagt een AANTAL (filter-assen), de
     stip een ja/nee (zoekterm: die is er één of geen). Ze delen daarom vorm, kleur en schaduw in
     één regel: zou de stip z'n eigen kleur+schaduw hebben, dan loopt hij stil uit de pas zodra de
     badge verandert — en dan leest het oog twéé talen voor hetzelfde signaal. Alleen maat en plek
     verschillen. Waarom de stip er überhaupt is: de badge telt assen en `state.q` zit daar niet in,
     dus was een actieve zoekterm de enige versmalling zonder spoor in de altijd-zichtbare balk
     (owner 25-09; manage-actions-ccp §7.10). */
  .l2s-ar__badge,
  .l2s-ar__dot {
    position: absolute;
    border-radius: 999px;
    background-color: var(--ui-card);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  }
  .l2s-ar__badge {
    top: 2px;
    right: 6px;
    min-width: 19px;
    height: 19px;
    color: var(--ui-brand);
    font-size: var(--ui-fs-label, 15px);
    font-weight: 800;
    display: grid;
    place-items: center;
    padding: 0 5px;
  }
  .l2s-ar__dot {
    top: 5px;
    right: 9px;
    width: 10px;
    height: 10px;
  }
  html.l2s-sport .l2s-ar__badge,
  html.l2s-sport .l2s-ar__dot { background-color: var(--ui-on-brand); }

  /* Verticale scheiding: het oog leest «navigatie | gereedschap | de ene primaire actie». */
  .l2s-ar__split {
    flex: 0 0 1px;
    width: 1px;
    align-self: stretch;
    margin: 6px 3px;
    background-color: color-mix(in srgb, var(--ui-on-brand) 24%, transparent);
  }

  /* SPORT-MODUS: icoon-only. Dit hergebruikt de ENIGE bestaande uitzondering op "een icoon draagt
     altijd zijn woord" (ui-ux-design-system §8) — de gebruiker kiest daar zelf voor. Het label is
     alleen VISUEEL weggeklemd; `display:none` zou het ook voor schermlezers wissen en blijft verboden. */
  html.l2s-sport .l2s-ar { gap: 10px; padding: 12px 6px; }
  html.l2s-sport .l2s-ar__btn { padding: 0; }
  html.l2s-sport .l2s-ar__lbl {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ── HET BLAD ───────────────────────────────────────────────────────────────────────────────
     Een blad IS een Bootstrap-modal met .l2s-sheet (zoals Confirm() al doet) + .l2s-sheet--ar.
     Daarmee zijn backdrop, focus-trap, Escape, scroll-lock en z-index-stapeling al geregeld.
     .l2s-sheet zelf schuift pas ≤575,98px van onderen; de rail-bladen doen dat tot de rail-grens. */
  .l2s-sheet--ar .modal-dialog {
    margin: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
  }
  .l2s-sheet--ar .modal-content {
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* TOP-BLAD (owner 23-09): het ZOEK-blad hangt bovenaan i.p.v. onderaan — het veld blijft boven
     het toetsenbord zichtbaar en de lijst filtert er live onder. Grip naar de onderrand (daar pak
     je 'm), hoeken gespiegeld, en de veeg-om-te-sluiten gaat omhoog (gestures.js, direction 'up'). */
  .l2s-sheet--ar.l2s-sheet--top .modal-dialog { bottom: auto; top: 0; }
  .l2s-sheet--ar.l2s-sheet--top .modal-content {
    border-radius: 0 0 20px 20px;
    padding-bottom: 8px;
    padding-top: calc(4px + env(safe-area-inset-top));
  }
  .l2s-sheet--ar.l2s-sheet--top .l2s-sheet__grip { order: 99; margin-top: 10px; }
}

/* Vorm van het blad — geldt op elke breedte waar het blad gebruikt wordt (de mount beslist).
   De inhoud scrollt BINNEN het blad; kop en voet blijven staan. Daarom flex-kolom + een body die
   als enige mag scrollen: anders scrollt de pagina eronder mee en verlies je je plek in de lijst. */
.l2s-sheet--ar .modal-content { display: flex; flex-direction: column; }
.l2s-sheet--ar .modal-header { border-bottom: 0; align-items: center; gap: 10px; padding: 2px 16px 8px; }
/* De merk-gloedlijn onder een modal-kop (§15) is een desktop-accent; in een bottom-sheet oogt hij
   als een rode veeg boven het zoekveld (owner-screenshot 23-09) — hier dus uit. */
.l2s-sheet--ar .modal-header::after { content: none; }
.l2s-sheet--ar .modal-title { flex: 1; font-weight: 800; }
.l2s-sheet--ar .modal-body { overflow-y: auto; padding: 0 10px 8px; }

/* HET GELEENDE ZOEKVELD IN HET BLAD (owner 23-09: „niet netjes gecentreerd, geen ruimte, ronde
   omlijning niet mooi”). Buiten het blad houdt .l2s-fb-search de filterbar-look (pil, 220px basis);
   híér vult het veld de volle regel, met strakke hoeken en een rustige focus in de merkkleur —
   niet de schreeuwende sub-kleur-pil van de brede balk. */
.l2s-sheet--ar .l2s-fb-search {
  display: flex;
  width: auto;
  flex: none;
  min-width: 0;
  margin: 6px 6px 4px;
  min-height: var(--ui-target, 48px);
  padding: 0 14px;
  border-radius: 12px;
}
.l2s-sheet--ar .l2s-fb-search:focus-within {
  border-color: color-mix(in srgb, var(--ui-brand) 45%, var(--ui-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-brand) 14%, transparent);
}
/* Het veld is geleend en kan module-eigen rand/hoeken meedragen — in het blad tekent de WRAP de rand. */
.l2s-sheet--ar .l2s-fb-search > input {
  appearance: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Toelichting onder het zoekveld: gewone zin, gedempt — géén groepskop-kapitalen. */
.l2s-sheet__hint {
  font-size: var(--ui-fs-sm, 15px);
  color: var(--ui-muted);
  padding: 0 12px 8px;
}
.l2s-sheet--mini .modal-content { max-height: 62vh; }
.l2s-sheet--tall .modal-content { max-height: 88vh; }

/* Het zoekveld in het zoek-blad hergebruikt de vorm van de filterbar-canon (.l2s-fb-search). */
.l2s-sheet__zoek {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: var(--ui-fs-base, 16px);
  color: var(--ui-text);
}
.l2s-sheet--ar .l2s-fb-search { margin: 0 6px 4px; }

.l2s-sheet__grip {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background-color: var(--ui-border);
  margin: 9px auto 3px;
  flex: 0 0 auto;
}

/* ── HET SLICER-BLAD (manage-actions-ccp §3.3b) ────────────────────────────────────────────────
   Een keuzelijst met vinkjes bleek onleesbaar: je zag niet wát je zag, de tellingen telden op twee
   assen verschillend op, een vinkje bij "Alle" betekende juist "niets gefilterd", en drie assen
   duwden de laatste onder de vouw. Deze vorm zegt eerst in een zin wat je ziet en toont daarna per
   as ÁLLE keuzes tegelijk — de gevulde vorm ís het antwoord, dus geen vinkjes en geen tweede
   actief-signaal. Actief = --sub (§2); de merkkleur blijft voor de knop onderin.
   ------------------------------------------------------------------------------------------- */
.l2s-sheet__zin { padding: 2px 16px 10px; }
.l2s-sheet__zin b { display: block; font-size: var(--ui-fs-title, 19px); font-weight: 800; line-height: 1.25; }
.l2s-sheet__zin span { display: block; color: var(--ui-muted-strong); font-size: var(--ui-fs-sm, 15px); margin-top: 2px; }

.l2s-sheet__chips { display: flex; gap: 7px; flex-wrap: wrap; padding: 0 16px 8px; }
.l2s-sheet__fchip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: var(--ui-target-sm, 44px);
  padding: 0 10px 0 13px; border: 0; border-radius: 999px;
  background-color: var(--sub); color: var(--ui-on-sub);
  font: inherit; font-size: var(--ui-fs-sm, 15px); font-weight: 700; cursor: pointer;
  touch-action: manipulation;
}
html.l2s-sport .l2s-sheet__fchip { background-color: var(--ui-brand); color: var(--ui-on-brand); }
.l2s-sheet__fchip i { opacity: .8; }

/* Primaire as: getal groot, woord eronder. Overzicht en bediening in één. */
.l2s-sheet__tegels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 8px; padding: 0 10px 4px;
}
.l2s-sheet__tegel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 64px; padding: 6px 4px;
  border: 1px solid var(--ui-border); border-radius: 14px;
  background-color: var(--ui-card); color: var(--ui-text);
  font: inherit; cursor: pointer; touch-action: manipulation;
  transition: transform .06s ease;
}
.l2s-sheet__tegel:active { transform: scale(.96); }
.l2s-sheet__tegel:focus-visible { outline: 3px solid var(--ui-brand); outline-offset: 2px; }
.l2s-sheet__tegel b { font-size: 22px; font-weight: 800; line-height: 1; }
.l2s-sheet__tegel span {
  font-size: var(--ui-fs-sm, 15px); font-weight: 600; color: var(--ui-muted-strong);
  text-align: center; line-height: 1.15;
}
.l2s-sheet__tegel.is-on { background-color: var(--sub); border-color: var(--sub); color: var(--ui-on-sub); }
.l2s-sheet__tegel.is-on span { color: var(--ui-on-sub); opacity: .85; }
html.l2s-sport .l2s-sheet__tegel.is-on { background-color: var(--ui-brand); border-color: var(--ui-brand); color: var(--ui-on-brand); }
html.l2s-sport .l2s-sheet__tegel.is-on span { color: var(--ui-on-brand); }

/* Overige assen: één regel die opzij schuift — je ziet dát er meer is. */
/* WRAPPEN, NIET SCHUIVEN (browsercheck 21-09-2026).
   Dit was een zijwaarts schuivende rij van één regel — zo stond het ook in de mockup. Met ECHTE
   data valt dat om: de as «Klantsoort» van DevDoorn heeft zes opties met tellingen (772px aan
   pillen in een rij van 355px), dus stonden «Particulier 206», «Leads» en «Gearchiveerd 308»
   buiten beeld, zonder één zichtbare hint dat er meer was. De laatste zichtbare pil eindigde zelfs
   15px vóór de rand — dat leest als "dit is alles". Zelfs de vier pillen van de as «Type» bij
   personeel pasten niet.

   Dat is functionaliteitsverlies: op desktop staan alle zes keuzes in de filterbalk, op mobiel zag
   je er drie. Een gebruiker die niet weet dat een rij horizontaal schuift — en dat is precies de
   gebruiker waar dit voor gebouwd is — kán die filters niet vinden.

   Wrappen kost verticale ruimte, en die is in een blad dat tóch al verticaal scrollt het goedkoopst
   wat er is. Alles staat nu in beeld, zonder enige verborgen beweging. */
.l2s-sheet__pillen { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 4px; }

/* ── NATIVE-GEVOEL: drie dingen die een webpagina verraden (browsercheck 21-09) ──────────────────
   1. De grijze flits. Android Chrome en iOS tekenen bij elke tik een eigen grijs vlak over de knop.
      Dat vecht met onze eigen tik-terugkoppeling (scale .94) en je ziet twee verschillende reacties
      op één vinger. Uitzetten; onze eigen terugkoppeling blijft.
   2. Tekst selecteren. Een halve seconde te lang drukken op een rail-knop of een filterpil selecteert
      het woord, of opent op iOS het kopieer-menu. In een app kan dat niet. Alleen op de BEDIENING,
      nooit op lijstinhoud — die moet je wél kunnen kopiëren.
   3. Doorschuiven. Scroll je in het blad voorbij het einde, dan pakt de PAGINA erachter het over.
      `contain` houdt de beweging binnen het blad, zoals een native sheet. */
.l2s-ar,
.l2s-sheet--ar .modal-content { -webkit-tap-highlight-color: transparent; }

.l2s-ar__btn,
.l2s-sheet__pil,
.l2s-sheet__tegel,
.l2s-sheet__kies,
.l2s-sheet__fchip,
.l2s-sheet__terug {
  -webkit-user-select: none;
  user-select: none;
}

.l2s-sheet--ar .modal-body { overscroll-behavior: contain; }

/* Een keuze zonder treffers zakt weg, maar blijft leesbaar en aantikbaar (zie isLeeg in de lib).
   Bewust géén display:none: een verdwenen filter voelt als een kwijtgeraakte functie. */
.l2s-sheet__pil.is-leeg,
.l2s-sheet__tegel.is-leeg { opacity: .55; }
.l2s-sheet__pil {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--ui-target-sm, 44px); padding: 0 14px;
  border: 1px solid var(--ui-border); border-radius: 999px;
  background-color: var(--ui-card); color: var(--ui-muted-strong);
  font: inherit; font-size: var(--ui-fs-sm, 15px); font-weight: 700;
  white-space: nowrap; cursor: pointer; touch-action: manipulation;
}
.l2s-sheet__pil.is-on { background-color: var(--sub); border-color: var(--sub); color: var(--ui-on-sub); }
html.l2s-sport .l2s-sheet__pil.is-on { background-color: var(--ui-brand); border-color: var(--ui-brand); color: var(--ui-on-brand); }
.l2s-sheet__pil i { font-style: normal; font-weight: 700; opacity: .65; }
.l2s-sheet__pil.is-on i { opacity: .85; }

/* Lange as: één regel die opengaat. Dertig producten kosten zo één regel in plaats van dertig. */
.l2s-sheet__kies {
  display: flex; align-items: center; gap: 10px;
  width: calc(100% - 12px); margin: 0 6px; padding: 8px 10px;
  min-height: var(--ui-target, 48px);
  border: 1px solid var(--ui-border); border-radius: 14px;
  background-color: var(--ui-card); color: var(--ui-text);
  font: inherit; text-align: left; cursor: pointer; touch-action: manipulation;
}
.l2s-sheet__kies b { flex: 1; font-weight: 600; font-size: var(--ui-fs-base, 16px); }
.l2s-sheet__kies em { font-style: normal; font-weight: 800; font-size: var(--ui-fs-sm, 15px); color: var(--ui-muted-strong); }
/* Periode-blad: ‹ · label · › en een knop naar vandaag. */
.l2s-sheet__per { display: flex; align-items: center; gap: 8px; padding: 4px 10px 6px; }
.l2s-sheet__per b { flex: 1; text-align: center; font-size: var(--ui-fs-base, 16px); font-weight: 800; }
.l2s-sheet__pernav {
  min-height: var(--ui-target, 48px); min-width: var(--ui-target, 48px);
  border: 1px solid var(--ui-border); border-radius: 14px;
  background-color: var(--ui-card); color: var(--ui-text);
  font: inherit; font-size: var(--ui-fs-title, 19px); font-weight: 800;
  cursor: pointer; touch-action: manipulation;
}
.l2s-sheet__pernu {
  display: block; width: calc(100% - 20px); margin: 0 10px 4px;
  min-height: var(--ui-target-sm, 44px);
  border: 1px solid var(--ui-border); border-radius: 12px;
  background-color: var(--ui-card); color: var(--ui-text);
  font: inherit; font-size: var(--ui-fs-sm, 15px); font-weight: 700;
  cursor: pointer; touch-action: manipulation;
}

.l2s-sheet__terug {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--ui-target-sm, 44px); padding: 0 8px;
  border: 0; background: transparent; color: var(--ui-muted-strong);
  font: inherit; font-size: var(--ui-fs-sm, 15px); font-weight: 700; cursor: pointer;
}

.l2s-sheet__grp {
  font-size: var(--ui-fs-label, 15px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ui-muted-strong);
  padding: 12px 8px 5px;
}

/* Een keuzerij in een blad: raakvlak ≥48px, label links, telling of vinkje rechts. */
.l2s-sheet__row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ui-text);
  min-height: var(--ui-target, 48px);
  padding: 8px;
  border-radius: 12px;
}
.l2s-sheet__row:hover { background-color: var(--ui-sunken); }
.l2s-sheet__row { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.l2s-sheet__row:active { background-color: var(--ui-border); }
.l2s-sheet__row:focus-visible { outline: 3px solid var(--ui-brand); outline-offset: -3px; }
.l2s-sheet__row > b { flex: 1; min-width: 0; font-weight: 600; font-size: var(--ui-fs-base, 16px); }
.l2s-sheet__row.is-on > b { font-weight: 800; }
.l2s-sheet__lbl { display: block; }
.l2s-sheet__sub {
  display: block;
  font-weight: 500;
  font-size: var(--ui-fs-sm, 15px);
  color: var(--ui-muted-strong);
  margin-top: 1px;
}
.l2s-sheet__cnt {
  font-size: var(--ui-fs-label, 15px);
  font-weight: 700;
  color: var(--ui-muted-strong);
  background-color: var(--ui-sunken);
  border-radius: 999px;
  padding: 2px 9px;
  min-width: 26px;
  text-align: center;
}
.l2s-sheet__row.is-on .l2s-sheet__cnt { background-color: var(--sub); color: var(--ui-on-sub); }
html.l2s-sport .l2s-sheet__row.is-on .l2s-sheet__cnt { background-color: var(--ui-brand); color: var(--ui-on-brand); }
.l2s-sheet__chk { width: 22px; height: 22px; color: var(--ui-brand); opacity: 0; flex: 0 0 auto; }
.l2s-sheet__row.is-on .l2s-sheet__chk { opacity: 1; }

/* Rij met een chip-icoon (het "Nieuw"-blad) — zelfde DNA als .l2s-fab-item. */
.l2s-sheet__chip {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--ui-brand);
  background-image: linear-gradient(135deg, var(--ui-raise), var(--ui-sunken));
}
.l2s-sheet__go { width: 18px; height: 18px; color: var(--ui-muted); flex: 0 0 auto; }

/* Vaste voet met de telling-en-sluiten-knop ("Toon 96 klanten"). Geen bevestiging: het blad heeft
   z'n werk al gedaan bij elke tik (manage-actions-ccp §3.3). */
.l2s-sheet__foot {
  flex: 0 0 auto;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ui-border);
  background-color: var(--ui-card);
}
.l2s-sheet__cta {
  width: 100%;
  min-height: var(--ui-target, 48px);
  border: 0;
  border-radius: 14px;
  background-color: var(--ui-brand);
  color: var(--ui-on-brand);
  font: inherit;
  font-size: var(--ui-fs-base, 16px);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-brand) 35%, transparent);
}
.l2s-sheet__cta:focus-visible { outline: 3px solid var(--sub); outline-offset: 2px; }

.l2s-sheet__wis {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--ui-fs-sm, 15px);
  font-weight: 700;
  color: var(--ui-muted-strong);
  text-decoration: underline;
  cursor: pointer;
  min-height: var(--ui-target-sm, 44px);
  padding: 0 4px;
}

/* ============================================================================
   .l2s-tbl-cards — EEN RECORD-TABEL WORDT EEN KAART OP SMAL SCHERM
   ---------------------------------------------------------------------------
   Canon: manage-actions-ccp §3.5 · ux-responsive-standard §2 ("tabel-/lijstweergaven verkleinen
   netjes naar kaarten op mobiel") · designsysteem §5.

   HET PROBLEEM: members (5 kolommen) en workforce (6 kolommen) rendert een tabel in een wrapper met
   `overflow-x:auto`. Op een telefoon betekent dat zijwaarts schuiven — precies wat
   ux-responsive-standard §8 verbiedt ("Geen horizontaal scrollen"). De actie-rail loste het
   FILTEREN op; dit lost de TABEL op.

   HOE: onder de rail-grens wordt elke rij een kaart. De eerste cel is de titel, de Status-cel gaat
   als chip naar rechtsboven, en de overige cellen worden label/waarde-paren die naast elkaar passen
   en onder elkaar vallen als ze dat niet doen. **Er verdwijnt GEEN kolom** — dat zou het probleem
   omruilen voor een ander.

   TWEE DINGEN OM TE WETEN
   - `data-label` op elke cel is verplicht; de module zet dat in één regel ná het bouwen van de rij
     (`[...tr.children].forEach((td,i) => td.setAttribute('data-label', kolommen[i]))`), zodat er
     geen cel vergeten kan worden als er ooit een kolom bijkomt.
   - De selectoren beginnen met `table.` (en `div.` bij de wrapper) omdat de module-stylesheets ná
     core.css laden en hun eigen `.l2s-xx__table td`-regels dezelfde specificiteit hebben. Dat ene
     element-deel tilt dit blok er nét overheen — zónder één override-vlag. Die zijn bevroren door
     gate 15, en ze zouden hier alleen de specificiteit verbergen die je toch al nodig hebt.
     (Diezelfde gate leest ook commentaar. Schrijf de vlag hier dus niet voluit — en let op
     id-selectoren van drie hex-letters: die telt hij als kleur. Deze regel liep daar zelf tegenaan.)

   CONVERGENTIE: `.table-cards--mobile` (het oudere meta-crud-patroon, gecentreerde tekst, eigen
   767,98px-grens) doet hetzelfde met een andere look. Die twee horen er één te worden; dat is een
   eigen opruimstap, niet iets om ongezien over vijftien meta-schermen uit te rollen.
   ========================================================================== */
@media (max-width: 900px) {
  /* De wrapper draagt op desktop het kader; in kaart-stand heeft elke kaart zijn eigen rand, en
     twee kaders om elkaar heen oogt kapot. */
  div.l2s-tbl-cards-wrap {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow-x: visible;
  }

  table.l2s-tbl-cards,
  table.l2s-tbl-cards tbody,
  table.l2s-tbl-cards tr { display: block; width: 100%; }
  /* Een module die z'n tabel een `min-width` gaf (finance: 720px, zodat de KOLOMMEN op desktop niet
     samendrukken) zou die breedte in kaartstand meenemen — en dan schuift de kaartlijst alsnog
     zijwaarts. In kaartstand bestaan er geen kolommen meer, dus de ondergrens vervalt. */
  table.l2s-tbl-cards { min-width: 0; }
  /* De cel krijgt GEEN width:100%. De rij is een grid en een grid-item bepaalt zijn eigen breedte;
     met width:100% zou elk label/waarde-paar de volle regel claimen en vielen ze allemaal onder
     elkaar — precies wat de browsercheck van 21-09 liet zien. */
  table.l2s-tbl-cards td { display: block; }

  table.l2s-tbl-cards thead { display: none; }

  /* De actie-knoppen van een rij krijgen hun eigen regel onderaan de kaart, met een scheidingslijn.
     In de oude meta-crud-variant stonden ze gecentreerd tussen de waarden; als eigen rij is
     duidelijker WAT bij de rij hoort en WAT je ermee kunt. Het kopje blijft weg: knoppen dragen
     hun eigen woord. */
  table.l2s-tbl-cards td.actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--ui-border);
  }
  table.l2s-tbl-cards td.actions::before { display: none; }

  /* De rij-knoppen als RASTER, niet als flexrij (browsercheck 21-09). Met vier knoppen van ~54px in
     een cel van 229px paste de rij net niet: drie knoppen bovenaan en «Verwijderen» in z'n eentje
     eronder — scheef, en het kostte een halve kaarthoogte extra. `auto-fit` met een minimum van 44px
     verdeelt de beschikbare breedte gelijk: vier naast elkaar waar het past, en op een heel smal
     toestel netjes twee-en-twee in plaats van drie-en-één. Het minimum is meteen de tikmaat uit de
     comfort-baseline, dus de knoppen worden nooit te klein. */
  table.l2s-tbl-cards td.actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
    gap: 8px;
  }
  table.l2s-tbl-cards td.actions > * { width: 100%; }
  /* TEKSTknoppen (rij-flows zoals «Beveiliging», «Resetlink sturen») passen niet in één kolom van ~50–97px:
     de tekst werd afgekapt («Resetlink stur…», browsercheck 27-09). Twee kolommen breed, en mag afbreken
     naar een tweede regel; pictogramknoppen blijven één kolom. */
  table.l2s-tbl-cards td.actions > [data-action="flow"] {
    grid-column: span 2;
    white-space: normal;
    min-height: var(--ui-target-sm, 44px);
    line-height: 1.2;
  }

  /* EEN LEGE WAARDE ZEGT NIETS — en dat is precies het probleem. In de tabelstand zie je een lege
     cel in een kolom en weet je: hier staat niets. In kaartstand staat er alleen een kopje met
     witruimte eronder, en dat leest als "nog niet geladen" in plaats van "niet ingevuld". Eén
     streepje haalt die twijfel weg. `:empty` kijkt niet naar pseudo-elementen, dus het kopje
     hierboven telt niet mee. */
  table.l2s-tbl-cards td:empty::after {
    content: "—";
    display: block;
    color: var(--ui-muted-strong);
  }

  table.l2s-tbl-cards tr {
    position: relative;
    display: grid;
    /* TWEE kolommen, vast. `auto-fit` met een minimum leek slimmer maar deed twee keer het
       verkeerde (gemeten in de browsercheck van 21-09): bij 130px minimum paste er op een
       390px-toestel maar ÉÉN kolom, en op 800px maakte hij er vijf smalle van waardoor een e-mail
       midden in een woord afbrak terwijl er ruimte zat. Twee kolommen is op elke breedte
       voorspelbaar: 2×118px op een telefoon, 2×334px op een tablet. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin: 0 0 9px;
    /* GEVOELSSNELHEID (manage-actions-ccp §14.2, P6): een kaart die buiten beeld staat hoeft de
       browser niet op te maken. `auto` laat 'm het overslaan zolang de rij niet in de buurt van
       het scherm komt, en weer meedoen zodra je ernaartoe scrolt. Bij 500 rijen scheelt dat het
       leeuwendeel van de opmaaktijd; bij 10 rijen verandert er niets.
       Het tweede deel is geen detail maar de kern: zonder een geschatte hoogte klapt een
       overgeslagen rij naar nul en springt de schuifbalk. Het sleutelwoord `auto` ervoor zegt
       "onthoud de ECHTE hoogte zodra je 'm een keer hebt opgemaakt"; 96px is alleen de gok voor
       de allereerste keer (12+12 padding, titel, label/waarde-paar). */
    content-visibility: auto;
    contain-intrinsic-size: auto 96px;
    padding: 12px 14px;
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    background-color: var(--ui-card);
    box-shadow: var(--ui-shadow);
  }
  table.l2s-tbl-cards tr:active { box-shadow: var(--ui-shadow-outer-a); }

  table.l2s-tbl-cards td {
    padding: 0;
    border: 0;
    font-size: var(--ui-fs-base, 16px);
    font-weight: 600;
    line-height: 1.25;
    min-width: 0;
    /* `break-word` en niet `anywhere`: allebei breken een te lang woord af, maar `anywhere` telt die
       breekpunten óók mee bij het berekenen van een minimum-breedte. Dat verschil doet er hier niet
       toe zolang de twee kolommen op `minmax(0, 1fr)` staan — die zijn hard even breed, ongeacht de
       inhoud — maar wel bij de status-chip, die z'n eigen breedte bepaalt; daar voorkomt het een
       nodeloze knip middenin "goedkeuring".

       LET OP, en dat is eerlijker dan doen alsof dit opgelost is: in een kolom van ~108px past een
       woord als "Leveringen/diensten" gewoon niet, dus wordt het daar nog steeds middenin geknipt.
       Dat is een gevolg van twee vaste kolommen, niet van deze regel. Een cel met lange tekst over
       de volle breedte laten lopen kan CSS niet zelf bepalen; dat zou de renderende module moeten
       zeggen. Bewust niet opgelost: de tekst is leesbaar, en elke automatische poging die ik
       overwoog (auto-fit met een minimum) bracht de kolom-bugs terug die hierboven beschreven staan. */
    overflow-wrap: break-word;
    /* Veel module-tabellen zetten `white-space: nowrap` op hun cellen, zodat een kolom op desktop
       niet halverwege een woord afbreekt. In kaartstand bestaan die kolommen niet meer: een lange
       waarde loopt dan gewoon de buurcel in. Gezien bij projecten — "FitStar (t.a.v. Akko Koekoek)"
       schoof dwars over de kolom Team heen (browsercheck 21-09). Hier dus altijd afbreken. */
    white-space: normal;
  }
  /* Het kolomkopje staat boven zijn waarde — zo blijft zichtbaar WAT je leest, ook zonder kopregel. */
  table.l2s-tbl-cards td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--ui-fs-label, 15px);
    font-weight: 500;
    color: var(--ui-muted-strong);
    line-height: 1.2;
  }

  /* De eerste cel is de naam: over de volle breedte, groter, en met ruimte voor de status-chip. */
  table.l2s-tbl-cards td:first-child {
    grid-column: 1 / -1;
    font-size: var(--ui-fs-title, 19px);
    font-weight: 800;
  }
  table.l2s-tbl-cards--chipstatus td:first-child { padding-right: 124px; }
  table.l2s-tbl-cards td:first-child::before { display: none; }

  /* De status hoort rechtsboven, als chip — niet als zoveelste label/waarde-paar.
     OPT-IN met `--chipstatus`, want dat werkt alleen als die cel écht één chip bevat. Op
     meta-crud-schermen zit er soms ook een knop in de status-kolom; daar zou absoluut positioneren
     die knop afknellen. Zonder de modifier stroomt Status gewoon mee als label/waarde-paar. */
  table.l2s-tbl-cards--chipstatus td[data-label="Status"] {
    position: absolute;
    top: 11px;
    right: 14px;
    width: auto;
    /* 116px + de titel die er 124px voor vrijhoudt. Een lange status als "Wacht op goedkeuring"
       stak er bij 96px overheen en kwam over de naam te liggen — gemeten in de browsercheck van
       21-09. Daarom mag de chip hier ook AFBREKEN; hij wordt dan twee regels in plaats van te breed. */
    max-width: 116px;
    text-align: right;
    white-space: normal;
  }
  table.l2s-tbl-cards--chipstatus td[data-label="Status"] > * {
    white-space: normal;
    line-height: 1.15;
    text-align: center;
  }
  table.l2s-tbl-cards--chipstatus td[data-label="Status"]::before { display: none; }

  /* Lege-staat of foutregel: één cel met colspan. Die mag niet absoluut of half worden. */
  table.l2s-tbl-cards td:only-child {
    position: static;
    grid-column: 1 / -1;
    max-width: none;
    text-align: center;
    padding: 18px 8px;
  }
  table.l2s-tbl-cards td:only-child::before { display: none; }

  /* Op een heel smal toestel (≤360px) is twee kolommen te krap; dan één. */
  @media (max-width: 360px) {
    table.l2s-tbl-cards tr { grid-template-columns: 1fr; }
  }

  /* Een kaart die nog geladen wordt (P5). Zelfde maten als een echte kaart, zodat de lijst
     niet verspringt zodra de gegevens binnenkomen. */
  table.l2s-tbl-cards tr.is-skel { content-visibility: visible; }
  table.l2s-tbl-cards tr.is-skel td::before { content: none; }

  /* De schuif-hint hoort bij de tabel-stand; in kaart-stand valt er niets te schuiven. */
  .l2s-tbl-cards-hint { display: none; }
}

/* ============================================================================
   .l2s-skel — WACHTEN ZONDER SPRONG (manage-actions-ccp §14.2, P5)
   ----------------------------------------------------------------------------
   SIMPELE UITLEG (NL): tussen "pagina staat er" en "gegevens zijn binnen" zat een lege lijst of
   het woord "Laden…". Dat leest als een fout, en zodra de rijen binnenkomen schuift alles wat je
   net aan het lezen was naar beneden. Een skeletregel houdt exact die ruimte alvast bezet: je ziet
   meteen de VORM van wat er komt, en er verspringt niets meer.

   REGELS: een skelet toont nooit verzonnen gegevens (geen nepnamen), het beweegt rustig, en bij
   `prefers-reduced-motion` staat het stil. Het is puur decoratief, dus voor een schermlezer
   onzichtbaar (`aria-hidden`); de tabel meldt de echte status apart.
   ========================================================================== */
.l2s-skel {
  display: block;
  height: 1em;
  border-radius: 6px;
  background-color: var(--ui-border);
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .55) 50%,
    rgba(255, 255, 255, 0) 100%);
  background-repeat: no-repeat;
  background-size: 180px 100%;
  background-position: -180px 0;
  animation: l2s-skel-veeg 1.15s ease-in-out infinite;
}
.l2s-skel--kort { width: 42%; }
.l2s-skel--half { width: 64%; }
.l2s-skel--vol  { width: 88%; }
.l2s-skel--chip { width: 78px; height: 22px; border-radius: 999px; margin-left: auto; }

@keyframes l2s-skel-veeg {
  to { background-position: calc(100% + 180px) 0; }
}

/* Sport-modus is donker: een witte veeg is daar te hard. */
html.l2s-sport .l2s-skel {
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .12) 50%,
    rgba(255, 255, 255, 0) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .l2s-skel { animation: none; background-image: none; }
}

/* ============================================================================
   MODALS OP EEN TELEFOON — raakvlak en scroll (browsercheck 21-09-2026)
   ----------------------------------------------------------------------------
   SIMPELE UITLEG (NL): achter élke lijst zit een formulier, en dat formulier is op mobiel een
   schermvullende modal. Daar bleken alle velden 38px hoog: Bootstrap's eigen maat, niet die van ons.
   38px is toevallig precies de waarde die `--ui-target-sm` in SPORT-modus heeft — die verlaging is
   daar een bewuste keuze voor tech-savvy gebruikers. In comfort hoort 44px te staan, en juist daar
   zit de vrijwilliger met een telefoon in de regen langs het veld.

   Gemeten op ?module=squads: zestien velden op 38px, «Opslaan» en «Annuleren» op 38px, het
   sluitkruis op 32px. Dat geldt voor élke meta-module, want dit is de generieke schil.

   Waarom de gates dit niet zagen: gate 21 leest CSS-declaraties op selectors als btn/tab/nav-link.
   Een maat die uit een vendor-bestand komt en nergens in ONZE CSS staat, kan zo'n scan per definitie
   niet vinden. Daarom hier de expliciete koppeling aan het token — dan volgt sport z'n eigen
   verlaging vanzelf en comfort de 44px.
   ========================================================================== */
@media (max-width: 900px) {
  .modal .form-control,
  .modal .form-select,
  .modal input[type="date"],
  .modal input[type="time"],
  .modal input[type="number"],
  .l2s-overlay input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .l2s-overlay select,
  .l2s-overlay textarea {
    min-height: var(--ui-target-sm, 44px);
  }

  /* ELKE knop in een modal, niet alleen de voet. «Extra veld aanmaken» stond op 31px — een
     `btn-sm`, dus bewust compact bedoeld, maar op een telefoon is dat gewoon te klein om te raken.
     Alleen `min-height`: een knop wordt hoogstens hoger, nooit breder, dus een rij compacte knoppen
     blijft op z'n plek staan. Op >=901px verandert er niets. */
  .modal .btn,
  .l2s-overlay button,
  .l2s-overlay .btn { min-height: var(--ui-target-sm, 44px); }

  /* Het sluitkruis was 32px. De X blijft even groot (die zit in een achtergrondafbeelding);
     alleen het RAAKVLAK eromheen groeit — precies wat je wilt. */
  .modal .btn-close {
    width: var(--ui-target-sm, 44px);
    height: var(--ui-target-sm, 44px);
  }

  /* Scroll je in een modal voorbij het einde, dan nam de pagina erachter het over. De bladen van de
     actie-rail hadden dit al; een modal is net zo goed een laag erbovenop. */
  .modal-body { overscroll-behavior: contain; }

  /* `.l2s-overlay` zet core zelf op élke vaste laag die het scherm vult en boven de rail ligt —
     ook als die laag van een module is en niets van Bootstrap gebruikt (manage-actions.js,
     railWegOnderOverlay). Zo geldt de comfort-maat daar net zo goed, zonder dat elke module z'n
     eigen regels hoeft te schrijven. */
}

/* Rustiger bewegen wanneer de gebruiker daarom vraagt (WCAG 2.2 / ux-responsive §4). */
@media (prefers-reduced-motion: reduce) {
  .l2s-ar { transition: none; }
  .l2s-ar.is-away { transform: none; opacity: 1; }
}

/* Draai-animatie van de trek-om-te-verversen-wijzer (gestures.js zet .is-bezig). */
@keyframes l2s-ptr-draai { to { transform: rotate(360deg); } }

/* ZACHTE PAGINA-OVERGANGEN (View Transitions, cross-document; owner 23-09): één regel geeft elke
   navigatie binnen de app een korte fade i.p.v. een witte flits. Browsers zonder ondersteuning
   negeren dit volledig — precies de nette terugval. Bij minder-beweging-voorkeur: uit. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   FINANCE-INTRO-CANON (25-09-2026) — de mobiele binnenkomst-sectie van de finance-lijstschermen.
   Stond als lokaal <style>-blok in invoices.php; sinds het contracten-werkblad dezelfde sectie
   kreeg hoort hij hier: één bron, anders drift de ene kop weg van de andere (zelfde reden als
   FILTERBAR-CANON). Gedrag + regels: standards/manage-actions-ccp.md §5.1d — de sectie ZIET eruit
   als bediening en is het niet: de zoekbalk opent het Zoek-blad van de rail, de plusknop klikt de
   echte knop aan. Geen <input> hierin (tweede state + iOS-zoom).
   Gebruikers: core/views/finance/invoices.php · core/views/finance/werkblad.php
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
  /* ══ BINNENKOMST-SECTIE — ALLEEN ≤900px ══════════════════════════════════════════════════════
     Mockup: standards/mockups/finance-factuur-wizard/facturen-intro-mobiel.mockup.html (owner 25-09).
     Boven de rail-grens bestaat deze sectie niet: daar doet de brede kop + de filterbar-canon het
     werk, ongewijzigd. Rust = één accentkleur (de rode primary), verder grijstinten, veel lucht. */
  .l2f-intro, .l2f-uitleg, .l2f-uitlegscrim { display:none; }
  .l2f-kop-breed { margin:0 0 1rem; display:flex; align-items:flex-end; justify-content:space-between;
    gap:12px; flex-wrap:wrap; }
  .l2f-kop-eyebrow { margin:0; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ui-muted); font-size:var(--ui-fs-label, 15px); }
  .l2f-kop-titel { margin:0; font-size:26px; }
  @media (max-width: 900px) {
    .l2f-kop-breed { display:none; }
    .l2f-intro { display:block; position:relative; text-align:center; margin:0 0 4px;
      /* volle breedte: de sectie loopt door de container-marge heen, zodat hij het scherm vult */
      margin-inline:calc(50% - 50vw); padding:18px 18px 22px;
      background:linear-gradient(180deg, var(--ui-card) 0%, var(--ui-bg) 100%);
      border-bottom:1px solid var(--ui-border); }
    .l2f-intro-info { position:absolute; top:10px; right:10px; width:var(--ui-target-sm, 44px);
      height:var(--ui-target-sm, 44px); border:0; background:none; color:var(--ui-muted);
      font-size:19px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; }
    .l2f-intro-info:active { background:var(--ui-border); }
    /* Tekstmaten via de tokens: de comfort-baseline zet 15px als ondergrens, óók voor een eyebrow
       (core.css bij --ui-fs-label). De hiërarchie komt dus uit gewicht, kleur en witruimte — niet
       uit kleinere letters. */
    .l2f-intro-eyebrow { margin:0; font-size:var(--ui-fs-label, 15px); font-weight:700;
      letter-spacing:.08em; text-transform:uppercase; color:var(--ui-muted); }
    .l2f-intro-titel { margin:10px 0 6px; font-size:28px; font-weight:800; line-height:1.14; letter-spacing:-.015em; }
    .l2f-intro-sub { margin:0 0 20px; font-size:var(--ui-fs-label, 15px); color:var(--ui-muted); }
    .l2f-intro-sub b { color:var(--ui-muted-strong); font-weight:600; }

    .l2f-stat-jaar { margin:0 0 9px; font-size:var(--ui-fs-label, 15px); font-weight:700;
      letter-spacing:.06em; text-transform:uppercase; color:var(--ui-muted); }
    .l2f-stats { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-bottom:20px; }
    .l2f-stat { background:var(--ui-card); border:1px solid var(--ui-border); border-radius:15px;
      padding:14px 13px 13px; text-align:left; }
    .l2f-stat-kop { display:flex; align-items:center; gap:7px; margin:0 0 7px;
      font-size:var(--ui-fs-label, 15px); font-weight:600; color:var(--ui-muted-strong); }
    .l2f-stat-punt { width:8px; height:8px; border-radius:999px; flex:0 0 auto; background:var(--ui-muted); }
    .l2f-stat--open .l2f-stat-punt { background:var(--st-warn-ink); }
    .l2f-stat--paid .l2f-stat-punt { background:var(--st-ok-ink); }
    .l2f-stat-bedrag { margin:0; font-size:22px; font-weight:800; line-height:1.1;
      letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
    .l2f-stat-rest { margin:4px 0 0; font-size:var(--ui-fs-label, 15px); color:var(--ui-muted); }
    .l2f-stat-let-op { display:flex; gap:8px; align-items:flex-start; text-align:left;
      margin:-10px 0 16px; padding:10px 12px; border-radius:12px;
      background:var(--st-warn-bg); color:var(--st-warn-ink); border:1px solid var(--st-warn-line);
      font-size:var(--ui-fs-label, 15px); line-height:1.45; }
    .l2f-stat-let-op i { flex:0 0 auto; margin-top:1px; }
    .l2f-stat-meer { display:inline-flex; align-items:center; justify-content:center; gap:7px;
      min-height:var(--ui-target-sm, 44px); margin:-6px 0 14px; padding:0 4px;
      font-size:var(--ui-fs-label, 15px); font-weight:600; color:var(--ui-muted-strong); text-decoration:none; }
    .l2f-stat-meer:active { color:var(--ui-text); }

    /* De zoekbalk ZIET eruit als een veld maar IS een knop: hij opent het Zoek-blad van de rail.
       Geen tweede zoekmachine (manage-actions-ccp §5.1c) en geen <input>, dus ook geen iOS-zoom. */
    .l2f-intro-zoek { display:flex; align-items:center; gap:10px; width:100%;
      min-height:var(--ui-target, 48px); padding:0 18px; margin-bottom:10px; border-radius:999px;
      border:1px solid var(--ui-border); background:var(--ui-card); color:var(--ui-muted);
      font:inherit; font-size:var(--ui-fs-input, 16px); text-align:left; }
    .l2f-intro-zoek span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
    .l2f-intro-zoek:active { background:var(--ui-sunken); }
    .l2f-intro-nieuw { display:inline-flex; align-items:center; justify-content:center; gap:8px;
      width:100%; min-height:var(--ui-target, 48px); border:0; border-radius:999px;
      background:var(--brand, var(--ui-brand)); color:var(--ui-on-brand); font:inherit;
      font-size:var(--ui-fs-input, 16px); font-weight:700; }
    .l2f-intro-nieuw:active { filter:brightness(.94); }

    /* Info-blad — zelfde vorm-taal als de rail-bladen; z-index onder de modal-overlay (1100). */
    .l2f-uitlegscrim { display:block; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:1069; }
    .l2f-uitlegscrim[hidden] { display:none; }
    .l2f-uitleg { display:block; position:fixed; left:0; right:0; bottom:0; z-index:1070;
      background:var(--ui-card); border-radius:22px 22px 0 0; padding:16px 18px calc(20px + env(safe-area-inset-bottom));
      max-height:88vh; overflow-y:auto; box-shadow:0 -10px 34px rgba(15,23,42,.18); text-align:left; }
    .l2f-uitleg[hidden] { display:none; }
    .l2f-uitleg-greep { width:42px; height:5px; border-radius:999px; background:var(--ui-border); margin:0 auto 13px; }
    .l2f-uitleg-kop { margin:0 0 3px; font-size:19px; letter-spacing:-.01em; }
    .l2f-uitleg-sub { margin:0 0 12px; color:var(--ui-muted); font-size:var(--ui-fs-label, 15px); }
    .l2f-uitleg-rij { display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--ui-border); }
    .l2f-uitleg-ic { width:38px; height:38px; border-radius:12px; background:var(--ui-sunken);
      display:inline-flex; align-items:center; justify-content:center; font-size:17px;
      color:var(--ui-muted-strong); flex:0 0 auto; }
    /* ALLEEN de kop van een rij is een blok. `.l2f-uitleg-rij b` ving óók de vetgedrukte woorden
       binnen de alinea's («Filter», «Te factureren», «kalenderjaar») en zette die op een eigen
       regel — midden in de zin (browsercheck 25-09). Directe kindselector houdt ze inline. */
    .l2f-uitleg-rij > div > b { display:block; font-size:15.5px; margin-bottom:3px; }
    .l2f-uitleg-rij p { margin:0; font-size:var(--ui-fs-label, 15px); color:var(--ui-muted-strong); line-height:1.5; }
    .l2f-uitleg-dicht { width:100%; min-height:var(--ui-target, 48px); border:0; border-radius:999px;
      background:var(--ui-bg); color:var(--ui-text); font:inherit; font-size:16px; font-weight:600; margin-top:14px; }
      /* Derde cijfer over de volle breedte — twee geldkaarten naast elkaar, daaronder één brede
         kaart (contracten dit jaar). Anders hangt een derde kaart als halve wees in rij twee. */
      .l2f-stat--breed { grid-column: 1 / -1; }
}