/* ═══════════════════════════════════════════════════════════════════
   Invite Project Portal — eigen stylesheet
   style_ipp.css
   Wordt gebruikt door: admin_ipp.php, project_ipp.php, review_ipp.php,
   beheer_ipp.php, stijlgids_ipp.php — altijd NA invite_stijl.css.
   Sinds v5.1.0 staan de tokens en de algemene bouwstenen (knoppen, velden,
   popups, chips/labels, lijsten, voet en profiel) in invite_stijl.css, die
   ook de Invite Hub gebruikt. Hier staat alleen wat van de Portal zelf is.
   ═══════════════════════════════════════════════════════════════════ */


/* (Verplaatst naar invite_stijl.css: reset, kleur- en lettertokens, lichte modus, oude kleurnamen.) */

/* Lichte modus — overrides voor plekken waar harde kleuren staan
   die niet via CSS-variabelen lopen. Houdt het beperkt: alleen
   zaken die echt niet werken op lichte achtergrond. */
/* (v4.11: aparte licht-overrides voor kaart-hovers en filter-menu zijn weg —
   --border-hov/--shadow-card/--shadow-pop regelen dat nu via de tokens.) */
body.light-mode .card-header:hover        { background: rgba(0,0,0,.03); }
body.light-mode .filter-menu-item:hover   { background: rgba(0,0,0,.04); }
body.light-mode .changelog-box h2         { background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; }
/* (Verplaatst naar invite_stijl.css: popups in de lichte modus.) */

body.light-mode .upload-zone-sub          { opacity: 1; }                      /* was 60% */
body.light-mode .hint-zacht               { opacity: 1; }
body.light-mode .nm-publish-row           { color: var(--text); }
body.light-mode .grp-label-rename:hover   { background: rgba(0,0,0,.06); }
body.light-mode .bn-lijst code,
body.light-mode .bn-voorbeeld code        { background: rgba(0,0,0,.06); }
/* v4.16.4: lichtblauw en goud als tekst zijn onleesbaar op wit — donkerder tint */
body.light-mode .role-designer            { color: var(--blauw-tekst); }
/* (v5.1.0: hier stond een losse selector "body.light-mode .filter-menu-item.active,"
   zonder eigen regel; hij hing per ongeluk aan de body-regel en trof niets
   (het filtermenu gebruikt .aan). Weggehaald bij het afsplitsen.) */
/* Login-scherm donker houden — achtergrondfoto werkt beter met donkere box */
/* (verwijderd) body.light-mode #login-screen kreeg hier var(--bg), maar
   dat drukte de aurora-blobs van de body weg. #login-screen is nu in
   beide thema's transparant (zie sectie 20); de body levert de kleur. */


/* De thema-knop (.btn-theme, #theme-toggle) is sinds v4.19.3 een gewone
   .knop.doorzichtig; .btn-theme is alleen nog een haakje voor JS. */


/* (Verplaatst naar invite_stijl.css: body en links.) */

/* ── 2. GEDEELDE HEADER ── */
/* (v4.27: de kop is .kop / .kop-titel / .kop-acties, sectie 14.) */


/* ── 3. ADMIN-BAR ── */
/* (v4.27: de actieknoppen op de projectpagina staan in .kop-acties, sectie 14; #admin-bar blijft als JS-haakje.) */


/* ── 4. MAIN ─────────────────────────────────────────────────────── */
.main { padding: 32px 72px; }   /* (wordt verderop 20px 16px 32px: de kop heeft zelf 12px eronder) */


/* ── 5. FOOTER (gedeeld) ─────────────────────────────────────────── */
/* (v4.25: de voet is .voet / .voet-knoppen / .voet-logo, sectie 12; de HTML staat in voet_ipp.php.) */


/* (Verplaatst naar invite_stijl.css: 6. knoppen (.knop).) */

/* ── 7. FILTER BAR ── */
/* (v4.27: Nieuw project, het zoekveld en de Filter-knop staan in .kop-acties, sectie 14.) */

/* Filter knop + dropdown */
.filter-wrap { position: relative; }
/* (De Filter-knop is een .knop (sinds v4.27 de gewone maat); staat er een filter aan, dan krijgt hij .actief.) */
.filter-menu {   /* een .vlak.zweef */
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  padding: 8px;
  min-width: 170px;
  z-index: 100;
}
/* (v4.24: de kop van het filtermenu is een .kopje en de regels zijn .rij.plat, sectie 11.) */
.filter-menu .kopje { padding: 4px 8px; margin-bottom: 4px; }
.filter-menu-divider { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }

/* (Het actieve filter is een .chip.klein.klik, sectie 10.) */

/* (v4.24: .section-label is een .kopje, sectie 11.) */
.section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}

/* ── 8. KAARTEN — één familie: .kaart (stijlgids Kaarten, stap 1 t/m 8) ──
   .kaart           projectkaart, middelenkaart: glas (surface op 60% van de
                    glass-opacity, vervaging 24px), rand 1px, afronding 7px;
                    hover = lichtere rand, schaduw en 1,5% groter, geen glans
   .kaart-beeld     de kop met het beeld (collage of thumbnail); donker
                    verloopje onderin zodat de naam leesbaar is (v5.0.8)
   .kaart-naam      de naam, linksonder óp het beeld (v5.0.8), wit met schaduw, 22px;
                    .klein = 18px (middelenkaart)
   .kaart-badges    rechtsboven op het beeld: status, opmerkingen, concept
   .kaart-midden    chips en badges, 12×16px, op de volle glass-opacity
   .kaart-voet      knoppen, 12×16px, lijntje erboven; .kaart-voet-meta is de
                    regel eronder (designer, datum) met een eigen lijntje
   .klik            de hele kaart is een knop: gouden rand bij hover
   .definitief / .slapend   toestanden; .drag-over / .dragging zijn de
                    sleep-haakjes van de JS (gouden ring / 40%)
   .vlak            kaart zonder beeld (kop, hero, statistiek-kaartje,
                    filtermenu); .zweef = met popup-schaduw
   .rij             lijstrij (middelen in een popup, prullenbak, rol-label):
                    kaartkleur, rand, 5px; gouden rand bij hover of slepen
   De oude namen (project-card, ond-card, card-*, ond-*) blijven alleen als
   haakje voor de JS en voor de opbouw van collage en thumbnail. */
.kaart {
  position: relative; overflow: hidden;
  background: color-mix(in oklab, var(--surface) calc(var(--glass-opacity) * 60%), 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);
  transition: border-color var(--t-slow), box-shadow var(--t-slow), transform var(--t-slow) ease-out, opacity var(--t-fast);
}
.kaart:hover { border-color: var(--border-hov); box-shadow: var(--shadow-card); transform: scale(1.015); }
.kaart.klik { cursor: pointer; }
.kaart.klik:hover { border-color: var(--goud); }
.kaart.definitief, .kaart.definitief:hover { border-color: var(--groen); }
.kaart.definitief:hover { box-shadow: 0 12px 40px color-mix(in oklab, var(--groen) 25%, transparent); }
/* v5.0.6: een slapend project is grijs (foto's, naam, middelen) en iets gedempt.
   v5.0.7: het label "Slapend" rechtsboven blijft in kleur, dus het grijs zit op de
   onderdelen en niet op de hele kaart (een filter op de kaart geldt ook voor het label). */
.kaart.slapend { opacity: .82; }
.kaart.slapend .card-collage-wrap > :not(.kaart-badges),
.kaart.slapend .kaart-midden { filter: grayscale(1); }
.kaart.slapend:hover { opacity: 1; }
.kaart.dragging  { opacity: .4; border-color: var(--goud); }
.kaart.drag-over { border-color: var(--goud); box-shadow: var(--focus-ring); }
.kaart-beeld { position: relative; overflow: hidden; background: var(--card); }
/* v5.0.8: de naam staat weer onderaan op het beeld, met het verloopje mee naar onder
   (was sinds v4.21 linksboven); de badges blijven rechtsboven met hun eigen donkere vlak. */
.kaart-beeld::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
  pointer-events: none; z-index: 1;
}
.kaart-beeld:has(.card-collage-empty)::after { display: none; }   /* leeg project: egaal vlak, geen verloopje */
.kaart-naam {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 8px 16px 10px; box-sizing: border-box;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 14px rgba(0,0,0,.4);
  font-size: var(--letter-titel); font-weight: 700; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  z-index: 2; pointer-events: none;
}
.kaart-naam.klein { font-size: var(--letter-kop); padding: 7px 14px 8px; }
.kaart-badges { position: absolute; top: 9px; right: 12px; z-index: 3; display: flex; gap: 6px; align-items: center; pointer-events: none; }
.kaart-badges > * { margin: 0; }
.kaart-midden { padding: 12px 16px; background: color-mix(in oklab, var(--surface) calc(var(--glass-opacity) * 100%), transparent); }
.kaart-voet { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kaart-voet-meta { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
/* (Verplaatst naar invite_stijl.css: .vlak en .rij.) */



/* ── 8. PROJECT GRID (admin homepage — masonry) ──────────────────── */
/* Masonry via eigen JS-verdeling (layoutMasonry in admin_ipp.php):
   kaarten worden over .masonry-col-divs verdeeld, telkens de kortste
   kolom eerst. Waarom niet gewoon CSS:
   - CSS-multicol (columns) liet bij weinig kaarten soms hele kolommen
     leeg (balancing met onbreekbare kaarten) — zie de klacht van juli '26;
   - CSS-grid rekte kaarten op tot rijhoogte en brak het masonry-gevoel.
   De JS-verdeling houdt het masonry-uiterlijk én vult altijd alle
   kolommen. */
.project-grid {
  display: flex;
  gap: 28px;   /* v4.27.2: ruimer tussen de kaarten (was 18); de projectpagina heeft ook 28 */
  align-items: flex-start;
}
.masonry-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* (v4.21: de projectkaart is een .kaart, sectie 8. Hieronder alleen nog de
   opbouw van de collage; .project-card is een haakje voor de JS.) */
.card-header {
  padding: 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.card-header:hover { background: rgba(255,255,255,.02); }
/* Zit in de (al gepadde) chips-container — geen eigen padding meer nodig. */
.card-empty        { margin: 0; padding: 2px 0; }   /* een .leeg (sectie 12) */

.card-collage-wrap { position: relative; }
/* Zonder afbeeldingen (egaal vlak) is wit onleesbaar in lichte modus —
   dan gewoon de normale tekstkleur, zonder schaduw en zonder verloopje. */
.card-collage-empty + .kaart-naam { color: var(--text); text-shadow: none; }
.card-collage-empty::after { display: none; }

/* ── Kaart-collage ──────────────────────────────────────────────────
   Vaste hoogte zodat kaarten niet uitrekken; afbeeldingen croppen via
   object-fit: cover. Indeling (via cardCollageHtml in admin_ipp.php):
     basis        → 1 afbeelding, volle breedte
     .collage-2   → 3/4 + 1/4 naast elkaar
     .collage-3   → 3/4 + het 1/4-deel horizontaal in tweeën
   Leeg project  → .card-collage-empty: rustig egaal vlak, zelfde hoogte. */
.card-collage {
  height: 140px;
  display: grid;
  gap: 2px;
  background: var(--card);
  position: relative;
}
/* (Het donkere verloopje voor de naam zit op .kaart-beeld::after, sectie 8.) */
.card-collage.collage-2,
.card-collage.collage-3 { grid-template-columns: 3fr 1fr; }
.collage-side { display: grid; grid-template-rows: 1fr 1fr; gap: 2px; min-height: 0; }
.collage-cell { overflow: hidden; min-height: 0; background: var(--card); }
.collage-cell img,
.collage-cell canvas { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Middelen als meebuigende chips (was: full-width rijen met mini-thumbs).
   Korte namen delen een regel, een lange naam pakt vanzelf een hele regel
   (en wordt pas afgekapt als hij breder is dan de kaart). Max 6 chips +
   "+N meer" — zie renderProjectCard in admin_ipp.php. */
.card-onderdelen {
  padding: 12px 16px;
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
/* (v4.23: de middel-chip is een .chip, sectie 10; hier alleen het verbergen van chips boven de MAX.) */
/* v5.0.1: met .chip ervoor, anders won de display van .chip (sectie 10) en stonden alle middelen er. */
.chip.ond-chip-hidden    { display: none; }

/* De voet van de projectkaart is een .kaart-voet (sectie 8); alleen de knoppen (v5.0.1: de aanmaakdatum is weg). */
.card-footer { justify-content: space-between; }
.card-footer-left { display: flex; gap: 6px; flex-wrap: wrap; }

/* (v4.21: de VaCom-koppeling in de Portal-schermen is weg: geen icoontje op
   de kaarten, geen kanaalkaart, geen popup en geen meldingenbalk meer.
   VaCom zelf draait door in de map vacom/ en leest de Portal via de API.) */

/* v4.13.8: bestandsnaam-afspraak — hint onder de upload-zones en de lijst in de waarschuwing */
.bestandsnaam-hint { font-size: var(--letter-hint); color: var(--muted); margin-top: 6px; line-height: 1.4; }   /* v4.29: 11px, zoals .veldhint */
.bestandsnaam-hint.veldhint { margin-top: 4px; }   /* v5.1.0: zoals vóór het afsplitsen won hier .veldhint (4px) */
.bn-lijst { margin: 8px 0 10px; padding-left: 16px; }
.bn-lijst li { margin-bottom: 6px; word-break: break-all; }
.bn-lijst code, .bn-voorbeeld code { font-size: var(--letter-klein); color: var(--text); background: rgba(255,255,255,.06); padding: 1px 4px; border-radius: 3px; }
.bn-voorbeeld { line-height: 1.5; }
/* (De waarschuwing is langer dan een gewone bevestiging: .popup.klein:has(.bn-lijst) is 460px, sectie 9.) */

/* ── v4.16: VIDEO VIA VIMEO-LINK (in de beheer-popup) ─────────────────── */
.video-add { margin-top: 12px; }
.video-add-rij { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.video-add-rij .veld { flex: 1; min-width: 180px; width: auto; }
/* v4.16.1: plak-lijstje (IPP.videoLinks): link, naam, weghaal-knop en een statusregel */
.video-link-rij .vl-naam  { flex: 1 1 200px; }
.video-link-rij .vl-weg   { padding: 6px 10px; flex: none; }
.video-link-rij .vl-status { flex-basis: 100%; min-height: 0; }
.video-link-rij .vl-status:empty { display: none; }

/* ── v4.15: UPLOAD-OVERZICHT ─────────────────────────────────────────────
   Eén scherm vóór het uploaden (IPP.uploadOverzicht): per bestand wat de
   portal ervan maakt en wat opvalt. <dialog> in de top layer, dus altijd
   bóven de beheer-popup. */
/* Een .popup (sectie 9) als <dialog>: eigen maat en indeling in kolommen. */
.upl-ovz {
  /* v5.1.0: breedte, max. hoogte en het scrollen komen van .popup
     (invite_stijl.css); hier stonden ze ook, maar die verloren altijd van
     .popup. Bij het afsplitsen weggehaald, zodat het zo blijft. */
  margin: auto; /* de reset zet margin op 0 — zonder dit hangt de dialog linksboven */
  padding: 0; font-family: 'Manrope', sans-serif;
  display: flex; flex-direction: column; overflow-x: hidden;
}
.upl-ovz[open] { display: flex; }
.upl-ovz::backdrop { background: rgba(0,0,0,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.upl-ovz-kop { position: static; }
.upl-ovz-intro { padding: 14px 24px 0; font-size: var(--letter-tekst); color: var(--muted); line-height: 1.5; }
.upl-ovz-lijst { overflow-y: auto; padding: 10px 16px; flex: 1; min-height: 0; }
/* (v4.24: de regels zijn .rij.plat.vink met .rij-naam / .rij-meta, sectie 11; hier alleen de statuskleuren en de plaatsing.) */
.upl-rij:not(.vink) input { margin-top: 2px; }   /* v5.1.0: :not(.vink) — bij een .vink won altijd .vink input (margin 0) */
.upl-rij-inhoud { min-width: 0; flex: 1; }
.upl-rij .rij-naam { word-break: break-all; line-height: 1.4; }
.upl-status { line-height: 1.45; margin-top: 2px; }
.upl-rij.ok .upl-status { color: var(--groen-tekst); }
.upl-rij.let .upl-status { color: var(--goud-tekst); }
.upl-tip { font-size: var(--letter-hint); color: var(--muted); line-height: 1.45; margin-top: 3px; }
/* v4.17.3: keuze vervangen / ernaast bij een versie die al bestaat */
select.upl-keuze { margin-top: 6px; width: auto; max-width: 100%; }
.upl-ovz-uitleg { padding: 10px 24px 0; border-top: 1px solid var(--border); font-size: var(--letter-klein); color: var(--muted); }
/* (.upl-ovz-knoppen is een .popup-voet.) */
body.light-mode .upl-rij:hover { background: rgba(0,0,0,.03); }

/* (Verplaatst naar invite_stijl.css: scrollbalken.) */

/* ── 9. MIDDELEN GRID (project_ipp.php — masonry) ────────────────── */
/* v4.11: samengevoegd met twee v4-overrides — kolom-minimum 320px zodat
   3+ kolommen robuust passen op 1920px, en margin-top 0 zodat de gap met
   de header gelijk is aan de homepage (alleen .main padding-top). */
/* v4.13: zelfde JS-masonry als de homepage (IPP.layoutMasonry) i.p.v. CSS-
   multicol — nodig om de VaCom-kanaalkaart altijd rechtsboven te zetten. */
.ond-grid {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-top: 0;
}
.ond-grid .masonry-col { gap: 28px; }
.ond-grid .masonry-col > .ond-card { margin-bottom: 0; break-inside: auto; }
/* (v4.21: de middelenkaart is een .kaart, sectie 8; .ond-card is een haakje
   voor de JS en de masonry.) */
.ond-card { break-inside: avoid; margin-bottom: 28px; cursor: default; }

/* v4.11: aspect-ratio 4:3 (was aparte v3.4-override) — elke thumbnail
   dezelfde box, beeld vullend gecropt via object-fit op img/canvas. */
.ond-thumb        { width: 100%; overflow: hidden; background: var(--card); position: relative; cursor: grab; aspect-ratio: 4 / 3; }
/* (De middelnaam is een .kaart-naam.klein óp de thumbnail (.kaart-beeld), sectie 8.)
   Zonder afbeelding (egaal vlak): geen verloopje, normale tekstkleur. */
.ond-thumb-noimg::after { display: none; }
.ond-thumb-noimg .kaart-naam { color: var(--text); text-shadow: none; }
.ond-thumb:active { cursor: grabbing; }
/* Klikbare thumb (gaat naar de reviewpagina, net als de Bekijken-knop).
   Pointer-cursor want klikken is de primaire actie; slepen blijft werken.
   Subtiele helderheid + lichte zoom op de afbeelding bij hover als hint. */
.ond-thumb-clickable        { cursor: pointer; }
/* Geen eigen scale meer op de afbeelding: de hele kaart schaalt al bij
   hover, dubbel inzoomen oogde onrustig. Alleen het lichte oplichten
   bleef, als hint dat de afbeelding klikbaar is. */
.ond-thumb-clickable img,
.ond-thumb-clickable canvas { transition: filter var(--t-fast) ease; }
.ond-thumb-clickable:hover img,
.ond-thumb-clickable:hover canvas { filter: brightness(1.05); }
.ond-thumb img,
.ond-thumb canvas { width: 100%; display: block; }
.ond-thumb-empty  {
  display: flex; align-items: center; justify-content: center;
  background: var(--card); aspect-ratio: 4/3;
}

.drag-handle {
  position: absolute; top: 6px; left: 6px;
  width: 24px; height: 24px;
  background: rgba(0,0,0,.5);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: grab; opacity: 0;
  transition: opacity var(--t-fast); z-index: 2;
}
.ond-thumb:hover .drag-handle { opacity: 1; }

/* (.ond-body is een .kaart-midden, sectie 8.) */
/* (v4.23: de designer is een .chip.klein en het opmerkingen-label een .label.goud, sectie 10.) */
/* (.ond-card-footer / .ond-footer-meta zijn .kaart-voet / .kaart-voet-meta, sectie 8.) */
.ond-created { font-size: var(--letter-mini); color: var(--muted); margin-left: auto; white-space: nowrap; }


/* ── 9a. DEFINITIEF (groen) ──────────────────────────────────────── */
/* Middel is afgerond en bestanden staan op transfer.invite.nl.
   Klant ziet "Download bestanden" knop ipv review. */

/* (Groene rand op een definitief middel: .kaart.definitief, sectie 8.) */

/* (.ond-item.is-definitief / .is-unseen-by-staff zijn verwijderd — de
   status zit nu in de chips zelf: groene rand + vinkje voor definitief,
   gouden rand + stip voor nieuwe klant-activiteit. Zie .ond-chip.) */

/* (Badge "Definitief" is een .label.groen, sectie 10.) */
/* (.badge-definitief-sm en .badge-opmerkingen-sm zijn verwijderd — de
   homepage-rijen waar ze op stonden zijn vervangen door .ond-chip.) */

/* (De Transfer-knop is sinds de knoppen-ombouw een .knop.klein.groen.) */

/* Definitief-vinkje + transfer-link in de Beheren-popup (v4.30, D1): aangevinkt
   wordt het blok een groene .balk.blok (sectie 17); hier alleen de ruimte. */
.linkdef-bar { margin-bottom: 20px; }
.definitief-blok { margin-top: 10px; }
.definitief-blok.balk { margin-bottom: 0; }
/* (Transfer-knop en "Download bestanden" zijn sinds de knoppen-ombouw
   .knop.klein.groen resp. .knop.groen.breed.) */


/* (Verplaatst naar invite_stijl.css: 9. popups, 10. chips/labels/tellers, 11. tabs/tabellen/lijsten, 12. voet/profiel/lege teksten.) */

/* ── 13. TEGELS (thumbnails) — (stijlgids Thumbnails stap 1 t/m 5, v4.26) ──
   .tegels        rij tegels met 10px ertussen (.klein: 8px).
   .tegel         130 × 81 (16:10), 5px afronding, kaartkleur, 1px rand (T2);
                  .klein 64 × 40 (strook bij Nieuw project/middel), .vierkant 88 × 88
                  en .vierkant.klein 44 × 44 (bijlagen bij opmerkingen), .klik = klikbaar.
   .tegel-naam    naam onderin op een donker verloopje, 11px wit; de versie erin als
                  .label.goud (L1). .tegel-sluier = concept: zwart 55% met label en
                  Vrijgeven-knop. .tegel-leeg = tekst in het midden zonder beeld (PDF, Geen).
   .tegel > .knop knopje rechtsboven (.links = linksboven): .knop.icoon.klein.glas, 27px,
                  op kleine tegels 20px; verschijnt bij hover, zonder hover (telefoon)
                  staat het er altijd (K1).
   Toestanden: hover = gouden rand; .aan (gekozen, thumbnail-kiezer) = gouden rand + ring
   met een goud vinkje .tegel-vink; slepen via de JS-haakjes .dragging (40%) en
   .drag-over (gouden ring).
   ───────────────────────────────────────────────────────────────────────── */
.tegels { display: flex; flex-wrap: wrap; gap: 10px; }
.tegels.klein { gap: 8px; }
/* isolation: naam, sluier en knopjes blijven binnen de tegel (schoven anders over de plakkende popup-kop) */
.tegel { position: relative; isolation: isolate; flex: none; width: 130px; height: 81px; box-sizing: border-box; border-radius: var(--radius); overflow: hidden; background: var(--card); border: 1px solid var(--border); user-select: none; transition: border-color var(--t-fast), opacity var(--t-med), box-shadow var(--t-fast); }
.tegel.klein { width: 64px; height: 40px; }
.tegel.vierkant { width: 88px; height: 88px; }
.tegel.vierkant.klein { width: 44px; height: 44px; }
.tegel > img, .tegel > canvas { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.tegel.klik { cursor: pointer; }
.tegel[draggable="true"] { cursor: grab; }
.tegel[draggable="true"]:active { cursor: grabbing; }
.tegel:hover, .tegel.aan, .tegel.drag-over { border-color: var(--goud); }
.tegel.aan, .tegel.drag-over { box-shadow: var(--focus-ring); }
.tegel.dragging { opacity: .4; }
.tegel-vink { position: absolute; top: 4px; left: 4px; z-index: 3; width: 18px; height: 18px; border-radius: 50%; background: var(--goud); color: var(--op-goud); font-size: var(--letter-hint); font-weight: 800; display: grid; place-items: center; pointer-events: none; }
.tegel-naam { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 5px; padding: 16px 6px 5px; background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #fff; font-size: var(--letter-hint); font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tegel-naam .label { flex: none; }
.tegel-sluier { position: absolute; inset: 0; z-index: 2; background: rgba(0,0,0,.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.tegel-leeg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 4px; text-align: center; font-size: var(--letter-hint); color: var(--muted); }
.tegel > .knop { position: absolute; top: 4px; right: 4px; z-index: 3; opacity: 0; transition: opacity var(--t-fast); }
.tegel > .knop.links { right: auto; left: 4px; }
.tegel:hover > .knop, .tegel:focus-within > .knop { opacity: 1; }
@media (hover: none) { .tegel > .knop { opacity: 1; } }
.tegel.klein > .knop { width: 20px; height: 20px; font-size: var(--letter-hint); top: 3px; right: 3px; }
.tegel.klein > .knop.links { right: auto; left: 3px; }


/* ── 14. KOP — (stijlgids Koppen stap 1 t/m 5, v4.27) ──
   .kop          open kop zonder kader (zoals de Hub): de titel links (.kop-titel, 40px
                 extra vet) en de knoppen rechts (.kop-acties) met hun onderkant op de
                 basislijn van de titel; 36px erboven, 32px eronder, 32px opzij (gelijk met
                 de kaarten). Plakt bovenaan; bij scrollen zet js_ipp.js (initKop) .gezakt:
                 een glazen balk van 56px met de titel 20px en dezelfde knoppen (S2).
                 .kop.stil plakt niet (reviewpagina, die scrolt niet).
   .kop-acties   knoppen in vaste volgorde (K1): de groene terugknop, de gouden
                 hoofdknop, de rest, op de review de thema-knop helemaal rechts; allemaal
                 de gewone maat. Op een telefoon komen ze onder de titel (28px).
   Oude namen (.hdr .hdr-title .pd-hero .pd-title .pd-actions #admin-bar #hdr-name
   #proj-name .filter-bar-actions .hdr-right-wide) blijven alleen als JS-haakje.
   ──────────────────────────────────────────────────────────────────────── */
/* v4.27.1: meer lucht boven en vooral onder de titel (was 24 / 12); regelafstand
   1,25 i.p.v. 1,05, anders knipt overflow:hidden de staarten van j/g/p af. */
/* v4.27.2: ruimer: 32px opzij (gelijk met .main), 36px boven, 32px onder de titel. */
.kop { position: relative; z-index: 30; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 36px 32px 32px; }
.kop-titel { font-size: var(--letter-pagina); font-weight: 800; letter-spacing: -0.03em; line-height: 1.25; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kop-acties { display: flex; align-items: center; gap: 6px; flex: none; margin-bottom: 10px; }   /* 10px: de onderkant van de knoppen op de basislijn van de titel (regelafstand 1,25) */
.kop-acties .zoekveld { width: 200px; }
/* Ingezakt (alleen desktop): zodra de open kop uit beeld is gescrold, schuift
   dezelfde kop als vaste glazen balk van 56px bovenaan in beeld. De JS zet
   dan een .kop-plek (lege ruimte ter hoogte van de open kop) op zijn plaats,
   zodat de pagina niet verspringt. */
@media (min-width: 769px) {
  .kop.gezakt { position: fixed; top: 0; left: 0; right: 0; align-items: center; padding: 10px 32px; 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-bottom: 1px solid var(--border); animation: kopIn .22s ease; }
  .kop.gezakt .kop-titel { font-size: var(--letter-titel); }
  .kop.gezakt .kop-acties { margin-bottom: 0; }
}
@keyframes kopIn { from { transform: translateY(-100%); } to { transform: none; } }
.kop-plek[hidden] { display: none; }


/* ── 15. REVIEWPAGINA — (stijlgids Reviewpagina stap 1 t/m 7, v4.28) ──
   .beeld         het vlak achter de afbeelding of PDF: zwart (licht #e6e1d7), zonder rand,
                  7px afronding met de linkerbovenhoek recht tegen het tabblad (B1).
   .beeldbalk     alles wat op het beeld zweeft: de hint, de lage-resolutie-melding, de
                  videobalk, de zoomknoppen (.knoppen) en de PDF-pijlen (.pijl): een pil
                  van 30px, zwart 45% met vervaging, witte rand 15%, 11,5px wit (H1).
   .pin           rond bolletje van 26px in de kleur van de persoon, witte rand 2px,
                  schaduw, nummer 11px extra vet; .klein = 22px in de lijst;
                  .active/.actief = gouden ring; .is-internal = wit nummer (P2).
   .kolom         de zijkolom, een .vlak (Z1): .kolom-deel (12 × 16px, lijntje eronder),
                  .kolom-naam 14px vet, .kolom-meta 11px gedempt, .kolom-lijst (scrolt).
   opmerkingen    in .kolom-lijst: per persoon een .kopje (plakt) met .teller, per
                  opmerking een .rij.plat.opm met .opm-inhoud > .opm-tekst 12,5px,
                  .opm-tijd 11px gedempt, .opm-acties, .opm-reacties; .hl/.aan = goudtint
                  (pin open), .is-done/.klaar = doorgestreept, .is-internal/.intern =
                  oranje streep links (O1).
   .verzend       de verzendknop: een .knop.goud.breed, sinds v5.0.1 onder de kolom (even
                  breed, de kolom is daarvoor korter) zodat hij de lijst niet afdekt;
                  op mobiel zwevend rechtsonder. .sent = groen (V1).
   Oude namen (.viewer .hint .lowres-ctrl .video-bar .zoom-ctrl .pdf-nav .sidebar .sb-*
   .person-hdr .ann-item .ai-* .ann-reply-sb .fab-send) blijven alleen als JS-haakje.
   ──────────────────────────────────────────────────────────────────────── */
.beeld { flex: 1; overflow: auto; background: #111; cursor: crosshair; margin: 0 0 24px 32px; border-radius: 0 var(--radius-card) var(--radius-card) var(--radius-card); }   /* v4.28.2: zonder rand */
body.light-mode .beeld { background: #e6e1d7; }
.beeldbalk { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 999px; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.15); color: #fff; font-family: 'Manrope', sans-serif; font-size: var(--letter-klein); font-weight: 600; white-space: nowrap; box-sizing: border-box; }
.beeldbalk button { background: none; border: 0; color: inherit; font: inherit; font-family: 'Manrope', sans-serif; cursor: pointer; min-width: 24px; height: 22px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-fast); }
.beeldbalk button:hover { background: rgba(255,255,255,.16); }
.beeldbalk.knoppen { padding: 0 6px; gap: 2px; }
.beeldbalk.pijl { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 44px; padding: 0; justify-content: center; cursor: pointer; font-size: 16px; user-select: none; }
.beeldbalk.pijl:hover { background: rgba(0,0,0,.65); }
.pin { position: absolute; z-index: 4; width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; font-size: var(--letter-hint); font-weight: 800; color: #111; transform: translate(-50%,-50%); cursor: grab; transition: background var(--t-med); animation: pinIn .25s cubic-bezier(.34,1.56,.64,1); }
.pin.is-internal, .pin.intern { color: #fff; }
.pin.active, .pin.actief { box-shadow: 0 0 0 3px var(--goud), 0 2px 8px rgba(0,0,0,.4); z-index: 5; }
.pin.dragging { cursor: grabbing; transform: translate(-50%,-50%) scale(1.2); box-shadow: 0 6px 20px rgba(0,0,0,.6); z-index: 10; transition: none; }
.pin.klein { position: static; width: 22px; height: 22px; font-size: var(--letter-mini); transform: none; box-shadow: 0 1px 4px rgba(0,0,0,.3); animation: none; cursor: inherit; flex: none; margin-top: 1px; }
@keyframes pinIn { from { transform: translate(-50%,-50%) scale(0); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }
.kolom { width: 305px; flex-shrink: 0; margin: 0 32px 74px 16px;   /* v5.0.1: 74 = 24 + de verzendknop (38) + 12 ertussen */ display: flex; flex-direction: column; overflow: hidden; position: relative; }
.kolom-deel { padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.kolom-naam { font-size: var(--letter-nadruk); font-weight: 700; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.kolom-meta { font-size: var(--letter-hint); color: var(--muted); }
.kolom-meta.midden { text-align: center; margin-top: 6px; }
.kolom-lijst { flex: 1; overflow-y: auto; padding: 6px 8px 12px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.kolom-lijst > .kopje { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 6px; margin: 0; position: sticky; top: -6px; z-index: 2; background: color-mix(in oklab, var(--surface) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* v4.28.2: de volgende persoon begint met wat ruimte en een lijntje erboven */
.kolom-lijst > .kopje ~ .kopje { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.opm { align-items: flex-start; gap: 10px; padding: 8px 10px; font-weight: 400; }   /* een .rij.plat */
.opm.hl, .opm.aan { background: color-mix(in oklab, var(--goud) 15%, transparent); }
.opm.is-done, .opm.klaar { opacity: .6; }
.opm-inhoud { flex: 1; min-width: 0; }
.opm-tekst { font-size: var(--letter-tekst); line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.opm.is-done .opm-tekst, .opm-tekst.done-text { text-decoration: line-through; color: var(--muted); }
.opm.is-internal .opm-tekst, .opm.intern .opm-tekst { border-left: 2px solid color-mix(in oklab, var(--oranje) 60%, transparent); padding-left: 8px; }
.opm-tijd { font-size: var(--letter-hint); color: var(--muted); margin-top: 2px; }
.opm-tijd .ai-edited { font-style: italic; }
.opm-acties { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.opm-reacties { margin-top: 6px; padding-top: 2px; }
.opm-reactie { padding: 4px 0; font-size: var(--letter-klein); line-height: 1.45; color: var(--text); border-top: 1px solid var(--border); }
.opm-reactie:first-child { border-top: none; }
.opm-reactie .rn { font-weight: 700; color: var(--muted); margin-right: 4px; }
.opm-reactie.is-internal { border-left: 2px solid color-mix(in oklab, var(--oranje) 60%, transparent); padding-left: 6px; }
/* Gecentreerd in de zijkolom (305px breed, 32px van de rechterrand, 24px van de onderrand):
   16px binnen de kolom aan beide kanten en 16px boven de onderrand. */
.knop.breed.verzend { position: fixed; bottom: 24px; right: 32px; z-index: 90; width: 305px;   /* v5.0.1: precies onder de .kolom */ box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.verzend.sent, body:not(.light-mode) .verzend.sent { background: var(--groen); border-color: var(--groen); color: #fff; cursor: default; }
.verzend:disabled { opacity: .7; cursor: default; pointer-events: none; }


/* ── 16. INLOGGEN EN UPLOADEN — (stijlgids Inloggen & uploaden stap 1 t/m 6, v4.29) ──
   .inlog         het inlogvak, op de homepage én in het gebruikersbeheer (L1): 360px,
                  .inlog-foto (de foto met het neonlogo), .inlog-inhoud, .inlog-titel 22px
                  wit, .inlog-tekst (uitleg op de foto), .inlog-link; de glazen velden zijn
                  .veld.groot.glas en de knop .knop.goud.breed. Bij hover loopt er een
                  lichtrand over de rand die de muis volgt (G2, IPP.initLens).
   .inlog-melding foutmelding als donkere glazen pil met een rode rand (F1); .ok = groene
                  rand (bevestiging). Verborgen tot de JS 'm op display:block zet.
   .uploadvak     het uploadvak in Nieuw project, Nieuw middel en de Beheren-popup (U1):
                  1,5px gestippeld in de randkleur, 7px afronding, icoon, .uploadvak-tekst
                  13px vet, .uploadvak-sub 11px gedempt; hover en .dragover = gouden rand
                  met een goudtint. De bestandsnaam-uitleg staat eronder als .veldhint.
   .voortgang-blok de voortgang in het vak (P1, verborgen tot de JS 'm op block zet):
                  .voortgang = balk van 6px met het gouden verloop (de <span> erin is de
                  vulling), .voortgang-tekst = "2 van 5 · naam · 45%".
   Oude namen (.login-box .login-box-bg .login-box-form .login-box-title .login-forgot-*
   .err .upload-zone .upload-progress(-bar)) blijven alleen als JS-haakje.
   ──────────────────────────────────────────────────────────────────────── */
.inlog { position: relative; width: 360px; max-width: calc(100vw - 32px); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; text-align: center; --gx: 50%; --gy: 120%; transition: border-color var(--t-slow), box-shadow var(--t-slow); }
.inlog-foto { position: absolute; inset: 0; z-index: 0; background: var(--inlog-foto, url('bg_login_ipp.jpg?v=2')) center top no-repeat; background-size: 100% auto; }   /* v5.4.1: --inlog-foto per merk (merk_ipp.php) */
.inlog-inhoud { position: relative; z-index: 1; padding: 140px 40px 18px; }   /* 140px: de titel net onder het neonlogo in de foto */
.inlog-titel { font-family: 'Manrope', sans-serif; font-size: var(--letter-titel); font-weight: 800; letter-spacing: -.3px; color: #fff; margin: 0 0 24px; }
.inlog-titel:has(+ .inlog-tekst) { margin-bottom: 6px; }
.inlog-tekst { font-size: var(--letter-tekst); line-height: 1.5; color: rgba(255,255,255,.85); text-shadow: 0 1px 3px rgba(0,0,0,.6); margin: 0 0 14px; }
.inlog .veld { margin-bottom: 14px; }
.inlog-link { display: inline-block; margin-top: 12px; font-size: var(--letter-klein); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.inlog-melding { display: none; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 0 auto 14px; padding: 6px 14px; border-radius: 15px; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--rood); color: #fff; font-size: var(--letter-tekst); font-weight: 600; line-height: 1.4; }
.inlog-melding.ok { border-color: var(--groen); }
/* De lichtrand die de muis volgt (G2): alleen op de rand van het vak, niet over de foto. */
.inlog::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; z-index: 5; background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(255,255,255,0.55), transparent 45%); opacity: 0; transition: opacity var(--t-slow); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.inlog:hover::after { opacity: 1; }
/* v5.3.0: Inloggen met Microsoft boven het wachtwoordformulier (glazen brede knop
   met het Microsoft-logo in <i>), daaronder de scheidingsregel "of met je wachtwoord".
   Het blok #login-ms-blok blijft verborgen tot de server zegt dat Microsoft aanstaat. */
.inlog-ms { margin-bottom: 14px; }
.inlog-of { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: rgba(255,255,255,.8); font-size: var(--letter-klein); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.inlog-of::before, .inlog-of::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.35); }

.uploadvak { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px; border: 1.5px dashed var(--border); border-radius: var(--radius-card); background: color-mix(in oklab, var(--card) 30%, transparent); color: var(--muted); text-align: center; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.uploadvak:hover, .uploadvak.dragover { border-color: var(--goud); background: color-mix(in oklab, var(--goud) 8%, transparent); color: var(--text); }
.uploadvak input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.uploadvak-tekst { font-size: var(--letter-tekst); font-weight: 700; color: var(--text); }
.uploadvak-sub { font-size: var(--letter-hint); color: var(--muted); }
.voortgang-blok { display: none; width: 100%; margin-top: 10px; }
.voortgang { height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--text) 10%, transparent); overflow: hidden; }
.voortgang > span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--goud), var(--goud-2)); transition: width var(--t-slow); }
.voortgang-tekst { font-size: var(--letter-hint); color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voortgang-tekst:empty { display: none; }


/* ── 17. STATUSBALKEN, LINKREGEL EN CIJFERS — (stijlgids Statusbalken, knopjes & cijfers stap 1 t/m 7, v4.30) ──
   .balk          een statusbalk (S1): lichte tint (8%) en rand (35%) in de kleur van de status,
                  een eenkleurig icoontje in <i> in die kleur, .balk-tekst 12,5px in de gewone
                  tekstkleur en een knop rechts. Kleur: .oranje (concept), .groen (definitief).
                  .blok = gestapeld (vinkje, veld en hint onder elkaar).
   .linkregel     een veld met knoppen ernaast (D1); de link zelf is een alleen-lezen .veld
                  (gedempt), de knoppen hebben een eenkleurig icoontje in <i>.
   .vlak.stat     statistiek-kaartje (C1): .stat-ik (vierkantje van 32px in de rolkleur:
                  .goud .groen .blauw .grijs, dezelfde kleuren als .label), .stat-getal 28px
                  in de tekstkleur, .stat-naam 12px gedempt.
   Oude namen (.concept-bar(-text) .linkdef-bar .link-row .link-box .definitief-link-wrap
   .stat-card .stat-icon .stat-num .stat-label) blijven alleen als JS-haakje.
   ──────────────────────────────────────────────────────────────────────── */
.balk { display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 6px 6px 6px 12px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--letter-tekst); font-weight: 600; color: var(--text); }
.balk > i { display: inline-flex; flex: none; font-style: normal; }
.balk-tekst { flex: 1; min-width: 0; }
.balk.oranje { background: color-mix(in oklab, var(--oranje) 8%, transparent); border-color: color-mix(in oklab, var(--oranje) 35%, transparent); }
.balk.oranje > i { color: var(--oranje-tekst); }
.balk.groen { background: color-mix(in oklab, var(--groen) 8%, transparent); border-color: color-mix(in oklab, var(--groen) 35%, transparent); }
.balk.groen > i { color: var(--groen-tekst); }
.balk.blok { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; font-weight: 400; }
.balk.concept-bar { display: none; }   /* de JS zet 'm op flex zodra er concepten zijn */

.linkregel { display: flex; gap: 8px; align-items: center; }
.linkregel .veld { flex: 1; min-width: 0; width: auto; }
/* v5.0.3: geen veldmarge uit de popup (.popup-inhoud input.veld krijgt 16px eronder),
   anders staat het veld hoger dan de knoppen ernaast. */
.linkregel .veld, .popup-inhoud .linkregel input.veld:not(.mb-0) { margin-bottom: 0; }
.linkregel .veld[readonly] { color: var(--muted); text-overflow: ellipsis; }

.vlak.stat { display: flex; flex-direction: column; align-items: flex-start; padding: 18px 20px; }
.stat-ik { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 12px; box-sizing: border-box; border: 1px solid; border-radius: var(--radius); font-style: normal; }
.stat-ik.goud  { background: color-mix(in oklab, var(--goud) 15%, transparent); color: var(--goud-tekst); border-color: color-mix(in oklab, var(--goud) 35%, transparent); }
.stat-ik.groen { background: color-mix(in oklab, var(--groen) 15%, transparent); color: var(--groen-tekst); border-color: color-mix(in oklab, var(--groen) 35%, transparent); }
.stat-ik.blauw { background: color-mix(in oklab, var(--blauw) 15%, transparent); color: var(--blauw-tekst); border-color: color-mix(in oklab, var(--blauw) 35%, transparent); }
.stat-ik.grijs { background: color-mix(in oklab, var(--muted) 15%, transparent); color: var(--muted); border-color: color-mix(in oklab, var(--muted) 35%, transparent); }
.stat-getal { font-size: var(--letter-cijfer); font-weight: 800; line-height: 1.1; color: var(--text); }
.stat-naam { font-size: var(--letter-klein); color: var(--muted); margin-top: 4px; }


/* ── 11b. OVERIGE FORMULIER-ELEMENTEN ───────────────────────────── */
/* (v4.24: .section-title is een .kopje, sectie 11.) */
.mb     { margin-bottom: 20px; }
.m-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }


/* (Verplaatst naar invite_stijl.css: 7. velden (.veld).) */

/* ── Groep-label boven een versie-groep in de beheer-popups ─────────────
   Toont de (custom of automatische) tabnaam + optioneel ✎ voor admins
   om de tabnaam aan te passen. */
.grp-label {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 6px;   /* de letter komt van .kopje (sectie 11) */
}
.grp-label-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.grp-label-custom {
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}
/* (Het ✎-knopje achter de tabnaam is een .knop.icoon.klein; .grp-label-rename
   blijft alleen als haakje voor het script.) */

/* (Keuzelijsten en tekstvelden in popups zijn sinds v4.20 .veld, sectie 7.
   De openklappende lijst volgt het thema via color-scheme op select.veld;
   in dark zou de browser anders een witte lijst met grijze tekst tekenen.) */
select { color-scheme: dark; }

/* (v4.30: de link met de knoppen ernaast is een .linkregel met een alleen-lezen .veld, sectie 17.) */


/* ── 12. AFBEELDING THUMBNAIL GRID (in modal) ────────────────────── */
/* (v4.26: de thumbnails in de Beheren-popup zijn .tegels / .tegel, sectie 13; hier alleen de ruimte eronder.) */
.thumb-grid { margin-bottom: 12px; }

/* (v4.26: .img-thumb, .img-thumb-label, .del-img en .lock-img zijn .tegel, .tegel-naam en .tegel > .knop(.links), sectie 13.) */
/* v4.9.1: wachtwoord-vergeten op het inlogscherm. Sinds v4.19 een .tekstlink
   (blauw, streep bij hover); hier alleen de plaats en een schaduw, omdat de
   link óp de loginfoto staat. */
/* (v4.29: de links en de uitleg in het inlogvak zijn .inlog-link / .inlog-tekst, sectie 16.) */
#login-form-reset input + input { margin-top: 8px; }

/* (v4.30: de sleep-hint is weg; de tooltip op een afbeelding zegt dat je kunt slepen.) */


/* ── 13. UPLOAD ZONE ── */
/* (v4.29: het uploadvak is .uploadvak met .voortgang, sectie 16.) */


/* ── 14. ONDERDELEN LIJST IN MODAL ───────────────────────────────── */
/* (v4.24: de lijst is een .lijst, de rijen zijn .rij met .rij-greep / .rij-naam / .rij-meta / .rij-acties, sectie 11.) */
.ond-list, .ond-list-pp { margin-bottom: 14px; }
.ond-list-item, .ond-list-item-pp { cursor: grab; }


/* ── 15. NIEUW PROJECT MODAL ─────────────────────────────────────── */
/* v4.x: .new-proj-modal + .new-proj-box waren een aparte stijl voor het
   "Nieuw project"-popup; nu gebruikt die HTML de gedeelde .overlay + .modal
   structuur zodat 'ie automatisch de spring-animatie en glass-look van de
   andere modals erft. Hieronder blijven de .np-* utilities voor de thumb-
   strook en upload-status binnen die modal. */
.np-upload-wrap            { margin-top: 4px; margin-bottom: 16px; transition: opacity var(--t-med); }
/* (v4.26: de strook is .tegels.klein met .tegel.klein, sectie 13.) */
.np-thumbs                 { margin-top: 10px; }
.np-status { font-size: var(--letter-klein); color: var(--muted); margin-top: 6px; min-height: 18px; }

/* 'Afbeeldingen direct openbaar maken'-keuze in de nieuw-project modal.
   Verschijnt alleen zodra er bestanden in de wachtrij staan (zie npRenderThumbs). */
.np-public-toggle { display: flex; align-items: flex-start; margin-top: 12px; line-height: 1.35; }  /* een .vink die mag wrappen */
.np-public-toggle input { margin-top: 1px; }


/* (v4.16.4: 'Direct vrijgeven'-keuze in Nieuw middel is sinds v4.20 een .vink.) */


/* ── 16. (vervallen) EXTERNE DESIGNER UPLOAD MODAL ───────────────── */
/* v4.11.8: opgeruimd. De aparte upload-popup voor externe designers was
   dode code — vervangen door de gedeelde beheer-modal (middel_beheer_ipp.js).
   Sectienummers hieronder bewust niet hernummerd. */


/* ── 17. CONCEPT (oranje) ────────────────────────────────────────── */
/* (v4.30: de concept-balk is een .balk.oranje, sectie 17.) */
/* (concept-badge, concept-badge-sm en concept-pill zijn .label.oranje / .label.goud, sectie 10.) */
.concept-pill { margin-left: 4px; }

/* v5.1.5: INTERN DUIDELIJKER (stijlgids "Intern duidelijker" stap 1–6).
   Op het scherm heet concept nu "intern"; in de code en de data blijft het
   concept. Alles in oranje met hetzelfde slotje (lijntekening):
   .melding.intern      melding na het uploaden (M1): oranje rand + slotje
   .uploadvak-sub.intern regel "Nieuwe bestanden komen op intern" (U1)
   .tegel.intern        oranje rand, met .tegel-band bovenin (T2; geen sluier)
   .beeldbalk.intern    oranje balk bovenop het beeld, reviewpagina (B1)
   .tab > i.tab-slot    slotje vóór de tabnaam (V3)
   .versie.intern       oranje stipje op het versieblokje (V3) */
.melding.intern { border-color: var(--oranje); }
.melding.intern::before, .uploadvak-sub.intern > i, .tegel-band > i, .beeldbalk.intern > i, .tab > i.tab-slot {
  content: ""; display: inline-block; flex: none; width: 13px; height: 13px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7' width='9' height='6.5' rx='1.5'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 0 1 5 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7' width='9' height='6.5' rx='1.5'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 0 1 5 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.melding.intern::before { background: var(--oranje-tekst); margin-right: 8px; vertical-align: -2px; }
.uploadvak-sub.intern { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--oranje-tekst); font-weight: 700; }
.uploadvak-sub.intern > i { width: 11px; height: 11px; }
.tegel.intern, .tegel.intern:hover { border: 2px solid var(--oranje); }
.tegel-band { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 3px 6px; background: var(--oranje); color: #1a1407; font-size: var(--letter-mini); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.tegel-band > i { width: 11px; height: 11px; }
.tegel.klein .tegel-band { padding: 1px 4px; }
.beeldbalk.intern { background: color-mix(in oklab, var(--oranje) 88%, transparent); border-color: color-mix(in oklab, var(--oranje), #fff 30%); color: #1a1407; font-weight: 700; cursor: default; }
.beeldbalk.intern button { background: rgba(0,0,0,.18); font-weight: 700; padding: 0 9px; }
.beeldbalk.intern button:hover { background: rgba(0,0,0,.3); }
.beeldbalk.intern > i { width: 12px; height: 12px; }
.tab > i.tab-slot { width: 12px; height: 12px; margin: 0 6px 0 0; color: var(--oranje-tekst); }
.tab.actief > i.tab-slot { color: color-mix(in oklab, var(--oranje), #000 40%); }
.versie.intern { position: relative; }
#ob-release-all-voet[hidden] { display: none; }   /* v5.1.6: Alles vrijgeven in de voet van de Beheren-popup (.knop zet display, dus hidden apart) */
.versie.intern::after { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--oranje); box-shadow: 0 0 0 1.5px rgba(0,0,0,.25); }

/* Concept-overlay op img-thumb (in beheer modal) */
/* (v4.26: .concept-overlay is een .tegel-sluier, sectie 13.) */

/* Thumbnail-kiezer rechtsboven op de middelkaart (.knop.icoon.klein.glas):
   alleen de plaatsing, verschijnt bij hover. */
.thumb-pick-btn { position: absolute; top: 6px; right: 6px; z-index: 3; opacity: 0; }
.ond-card:hover .thumb-pick-btn { opacity: 1; }


/* ── 17a. THUMBNAIL PREVIEW (in beheer modal) ── */
/* (v4.26: de projectthumbnail en de thumbnail-kiezer zijn .tegel / .tegels, sectie 13.) */


/* (v4.25: de lege tekst in popups is .leeg, sectie 12.) */

/* ── PRULLENBAK ─────────────────────────────────────────────────── */
/* (v4.24: prullenbak- en slaaprijen zijn .rij met .rij-naam / .rij-meta / .rij-acties, sectie 11.) */
.trash-row { justify-content: space-between; gap: 12px; }
.trash-info { min-width: 0; }
.trash-info .rij-naam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v4.12.5: slapende-projecten-popup hergebruikt de prullenbak-rijen; op een
   smal scherm gaan de drie knoppen onder de naam staan i.p.v. ernaast. */
@media (max-width: 560px) {
  .slaap-row { flex-wrap: wrap; }
  .slaap-row .rij-acties { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
}


/* ── 18. TOAST ───────────────────────────────────────────────────── */
/* (v4.22: toasts zijn .melding, sectie 9.) */


/* ── 19. SPINNER ─────────────────────────────────────────────────── */
.spinner {
  width: 22px; height: 22px;
  border: 2px solid var(--border);
  border-top-color: var(--goud);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ── 20. LOGIN SCHERM ────────────────────────────────────────────── */
#login-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  /* Transparant i.p.v. var(--bg): zo schemert de aurora-achtergrond
     (radial-gradient-blobs op de body) ook op het inlogscherm door. */
  background: transparent;
}
/* (v4.29: het inlogvak is .inlog, sectie 16.) */


/* ── 21. CHANGELOG ───────────────────────────────────────────────── */
/* (v4.22: de changelog is een .popup in een .sluier.midden, sectie 9; hier alleen de tekst.) */
.changelog-overlay { z-index: 300; }
.changelog-box .popup-inhoud h3 { font-size: var(--letter-tekst); font-weight: 800; color: var(--text); margin: 16px 0 6px; }
.changelog-box .popup-inhoud h3:first-child { margin-top: 0; }
.changelog-box p,
.changelog-box li { font-size: var(--letter-klein); color: var(--muted); line-height: 1.7; }
.changelog-box ul { padding-left: 18px; margin: 4px 0; }


/* ── 22. BEVESTIGING ─────────────────────────────────────────────── */
/* (v4.22: een .popup.klein in een .sluier.midden, sectie 9; hier alleen de tekst en de laag.) */
.custom-confirm-overlay { z-index: 9999; }
.custom-confirm-msg { font-size: var(--letter-tekst); line-height: 1.6; }


/* ── 23. ERROR / LOADING SCHERM ──────────────────────────────────── */
/* (v4.25: laden en fout zijn .leeg.groot (+ .laden), sectie 12; hier alleen de hoogte van het laadscherm.) */
#loading { min-height: 60vh; justify-content: center; }


/* ── 24. UTILITIES ───────────────────────────────────────────────── */
.text-mini      { font-size: var(--letter-klein); color: var(--muted); }
.hint-zacht     { opacity: .7; } /* v4.16.4: extra gedempte hint; in lichte modus volle --muted */
.text-center    { text-align: center; }
.no-results     { display: none; }   /* een .leeg.groot (sectie 12); de JS zet 'm op block */
.icon-svg       { display: block; }

/* Flex */
.flex-row       { display: flex; align-items: center; }
.flex-1         { flex: 1; }
.flex-shrink-0  { flex-shrink: 0; }
.flex-gap-4     { gap: 4px; }
.flex-gap-8     { gap: 8px; }
.flex-align-start { align-items: flex-start; }

/* Margin */
.mt-3   { margin-top: 3px; }
.mt-4   { margin-top: 4px; }
.mt-6   { margin-top: 6px; }
.mt-48  { margin-top: 48px; }
.ml-auto{ margin-left: auto; }
.mb-0   { margin-bottom: 0; }
.mb-6   { margin-bottom: 6px; }
.mb-12  { margin-bottom: 12px; }
.mb-16  { margin-bottom: 16px; }
.mb-24  { margin-bottom: 24px; }
.m-icon { margin: 0 auto 8px; } /* gecentreerd icoon met onder-marge */

/* Padding */
.pad-2        { padding: 2px; }
.pad-14       { padding: 14px; }
.pad-y-4      { padding: 4px 0; }
.pad-y-8      { padding: 8px 0; }
.pad-7-14     { padding: 7px 14px; }

/* Border-radius helpers */
.rad-std      { border-radius: var(--radius); } /* was .rad-8, hernoemd toen 8px naar var(--radius) ging */

/* Sizing */
.w-130    { width: 130px; }
.w-150    { width: 150px; }
.w-560    { max-width: 560px; }
.h-36     { height: 36px; }

/* Font */
.fs-9   { font-size: var(--letter-mini); }
.fs-11  { font-size: var(--letter-hint); }
.fs-14  { font-size: var(--letter-nadruk); }
.fs-16 { font-size: var(--letter-nadruk); }   /* v4.31: de ladder kent geen 16 (behalve mobiele velden) */
.fs-18  { font-size: var(--letter-kop); }
.fs-20  { font-size: var(--letter-titel); }
.fw-7   { font-weight: 700; }
.fw-8   { font-weight: 800; }
.nowrap { white-space: nowrap; }

/* Cursor & opacity */
.cursor-pointer  { cursor: pointer; }
.opacity-60      { opacity: .6; }

/* Justify center voor flexbox containers */
.justify-center { justify-content: center; }


/* ── 25. BEHEER-PAGINA SPECIFIEK ─────────────────────────────────
   Verhuisd uit beheer_ipp.php zodat alle styling op één plek staat.
   Specifiek voor de gebruikersbeheer-pagina (gebruikersbeheer + stats).
   ───────────────────────────────────────────────────────────── */

#app-inner { padding: 40px 72px; }

/* (v4.24: de tabs zijn .tabs / .tab, sectie 11; hier alleen de ruimte eronder.) */
.beheer-tabs { margin-bottom: 32px; }

/* Sections (tabs content) — beheer-specifiek */
.beheer-section         { display: none; }
.beheer-section.active  { display: block; }

/* (v4.24: de gebruikerslijst is een .tabel, sectie 11.) */

/* (Rol-badge is een .label (goud / groen / blauw / grijs), sectie 10.) */

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 32px; }
/* (v4.30: het statistiek-kaartje is een .vlak.stat met .stat-ik / .stat-getal / .stat-naam, sectie 17.) */

.role-block { margin-bottom: 24px; }
/* (v4.24: de rolnaam is een .kopje; de rollen zijn .rij met .rij-naam / .rij-meta, sectie 11.) */
.role-tags  { display: flex; flex-wrap: wrap; gap: 8px; }

/* Wachtwoord-sterkte balk */
.pw-strength     { height: 3px; border-radius: 2px; margin-top: 6px; background: var(--border); transition: all var(--t-slow); }
.pw-strength-bar { height: 100%; border-radius: 2px; width: 0%; transition: width var(--t-slow); }

/* (De beheer-formulieren zijn sinds v4.20 .veldrij / .veldlabel / .veld / .veldhint, sectie 7.) */

/* (v4.22: de gebruikersbeheer-popup is een .popup in een .sluier.midden en de
   beheer-toast een .melding, sectie 9. De sluier staat hier dicht tot de JS
   'm met display:flex opent.) */
.beheer-overlay { display: none; }
.beheer-modal { max-width: 460px; }


/* Login-box surface variant voor beheer */
/* (v4.29: het gebruikersbeheer heeft hetzelfde inlogvak als de homepage, .inlog in sectie 16.) */


/* ═══════════════════════════════════════════════════════════════════
   v3.0 — LIQUID GLASS (was: 3D-TILT + LIQUID GLASS)
   - .ond-card / .project-card : glans + border-glow op hover
   - .btn-hdr                  : liquid-glass effect + border-glow
   Het 3D-kantel-effect is verwijderd: het maakte pagina's met veel
   kaarten onrustig. Hover geeft nu een subtiele scale (zie de
   :hover-regels bij de kaarten zelf); glans + border-glow bleven.
   ═══════════════════════════════════════════════════════════════════ */

/* (v4.21: de glans en de lichtrand op de kaarten bij hover zijn weg, zoals
   bij de knoppen; de hover van een kaart staat in sectie 8.) */


/* (De vroegere knop-lagen — btn-hdr-glans, v3.2 glass polish voor .btn-gold,
   .btn-ghost, .btn-red, .btn-sm, .btn-transfer, de sluitkruisjes en de
   donkere-modus-variant van .btn-hdr — zijn vervangen door de ene
   .knop-familie in sectie 6.) */


/* ═══════════════════════════════════════════════════════════════════
   v3.4 — MIDDEL-KAART THUMBNAIL: VASTE 4:3 + COVER
   Voorheen had .ond-thumb geen vaste hoogte, dus liggend beeld =
   korte kaart, staand beeld = lange kaart, en PDF-canvas werd
   uitgerekt. Nu krijgt elke thumbnail dezelfde 4:3 box waarin het
   beeld vullend wordt gecropt (object-fit: cover).
   ═══════════════════════════════════════════════════════════════════ */
/* (v4.11: aspect-ratio is samengevoegd met de .ond-thumb-hoofddefinitie
   in sectie 9.) */
.ond-thumb img,
.ond-thumb canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ═════════════════════════════════════════════════════════════════════
   ▼ v4-SECTIE — voorheen los bestand style_ipp_v4.css
   Samengevoegd in v4.1+ om assets simpel te houden (één CSS-bestand).
   Originele header van het v4-blok hieronder behouden voor context.
   ═════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   IPP v4.0 — AURORA + LIQUID GLASS REFINED
   Append-only blok. Plak onderaan style_ipp.css (na de v3.0 blok)
   of laad als losse stylesheet ná style_ipp.css.

   Wijzigt:
   - Aurora-achtergrond (radial blobs in :root)
   - Semi-transparante project- en middel-kaarten met backdrop blur
   - Cursor-volgende lens-highlight op kaarten
   - Nieuwe app-header lay-out (acties + zoek + filter rechts)
   - Nieuwe footer-stijl (logo klein, theme-toggle inline)
   - Project-pagina hero zonder bovenbalk (terug-knop boven titel)
   - Modal spring physics

   Houdt:
   - Manrope, goud-accent, ronde radii, light-mode toggle
   - Bestaande class-namen: .hdr / .filter-bar / .project-card /
     .ond-card / .btn-hdr / .page-footer / .logout-bar
   ═══════════════════════════════════════════════════════════════════ */

/* (Verplaatst naar invite_stijl.css: glas- en aurora-tokens, aurora-achtergrond.) */

/* v4.3: main-container zijpadding gelijktrekken met de header-zijmarge,
   zodat kaarten links/rechts uitlijnen met de zijkant van de bovenbalk.
   style_ipp.css had `padding: 32px 72px` — die 72px maakte de kaarten
   een stuk smaller dan de header. Met 16px valt alles op één lijn. */
.main { padding: 24px 32px 48px; }   /* v4.27.2: ruimer (was 20px 16px 32px); 32px opzij = de kop */

/* (v4.27: de kop is .kop, sectie 14 — geen glazen vlak meer, geen logo.) */


/* (De kopknop-varianten -gold/-blue/-green/-hov-* zijn opgegaan in .knop.) */

/* (v4.11: de zoekveld-glass-override samengevoegd met de hoofddefinitie
   in sectie 4 — zie "Zoekveld bovenaan homepage".) */

/* ── PROJECT- EN MIDDELKAARTEN ─────────────────────────────────────── */
/* (v4.21: alles van de kaart zelf — glas, rand, afronding, hover, het
   middenstuk op de volle glass-opacity — staat in sectie 8 (.kaart). De
   projectpagina houdt bewust masonry: de wisselende thumb-verhoudingen
   zijn daar onderdeel van het ontwerp.) */

/* (v4.29: de glans op de rand van het inlogvak staat bij .inlog, sectie 16.) */

/* (v4.27: de hero op de projectpagina is een .kop, sectie 14; de projectmanager en designers staan niet meer in de kop.) */

/* ── PERSOON-CHIPS (zonder avatars) ────────────────────────────────── */
/* v4.x: PM-chip is bewust niet meer goud — werd te dominant tussen de
   designer-chips. Beide chips delen nu dezelfde grijze styling, alleen
   font-weight verschilt om de PM lichtjes te accentueren. */
/* (v4.23: .pc-mgr en .pc-dsn zijn .chip.klein, sectie 10.) */

/* (.card-persons-wrap is verwijderd — de projectkaart toont geen
   manager-/designer-chips meer; de collage + titel namen die plek in.) */

/* (v4.25: de voet is .voet / .voet-knoppen / .voet-logo, sectie 12.) */

/* ── POPUPS ────────────────────────────────────────────────────────── */
/* (v4.22: de veer-animatie en de aparte glaslagen van kop en voet zijn weg;
   alles van de popup staat in sectie 9 (.popup).) */

/* (v4.11: de .upload-zone glass-look is samengevoegd met de
   hoofddefinitie in sectie 13 van de v3-laag.) */

/* ── PERFORMANCE FALLBACK ──────────────────────────────────────────── */
@supports not (backdrop-filter: blur(1px)) {
  .kaart, .vlak, .popup, .popup-kop, .melding {
    background: var(--surface);
  }
}
@media (prefers-reduced-motion: reduce) {
  .kaart { transition: none !important; transform: none !important; }
  .popup, .sluier, .melding { animation: none; transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   MOBIEL / SMAL SCHERM — eerste responsive pass
   Breekpunt 768px (iPad portrait + alle telefoons). Geen invloed op desktop.
   Pakt aan:
   - Header (.hdr / .pd-hero): titel + acties stapelen ipv naast elkaar
     overflowen — gefixt door flex-wrap en .hdr-left/.hdr-right op 100%.
   - Filter-bar in header wrapt intern; zoekveld krijgt eigen rij.
   - Project-pagina actie-knoppen (.pd-actions) wrappen ipv buiten beeld.
   - Beheer-tabs horizontaal scrollbaar.
   - Modals nooit breder dan het scherm.
   Cards en sub-blokjes stapelen al goed via de bestaande columns / auto-fit.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Defensieve bescherming — voorkomt dat één overlopend element de hele
     pagina horizontaal laat scrollen (gezien op de project-pagina header). */
  html, body { overflow-x: hidden; }

  /* --- KOP (alle pagina's) -------------------------------------------- */
  /* Niet plakken en niet inzakken; de knoppen onder de titel, het zoekveld
     rekt mee zodat het met de twee knoppen op één rij past. */
  .kop { position: static; flex-wrap: wrap; padding: 20px 8px 16px; gap: 10px; }
  .kop-titel { font-size: var(--letter-cijfer); }
  .kop-acties { flex-wrap: wrap; width: 100%; margin-bottom: 0; gap: 8px; }
  .kop-acties .zoekveld { flex: 1 1 0; width: auto; min-width: 80px; }



  /* (Knoppen: de mobiele maten staan bij .knop in sectie 6.) */

  /* --- MAIN-CONTAINER ---------------------------------------------- */
  .main { padding-left: 8px; padding-right: 8px; }


  /* --- BEHEERPAGINA ------------------------------------------------ */
  /* (De tabs scrollen zelf horizontaal, sectie 11.) */
  /* (Popups op mobiel: zie de media-regel in sectie 9.) */

  /* --- FOOTER ------------------------------------------------------ */
  .voet { padding: 16px 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v4.6 — PROJECT-STATUSLABELS OP DE KAART (Afgerond / Slapend)
   Klein pilletje naast de projectnaam zodat oude/afgeronde projecten
   opvallen en de portal niet ongemerkt volloopt. Logica in admin_ipp.php
   (projectStatus): 'afgerond' = alle middelen definitief, 'slapend' = >4
   weken geen klant-activiteit.
   ═══════════════════════════════════════════════════════════════════════ */
/* (v4.21: het statuslabel staat in .kaart-badges rechtsboven op de collage.) */
/* (.proj-status is een .label (groen / goud), sectie 10.) */
/* (Slapende kaart iets gedempt: .kaart.slapend, sectie 8.) */