@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');

/* =====================================================================
   RAM Compliancy — huisstijl 2026-07-10
   Volledig token-gestuurd: het huisstijl-beheer (huisstijl.html) kan deze
   variabelen per organisatie overschrijven via inline styles op :root.
   Statuskleuren (--good/--warn/--bad) zijn functioneel en blijven vast.
   ===================================================================== */

:root{
  /* merk & interface */
  --brand:#611881;      --brand-soft:#f2e8f8;
  --accent:#DA593D;     --accent-soft:#fceae5;
  --accent-hi:#e9704e;  /* lichte bovenkant van de actie-gradient */

  /* vlakken & tekst */
  --ink:#1c1428;
  --paper:#f6f4f9;
  --card:#ffffff;
  --line:#e6e1ef;
  --line-soft:#efebf5;
  --muted:#71688a;

  /* zijbalk — merk-anker, in beide thema's donker */
  --side-bg:#160b2c;
  --side-card:#1f1338;
  --side-ink:#d9d2ea;
  --side-dim:#8d81ad;

  /* status — vast, niet themabaar */
  --good:#189065;      --good-soft:#e1f4eb;
  --warn:#b07514;      --warn-soft:#faf0da;
  --bad:#cf3f2e;       --bad-soft:#fbe8e5;

  --av1:#007BB6; --av2:#8f35b8; --av3:#c74a2f; --av4:#7a4b9e;
  --radius:12px;
  --radius-sm:9px;
  --bw:1px;             /* randdikte van kaarten/velden — wereld-thema's (bv. Beton) zetten hem dikker */
  --accent-ink:#fff;    /* tekstkleur óp de actiekleur — donker bij lichte accenten (bv. Beton-geel) */
  --shadow:0 1px 2px rgba(22,11,44,.05), 0 6px 20px rgba(22,11,44,.05);
  --shadow-lift:0 2px 6px rgba(22,11,44,.08), 0 16px 44px rgba(22,11,44,.14);
  --ring:0 0 0 3px var(--brand-soft);
  --font-display:'Geist',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:'Geist',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:'Geist Mono',"SF Mono","Cascadia Code",Consolas,Menlo,monospace;

  --side-w:232px;       /* zijbalk uitgeklapt */
  --side-w-rail:64px;   /* zijbalk ingeklapt (niet vastgepind) */
}
@media (prefers-color-scheme: dark){
  :root{
    --brand:#b06fd6;   --brand-soft:#2f1c46;
    --accent:#ef7150;  --accent-soft:#3a2015;
    --accent-hi:#f58767;
    --ink:#f0ecf8; --paper:#120b20; --card:#1a1130; --line:#2e2349; --line-soft:#271d3e; --muted:#9c92bd;
    --side-bg:#0e0720; --side-card:#180e2e;
    --good:#3ecb92; --good-soft:#123122;
    --warn:#e3ad3a; --warn-soft:#332612;
    --bad:#f0705c;  --bad-soft:#3a1712;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.3);
    --shadow-lift:0 2px 6px rgba(0,0,0,.4), 0 16px 44px rgba(0,0,0,.5);
  }
}

/* expliciete thema's via de wisselknop ('ram' is een oud opgeslagen thema = licht) */
:root[data-theme="light"], :root[data-theme="ram"]{
  --brand:#611881;   --brand-soft:#f2e8f8;
  --accent:#DA593D;  --accent-soft:#fceae5;
  --accent-hi:#e9704e;
  --ink:#1c1428; --paper:#f6f4f9; --card:#ffffff; --line:#e6e1ef; --line-soft:#efebf5; --muted:#71688a;
  --side-bg:#160b2c; --side-card:#1f1338;
  --good:#189065; --good-soft:#e1f4eb;
  --warn:#b07514; --warn-soft:#faf0da;
  --bad:#cf3f2e;  --bad-soft:#fbe8e5;
  --shadow:0 1px 2px rgba(22,11,44,.05), 0 6px 20px rgba(22,11,44,.05);
  --shadow-lift:0 2px 6px rgba(22,11,44,.08), 0 16px 44px rgba(22,11,44,.14);
}
:root[data-theme="dark"]{
  --brand:#b06fd6;   --brand-soft:#2f1c46;
  --accent:#ef7150;  --accent-soft:#3a2015;
  --accent-hi:#f58767;
  --ink:#f0ecf8; --paper:#120b20; --card:#1a1130; --line:#2e2349; --line-soft:#271d3e; --muted:#9c92bd;
  --side-bg:#0e0720; --side-card:#180e2e;
  --good:#3ecb92; --good-soft:#123122;
  --warn:#e3ad3a; --warn-soft:#332612;
  --bad:#f0705c;  --bad-soft:#3a1712;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.3);
  --shadow-lift:0 2px 6px rgba(0,0,0,.4), 0 16px 44px rgba(0,0,0,.5);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.025em; text-wrap:balance; margin:0; }
a{ color:inherit; }
button{ font-family:inherit; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:6px; }

/* ---------- shell ---------- */
.app{ min-height:100vh; }

/* actie-stripe (bv. regenboogthema) — onzichtbaar zolang --stripe 'none' is */
.brand-stripe{ position:fixed; top:0; left:0; right:0; height:4px; background:var(--stripe, none); z-index:60; pointer-events:none; }

/* zijbalk: altijd donker (merk-anker). Vastgepind = volle breedte; losgepind =
   smalle icoonstrook die bij aanwijzen als laag óver de inhoud uitklapt —
   de pagina zelf beweegt daarbij niet. */
.sidebar{
  position:fixed; top:0; bottom:0; left:0; width:var(--side-w); z-index:40;
  background:var(--side-bg); color:var(--side-ink);
  display:flex; flex-direction:column; padding:18px 12px; gap:20px;
  overflow:hidden auto;
  transition:width .22s ease, box-shadow .22s ease;
}
.sidebar::before{
  content:''; position:absolute; top:-130px; left:-90px; width:300px; height:300px; border-radius:999px;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--brand) 50%, transparent), transparent 70%); pointer-events:none;
}
.main{ margin-left:var(--side-w); min-width:0; display:flex; flex-direction:column; min-height:100vh; transition:margin-left .22s ease; }

.app.side-unpinned .sidebar{ width:var(--side-w-rail); }
.app.side-unpinned .sidebar:hover{ width:var(--side-w); box-shadow:16px 0 44px rgba(10,4,26,.4); }
.app.side-unpinned .main{ margin-left:var(--side-w-rail); }

.sidebar .brand-text, .nav-item span, .foot-user > div:not(.foot-avatar),
.foot-logout, .pin-btn, .nav-sep{
  transition:opacity .15s ease;
}
.brand, .nav-item, .foot-user{ white-space:nowrap; position:relative; }
.app.side-unpinned .sidebar:not(:hover) :is(.logo-banner, .brand-text, .nav-item span, .nav-badge, .foot-user > div:not(.foot-avatar), .pin-btn){
  position:absolute; opacity:0; pointer-events:none;
}
.app.side-unpinned .sidebar:not(:hover) .brand.has-logo .logo-rail{ position:static; opacity:1; pointer-events:auto; display:flex; }
.app.side-unpinned .sidebar:not(:hover) :is(.foot-logout, .nav-sep){ opacity:0; pointer-events:none; }
.app.side-unpinned .sidebar:not(:hover) :is(.brand, .nav-item, .foot-user){ justify-content:center; padding-left:0; padding-right:0; }
.app.side-unpinned .sidebar:not(:hover) .brand.has-logo{ flex-direction:row; padding:2px 6px; }
.app.side-unpinned .sidebar:not(:hover) .sidebar-foot{ padding-left:0; padding-right:0; }
.app.side-unpinned .sidebar:not(:hover) .nav-item.active::after{ display:none; }

.brand{ display:flex; align-items:center; gap:10px; padding:2px 6px; position:relative; }
.brand .mark{ font-family:var(--font-display); font-size:14px; font-weight:700; letter-spacing:-.01em; line-height:1.2; color:#fff; }
.brand .sub{ font-size:10.5px; color:var(--side-dim); margin-top:1px; }

/* logo-rail: compacte tegel — standaardweergave zonder eigen logo, en de
   variant die overblijft in de smalle icoonstrook wanneer er wél een logo is */
.logo-rail{
  width:34px; height:34px; flex:none; border-radius:9px;
  background:var(--logo-bg, linear-gradient(135deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand) 60%, color-mix(in srgb, var(--brand) 65%, #000)));
  color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center;
  letter-spacing:-.02em; box-shadow:0 0 18px color-mix(in srgb, var(--brand) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.22);
  overflow:hidden;
}
.logo-rail.has-img{ background:#fff; padding:4px; box-shadow:0 0 18px color-mix(in srgb, var(--brand) 40%, transparent); }
.logo-rail img{ width:100%; height:100%; object-fit:contain; display:block; }

/* logo-banner: brede weergave als er wél een eigen logo is — vervangt de
   kleine tegel zodra de zijbalk breed genoeg is om 'm goed te tonen */
.brand.has-logo{ flex-direction:column; align-items:stretch; gap:6px; padding:8px 6px 10px; }
.logo-banner{ width:100%; height:46px; flex:none; border-radius:8px; background:#fff; padding:6px 10px; box-shadow:0 0 18px color-mix(in srgb, var(--brand) 40%, transparent); overflow:hidden; }
.logo-banner img{ width:100%; height:100%; object-fit:contain; display:block; }
.brand.has-logo .logo-rail{ display:none; }

.pin-btn{
  margin-left:auto; background:none; border:none; cursor:pointer; color:var(--side-dim);
  width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex:none;
}
.brand.has-logo .pin-btn{ position:absolute; top:8px; right:2px; margin-left:0; }
.pin-btn svg{ width:14px; height:14px; }
.pin-btn:hover{ color:#fff; background:rgba(255,255,255,.08); }
.pin-btn.on{ color:#fff; }

.nav{ display:flex; flex-direction:column; gap:2px; position:relative; }
.nav-item{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-sm);
  color:var(--side-dim); font-size:13px; font-weight:500; cursor:pointer; border:1px solid transparent;
  background:none; text-align:left; width:100%; text-decoration:none;
  transition:background .13s ease, color .13s ease;
}
.nav-item svg{ width:16px; height:16px; flex:none; opacity:.9; }
.nav-item:hover{ background:rgba(255,255,255,.05); color:#fff; }
.nav-item.active{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  color:#fff; font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-item.active svg{ opacity:1; }
.nav-item.active::after{
  content:''; margin-left:auto; width:6px; height:6px; border-radius:999px; flex:none;
  background:var(--accent); box-shadow:0 0 8px var(--accent);
}
.nav-badge{
  margin-left:auto; flex:none; background:var(--accent); color:#fff; font-size:10px; font-weight:700;
  line-height:1; padding:3px 6px; border-radius:999px; min-width:16px; text-align:center;
}
.nav-sep{
  font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--side-dim); opacity:.65; padding:14px 10px 4px; white-space:nowrap; overflow:hidden;
}
.nav-sep:first-child{ padding-top:2px; }

/* inklapbare menugroep: het invoerwerk zit gebundeld onder één kop, zodat wie
   alleen komt kijken een korte, rustige lijst overhoudt */
.nav-groep{ display:flex; flex-direction:column; gap:2px; }
.nav-groep-kop .chev{ margin-left:auto; width:13px; height:13px; opacity:.7; transition:transform .16s ease; }
.nav-groep.open .nav-groep-kop .chev{ transform:rotate(90deg); }
/* stipje op de kop als je binnen de groep werkt maar hem hebt ingeklapt */
.nav-groep-kop.heeft-actief .chev{ opacity:1; }
.nav-groep:not(.open) .nav-groep-kop.heeft-actief::before{
  content:''; position:absolute; left:2px; top:50%; transform:translateY(-50%);
  width:3px; height:16px; border-radius:99px; background:var(--accent);
}
.nav-sub{
  display:none; flex-direction:column; gap:2px; margin:2px 0 4px 19px;
  padding-left:11px; border-left:1px solid rgba(255,255,255,.12);
}
.nav-groep.open .nav-sub{ display:flex; }
.nav-item.sub{ font-size:12.5px; padding:7px 9px; }
.nav-item.sub svg{ width:14px; height:14px; }
/* in de smalle icoonstrook is er geen ruimte voor de subitems */
.app.side-unpinned .sidebar:not(:hover) .nav-sub{ display:none; }

.sidebar-foot{ margin-top:auto; position:relative; }
.foot-user{
  display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:12px;
  background:var(--side-card); margin-bottom:8px;
}
.foot-avatar{
  width:30px; height:30px; flex:none; border-radius:50%;
  background:linear-gradient(135deg, var(--accent-hi), var(--accent)); color:var(--accent-ink);
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.foot-name{ font-size:12.5px; font-weight:600; line-height:1.25; color:#fff; }
.foot-role{ font-size:11px; color:var(--side-dim); }
.foot-logout, .sidebar-foot button{
  width:100%; border:1px solid rgba(255,255,255,.12); background:none; color:var(--side-dim);
  font-size:12px; font-weight:500; padding:7px 10px; border-radius:var(--radius-sm); cursor:pointer;
  transition:color .13s ease, border-color .13s ease, background .13s ease;
}
.foot-logout:hover, .sidebar-foot button:hover{ color:#fff; border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.05); }

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:flex-end; gap:16px;
  padding:12px 28px; border-bottom:var(--bw) solid var(--line);
  background:color-mix(in srgb, var(--card) 80%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  flex-wrap:wrap; position:sticky; top:0; z-index:5;
}
.who{ font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:12px; }
.who b{ color:var(--ink); font-weight:600; }
.role-tag{ background:var(--brand-soft); color:var(--brand); padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.01em; }
.who-logout{
  border:var(--bw) solid var(--line); background:var(--card); color:var(--muted); width:30px; height:30px;
  border-radius:999px; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center;
  transition:color .13s ease, border-color .13s ease;
}
.who-logout:hover{ color:var(--bad); border-color:var(--bad); }

.theme-switch{ display:flex; gap:2px; background:var(--paper); border:var(--bw) solid var(--line); border-radius:var(--radius-sm); padding:2px; }
.theme-btn{
  border:none; background:none; padding:4px 11px; border-radius:7px; cursor:pointer;
  color:var(--muted); font-size:11.5px; font-weight:500; line-height:1.3;
  transition:background .13s ease, color .13s ease;
}
.theme-btn:hover{ color:var(--ink); }
.theme-btn.active{ background:var(--card); color:var(--ink); font-weight:600; box-shadow:var(--shadow); }

/* "Bekijk als" — admin-only rolpreview, zie js/supabase.js */
.viewals{ position:relative; }
.viewals-btn{
  display:flex; align-items:center; gap:6px; border:var(--bw) solid var(--line); background:var(--card);
  color:var(--muted); font-size:11.5px; font-weight:600; padding:6px 12px; border-radius:999px; cursor:pointer;
  transition:border-color .13s ease, color .13s ease, background .13s ease;
}
.viewals-btn svg{ width:13px; height:13px; flex:none; }
.viewals-btn:hover{ border-color:var(--brand); color:var(--ink); }
.viewals-btn.actief{ background:var(--warn-soft); border-color:var(--warn); color:var(--warn); }
.viewals-btn.cobrowse{ background:var(--brand-soft); border-color:var(--brand); color:var(--brand); }
.viewals-menu{
  position:absolute; top:calc(100% + 6px); right:0; z-index:70; min-width:220px; padding:4px;
  background:var(--card); border:var(--bw) solid var(--line); border-radius:10px; box-shadow:var(--shadow-lift);
  display:flex; flex-direction:column;
}
.viewals-menu button{
  background:none; border:none; text-align:left; padding:8px 12px; font-size:12.5px;
  border-radius:7px; cursor:pointer; color:var(--ink); font-weight:500;
}
.viewals-menu button:hover{ background:var(--paper); }
.viewals-menu button.actief{ background:var(--brand-soft); color:var(--brand); font-weight:600; }

.page{ padding:26px 30px 64px; max-width:1400px; }
.page-head{ margin-bottom:20px; }
.page-head h1{ font-size:21px; }
.page-head p{ margin:6px 0 0; color:var(--muted); font-size:13.5px; max-width:62ch; }

.role-note{
  display:flex; gap:10px; align-items:flex-start; background:var(--brand-soft); color:var(--brand);
  border-radius:var(--radius); padding:11px 15px; font-size:12.5px; margin-bottom:20px;
}

.card{ background:var(--card); border:var(--bw) solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }

/* ---------- legend ---------- */
.legend{ display:flex; gap:18px; flex-wrap:wrap; padding:10px 4px 14px; font-size:12px; color:var(--muted); align-items:center; }
.legend .item{ display:flex; align-items:center; gap:7px; }
.legend .badge{ width:21px; height:21px; cursor:default; }
.legend .badge svg{ width:10px; height:10px; }

/* ---------- matrix ---------- */
.matrix-scroll{ overflow-x:auto; border-radius:14px; border:var(--bw) solid var(--line); background:var(--card); box-shadow:var(--shadow); }
table.matrix{ border-collapse:separate; border-spacing:0; width:100%; min-width:640px; }
table.matrix th, table.matrix td{ padding:0; }
table.matrix tbody tr:not(.grp-row):hover td{ background:color-mix(in srgb, var(--brand-soft) 35%, var(--card)); }
table.matrix tbody tr:not(.grp-row):hover td.cert-col{ background:color-mix(in srgb, var(--brand-soft) 35%, var(--card)); }

.grp-row .grp-label{
  position:sticky; left:0; z-index:2;
  background:var(--brand-soft); color:var(--brand); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  padding:8px 18px; border-bottom:var(--bw) solid var(--line); border-top:var(--bw) solid var(--line); font-weight:700;
  min-width:230px; max-width:230px; border-right:var(--bw) solid var(--line);
}
.grp-row .grp-fill{
  background:var(--brand-soft); border-bottom:var(--bw) solid var(--line); border-top:var(--bw) solid var(--line);
}
.grp-row.sub .grp-label.sub{
  font-size:10.5px; font-weight:600; padding-left:28px; color:var(--muted);
  background:var(--card); border-top:none; letter-spacing:.05em; text-transform:uppercase;
}
.grp-row.sub .grp-fill{ background:var(--card); border-top:none; }

.cert-col{
  position:sticky; left:0; z-index:1; background:var(--card);
  padding:11px 18px; border-bottom:1px solid var(--line-soft); min-width:230px; max-width:230px;
  border-right:var(--bw) solid var(--line);
}
.cert-name{ font-size:13px; font-weight:600; letter-spacing:-.01em; }
.cert-req{ font-size:11px; color:var(--muted); margin-top:2px; font-family:var(--font-mono); }

.person-col{
  padding:11px 10px 9px; border-bottom:1px solid var(--line-soft); text-align:center; min-width:96px;
  border-right:1px solid var(--line-soft); vertical-align:middle;
}
.person-head{ padding:14px 10px 12px; text-align:center; border-bottom:var(--bw) solid var(--line); border-right:1px solid var(--line-soft); background:var(--card); min-width:96px; }
.person-head.me{ background:var(--brand-soft); }
.avatar{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:700; margin:0 auto 6px; box-shadow:0 2px 8px rgba(22,11,44,.18);
}
.person-name{ font-size:11.5px; font-weight:600; line-height:1.25; }
.person-role{ font-size:10.5px; color:var(--muted); margin-top:1px; }

.sum-col{ text-align:center; padding:11px 14px; border-bottom:1px solid var(--line-soft); min-width:66px; }
.sum-head{ padding:14px 14px 12px; text-align:center; border-bottom:var(--bw) solid var(--line); background:var(--card); font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; min-width:66px; font-weight:600; }

/* statusknopjes — "set B": gevulde squircles, leest als heatmap */
.badge{
  width:29px; height:29px; border-radius:var(--radius-sm); border:none; display:inline-flex;
  align-items:center; justify-content:center; cursor:pointer; background:none; padding:0;
  transition:transform .12s ease, box-shadow .12s ease;
}
.badge svg{ width:14px; height:14px; }
.badge.good{ background:var(--good); color:#fff; box-shadow:0 2px 8px color-mix(in srgb, var(--good) 40%, transparent); }
.badge.ingediend{ background:var(--warn); color:#fff; box-shadow:0 2px 8px color-mix(in srgb, var(--warn) 40%, transparent); }
.badge.open{ background:var(--bad); color:#fff; box-shadow:0 2px 8px color-mix(in srgb, var(--bad) 40%, transparent); }
.badge.verlopen{ background:none; color:var(--bad); border:1.5px dashed var(--bad); }
.badge.vrijgesteld{ background:none; color:var(--muted); border:1.5px solid var(--line); }
.badge.na{ border:none; color:var(--muted); cursor:default; background:var(--line-soft); opacity:.7; }
.badge:not(.na):hover{ transform:scale(1.12); }
.badge.na.assignable{ background:none; border:1.5px dashed var(--line); color:var(--muted); cursor:pointer; opacity:1; }
.badge.na.assignable:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); transform:scale(1.12); }

.gap-chip{
  display:inline-flex; min-width:26px; height:22px; padding:0 8px; border-radius:999px; font-size:12px;
  align-items:center; justify-content:center; font-weight:700; font-variant-numeric:tabular-nums;
}
.gap-chip.zero{ background:var(--good-soft); color:var(--good); }
.gap-chip.some{
  background:linear-gradient(180deg, var(--accent-hi), var(--accent)); color:var(--accent-ink);
  box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
}
.count{ font-variant-numeric:tabular-nums; font-weight:600; }

/* ---------- overview tables ---------- */
.overview-table{ width:100%; border-collapse:collapse; }
.overview-table th{ text-align:left; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; padding:11px 18px; border-bottom:var(--bw) solid var(--line); font-weight:600; background:var(--card); }
.overview-table th:first-child{ border-top-left-radius:var(--radius); }
.overview-table th:last-child{ border-top-right-radius:var(--radius); }
.overview-table td{ padding:13px 18px; border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.overview-table tr:last-child td{ border-bottom:none; }
.team-row{ cursor:pointer; transition:background .1s ease; }
.team-row:hover{ background:color-mix(in srgb, var(--brand-soft) 35%, var(--card)); }
.team-name{ font-weight:600; }
.team-sub{ font-size:11.5px; color:var(--muted); }
.status-pill{ display:inline-block; padding:3px 11px; border-radius:999px; font-size:11.5px; font-weight:600; }
.status-pill.good{ background:var(--good-soft); color:var(--good); }
.status-pill.warn{ background:var(--warn-soft); color:var(--warn); }
.status-pill.bad{ background:var(--bad-soft); color:var(--bad); }
.status-pill.neutral{ background:var(--line-soft); color:var(--muted); }
.back-link{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--brand); cursor:pointer; margin-bottom:14px; background:none; border:none; padding:0; font-family:inherit; }
.back-link:hover{ text-decoration:underline; }

/* ---------- partnership ---------- */
.manu-block{ margin-bottom:26px; }
.manu-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.manu-head h2{ font-size:16px; }
.manu-head .count-tag{ font-size:11.5px; color:var(--muted); }
.tier-card{ padding:16px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:10px; }
.tier-name{ font-weight:600; font-size:13.5px; min-width:150px; letter-spacing:-.005em; }
.tier-reqs{ display:flex; gap:22px; flex-wrap:wrap; flex:1; }
.req-item{ font-size:12px; color:var(--muted); }
.req-item .count{ color:var(--ink); font-size:13px; }
.req-item .count.short{ color:var(--bad); }

/* ---------- forms ---------- */
label{ display:block; font-size:12px; color:var(--muted); margin-bottom:5px; font-weight:500; }
input,select,textarea{
  font-family:inherit; font-size:13.5px; padding:8px 11px; border:var(--bw) solid var(--line); border-radius:var(--radius-sm);
  background:var(--card); color:var(--ink); width:100%;
  transition:border-color .13s ease, box-shadow .13s ease;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--brand); box-shadow:var(--ring); }
input[type="checkbox"]{ width:auto; accent-color:var(--brand); }
input[type="color"]{ padding:3px; height:38px; cursor:pointer; }
.field{ margin-bottom:14px; }
.field-row{ display:flex; gap:12px; }
.field-row > .field{ flex:1; }

.btn{
  border:var(--bw) solid var(--line); background:var(--card); color:var(--ink); padding:8px 14px;
  border-radius:var(--radius-sm); font-size:12.5px; cursor:pointer; font-weight:600;
  box-shadow:var(--shadow);
  transition:background .13s ease, border-color .13s ease, transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ background:var(--paper); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn.primary{
  background:linear-gradient(180deg, var(--accent-hi), var(--accent)); border-color:transparent; color:var(--accent-ink);
  box-shadow:0 1px 2px color-mix(in srgb, var(--accent) 40%, transparent), 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn.primary:hover{ background:linear-gradient(180deg, var(--accent-hi), var(--accent)); filter:brightness(1.05); }
.btn.danger{ background:var(--bad-soft); border-color:color-mix(in srgb, var(--bad) 40%, transparent); color:var(--bad); box-shadow:none; }
.btn.danger:hover{ background:var(--bad); border-color:var(--bad); color:#fff; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ---------- import/export ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:760px){ .grid-2{ grid-template-columns:1fr; } }
.imp-card{ padding:22px; }
.imp-card h3{ font-size:14.5px; margin-bottom:4px; }
.imp-card p.desc{ font-size:12px; color:var(--muted); margin:0 0 14px; }
.dropzone{
  border:1.5px dashed var(--line); border-radius:var(--radius-sm); padding:28px 16px; text-align:center;
  color:var(--muted); font-size:12.5px; background:var(--paper); cursor:pointer;
  transition:border-color .13s ease, background .13s ease;
}
.dropzone:hover{ border-color:color-mix(in srgb, var(--brand) 50%, var(--line)); }
.dropzone.drag{ border-color:var(--brand); background:var(--brand-soft); color:var(--brand); }
.dropzone b{ color:var(--brand); }
.col-preview{ margin-top:14px; font-size:11.5px; max-height:200px; overflow:auto; }
.col-preview table{ width:100%; border-collapse:collapse; }
.col-preview td,.col-preview th{ padding:4px 8px; border-bottom:var(--bw) solid var(--line); font-family:var(--font-mono); white-space:nowrap; }
.export-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }

/* ---------- datamodel ---------- */
.model-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .model-grid{ grid-template-columns:1fr; } }
.model-card{ padding:20px; }
.model-card h3{ font-size:14px; margin-bottom:3px; }
.model-card .tag{ font-size:11px; color:var(--muted); margin-bottom:12px; display:block; }
.model-card ul{ margin:0; padding:0; list-style:none; font-size:12px; }
.model-card li{ font-family:var(--font-mono); padding:5px 0; border-bottom:1px dashed var(--line); color:var(--muted); }
.model-card li:last-child{ border-bottom:none; }
.model-card li b{ color:var(--ink); font-family:var(--font-body); font-weight:600; }

/* ---------- modal ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(14,7,32,.45);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:50;
}
.overlay[hidden]{ display:none; }
.modal{
  background:var(--card); border:var(--bw) solid var(--line); border-radius:16px; width:100%; max-width:400px;
  padding:24px; box-shadow:var(--shadow-lift); max-height:86vh; overflow:auto;
  animation:modal-in .16s ease;
}
@keyframes modal-in{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
.modal h3{ font-size:15.5px; margin-bottom:2px; }
.modal .m-sub{ font-size:12px; color:var(--muted); margin-bottom:14px; }
.modal .m-status{ display:flex; align-items:center; gap:9px; margin-bottom:12px; font-weight:500; }
.modal .m-text{ font-size:12.5px; color:var(--muted); line-height:1.55; margin-bottom:16px; }
.modal .m-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.modal .m-bewijs{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:11px 13px; margin-bottom:16px;
}
.modal .m-bewijs-kop{ display:block; font-size:12px; font-weight:600; margin-bottom:7px; }
.modal .m-bewijs-kop span{ font-weight:400; color:var(--muted); }
.modal .m-bewijs input[type=file]{ font-size:12px; width:100%; }
.modal .m-bewijs-hint{ font-size:11.5px; color:var(--muted); margin-top:7px; line-height:1.45; }
.m-close{
  float:right; background:none; border:none; color:var(--muted); cursor:pointer; font-size:17px; line-height:1;
  width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  transition:background .13s ease, color .13s ease;
}
.m-close:hover{ background:var(--paper); color:var(--ink); }

/* ---------- toast ---------- */
.toast-wrap{ position:fixed; bottom:22px; right:22px; display:flex; flex-direction:column; gap:8px; z-index:100; }
.toast{
  background:var(--side-bg); color:#fff; padding:10px 16px; border-radius:10px; font-size:12.5px; font-weight:500;
  box-shadow:var(--shadow-lift); animation:toast-in .18s ease;
}
@keyframes toast-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.toast.error{ background:var(--bad); color:#fff; }
.toast.success{ background:var(--good); color:#fff; }

/* ---------- tabel-tools (kopieer / print / mail-selectie) ---------- */
.tabel-tools{ display:flex; align-items:center; gap:8px; margin:0 0 8px; position:relative; }
.tabel-tools .btn{ padding:5px 11px; font-size:11.5px; box-shadow:none; }
.tt-menu{
  position:absolute; top:calc(100% + 4px); z-index:70; min-width:200px; padding:4px;
  background:var(--card); border:var(--bw) solid var(--line); border-radius:10px; box-shadow:var(--shadow-lift);
  display:flex; flex-direction:column;
}
.tt-menu button{
  background:none; border:none; text-align:left; padding:8px 12px; font-size:12.5px;
  border-radius:7px; cursor:pointer; color:var(--ink); font-weight:500;
}
.tt-menu button:hover{ background:var(--paper); }
.tt-sel{
  display:flex; align-items:center; gap:7px; margin:0 auto 0 0;
  font-size:12px; color:var(--muted); cursor:pointer; font-weight:500;
}
.tt-sel input{ width:auto; }
.mail-balk{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--side-bg); color:#fff; padding:10px 14px; border-radius:14px;
  display:flex; gap:12px; align-items:center; z-index:80; box-shadow:var(--shadow-lift);
  font-size:13px; font-weight:500;
}
.mail-balk .btn{ box-shadow:none; }
.mail-balk .btn:not(.primary){ background:none; color:#fff; border-color:rgba(255,255,255,.25); }

.footnote{ font-size:11.5px; color:var(--muted); margin-top:16px; }
.empty-state{
  padding:48px 24px; text-align:center; color:var(--muted); font-size:13px; line-height:1.6;
}
.empty-state::before{
  content:''; display:block; width:40px; height:40px; margin:0 auto 12px; border-radius:12px;
  background:var(--paper); border:1.5px dashed var(--line);
}

/* ---------- auth pages ---------- */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:
    radial-gradient(1100px 480px at 50% -8%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%),
    var(--paper);
}
.auth-card{ width:100%; max-width:380px; padding:32px 30px; }
.auth-card .mark{ font-family:var(--font-display); font-size:19px; font-weight:700; letter-spacing:-.02em; margin-bottom:2px; }
.auth-card .sub{ font-size:12.5px; color:var(--muted); margin-bottom:24px; }
.auth-err{ background:var(--bad-soft); color:var(--bad); padding:9px 12px; border-radius:var(--radius-sm); font-size:12.5px; margin-bottom:14px; }
.auth-err[hidden]{ display:none; }

/* ---------- tabs ---------- */
.tabs{ display:flex; gap:2px; border-bottom:var(--bw) solid var(--line); margin-bottom:22px; flex-wrap:wrap; }
.tab-btn{
  background:none; border:none; padding:9px 14px 11px; font-size:13px; color:var(--muted); cursor:pointer;
  border-bottom:2px solid transparent; font-weight:500; margin-bottom:-1px;
  transition:color .13s ease;
}
.tab-btn:hover{ color:var(--ink); }
.tab-btn.active{ color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }
.tab-panel[hidden]{ display:none; }

/* ---------- wereld-effecten (huisstijl-thema's, sql/019) ----------
   Het actieve thema kan via tokens.effect een <html data-effect="...">-attribuut
   zetten; hier staan de bijbehorende texturen/animaties. Kleuren en vorm komen
   uit de css-variabelen die het thema levert — dit zijn alleen de extra's. */

/* Beton: neo-brutalisme — kapitalen in het menu, geen logo-gloed */
html[data-effect="beton"] .nav-item{ text-transform:uppercase; letter-spacing:.05em; font-size:11px; }
html[data-effect="beton"] :is(.logo-rail, .logo-banner){ box-shadow:none; }
html[data-effect="beton"] .sidebar::before{ display:none; }

/* Aurora: langzaam golvende gradient onder doorschijnende, geblurde vlakken */
html[data-effect="aurora"] body{
  background:linear-gradient(120deg,#ffd9ec,#dbe7ff 35%,#d6fff2 70%,#ffd9ec);
  background-size:300% 300%; background-attachment:fixed;
  animation:hs-aurora 16s ease infinite;
}
html[data-effect="aurora"][data-theme="dark"] body{
  background:linear-gradient(120deg,#221240,#0e2246 35%,#0d3a38 70%,#221240);
  background-size:300% 300%; background-attachment:fixed;
  animation:hs-aurora 16s ease infinite;
}
@keyframes hs-aurora{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
html[data-effect="aurora"] :is(.card, .sidebar, .matrix-scroll){
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}

/* CRT: knipperende cursor achter de portalnaam; in donker scanlines over alles */
html[data-effect="crt"] .brand .mark::after{ content:'▊'; margin-left:4px; animation:hs-blink 1.1s steps(1) infinite; }
@keyframes hs-blink{ 50%{ opacity:0; } }
html[data-effect="crt"][data-theme="dark"] body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:200;
  background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.14) 2px 3px);
}

/* Oceaan: bubbels die opstijgen in de zijbalk */
html[data-effect="oceaan"] .sidebar{
  background-image:
    radial-gradient(circle at 22% 88%, rgba(255,255,255,.10) 0 5px, transparent 6px),
    radial-gradient(circle at 68% 94%, rgba(255,255,255,.07) 0 8px, transparent 9px),
    radial-gradient(circle at 45% 78%, rgba(255,255,255,.06) 0 3px, transparent 4px);
}

/* Krant: dubbele redactionele lijn onder de topbar, kapitalen in het menu */
html[data-effect="krant"] .topbar{ border-bottom:3px double var(--line); }
html[data-effect="krant"] .nav-item{ text-transform:uppercase; letter-spacing:.09em; font-size:10.5px; }
html[data-effect="krant"] .sidebar::before{ display:none; }

/* Bubblegum: stippenpatroon op de pagina, extra ronde tegels en pillenknoppen */
html[data-effect="bubblegum"] body{
  background-image:radial-gradient(circle, color-mix(in srgb, var(--brand) 7%, transparent) 1px, transparent 1.5px);
  background-size:16px 16px;
}
html[data-effect="bubblegum"] :is(.logo-rail, .foot-avatar){ border-radius:38%; }
html[data-effect="bubblegum"] .btn.primary{ border-radius:999px; }

/* Nebula: in donker een sterrenveld met nevels en een gloeiend logo */
html[data-effect="nebula"][data-theme="dark"] body{
  background-color:var(--paper); background-attachment:fixed;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 64%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 56% 12%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 42%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 76%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 86%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(ellipse 60% 40% at 70% 20%, rgba(90,80,220,.16), transparent),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(45,212,201,.10), transparent);
}
html[data-effect="nebula"][data-theme="dark"] :is(.logo-rail, .logo-banner){ box-shadow:0 0 18px rgba(138,147,255,.55); }

@media (prefers-reduced-motion: reduce){
  html[data-effect] body, html[data-effect] .brand .mark::after{ animation:none !important; }
}

/* ---------- mobiel: zijbalk wordt onderbalk, pin vervalt ---------- */
@media (max-width:820px){
  .sidebar{ position:fixed; bottom:0; left:0; right:0; top:auto; width:auto !important; height:auto; flex-direction:row; align-items:center;
    padding:8px 10px; gap:10px; border-top:1px solid rgba(255,255,255,.1); z-index:40; overflow-x:auto; overflow-y:hidden;
    background:var(--side-bg); box-shadow:none !important; }
  .sidebar::before{ display:none; }
  .brand, .pin-btn{ display:none; }
  .nav{ flex-direction:row; gap:2px; flex:1; min-width:0; }
  .nav-item span:not(.nav-badge){ display:none; }
  .nav-item{ padding:10px 0; flex:1 1 0; min-width:0; justify-content:center !important; }
  .card:has(> .overview-table){ overflow-x:auto; }
  .nav-item.active::after{ display:none; }
  .sidebar-foot{ display:none; }
  .main{ margin-left:0 !important; padding-bottom:64px; }
  .page{ padding:20px 16px 40px; }
  .topbar{ padding:12px 16px; }
  .who span.role-tag{ display:none; }
  .viewals-btn span{ display:none; }
  .viewals-menu{ right:auto; left:0; }
}