/* ═══════════════════════════════════════════════════════════════════
   Invite Project Portal — Gedeelde stylesheet
   style_ipp.css  v4.1
   Wordt gebruikt door: admin_ipp.php, project_ipp.php,
                        review_ipp.php, beheer_ipp.php
   Aanvulling: style_ipp_v4.css (aurora + liquid glass, append-only).
   ═══════════════════════════════════════════════════════════════════ */


/* ── 1. RESET + ROOT VARIABELEN ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #111318;
  --surface:   #1c1f27;
  --card:      #22262f;
  --border:    #2e3340;
  --gold:      #fbbc43;
  --gold2:     #fdd06e;
  --text:      #e8e2d8;
  --muted:     #7a8090;
  --green:     #4caf7d;
  --red:       #e05c5c;
  --done:      #06aa70;
  --admin-red: #d6153f;
  --concept:   #e89300;
  --link:      #7bccec;
  --link-hov:  #a0d8f0;
  --radius:    10px;
}

/* ── 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;
  --link:      #3a8fb5;
  --link-hov:  #2a6e8f;
}
/* In lichte modus de native dropdown-lijst ook licht renderen
   (tegenhanger van de color-scheme:dark default op .m-select). */
body.light-mode .m-select,
body.light-mode select { color-scheme: light; }

/* 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. */
body.light-mode .project-card:hover,
body.light-mode .ond-card:hover           { border-color: var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
body.light-mode .card-header:hover        { background: rgba(0,0,0,.03); }
body.light-mode .ond-item:hover           { background: rgba(0,0,0,.03); }
body.light-mode .filter-menu-item:hover   { background: rgba(0,0,0,.04); }
body.light-mode .filter-menu              { box-shadow: 0 8px 24px rgba(0,0,0,.12); }
body.light-mode .modal-footer .btn-ghost,
body.light-mode .btn-ghost                { background: var(--surface); }
body.light-mode .page-footer              { color: var(--muted); }
body.light-mode .changelog-box h2,
body.light-mode .changelog-box h3,
body.light-mode .changelog-box p,
body.light-mode .changelog-box li,
body.light-mode .changelog-box .cl-close  { color: var(--muted); }
body.light-mode .img-thumb-label          { background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; }
body.light-mode .upload-log               { background: #1a1a1a; color: var(--text); }
/* Login-scherm donker houden — achtergrondfoto werkt beter met donkere box */
body.light-mode #login-screen             { background: var(--bg); }


/* ── THEME TOGGLE KNOP (in logout-bar) ────────────────────────── */
.btn-theme {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.btn-theme:hover { color: var(--text); border-color: var(--muted); }


body {
  font-family: 'Manrope', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  min-height: 100vh;
}

a       { color: var(--link); }
a:hover { color: var(--link-hov); }


/* ── 2. GEDEELDE HEADER ──────────────────────────────────────────── */
/* Eén structuur voor alle pagina's:
   <div class="hdr">
     <div class="hdr-inner">
       <div class="hdr-left">  ← titel + sub
       <div class="hdr-mid">   ← optioneel (back-knop, etc)
       <div class="hdr-right"> ← logo
     </div>
   </div>
   Variant .hdr.hdr-no-sticky → voor review_ipp.php (geen scroll)         */

.hdr {
  background: #fff;
  border-bottom: 1px solid #e0ddd8;
  height: 72px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.hdr.hdr-no-sticky { position: static; border-bottom: none; }

.hdr-inner {
  padding: 0 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
}
.hdr.hdr-no-sticky .hdr-inner { padding: 0 24px; }

.hdr-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.hdr-mid   { display: flex; align-items: center; gap: 12px; }
.hdr-right { display: flex; align-items: center; }

.hdr-title {
  font-size: 20px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -.3px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hdr-sub {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 3px;
}
.hdr-logo img { height: 26px; display: block; opacity: .85; }


/* ── 3. ADMIN-BAR (project_ipp.php — onder de header) ────────────── */
.admin-bar {
  display: none;
  padding: 16px 72px 0;
  align-items: center;
  gap: 8px;
}
.admin-bar.visible { display: flex; }


/* ── 4. MAIN ─────────────────────────────────────────────────────── */
.main { padding: 32px 72px; }


/* ── 5. FOOTER (gedeeld) ─────────────────────────────────────────── */
/* <div class="page-footer">© ... v2.6 — [changelog-link] created by ...</div>
   <div class="logout-bar">             ← alleen tonen voor ingelogden
     <button class="btn-logout">Uitloggen</button>
     <a class="btn-beheer">⚙ Gebruikersbeheer</a>  ← alleen superadmin
   </div>                                                                */

.page-footer {
  padding: 24px 0 10px;
  margin-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 11px;
  color: #555;
  line-height: 2;
}
.page-footer a,
.page-footer .footer-link {
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 11px;
  font-family: 'Manrope', sans-serif;
  padding: 0;
}
/* v4.x: variant zonder underline — gebruikt voor de "Invite Vastgoedcommunicatie"
   link naar invite.nl onderin elke footer. Goud op hover als subtiele klik-hint. */
.page-footer .footer-link-plain { text-decoration: none; }
.page-footer .footer-link-plain:hover { color: var(--gold); }

.logout-bar {
  display: none;                       /* JS zet 'flex' bij ingelogd */
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0 20px;
}
.btn-logout {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  transition: all .2s;
}
.btn-logout:hover { color: var(--text); border-color: #555; }

.btn-beheer {
  display: none;                       /* JS zet 'inline-block' voor superadmin */
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all .15s;
}
.btn-beheer:hover { color: var(--text); border-color: #555; }


/* ── 6. KNOPPEN ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .2s;
  text-decoration: none;
}
.btn-gold        { background: var(--gold); color: #111; }
.btn-gold:hover  { background: var(--gold2); }
.btn-ghost       { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-red         { background: transparent; color: var(--red); border: 1px solid var(--border); }
.btn-red:hover   { border-color: var(--red); background: rgba(224,92,92,.08); }

/* Volle-breedte centrale knop (login schermen) */
.btn-block { width: 100%; justify-content: center; padding: 10px 20px; font-size: 13px; }

/* Kleine kaartknopjes — donker, passend bij donkere kaarten */
.btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 11px;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  transition: all .2s;
  white-space: nowrap;
}
.btn-sm:hover { border-color: var(--gold); color: var(--gold); }
.btn-sm-red       { color: var(--red) !important; }
.btn-sm-red:hover,
.btn-red.btn-sm:hover { border-color: var(--red) !important; color: var(--red) !important; background: rgba(224,92,92,.08) !important; }

/* Lichte knoppen op witte header (admin-bar) */
.btn-hdr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f4f4f4;
  color: #333;
  border: 1px solid #e0e0e0;
  padding: 6px 12px;
  border-radius: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
  white-space: nowrap;
}
.btn-hdr:hover     { border-color: #aaa; color: #111; }
.btn-hdr-gold      { background: var(--gold); color: #111; border-color: var(--gold); font-weight: 700; }
.btn-hdr-gold:hover{ background: var(--gold2); border-color: var(--gold2); }
.btn-hdr-red       { color: var(--red); border-color: rgba(224,92,92,.3); }
.btn-hdr-red:hover { color: var(--red); border-color: var(--red); background: rgba(224,92,92,.08); }
/* Icoon-only header-knop (vierkant, geen tekst) — bv. de prullenbak. */
.btn-hdr-icon      { padding: 6px; gap: 0; aspect-ratio: 1; justify-content: center; }


/* ── 7. FILTER BAR (admin homepage) ──────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.filter-bar-actions { display: flex; align-items: center; gap: 10px; }

.filter-bar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Zoekveld bovenaan homepage */
.search-input {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  padding: 7px 12px;
  outline: none;
  width: 200px;
  transition: border-color .15s;
}
.search-input:focus { border-color: var(--gold); }

/* Filter knop + dropdown */
.filter-wrap { position: relative; }
.filter-trigger {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  min-width: 170px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.filter-menu-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 8px 8px;
}
.filter-menu-divider { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }
.filter-menu-item {
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 8px;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
}
.filter-menu-item:hover  { background: rgba(255,255,255,.05); }
.filter-menu-item.active { background: rgba(251,188,67,.15); color: var(--gold); }
.filter-menu-item.muted  { color: var(--muted); }

.filter-active-pill {
  font-size: 11px;
  color: var(--gold);
  font-weight: 700;
  cursor: pointer;
}

/* Section labels tussen project-grids */
.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}


/* ── 8. PROJECT GRID (admin homepage — masonry) ──────────────────── */
.project-grid {
  columns: 4 320px;
  column-gap: 18px;
}
.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  break-inside: avoid;
  margin-bottom: 18px;
}
.project-card:hover { border-color: #4a5068; box-shadow: 0 12px 40px rgba(0,0,0,.5); transform: translateY(-4px); }

.card-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.card-header:hover { background: rgba(255,255,255,.02); }
.card-header-info  { flex: 1; min-width: 0; }
.card-header h3    { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
/* .card-persons-wrap: basis-margin. v4.css overschrijft dit met flex+gap voor chips. */
.card-persons-wrap { margin-top: 3px; }
.card-empty        { padding: 12px 18px; font-size: 12px; color: var(--muted); }
.card-thumb {
  width: 80px; height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--card);
}
.card-thumb img,
.card-thumb canvas { width: 100%; height: 100%; object-fit: cover; display: block; }

.card-onderdelen { padding: 0; }
.ond-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.ond-item:last-child { border-bottom: none; }
.ond-item:hover      { background: rgba(255,255,255,.03); }
.ond-thumb-sm {
  width: 48px; height: 36px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--card);
  margin-top: 1px;
}
.ond-thumb-sm img,
.ond-thumb-sm canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.ond-info        { flex: 1; min-width: 0; }
.ond-info-row    { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ond-lock-icon   { font-size: 10px; color: var(--concept); flex-shrink: 0; }
.ond-name-sm     { flex: 1; font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ond-meta-sm     { font-size: 10px; color: var(--muted); margin-top: 1px; }
.ond-actions-sm  { display: flex; gap: 4px; flex-shrink: 0; }

.card-footer {
  padding: 11px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--border);
}
.card-footer-left { display: flex; gap: 7px; }
.card-meta-small  { font-size: 10px; color: var(--muted); text-align: right; line-height: 1.5; }


/* ── 9. MIDDELEN GRID (project_ipp.php — masonry) ────────────────── */
.ond-grid {
  columns: 4 360px;
  column-gap: 28px;
  margin-top: 24px;
}
.ond-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  break-inside: avoid;
  margin-bottom: 28px;
  cursor: default;
  position: relative;
}
.ond-card:hover            { border-color: #4a5068; box-shadow: 0 12px 40px rgba(0,0,0,.5); transform: translateY(-4px); }
.ond-card.dragging         { opacity: .4; border-color: var(--gold); }
.ond-card.drag-over        { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(251,188,67,.3); }
.ond-card-klant:hover      { border-color: var(--gold); box-shadow: 0 4px 20px rgba(0,0,0,.3); }

.ond-thumb        { width: 100%; overflow: hidden; background: var(--card); position: relative; cursor: grab; }
.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; }
.ond-thumb-clickable img,
.ond-thumb-clickable canvas { transition: transform .25s ease, filter .15s ease; }
.ond-thumb-clickable:hover img,
.ond-thumb-clickable:hover canvas { transform: scale(1.03); 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: 4px;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; opacity: 0;
  transition: opacity .15s; z-index: 2;
}
.ond-thumb:hover .drag-handle { opacity: 1; }

.ond-body     { padding: 12px 14px 8px; }
.ond-name     { font-size: 14px; font-weight: 700; margin-bottom: 3px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Naam + rechts uitgelijnde badge op één regel */
.ond-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.ond-name-row .ond-name      { margin-bottom: 0; flex: 1; min-width: 0; }
.ond-name-row .badge-definitief { margin-top: 0; flex-shrink: 0; }
/* Opmerkingen-blokje zit op de projectpagina-kaart in de name-row, op de
   plek van de Definitief-badge — daarom margin-top hier weg. */
.ond-name-row .ond-badge        { margin-top: 0; flex-shrink: 0; }
.ond-designer { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.ond-badge {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 20px;
  font-size: 10px; font-weight: 700;
  background: rgba(251,188,67,.15); color: var(--gold);
  margin-top: 4px;
}
.ond-card-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
}
.ond-created { font-size: 10px; color: var(--muted); margin-top: 4px; width: 100%; }


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

/* Groen randje op middelkaart (project_ipp.php) */
.ond-card.is-definitief        { border-color: var(--green); }
.ond-card.is-definitief:hover  { border-color: var(--green); box-shadow: 0 12px 40px rgba(76,175,125,.25); }

/* Groen randje op subvakje (admin_ipp.php homepage) */
.ond-item.is-definitief        { box-shadow: inset 3px 0 0 var(--green); }
/* v4.x: goud randje voor middelen waar klant-activiteit was sinds de
   laatste keer dat een PM/designer de review-pagina opende. Conditie wordt
   in JS (renderProjectCard) berekend: last_activity_at > staff_seen_at.
   Een middel dat zowel definitief én ongezien is krijgt de gouden rand
   (deze regel staat later in de cascade — definitief is sowieso zeldzaam
   in combinatie met nieuwe klant-activiteit). */
.ond-item.is-unseen-by-staff   { box-shadow: inset 3px 0 0 var(--gold); }

/* Badge "Definitief" */
.badge-definitief {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(76,175,125,.15);
  color: var(--green);
  border: 1px solid rgba(76,175,125,.35);
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px;
  margin-top: 4px;
}
.badge-definitief-sm {
  display: inline-flex; align-items: center;
  background: rgba(76,175,125,.15);
  color: var(--green);
  font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px;
  margin-left: 4px;
}
/* v4.x: gouden variant — toont op subblokjes (admin homepage) wanneer
   er opmerkingen op een middel staan. Zelfde maatvoering als de
   definitief-badge, alleen kleur en symbool verschillen. */
.badge-opmerkingen-sm {
  display: inline-flex; align-items: center;
  background: rgba(251,188,67,.15);
  color: var(--gold);
  font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px;
  margin-left: 4px;
}

/* Transfer-knop (groene variant van btn-sm) */
.btn-sm-green       { color: var(--green) !important; border-color: rgba(76,175,125,.35) !important; }
.btn-sm-green:hover { color: var(--green) !important; border-color: var(--green) !important; background: rgba(76,175,125,.08) !important; }

/* Definitief-vinkje + transfer veld in beheer-popup */
.definitief-bar {
  background: rgba(76,175,125,.06);
  border: 1px solid rgba(76,175,125,.25);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.definitief-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.definitief-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--green); }
.definitief-row label { font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; }
.definitief-link-wrap { display: flex; gap: 8px; align-items: center; }
.definitief-link-wrap input[type="text"] {
  flex: 1; margin-bottom: 0 !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-size: 12px !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
  font-family: monospace !important;
}
.definitief-link-wrap .btn-transfer {
  background: var(--green); color: #fff;
  border: none; border-radius: 6px;
  padding: 7px 14px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.definitief-link-wrap .btn-transfer:hover { background: #3d9466; }
.definitief-link-wrap .btn-transfer.disabled { opacity: .4; cursor: default; pointer-events: none; }

/* Klant-knop "Download bestanden" (groot, op klant-projectpagina) */
.btn-download-files {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: #fff;
  border: none; border-radius: 8px;
  padding: 10px 18px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.btn-download-files:hover { background: #3d9466; color: #fff; }


/* ── 10. MODALS ──────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--surface);
  z-index: 1;
}
.modal-header h3 { font-size: 17px; font-weight: 700; }
.modal-x         { background: none; border: none; color: var(--muted); font-size: 24px; cursor: pointer; line-height: 1; flex-shrink: 0; }
.modal-x:hover   { color: var(--text); }
.modal-body      { padding: 24px; }
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
}
.modal-footer .btn-gold,
.modal-footer .btn-ghost { border-radius: 8px; padding: 9px 20px; font-size: 13px; }

/* Bewerkbare titel in modal-header (input zonder rand) */
.modal-title-input {
  font-size: 16px; font-weight: 800;
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  padding: 0;
  color: var(--text);
  font-family: 'Manrope', sans-serif;
}


/* ── 11. FORMULIER ELEMENTEN ─────────────────────────────────────── */
.section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 12px;
  font-weight: 600;
}
.mb     { margin-bottom: 20px; }
.m-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }

.m-label {
  display: block;
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 6px;
}
.m-label-optional { font-weight: 400; opacity: .5; text-transform: none; }

/* ── 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;
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.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;
}
.grp-label-rename {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  border-radius: 4px;
  padding: 0;
  transition: all .15s;
  opacity: .6;
}
.grp-label-rename:hover {
  background: rgba(255,255,255,.08);
  color: var(--text);
  opacity: 1;
}

.m-select {
  width: 100%; box-sizing: border-box;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 13px; font-weight: 600;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer; outline: none;
}
.m-select:focus { border-color: var(--gold); }

/* Dropdown-lijst (de openklappende <option>'s) volgt het thema. Zonder dit
   rendert de browser de native lijst in het systeemkleurenschema — in dark
   mode geeft dat een witte lijst met grijze tekst. color-scheme vertelt de
   browser de native UI donker te tekenen; de expliciete option-kleuren zijn
   een vangnet voor browsers die color-scheme op <option> negeren.
   Default = dark; onder body.light-mode weer light (zie verderop). */
.m-select,
select { color-scheme: dark; }
.m-select option,
select option {
  background: var(--card);
  color: var(--text);
}

.m-input {
  width: 100%; box-sizing: border-box;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  padding: 0;
  outline: none;
}

/* Tekstvelden in modals (gestyled) */
.modal-body input[type="text"],
.modal-body input[type="password"],
.modal-body input[type="email"] {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  padding: 9px 12px;
  border-radius: 7px;
  outline: none;
  width: 100%; box-sizing: border-box;
  margin-bottom: 16px;
}
.modal-body input[type="text"]:focus,
.modal-body input[type="password"]:focus,
.modal-body input[type="email"]:focus { border-color: var(--gold); }
.modal-body input::placeholder { color: var(--muted); }

.link-row { display: flex; gap: 8px; align-items: center; }
.link-box {
  flex: 1;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: monospace;
}


/* ── 12. AFBEELDING THUMBNAIL GRID (in modal) ────────────────────── */
.thumb-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }

.img-thumb {
  position: relative;
  border-radius: 6px; overflow: hidden;
  width: 130px; height: 81px;
  background: var(--card);
  border: 1px solid var(--border);
  cursor: grab;
  transition: border-color .2s, opacity .2s, transform .15s;
  user-select: none; flex-shrink: 0;
}
.img-thumb:active     { cursor: grabbing; }
.img-thumb.dragging   { opacity: .4; transform: scale(.97); }
.img-thumb.drag-over  { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(251,188,67,.3); }
.img-thumb img        { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

.img-thumb-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  padding: 14px 6px 5px;
  font-size: 10px; color: #ddd; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.del-img {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,.65); color: var(--red);
  border: none; border-radius: 4px;
  width: 22px; height: 22px;
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s;
  /* Boven de .concept-overlay (z-index:2) — anders vangt die overlay de klik
     op en is de verwijder-knop op concept-afbeeldingen onbereikbaar. */
  z-index: 3;
}
.img-thumb:hover .del-img { opacity: 1; }
.drag-hint { font-size: 11px; color: var(--muted); margin-bottom: 12px; display: flex; align-items: center; gap: 5px; }


/* ── 13. UPLOAD ZONE ─────────────────────────────────────────────── */
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 22px;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.upload-zone:hover,
.upload-zone.dragover     { border-color: var(--gold); color: var(--text); }
.upload-zone input        { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-zone-text         { font-size: 13px; font-weight: 600; }
.upload-zone-sub          { font-size: 11px; margin-top: 4px; opacity: .6; }
.upload-progress {
  height: 3px; background: var(--border);
  border-radius: 2px; margin-top: 10px;
  overflow: hidden; display: none;
}
.upload-progress-bar { height: 100%; background: var(--gold); width: 0%; transition: width .3s; }
.upload-log {
  display: none;
  font-size: 12px; font-family: monospace;
  background: #1a1a1a;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  max-height: 120px;
  overflow-y: auto;
  margin-bottom: 12px;
  line-height: 1.8;
}


/* ── 14. ONDERDELEN LIJST IN MODAL ───────────────────────────────── */
.ond-list, .ond-list-pp { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ond-list-item, .ond-list-item-pp {
  display: flex; align-items: center; gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: grab;
  transition: border-color .15s;
}
.ond-list-item:hover, .ond-list-item-pp:hover           { border-color: var(--gold); }
.ond-list-item.drag-over, .ond-list-item-pp.drag-over   { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(251,188,67,.3); }
.ond-list-item.dragging, .ond-list-item-pp.dragging     { opacity: .4; }
.ond-list-drag, .ond-list-drag-pp                       { color: var(--muted); font-size: 14px; flex-shrink: 0; }
.ond-list-name, .ond-list-name-pp                       { flex: 1; font-size: 13px; font-weight: 700; color: var(--text); }
.ond-list-meta, .ond-list-meta-pp                       { font-size: 10px; color: var(--muted); }


/* ── 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 .2s; }
.np-thumbs                 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; min-height: 0; }
.np-thumb {
  position: relative; width: 64px; height: 48px;
  border-radius: 6px; overflow: hidden;
  background: var(--card); flex-shrink: 0;
}
.np-thumb img,
.np-thumb canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-thumb .np-del {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px;
  background: rgba(0,0,0,.7); color: #fff;
  border: none; border-radius: 50%;
  font-size: 10px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.np-status { font-size: 12px; 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; gap: 8px;
  margin-top: 12px; cursor: pointer;
  font-size: 13px; line-height: 1.35; color: var(--text);
}
.np-public-toggle input[type="checkbox"] {
  width: 16px; height: 16px; margin-top: 1px;
  cursor: pointer; accent-color: var(--green); flex-shrink: 0;
}


/* ── 16. EXTERNE DESIGNER UPLOAD MODAL (klein) ───────────────────── */
.ext-upload-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
}
.ext-upload-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  width: 480px; max-width: 95vw;
  font-family: 'Manrope', sans-serif;
  color: var(--text);
}
.ext-upload-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.ext-upload-eyebrow {
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 4px;
}
.ext-upload-title { font-size: 17px; font-weight: 800; }
.ext-upload-close {
  background: rgba(255,255,255,.07);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 32px; height: 32px;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
}
.ext-upload-foot { display: flex; justify-content: flex-end; }


/* ── 17. CONCEPT (oranje) ────────────────────────────────────────── */
.concept-bar {
  display: none;                          /* JS toggle */
  align-items: center; justify-content: space-between;
  background: rgba(232,147,0,.10);
  border: 1px solid rgba(232,147,0,.30);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.concept-bar-text {
  font-size: 12px; color: var(--concept); font-weight: 700;
}
.concept-release-btn {
  font-size: 11px; color: var(--concept);
  border-color: rgba(232,147,0,.4);
  padding: 4px 10px;
  border-radius: 6px;
}
.concept-badge-sm {
  font-size: 9px; color: var(--concept); font-weight: 700;
}
.concept-pill {
  font-size: 9px;
  background: rgba(251,188,67,.2);
  color: var(--gold);
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 4px;
}
.release-btn-sm {
  font-size: 9px;
  background: var(--concept);
  color: #111; border: none; border-radius: 4px;
  padding: 2px 7px;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
}

/* Concept-badge op middelkaart (groter) */
.concept-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(232,147,0,.15);
  color: var(--concept);
  border: 1px solid rgba(232,147,0,.3);
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px;
  margin-top: 4px;
}

/* Concept-overlay op img-thumb (in beheer modal) */
.concept-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px; z-index: 2;
}

/* Concept-toggle knop (review pagina sidebar) */
.concept-toggle-btn {
  width: 100%;
  padding: 7px 12px;
  background: rgba(232,147,0,.12);
  color: var(--concept);
  border: 1px solid rgba(232,147,0,.35);
  border-radius: 7px;
  font-family: 'Manrope', sans-serif;
  font-size: 11px; font-weight: 700;
  cursor: pointer; transition: all .2s;
  text-align: center; display: block;
}

/* Slotje rechtsboven middelkaart-thumbnail */
.thumb-pick-btn {
  position: absolute; top: 6px; right: 6px;
  z-index: 3;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  opacity: 0;
  transition: opacity .15s;
}
.ond-card:hover .thumb-pick-btn { opacity: 1; }


/* ── 17a. THUMBNAIL PREVIEW (in beheer modal) ────────────────────── */
.pb-thumb-wrap {
  position: relative;
  width: 140px; height: 90px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
}
.pb-thumb-img,
.pb-thumb-canvas { width: 100%; height: 100%; object-fit: cover; }
.pb-thumb-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--muted);
}
.pb-thumb-edit {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 4px;
  background: rgba(0,0,0,.6);
  border: none; color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; padding: 0;
}

/* Tile in thumbnail-picker grid */
.thumb-picker-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.thumb-picker-tile {
  width: 130px; height: 81px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s;
  background: var(--surface);
  flex-shrink: 0;
}
.thumb-picker-tile:hover           { border-color: var(--gold); }
.thumb-picker-tile img,
.thumb-picker-tile canvas          { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ── 17b. EMPTY-STATE TEKST IN MODALS ────────────────────────────── */
.empty-text {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}

/* ── PRULLENBAK ─────────────────────────────────────────────────── */
.trash-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
}
.trash-info { min-width: 0; }
.trash-name { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trash-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.trash-actions { display: flex; gap: 8px; flex-shrink: 0; }


/* ── 18. TOAST ───────────────────────────────────────────────────── */
.toast, .toast-pp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 13px;
  color: var(--text);
  z-index: 999;
  opacity: 0;
  transform: translateY(8px);
  transition: all .25s;
  pointer-events: none;
}
.toast.show, .toast-pp.show { opacity: 1; transform: translateY(0); }
.toast.success, .toast-pp.success { border-color: var(--green); }
.toast.error                      { border-color: var(--red); }


/* ── 19. SPINNER ─────────────────────────────────────────────────── */
.spinner {
  width: 22px; height: 22px;
  border: 2px solid var(--border);
  border-top-color: var(--gold);
  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;
  background: var(--bg);
}
.login-box {
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 360px;
  text-align: center;
  overflow: hidden;
  position: relative;
}
.login-box-bg {
  position: absolute; inset: 0;
  background: url('bg_login_ipp.jpg') center/cover no-repeat;
  z-index: 0;
}
.login-box-form {
  position: relative;
  z-index: 1;
  padding: 140px 40px 36px;
}
.login-box-title {
  font-family: 'Manrope', sans-serif;
  font-size: 22px; font-weight: 800;
  color: #fff;
  margin-bottom: 24px; margin-top: 40px;
  letter-spacing: -.3px;
}
.login-box input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(17,19,24,.75);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  margin-bottom: 14px;
  outline: none;
  transition: border-color .2s;
}
.login-box input::placeholder { color: rgba(255,255,255,.5); }
.login-box input:focus        { border-color: var(--gold); }
.login-box .err               { color: #ffaaaa; font-size: 13px; margin-bottom: 10px; display: none; }


/* ── 21. CHANGELOG ───────────────────────────────────────────────── */
.changelog-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 300;
}
.changelog-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  width: 520px;
  max-width: 92vw;
  max-height: 80vh;
  overflow-y: auto;
  font-family: 'Manrope', sans-serif;
}
.changelog-box h2 { margin: 0 0 20px; font-size: 18px; color: #aaa; }
.changelog-box h3 { font-size: 13px; font-weight: 800; color: #aaa; margin: 16px 0 6px; }
.changelog-box p,
.changelog-box li { font-size: 12px; color: #aaa; line-height: 1.7; }
.changelog-box ul { padding-left: 18px; margin: 4px 0; }
.changelog-box .cl-close {
  float: right;
  background: none; border: none;
  font-size: 20px; cursor: pointer;
  color: #aaa;
  margin: -4px -4px 0 0;
}


/* ── 22. CUSTOM CONFIRM POPUP ────────────────────────────────────── */
.custom-confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.custom-confirm-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 28px;
  width: 320px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
.custom-confirm-msg  { font-size: 13px; color: var(--text); margin-bottom: 18px; line-height: 1.6; }
.custom-confirm-btns { display: flex; gap: 8px; justify-content: flex-end; }


/* ── 23. ERROR / LOADING SCHERM ──────────────────────────────────── */
#loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 60vh;
  flex-direction: column;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}
.error-state {
  text-align: center;
  padding: 60px;
  color: var(--muted);
}
.error-state h2 { font-size: 18px; color: var(--text); margin-bottom: 8px; }
.error-state p  { font-size: 13px; }


/* ── 24. UTILITIES ───────────────────────────────────────────────── */
.text-mini      { font-size: 12px; color: var(--muted); }
.text-muted     { color: var(--muted); }
.text-green     { color: var(--green); }
.text-red       { color: var(--red); }
.text-center    { text-align: center; }
.no-results     { display: none; padding: 60px; text-align: center; color: var(--muted); }
.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-8   { margin-top: 8px; }
.mt-48  { margin-top: 48px; }
.ml-6   { margin-left: 6px; }
.ml-8   { margin-left: 8px; }
.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-8        { border-radius: 8px; }

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

/* Font */
.fs-9   { font-size: 9px; }
.fs-11  { font-size: 11px; }
.fs-14  { font-size: 14px; }
.fs-16  { font-size: 16px; }
.fs-18  { font-size: 18px; }
.fs-20  { font-size: 20px; }
.fw-7   { font-weight: 700; }
.fw-8   { font-weight: 800; }
.nowrap { white-space: nowrap; }

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

/* Section-label dat over volle breedte loopt (gebruikt in CSS columns layouts) */
.section-h-label { margin: 10px 0 6px; width: 100%; }

/* Thumbnail/canvas binnen img-thumb container */
.thumb-fit-contain { width: 100%; height: 100%; object-fit: contain; display: block; }

/* 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; }

/* Tabs (beheer-pagina eigen class om te voorkomen dat generieke .tabs
   uit review_ipp.php overschreven wordt) */
.beheer-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.beheer-tab-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all .15s;
}
.beheer-tab-btn.active             { color: var(--gold); border-bottom-color: var(--gold); }
.beheer-tab-btn:hover:not(.active) { color: var(--text); }

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

/* Tabel */
.user-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.user-table th {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.user-table td               { padding: 10px 12px; border-bottom: 1px solid rgba(46,51,64,.5); font-size: 13px; }
.user-table tr:last-child td { border-bottom: none; }
.user-table tr:hover td      { background: rgba(255,255,255,.02); }
.user-table .name-cell       { font-weight: 700; }
.user-table .muted-cell      { color: var(--muted); }
.user-table .pw-cell         { color: var(--muted); font-size: 12px; }
.user-table .actions-cell    { text-align: right; display: flex; gap: 6px; justify-content: flex-end; }
.empty-row                   { text-align: center; color: var(--muted); padding: 32px; }

/* Rol-badge */
.role-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .04em;
}
.role-superadmin { background: rgba(251,188,67,.20); color: var(--gold); }
.role-manager    { background: rgba(76,175,125,.15); color: var(--green); }
.role-designer   { background: rgba(123,204,236,.15); color: #7bccec; }
.role-external   { background: rgba(122,128,144,.15); color: var(--muted); }

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 32px; }
.stat-card  { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.stat-icon  { font-size: 24px; margin-bottom: 8px; }
.stat-num   { font-size: 28px; font-weight: 800; color: var(--gold); }
.stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; }

.role-block { margin-bottom: 24px; }
.role-block h3 {
  font-size: 13px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 12px;
}
.role-tags  { display: flex; flex-wrap: wrap; gap: 8px; }
.role-tag   { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700; }
.role-tag-email { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 8px; }

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

/* Form-row (specifiek voor beheer) */
.form-row              { margin-bottom: 16px; }
.form-row label        { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.form-row input,
.form-row select       { width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: 'Manrope', sans-serif; font-size: 13px; padding: 9px 12px; outline: none; }
.form-row input:focus,
.form-row select:focus { border-color: var(--gold); }
.form-row .hint        { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* Modal kleine versie (alleen voor beheer-pagina) */
.beheer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 100;
  display: none;
  align-items: center; justify-content: center;
}
.beheer-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  width: 460px; max-width: 95vw;
}
.beheer-modal h3 { font-size: 16px; font-weight: 800; margin-bottom: 20px; }
.modal-btns      { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* Beheer-toast: andere selector dan #toast/.toast in shared (gebruikt id ipv class) */
#toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 14px; font-weight: 600;
  opacity: 0; transform: translateY(8px);
  transition: all .2s;
  z-index: 999;
}
#toast.show { opacity: 1; transform: translateY(0); }
#toast.ok   { border-color: var(--green); color: var(--green); }
#toast.err  { border-color: var(--red);   color: var(--red); }

/* Page-footer variant op login-scherm: lichter, geen border */
.page-footer.login { border-top: none; color: #aaa; }

/* Login-box surface variant voor beheer */
.login-box.beheer-login { background: var(--surface); padding: 40px; }
.beheer-login-sub { color: var(--muted); font-size: 13px; margin-bottom: 24px; }


/* ═══════════════════════════════════════════════════════════════════
   v3.0 — 3D-TILT + LIQUID GLASS
   - .ond-card / .project-card : 3D-tilt + meebewegende glans + border-glow
   - .btn-hdr                  : liquid-glass effect + border-glow
   Activeert wanneer JS de class .is-tilting / .is-glowing toevoegt.
   ═══════════════════════════════════════════════════════════════════ */

/* Bestaande hover-transforms uitzetten — die conflicteren met de tilt
   transform tijdens de eerste mousemove-frame. Schaduw + border blijven. */
.ond-card:hover,
.project-card:hover { transform: none; }

/* ─── Kaarten: tilt + glans + border-glow ───────────────────────── */
.ond-card,
.project-card {
  transition: transform .85s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
  will-change: transform;
  position: relative;
  overflow: hidden;
}
.ond-card.is-tilting,
.project-card.is-tilting {
  /* Korte transition zodat de EERSTE tilt soepel inzet — daaropvolgende
     mousemoves zijn klein genoeg om alsnog snappy te voelen. */
  transition: transform .12s ease-out, box-shadow .3s;
  z-index: 10;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
}

/* Border-glow via ::before + mask-truc.
   ::before zit binnen de kaart (inset:0), dus geen conflict met overflow:hidden.
   De mask snijdt alles weg behalve een 1.5px ringvorm langs de rand. */
.ond-card::before,
.project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(
    circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.4) 22%,
    transparent 55%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
  z-index: 6;
}
.ond-card.is-tilting::before,
.project-card.is-tilting::before { opacity: 1; }

/* Glans-overlay — radial gradient die met de muis meebeweegt via --gx/--gy. */
.ond-card::after,
.project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255,255,255,.45) 0%,
    rgba(255,255,255,.15) 28%,
    transparent 62%
  );
  opacity: 0;
  transition: opacity .3s;
  z-index: 5;
  mix-blend-mode: overlay;
}
.ond-card.is-tilting::after,
.project-card.is-tilting::after { opacity: 1; }

/* In lichte modus is overlay-blend te zacht — screen werkt beter. */
body.light-mode .ond-card::after,
body.light-mode .project-card::after { mix-blend-mode: screen; }


/* ─── Admin-bar / filter-bar knoppen: liquid glass + border-glow ── */
.btn-hdr {
  position: relative;
  overflow: hidden;
  background-color: rgba(255,255,255,.75);
  color: #1a1407;
  /* Liquid glass: blur de achtergrond + verzadig kleuren door 't glas heen */
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  /* Inner highlight (top) + lichte schaduw (bottom) voor diepte */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 2px 6px rgba(0,0,0,.25);
  transition: background-color .25s, transform .15s, box-shadow .25s;
}
.btn-hdr.btn-hdr-gold {
  background-color: rgba(251,188,67,.78);
  color: #1a1407;
}
.btn-hdr.btn-hdr-red {
  background-color: rgba(214,21,63,.78);
  color: #fff;
}
.btn-hdr:hover { transform: translateY(-1px); }

.btn-hdr::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.4) 30%,
    transparent 60%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.btn-hdr.is-glowing::before { opacity: 1; }

.btn-hdr::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255,255,255,.4) 0%,
    rgba(255,255,255,.12) 30%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity .3s;
  mix-blend-mode: overlay;
}
.btn-hdr.is-glowing::after { opacity: 1; }
body.light-mode .btn-hdr::after { mix-blend-mode: screen; }


/* ═══════════════════════════════════════════════════════════════════
   v3.2 — POPUP- & KAARTKNOPPEN GLASS POLISH
   Geeft alle "klassieke" knoppen (.btn-gold, .btn-ghost, .btn-red,
   .btn-sm en varianten, .btn-transfer, .btn-download-files) dezelfde
   liquid-glass uitstraling als .btn-hdr en de review-pagina knoppen.
   Volledig additief — overschrijft de definities hierboven en kan in
   z'n geheel verwijderd worden om naar v3.0 terug te gaan.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. PRIMAIRE GOUDEN KNOP — .btn-gold ────────────────────────── */
.btn-gold {
  background: linear-gradient(180deg, var(--gold2) 0%, var(--gold) 100%);
  color: #1a1407;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 3px 10px rgba(251,188,67,.30);
  transition: filter .15s, transform .15s, box-shadow .2s;
}
.btn-gold:hover {
  background: linear-gradient(180deg, var(--gold2) 0%, var(--gold) 100%);
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 5px 14px rgba(251,188,67,.40);
}
.btn-gold:disabled,
.btn-gold.is-disabled { filter: none; transform: none; opacity: .55; cursor: default; }

/* ── 2. GHOST-KNOP — .btn-ghost ─────────────────────────────────── */
/* Donkere modus: glas-look op donkere modal-achtergrond */
.btn-ghost {
  background: rgba(255,255,255,.04);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 2px 6px rgba(0,0,0,.22);
  transition: background .18s, transform .15s, box-shadow .2s, color .18s, border-color .18s;
}
.btn-ghost:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  color: var(--gold);
  transform: translateY(-1px);
}
/* Lichte modus — andere glasfysica: donkere highlights, lichtere bg */
body.light-mode .btn-ghost,
body.light-mode .modal-footer .btn-ghost {
  background: rgba(255,255,255,.65);
  color: var(--text);
  border-color: rgba(0,0,0,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 2px 6px rgba(0,0,0,.08);
}
body.light-mode .btn-ghost:hover {
  background: rgba(255,255,255,.85);
  border-color: var(--gold);
  color: var(--gold);
}

/* ── 3. ROOD/GEVAAR — .btn-red ──────────────────────────────────── */
.btn-red {
  background: rgba(224,92,92,.06);
  color: var(--red);
  border: 1px solid rgba(224,92,92,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 2px 6px rgba(0,0,0,.18);
  transition: background .18s, transform .15s, box-shadow .2s, border-color .18s;
}
.btn-red:hover {
  background: rgba(224,92,92,.16);
  border-color: var(--red);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 4px 12px rgba(224,92,92,.28);
}

/* ── 4. KLEINE KAART-KNOPJES — .btn-sm en varianten ─────────────── */
.btn-sm {
  background: rgba(255,255,255,.04);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 3px rgba(0,0,0,.18);
  transition: background .15s, transform .15s, box-shadow .18s, color .15s, border-color .15s;
}
.btn-sm:hover {
  background: rgba(255,255,255,.10);
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
}
body.light-mode .btn-sm {
  background: rgba(255,255,255,.65);
  color: var(--text);
  border-color: rgba(0,0,0,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    0 1px 3px rgba(0,0,0,.08);
}
body.light-mode .btn-sm:hover {
  background: rgba(255,255,255,.85);
  border-color: var(--gold);
  color: var(--gold);
}

/* btn-sm rood — klein, gevaar-rood */
.btn-sm-red,
.btn-red.btn-sm {
  background: rgba(224,92,92,.06) !important;
  color: var(--red) !important;
  border-color: rgba(224,92,92,.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 1px 3px rgba(0,0,0,.18) !important;
}
.btn-sm-red:hover,
.btn-red.btn-sm:hover {
  background: rgba(224,92,92,.16) !important;
  border-color: var(--red) !important;
  color: var(--red) !important;
  transform: translateY(-1px);
}

/* btn-sm groen — voor Transfer-knop op kaart */
.btn-sm-green {
  background: rgba(76,175,125,.10) !important;
  color: var(--green) !important;
  border-color: rgba(76,175,125,.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 3px rgba(0,0,0,.18) !important;
}
.btn-sm-green:hover {
  background: rgba(76,175,125,.22) !important;
  border-color: var(--green) !important;
  color: var(--green) !important;
  transform: translateY(-1px);
}

/* ── 5. TRANSFER + DOWNLOAD-FILES knoppen — groen glass ─────────── */
.definitief-link-wrap .btn-transfer {
  background: linear-gradient(180deg, #5fc191 0%, #4caf7d 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 3px 10px rgba(76,175,125,.30);
  transition: filter .15s, transform .15s, box-shadow .2s;
}
.definitief-link-wrap .btn-transfer:hover {
  background: linear-gradient(180deg, #5fc191 0%, #4caf7d 100%);
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.btn-download-files {
  background: linear-gradient(180deg, #5fc191 0%, #4caf7d 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 4px 14px rgba(76,175,125,.32);
  transition: filter .15s, transform .15s, box-shadow .2s;
}
.btn-download-files:hover {
  background: linear-gradient(180deg, #5fc191 0%, #4caf7d 100%);
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* ── 6. SLUIT-KNOPPEN — .modal-x en .cl-close ───────────────────── */
.modal-x,
.changelog-box .cl-close {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .15s;
}
.modal-x:hover,
.changelog-box .cl-close:hover {
  background: rgba(255,255,255,.08);
  color: var(--text);
  transform: scale(1.06);
}
body.light-mode .modal-x:hover,
body.light-mode .changelog-box .cl-close:hover {
  background: rgba(0,0,0,.06);
  color: var(--text);
}
/* cl-close staat met `float:right` — overschrijven om centraal te kunnen
   uitlijnen via flex/transform zonder dat hij uit de header springt */
.changelog-box .cl-close {
  float: right;
  margin: -4px -4px 0 0;
}

/* ── 7. .btn-hdr — donkere-modus variant ────────────────────────── */
/* In v3.0 was .btn-hdr alleen voor de witte admin-bar getuned. In donkere
   modus is een wit-glas knop op een donkere balk te schreeuwerig. Hier
   wordt dat omgedraaid: donker-glas met lichte highlight. */
body:not(.light-mode) .btn-hdr {
  background-color: rgba(255,255,255,.06);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 2px 6px rgba(0,0,0,.30);
}
body:not(.light-mode) .btn-hdr:hover {
  background-color: rgba(255,255,255,.12);
}
body:not(.light-mode) .btn-hdr.btn-hdr-gold {
  background-color: rgba(251,188,67,.85);
  color: #1a1407;
}
body:not(.light-mode) .btn-hdr.btn-hdr-red {
  background-color: rgba(214,21,63,.85);
  color: #fff;
}

/* ── 8. CUSTOM-CONFIRM-BOX — past bij modal-stijl ───────────────── */
/* De popup die verschijnt bij verwijder-bevestigingen. Krijgt subtiele
   diepte zodat hij minder "doos-achtig" oogt. */
.custom-confirm-box {
  background: linear-gradient(180deg, var(--surface) 0%, var(--card) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 16px 48px rgba(0,0,0,.55);
}
body.light-mode .custom-confirm-box {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 16px 48px rgba(0,0,0,.18);
}


/* ═══════════════════════════════════════════════════════════════════
   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).
   ═══════════════════════════════════════════════════════════════════ */
.ond-thumb {
  aspect-ratio: 4 / 3;
}
.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
   ═══════════════════════════════════════════════════════════════════ */

: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: rgba(76, 175, 125, 0.20);   /* groen — linksboven (was goud, gewisseld met aurora-3) */
  --aurora-2: rgba(123, 204, 236, 0.22);  /* zacht blauw (was 0.13) */
  --aurora-3: rgba(251, 188, 67, 0.30);   /* goud — onderaan midden (was groen, gewisseld met aurora-1) */
  --radius-card: 14px;
  --link: #84cfed;        /* v4.7: blauw accent, gedeeld over review + projectpagina */
  --link-hov: #6bbfe0;
}

body.light-mode {
  --glass-opacity: 0.50;
  --aurora-1: rgba(76, 175, 125, 0.22);   /* groen — linksboven */
  --aurora-2: rgba(58, 143, 181, 0.22);    /* (was 0.14) */
  --aurora-3: rgba(251, 188, 67, 0.34);   /* 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;
}

/* 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: 32px 16px; }

/* ── HEADER (admin homepage + project-pagina behalve admin-bar) ────── */
.hdr {
  position: sticky; top: 12px; z-index: 30;
  margin: 12px 16px 0;
  border-radius: var(--radius-card);
  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);
}
/* v4.7: hdr-inner padding gelijk getrokken met pd-hero (16px verticaal,
   24px horizontaal) zodat homepage header dezelfde hoogte krijgt als
   de projectpagina hero.
   v4.8: óók `height: 72px` (hardcoded in style_ipp.css v3) overschrijven —
   anders blijft de header 72px hoog en past nieuwe titel + sub niet. Met
   min-height 100 + align-items: flex-end matched 't precies de pd-hero.
   v4.9: óók `.hdr { height: 72px }` overschrijven (was alleen .hdr-inner)
   en het review-page `.hdr.hdr-no-sticky` uitsluiten zodat die compact blijft. */
.hdr:not(.hdr-no-sticky)            { height: auto; min-height: 110px; }
.hdr:not(.hdr-no-sticky) .hdr-inner { padding: 16px 24px; height: auto; min-height: 110px; align-items: flex-end; }
.pd-hero                            { min-height: 110px; }
/* v4.x: review-pagina krijgt z'n border-bottom terug. In style_ipp.css regel 121
   wordt `border-bottom: none` op `.hdr.hdr-no-sticky` gezet (relict uit v3 toen
   de hdr alleen een onderlijn had ipv border rondom). In v4 is de hdr een glass
   card met border rondom — hier zetten we de bottom-line dus expliciet terug. */
.hdr.hdr-no-sticky { border-bottom: 1px solid var(--border); }
/* v4.7: hdr-title nu zelfde grootte/styling als .pd-title, en hdr-sub iets
   groter (12 → 16) zonder margin-top (komt nu via hdr-title margin-bottom
   van 12px, matched met pd-title). */
.hdr-title { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--text); margin-bottom: 12px; }
.hdr-sub   { font-size: 16px; color: var(--muted); margin-top: 0; }
.hdr-logo img { height: 16px; opacity: 0.9; }
body.light-mode .hdr-logo img { filter: none; }
body:not(.light-mode) .hdr-logo img { filter: invert(1) brightness(1.05); }

/* ── FILTER BAR — wordt header-actie rechts ────────────────────────── */
.filter-bar {
  margin: 0 16px;
  padding: 12px 4px 18px;
  background: transparent;
  border: 0;
}
.filter-bar-label { display: none; } /* "Mijn projecten (#)" weg */
.filter-bar-actions { gap: 6px; }

/* Buttons in header krijgen subtiele glass-laag */
.btn-hdr {
  position: relative; overflow: hidden;
  background: color-mix(in oklab, var(--card) 70%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-hdr::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 120%), rgba(255,255,255,0.20), transparent 50%);
  opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.btn-hdr:hover::after { opacity: 1; }
.btn-hdr-gold { background: linear-gradient(135deg, var(--gold), var(--gold2)); }
/* v4.7: blauwe variant — zelfde glass-look als .btn-hdr maar in rv-link
   blauw. Gebruikt voor Terug-knoppen op review + projectpagina. */
.btn-hdr-blue { background: rgba(132, 207, 237, .12); border-color: var(--link); color: var(--link); }
.btn-hdr-blue:hover { background: var(--link); color: #fff; border-color: var(--link); }

.search-input {
  background: color-mix(in oklab, var(--card) 65%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--border);
}

/* ── PROJECT KAARTEN (admin homepage) ──────────────────────────────── */
.project-card {
  position: relative;
  /* v4.x perf-fix: backdrop-filter weggehaald — was de hoofdoorzaak van lag
     bij veel projectkaarten (per kaart een blurpass over de aurora). Vervangen
     door bijna-dekkende variant van surface: aurora schijnt nog subtiel door
     aan de randen, maar de GPU-blur per frame is weg. Header, modals en
     tooltips houden hun echte glass-look (klein in aantal). */
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  border-radius: var(--radius-card);
  --gx: 50%; --gy: 120%;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.85s cubic-bezier(.2,.7,.2,1);
}
.project-card.is-tilting { transition: transform 0.12s ease-out; }
.project-card::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(255,255,255,0.08), transparent 45%);
  opacity: 0; transition: opacity 0.25s;
  z-index: 2;
}
.project-card:hover::after { opacity: 1; }
.project-card > * { position: relative; z-index: 1; }

/* ── MIDDEL KAARTEN (project-pagina) ───────────────────────────────── */
/* v4.x: margin-top van .ond-grid op 0 zetten — in style_ipp.css (v3) stond
   daar 24px, waardoor de ruimte tussen header en eerste kaart op de
   projectpagina 24px groter was dan op de homepage. Dit trekt het gelijk:
   beide pagina's hebben nu alleen de 32px van .main padding-top als gap. */
.ond-grid { margin-top: 0; }

/* v4.x: grid-kolommen flexibeler.
   - Cap omhoog van 4 → 6 zodat brede schermen (2560/3840px) de breedte beter
     benutten ipv vier sterk uitgerekte kaarten.
   - Min-width van .ond-grid verlaagd van 360 → 320 zodat 3+ kolommen
     robuust passen op 1920px, ook als de scrollbar wat ruimte inneemt.
   .project-grid had al 320 — die behouden we, alleen de cap omhoog. */
.project-grid { columns: 6 320px; }
.ond-grid     { columns: 6 320px; margin-top: 0; }

.ond-card {
  position: relative;
  /* v4.x perf-fix: zelfde behandeling als .project-card — backdrop-filter weg,
     vrijwel dekkende achtergrond. Op de projectpagina staan vaak 10+ middel-
     kaarten in beeld; per stuk een blurpass was de grootste vertrager. */
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  --gx: 50%; --gy: 120%;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.85s cubic-bezier(.2,.7,.2,1);
}
.ond-card.is-tilting { transition: transform 0.12s ease-out; }
.ond-card::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(255,255,255,0.10), transparent 45%);
  opacity: 0; transition: opacity 0.25s;
  z-index: 5;
}
.ond-card:hover::after { opacity: 1; }

/* ── LOGIN-BOX (homepage zonder sessie) ───────────────────────────────
   v4.x: zelfde tilt als de kaarten. De glow ligt alleen op de RAND
   van het kader (niet over de foto), bereikt door een mask-composite
   die het binnenvlak weglaat en alleen een 1px-frame zichtbaar maakt.
   De radial-gradient binnen die frame volgt de cursor via --gx/--gy. */
.login-box {
  --gx: 50%; --gy: 120%;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.85s cubic-bezier(.2,.7,.2,1);
}
.login-box.is-tilting { transition: transform 0.12s ease-out; }
.login-box::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  padding: 1px;          /* dikte van de glow-rand */
  background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(255,255,255,0.55), transparent 45%);
  opacity: 0; transition: opacity 0.25s;
  z-index: 5;
  /* Mask-truc: trek het binnenvlak (content-box) af van het hele oppervlak
     (border-box) → alleen de 1px padding-zone blijft over. Resultaat: een
     gradient die alleen op de rand zichtbaar is. Volgt automatisch de
     border-radius van het element. */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.login-box:hover::after { opacity: 1; }

/* ── PROJECT-PAGINA: ADMIN-BAR WORDT HERO ──────────────────────────── */
/* Optioneel: vervang in project_ipp.php de .hdr + .admin-bar
   door een .pd-hero blok. Zie INTEGRATION.md.  */
.pd-hero {
  margin: 12px 16px 0;  /* v4.3: bottom 18 → 0 zodat gap met grid gelijk is aan homepage (alleen .main padding-top) */
  padding: 16px 24px;   /* v4.7: van 22px → 16px verticaal, pd-back-pill verhuisd naar pd-actions, hero compacter */
  border-radius: var(--radius-card);
  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);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
/* v4.x: klanten (niet-ingelogd) zien geen actieknoppen op de projectpagina,
   dus de hero kan compacter — gelijk aan de 72px-header op de reviewpagina.
   Body krijgt de class 'is-public-view' via updateAdminUI() in project_ipp.php
   wanneer er geen admin- of external-sessie is. */
body.is-public-view .pd-hero { min-height: 72px; padding: 12px 24px; }
.pd-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; margin-bottom: 10px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 999px; color: var(--muted);
  font-size: 11px; font-weight: 700; cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.pd-back:hover { color: var(--text); border-color: var(--muted); background: var(--card); }
.pd-title { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 12px; }
.pd-meta  { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pd-actions { display: flex; gap: 6px; align-items: center; }

/* ── 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. */
.pc-mgr, .person-mgr,
.pc-dsn, .person-dsn {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--muted);
}
.pc-mgr, .person-mgr { font-weight: 600; }
.pc-dsn, .person-dsn { font-weight: 500; }
.pc-mgr-avatar, .pc-dsn-avatar { display: none; }

/* v4.x: .card-persons-wrap op de homepage-projectkaarten gebruikt nu dezelfde
   chips (.pc-mgr / .pc-dsn) als de pd-meta op de projectpagina. Daarom flex +
   gap + wrap zodat meerdere designers netjes onder elkaar afbreken op smalle
   kaarten. Margin-top is 6px (was 3px in v3) voor wat lucht onder de titel. */
.card-persons-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }

/* ── FOOTER REFRESH ────────────────────────────────────────────────── */
/* v4.2: footer-tekst centraal, daarna logout-bar met knoppen, daarna een
   apart .footer-logo div onderaan (toegevoegd in admin_ipp.php / project_ipp.php).
   v4.9: logo_footer.png is nu transparant — gewoon als background-image laden
   met opacity, geen mask-truc meer nodig. */
.page-footer {
  margin: 32px 0 0; padding: 18px 16px 12px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 11px; color: var(--muted);
  line-height: 1.7;
}
.page-footer::before { display: none; }
.page-footer::after  { display: none; }  /* logo verhuisd naar .footer-logo onder de knoppen */

.footer-logo {
  width: 90px; height: 18px;
  margin: 14px auto 24px;
  background: url('logo_footer.png') center / contain no-repeat;
  opacity: 0.55;
}

/* Theme-toggle vanuit logout-bar in footer ophalen via JS, of laat staan;
   styling werkt voor beide plekken */
.btn-theme {
  padding: 5px 10px; font-size: 11px; font-weight: 600;
  border-radius: 7px; color: var(--muted);
  background: transparent; border: 1px solid var(--border);
  display: inline-flex; align-items: center; gap: 5px;
}
.btn-theme:hover { color: var(--text); border-color: var(--muted); }

/* v4.1: logout-bar netjes gecentreerd onder de footer, niet meer als losse
   flex-end rij rechtsonder. Bevat theme-toggle (blijft hier ipv naar
   page-footer verhuizen — zie js_ipp_v4.js DOMContentLoaded) + uitloggen
   + gebruikersbeheer. flex-wrap zodat 't op smalle viewports netjes
   afbreekt naar 2 regels. */
.logout-bar {
  margin: 8px auto 0;
  background: transparent;
  display: flex; gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* ── MODALS — spring physics ───────────────────────────────────────── */
@keyframes modal-spring {
  0%   { transform: scale(0.92) translateY(8px); opacity: 0; }
  60%  { transform: scale(1.015) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); }
}
.overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(0,0,0,.45); }
.modal {
  animation: modal-spring 0.32s cubic-bezier(.34,1.56,.64,1) both;
  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);
}

/* ── MODAL-INHOUD — v4 glass-treatment voor pop-ups ─────────────────────
   Alle modals (nieuw middel, project beheren, middel beheren, etc) delen
   dezelfde sub-elementen. Hier brengen we header/footer/inputs/upload-zone
   en de "Annuleren"-knop in lijn met de rest van het v4-ontwerp. Werkt
   automatisch voor élke modal die de gedeelde classes gebruikt.

   De effectiviteit van glass-stacking hangt af van een doorzichtige
   modal-bg (55% surface hierboven) — anders ligt alles op een solide
   donkere achtergrond en valt het tint-verschil tussen lagen weg. */

/* Header semi-transparant + eigen blur — sticky bij scroll. Iets meer
   tint dan de modal-bg eronder, zodat 'ie zichtbaar afscheidt. */
.modal-header {
  background: color-mix(in oklab, var(--surface) 30%, transparent);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
}

/* Footer zelfde idee — niet sticky maar wel een lichte tint zodat de
   actieknoppen visueel afgescheiden zijn van de body. */
.modal-footer {
  background: color-mix(in oklab, var(--surface) 22%, transparent);
}

/* Tekst-inputs binnen modals — flinterdun glass-velden met soft border. */
.modal-body input[type="text"],
.modal-body input[type="password"],
.modal-body input[type="email"],
.modal-body input[type="number"],
.modal-body textarea {
  background: color-mix(in oklab, var(--card) 22%, transparent);
  border-color: var(--border);
  transition: background 0.18s, border-color 0.18s;
}
.modal-body input[type="text"]:hover,
.modal-body input[type="password"]:hover,
.modal-body input[type="email"]:hover,
.modal-body input[type="number"]:hover,
.modal-body textarea:hover {
  background: color-mix(in oklab, var(--card) 45%, transparent);
}

/* Dropdowns krijgen dezelfde glass-look. */
.m-select {
  background: color-mix(in oklab, var(--card) 22%, transparent);
  border-color: var(--border);
  transition: background 0.18s, border-color 0.18s;
}
.m-select:hover { background: color-mix(in oklab, var(--card) 45%, transparent); }

/* Upload-zone — zachte glass-tint, dashed border in soft-white.
   Hover: goud randje met meer bg-vulling — voelt levendiger. */
.upload-zone {
  background: color-mix(in oklab, var(--card) 8%, transparent);
  border-color: rgba(255,255,255,.18);
  transition: background 0.2s, border-color 0.2s;
}
.upload-zone:hover {
  background: color-mix(in oklab, var(--card) 25%, transparent);
  border-color: var(--gold);
}
body.light-mode .upload-zone        { border-color: rgba(0,0,0,.18); }
body.light-mode .upload-zone:hover  { border-color: var(--gold); }

/* "Annuleren"-knoppen in modal-footer matchen nu visueel de "Aanmaken"-
   knop ernaast (btn-hdr-gold) — zelfde glass-look, inset highlights, lichte
   shadow. Alleen geen gold gradient: blijft neutraal als secundaire actie. */
.modal-footer .btn-ghost {
  position: relative; overflow: hidden;
  background: color-mix(in oklab, var(--card) 70%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 2px 6px rgba(0,0,0,.25);
  transition: all 0.2s;
}
.modal-footer .btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
}

/* ── REVIEW-PAGINA: glass tooltip op annotaties ─────────────────────── */
.annotation-tooltip,
.review-tooltip {
  background: color-mix(in oklab, var(--surface) 75%, transparent);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--border);
}

/* ── PERFORMANCE FALLBACK ──────────────────────────────────────────── */
@supports not (backdrop-filter: blur(1px)) {
  .project-card, .ond-card, .hdr, .pd-hero, .modal {
    background: var(--surface);
  }
}
@media (prefers-reduced-motion: reduce) {
  .project-card, .ond-card { transition: none !important; transform: none !important; }
  .modal { animation: 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; }

  /* --- HEADER (admin homepage) ------------------------------------- */
  /* .hdr-inner stond op flex/space-between zonder wrap; daardoor overlapten
     titel + acties elkaar op smal scherm. Wrap inschakelen en de twee
     kinderen ieder full-width laten worden zet ze netjes onder elkaar. */
  .hdr { margin: 8px 8px 0; }
  .hdr-inner,
  .hdr:not(.hdr-no-sticky) .hdr-inner {
    flex-wrap: wrap;
    padding: 12px 16px;
    min-height: 0;
    align-items: stretch;
    gap: 10px;
  }
  .hdr:not(.hdr-no-sticky) { min-height: 0; height: auto; }
  .hdr-left, .hdr-right    { width: 100%; }
  .hdr-title { font-size: 22px; margin-bottom: 4px; }
  .hdr-sub   { font-size: 13px; }

  /* De actie-rij in de header (Nieuw project / Zoek / Filter) wrapt nu
     ook zelf. Zoekveld krijgt geen vaste 200px-width meer en kan zo
     samen met de twee knoppen op één rij passen op telefoons ≥360px. Op
     hele smalle schermen (≤~340px) wrapt de Filter-knop netjes naar
     een tweede rij. */
  .filter-bar-actions {
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
  }
  .filter-bar-actions .search-input {
    flex: 1 1 0;
    width: auto;
    min-width: 80px;
  }

  /* --- PROJECT-PAGINA HERO ----------------------------------------- */
  /* .pd-hero wrapt al z'n directe kinderen, maar .pd-actions zelf was
     één rij flex zonder wrap — daardoor schoten de 5 knoppen rechts
     buiten de hero-kaart. Wrap aanzetten en width 100%. */
  .pd-hero {
    margin: 8px 8px 0;
    padding: 12px 16px;
    gap: 12px;
    min-height: 0;
  }
  body.is-public-view .pd-hero { padding: 10px 16px; min-height: 0; }
  .pd-title { font-size: 22px; margin-bottom: 8px; }
  .pd-actions {
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
  }

  /* --- KNOPPEN IN HEADER IETS COMPACTER ---------------------------- */
  .btn-hdr { padding: 7px 11px; font-size: 12px; }

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

  /* --- REVIEW-PAGINA HEADER ---------------------------------------- */
  /* De reviewheader heeft .hdr-no-sticky (compact). Op smal scherm wrappen
     z'n elementen ook — terug-knop + project-link onder elkaar. De sidebar
     zelf wordt al verborgen door een eigen @media-regel in review_ipp.php
     onder 700px; voor 700-768px is de canvas iets aan de smalle kant maar
     blijft alles bereikbaar. */
  .hdr.hdr-no-sticky .hdr-inner { padding: 8px 12px; flex-wrap: wrap; gap: 8px; }

  /* --- BEHEERPAGINA ------------------------------------------------ */
  /* Tab-bar horizontaal scrollbaar zodat alle tabs bereikbaar blijven. */
  .beheer-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .beheer-tab-btn { flex-shrink: 0; }
  .beheer-modal   { max-width: 92vw; }

  /* --- ALGEMENE MODALS --------------------------------------------- */
  .custom-confirm-box { max-width: 92vw; }

  /* --- FOOTER ------------------------------------------------------ */
  .page-footer { font-size: 11px; padding: 16px 8px; }
}