/* =========================================================================
   IV Regiedashboard — hoofdstylesheet
   Light + dark (voorbereid via [data-theme]); desktop-first, responsive.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

:root{
  --navy:#1e3a8a; --navy-700:#1d4ed8; --sky:#0ea5e9;
  --bg:#f1f5f9; --panel:#ffffff; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --green:#22c55e; --amber:#f59e0b; --red:#ef4444; --violet:#6366f1;
  --radius:14px; --shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.06);
  --sidebar:#16255c;
}
:root[data-theme="dark"]{
  --bg:#0b1220; --panel:#111a2e; --ink:#e6edf8; --muted:#93a4c3; --line:#1e2a44;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); --sidebar:#0d1730;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b1220; --panel:#111a2e; --ink:#e6edf8; --muted:#93a4c3; --line:#1e2a44;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); --sidebar:#0d1730;
  }
}

html,body{ background:var(--bg); color:var(--ink);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,system-ui,sans-serif; font-size:14px; line-height:1.5; }
a{ color:var(--navy-700); text-decoration:none; } a:hover{ text-decoration:underline; }

/* ---------- App shell ---------- */
.app{ display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.side{ background:linear-gradient(180deg,var(--sidebar),var(--navy)); color:#cdd7f0; padding:20px 14px; position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; }
.nav{ flex:1 1 auto; overflow-y:auto; min-height:0; margin:0 -4px; padding:0 4px; }
.side-foot{ flex:0 0 auto; display:flex; align-items:center; gap:9px; margin-top:8px; padding:12px 8px 2px; border-top:1px solid rgba(255,255,255,.09); }
.side-toggle{ flex:0 0 auto; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); border-radius:9px;
  color:#cdd7f0; cursor:pointer; font-size:16px; line-height:1; }
.side-toggle:hover{ background:rgba(255,255,255,.14); color:#fff; }
.side-toggle-ic{ display:block; transition:transform .15s ease; }
.side-version{ font-size:11px; color:#7f93cf; letter-spacing:.04em; white-space:nowrap; }
.brand{ display:flex; align-items:center; gap:11px; padding:6px 8px 20px; }
.brand .logo{ width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--sky),var(--violet));
  display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:18px; flex:0 0 auto; }
.brand .logo-img{ background:#fff; padding:3px; overflow:hidden; }
.brand .logo-img img{ width:100%; height:100%; object-fit:contain; display:block; }

/* Huisstijl: logo-voorbeeld op de instellingenpagina. */
.brand-logo-preview{ width:64px; height:64px; flex:0 0 auto; border-radius:12px; border:1px solid var(--line);
  background:linear-gradient(135deg,var(--sky),var(--violet)); display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:24px; overflow:hidden; }
.brand-logo-preview img{ width:100%; height:100%; object-fit:contain; background:#fff; padding:4px; }
.brand b{ color:#fff; font-size:15px; display:block; } .brand span{ font-size:11px; color:#9fb2e6; }
.nav-group{ font-size:10.5px; text-transform:uppercase; letter-spacing:.10em; color:#7f93cf; margin:16px 10px 6px; }
.nav a{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px; color:#cdd7f0; font-size:13.5px; margin:2px 0; }
.nav a:hover{ background:rgba(255,255,255,.07); text-decoration:none; }
.nav a.active{ background:rgba(255,255,255,.14); color:#fff; font-weight:600; }
.nav a .ic{ width:18px; text-align:center; opacity:.9; }

/* Ingeklapte sidebar: alleen iconen tonen. */
.sidebar-collapsed .app{ grid-template-columns:72px 1fr; }
.sidebar-collapsed .side{ padding:20px 10px; }
.sidebar-collapsed .brand{ justify-content:center; padding:6px 0 20px; }
.sidebar-collapsed .brand > div{ display:none; }
.sidebar-collapsed .nav-group{ display:none; }
.sidebar-collapsed .nav a{ justify-content:center; gap:0; padding:11px 0; font-size:0; }
.sidebar-collapsed .nav a .ic{ font-size:18px; }
.sidebar-collapsed .side-foot{ flex-direction:column; gap:0; padding:12px 0 4px; }
.sidebar-collapsed .side-version{ display:none; }
.sidebar-collapsed .side-toggle-ic{ transform:rotate(180deg); }

/* overflow-x:clip houdt elke pagina binnen de schermbreedte zonder een
   scroll-container te maken (anders dan overflow:hidden), zodat de sticky
   topbar blijft werken én niet meer horizontaal kan meescrollen op mobiel. */
.main{ display:flex; flex-direction:column; min-width:0; overflow-x:clip; }
.top{ background:var(--panel); border-bottom:1px solid var(--line); padding:12px 26px; display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:10; }
.crumbs{ color:var(--muted); font-size:12.5px; } .crumbs b{ color:var(--ink); }
.search{ margin-left:auto; position:relative; } .search input{ background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:8px 13px 8px 34px; width:280px; color:var(--ink); font-size:13px; }
.search-ic{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:13px; pointer-events:none; }
.rolechip{ background:#eef2ff; color:var(--navy); border:1px solid #dbe3ff; border-radius:999px; padding:6px 13px; font-size:12.5px; font-weight:600; white-space:nowrap; }
:root[data-theme="dark"] .rolechip{ background:#1b2544; color:#c7d2fe; border-color:#2a3a63; }

/* Rolwisselaar: de actieve-rol-chip is klikbaar en opent een lijst met alle
   rollen van de gebruiker, in lijn met de meldingen-dropdown en het palette. */
.roleswitch{ position:relative; }
.rolechip-btn{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-family:inherit; transition:background .15s,border-color .15s; }
.rolechip-btn:hover{ background:#e2e8ff; border-color:#c7d2fe; }
:root[data-theme="dark"] .rolechip-btn:hover{ background:#22305a; border-color:#38508c; }
.rolechip-btn:focus-visible{ outline:2px solid var(--navy-700); outline-offset:2px; }
.rolechip-mobicon{ display:none; font-size:13px; }
.rolechip-caret{ font-size:10px; opacity:.7; transition:transform .15s; }
.roleswitch.open .rolechip-caret{ transform:rotate(180deg); }
.roleswitch-pop{ position:absolute; right:0; top:calc(100% + 10px); width:280px; max-width:calc(100vw - 32px); background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); display:none; z-index:30; overflow:hidden; }
.roleswitch-pop::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
.roleswitch.open .roleswitch-pop{ display:block; }
.roleswitch-head{ padding:12px 14px; border-bottom:1px solid var(--line); font-size:13px; font-weight:600; }
.roleswitch-list{ max-height:360px; overflow-y:auto; padding:6px; }
.roleswitch-item{ display:flex; gap:10px; align-items:center; width:100%; text-align:left; padding:9px 10px; border:none; background:none; color:var(--ink); border-radius:8px; cursor:pointer; font-family:inherit; }
.roleswitch-item:hover{ background:var(--bg); }
.roleswitch-item:focus-visible{ outline:2px solid var(--navy-700); outline-offset:-2px; }
.roleswitch-item.active{ background:#eef2ff; }
:root[data-theme="dark"] .roleswitch-item.active{ background:#1b2544; }
.roleswitch-ic{ flex:none; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--bg); color:var(--navy); font-size:13px; }
:root[data-theme="dark"] .roleswitch-ic{ color:#c7d2fe; }
.roleswitch-body{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.roleswitch-name{ font-size:13px; font-weight:600; line-height:1.3; }
.roleswitch-sub{ font-size:11px; color:var(--muted); line-height:1.35; }
.roleswitch-check{ flex:none; color:var(--navy-700); font-size:12px; }
.usermenu{ position:relative; }
.avatar{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#0ea5e9,#6366f1); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; overflow:hidden; }
.avatar:hover{ text-decoration:none; }
.avatar.avatar-photo{ background:none; }
.avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.avatar-sm{ width:26px; height:26px; font-size:11px; }
.avatar-lg{ width:76px; height:76px; font-size:26px; }
/* Naam + avatar naast elkaar (tabellen, lijsten). */
.user-cell{ display:inline-flex; align-items:center; gap:8px; vertical-align:middle; }
/* Slotje in de topbar (scherm vergrendelen). */
.lock-btn{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--muted); cursor:pointer; font-size:14px; }
.lock-btn:hover{ color:var(--navy); border-color:#dbe3ff; background:#eef2ff; }
:root[data-theme="dark"] .lock-btn:hover{ color:#c7d2fe; background:#1b2544; border-color:#2a3a63; }
/* Vergrendelscherm. */
.lockscreen-user{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:22px; }
.lockscreen-user .avatar{ box-shadow:var(--shadow); }
.lockscreen-user .lock-name{ margin-top:12px; font-size:19px; font-weight:700; }
.lockscreen-user .lock-mail{ color:var(--muted); font-size:13px; margin-top:2px; }
.usermenu-pop{ position:absolute; right:0; top:calc(100% + 10px); background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:6px; min-width:170px; display:none; z-index:20; }
.usermenu-pop::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
.usermenu:hover .usermenu-pop, .usermenu:focus-within .usermenu-pop{ display:block; }
.usermenu-pop a, .usermenu-pop button{ display:block; width:100%; text-align:left; padding:9px 12px; border:none; background:none; color:var(--ink); font-size:13px; border-radius:7px; cursor:pointer; }
.usermenu-pop a:hover, .usermenu-pop button:hover{ background:var(--bg); text-decoration:none; }

/* Meldingen: belknop met teller + klik-dropdown (in lijn met de usermenu). */
.notif{ position:relative; }
.notif-bell{ position:relative; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:background .15s,border-color .15s; }
.notif-bell:hover{ background:var(--bg); border-color:#cbd5e1; }
.notif-bell:focus-visible{ outline:2px solid var(--navy-700); outline-offset:2px; }
.notif.open .notif-bell{ background:var(--bg); border-color:var(--navy-700); }
.notif-badge{ position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--red); color:#fff; font-size:10.5px; font-weight:700; line-height:17px; text-align:center; border:2px solid var(--panel); box-sizing:content-box; }
.notif-pop{ position:absolute; right:0; top:calc(100% + 10px); width:320px; max-width:calc(100vw - 32px); background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); display:none; z-index:30; overflow:hidden; }
.notif-pop::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
.notif.open .notif-pop{ display:block; }
.notif-pop-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line); font-size:13px; }
.notif-readall{ border:none; background:none; color:var(--navy-700); font-size:12px; font-weight:600; cursor:pointer; padding:0; }
.notif-readall:hover{ text-decoration:underline; }
.notif-list{ max-height:340px; overflow-y:auto; }
.notif-empty{ padding:22px 14px; text-align:center; font-size:13px; }
.notif-item{ display:flex; gap:9px; align-items:flex-start; padding:11px 14px; border-bottom:1px solid var(--line); color:var(--ink); }
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover{ background:var(--bg); text-decoration:none; }
.notif-item.unread{ background:#eff6ff; }
:root[data-theme="dark"] .notif-item.unread{ background:#16223f; }
.notif-dot{ flex:none; width:8px; height:8px; margin-top:5px; border-radius:50%; background:transparent; }
.notif-item.unread .notif-dot{ background:var(--navy-700); }
.notif-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.notif-item-title{ font-size:13px; font-weight:500; line-height:1.35; }
.notif-time{ font-size:11px; color:var(--muted); }
.notif-all{ display:block; text-align:center; padding:11px 14px; font-size:12.5px; font-weight:600; color:var(--navy-700); border-top:1px solid var(--line); background:var(--bg); }
.notif-all:hover{ text-decoration:none; background:var(--line); }

/* Hamburger + backdrop voor de mobiele zijbalk (alleen zichtbaar < 820px). */
.nav-toggle{ display:none; flex:0 0 auto; width:38px; height:38px; align-items:center; justify-content:center;
  background:var(--bg); border:1px solid var(--line); border-radius:9px; color:var(--ink); font-size:18px; line-height:1; cursor:pointer; }
.nav-toggle:hover{ background:var(--line); }
.nav-backdrop{ display:none; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:55; }

.content{ padding:24px 26px; }
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.h1{ font-size:20px; font-weight:700; } .sub{ color:var(--muted); font-size:13px; margin-top:3px; }

/* ---------- KPI + panels ---------- */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:20px 0; }
.kpi{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); }
.kpi .lab{ color:var(--muted); font-size:12.5px; display:flex; align-items:center; gap:8px; }
.kpi .val{ font-size:30px; font-weight:800; margin-top:8px; letter-spacing:-.5px; }
.kpi .dot{ width:9px; height:9px; border-radius:50%; } .kpi .trend{ font-size:11.5px; margin-top:6px; color:var(--muted); }
.grid{ display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; }
.panel h3{ font-size:14px; } .panel .ph{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.muted{ color:var(--muted); font-size:12px; }

.pill{ font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; display:inline-block; }
.pill.g{ background:#dcfce7; color:#15803d; } .pill.a{ background:#fef3c7; color:#b45309; }
.pill.r{ background:#fee2e2; color:#b91c1c; } .pill.b{ background:#e0f2fe; color:#0369a1; }
.tag{ display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; }
.tag-green{ background:#dcfce7; color:#15803d; } .tag-amber{ background:#fef3c7; color:#b45309; } .tag-blue{ background:#e0f2fe; color:#0369a1; }

/* ---------- Tabellen ---------- */
table{ width:100%; border-collapse:collapse; font-size:13px; }
th{ text-align:left; color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; padding:8px 10px; border-bottom:1px solid var(--line); }
td{ padding:11px 10px; border-bottom:1px solid var(--line); }
tr:last-child td{ border-bottom:none; }
.table-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.table-card table{ }
.table-card th, .table-card td{ padding:12px 16px; }
.row-actions{ text-align:right; white-space:nowrap; }
.row-actions form{ display:inline; }
.rag{ display:inline-flex; align-items:center; gap:7px; font-weight:600; }
.bar{ height:7px; background:var(--line); border-radius:99px; overflow:hidden; width:120px; display:inline-block; vertical-align:middle; }
.bar > i{ display:block; height:100%; border-radius:99px; }
.code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; color:var(--muted); overflow-wrap:anywhere; word-break:break-word; }
/* Lange commando's/URL's in <pre class="code"> (o.a. de updatepagina) breken af
   in plaats van de pagina horizontaal breder te maken dan het scherm. */
pre.code{ white-space:pre-wrap; word-break:break-word; }
.rag-split{ display:flex; height:16px; border-radius:99px; overflow:hidden; background:var(--line); }
.rag-split > i{ display:block; }

.hbars{ list-style:none; } .hbars li{ margin:12px 0; }
.hbars .row{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:5px; }
.hbars .track{ height:9px; background:var(--line); border-radius:99px; overflow:hidden; } .hbars .track > i{ display:block; height:100%; }
.ms{ list-style:none; } .ms li{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.ms li:last-child{ border:none; } .ms .d{ text-align:center; min-width:44px; }
.ms .d b{ display:block; font-size:16px; } .ms .d span{ font-size:10.5px; color:var(--muted); text-transform:uppercase; }
.ms .t{ font-size:13px; font-weight:600; } .ms .t span{ display:block; font-weight:400; color:var(--muted); font-size:11.5px; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:4px; } .field.full{ grid-column:1 / -1; }
label{ font-size:12.5px; font-weight:600; color:var(--ink); display:block; margin:0 0 7px; }
.inp, select, textarea{ width:100%; padding:10px 13px; border:1px solid var(--line); border-radius:10px; font-size:14px; background:var(--panel); color:var(--ink); font-family:inherit; }
textarea{ min-height:90px; resize:vertical; }
.inp:focus, select:focus, textarea:focus{ outline:none; border-color:var(--navy-700); box-shadow:0 0 0 3px rgba(29,78,216,.12); }
.btn{ display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:10px; font-size:13.5px; font-weight:600; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; }
.btn:hover{ text-decoration:none; background:var(--bg); }
.btn-primary{ background:var(--navy); border-color:var(--navy); color:#fff; } .btn-primary:hover{ background:var(--navy-700); }
.btn-danger{ background:var(--red); border-color:var(--red); color:#fff; } .btn-danger:hover{ opacity:.9; background:var(--red); }
.btn-block{ width:100%; justify-content:center; margin-top:22px; }
.btn-sm{ padding:6px 11px; font-size:12px; }
.link-btn{ background:none; border:none; color:var(--navy-700); cursor:pointer; font-size:13px; }
.toolbar{ display:flex; gap:10px; align-items:center; margin:18px 0; flex-wrap:wrap; }
.toolbar .spacer{ margin-left:auto; }

/* ---------- Alerts / toasts ---------- */
.alert{ padding:12px 15px; border-radius:10px; font-size:13px; margin-bottom:16px; border:1px solid; }
.alert-success{ background:#dcfce7; border-color:#bbf7d0; color:#166534; }
.alert-error{ background:#fee2e2; border-color:#fecaca; color:#991b1b; }
.alert-info{ background:#e0f2fe; border-color:#bae6fd; color:#075985; }
.toast{ position:fixed; top:18px; right:18px; padding:12px 16px; border-radius:10px; color:#fff; font-size:13px; box-shadow:var(--shadow); z-index:100; }
.toast-success{ background:var(--green); } .toast-error{ background:var(--red); } .toast-info{ background:var(--sky); }
.notice{ background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; border-radius:12px; padding:12px 15px; font-size:12.5px; margin-bottom:16px; display:flex; gap:10px; }

.pagination{ display:flex; gap:16px; align-items:center; justify-content:center; margin:20px 0; }

/* ---------- Tabs ---------- */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin:18px 0 20px; flex-wrap:wrap; }
.tab{ padding:10px 14px; font-size:13px; color:var(--muted); border-bottom:2px solid transparent; font-weight:600; cursor:pointer; background:none; border-top:none; border-left:none; border-right:none; }
.tab:hover{ color:var(--ink); text-decoration:none; }
.tab.active{ color:var(--navy); border-color:var(--navy); }
.tab.locked{ color:#cbd5e1; cursor:not-allowed; } .tab.locked::after{ content:"\f023"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:10px; margin-left:5px; }

/* ---------- Auth ---------- */
.auth-body{ min-height:100vh; }
.split{ display:grid; grid-template-columns:1.1fr .9fr; min-height:100vh; }
.promo{ background:linear-gradient(150deg,var(--sidebar),var(--navy) 55%,var(--sky)); color:#fff; padding:56px 60px; display:flex; flex-direction:column; }
.promo-logo{ width:52px;height:52px;border-radius:13px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;color:#fff; }
.promo-logo.center{ margin:0 auto 18px; }
.promo-logo-img{ background:#fff; padding:6px; overflow:hidden; }
.promo-logo-img img{ width:100%; height:100%; object-fit:contain; display:block; }
.promo h1{ font-size:34px; margin-top:auto; line-height:1.2; }
.promo p{ color:#c7d5f5; margin-top:16px; font-size:15px; max-width:420px; }
.promo ul{ margin-top:26px; list-style:none; display:flex; flex-direction:column; gap:11px; }
.promo li{ color:#dbe6ff; font-size:13.5px; } .promo li b{ color:#fff; }
.promo-brand{ margin-top:auto; }
.promo-brand h1{ margin-top:0; font-size:52px; letter-spacing:-.02em; font-weight:800; line-height:1.1; }
.promo-brand p{ margin-top:14px; max-width:380px; font-size:16px; color:#dbe6ff; }
.form-wrap{ display:flex; align-items:center; justify-content:center; padding:40px; }
.auth-card{ width:100%; max-width:380px; } .auth-card h2{ font-size:23px; } .auth-card .lead{ color:var(--muted); margin:7px 0 20px; font-size:13.5px; }
.auth-card label{ margin-top:16px; }
.sso{ margin-top:18px; padding:11px; border:1px solid var(--line); border-radius:10px; text-align:center; color:var(--muted); font-size:13px; font-weight:600; }
.auth-foot{ margin-top:24px; font-size:11.5px; color:var(--muted); text-align:center; }

.role-wrap{ max-width:720px; margin:6vh auto; padding:20px; }
.center{ text-align:center; } .lead{ color:var(--muted); font-size:14px; }
.role-wrap h1{ font-size:26px; margin-top:4px; } .role-wrap .lead{ margin:9px 0 30px; }
.roles{ display:grid; grid-template-columns:1fr 1fr; gap:16px; text-align:left; }
.role-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); display:flex; gap:15px; align-items:flex-start; cursor:pointer; text-align:left; font-family:inherit; color:var(--ink); }
.role-card:hover{ border-color:var(--navy-700); box-shadow:0 0 0 3px rgba(29,78,216,.12),var(--shadow); }
.role-ic{ width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;flex:none; }
.role-body{ display:block; } .role-name{ font-size:15px; font-weight:700; display:block; } .role-desc{ color:var(--muted); font-size:12.5px; margin:5px 0 8px; display:block; }
.hint{ margin-top:16px; color:var(--muted); font-size:12px; }

.error-page{ max-width:440px; margin:14vh auto; text-align:center; padding:20px; }
.error-code{ font-size:72px; font-weight:800; color:var(--navy); } .error-page h1{ font-size:22px; margin:6px 0; } .error-page p{ color:var(--muted); margin-bottom:22px; }

/* ---------- Meta blokken ---------- */
.meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px; }
.meta .b{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:13px 15px; box-shadow:var(--shadow); }
.meta .l{ color:var(--muted); font-size:11.5px; } .meta .v{ font-weight:700; margin-top:5px; font-size:14px; }
.badge{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; }

/* ---------- Modal (details/summary based) ---------- */
.modal{ margin:auto; border:none; border-radius:var(--radius); padding:0; max-width:560px; width:92%; box-shadow:0 20px 60px rgba(0,0,0,.3); background:var(--panel); color:var(--ink); }
.modal::backdrop{ background:rgba(15,23,42,.5); }
.modal .mhead{ padding:18px 20px; border-bottom:1px solid var(--line); font-weight:700; }
.modal .mbody{ padding:20px; } .modal .mfoot{ padding:16px 20px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; }

/* ---------- Handleiding (rol-handleiding) ---------- */
.callout-info{ background:color-mix(in srgb,var(--navy-700) 8%,var(--panel)); border:1px solid color-mix(in srgb,var(--navy-700) 22%,var(--line));
  border-radius:12px; padding:13px 16px; margin:16px 0; font-size:13px; color:var(--ink); line-height:1.5; }
.guide-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; align-items:start; }
.guide-card{ padding:20px; }
.guide-card-active{ border-color:var(--navy-700); box-shadow:0 0 0 3px rgba(29,78,216,.12),var(--shadow); }
.guide-subhead{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; margin:14px 0 8px; }
.guide-module{ margin-bottom:12px; }
.guide-module-head{ display:flex; align-items:center; gap:8px; font-size:13.5px; }
.guide-module-head .ic{ opacity:.8; }
.guide-list{ list-style:none; margin:4px 0 0 26px; padding:0; }
.guide-list li{ position:relative; padding:2px 0 2px 16px; font-size:13px; line-height:1.45; }
.guide-list li::before{ content:"\f105"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:0; color:var(--navy-700); }
.guide-limits{ margin-top:6px; border-top:1px dashed var(--line); padding-top:10px; }
.guide-limits .guide-list li::before{ content:"\f00d"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--red); }

/* ---------- Gebruikershandleiding (per onderdeel) ---------- */
.guide-doc{ display:grid; grid-template-columns:230px 1fr; gap:26px; align-items:start; margin-top:6px; }
.guide-toc{ position:sticky; top:76px; align-self:start; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; max-height:calc(100vh - 100px); overflow-y:auto; }
.guide-toc-head{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; margin:2px 4px 8px; }
.guide-toc nav{ display:flex; flex-direction:column; }
.guide-toc a{ display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px; color:var(--ink);
  font-size:13px; line-height:1.3; }
.guide-toc a:hover{ background:var(--bg); text-decoration:none; }
.guide-toc a .ic{ width:18px; text-align:center; opacity:.85; flex:none; }

.guide-main{ min-width:0; display:flex; flex-direction:column; gap:16px; }
.guide-role-summary{ border-left:3px solid var(--navy-700); }
.guide-chapter-head{ margin:10px 2px 2px; }
.guide-chapter-head h2{ font-size:16px; font-weight:700; }
.guide-chapter-head p{ margin-top:3px; }

.guide-section{ scroll-margin-top:76px; padding:20px 22px; }
.guide-section-head{ display:flex; align-items:center; gap:11px; }
.guide-section-ic{ width:36px; height:36px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:10px; font-size:18px; background:color-mix(in srgb,var(--navy-700) 10%,var(--panel));
  border:1px solid color-mix(in srgb,var(--navy-700) 18%,var(--line)); }
.guide-section-head h3{ font-size:16.5px; font-weight:700; }
.guide-anchor{ margin-left:auto; color:var(--muted); font-weight:700; opacity:0; transition:opacity .12s ease; }
.guide-section:hover .guide-anchor{ opacity:.7; }
.guide-anchor:hover{ text-decoration:none; opacity:1; }
.guide-lead{ margin:12px 0 0; color:var(--ink); font-size:13.5px; line-height:1.6; }

.guide-figure{ margin:16px 0 4px; }
/* Schaalt mee met de kolom (nooit breder dan de pagina) en begrenst de hoogte,
   zodat een hoge schermafbeelding (bv. het dashboard) niet de hele viewport
   vult. object-fit:contain houdt de verhouding intact — geen vervorming. */
.guide-figure img{ display:block; width:100%; height:auto; max-width:100%;
  max-height:min(72vh, 620px); object-fit:contain; object-position:top;
  border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); background:var(--bg); }
.guide-figure figcaption{ margin-top:8px; color:var(--muted); font-size:12px; line-height:1.5; }
@media (max-width: 820px){
  .guide-figure img{ max-height:none; }
}

.guide-feature-list{ list-style:none; margin:6px 0 0; padding:0; }
.guide-feature-list li{ position:relative; padding:5px 0 5px 20px; font-size:13.5px; line-height:1.5;
  border-bottom:1px solid var(--line); }
.guide-feature-list li:last-child{ border-bottom:none; }
.guide-feature-list li::before{ content:"\f105"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:2px; top:5px; color:var(--navy-700); }

.guide-steps{ margin:6px 0 0 20px; padding:0; }
.guide-steps li{ padding:4px 0 4px 4px; font-size:13.5px; line-height:1.5; }

.guide-tip{ display:flex; gap:11px; margin-top:16px; padding:12px 15px; border-radius:12px;
  background:color-mix(in srgb,var(--amber) 12%,var(--panel)); border:1px solid color-mix(in srgb,var(--amber) 34%,var(--line)); }
.guide-tip-ic{ flex:none; font-size:15px; line-height:1.4; }
.guide-tip p{ font-size:13px; line-height:1.5; color:var(--ink); }

.guide-access{ margin-top:16px; padding-top:12px; border-top:1px dashed var(--line); font-size:12.5px; color:var(--muted); line-height:1.5; }
.guide-access-label{ display:inline-block; font-weight:700; color:var(--ink); font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; margin-right:6px; }

@media (max-width: 1000px){
  .guide-doc{ grid-template-columns:1fr; }
  .guide-toc{ position:static; max-height:none; }
  .guide-toc nav{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .kpis{ grid-template-columns:repeat(2,1fr); } .grid,.grid3,.grid2{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; } .meta{ grid-template-columns:1fr 1fr; }
  .guide-grid{ grid-template-columns:1fr; }
}
@media (max-width: 820px){
  /* App wordt één kolom; de zijbalk schuift als paneel over de inhoud. */
  .app{ grid-template-columns:1fr; }
  .sidebar-collapsed .app{ grid-template-columns:1fr; }
  .side{
    position:fixed; top:0; left:0; width:264px; height:100vh; z-index:60;
    transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:0 10px 40px rgba(0,0,0,.35);
  }
  .nav-open .side{ transform:translateX(0); }
  .nav-open .nav-backdrop{ display:block; }
  /* In het uitschuifpaneel altijd de volledige labels tonen, ook wanneer de
     desktopvoorkeur "ingeklapt" is. */
  .sidebar-collapsed .side{ padding:20px 14px; }
  .sidebar-collapsed .side .brand{ justify-content:flex-start; padding:6px 8px 20px; }
  .sidebar-collapsed .side .brand > div{ display:block; }
  .sidebar-collapsed .side .nav-group{ display:block; }
  .sidebar-collapsed .side .nav a{ justify-content:flex-start; gap:11px; padding:9px 11px; font-size:13.5px; }
  .sidebar-collapsed .side .nav a .ic{ font-size:inherit; }
  /* De in-/uitklapknop onderin is niet zinvol op mobiel. */
  .side-foot{ display:none; }

  .nav-toggle{ display:inline-flex; }
  .top{ padding:10px 16px; gap:10px; }
  .crumbs{ display:none; }
  .search{ margin-left:12px; flex:1 1 auto; min-width:0; }
  .search input{ width:100%; }
  .content{ padding:18px 16px; }

  /* Tabellen niet afkappen maar horizontaal scrollbaar maken, zodat knoppen
     als "Bewerken" altijd bereikbaar blijven. */
  .table-card{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table-card table{ min-width:620px; }

  .split{ grid-template-columns:1fr; } .promo{ display:none; } .roles{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  /* Alleen de statische rol-badge (gebruikers met één rol) verbergen; de
     rolwissel-knop blijft bereikbaar, maar wordt een compacte icoon-knop. */
  span.rolechip{ display:none; }
  .rolechip-btn{ padding:8px 11px; gap:0; }
  .rolechip-btn .rolechip-label{ display:none; }
  .rolechip-mobicon{ display:inline-flex; }
  .rolechip-btn .rolechip-caret{ display:none; }
  /* Dropdowns in de topbar (rolwissel + meldingen) hangen normaal rechts onder
     hun knop. Op mobiel staat die knop midden in de balk, waardoor een naar
     links uitklappend paneel deels buiten beeld valt. Daarom worden het hier
     vaste, schermbrede panelen die netjes onder de topbar aansluiten. */
  .roleswitch-pop, .notif-pop{ position:fixed; left:12px; right:12px; top:66px; width:auto; max-width:none; }
  /* Loginscherm: minder padding zodat de kaart nooit buiten beeld valt. */
  .form-wrap{ padding:24px 18px; }
  .page-head{ gap:12px; }
  .page-head .btn{ width:100%; justify-content:center; }
  .toolbar{ gap:8px; }
}
/* Tabellen met .stack worden op smalle schermen kaarten in plaats van
   horizontaal te scrollen. Zo staat elke actieknop (Bewerken/Blokkeren)
   altijd volledig in beeld en goed aan te tikken — ook op iOS. */
@media (max-width: 640px){
  .table-card.stack{ background:transparent; border:none; box-shadow:none; overflow:visible; }
  .table-card.stack table{ min-width:0; }
  .table-card.stack thead{ display:none; }
  .table-card.stack tbody, .table-card.stack tr, .table-card.stack td{ display:block; width:100%; }
  .table-card.stack tr{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:4px 4px 8px; margin-bottom:14px; }
  .table-card.stack td{ text-align:left; padding:8px 14px; border-bottom:1px solid var(--line); }
  .table-card.stack tr td:last-child{ border-bottom:none; }
  .table-card.stack td[data-label]::before{ content:attr(data-label); display:block; margin-bottom:3px;
    font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
  /* Actierij: knoppen onder elkaar, volledige breedte. */
  .table-card.stack td.row-actions{ display:flex; flex-direction:column; gap:8px; padding:12px 14px; white-space:normal; }
  .table-card.stack td.row-actions form{ display:block; }
  .table-card.stack td.row-actions .btn{ width:100%; justify-content:center; padding:11px 16px; font-size:13.5px; }
  .table-card.stack td[colspan]{ text-align:center; }
}

/* ---------- Authenticatie: passkeys / SSO / 2FA ---------- */
.auth-divider{ display:flex; align-items:center; text-align:center; color:var(--muted); font-size:12px; margin:18px 0 2px; }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.auth-divider span{ padding:0 12px; }
.auth-alt{ background:var(--panel); border:1px solid var(--line); color:var(--ink); font-weight:600; }
.auth-alt:hover{ background:var(--bg); }
.auth-alt-error{ margin-top:10px; padding:9px 12px; border-radius:9px; font-size:13px;
  background:color-mix(in srgb,var(--red) 10%,var(--panel)); border:1px solid color-mix(in srgb,var(--red) 30%,var(--line)); color:var(--red); }
.auth-alt-ok{ margin-top:10px; padding:9px 12px; border-radius:9px; font-size:13px;
  background:color-mix(in srgb,var(--green) 12%,var(--panel)); border:1px solid color-mix(in srgb,var(--green) 30%,var(--line)); color:var(--green); }
.passkey-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); }

/* ---------- Command palette (⌘-K) ---------- */
.cmdk-trigger{ display:inline-flex; align-items:center; gap:2px; background:var(--bg); border:1px solid var(--line);
  border-radius:8px; padding:6px 10px; font-size:12px; font-weight:700; color:var(--muted); cursor:pointer; white-space:nowrap; }
.cmdk-trigger:hover{ color:var(--ink); border-color:var(--navy-700); }
.cmdk-trigger span{ font-size:13px; }
.cmdk[hidden]{ display:none; }
.cmdk{ position:fixed; inset:0; z-index:100; display:flex; align-items:flex-start; justify-content:center; }
.cmdk-backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(2px); }
.cmdk-panel{ position:relative; margin-top:12vh; width:min(620px,92vw); background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; }
.cmdk-input{ border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink);
  font-size:16px; padding:16px 18px; outline:none; width:100%; }
.cmdk-list{ list-style:none; margin:0; padding:6px; overflow-y:auto; max-height:52vh; }
.cmdk-item{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px; cursor:pointer; }
.cmdk-item.active{ background:color-mix(in srgb,var(--navy-700) 12%,var(--panel)); }
.cmdk-ic{ width:22px; text-align:center; font-size:15px; flex:0 0 auto; }
.cmdk-text{ display:flex; flex-direction:column; min-width:0; }
.cmdk-label{ color:var(--ink); font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk-sub{ color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk-empty{ padding:18px 14px; color:var(--muted); font-size:13.5px; text-align:center; }
.cmdk-foot{ display:flex; gap:16px; padding:9px 16px; border-top:1px solid var(--line); color:var(--muted); font-size:11.5px; }
.cmdk-foot kbd, .shortcuts kbd{ font:inherit; font-size:11px; background:var(--bg); border:1px solid var(--line);
  border-radius:5px; padding:1px 6px; margin:0 1px; color:var(--ink); }
html.cmdk-active{ overflow:hidden; }

/* ---------- Sneltoetsen-overlay ---------- */
.shortcuts{ border:1px solid var(--line); border-radius:var(--radius); padding:0; background:var(--panel);
  color:var(--ink); box-shadow:var(--shadow); width:min(460px,92vw); }
.shortcuts::backdrop{ background:rgba(15,23,42,.45); }
.shortcuts-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); }
.shortcuts-head h3{ margin:0; font-size:16px; }
.shortcuts-grid{ display:grid; grid-template-columns:auto 1fr; gap:10px 16px; padding:16px 18px; font-size:13.5px; align-items:center; }
.shortcuts-grid > div:nth-child(odd){ white-space:nowrap; color:var(--muted); }

/* ---------- Formulier: checkbox-rij ---------- */
.check-row{ display:flex; align-items:flex-start; gap:10px; padding:7px 0; font-size:13.5px; cursor:pointer; }
.check-row input{ margin-top:2px; flex:0 0 auto; }

@media (max-width:820px){ .cmdk-trigger{ display:none; } }

/* ---------- Opgeslagen filters ---------- */
.saved-filters{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:-6px 0 16px; }
.saved-filters-label{ font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.sf-chip{ display:inline-flex; align-items:center; gap:4px; background:var(--panel); border:1px solid var(--line);
  border-radius:999px; padding:3px 4px 3px 12px; font-size:12.5px; }
.sf-chip.active{ border-color:var(--navy-700); background:color-mix(in srgb,var(--navy-700) 10%,var(--panel)); }
.sf-chip a{ color:var(--ink); font-weight:600; }
.sf-chip a:hover{ text-decoration:none; color:var(--navy-700); }
.sf-chip form{ display:inline; }
.sf-del{ border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:15px; line-height:1; padding:0 4px; border-radius:999px; }
.sf-del:hover{ color:var(--red); }
.sf-save{ padding:5px 11px; font-size:12.5px; }
.sf-dialog{ border:1px solid var(--line); border-radius:var(--radius); padding:20px; background:var(--panel);
  color:var(--ink); box-shadow:var(--shadow); width:min(380px,92vw); }
.sf-dialog::backdrop{ background:rgba(15,23,42,.45); }

/* ---------- Bulk-acties op lijstpagina's ---------- */
.bulk-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px; padding:10px 14px;
  background:color-mix(in srgb,var(--navy-700) 8%,var(--panel)); border:1px solid var(--line); border-radius:12px; }
.bulk-count{ font-size:13px; color:var(--muted); }
.bulk-count b{ color:var(--ink); }
.bulk-ops{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
th.chk, td.chk{ width:34px; text-align:center; padding-left:6px; padding-right:0; }
th.chk input, td.chk input{ cursor:pointer; }

/* ---------- @-vermeldingen in notities ---------- */
.mention{ color:var(--navy-700); font-weight:600; background:color-mix(in srgb,var(--navy-700) 10%,transparent); border-radius:4px; padding:0 3px; }

/* ---------- Onboarding / welkom (per rol) ---------- */
.onb{ max-width:960px; margin:0 auto; }
.onb-hero{ display:flex; gap:20px; align-items:flex-start; padding:26px 28px; border-radius:var(--radius);
  background:linear-gradient(135deg, color-mix(in srgb,var(--onb-accent) 16%,var(--panel)), var(--panel) 70%);
  border:1px solid color-mix(in srgb,var(--onb-accent) 26%,var(--line)); box-shadow:var(--shadow); }
.onb-hero-ic{ flex:0 0 auto; width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:26px; color:#fff; background:var(--onb-accent); box-shadow:0 6px 18px color-mix(in srgb,var(--onb-accent) 45%,transparent); }
.onb-hero-kicker{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--onb-accent); }
.onb-hero-title{ font-size:23px; font-weight:800; margin:3px 0 8px; line-height:1.2; }
.onb-hero-intro{ font-size:14.5px; line-height:1.55; color:var(--ink); max-width:64ch; }
.onb-hero-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.onb-hero-tags .tag i{ margin-right:3px; }

.onb-block{ margin-top:26px; }
.onb-block-head h2{ font-size:16.5px; font-weight:700; display:flex; align-items:center; gap:9px; }
.onb-block-head h2 i{ color:var(--onb-accent); font-size:15px; }
.onb-block-head p{ margin:4px 0 14px; }

.onb-steps{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.onb-step{ position:relative; display:flex; gap:14px; align-items:flex-start; padding:16px 18px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.onb-step-num{ position:absolute; top:-9px; left:-9px; width:24px; height:24px; border-radius:50%; background:var(--onb-accent);
  color:#fff; font-size:12.5px; font-weight:800; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--panel); }
.onb-step-ic{ flex:0 0 auto; width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:17px; color:var(--onb-accent); background:color-mix(in srgb,var(--onb-accent) 12%,var(--panel));
  border:1px solid color-mix(in srgb,var(--onb-accent) 22%,var(--line)); }
.onb-step-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.onb-step-title{ font-weight:700; font-size:14.5px; }
.onb-step-desc{ font-size:13px; line-height:1.5; color:var(--muted); }
.onb-step-cta{ margin-top:7px; font-size:13px; font-weight:600; color:var(--onb-accent); display:inline-flex; align-items:center; gap:6px; }
.onb-step-cta i{ font-size:11px; transition:transform .15s; }
.onb-step-cta:hover{ text-decoration:none; } .onb-step-cta:hover i{ transform:translateX(3px); }

.onb-explore{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.onb-explore-card{ display:flex; flex-direction:column; gap:5px; padding:16px; border-radius:var(--radius);
  background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); color:var(--ink); }
.onb-explore-card:hover{ text-decoration:none; border-color:color-mix(in srgb,var(--onb-accent) 45%,var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--onb-accent) 14%,transparent),var(--shadow); }
.onb-explore-ic{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--onb-accent); background:color-mix(in srgb,var(--onb-accent) 12%,var(--panel)); }
.onb-explore-title{ font-weight:700; font-size:14px; margin-top:4px; }
.onb-explore-desc{ font-size:12.5px; line-height:1.45; }

.onb-tips{ display:flex; gap:12px; margin-top:26px; padding:15px 18px; border-radius:var(--radius);
  background:color-mix(in srgb,var(--amber) 12%,var(--panel)); border:1px solid color-mix(in srgb,var(--amber) 34%,var(--line)); }
.onb-tips-ic{ flex:none; font-size:16px; color:var(--amber); }
.onb-tips-head{ font-weight:700; font-size:13px; margin-bottom:4px; }
.onb-tips p{ font-size:13px; line-height:1.5; color:var(--ink); }
.onb-tips p + p{ margin-top:5px; }

.onb-foot{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin:28px 0 8px; padding-top:22px; border-top:1px solid var(--line); }
.onb-foot-links{ display:flex; gap:18px; flex-wrap:wrap; }
.onb-foot-links a{ font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:7px; color:var(--muted); }
.onb-foot-links a:hover{ color:var(--navy-700); text-decoration:none; }

/* Welkomstbanner (dashboard/eerste scherm) */
.onb-banner{ display:flex; align-items:center; gap:16px; margin:0 0 18px; padding:16px 20px; border-radius:var(--radius);
  background:linear-gradient(135deg, color-mix(in srgb,var(--onb-accent) 16%,var(--panel)), var(--panel) 72%);
  border:1px solid color-mix(in srgb,var(--onb-accent) 26%,var(--line)); box-shadow:var(--shadow); }
.onb-banner-ic{ flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:19px; color:#fff; background:var(--onb-accent); }
.onb-banner-body{ min-width:0; flex:1 1 auto; }
.onb-banner-title{ font-weight:700; font-size:14.5px; }
.onb-banner-text{ font-size:12.5px; color:var(--muted); line-height:1.45; margin-top:2px; }
.onb-banner-actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.onb-banner-dismiss{ border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; font-weight:600; padding:6px 8px; border-radius:8px; }
.onb-banner-dismiss:hover{ color:var(--ink); background:color-mix(in srgb,var(--onb-accent) 10%,transparent); }

@media (max-width: 760px){
  .onb-explore{ grid-template-columns:1fr; }
  .onb-hero{ flex-direction:column; gap:14px; padding:20px; }
  .onb-banner{ flex-wrap:wrap; }
  .onb-banner-actions{ width:100%; justify-content:flex-end; }
}

/* ---- Kanban-bord ------------------------------------------------------- */
.kanban{ display:flex; gap:14px; align-items:flex-start; overflow-x:auto; padding:4px 2px 12px; }
.kb-col{ flex:0 0 288px; width:288px; background:var(--bg); border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; max-height:72vh; }
.kb-col-head{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); border-radius:12px 12px 0 0; }
.kb-col-title{ font-weight:700; font-size:13px; color:var(--ink); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kb-col-count{ font-size:11px; font-weight:700; color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:1px 8px; }
.kb-col-count.over{ background:#fee2e2; color:#b91c1c; border-color:#fecaca; }
.kb-col-tools{ display:inline-flex; gap:2px; }
.kb-col-body{ padding:10px; display:flex; flex-direction:column; gap:9px; overflow-y:auto; min-height:60px; flex:1; }
.kb-col-body.dragover{ background:color-mix(in srgb, var(--navy) 8%, transparent); outline:2px dashed var(--navy-700); outline-offset:-4px; border-radius:0 0 12px 12px; }
.kb-card{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 11px; box-shadow:0 1px 2px rgba(15,23,42,.05); cursor:grab; }
.kb-card:active{ cursor:grabbing; }
.kb-card.dragging{ opacity:.45; }
.kb-card-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.kb-tag-link{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:#eef2ff; color:var(--navy); }
.kb-card-title{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.35; }
.kb-card-desc{ font-size:12px; color:var(--muted); margin-top:5px; white-space:normal; }
.kb-card-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:8px; font-size:11.5px; color:var(--muted); }
.kb-card-meta .kb-card-tools{ margin-left:auto; display:inline-flex; gap:4px; }
.kb-link{ background:none; border:none; padding:0; margin:0; font:inherit; color:var(--navy-700); font-weight:600; cursor:pointer; text-align:left; }
.kb-link:hover{ text-decoration:underline; }
@media (max-width: 760px){
  .kb-col{ flex-basis:82vw; width:82vw; }
}