/* ═══════════════════════════════════════════════════════════════════
   Invite — gedeelde stijl (invite_stijl.css)
   Eén bron voor de vormgeving van de Portal én de apps die eronder draaien
   (de Invite Hub in /hub/, de Socials Planner in /socials-planner/; later
   eventueel VaCom).
   Hierin: de tokens (kleuren, letters, hoeken, schaduwen, snelheden; donker
   en licht), de basis (reset, body, links, scrollbalken, aurora) en de
   algemene bouwstenen: .knop, .veld, .popup/.sluier/.melding, .chip/.label/
   .teller, .tabs/.tabel/.lijst/.rij/.kopje, .vlak, .voet en .profiel, .leeg.
   Laden VÓÓR het eigen stijlbestand van de pagina:
     Portal:  invite_stijl.css, dan style_ipp.css
     Hub:     ../invite_stijl.css, dan style_hub.css
     Transfer: https://portal.invite.nl/invite_stijl.css (ander domein,
              transfer.invite.nl), dan style_transfer.css (sinds Transfer v1.7)
     Socials Planner: ../invite_stijl.css, dan assets/app.css (sinds v2.0.0)
   Een wijziging hier geldt dus overal tegelijk: kijk de Portal, de Hub,
   Transfer én de Socials Planner na. Transfer is altijd licht (body.light-mode).
   De stukken staan woordelijk zoals ze in style_ipp.css stonden (Portal
   v5.1.0), in dezelfde volgorde; de nummers in de koppen zijn de oude
   sectienummers. Overzicht van alles: stijlgids_ipp.php.
   ═══════════════════════════════════════════════════════════════════ */


/* ═══ uit style_ipp.css: reset, kleur- en lettertokens, lichte modus, oude kleurnamen ═══ */
/* ── 1. RESET + ROOT VARIABELEN ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #111318;
  --surface:   #1c1f27;
  --card:      #22262f;
  --border:    #2e3340;
  /* v4.31 — kleuren (stijlgids Kleuren & typografie opschonen, K1): per kleur een
     basistint (vlakken, randen, icoontjes, pins) en een teksttint die op licht én
     donker leesbaar is (de lichte waarden staan in body.light-mode). Lichte
     vullingen en randen maken we met color-mix uit de basis, bv.
     color-mix(in oklab, var(--groen) 15%, transparent). Groen en blauw zijn de
     merkkleuren uit de huisstijl. Zwart en wit met transparantie (schaduw, glas,
     sluier) blijven gewoon rgba. De oude namen (--gold, --green, --link, …)
     verwijzen hiernaar, zie de regel ":root, body" onder de lichte modus. */
  --goud:         #fbbc43;
  --goud-2:       #fdd06e;   /* tweede kleur van het gouden verloop */
  --goud-tekst:   #fbbc43;
  --op-goud:      #1A1407;   /* tekst óp goud */
  --groen:        #4da875;
  --groen-tekst:  #7ccf9d;
  --blauw:        #8ecae8;
  --blauw-tekst:  #8ecae8;
  --rood:         #e05c5c;
  --rood-tekst:   #ef7070;
  --rood-pin:     #d6153f;   /* pins en kopjes van medewerkers */
  --oranje:       #e89300;   /* concept, intern */
  --oranje-tekst: #f0a830;
  --text:      #e8e2d8;
  --muted:     #7a8090;
  /* v4.31 — lettergroottes (T1): een ladder van negen maten. Uitzonderingen:
     16px in velden op mobiel (anders zoomt iOS in) en de letter in een
     profielfoto, die meeschaalt met de foto. */
  --letter-mini:   10px;   /* tellers, labels */
  --letter-hint:   11px;   /* hints, meta, kleine knop */
  --letter-klein:  12px;   /* knoppen, rijen, reacties */
  --letter-tekst:  13px;   /* gewone tekst, opmerkingen */
  --letter-nadruk: 14px;   /* kolomnaam, profielnaam */
  --letter-kop:    17px;   /* popup-kop, middelnaam */
  --letter-titel:  22px;   /* projectnaam, inlogtitel, gezakte kop */
  --letter-cijfer: 28px;   /* statistiek, kop op mobiel */
  --letter-pagina: 40px;   /* paginatitel */
  /* DE standaard hoekradius voor knoppen, invoervelden en klein spul.
     Alle voormalige losse 6/7/8px-waarden verwijzen hiernaar; grotere
     vlakken (kaarten, modals, boxen) gebruiken --radius-card (v4-sectie).
     Bewuste uitzonderingen: pilvormen (999px), cirkels (50%) en
     mini-accenten van 2-3px. Was 10px; gehalveerd voor een strakker uiterlijk. */
  --radius:    5px;
  /* v4.11 — ontwerp-tokens: wijzig deze waarden en het werkt overal door.
     --radius-sm    kleine accenten: badges, mini-knopjes op thumbnails
     --radius-chip  pil-chips (middel-chips op de projectkaarten)
     --border-hov   randkleur van kaarten bij hover
     --shadow-card  zweef-schaduw van kaarten bij hover
     --shadow-pop   schaduw onder dropdowns/menu's
     --focus-ring   gouden ring om drag-targets en focus-elementen
     --t-fast/med/slow  de drie animatiesnelheden van de portal */
  --radius-sm:   4px;
  --radius-chip: 20px;
  --border-hov:  #4a5068;
  --shadow-card: 0 6px 18px rgba(0,0,0,.28);
  --shadow-pop:  0 8px 24px rgba(0,0,0,.4);
  --focus-ring:  0 0 0 2px color-mix(in oklab, var(--goud) 30%, transparent);
  --t-fast: .15s;
  --t-med:  .2s;
  --t-slow: .25s;
}

/* ── LICHTE MODUS ─────────────────────────────────────────────────
   Warme crème-tinten die harmoniëren met het goud-geel accent.
   Alleen de basis-oppervlakken en tekst wisselen; accenten
   (goud, groen, rood, link) blijven consistent.
   ─────────────────────────────────────────────────────────────── */
body.light-mode {
  --bg:        #f7f3ec;
  --surface:   #ffffff;
  --card:      #faf6ef;
  --border:    #e4ddd0;
  --text:      #2a2520;
  --muted:     #7a7268;
  /* v4.31: de teksttinten op licht (K1) */
  --goud-tekst:   #a87a12;
  --groen-tekst:  #2f8a57;
  --blauw-tekst:  #2f86ad;
  --rood-tekst:   #c62828;
  --oranje-tekst: #b86e00;
  /* v4.11 — lichte tegenhangers van de ontwerp-tokens: schaduwen veel
     subtieler (donkere schaduw oogt zwaar op crème), hover-rand neutraal. */
  --border-hov:  #e4ddd0;
  --shadow-card: 0 6px 16px rgba(0,0,0,.07);
  --shadow-pop:  0 8px 24px rgba(0,0,0,.12);
}
/* v4.31: de oude kleurnamen (tot v4.30) verwijzen naar de nieuwe tokens. Op
   :root én body, zodat ze in de lichte modus de lichte teksttint volgen. */
:root, body { --gold: var(--goud); --gold2: var(--goud-2); --green: var(--groen); --done: var(--groen); --red: var(--rood); --admin-red: var(--rood-pin); --concept: var(--oranje); --link: var(--blauw-tekst); --link-hov: color-mix(in oklab, var(--blauw-tekst), #000 15%); }

/* In lichte modus de native dropdown-lijst ook licht renderen
   (tegenhanger van de color-scheme:dark default op select, sectie 7). */
body.light-mode select { color-scheme: light; }


/* ═══ uit style_ipp.css: popups in de lichte modus ═══ */
/* v4.16.4: popups in lichte modus leesbaar. Het glas (65% wit over de donkere
   sluier) werd grijs, waardoor gedempte tekst wegviel. Popup bijna dekkend,
   en binnen popups een iets donkerder --muted. */
body.light-mode :is(.popup, .popup-kop, .popup-voet, .melding) { background: color-mix(in oklab, var(--surface) 94%, transparent); }
body.light-mode .popup.op-beeld::before { background: color-mix(in oklab, var(--surface) 94%, transparent); }
body.light-mode :is(.popup, .filter-menu) { --muted: #6b6258; }


/* ═══ uit style_ipp.css: body en links ═══ */
body {
  font-family: 'Manrope', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: var(--letter-nadruk);
  min-height: 100vh;
}

a       { color: var(--blauw-tekst); }
a:hover { color: color-mix(in oklab, var(--blauw-tekst), #000 15%); }


/* ═══ uit style_ipp.css: 6. knoppen (.knop) ═══ */
/* ── 6. KNOPPEN — één familie: .knop (stijlgids, oktober 2026) ─────────
   Elke knop in de Portal is een .knop. Zie stijlgids_ipp.php, sectie
   Knoppen, stap 1 t/m 14, voor de keuzes en de maten. In het kort:
     .knop            gewone knop: 31px hoog, letter 12px/700, afronding 5px,
                      in rust neutraal (vulling in de kaartkleur, dunne grijze
                      rand); bij hover gouden rand en geel verloop (stap 15, N4)
     .goud            hoofdknop (Opslaan, Nieuw, Plaatsen, Inloggen), de enige
                      knop die in rust gevuld is
     .rood .groen .blauw   in rust dezelfde neutrale knop; alleen het icoontje
                      (<i>…</i> of een svg vóór de tekst) heeft de kleur, en
                      bij hover komen de gekleurde rand en vulling. Een knop
                      zonder icoontje (Ja, verwijderen) is in rust dus neutraal
     .klein           27px, letter 11px (kaartknopjes, popup-knopjes)
     .icoon           vierkant, alleen een icoon (31px; met .klein 27px)
     .sluit           het sluitkruisje (× op .icoon.klein)
     .breed           volle breedte, 38px, letter 13px (Akkoord, Inloggen)
     .stil            geen vulling, gestippelde rand (Bijlage toevoegen)
     .glas            doorzichtig wit, voor knopjes óp een foto
     .doorzichtig     onder de voet (thema, Uitloggen): alleen een dunne rand
                      en gedempte tekst, bij hover de gewone knop
     .actief / [aria-pressed=true]   deze stand staat aan: goud gevuld
     :disabled / .uit  45% doorzichtig, geen hover
     .wip             wipschakelaar met twee helften (intern / openbaar)
     .knopgroep       één balkje met stapjes (pagina's, zoom, tabpijlen)
   Op mobiel (≤768px) is alles minstens 36–38px hoog. */
.knop {
  /* De kleur van een knop zit in deze variabelen; .rood/.groen/.blauw zetten
     ze anders. In rust is elke knop neutraal, de kleur zit in het icoontje
     (--knop-ik) en komt bij hover in rand en vulling. */
  --knop-rand: rgba(214,205,191,.5); --knop-vul: rgba(255,255,255,.5);   /* v4.20: vulling en rand op 50%, de kaart schijnt erdoorheen */
  --knop-rand-hover: var(--goud); --knop-vul-hover: linear-gradient(135deg, #ffffff, color-mix(in oklab, var(--goud) 25%, #fff));
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-sizing: border-box;
  min-height: 31px; padding: 6px 12px;
  border: 1px solid var(--knop-rand); border-radius: var(--radius);
  background: var(--knop-vul);
  color: var(--text);
  font-family: 'Manrope', sans-serif; font-size: var(--letter-klein); font-weight: 700; line-height: 1.3;
  cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transition: background var(--t-slow), border-color var(--t-slow), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-slow), opacity var(--t-fast);
}
.knop:hover { transform: translateY(-1px); background: var(--knop-vul-hover); border-color: var(--knop-rand-hover); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.10); }
.knop svg   { flex: none; }
/* Het icoontje vóór de tekst (<i>✕</i>, <i>←</i>, of een svg) draagt de kleur. */
.knop > i   { font-style: normal; }
/* v5.0.3: een svg-icoontje in <i> zonder de witruimte van een tekstregel eronder; anders werd
   een knop met svg 2px hoger dan dezelfde knop met een teken (✕, ←). */
.knop > i:has(> svg) { display: inline-flex; }
.knop > i, .knop > svg { color: var(--knop-ik, inherit); }
body:not(.light-mode) .knop {
  --knop-rand: rgba(255,255,255,.11); --knop-vul: rgba(255,255,255,.02);
  --knop-vul-hover: linear-gradient(135deg, color-mix(in oklab, var(--goud) 20%, transparent), color-mix(in oklab, var(--goud) 5%, transparent));
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
body:not(.light-mode) .knop:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.20), 0 1px 3px rgba(0,0,0,.18); }
/* Kleuren */
.knop.goud, body:not(.light-mode) .knop.goud { background: linear-gradient(135deg, var(--goud), var(--goud-2)); color: var(--op-goud); border-color: var(--goud); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.10); }
.knop.goud:hover { background: var(--goud-2); border-color: var(--goud-2); color: var(--op-goud); }
.knop.rood  { --knop-ik: var(--rood-tekst);  --knop-rand-hover: var(--rood);  --knop-vul-hover: linear-gradient(135deg, #ffffff, color-mix(in oklab, var(--rood) 20%, #fff)); }
.knop.groen { --knop-ik: var(--groen-tekst); --knop-rand-hover: var(--groen); --knop-vul-hover: linear-gradient(135deg, #ffffff, color-mix(in oklab, var(--groen) 18%, #fff)); }
.knop.blauw { --knop-ik: var(--blauw-tekst); --knop-rand-hover: var(--blauw); --knop-vul-hover: linear-gradient(135deg, #ffffff, color-mix(in oklab, var(--blauw) 22%, #fff)); }
body:not(.light-mode) .knop.rood  { --knop-vul-hover: linear-gradient(135deg, color-mix(in oklab, var(--rood) 26%, transparent), color-mix(in oklab, var(--rood) 7%, transparent)); }
body:not(.light-mode) .knop.groen { --knop-vul-hover: linear-gradient(135deg, color-mix(in oklab, var(--groen) 24%, transparent), color-mix(in oklab, var(--groen) 6%, transparent)); }
body:not(.light-mode) .knop.blauw { --knop-vul-hover: linear-gradient(135deg, color-mix(in oklab, var(--blauw) 24%, transparent), color-mix(in oklab, var(--blauw) 6%, transparent)); }
/* Een gekleurde icoonknop (alleen een icoon) kleurt het icoon zelf. */
.knop.icoon.rood, .knop.icoon.groen, .knop.icoon.blauw { color: var(--knop-ik); }
/* Op een gevulde knop (goud, actief) kleurt het icoontje gewoon mee met de tekst. */
.knop.goud > i, .knop.goud > svg, .knop.actief > i, .knop.actief > svg, .knop[aria-pressed="true"] > i, .knop[aria-pressed="true"] > svg { color: inherit; }
/* Maten */
.knop.klein { min-height: 27px; padding: 5px 10px; font-size: var(--letter-hint); gap: 4px; }
.knop.icoon { width: 31px; height: 31px; min-height: 0; padding: 0; gap: 0; font-size: var(--letter-nadruk); flex: none; }
.knop.icoon.klein { width: 27px; height: 27px; font-size: var(--letter-tekst); }
.knop.sluit { font-size: var(--letter-kop); font-weight: 400; line-height: 1; }
.knop.breed { width: 100%; min-height: 38px; padding: 9px 16px; font-size: var(--letter-tekst); }
/* Stil: een bijzaak, zoals Bijlage toevoegen */
.knop.stil, body:not(.light-mode) .knop.stil { background: transparent; border-color: var(--goud); border-style: dashed; box-shadow: none; color: var(--muted); }
.knop.stil:hover, body:not(.light-mode) .knop.stil:hover { background: var(--knop-vul-hover); border-style: solid; color: var(--text); }
/* Doorzichtig (stap 16): de knopjes onder de voet (thema, Uitloggen,
   Wachtwoord wijzigen, Gebruikersbeheer). In rust alleen een dunne rand in de
   randkleur en gedempte tekst, zodat ze niet opvallen; bij hover precies de
   gewone knop. Maat via .klein of .icoon zoals elke andere knop. */
.knop.doorzichtig, body:not(.light-mode) .knop.doorzichtig { background: transparent; border-color: var(--border); color: var(--muted); box-shadow: none; }
.knop.doorzichtig:hover, body:not(.light-mode) .knop.doorzichtig:hover { background: var(--knop-vul-hover); border-color: var(--knop-rand-hover); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.10); }
/* Glas: óp een foto (slotje, kruisje, thumbnail-kiezer) */
.knop.glas, body:not(.light-mode) .knop.glas { background: rgba(255,255,255,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-color: color-mix(in oklab, var(--goud) 85%, transparent); color: var(--op-goud); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.knop.glas:hover, body:not(.light-mode) .knop.glas:hover { background: linear-gradient(135deg, #ffffff, color-mix(in oklab, var(--goud) 25%, #fff)); border-color: var(--goud); color: var(--op-goud); }
/* Toestanden */
.knop:disabled, .knop.uit { opacity: .45; cursor: default; pointer-events: none; transform: none; }
.knop.actief, .knop[aria-pressed="true"],
body:not(.light-mode) .knop.actief, body:not(.light-mode) .knop[aria-pressed="true"] { background: linear-gradient(135deg, var(--goud), var(--goud-2)); color: var(--op-goud); border-color: var(--goud); }
/* Een gekleurde knop die aanstaat (Akkoord gegeven, Klaar) vult zich met z'n eigen kleur. */
.knop.groen.actief, body:not(.light-mode) .knop.groen.actief { background: var(--groen); border-color: var(--groen); color: #fff; }
.knop:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--goud) 50%, transparent), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.18); }
/* Wipschakelaar: twee helften, de actieve is goud */
.wip { display: inline-flex; border: 1px solid var(--goud); border-radius: var(--radius); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 3px rgba(0,0,0,.10); vertical-align: middle; }
.wip button { height: 27px; padding: 0 10px; font-family: 'Manrope', sans-serif; font-size: var(--letter-hint); font-weight: 700; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.wip button + button { border-left: 1px solid var(--goud); }
.wip button.aan { background: linear-gradient(135deg, var(--goud), var(--goud-2)); color: var(--op-goud); }
.wip button:not(.aan):hover { color: var(--text); background: color-mix(in oklab, var(--goud) 12%, transparent); }
.wip.uit { opacity: .5; pointer-events: none; }
.wip.klein button { height: 22px; padding: 0 7px; font-size: var(--letter-mini); }
/* v4.19.1: schakelaar op volle breedte (concept / zichtbaar voor klant in de reviewkolom). */
.wip.breed { display: flex; width: 100%; }
.wip.breed button { flex: 1 1 0; justify-content: center; }
/* Knopgroep: één doorzichtig balkje met stapjes */
/* v4.19.1: in licht 65% wit (was 35%): het balkje zweeft vaak over een donkere
   foto en dan was de tekst onleesbaar. Geen lijntjes tussen de stapjes. */
.knopgroep { display: inline-flex; align-items: center; border: 1px solid color-mix(in oklab, var(--goud) 75%, transparent); border-radius: var(--radius); overflow: hidden; background: rgba(255,255,255,.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
body:not(.light-mode) .knopgroep { background: rgba(255,255,255,.07); }
.knopgroep button { height: 27px; min-width: 27px; padding: 0 8px; font-family: 'Manrope', sans-serif; font-size: var(--letter-hint); font-weight: 700; border: 0; background: transparent; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.knopgroep button:hover { background: color-mix(in oklab, var(--goud) 18%, transparent); }
.knopgroep button:disabled { opacity: .35; cursor: default; background: transparent; }
.knopgroep span { font-size: var(--letter-hint); font-weight: 700; color: var(--text); opacity: .8; padding: 0 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Tekstlinks: blauw in tekst en op kaarten, tekstkleur met streep in de voet */
.tekstlink { color: var(--blauw-tekst); text-decoration: none; font-weight: 600; cursor: pointer; }
.tekstlink:hover { text-decoration: underline; color: color-mix(in oklab, var(--blauw-tekst), #000 15%); }
/* Een tekstlink kan ook een <button> zijn (bv. in de Invite Hub): dan zonder de
   standaardrand en -vulling van de browser en met de letter van de omgeving (v5.1.1) */
button.tekstlink { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; }
.voetlink { color: var(--text); text-decoration: none; font-weight: 600; cursor: pointer; }   /* v4.25: zonder streep (stijlgids Footer, stap 1) */
.voetlink:hover { color: var(--goud); }
/* Mobiel: tikdoelen minstens 36–38px */
@media (max-width: 768px) {
  .knop { min-height: 38px; padding-top: 8px; padding-bottom: 8px; }
  .knop.klein { min-height: 36px; }
  .knop.icoon, .knop.icoon.klein { width: 36px; height: 36px; }
  .wip button, .knopgroep button, .wip.klein button { height: 36px; }
}


/* ═══ uit style_ipp.css: .vlak en .rij ═══ */
.vlak {
  background: color-mix(in oklab, var(--surface) calc(var(--glass-opacity) * 100%), transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  border: 1px solid var(--border); border-radius: var(--radius-card);
}
.vlak.zweef { box-shadow: var(--shadow-pop); background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; }
.rij { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; transition: border-color var(--t-fast); }
.rij:hover, .rij.drag-over { border-color: var(--goud); }
.rij.drag-over { box-shadow: var(--focus-ring); }
.rij.dragging { opacity: .4; }


/* ═══ uit style_ipp.css: scrollbalken ═══ */
/* ── v4.13.12: SCROLLBALKEN IN DE THEMAKLEUR ────────────────────────────
   Overal (popups, lijsten, de pagina zelf): een dunne gouden greep op een
   doorzichtige baan, in licht iets sterker. Zelfde recept als in VaCom. */
:root { --scroll: color-mix(in oklab, var(--goud) 45%, transparent); }
body.light-mode { --scroll: color-mix(in oklab, var(--goud) 70%, transparent); }
* { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--goud); background-clip: padding-box; }


/* ═══ uit style_ipp.css: 9. popups, 10. chips/labels/tellers, 11. tabs/tabellen/lijsten, 12. voet/profiel/lege teksten ═══ */
/* ── 9. POPUPS — één familie: .popup (stijlgids Popups, stap 1 t/m 9) ──
   .sluier          de laag achter een popup: zwart op 45% met vervaging 8px,
                    fadet in; .midden zet de popup in het midden (bevestiging,
                    changelog, gebruikersbeheer), anders bovenaan met 32px
   .popup           glas (surface op 65%, vervaging 28px), rand 1px, 7px,
                    popup-schaduw; 560px breed, .klein = 360px; scrolt van
                    binnen; verschijnt 6px omhoog met infaden (180ms)
   .popup-kop       titel 17px/700 links (h3, .modal-title of het bewerkbare
                    .modal-title-input), sluitkruisje rechts, 14×24px, lijntje
   .popup-inhoud    24px; in .klein 16px
   .popup-voet      knoppen rechts (Annuleren links, de actie rechts), 14×24px
                    met lijntje; in .klein 16px zonder lijntje
   .op-beeld        reviewpagina: zweeft bij de pin, eigen maat en pijlpuntje
   .melding         korte melding rechtsonder (13px/600), .show toont hem;
                    .ok/.success = groene rand, .fout/.error/.err = rode rand
   De oude namen (.overlay .modal .modal-header/-body/-footer, .custom-confirm-*,
   .changelog-box, .beheer-modal, .upl-ovz, .ann-form, .tip, .toast, #toast)
   staan er nog naast als haakje voor de JS, zonder eigen opmaak. */
@keyframes popupIn  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sluierIn { from { opacity: 0; } to { opacity: 1; } }
.sluier {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 16px; overflow-y: auto;
  animation: sluierIn .18s ease both;
}
.sluier.midden { align-items: center; }
.popup {
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  background: color-mix(in oklab, var(--surface) 65%, transparent);
  backdrop-filter: blur(28px) saturate(1.2); -webkit-backdrop-filter: blur(28px) saturate(1.2);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  color: var(--text);
  animation: popupIn .18s ease both;
}
.popup.klein { max-width: 360px; }
.popup-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 24px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1;
  background: color-mix(in oklab, var(--surface) 65%, transparent);
  backdrop-filter: blur(28px) saturate(1.2); -webkit-backdrop-filter: blur(28px) saturate(1.2);
}
.popup-kop h3, .popup-kop .modal-title { font-size: var(--letter-kop); font-weight: 700; margin: 0; min-width: 0; }
.popup-inhoud { padding: 24px; }
/* v4.29.1: de voet plakt onderaan, net als de kop bovenaan, zodat Klaar / Opslaan
   altijd in beeld is in een lange popup (zelfde glas als de kop). */
.popup-voet { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--border);
  position: sticky; bottom: 0; z-index: 1;
  background: color-mix(in oklab, var(--surface) 65%, transparent);
  backdrop-filter: blur(28px) saturate(1.2); -webkit-backdrop-filter: blur(28px) saturate(1.2); }
.popup.klein .popup-kop    { padding: 12px 16px; }
.popup.klein .popup-inhoud { padding: 16px; }
.popup.klein .popup-voet   { padding: 0 16px 16px; border-top: 0; }
.popup.klein:has(.bn-lijst) { max-width: 460px; }
/* Op het beeld (reviewpagina): de popup bepaalt zelf plaats en maat; het
   pijlpuntje heeft dezelfde glaskleur. */
.popup.op-beeld { max-width: none; max-height: none; overflow: visible; }
.popup.op-beeld::before { background: color-mix(in oklab, var(--surface) 65%, transparent); border-left-color: var(--border); border-top-color: var(--border); }
/* Melding */
.melding {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  padding: 10px 16px; font-size: var(--letter-tekst); font-weight: 600; color: var(--text);
  background: color-mix(in oklab, var(--surface) 65%, transparent);
  backdrop-filter: blur(28px) saturate(1.2); -webkit-backdrop-filter: blur(28px) saturate(1.2);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.melding.show { opacity: 1; transform: translateY(0); }
.melding.ok, .melding.success { border-color: var(--groen); }
.melding.fout, .melding.error, .melding.err { border-color: var(--rood); }
@media (max-width: 768px) {
  .sluier { padding: 16px 8px; }
  .popup-kop, .popup-voet { padding-left: 16px; padding-right: 16px; }
  .popup-inhoud { padding: 16px; }
}
/* ── 10. CHIPS, LABELS EN TELLERS (stijlgids Chips & badges, stap 1 t/m 5) ──
   .chip     tekst-chip (middelen op de projectkaart, designer, PM, filter):
             pil 27px, 12px/600, grijze rand, lichte vulling; .klein = 23px,
             11px gedempt; .stil = alleen gedempte tekst; .klik = gouden rand
             bij hover; .nieuw = gouden rand (+ <i class="stip">); .definitief
             = groene rand (+ <i>✓</i>); een slotje gaat ook in een <i>
   .label    statuslabel: pil 20px, 10px/700, lichte tint + rand + tekst in
             de kleur: .groen (klaar) .goud (aandacht) .oranje (alleen intern)
             .blauw (designer) .grijs (extern) .rood (PDF); op een foto
             (.kaart-badges) is de vulling zwart op 45%
   .teller   goud bolletje 20px, 11px/800, donkere tekst; .stil = gedempt
   .versie   versieblokje (reviewkolom): 27px, 5px, .aan = goud gevuld
   De oude namen (ond-chip, ond-designer, pc-mgr, proj-status, ond-badge,
   concept-badge, badge-definitief, role-badge, intern-badge, concept-pill,
   person-cnt, sb-ver-item) blijven alleen als haakje voor de JS. */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 27px; padding: 4px 12px; box-sizing: border-box; max-width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-chip);
  background: rgba(255,255,255,.03);
  font-size: var(--letter-klein); font-weight: 600; line-height: 1.3; color: var(--text); white-space: nowrap;
  transition: border-color var(--t-fast), background var(--t-fast);
}
body.light-mode .chip { background: rgba(0,0,0,.03); }
.chip > i { font-style: normal; flex: none; font-size: var(--letter-hint); }
.chip .chip-naam { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chip.klein { min-height: 23px; padding: 2px 10px; font-size: var(--letter-hint); color: var(--muted); }
.chip.stil { border-color: transparent; background: transparent; color: var(--muted); }
.chip.klik { cursor: pointer; }
.chip.klik:hover { border-color: var(--goud); }
.chip.nieuw { border-color: var(--goud); }
.chip .stip { width: 7px; height: 7px; border-radius: 50%; background: var(--goud); flex: none; }
.chip.definitief { border-color: color-mix(in oklab, var(--groen) 50%, transparent); }
.chip.definitief > i { color: var(--groen-tekst); font-weight: 700; }
.label {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px; border-radius: 999px;
  font-size: var(--letter-mini); font-weight: 700; line-height: 1; white-space: nowrap; vertical-align: middle;
  border: 1px solid transparent;
}
.label.groen  { background: color-mix(in oklab, var(--groen) 15%, transparent); color: var(--groen-tekst); border-color: color-mix(in oklab, var(--groen) 35%, transparent); }
.label.goud   { background: color-mix(in oklab, var(--goud) 15%, transparent); color: var(--goud-tekst); border-color: color-mix(in oklab, var(--goud) 35%, transparent); }
.label.oranje { background: color-mix(in oklab, var(--oranje) 15%, transparent); color: var(--oranje-tekst); border-color: color-mix(in oklab, var(--oranje) 35%, transparent); }
.label.blauw  { background: color-mix(in oklab, var(--blauw) 15%, transparent); color: var(--blauw-tekst); border-color: color-mix(in oklab, var(--blauw) 35%, transparent); }
.label.grijs  { background: color-mix(in oklab, var(--muted) 15%, transparent); color: var(--muted); border-color: color-mix(in oklab, var(--muted) 35%, transparent); }
.label.rood   { background: color-mix(in oklab, var(--rood) 15%, transparent); color: var(--rood-tekst); border-color: color-mix(in oklab, var(--rood) 35%, transparent); }
/* Op een foto: donkere vulling, zodat het label op licht en donker beeld leesbaar is */
.kaart-beeld:not(.ond-thumb-noimg):not(:has(.card-collage-empty)) .kaart-badges .label { background: rgba(0,0,0,.45); }
/* v5.0.7: op dat zwarte vlak óók in de lichte modus de lichte teksttinten (dezelfde als in
   :root/donker); de donkere tinten van body.light-mode zijn op zwart slecht leesbaar. */
.kaart-beeld:not(.ond-thumb-noimg):not(:has(.card-collage-empty)) .kaart-badges {
  --goud-tekst: #fbbc43; --groen-tekst: #7ccf9d; --blauw-tekst: #8ecae8; --rood-tekst: #ef7070; --oranje-tekst: #f0a830; }
.teller { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: var(--letter-hint); font-weight: 800; line-height: 1; background: var(--goud); color: var(--op-goud); }
.teller.stil { background: rgba(255,255,255,.08); color: var(--muted); }
body.light-mode .teller.stil { background: rgba(0,0,0,.06); }
.versie { display: inline-flex; align-items: center; justify-content: center; min-width: 27px; height: 27px; padding: 0 8px; box-sizing: border-box; border-radius: var(--radius); font-size: var(--letter-tekst); font-weight: 800; line-height: 1; border: 1px solid rgba(214,205,191,.5); background: rgba(255,255,255,.5); color: var(--text); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
body:not(.light-mode) .versie { border-color: rgba(255,255,255,.11); background: rgba(255,255,255,.02); }
.versie:hover { border-color: var(--goud); }
.versie.aan, body:not(.light-mode) .versie.aan { background: linear-gradient(135deg, var(--goud), var(--goud-2)); border-color: var(--goud); color: var(--op-goud); cursor: default; }

/* v4.18.1: vinkje "PM een seintje geven" vóór de Klaar-knop in de Beheren-popup */
.ob-seintje { margin-right: auto; }   /* een .vink */
.ob-seintje[hidden] { display: none; }

/* Bewerkbare titel in de popup-kop (input zonder rand), zelfde letter als een titel */
.modal-title-input {
  font-size: var(--letter-kop); font-weight: 700;
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  padding: 0;
  color: var(--text);
  font-family: 'Manrope', sans-serif;
}


/* ── 11. TABS, TABELLEN EN LIJSTEN — (stijlgids Tabs, tabellen & lijsten stap 1 t/m 5, v4.24) ──
   .tabs / .tab   tabbalk met een lijntje eronder; een tab is een tabblad zoals de knop
                  (rustvulling, rand, 7px afronding bovenaan), .actief = goud verloop zoals
                  een knop die aanstaat (T2, sinds v4.27). De status in de tab
                  staat in een <i>: <i class="ok">✓</i> (groen, akkoord) of <i>💬</i>.
                  Slepen op de reviewpagina: JS-haakjes .tab-dragging / .tab-drag-over.
   .tabel         de gebruikerslijst: kop = kopje, cellen 10 × 12px / 13px, dun lijntje
                  tussen de rijen, lichte vulling bij hover (A1); cel .stil = gedempt,
                  .acties = knoppen rechts; leeg = een .leeg.groot in de cel (sectie 12).
   .lijst         rijen onder elkaar met 6px ertussen (.plat: 2px).
   .rij           omrande rij (sectie 8); .rij.plat = vlakke rij: geen rand, lichte
                  vulling bij hover, .aan = goudtint (gekozen), .stil = gedempt (R2).
                  Delen: .rij-greep ⠿, .rij-naam 13px vet, .rij-meta 11px gedempt,
                  .rij-acties (knoppen rechts).
   .kopje         kopje boven een lijst, tabel of groep: 11px vet, hoofdletters,
                  spatiëring .08em, gedempt, 12px eronder; <span> erin = aantal (K1).
   ───────────────────────────────────────────────────────────────────────── */
/* v4.27: tabbladen zoals de knop (T2; T1 'onderstreep' was een typefout bij het kiezen):
   de rustvulling en rand van .knop, 7px afronding bovenaan, op een lijntje;
   hover = gouden rand; .actief = goud verloop zoals een knop die aanstaat. */
.tabs { display: flex; gap: 3px; align-items: flex-end; flex-shrink: 0; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { height: 0; }
.tab { --tab-rand: rgba(214,205,191,.5); --tab-vul: rgba(255,255,255,.5); display: inline-flex; align-items: center; flex-shrink: 0; height: 34px; padding: 0 14px; margin-bottom: -1px; background: var(--tab-vul); border: 1px solid var(--tab-rand); border-bottom-color: var(--border); border-radius: 7px 7px 0 0; font-family: 'Manrope', sans-serif; font-size: var(--letter-tekst); font-weight: 600; line-height: 1.3; color: var(--muted); white-space: nowrap; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
body:not(.light-mode) .tab { --tab-rand: rgba(255,255,255,.11); --tab-vul: rgba(255,255,255,.02); }
.tab:hover { color: var(--text); border-color: var(--goud); }
.tab.actief, body:not(.light-mode) .tab.actief { background: linear-gradient(135deg, var(--goud), var(--goud-2)); color: var(--op-goud); font-weight: 700; border-color: var(--goud); }
.tab.actief > i.ok { color: color-mix(in oklab, var(--groen), #000 35%); }
.tab > i { font-style: normal; margin-left: 7px; font-size: var(--letter-klein); line-height: 1; }
.tab > i.tab-ik { display: inline-flex; margin: 0 6px 0 0; }   /* icoontje vóór de tabnaam (gebruikersbeheer) */
.tab > i.ok { color: var(--groen-tekst); }
.tab[draggable="true"] { cursor: grab; }
.tab.tab-dragging { opacity: .35; cursor: grabbing; }
.tab.tab-drag-over { box-shadow: inset 3px 0 0 0 var(--goud); }

.kopje, .tabel th { font-size: var(--letter-hint); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kopje { display: block; margin: 0 0 12px; }
.kopje span { font-weight: 600; letter-spacing: 0; text-transform: none; margin-left: 6px; }

.tabel { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.tabel th { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.tabel td { padding: 10px 12px; font-size: var(--letter-tekst); border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.tabel tr:last-child td { border-bottom: none; }
.tabel tbody tr:hover td { background: color-mix(in oklab, var(--text) 4%, transparent); }
.tabel td.stil { color: var(--muted); }
.tabel td.acties { text-align: right; white-space: nowrap; }
.tabel td.acties .knop + .knop { margin-left: 6px; }

.lijst { display: flex; flex-direction: column; gap: 6px; }
.lijst.plat { gap: 2px; }
.rij.plat { width: 100%; box-sizing: border-box; padding: 6px 10px; background: transparent; border: 0; font-family: 'Manrope', sans-serif; font-size: var(--letter-klein); font-weight: 600; color: var(--text); text-align: left; cursor: pointer; transition: background var(--t-fast); }
.rij.plat:hover { background: color-mix(in oklab, var(--text) 5%, transparent); }
.rij.plat.aan { background: color-mix(in oklab, var(--goud) 15%, transparent); color: var(--goud); }
.rij.plat.stil { color: var(--muted); }
.rij.plat.vink { align-items: flex-start; gap: 10px; font-weight: 400; }
.rij-greep { color: var(--muted); font-size: var(--letter-nadruk); flex-shrink: 0; }
.rij-naam { font-size: var(--letter-tekst); font-weight: 700; color: var(--text); }
.rij > .rij-naam { flex: 1; min-width: 0; }
.rij-meta { font-size: var(--letter-hint); color: var(--muted); }
.rij-acties { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; }


/* ── 12. VOET, PROFIEL EN LEGE TEKSTEN — (stijlgids Footer & overig stap 1 t/m 5, v4.25) ──
   voet_ipp.php   één include voor de homepage, de projectpagina en het gebruikersbeheer.
   .voet          de voettekst: twee regels 11px gedempt, gecentreerd, lijntje erboven (V1);
                  .login = zonder lijn (loginscherm). Links erin zijn .voetlink
                  (zonder streep, goud bij hover).
   .voet-knoppen  de knoppenbalk eronder (thema, Uitloggen, Wachtwoord wijzigen,
                  Gebruikersbeheer; allemaal .knop.klein.doorzichtig), .voet-logo het logo.
                  Volgorde (I1): profiel, tekst, knoppen, logo.
   .profiel       het naamblokje (foto, voornaam, status) onder het lijntje, boven de
                  tekst; klik = .profiel-paneel dat uit het knopje groeit: je foto groot
                  (.profiel-groot), camera-knopje voor een andere foto (.profiel-pen),
                  prullenbakje (.profiel-weg), je status als tekstballonnetje
                  (.profiel-ballon; tijdens typen .profiel-ballon-form) en snelkeuzes
                  (.profiel-snel, chips). Data: API-acties profiel*, los van VaCom.
   .leeg          'er is hier niets': 12,5px gedempt, links, 12px eronder (popup, kaart,
                  lijst); .leeg.groot = gecentreerd met 48px ruimte (geen resultaten,
                  reviewkolom, lege tabel, fout met een <h2>), .laden = met de .spinner
                  erboven (laadscherm). (E1)
   ────────────────────────────────────────────────────────────────────────── */
.voet { margin: 32px 0 0; padding: 18px 16px 12px; border-top: 1px solid var(--border); text-align: center; font-size: var(--letter-hint); color: var(--muted); line-height: 1.7; }
.voet.login { border-top: none; }
.voet a { color: inherit; font-size: var(--letter-hint); font-family: 'Manrope', sans-serif; background: none; border: none; padding: 0; }
.voet-knoppen { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 8px auto 0; }
.voet-knoppen[hidden], .voet-knoppen .knop[hidden] { display: none; }
.voet-logo { width: 90px; height: 18px; margin: 14px auto 24px; background: var(--voet-logo, url('logo_footer.png')) center / contain no-repeat; opacity: .55; }
/* v5.4.1 (Portal): een merk met een los logo voor de lichte modus (--voet-logo-licht, uit merk_ipp.php) */
body.light-mode .voet-logo { background-image: var(--voet-logo-licht, var(--voet-logo, url('logo_footer.png'))); }

.profiel { position: relative; z-index: 50; display: flex; justify-content: center; margin: 0 auto 14px; line-height: normal; text-align: left; font-size: var(--letter-nadruk); color: var(--text); }
.profiel[hidden] { display: none; }
.profiel-knop { display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; cursor: pointer; font-family: inherit; color: var(--text); text-align: left; background: color-mix(in oklab, var(--surface) 55%, transparent); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--border); border-radius: 999px; transition: border-color var(--t-fast); }
.profiel-knop:hover, .profiel-knop[aria-expanded="true"] { border-color: var(--goud); }
.profiel-foto { flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--goud); color: var(--op-goud); font-weight: 800; font-size: 16px; }
.profiel-foto img, .profiel-groot-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* v5.0.2: het rondje in de kop (.kop-profiel), als laatste in .kop-acties: dezelfde foto
   of letter als .profiel-foto, even groot als een icoonknop. Zo zie je meteen dat (en als
   wie) je bent ingelogd. Klik = naar het naamblokje in de voet met het paneel open; op de
   reviewpagina (geen voet) alleen tonen (.alleen-tonen). */
.kop-profiel { flex: none; width: 31px; height: 31px; padding: 0; box-sizing: border-box; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--goud); color: var(--op-goud); border: 1px solid var(--goud); font-family: 'Manrope', sans-serif; font-size: var(--letter-tekst); font-weight: 800; line-height: 1; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.12); transition: box-shadow var(--t-fast), transform var(--t-fast); }
.kop-profiel[hidden] { display: none; }
.kop-profiel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kop-profiel:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px color-mix(in oklab, var(--goud) 45%, transparent); }
.kop-profiel.alleen-tonen { cursor: default; }
.kop-profiel.alleen-tonen:hover { transform: none; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
@media (max-width: 768px) { .kop-profiel { width: 36px; height: 36px; } }   /* zoals .knop.icoon op mobiel */
.profiel-tekst { display: flex; flex-direction: column; min-width: 0; max-width: 200px; }
.profiel-naam { font-size: var(--letter-nadruk); font-weight: 700; line-height: 1.2; }
.profiel-status { font-size: var(--letter-klein); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profiel-status[hidden] { display: none; }
/* Het paneel ligt op het knopje (onderkant gelijk) en groeit eruit; het knopje is zolang onzichtbaar */
.profiel-paneel { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(250px, calc(100vw - 32px)); padding: 16px; display: flex; flex-direction: column; gap: 8px; background: color-mix(in oklab, var(--surface) 94%, transparent); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--goud); border-radius: 26px; box-shadow: var(--shadow-pop); transform-origin: 50% 100%; animation: profielGroei .32s cubic-bezier(.2,.9,.25,1.05); }
.profiel-paneel.krimpt { animation: profielKrimp .22s ease-in forwards; }
.profiel-paneel[hidden] { display: none; }
.profiel.is-open .profiel-knop { visibility: hidden; }
@keyframes profielGroei { from { transform: translateX(-50%) scale(.35, .12); opacity: .6; } to { transform: translateX(-50%) scale(1, 1); opacity: 1; } }
@keyframes profielKrimp { from { transform: translateX(-50%) scale(1, 1); opacity: 1; } to { transform: translateX(-50%) scale(.35, .12); opacity: 0; } }
.profiel-sluit { position: absolute; top: 10px; left: 12px; z-index: 3; }
.profiel-groot { position: relative; width: 150px; height: 150px; margin: 14px auto 6px; flex: none; }
.profiel-groot-foto { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--goud); color: var(--op-goud); font-size: 60px; font-weight: 800; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.profiel-pen, .profiel-weg { position: absolute; right: 6px; bottom: 6px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; padding: 0; display: grid; place-items: center; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: transform var(--t-fast), border-color var(--t-fast); }
.profiel-pen:hover, .profiel-weg:hover { transform: scale(1.08); border-color: var(--goud); }
.profiel-weg { right: auto; bottom: auto; left: 6px; top: 6px; width: 30px; height: 30px; }
.profiel-weg:hover { color: var(--rood-tekst); border-color: var(--rood); }
.profiel-weg[hidden] { display: none; }
.profiel-ballon { position: absolute; left: 54%; top: -4px; z-index: 2; cursor: pointer; font-family: inherit; text-align: left; max-width: 120px; width: max-content; padding: 5px 10px; border-radius: 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 3px 10px rgba(0,0,0,.12); font-size: var(--letter-klein); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.profiel-ballon::before { content: ''; position: absolute; left: 10px; bottom: -6px; width: 10px; height: 10px; background: inherit; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg); }
.profiel-ballon[hidden] { display: none; }
button.profiel-ballon:hover { border-color: var(--goud); }
.profiel-ballon.is-leeg { color: var(--muted); font-style: italic; font-weight: 600; }
.profiel-ballon-form { padding: 3px; width: 132px; max-width: none; cursor: auto; left: auto; right: -20px; }
.profiel-ballon-form input { width: 100%; border: 0; outline: none; background: transparent; padding: 2px 6px; font-family: inherit; font-size: var(--letter-tekst); color: var(--text); }
.profiel-ballon-form:focus-within { border-color: var(--goud); box-shadow: var(--focus-ring); }
.profiel-snel { display: flex; flex-wrap: wrap; gap: 5px; }
.profiel-snel[hidden] { display: none; }
.profiel-melding { text-align: center; margin: 2px 0 0; }
.profiel-melding[hidden] { display: none; }
.profiel-melding.is-fout { color: var(--rood-tekst); }

.leeg { font-size: var(--letter-tekst); color: var(--muted); line-height: 1.6; margin: 0 0 12px; }
.leeg.groot { text-align: center; padding: 48px 16px; margin: 0; }
.leeg.groot h2 { font-size: var(--letter-kop); font-weight: 700; color: var(--text); margin: 0 0 6px; }
.leeg.laden { display: flex; flex-direction: column; align-items: center; gap: 12px; }


/* ═══ uit style_ipp.css: 7. velden (.veld) ═══ */
/* ── 7. VELDEN — één familie: .veld (stijlgids Formulieren, stap 1 t/m 10) ──
   .veld            tekstveld, keuzelijst (<select>) en groot tekstvak (<textarea>):
                    31px hoog, letter 13px/500, afronding 5px, vulling iets
                    donkerder dan de kaart, dunne rand; focus = gouden rand + ring
   .klein / .groot  27px (zijkolom, uploadoverzicht) / 38px (loginscherm)
   .glas            donker glas, voor velden óp een foto (loginscherm)
   .fout            rode rand + ring, met een .veldfout-tekst eronder
   .zoekveld        omhulsel met vergrootglas om een .veld
   .veldlabel       opschrift boven een veld; .veldhint / .veldfout eronder
   .veldrij         label + veld + hint als blok, 16px eronder
   .vink            vinkje: <label class="vink"><input type="checkbox"><span>tekst</span></label>
   Op mobiel (≤768px) is een veld 38px met letter 16px (anders zoomt iOS in). */
.veld {
  box-sizing: border-box; width: 100%; max-width: 100%;
  min-height: 31px; padding: 6px 12px;
  font-family: 'Manrope', sans-serif; font-size: var(--letter-tekst); font-weight: 600; line-height: 1.3;
  color: var(--text);
  background-color: #ffffff;
  border: 1px solid var(--border); border-radius: var(--radius);
  outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
body:not(.light-mode) .veld { background-color: rgba(0,0,0,.22); }
.veld::placeholder { color: var(--muted); }
.veld:focus { border-color: var(--goud); box-shadow: 0 0 0 2px color-mix(in oklab, var(--goud) 25%, transparent); }
.veld:disabled { opacity: .45; cursor: default; }
.veld.fout { border-color: var(--rood); box-shadow: 0 0 0 2px color-mix(in oklab, var(--rood) 22%, transparent); }
textarea.veld { display: block; min-height: calc(3 * 1.5em + 14px); line-height: 1.5; resize: vertical; }
select.veld { cursor: pointer; padding-right: 30px; color-scheme: dark;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23fbbc43' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 10px 6px; }
body.light-mode select.veld { color-scheme: light; }
select option { background: var(--card); color: var(--text); }
/* Maten */
.veld.klein { min-height: 27px; padding: 4px 10px; font-size: var(--letter-klein); }
select.veld.klein { padding-right: 26px; background-position: right 9px center; }
.veld.groot { min-height: 38px; padding: 9px 14px; font-size: var(--letter-nadruk); }
/* Op een foto (loginscherm) */
.veld.glas, body:not(.light-mode) .veld.glas { background-color: rgba(10,12,16,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(255,255,255,.25); color: #fff; }
.veld.glas::placeholder { color: rgba(255,255,255,.55); }
/* Zoekveld: vergrootglas links in het veld; het browserkruisje blijft weg (er is een Wissen-knop) */
.zoekveld { position: relative; display: inline-block; vertical-align: middle; }
.zoekveld > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.zoekveld .veld { padding-left: 30px; }
.zoekveld .veld::-webkit-search-decoration, .zoekveld .veld::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
/* Tekst om een veld heen */
.veldlabel { display: block; font-size: var(--letter-hint); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.veldlabel span { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .75; }
.veldhint { font-size: var(--letter-hint); color: var(--muted); margin-top: 4px; }
.veldfout { font-size: var(--letter-hint); color: var(--rood-tekst); margin-top: 4px; }
.veldrij { margin-bottom: 16px; }
/* In een popup staat onder een los tekstveld 16px ruimte (zoals voorheen); .mb-0 zet dat uit. */
.popup-inhoud input.veld:not(.mb-0), .popup-inhoud textarea.veld:not(.mb-0) { margin-bottom: 16px; }
/* Vinkje: eigen getekend, aan = goud gevuld zoals de hoofdknop */
.vink { display: inline-flex; align-items: center; gap: 8px; font-size: var(--letter-tekst); font-weight: 600; color: var(--text); cursor: pointer; user-select: none; }
.vink > span span { font-weight: 400; color: var(--muted); }  /* toelichting tussen haakjes */
.vink input { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0; flex: none; position: relative; cursor: pointer;
  background-color: #ffffff; border: 1px solid var(--border); border-radius: 4px; transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
body:not(.light-mode) .vink input { background-color: rgba(0,0,0,.22); }
.vink input:hover { border-color: var(--goud); }
.vink input:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--goud) 25%, transparent); }
.vink input:checked, body:not(.light-mode) .vink input:checked { background: linear-gradient(135deg, var(--goud), var(--goud-2)); border-color: var(--goud); }
.vink input:checked::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--op-goud); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vink input:disabled { opacity: .45; cursor: default; }
/* Mobiel: 38px en letter 16px, anders zoomt iOS in op het veld */
@media (max-width: 768px) {
  .veld, .veld.klein, .veld.groot { min-height: 38px; font-size: 16px; }
  .vink input { width: 20px; height: 20px; }
  .vink input:checked::after { left: 7px; top: 3px; width: 5px; height: 10px; }
}


/* ═══ uit style_ipp.css: glas- en aurora-tokens, aurora-achtergrond ═══ */
:root {
  --glass-blur: 24px;
  --glass-opacity: 0.40;   /* v4.3: van 0.55 → 0.40, surface (#1c1f27) zit dicht bij bg (#111318), dus pas met flink minder opacity zie je écht de aurora doorschemeren */
  --aurora-1: color-mix(in oklab, var(--groen) 20%, transparent);   /* groen — linksboven (was goud, gewisseld met aurora-3) */
  --aurora-2: color-mix(in oklab, var(--blauw) 22%, transparent);  /* zacht blauw (was 0.13) */
  --aurora-3: color-mix(in oklab, var(--goud) 30%, transparent);   /* goud — onderaan midden (was groen, gewisseld met aurora-1) */
  --radius-card: 7px;      /* kaarten/modals/boxen — was 14px, gehalveerd voor strakker uiterlijk (zie --radius bovenin) */
  /* (v4.11: --link/--link-hov stonden hier dubbel — die staan nu alleen
     nog in de hoofd-:root bovenin, met deze v4.7-waarden.) */
}

body.light-mode {
  --glass-opacity: 0.50;
  --aurora-1: color-mix(in oklab, var(--groen) 22%, transparent);   /* groen — linksboven */
  --aurora-2: rgba(58, 143, 181, 0.22);    /* (was 0.14) */
  --aurora-3: color-mix(in oklab, var(--goud) 34%, transparent);   /* goud — onderaan midden */
}

/* ── AURORA ACHTERGROND ────────────────────────────────────────────── */
body {
  background:
    radial-gradient(60% 50% at 12% 20%, var(--aurora-1), transparent 70%),
    radial-gradient(45% 40% at 88% 30%, var(--aurora-2), transparent 70%),
    radial-gradient(55% 45% at 50% 92%, var(--aurora-3), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}