/*!
 * beheer.css — Gedeelde styles voor admin.php (kantoor-beheer) + admin.vorio.nl/index.php (superadmin)
 * Versie 1.0 �
 * Merge van admin-app.css + superadmin.css.
 * Vereist: vorio-base.css (laden vóór dit bestand).
 */

/*    admin.php — Kantoor-beheer panelen
 */

/* iOS Safari schaalt tekst in tabellen automatisch op als kolommen smal zijn —
   die "Boost" hier expliciet uitschakelen. Voorkomt dat dossier-nrs op mobiel
   plotseling op 22-28px gerenderd worden. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }

html[data-theme="light"]{
 --accent:#1a6bdc; --accent2:#1558c0; --accent-light:#e8f4fc; --grad:linear-gradient(135deg,#1558c0,#1a6bdc);
 --bg:#f0f4f8; --bg2:#fff; --bg3:#f8fafc; --bg4:#f1f5f9;
 --border:#e2e8f0; --border2:#d0d7e2;
 --text1:#1a1a2e; --text2:#475569; --text3:#64748b;
 --red:#b91c1c; --red-light:#fef2f2; --red-border:#f5c6c2; --red-text:#7f1d1d;
 --amber:#d97706; --amber-light:#fffbeb;
 --green:#15803d; --green-light:#f0fdf4;
 --purple:#7c3aed; --purple-light:#f5f3ff;
 --goud:#c8a96e; --goud2:#8b7345; --goud-light:#faf5ec;
  --r:10px; --shadow:0 1px 4px rgba(0,0,0,.06);
  --font:'DM Sans',system-ui,sans-serif;
  --mono:'DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text1);min-height:100vh}

/* ── LOGIN ── */
#loginScreen{position:fixed;inset:0;background:linear-gradient(135deg,#0f172a,#1e293b);display:flex;align-items:center;justify-content:center;z-index:9999}
#loginScreen::before{display:none}
.login-box{background:#fff;border:none;border-radius:16px;padding:40px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.3);position:relative;z-index:1}
.login-logo{width:120px;height:80px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;overflow:hidden;padding:12px;border-radius:12px;border:1.5px solid var(--border);background:var(--bg)}
.login-logo img{max-width:100%;max-height:100%;object-fit:contain}
.login-field{margin-bottom:14px}
.login-field label{display:block;font-size:12px;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.3px;margin-bottom:5px}
.login-field input{width:100%;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13.5px;font-family:var(--font);color:var(--text1);background:#fff;outline:none;transition:border .15s}
.login-field input:focus{border-color:var(--accent,#1a6bdc);box-shadow:0 0 0 3px rgba(26,107,220,.1)}
.login-btn{width:100%;padding:11px;background:var(--accent,#1a6bdc);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:filter .15s;font-family:var(--font);margin-top:6px}
.login-btn:hover{filter:brightness(1.1)}
.login-btn:hover{opacity:.92}
.login-btn:active{transform:scale(.99)}
.login-err{background:rgba(220,53,69,.08);border:1px solid rgba(220,53,69,.25);border-radius:7px;padding:9px 12px;font-size:12.5px;color:#c0392b;margin-bottom:12px;display:none}

/* ── LAYOUT ── */
#app{display:none}
.topbar{background:var(--bg2);border-bottom:1.5px solid var(--border);height:56px;display:flex;align-items:center;padding:0 24px;gap:14px;position:sticky;top:0;z-index:100}
.topbar-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.btn-logout{background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:7px 14px;font-size:12.5px;font-family:var(--font);cursor:pointer;transition:all .15s;width:100%}
.btn-logout:hover{background:rgba(255,255,255,.12);color:#fff}

.layout{display:block;min-height:100vh}
.sidebar{width:230px;background:#0f172a;color:#fff;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;border-right:none;display:flex;flex-direction:column}

body.sa-collapsed nav.sidebar,body.sa-collapsed aside.sidebar{width:56px!important;transition:width .15s ease!important;overflow-x:hidden!important}
body.sa-collapsed .main{margin-left:56px!important;transition:margin-left .15s ease}
body.sa-collapsed .sb-link{font-size:0!important;padding-left:0!important;padding-right:0!important;justify-content:center!important;gap:0!important;white-space:nowrap;overflow:hidden}
body.sa-collapsed .sb-link>svg{font-size:initial}
body.sa-collapsed .sb-link>span,body.sa-collapsed .sb-link [style*=background]{display:none!important}
body.sa-collapsed .sb-sec{font-size:0!important;padding:4px 0!important;letter-spacing:0!important;height:8px!important}
body.sa-collapsed nav.sidebar > .sb-logo,body.sa-collapsed aside.sidebar > .sb-logo{justify-content:center!important;padding:8px!important;gap:0!important}
body.sa-collapsed .sb-logo-btn{display:none!important}
/* Toggle naast logo — zelfde stijl als sb-link svg (wit-transparant tile, geen accent) */
.sb-logo{display:flex;align-items:center;gap:8px}
.sa-rail-toggle{border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:inherit;color:#fff}
.sa-rail-toggle svg{flex-shrink:0;opacity:.92;box-sizing:content-box;padding:5px;background:rgba(255,255,255,.10);border-radius:7px;color:#fff;transition:background .12s}
.sa-rail-toggle:hover svg{background:rgba(255,255,255,.16);opacity:1}
/* Verberg toggle in instellingen-panel (sidebar krimpt daar al automatisch via .sa-rail). */
/* Verberg toggle in instellingen-panel (sidebar krimpt daar al automatisch via .sa-rail). */
body.sa-rail .sa-rail-toggle{display:none!important}

/* Admin sidebar collapse — hergebruikt exact dezelfde regels als bestaande .adm-rail
   (auto-collapse op instellingen-panel) zodat beide modes 1:1 hetzelfde ogen. */
.adm-rail-toggle{border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:inherit;color:#fff}
.adm-rail-toggle svg{flex-shrink:0;opacity:.92;box-sizing:content-box;padding:5px;background:rgba(255,255,255,.10);border-radius:7px;color:#fff;transition:background .12s}
.adm-rail-toggle:hover svg{background:rgba(255,255,255,.16);opacity:1}
body.adm-collapsed nav.sidebar,body.adm-collapsed aside.sidebar{width:52px!important;overflow:visible!important;transition:width .15s ease!important}
body.adm-collapsed .main{margin-left:52px!important;transition:margin-left .15s ease}
body.adm-collapsed .sidebar .nav-item{justify-content:center!important;padding:6px 0!important;margin:3px 8px!important;gap:0!important;font-size:0!important;position:relative;overflow:visible}
body.adm-collapsed .sidebar .nav-item > *{display:none!important}
body.adm-collapsed .sidebar .nav-item > svg,body.adm-collapsed .sidebar .nav-item > .ntf-svg-wrap,body.adm-collapsed .sidebar .nav-item > .nav-icon{display:block!important;margin:0 auto!important}
body.adm-collapsed .sidebar .nav-item svg{width:15px!important;height:15px!important;padding:5px!important;background:rgba(255,255,255,.08)!important;border-radius:9px!important;box-sizing:content-box!important}
body.adm-collapsed .sidebar .nav-item.active svg{background:#1a6bdc!important;box-shadow:none!important}
body.adm-collapsed .sidebar .nav-item:hover svg{background:rgba(255,255,255,.16)!important}
body.adm-collapsed .sidebar .nav-section,body.adm-collapsed .sidebar .nav-sub-groep{display:none!important}
body.adm-collapsed nav.sidebar > .sb-logo,body.adm-collapsed aside.sidebar > .sb-logo{padding:8px!important;justify-content:center!important;gap:0!important}
body.adm-collapsed .sb-logo-btn{display:none!important}
body.adm-collapsed .sidebar .nav-item.nav-item-help{font-size:0!important;padding:6px 0!important;margin:auto 8px 22px!important;gap:0!important;justify-content:center!important}
body.adm-collapsed .sidebar .nav-item.nav-item-help svg{width:15px!important;height:15px!important;padding:5px!important;background:rgba(255,255,255,.08)!important;border-radius:9px!important;color:#fff!important;opacity:1!important;box-sizing:content-box!important}
/* Op instellingen-pagina (.adm-rail) tonen we alleen de toggle (logo verbergen) */
body.adm-rail .sb-logo-btn{display:none!important}
body.adm-rail nav.sidebar > .sb-logo,body.adm-rail aside.sidebar > .sb-logo{padding:8px 0!important;justify-content:center!important;gap:0!important}
/* Admin user-pill onderaan sidebar (zelfde patroon als portaal) */
.adm-sb-bottom{margin-top:auto;padding:8px 10px 12px;border-top:none;flex-shrink:0}
.adm-sb-bottom .user-pill{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.08);cursor:pointer;transition:background .15s;user-select:none;color:#fff}
.adm-sb-bottom .user-pill:hover{background:rgba(255,255,255,.14)}
.adm-sb-bottom .user-av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;letter-spacing:.5px;flex-shrink:0;overflow:hidden}
.adm-sb-bottom .user-av img{width:100%;height:100%;object-fit:cover}
.adm-sb-bottom .user-name{font-size:12.5px;font-weight:600;color:#fff;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-sb-bottom .user-role{font-size:10.5px;color:rgba(255,255,255,.55);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-sb-bottom .chevron{margin-left:auto;font-size:10px;color:rgba(255,255,255,.4)}
/* Collapsed: alleen avatar zichtbaar */
body.adm-collapsed .adm-sb-bottom .user-pill{padding:0!important;background:transparent!important;justify-content:center!important;gap:0!important}
body.adm-collapsed .adm-sb-bottom .user-pill:hover{background:transparent!important}
body.adm-collapsed .adm-sb-bottom .user-pill > *{display:none!important}
body.adm-collapsed .adm-sb-bottom .user-pill > .user-av{display:flex!important;width:34px!important;height:34px!important}
body.adm-collapsed .adm-sb-bottom{padding:8px 0!important;display:flex;justify-content:center}
body.adm-rail .adm-sb-bottom .user-pill{padding:0!important;background:transparent!important;justify-content:center!important;gap:0!important}
body.adm-rail .adm-sb-bottom .user-pill > *{display:none!important}
body.adm-rail .adm-sb-bottom .user-pill > .user-av{display:flex!important}
.nav-section{padding:9px 12px 4px;font-size:9px;font-weight:700;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:1.4px;margin-top:2px}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:0 10px;border-radius:9px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.84);cursor:pointer;transition:all .15s;border-left:none;user-select:none;background:none;border-top:none;border-right:none;border-bottom:none;width:auto;text-align:left;font-family:var(--font)}
.nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
.nav-item.active{background:rgba(26,107,220,.10);color:#fff;border-left-color:transparent;font-weight:700}
.nav-item svg{flex-shrink:0;opacity:.92;transition:all .15s;box-sizing:content-box;padding:5px;background:rgba(255,255,255,.10);border-radius:7px;color:#fff}
.nav-item:hover svg{background:rgba(255,255,255,.16)}
.nav-item.active svg{opacity:1;background:#1a6bdc;color:#fff;box-shadow:0 4px 12px rgba(26,107,220,.35)}
.nav-sub-groep{display:none;border-left:2px solid rgba(255,255,255,.1);margin:2px 0 4px 30px}
.nav-sub-groep.zichtbaar{display:block}
.nav-sub{display:flex;align-items:center;gap:7px;padding:6px 12px;font-size:13px;font-weight:600;color:rgba(255,255,255,.5);cursor:pointer;transition:all .12s;user-select:none;background:none;border:none;width:100%;text-align:left;font-family:var(--font)}
.nav-sub:hover{color:rgba(255,255,255,.85);background:rgba(255,255,255,.05)}
.nav-sub.active{color:#60b4f4;background:rgba(26,107,220,.1);font-weight:600}

.main{flex:1;padding:24px;overflow-x:hidden}
.panel{display:none}
.panel.active{display:block}

/* ── COCKPIT KPIs ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:24px}
.kpi{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.kpi-val{font-size:28px;font-weight:700;line-height:1;margin-bottom:4px}
.kpi.blauw .kpi-val{color:var(--accent)}
.kpi.groen .kpi-val{color:var(--green)}
.kpi.rood .kpi-val{color:var(--red)}
.kpi.amber .kpi-val{color:var(--amber)}
.kpi.paars .kpi-val{color:var(--purple)}

/* ── SECTION HEADER ── */
.sectie-hoofd{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.sectie-hoofd h2{font-size:15px;font-weight:700;flex:1;letter-spacing:-.2px;margin:0}
.sectie-hoofd .count{font-size:11.5px;color:#64748b;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px;padding:2px 9px;font-weight:600}

/* ── TABEL ── */
.admin-tabel{width:100%;border-collapse:collapse;background:var(--bg2);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--border)}
.tabel-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.td-sub{font-size:11px;color:var(--text3);margin-top:1px}
.admin-tabel thead tr{background:var(--bg4);border-bottom:2px solid var(--border2)}
.admin-tabel th{padding:9px 12px;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;text-align:left;white-space:nowrap}
.admin-tabel td{padding:9px 12px;font-size:12.5px;border-bottom:1px solid var(--border);vertical-align:top}
.admin-tabel tbody tr:last-child td{border-bottom:none}
.admin-tabel tbody tr:hover td{background:var(--bg3)}
.admin-tabel .nr{font-size:12.5px;font-weight:600}
.admin-tabel .dim{color:var(--text3);font-size:11px}

/* ── BADGES ── */
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;white-space:nowrap}
.badge.groen,.badge-groen{background:var(--green-light);color:var(--green);border:1px solid var(--green)}
.badge.amber,.badge-amber{background:var(--amber-light);color:var(--amber);border:1px solid var(--amber)}
.badge.rood,.badge-rood{background:var(--red-light);color:var(--red);border:1px solid var(--red-border)}
.badge.blauw,.badge-blauw{background:var(--accent-light);color:var(--accent);border:1px solid var(--accent)}
.badge.grijs,.badge-grijs{background:var(--bg3);color:var(--text3);border:1px solid var(--border)}
.badge.paars{background:#f5f3ff;color:#7c3aed}
.badge.goud{background:#fef9e7;color:#b8860b}

/* ── DEBITEUR STATUS POPUP ── */
.deb-status-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:none;padding:0;cursor:pointer;font-family:var(--font)}
.deb-status-btn:hover .badge{opacity:.85;transform:scale(1.03)}
.deb-status-popup{position:fixed;z-index:800;background:#fff;border:1px solid var(--border2);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.13);padding:6px;min-width:170px;display:none}
.deb-status-popup.open{display:block}
.deb-status-popup button{display:flex;align-items:center;gap:7px;width:100%;padding:7px 10px;border:none;background:none;font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;border-radius:6px;text-align:left;transition:background .1s;color:var(--text1)}
.deb-status-popup button:hover{background:var(--bg3)}
.deb-status-popup button .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.deb-status-popup hr{border:none;border-top:1px solid var(--border);margin:4px 0}

/* ── KNOPPEN ── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;border-radius:8px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;font-family:var(--font)}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent2)}
.btn-ghost{background:var(--bg3);color:var(--text2);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg4);color:var(--text1)}
.btn-danger{background:transparent;color:var(--red);border:1px solid #fecaca}.btn-danger:hover{background:var(--red-light)}
.btn-sm{padding:7px 12px;font-size:12px;border-radius:6px;min-height:32px;box-sizing:border-box}
.btn-danger-solid,.btn-rood{background:var(--red);color:#fff;border:none}.btn-danger-solid:hover,.btn-rood:hover{filter:brightness(1.1)}
.btn-groen{background:var(--green);color:#fff;border:none}.btn-groen:hover{filter:brightness(1.1)}
.btn-amber{background:var(--amber);color:#fff;border:none}.btn-amber:hover{filter:brightness(1.1)}
/* Backwards-compat aliassen */
.btn-primary{background:var(--accent);color:#fff;border:none}.btn-primary:hover{filter:brightness(1.1)}

/* ── ZOEK / FILTER BAR ── */
.filter-bar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.filter-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 13px;border-radius:20px;border:1.5px solid var(--border2);background:var(--bg2);color:var(--text2);font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;transition:all .15s;white-space:nowrap}
.filter-btn:hover{border-color:var(--goud);color:var(--goud2);background:var(--goud-light)}
.filter-btn.active{background:var(--goud-light);color:var(--goud2);border-color:var(--goud);font-weight:600}
.filter-bar input,.filter-bar select{padding:7px 11px;border:1.5px solid var(--border2);border-radius:8px;font-size:12.5px;font-family:var(--font);background:var(--bg2);color:var(--text1);outline:none;transition:border .15s}
.filter-bar input:focus,.filter-bar select:focus{border-color:var(--accent)}
.filter-bar input{min-width:240px}

/* ── Instellingen sub-nav (super-stijl: H1 buiten card + filled cards) ── */
.inst-page-h1{font-size:20px;font-weight:800;color:var(--text1);letter-spacing:-.3px;margin:0 0 3px}
.inst-shell{display:flex;gap:24px;align-items:flex-start;margin-top:14px;min-height:calc(100vh - 200px)}
.inst-trigger,.inst-bd,.inst-drawer-head{display:none}
.inst-subnav{width:220px;flex-shrink:0;position:sticky;top:14px}
.inst-sub-sec{font-size:10.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1.2px;padding:14px 10px 6px}
.inst-sub-item{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:8px;cursor:pointer;color:var(--text2);font-size:13px;font-weight:500;text-decoration:none;transition:background .15s,color .15s}
.inst-sub-ic{width:13px;height:13px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.inst-sub-ic.is-filled{fill:currentColor;stroke:none}
.inst-sub-item.actief .inst-sub-ic{opacity:1}
.inst-sub-item:hover{background:var(--bg2);color:var(--text1)}
.inst-sub-item.actief{background:color-mix(in srgb, var(--p) 14%, transparent);color:var(--p);font-weight:700}
.inst-content{flex:1;min-width:0}
.inst-sec{display:none}
.inst-sec.actief{display:block}
.inst-sec-hoofd{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.inst-sec-h2{font-size:17px;font-weight:700;color:var(--text1);letter-spacing:-.2px;margin:0;flex:1}
.inst-sec-hoofd .count{font-size:11px;color:var(--text3);background:var(--bg3);border:1px solid var(--border);border-radius:99px;padding:2px 9px;font-weight:600}
.inst-sec-sub{font-size:13px;color:var(--text3);margin:0 0 18px;line-height:1.55}
/* Cards binnen Instellingen gebruiken default .card rule (zelfde als super) — geen override meer */
/* Instellingen-panel zelf is transparant + zonder dubbele padding zodat layout 1:1 super matched */
#panel-instellingen{background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin-bottom:0!important}
/* Blok-filter binnen instContainer: alleen het actieve blok tonen */
#instContainer[data-actief-blok="kantoor"] .inst-blok-wrap:not([data-blok="kantoor"]),
#instContainer[data-actief-blok="huisstijl"] .inst-blok-wrap:not([data-blok="huisstijl"]),
#instContainer[data-actief-blok="vestigingen"] .inst-blok-wrap:not([data-blok="vestigingen"]){display:none}
@media (max-width:880px){
 /* Drawer-pattern op mobiel: trigger-knop opent slide-in nav links */
  .inst-shell{flex-direction:column}
  .inst-trigger{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:10px;background:var(--bg2);color:var(--text1);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;margin-bottom:12px}
  .inst-trigger:active{background:var(--bg3)}
  .inst-trigger-icn{width:16px;height:16px;color:var(--text3);flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2}
  .inst-trigger-lbl{flex:1;text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .inst-trigger-chev{width:14px;height:14px;color:var(--text3);flex-shrink:0}
  .inst-bd{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;z-index:9995;backdrop-filter:blur(2px)}
  .inst-bd.open{opacity:1;visibility:visible}
  .inst-subnav{position:fixed !important;top:0;left:0;bottom:0;width:min(320px,86vw);max-width:none;background:var(--bg2);border-right:1px solid var(--border);box-shadow:6px 0 24px rgba(0,0,0,.35);transform:translateX(-100%);transition:transform .25s ease;z-index:9996;overflow-y:auto;padding:0 10px 18px;margin:0;flex-direction:column}
  .inst-subnav.open{transform:translateX(0)}
  .inst-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:max(16px,env(safe-area-inset-top)) 6px 12px;border-bottom:1px solid var(--border);margin-bottom:6px;position:sticky;top:0;background:var(--bg2);z-index:1}
  .inst-drawer-head-title{font-size:15px;font-weight:700;color:var(--text1)}
  .inst-drawer-close{width:34px;height:34px;border:0;background:var(--bg3);border-radius:8px;color:var(--text2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
  .inst-drawer-close:active{background:var(--bg4)}
  .inst-sub-item{padding:11px 12px;font-size:14px}
  .inst-sub-sec{padding:14px 10px 4px;font-size:10px}
}

/* Dual-sidebar — main-sidebar krimpt naar icon-rail in Instellingen-panel */
@media (min-width:881px){
  body.adm-rail nav.sidebar,body.adm-rail aside.sidebar{width:52px!important;overflow:visible!important}
  body.adm-rail .main{margin-left:52px!important}
  body.adm-rail .sidebar .nav-item{justify-content:center!important;padding:6px 0!important;margin:3px 8px!important;gap:0!important;font-size:0!important;position:relative;overflow:visible}
  body.adm-rail .sidebar .nav-item > *{display:none!important}
  body.adm-rail .sidebar .nav-item > svg,body.adm-rail .sidebar .nav-item > .ntf-svg-wrap{display:block!important;margin:0 auto!important}
  body.adm-rail .sidebar .nav-item svg{width:15px!important;height:15px!important;padding:5px!important;background:rgba(255,255,255,.08)!important;border-radius:9px!important;box-sizing:content-box!important}
 body.adm-rail .sidebar .nav-item.active svg{background:#1a6bdc!important;box-shadow:0 4px 12px rgba(26,107,220,.35)!important}
  body.adm-rail .sidebar .nav-item:hover svg{background:rgba(255,255,255,.16)!important}
  body.adm-rail .sidebar .nav-section{display:none!important}
  body.adm-rail .sidebar .nav-sub-groep{display:none!important}
  body.adm-rail nav.sidebar > .sb-logo,body.adm-rail aside.sidebar > .sb-logo{padding:8px!important;justify-content:center!important}
  body.adm-rail .sb-logo-btn{justify-content:center!important;padding:0!important}
  body.adm-rail .sidebar .nav-item.nav-item-help{font-size:0!important;padding:6px 0!important;margin:auto 8px 22px!important;gap:0!important;justify-content:center!important}
 body.adm-rail .sidebar .nav-item.nav-item-help svg{width:15px!important;height:15px!important;padding:5px!important;background:rgba(255,255,255,.08)!important;border-radius:9px!important;color:#fff!important;opacity:1!important;box-sizing:content-box!important}
  body.adm-rail .sidebar .nav-item.nav-item-help:hover svg{background:rgba(255,255,255,.16)!important}
  body.adm-rail .topbar,body.adm-rail .content-topbar{padding-left:12px!important}
    body.adm-rail .sidebar .nav-item[onclick*="notificaties"] svg{transform:translateX(3px)!important}
 /* Notif dot: wit op blauwe active-bubble voor contrast */
 .nav-item.active #navNotifDot{background:#fff!important;border-color:#1a6bdc!important}
  body.adm-rail .profiel-menu{left:60px!important;top:8px!important}
}

/* ── Bundle-tabs (Financieel, Compliance) — gedeelde tab-bar bovenaan bundle-panel ── */
.vorio-bundle-tabs{display:flex;gap:4px;margin:0 0 16px;padding:4px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;width:fit-content;max-width:100%}
.vorio-bundle-tab{padding:7px 18px;background:transparent;border:none;border-radius:7px;font-family:inherit;font-size:13px;font-weight:600;color:var(--text3);cursor:pointer;transition:background .15s,color .15s}
.vorio-bundle-tab:hover{color:var(--text1)}
.vorio-bundle-tab.actief{background:var(--bg2);color:var(--text1);box-shadow:0 1px 3px rgba(0,0,0,.06)}
html[data-theme="dark"] .vorio-bundle-tab.actief{background:var(--bg4);box-shadow:0 1px 3px rgba(0,0,0,.25)}

/* ── AI LOG (grid-uitlijning per kolom voor consistent rij-zicht) ── */
.log-rij{background:var(--bg2);border:1px solid var(--border);border-radius:8px;margin-bottom:8px;overflow:hidden}
.log-kop{padding:10px 14px;display:grid;grid-template-columns:130px 170px 1fr 90px 70px 95px 14px;align-items:center;gap:12px;cursor:pointer;user-select:none}
.log-kop:hover{background:var(--bg3)}
.log-kop .log-deel-cel{justify-self:start;min-width:0}
.log-kop .log-chev{justify-self:end;color:var(--text3);font-size:10px}
.log-tijdstip{font-size:11px;font-family:var(--mono);color:var(--text3);white-space:nowrap}
.log-mw-avatar{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;letter-spacing:.5px}
.log-mw-naam{font-size:12px;font-weight:600;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log-vraag-preview{font-size:12.5px;color:var(--text1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.log-engine-cel{justify-self:start;min-width:0}
.log-tokens{font-size:11px;color:var(--text3);background:var(--bg4);border:1px solid var(--border);border-radius:8px;padding:2px 8px;justify-self:end;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Mobiel: kolommen weer flexen om wrappen toe te staan */
@media (max-width:760px){
  .log-kop{display:flex;flex-wrap:wrap}
  .log-tokens,.log-engine-cel,.log-deel-cel{margin-left:auto}
}
.log-body{display:none;border-top:1px solid var(--border);padding:12px 14px}
.log-rij.open .log-body{display:block}
.log-vraag{background:var(--accent-light);border:1px solid var(--accent);border-radius:7px;padding:10px 12px;font-size:12.5px;line-height:1.6;margin-bottom:10px;white-space:pre-wrap}
.log-antwoord{background:var(--green-light);border:1px solid var(--green);border-radius:7px;padding:10px 12px;font-size:12.5px;line-height:1.6;white-space:pre-wrap}
.log-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);margin-bottom:5px}

/* ── DANGER ZONE ── */
.danger-zone{background:var(--red-light);border:1px solid #f5c6c2;border-radius:var(--r);padding:16px 20px;margin-top:20px}
.danger-zone h3{font-size:13px;font-weight:700;color:var(--red);margin-bottom:10px}
.danger-zone p{font-size:12px;color:var(--text2);margin-bottom:12px;line-height:1.5}
.danger-acties{display:flex;gap:8px;flex-wrap:wrap}

/* ── NOTIF ── */
.notif{position:fixed;bottom:24px;right:24px;background:#1a1a2e;color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:9999}
.notif.toon{opacity:1}

/* Confirm-modal CSS komt uit vorio-lib.js (inject) */

/* ── DEBITEUR DETAIL ── */
.detail-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:7000;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:opacity .2s}
.detail-modal-bg.open{visibility:visible;opacity:1}
.detail-modal{background:var(--bg2);color:var(--text1);border-radius:12px;width:560px;max-width:94vw;max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:24px}
.detail-modal h3{font-size:15px;font-weight:700;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}
.detail-modal .sluit{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text3);padding:6px 8px;min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center;line-height:1;border-radius:6px}
.detail-modal .sluit:hover{background:var(--bg3)}
.detail-rij{display:flex;gap:8px;margin-bottom:8px;align-items:baseline}
.detail-rij .lbl{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;min-width:130px;flex-shrink:0}
.detail-rij .val{font-size:13px;color:var(--text1)}

/* ── OFFERTE DRAWER ── */
.offerte-drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:8500;visibility:hidden;opacity:0;transition:opacity .2s}
.offerte-drawer-bg.open{visibility:visible;opacity:1}
.offerte-drawer{position:fixed;top:0;right:-700px;width:680px;max-width:96vw;height:100vh;background:var(--bg2);color:var(--text1);box-shadow:-4px 0 32px rgba(0,0,0,.45);z-index:8501;display:flex;flex-direction:column;transition:right .25s ease;overflow:hidden}
.offerte-drawer-bg.open .offerte-drawer{right:0}
.offerte-drawer-head{padding:18px 22px;border-bottom:2px solid var(--accent);display:flex;align-items:center;gap:12px;flex-shrink:0}
.offerte-drawer-head h3{font-size:15px;font-weight:700;color:var(--accent);flex:1}
.offerte-drawer-body{flex:1;overflow-y:auto;padding:20px 22px;display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.offerte-drawer-body .full{grid-column:1/-1}
.offerte-drawer-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;flex-shrink:0;background:var(--bg3)}
.od-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.od-input{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:7px;font-size:13px;font-family:inherit;color:var(--text1);background:var(--bg2);outline:none}
.od-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(26,107,220,.1)}
.od-blok{background:var(--accent-light);border:1px solid #c3dff5;border-radius:8px;padding:12px 14px;margin-bottom:10px}
.od-blok-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.od-blok-naam{font-size:12px;font-weight:700;color:var(--accent);flex:1}
.od-regel{display:grid;grid-template-columns:1fr 52px 72px 60px;gap:6px;align-items:center;margin-bottom:5px;font-size:12px}
.od-regel input{padding:4px 7px;border:1px solid var(--border);border-radius:5px;font-size:12px;width:100%}

/* ── LEEG ── */
.leeg-blok{text-align:center;padding:50px 20px;color:var(--text3)}
.leeg-blok svg{opacity:.4;margin-bottom:10px}
.leeg-blok p{font-size:14px}

/* ── PAGINATION ── */
.pagina-wrap{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.pagina-wrap .pagina-info{font-size:12px;color:var(--text3);flex:1}

/* ── GRAFIEK ── */
.grafiek-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);margin-bottom:20px}
.grafiek-wrap h3{font-size:13px;font-weight:700;margin-bottom:14px;color:var(--text2)}

/* ── STAT BALKEN ── */
.stat-balk-wrap{margin-bottom:10px}
.stat-balk-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:3px;color:var(--text2)}
.stat-balk{height:8px;background:var(--bg4);border-radius:4px;overflow:hidden}
.stat-balk-fill{height:100%;background:var(--accent);border-radius:4px;transition:width .5s ease}

/* ── ACTIVITEITSLOG ── */
.actlog-rij{display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid var(--border);font-size:12.5px}
.actlog-rij:last-child{border-bottom:none}
.actlog-ic{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.actlog-ok{background:var(--green)}
.actlog-fail{background:var(--red)}
.actlog-out{background:#94a3b8}
.actlog-tijd{font-size:11px;font-family:var(--mono);color:var(--text3);white-space:nowrap;min-width:140px}

/* ── HAMBURGER ── */
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--text1);flex-shrink:0}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:149}
.sidebar-overlay.open{display:block}

/* ── MOBIEL ── */
@media(max-width:1100px){
 /* KPI grids: 3 kolommen op kleinere schermen */
 #kpiGrid, #kpiGrid + div{grid-template-columns:repeat(3,1fr)!important}
}
@media(max-width:768px){
 /* KPI grids: 2 kolommen op mobiel */
 #kpiGrid, #kpiGrid + div{grid-template-columns:repeat(2,1fr)!important}
 /* login */
  .login-box{width:92vw;padding:28px 20px}

 /* topbar */
  .topbar{padding:0 14px;gap:10px}
  .topbar-logo img{height:22px}
 #topbarTijd{display:none}
  .btn-logout span{display:none}
  .menu-toggle{display:flex;align-items:center;justify-content:center}

 /* sidebar als drawer */
  .sidebar{
    position:fixed!important;top:0!important;left:0!important;bottom:0!important;z-index:200!important;
    width:240px!important;transform:translateX(-100%);transition:transform .25s ease;
    box-shadow:4px 0 20px rgba(0,0,0,.15)!important
  }
  .sidebar.open{transform:translateX(0)!important}
  .sidebar-overlay{z-index:190!important}

 /* main */
  .main{padding:14px;margin-left:0 !important}
  .main[style*="margin-left"]{margin-left:0 !important}
  .content-topbar{padding:0 14px}

 /* KPI grid: 2 kolommen op mobiel */
  .kpi-grid{grid-template-columns:1fr 1fr;gap:8px}
  .kpi{padding:12px}
  .kpi-val{font-size:22px}

 /* cockpit grids: stapelen */
 #cockpitGrids{grid-template-columns:1fr !important}
  .grafiek-wrap + .grafiek-wrap{margin-top:0}
  div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;display:grid}

 /* filter bar: vol breed */
  .filter-bar input{min-width:0;width:100%}
  .filter-bar select{width:100%}
  .filter-bar{flex-direction:column}

 /* sectie header knoppen: kleiner */
  .sectie-hoofd{gap:6px}
  .sectie-hoofd .btn{font-size:11px;padding:4px 8px}

 /* tabellen: horizontaal scrollen */
  .admin-tabel th,.admin-tabel td{padding:7px 8px;font-size:11.5px}

 /* danger zone */
  .danger-zone{padding:12px 14px}
  .danger-acties{flex-direction:column}
  .danger-acties .btn{width:100%;justify-content:center}

 /* activiteitslog */
  .actlog-tijd{min-width:100px;font-size:10px}

 /* pagination */
  .pagina-wrap{gap:6px}

  div[style*="max-width:520px"]{max-width:100% !important}

 /* ── Cockpit "Recente offertes" — voorkom horizontale overflow ─────────── */
 #cockpitOffertes, #cockpitAiLog, #cockpitOndertekenen{ overflow-x:auto; -webkit-overflow-scrolling:touch }
 #cockpitOffertes .admin-tabel{ min-width:0 }
 #cockpitOffertes .admin-tabel td:nth-child(4),
 #cockpitOffertes .admin-tabel th:nth-child(4){ display:none } /* Datum-kolom op mobiel verbergen */
 #cockpitOffertes .admin-tabel td:nth-child(2){ white-space:normal; word-break:break-word; min-width:0 }
 #cockpitOffertes .admin-tabel .nr{ font-size:12px!important; white-space:nowrap }

 /* ── WWFT inzendingen / tokens — compactere mobile-layout ──────────────── */
 #tbl-inzendingen, #tbl-tokens{ font-size:12.5px }
 #tbl-inzendingen .admin-tabel td, #tbl-tokens .admin-tabel td,
 #tbl-inzendingen td, #tbl-tokens td{ font-size:12.5px!important; padding:8px 10px!important }
 #tbl-inzendingen .nr, #tbl-tokens .nr{ font-size:13px!important; font-weight:600 }
}

@media(max-width:400px){
  .kpi-grid{grid-template-columns:1fr}
}

/* ── SETTINGS TABS ── */
.insta-tab {
  background: none;
  border: none;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .12s;
  white-space: nowrap;
  font-family: var(--font);
}
.insta-tab:hover {
  color: var(--accent);
  background: var(--bg3);
}
.insta-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ══ VORIO-ADMIN STIJL OVERRIDES */
body{font-family:'DM Sans',system-ui,sans-serif!important;background:var(--bg)!important}

/* Sidebar */
.sidebar{width:230px!important;background:#0f172a!important;border-right:none!important;display:flex!important;flex-direction:column!important;position:fixed!important;top:0!important;left:0!important;bottom:0!important;height:100vh!important;overflow-y:auto!important;z-index:100!important}
.nav-section{padding:9px 12px 4px!important;font-size:9px!important;font-weight:700!important;color:rgba(255,255,255,.45)!important;text-transform:uppercase!important;letter-spacing:1.4px!important;margin-top:2px!important}
.nav-item{padding:8px 12px!important;margin:0 10px!important;border-radius:9px!important;font-size:12.5px!important;font-weight:500!important;color:rgba(255,255,255,.84)!important;border-left:none!important;font-family:'DM Sans',sans-serif!important;width:auto!important}
.nav-item:hover{background:rgba(255,255,255,.05)!important;color:#fff!important;border-left-color:transparent!important}
.nav-item.active{background:rgba(26,107,220,.10)!important;color:#fff!important;border-left-color:transparent!important;font-weight:700!important}
.nav-item svg{padding:5px!important;background:rgba(255,255,255,.10)!important;border-radius:7px!important;color:#fff!important;box-sizing:content-box!important;transition:all .15s!important}
.nav-item:hover svg{background:rgba(255,255,255,.16)!important}
.nav-item.active svg{background:#1a6bdc!important;color:#fff!important;box-shadow:0 4px 12px rgba(26,107,220,.35)!important}
.nav-sub-groep{border-left:2px solid rgba(255,255,255,.1)!important;margin:2px 0 4px 28px!important}
.nav-sub{color:rgba(255,255,255,.5)!important;font-size:12.5px!important;padding:6px 12px!important}
.nav-sub:hover{color:rgba(255,255,255,.85)!important;background:rgba(255,255,255,.05)!important}
.nav-sub.active{color:#60b4f4!important;background:rgba(26,107,220,.1)!important}
.nav-sub::before{content:''!important}
.btn-logout{background:rgba(255,255,255,.06)!important;color:rgba(255,255,255,.6)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:7px!important;padding:7px 14px!important;font-size:12.5px!important;width:100%!important}
.btn-logout:hover{background:rgba(255,255,255,.12)!important;color:#fff!important}

/* Layout */
.layout{display:flex!important;min-height:100vh!important}
.main{flex:1!important;padding:28px!important}

/* Knoppen uniform */
.btn{border-radius:8px!important;font-size:13px!important;font-weight:600!important;padding:9px 18px!important;font-family:'DM Sans',sans-serif!important}
.btn-primary{background:var(--accent)!important;color:#fff!important;border:none!important}
.btn-primary:hover{filter:brightness(1.1)!important;opacity:1!important}
.btn-ghost{background:var(--bg3)!important;color:var(--text2)!important;border:1px solid var(--border)!important}
.btn-ghost:hover{background:var(--bg4)!important}
.btn-sm{padding:7px 12px!important;font-size:12px!important;border-radius:6px!important;min-height:32px!important;box-sizing:border-box!important}
.btn-danger{background:transparent!important;color:var(--red)!important;border:1px solid #fecaca!important}
.btn-danger:hover{background:var(--red-light)!important}
.btn-danger-solid{background:#b91c1c!important;color:#fff!important;border:none!important}

/* Tabellen */
.admin-tabel{border-collapse:collapse!important;box-shadow:none!important;border:none!important;background:transparent!important}
.admin-tabel th{background:transparent!important;border-bottom:1.5px solid var(--border)!important;color:var(--text3)!important;font-size:11px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.6px!important;padding:0 12px 10px!important}
.admin-tabel td{padding:10px 12px!important;border-bottom:1px solid var(--border)!important;font-size:13.5px!important}
.admin-tabel tbody tr:hover td{background:var(--bg3)!important}
.admin-tabel tbody tr:last-child td{border-bottom:none!important}

/* Badges uniform */
.badge{display:inline-flex!important;align-items:center!important;padding:3px 9px!important;border-radius:20px!important;font-size:11px!important;font-weight:600!important}
.badge.groen,.badge-groen{background:var(--green-light)!important;color:var(--green)!important}
.badge.amber,.badge-amber{background:var(--amber-light)!important;color:var(--amber)!important}
.badge.rood,.badge-rood{background:var(--red-light)!important;color:var(--red)!important}
.badge.blauw,.badge-blauw{background:var(--accent-light)!important;color:var(--accent)!important}
.badge.grijs,.badge-grijs{background:var(--bg3)!important;color:var(--text3)!important}

/* Kaarten/sectie */
.sectie-hoofd h2{font-size:15px!important;font-weight:700!important;letter-spacing:-.2px!important;color:var(--text1)!important;margin:0!important}
.sectie-hoofd .count{background:var(--bg3)!important;border:1px solid var(--border)!important;color:var(--text3)!important;font-size:11.5px!important;font-weight:600!important;border-radius:10px!important;padding:2px 9px!important}
.kpi{background:var(--bg2)!important;border-radius:12px!important;box-shadow:0 1px 4px rgba(0,0,0,.06)!important;border:none!important}
.kpi{min-height:80px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;padding:16px 18px!important}
.kpi-val{font-size:26px!important;font-weight:800!important;letter-spacing:-1px!important;line-height:1.1!important}

/* Filter inputs */
.filter-bar input,.filter-bar select{border:1.5px solid var(--border)!important;border-radius:8px!important;font-size:13px!important;font-family:'DM Sans',sans-serif!important;background:var(--bg2)!important}
.filter-bar input:focus,.filter-bar select:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(26,107,220,.1)!important}

/* Tabs stijl */
.insta-tab{font-family:'DM Sans',sans-serif!important;font-size:13px!important;font-weight:600!important;border-bottom:2.5px solid transparent!important;color:var(--text3)!important;padding:9px 16px!important;margin-bottom:-1.5px!important;background:none!important;border-top:none!important;border-left:none!important;border-right:none!important}
.insta-tab.active{color:var(--accent)!important;border-bottom-color:var(--accent)!important;background:transparent!important}

/* Filter knoppen — vervang gouden ronde stijl door platte stijl */
.filter-btn{border-radius:7px!important;border:1.5px solid var(--border)!important;background:var(--bg2)!important;color:var(--text2)!important;font-family:'DM Sans',sans-serif!important;font-size:12.5px!important;font-weight:500!important;padding:6px 14px!important}
.filter-btn:hover{border-color:var(--accent)!important;color:var(--accent)!important;background:var(--accent-light)!important}
.filter-btn.active{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}

/* Filter-bar inputs */
.filter-bar input,.filter-bar select{font-size:13px!important;font-family:'DM Sans',sans-serif!important;border:1.5px solid var(--border)!important;border-radius:8px!important;background:var(--bg2)!important;color:var(--text1)!important;padding:7px 11px!important}
.filter-bar input:focus,.filter-bar select:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(26,107,220,.1)!important;outline:none!important}

/* Lege staat */
.leeg-blok{background:transparent!important;border:none!important;color:var(--text3)!important}
.leeg-blok p{color:var(--text3)!important;font-size:13px!important}

/* Goud volledig weg uit content */

/* Main content */
.main{background:var(--bg)!important;margin-left:230px!important;padding:0!important}

/* Panel = card zoals vorio-admin */
.panel{background:var(--bg2)!important;border-radius:12px!important;box-shadow:0 1px 4px rgba(0,0,0,.06)!important;padding:24px!important;margin-bottom:18px!important}
.main>.panel,.main>div>.panel{margin-bottom:18px!important}

/* Sectie-hoofd als card-header */
.sectie-hoofd{border-bottom:1px solid var(--border)!important;padding-bottom:14px!important;margin-bottom:18px!important}
.sectie-hoofd h2{font-size:15px!important;font-weight:700!important;color:var(--text1)!important;letter-spacing:-.2px!important;margin:0!important}

/* Binnen een panel: tabel geen extra kaart meer */
.panel .admin-tabel{box-shadow:none!important;border-radius:0!important}
.panel .tabel-wrap{box-shadow:none!important;border-radius:0!important;background:transparent!important}

/* Filter-bar binnen panel */
.panel .filter-bar{margin-bottom:14px!important}

/* Legacy ID-selector blokken VERWIJDERD.
 #offerteZoek/#debiteurZoek/etc + #offerteStatus/#debiteurStatus/etc gaven
   background:var(--bg2)!important — shorthand wiste magnifier/chevron uit canonical
   .filterbar input/select regels in vorio-base.css.
   Styling wordt nu door vorio-base.css .filterbar centraal geregeld. */

/* Tabel-wrap kaart */
.tabel-wrap{background:var(--bg2)!important;border-radius:12px!important;box-shadow:0 1px 4px rgba(0,0,0,.06)!important;overflow:hidden!important;border:none!important}

/* Selectie-actiebalk boven tabel */
.selectie-balk{align-items:center;gap:8px;padding:8px 12px;background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:8px;margin-bottom:10px;font-size:13px;font-weight:600;color:#1d4ed8}
/* Tabelheader laatste kolom niet uitrekken */
.admin-tabel thead th:last-child{white-space:nowrap;width:auto}

/* Danger zone */
.danger-zone{border:1.5px solid rgba(239,68,68,.32)!important;border-radius:10px!important;background:rgba(239,68,68,.10)!important}
.danger-zone h3{color:var(--red)!important}

/* Export/import knoppen consistentie */
.btn-ghost svg,.btn-primary svg{vertical-align:-2px!important}

/* Content topbar — sluit aan op sidebar, zelfde hoogte */
.content-topbar{background:var(--bg2);border-bottom:1.5px solid var(--border);padding:0 28px;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;flex-shrink:0;margin-left:0}
.content-topbar-titel{font-size:13.5px;font-weight:600;color:var(--text2);display:flex;align-items:center;gap:6px}
.content-topbar-datum{font-size:12px;color:var(--text3);font-weight:500}

/* Nav section zonder grijze achtergrond */
.nav-section{background:none!important;padding:9px 12px 4px!important}

/* Sub-kaarten binnen panel geen dubbele shadow */
.panel .kpi{box-shadow:0 1px 3px rgba(0,0,0,.05)!important}
.panel .leeg-blok{background:var(--bg3)!important;border-radius:8px!important;padding:40px 20px!important}

/* Admin-tabel in kaart */
.admin-tabel{border-radius:12px!important;overflow:hidden!important;border:none!important;box-shadow:0 1px 4px rgba(0,0,0,.06)!important}
.admin-tabel thead tr{background:var(--bg3)!important;border-bottom:1.5px solid var(--border)!important}
.admin-tabel th{background:transparent!important;color:var(--text3)!important;font-size:11px!important;font-weight:700!important;letter-spacing:.6px!important;padding:10px 12px!important}
.admin-tabel td{padding:10px 12px!important;border-bottom:1px solid var(--border)!important;font-size:13px!important;vertical-align:middle!important}
.admin-tabel .dim{color:var(--text3)!important;font-size:12px!important}
.admin-tabel tbody tr:last-child td{border-bottom:none!important}

/* KPI grid consistenter */
.kpi-grid{gap:12px!important}
.kpi{border-radius:12px!important;padding:16px 18px!important}
.kpi-val{font-size:26px!important;font-weight:800!important;letter-spacing:-.5px!important;line-height:1.1!important}

/* ── MOBIEL OVERRIDES — moeten ná de !important basis-regels staan ── */
@media(max-width:768px){
  .sidebar{width:240px!important;position:fixed!important;top:0!important;left:0!important;bottom:0!important;height:100vh!important;z-index:200!important;transform:translateX(-100%)!important;transition:transform .25s ease!important;box-shadow:4px 0 20px rgba(0,0,0,.15)!important}
  .sidebar.open{transform:translateX(0)!important}
  .sidebar-overlay{z-index:190!important}
  .main{margin-left:0!important;padding:14px!important}
  .content-topbar{padding:0 14px!important}
  .menu-toggle{display:flex!important;align-items:center;justify-content:center}
 /* Topbar edge-to-edge op mobiel — breekt uit .main 14px padding zodat het flush staat tegen viewport-randen, net als medewerkersportaal */
  .main > .topbar,
  .main > .content-topbar{
    margin: -14px -14px 14px -14px !important;
    width: calc(100% + 28px) !important;
    border-radius: 0 !important;
    max-width: none !important;
 /* Strek bg in dezelfde kleur naar boven onder iOS statusbar */
    padding-top: env(safe-area-inset-top, 0) !important;
    height: auto !important;
    min-height: calc(56px + env(safe-area-inset-top, 0)) !important;
  }
 /* Sidebar drawer ook door naar boven in eigen kleur — content respecteert statusbar */
  .sidebar{
    padding-top: env(safe-area-inset-top, 0) !important;
  }
}


/*    admin.vorio.nl/index.php — Superadmin sidebar + onboarding
 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--text1);min-height:100vh}
a{color:inherit;text-decoration:none}
.shell{display:flex;min-height:100vh}
.sidebar{width:230px;background:#0f172a;color:#fff;flex-shrink:0;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:20;overflow-y:auto}
.main{margin-left:230px;flex:1;min-height:100vh}
.topbar{background:var(--bg2);border-bottom:1.5px solid var(--border);padding:0 28px;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.content{padding:28px}
.sb-logo{padding:22px 18px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.logo{font-size:22px;font-weight:800;letter-spacing:-1.5px;display:inline-flex;align-items:flex-end;gap:1px;line-height:1}
.sb-v{font-size:10px;color:rgba(255,255,255,.3);margin-top:3px}
.sb-sec{font-size:10px;font-weight:700;color:rgba(255,255,255,.3);letter-spacing:1.2px;text-transform:uppercase;padding:18px 18px 6px}
.sb-link{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:0 10px;border-radius:9px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.84);cursor:pointer;border:none;background:none;width:auto;text-align:left;border-left:none;transition:all .15s}
.sidebar .sb-link:first-of-type{margin-top:10px}
.sidebar .nav-item-first{margin-top:10px!important}
.sb-link:hover{background:rgba(255,255,255,.05);color:#fff}
.sb-link.actief{background:rgba(26,107,220,.10);color:#fff;border-left-color:transparent;font-weight:700}
.sb-link svg{flex-shrink:0;opacity:.92;transition:all .15s;box-sizing:content-box;padding:5px;background:rgba(255,255,255,.10);border-radius:7px;color:#fff}
.sb-link:hover svg{background:rgba(255,255,255,.16)}
.sb-link.actief svg{opacity:1;background:#1a6bdc;color:#fff;box-shadow:0 4px 12px rgba(26,107,220,.35)}
.sb-link svg.sb-chev-flyout,.sb-link:hover svg.sb-chev-flyout,.sb-link.actief svg.sb-chev-flyout{margin-left:auto;padding:0;background:none;border-radius:0;box-shadow:none;opacity:.45;color:rgba(255,255,255,.7)}
.sb-bottom{margin-top:auto;padding:14px 18px;border-top:1px solid rgba(255,255,255,.07)}
.sb-user{font-size:11.5px;color:rgba(255,255,255,.4);margin-bottom:8px;line-height:1.5}
.sb-user strong{color:rgba(255,255,255,.75);display:block}
.btn-logout{background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:7px 14px;font-size:12.5px;font-family:inherit;cursor:pointer;width:100%;transition:all .15s}
.btn-logout:hover{background:rgba(255,255,255,.12);color:#fff}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px 20px;box-shadow:var(--shadow)}
.stat-num{font-size:30px;font-weight:800;color:var(--accent);line-height:1;letter-spacing:-1px}
.stat-label{font-size:12px;color:var(--text2);margin-top:4px;font-weight:500}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:22px 24px;margin-bottom:18px;box-shadow:var(--shadow)}
.card-title{font-size:14.5px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}
h1{font-size:20px;font-weight:800;margin-bottom:3px;letter-spacing:-.3px}
.sub{font-size:13px;color:var(--text2);margin-bottom:22px}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;padding:0 12px 10px;border-bottom:1.5px solid var(--border)}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text1)}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:var(--bg3)}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
.badge-groen{background:var(--green-light);color:var(--green);border:1px solid var(--green)}
.badge-rood{background:var(--red-light);color:var(--red);border:1px solid var(--red-border)}
.badge-grijs{background:var(--bg3);color:var(--text3);border:1px solid var(--border)}
.badge-blauw{background:var(--accent-light);color:var(--accent);border:1px solid var(--accent)}
.badge-amber{background:var(--amber-light);color:var(--amber);border:1px solid var(--amber)}
.slug{font-family:monospace;background:var(--bg3);border:1px solid var(--border);border-radius:5px;padding:2px 7px;font-size:12px;color:var(--text2)}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:9px 18px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:filter .15s}
.btn:hover{filter:brightness(1.1)}
.btn-sm{padding:0 12px;font-size:12px;border-radius:6px;line-height:1;height:32px;min-height:32px;box-sizing:border-box}
.btn-sec{background:transparent;color:var(--accent);border:1.5px solid var(--accent);padding:7.5px 16.5px}
.btn-sec:hover{background:var(--accent-light);filter:none}
.btn-rood{background:#c0392b}
.btn-ghost{background:var(--bg3);color:var(--text2);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--bg4);color:var(--text1);filter:none}
.btn-groen{background:#15803d}
.btn-amber{background:#d97706}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--text3);margin-bottom:5px;text-transform:uppercase;letter-spacing:.3px}
.field input,.field select,.field textarea{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:13.5px;font-family:inherit;color:var(--text1);outline:none;transition:border .15s;background:var(--bg2);line-height:1.5;box-sizing:border-box;min-height:41px}
.field input:not([type=checkbox]):not([type=radio]),.field select{height:41px;appearance:none;-webkit-appearance:none;-moz-appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27%3E%3Cpath fill=%27none%27 stroke=%27%2394a3b8%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 d=%27M1 1l4 4 4-4%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media(max-width:700px){.grid2,.grid3{grid-template-columns:1fr}}
.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:16px}
.module-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1.5px solid var(--border);border-radius:9px;cursor:pointer;transition:all .15s;color:var(--text1);background:var(--bg2)}
.module-item:has(input:checked){border-color:var(--accent);background:var(--accent-light);color:var(--text1)}
.module-item input{accent-color:var(--accent);width:15px;height:15px;flex-shrink:0}
.module-item span{font-size:13px;font-weight:500}
.notif-ok{background:#f0fdf4;color:#15803d;border-radius:9px;padding:11px 16px;font-size:13px;margin-bottom:16px;border:1px solid #bbf7d0;display:flex;align-items:center;gap:8px}
.notif-fout{background:#fef2f2;color:#b91c1c;border-radius:9px;padding:11px 16px;font-size:13px;margin-bottom:16px;border:1px solid #fecaca;display:flex;align-items:center;gap:8px}
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#0f172a,#1e293b)}
.login-card{border-radius:16px;padding:40px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.tabs{display:flex;gap:4px;margin-bottom:22px;border-bottom:1.5px solid #e2e8f0}
.tab-btn{padding:9px 16px;font-size:13px;font-weight:600;color:#64748b;border:none;background:none;cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;font-family:inherit;transition:all .15s}
.tab-btn.actief{color:#1a6bdc;border-bottom-color:#1a6bdc}
.tab-btn:hover:not(.actief){color:#475569}
.danger-zone{border:1.5px solid #fecaca;border-radius:10px;padding:18px 20px;background:#fff5f5;margin-top:16px}
.danger-zone h3{font-size:13px;font-weight:700;color:#b91c1c;margin-bottom:8px}
.log-item{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid #f8fafc}
.log-item:last-child{border-bottom:none}
.log-dot{width:7px;height:7px;border-radius:50%;background:#1a6bdc;flex-shrink:0;margin-top:5px}
/* Spinner */
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
/* Monitoring */
.mon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.mon-stat{background:#f8fafc;border-radius:8px;padding:12px 14px;text-align:center}
.mon-num{font-size:22px;font-weight:800;color:#1a6bdc;line-height:1}
.mon-lbl{font-size:11px;color:#64748b;margin-top:3px}

/* ── DARK MODE — admin.php + admin.vorio.nl ── */
html[data-theme="dark"]{
 --accent:#5fa1f0; --accent2:#1a6bdc; --accent-light:rgba(26,107,220,.18);
  --grad:linear-gradient(135deg,rgba(21,88,192,.55),rgba(26,107,220,.45));
 --bg:#0b1220; --bg2:#111a2c; --bg3:#0f1729; --bg4:#1a2540;
 --border:#2a3550; --border2:#3a4664;
 --text1:#e6ebf4; --text2:#b6c0d3; --text3:#8a96ac;
 --red:#ef6358; --red-light:rgba(239,68,68,.14); --red-border:rgba(239,68,68,.32); --red-text:#ef8276;
 --amber:#f0a070; --amber-light:rgba(217,119,6,.16);
 --green:#3ddc7e; --green-light:rgba(34,197,94,.14);
 --purple:#a78bfa; --purple-light:rgba(124,58,237,.18);
 --goud:#d4b677; --goud2:#a98c52; --goud-light:rgba(200,169,110,.18);
  --shadow:0 1px 4px rgba(0,0,0,.45);
  color-scheme:dark;
}
/* Surfaces met hardcoded #fff */
html[data-theme="dark"] .topbar, html[data-theme="dark"] .content-topbar{background:var(--bg2);border-bottom:1px solid rgba(255,255,255,.07) !important}
html[data-theme="dark"] .login-box{background:var(--bg2);box-shadow:0 20px 60px rgba(0,0,0,.65)}
html[data-theme="dark"] .login-field input{background:var(--bg3);border-color:var(--border);color:var(--text1)}
html[data-theme="dark"] .login-field input:focus{border-color:var(--accent)}
/* Autofill-fix: voorkom gele Chrome/Safari autofill achtergrond in dark mode */
html[data-theme="dark"] .login-field input:-webkit-autofill,
html[data-theme="dark"] .login-field input:-webkit-autofill:hover,
html[data-theme="dark"] .login-field input:-webkit-autofill:focus,
html[data-theme="dark"] .login-field input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--text1) !important;
  -webkit-box-shadow:0 0 0 1000px var(--bg3) inset !important;
  caret-color:var(--text1) !important;
  transition:background-color 9999s ease-in-out 0s
}
/* Foutmelding in dark mode: inline-styles overrulen */
html[data-theme="dark"] .login-err{
  background:rgba(239,68,68,.12) !important;
  border-color:rgba(239,68,68,.32) !important;
 color:#ef8276 !important
}
html[data-theme="dark"] .deb-status-popup{background:var(--bg2);border-color:var(--border)}
html[data-theme="dark"] .btn-ghost{background:var(--bg3);color:var(--text2)}
html[data-theme="dark"] .btn-ghost:hover{background:var(--bg4)}
/* Sidebar blijft donker — geen override nodig */
/* Sectie-headers en counts */
html[data-theme="dark"] .sectie-hoofd .count{background:var(--bg3);border-color:var(--border);color:var(--text3)}
/* Badges — translucent voor dark */
html[data-theme="dark"] .badge.groen,html[data-theme="dark"] .badge-groen{background:rgba(34,197,94,.14);color:#5fc975}
html[data-theme="dark"] .badge.amber,html[data-theme="dark"] .badge-amber{background:rgba(217,119,6,.14);color:#f0a070}
html[data-theme="dark"] .badge.rood,html[data-theme="dark"] .badge-rood{background:rgba(239,68,68,.14);color:#ef8276}
html[data-theme="dark"] .badge.blauw,html[data-theme="dark"] .badge-blauw{background:rgba(26,107,220,.18);color:#7ab5ee}
html[data-theme="dark"] .badge.grijs,html[data-theme="dark"] .badge-grijs{background:var(--bg3);color:var(--text3)}
html[data-theme="dark"] .badge.paars{background:rgba(124,58,237,.18);color:#c79aef}
html[data-theme="dark"] .badge.goud{background:rgba(200,169,110,.18);color:#d4b677}
/* Monitoring stat-cards */
html[data-theme="dark"] .mon-stat{background:var(--bg3);border:1px solid var(--border)}
html[data-theme="dark"] .mon-num{color:var(--accent)}
html[data-theme="dark"] .mon-lbl{color:var(--text3)}
html[data-theme="dark"] .log-dot{background:var(--accent)}
/* Cards/kantoor-tiles */
html[data-theme="dark"] .login-logo{background:var(--bg3);border-color:var(--border)}

/* ── Selectie-actiebalk (offertes/dossiers/cliënten/debiteuren) ── */
.adm-selectie-balk{display:none;align-items:center;gap:8px;padding:8px 12px;background:var(--accent-light);border:1.5px solid var(--accent);border-radius:8px;margin-bottom:10px}
.adm-selectie-balk.zichtbaar{display:flex}
.adm-selectie-tekst{font-size:13px;font-weight:600;color:var(--accent);flex:1}
html[data-theme="dark"] .adm-selectie-balk{background:rgba(26,107,220,.18);border-color:rgba(26,107,220,.5)}
html[data-theme="dark"] .adm-selectie-tekst{color:#7ab5ee}

/* Superadmin login: volledig dark-mode (page-bg is altijd donkere gradient) */
.login-card{
 background:var(--bg2,#111a2c);
 color:var(--text1,#e6ebf4);
 border:1px solid var(--border,#2a3550);
}
.login-card .field label{color:var(--text3,#8a96ac)}
.login-card .field input{background:var(--bg3,#0f1729);color:var(--text1,#e6ebf4);border-color:var(--border,#2a3550)}
.login-card .field input:focus{border-color:var(--accent,#5fa1f0);box-shadow:0 0 0 3px rgba(26,107,220,.18)}

/* COCKPIT REDESIGN + NIEUWE WIDGETS */
/* Welkomst-header */
.cockpit-welkom{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:10px}
.cockpit-welkom .cw-left h1{font-size:20px;font-weight:800;letter-spacing:-.4px;margin:0 0 2px;color:var(--text1);font-family:inherit}
.cockpit-welkom .cw-left h1 span#cockpitNaam{font-size:inherit;font-weight:inherit;color:inherit;font-family:inherit}
.cockpit-welkom .cw-left span{font-size:12px;color:var(--text3)}
.cockpit-welkom .cw-right{display:flex;gap:6px;align-items:center}
.cockpit-welkom .cw-pill{font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:6px;background:var(--bg2);border:1px solid var(--border);color:var(--text2);cursor:pointer;transition:all .15s}
.cockpit-welkom .cw-pill:hover{background:var(--bg3)}
.cockpit-welkom .cw-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Hero KPIs (4 grote) */
.hero-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.hero-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px 20px;position:relative;overflow:hidden;box-shadow:var(--shadow,0 1px 3px rgba(0,0,0,.04))}
.hero-card .hc-lbl{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;font-weight:600;margin-bottom:8px}
.hero-card .hc-val{font-size:26px;font-weight:800;letter-spacing:-.7px;line-height:1;color:var(--text1)}
.hero-card .hc-sub{font-size:11px;color:var(--text2);margin-top:6px;display:flex;align-items:center;gap:6px;font-weight:500;flex-wrap:wrap}
.hero-card .hc-delta{font-weight:700;font-size:11px;padding:2px 6px;border-radius:4px}
.hero-card .hc-delta.up{background:#dcfce7;color:#15803d}
.hero-card .hc-delta.down{background:#fee2e2;color:#b91c1c}
.hero-card .hc-delta.neutral{background:var(--bg3);color:var(--text2)}
.hero-card .hc-spark{position:absolute;right:14px;top:14px;width:74px;height:28px;opacity:.6;pointer-events:none}
.hero-card .hc-spark svg{width:100%;height:100%}
html[data-theme="dark"] .hero-card .hc-delta.up{background:rgba(34,197,94,.18);color:#86efac}
html[data-theme="dark"] .hero-card .hc-delta.down{background:rgba(220,38,38,.18);color:#fca5a5}

/* Secundaire KPI-strip */
.kpi-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-bottom:20px}
.kpi-mini{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;position:relative;box-shadow:var(--shadow,0 1px 3px rgba(0,0,0,.04))}
.kpi-mini .km-v{font-size:15px;font-weight:800;letter-spacing:-.3px;color:var(--text1);line-height:1.2}
.kpi-mini .km-l{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-top:2px}
.kpi-mini .km-dot{position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--text3)}
.kpi-mini.warn .km-dot{background:var(--amber)}
.kpi-mini.bad .km-dot{background:var(--red)}
.kpi-mini.warn .km-v{color:var(--amber)}
.kpi-mini.bad .km-v{color:var(--red)}
.kpi-mini.good .km-v{color:var(--green)}

@media(max-width:1100px){.hero-grid{grid-template-columns:repeat(2,1fr)}.kpi-strip{grid-template-columns:repeat(4,1fr)}}
@media(max-width:600px){.hero-grid,.kpi-strip{grid-template-columns:1fr 1fr}}

/* Widget: Doorlooptijd-donut */
.dt-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;box-shadow:var(--shadow,0 1px 3px rgba(0,0,0,.04))}
.dt-ttl{font-size:13px;font-weight:700;color:var(--text1);margin:0 0 14px;display:flex;align-items:center;justify-content:space-between}
.dt-ttl .dt-help{font-size:11px;color:var(--text3);font-weight:500}
.donut-wrap{display:flex;align-items:center;gap:18px}
.donut{width:108px;height:108px;position:relative;flex-shrink:0}
.donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.donut-c b{font-size:22px;font-weight:800;color:var(--text1);letter-spacing:-.4px;line-height:1}
.donut-c span{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;font-weight:600;margin-top:2px}
.donut-list{flex:1;display:flex;flex-direction:column;gap:6px}
.donut-row{display:flex;align-items:center;gap:8px;font-size:11.5px}
.donut-row .dt-bullet{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.donut-row .dt-lbl{flex:1;color:var(--text2)}
.donut-row .dt-v{font-weight:700;color:var(--text1);font-variant-numeric:tabular-nums}
.dt-stats{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);display:flex;gap:14px}
.dt-stats .dt-s{flex:1}
.dt-stats .dt-s b{font-size:17px;font-weight:800;letter-spacing:-.3px;display:block;color:var(--text1)}
.dt-stats .dt-s span{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;font-weight:600}

/* Widget: Top langstlopend */
.tl-row{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.tl-row:last-child{border-bottom:none}
.tl-row .tl-rank{font-size:14px;font-weight:800;color:var(--text3);text-align:center;font-variant-numeric:tabular-nums}
.tl-row .tl-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.tl-row .tl-info b{color:var(--text1);font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-row .tl-info span{color:var(--text3);font-size:10.5px}
.tl-row .tl-age{font-size:11px;font-weight:700;padding:3px 8px;border-radius:5px;background:#fff1f2;color:#be123c;letter-spacing:-.2px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tl-row.urgent .tl-age{background:#fee2e2;color:#dc2626}
.tl-row.medium .tl-age{background:#fef3c7;color:#a16207}
html[data-theme="dark"] .tl-row.urgent .tl-age{background:rgba(220,38,38,.2);color:#fca5a5}
html[data-theme="dark"] .tl-row.medium .tl-age{background:rgba(245,158,11,.2);color:#fcd34d}

/* Widget: Volume bars */
.vb-wrap{display:flex;align-items:flex-end;gap:5px;height:140px;padding:18px 6px 0;margin-bottom:8px}
.vb-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;height:100%;justify-content:flex-end}
.vb-h{width:100%;background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 60%, transparent));border-radius:5px 5px 0 0;min-height:6px;transition:opacity .15s}
.vb-h.curr{background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 75%, transparent))}
.vb-h:hover{opacity:.85}
.vb-v{font-size:10px;font-weight:700;color:var(--text1);position:absolute;top:-2px;font-variant-numeric:tabular-nums}
.vb-l{font-size:9.5px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.vb-meta{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text2)}
.vb-meta b{font-weight:800;font-variant-numeric:tabular-nums}
.vb-meta b.up{color:var(--green)}
.vb-meta b.down{color:var(--red)}

/* Widget: Bottleneck-fase */
.fs-row{display:grid;grid-template-columns:110px 1fr 58px;gap:10px;align-items:center;padding:7px 0;font-size:12px}
.fs-row .fs-lbl{color:var(--text2);font-weight:500;font-size:11.5px}
.fs-row .fs-track{height:8px;background:var(--bg3);border-radius:5px;overflow:hidden;position:relative}
.fs-row .fs-fill{height:100%;border-radius:5px;background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 80%, transparent));transition:width .3s}
.fs-row .fs-fill.warn{background:linear-gradient(90deg, var(--amber), #f97316)}
.fs-row .fs-fill.bad{background:linear-gradient(90deg, var(--red), #b91c1c)}
.fs-row .fs-v{font-size:11.5px;font-weight:700;color:var(--text1);text-align:right;font-variant-numeric:tabular-nums}
.fs-tip{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text2)}

/* Widget: Behandelaar */
.bh-row{display:grid;grid-template-columns:30px 1fr auto auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:12.5px;cursor:pointer;transition:background .15s}
.bh-row:last-child{border-bottom:none}
.bh-row:hover{background:var(--bg3)}
.bh-row .bh-av{width:32px;height:32px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:-.3px;flex-shrink:0}
.bh-row .bh-info{min-width:0;overflow:hidden}
.bh-row .bh-info b{color:var(--text1);font-weight:600;display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bh-row .bh-info span{color:var(--text3);font-size:10.5px}
.bh-row .bh-open{font-size:11px;font-weight:700;color:var(--text1);background:var(--bg3);padding:3px 8px;border-radius:5px;font-variant-numeric:tabular-nums}
.bh-row .bh-med{font-size:11px;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums;min-width:32px;text-align:right}
.bh-row .bh-med.slow{color:var(--amber)}
.bh-row .bh-med.bad{color:var(--red)}

/* ── Dossier voortgang segmented bar ── */
.dv-totaal{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.dv-totaal-v{font-size:24px;font-weight:800;letter-spacing:-.5px;color:var(--text1)}
.dv-totaal-l{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.dv-bar{display:flex;height:14px;background:var(--bg3);border-radius:7px;overflow:hidden;margin-bottom:14px}
.dv-seg{height:100%;transition:width .3s}
.dv-leg{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:6px 14px}
.dv-leg-row{display:flex;align-items:center;gap:6px;font-size:11.5px}
.dv-leg-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.dv-leg-lbl{flex:1;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-leg-v{font-weight:700;color:var(--text1);font-variant-numeric:tabular-nums;min-width:24px;text-align:right}
.dv-leg-pct{color:var(--text3);font-size:10.5px;font-variant-numeric:tabular-nums;min-width:32px;text-align:right}
.dv-tenants{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.dv-tenant{background:var(--bg3);border-radius:6px;padding:8px 10px;display:flex;align-items:baseline;gap:6px}
.dv-tenant-v{font-size:15px;font-weight:800;color:var(--text1);font-variant-numeric:tabular-nums}
.dv-tenant-l{font-size:11px;color:var(--text3);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── AI-vragen compacte lijst ── */
.ai-list{display:flex;flex-direction:column}
.ai-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;padding:7px 2px;border-bottom:1px solid var(--border);font-size:12px}
.ai-row:last-child{border-bottom:none}
.ai-tijd{color:var(--text3);font-size:10.5px;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;letter-spacing:.2px}
.ai-vraag{color:var(--text1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}

/* ── Superadmin Live statistieken redesign ── */
.sa-hero{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
.sa-hero-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.sa-hero-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;font-weight:600;margin-bottom:6px;white-space:nowrap}
.sa-hero-v{font-size:22px;font-weight:800;letter-spacing:-.5px;line-height:1;color:var(--text1)}
.sa-hero-sub{font-size:10.5px;color:var(--text2);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sa-mini{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:10px}
.sa-mini-card{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:9px 11px;position:relative}
.sa-mini-dot{position:absolute;top:7px;right:7px;width:5px;height:5px;border-radius:50%;background:var(--amber)}
.sa-mini-card.bad .sa-mini-dot{background:var(--red)}
.sa-mini-card.warn .sa-mini-v{color:var(--amber)}
.sa-mini-card.bad  .sa-mini-v{color:var(--red)}
.sa-mini-v{font-size:14px;font-weight:800;letter-spacing:-.3px;color:var(--text1);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-mini-l{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:1100px){.sa-hero{grid-template-columns:repeat(3,1fr)}.sa-mini{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.sa-hero,.sa-mini{grid-template-columns:repeat(2,1fr)}}

.sa-warn{background:var(--amber-light);border:1.5px solid #fde68a;border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:10px;margin-top:8px}
.sa-warn-ico{font-size:18px;color:var(--amber)}
.sa-warn b{font-size:13px;color:var(--amber);font-weight:700;display:block}
.sa-warn span{font-size:11px;color:#a16207}

/* AI vragen compacte regel-lijst */
.sa-ai-list{display:flex;flex-direction:column}
.sa-ai-row{display:grid;grid-template-columns:145px 130px 1fr;gap:12px;align-items:baseline;padding:6px 2px;border-bottom:1px solid var(--border);font-size:12px}
.sa-ai-row:last-child{border-bottom:none}
.sa-ai-tijd{color:var(--text3);font-size:10.5px;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.sa-ai-usr{color:var(--text2);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-ai-vraag{color:var(--text1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Superadmin dashboard redesign ── */
.sa-dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 18px}
.sa-dash-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:16px 18px;position:relative;min-height:96px}
.sa-dash-card.warn{border-color:var(--amber)}
.sa-dash-card.bad{border-color:var(--red);background:linear-gradient(135deg, var(--bg2), color-mix(in srgb, var(--red) 6%, var(--bg2)))}
.sa-dash-card.good{border-color:var(--green)}
.sa-dc-lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;font-weight:600;margin-bottom:8px}
.sa-dc-val{font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1;color:var(--text1)}
.sa-dash-card.warn .sa-dc-val{color:var(--amber)}
.sa-dash-card.bad  .sa-dc-val{color:var(--red)}
.sa-dash-card.good .sa-dc-val{color:var(--green)}
.sa-dc-sub{font-size:11px;color:var(--text2);margin-top:7px;display:flex;flex-wrap:wrap;gap:4px;line-height:1.4}
.sa-dc-chip{font-size:10px;font-weight:700;padding:1px 7px;border-radius:4px;background:var(--bg3);color:var(--text2);letter-spacing:.2px}
.sa-dc-bar{margin-top:10px;height:5px;background:var(--bg3);border-radius:3px;overflow:hidden}
.sa-dc-bar-f{height:100%;background:linear-gradient(90deg, var(--green), color-mix(in srgb, var(--green) 70%, transparent));border-radius:3px;transition:width .3s}

@media(max-width:1100px){.sa-dash-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.sa-dash-grid{grid-template-columns:1fr}}

/* search input theme override */
#saKantZoek::placeholder{color:var(--text3)}
#saKantZoek:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(26,107,220,.15)}

/* ─── Responsive: smalle schermen (admin + superadmin) 
   Tabs niet wrappen maar horizontaal scrollbaar; tabellen idem. */
@media (max-width: 900px) {
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: thin;
  }
  .tabs::-webkit-scrollbar { height: 4px; }
 .tabs::-webkit-scrollbar-thumb { background: var(--border2, #cbd5e1); border-radius: 2px; }
  .tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .card { padding: 14px 12px; }
  .card-title { flex-wrap: wrap; gap: 6px }
  .grid2, .grid3 { grid-template-columns: 1fr }
 /* Tabellen: voorkom dat ze de pagina horizontaal laten scrollen op de body —
     elke tabel scrolt binnen z'n eigen card. */
  .card > .tbl,
  .card > table.tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .tbl { min-width: 640px }
}
@media (max-width: 600px) {
  h1 { font-size: 22px }
  .sub { font-size: 12px }
  .filterbar { flex-direction: column; align-items: stretch; gap: 6px }
  .btn-sm, .adm-btn.sm, .adm-btn-ghost.sm { font-size: 12px }
}

/* ─── Mobile safety overrides 
   Modals: full-width clamp, drawer naar 1 kolom, body max-height keyboard-safe.
   Tables: extra class-coverage voor result-table/ant-table/lijst-tbl/admin-tabel.
*/
@media(max-width:760px){
 /* Modal-cards vol breedte met 12px-margin links/rechts (override inline width:NNNpx) */
  .detail-modal{width:calc(100% - 24px) !important;max-width:calc(100% - 24px) !important;max-height:calc(100vh - 60px);padding:18px 16px;border-radius:14px}
 /* Drawer wordt bottom-sheet-achtig: vol-breed + grid 1 kolom */
  .offerte-drawer{width:100% !important;max-width:100% !important;border-radius:0}
  .offerte-drawer-body{grid-template-columns:1fr !important;padding:14px 16px;gap:12px}
  .offerte-drawer-head{padding:14px 16px}
  .offerte-drawer-foot{padding:12px 16px;flex-wrap:wrap}
  .offerte-drawer-foot .btn{flex:1 1 calc(50% - 5px);justify-content:center}
 /* Tabel-overflow (uitbreiding van bestaande .tbl regel) */
  table.tbl,
  table.zebra,
  table.result-table,
  table.ant-table,
  table.lijst-tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  table.tbl thead,
  table.zebra thead,
  table.result-table thead,
  table.ant-table thead,
  table.lijst-tbl thead{white-space:nowrap}
 /* Admin-tabel mobile: blijft echte tabel met horizontale scroll via
     parent <div style="overflow-x:auto">. Cellen nowrap zodat tabel breder
     wordt dan viewport (triggert side-scroll). Naam-/beschrijving-kolommen
     krijgen max-width met wrap zodat 1 lange naam niet de tabel domineert. */
  table.admin-tabel{display:table !important;width:auto !important;min-width:100% !important;max-width:none !important;overflow:visible !important}
  table.admin-tabel thead{display:table-header-group}
  table.admin-tabel tbody{display:table-row-group}
  table.admin-tabel tr{display:table-row}
  table.admin-tabel th,
  table.admin-tabel td{display:table-cell;white-space:nowrap;padding:8px 10px;font-size:12px;vertical-align:middle}
 /* Eerste 1-3 inhoud-kolommen mogen wrappen met max-width — voorkomt 600px-brede cellen */
  table.admin-tabel td:nth-child(2),
  table.admin-tabel td:nth-child(3),
  table.admin-tabel td:nth-child(4){white-space:normal;word-break:break-word;max-width:200px;min-width:120px}
}
@media(max-width:480px){
 /* Modal nog tighter op kleine telefoon */
  .detail-modal{padding:14px 12px}
  .detail-modal h3{font-size:14px}
 /* Footer-knoppen volle breedte */
  .offerte-drawer-foot .btn{flex:1 1 100%}
}
/* Font-sharpness — crispness via -webkit-font-smoothing */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}
h1{ letter-spacing:-.6px; font-weight:800 }
h2{ letter-spacing:-.4px; font-weight:700 }
.sa-dc-val{ letter-spacing:-.8px; font-variant-numeric:tabular-nums; font-feature-settings:'ss01' }
.sa-dc-lbl{ letter-spacing:.85px }
/* eind sharpness-test */
/* ─── SIDEBAR-LEAN TEST — icon-tile alleen op active (tenant admin) ─── */
.nav-item svg{ background:transparent !important; padding:3px !important }
.nav-item:hover svg{ background:rgba(255,255,255,.10) !important }
.nav-item.active svg{ background:#1a6bdc !important; padding:5px !important; box-shadow:0 4px 12px rgba(26,107,220,.35) !important }
.sb-logo + .nav-item{ margin-top:18px !important }
/* eind sidebar-lean */
/* ─── SIDEBAR-LEAN TEST — icon-tile alleen op active (SA) ─── */
.sb-link svg{ background:transparent; padding:3px }
.sb-link:hover svg{ background:rgba(255,255,255,.10) }
.sb-link.actief svg{ background:#1a6bdc; padding:5px; box-shadow:0 4px 12px rgba(26,107,220,.35) }
.sb-logo + .sb-link{ margin-top:18px !important }
/* eind sidebar-lean */
/* ─── ICON-SHARPNESS TEST — geometricPrecision + uniform stroke (SA) ─── */
svg{ shape-rendering:geometricPrecision }
.sb-link svg,.adm-icon-btn svg,.btn svg{ vector-effect:non-scaling-stroke }
/* eind icon-sharpness */


/* ─── CTB-ARROWS — back/forward navigatie in content-topbar ─── */
.ctb-arrow{
  background:transparent;border:0;cursor:pointer;padding:0;border-radius:6px;
  width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;line-height:0;
  color:var(--text1);transition:background .12s,color .12s,opacity .12s;
}
.ctb-arrow:hover:not(:disabled){ background:var(--bg3) }
.ctb-arrow:disabled{ color:var(--text3); cursor:default; opacity:.55 }
.ctb-sep{ width:1px;height:20px;background:rgba(255,255,255,.18);display:inline-block;margin:0 6px }
html:not([data-theme="dark"]) .ctb-sep{ background:rgba(15,39,68,.22) }
html .content-topbar-titel{
  font-family:var(--font,'DM Sans',system-ui,sans-serif);
  font-weight:700;letter-spacing:-.1px;color:var(--text1);font-size:13.5px;
}
html[data-theme="dark"] .ctb-arrow:hover:not(:disabled){ background:rgba(255,255,255,.08); color:#fff }
/* eind ctb-arrows */

/* ─── SB-LOGO — portaal-stijl (auto-height, eigen padding voor lucht boven/onder) ─── */
nav.sidebar > .sb-logo, aside.sidebar > .sb-logo{ box-sizing:border-box !important; height:56px !important; padding:0 22px !important; display:flex !important; align-items:center !important; justify-content:flex-start !important }
/* eind sb-logo */


/* SB-LOGO TILE — witte kaart rond logo */
.sb-logo-tile{
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);
  border-radius:7px;
  padding:3px;
  width:25px;height:25px;box-sizing:border-box;
  flex-shrink:0;
  box-shadow:none;
 color:var(--vorio-logo-text,#0f2744);
  overflow:hidden;
}
html[data-theme="dark"] .sb-logo-tile{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.20)}
.sb-logo-tile img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* eind sb-logo-tile */

/* Crop modal (gedeeld met SA-profielfoto) */
.crop-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10001;align-items:center;justify-content:center}
.crop-overlay.open{display:flex}
.crop-box{background:var(--bg2);border-radius:14px;padding:20px;width:340px;max-width:92vw;box-shadow:0 16px 48px rgba(0,0,0,.3)}
.crop-box h3{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--text1)}
.crop-preview-wrap{position:relative;width:260px;height:260px;margin:0 auto 14px;overflow:hidden;border-radius:50%;border:3px solid var(--border);background:#f7f8fa;cursor:grab}
.crop-preview-wrap:active{cursor:grabbing}
.crop-preview-wrap img{position:absolute;user-select:none;-webkit-user-drag:none}
.crop-zoom{width:100%;margin:0 0 14px;accent-color:var(--p)}
.crop-actions{display:flex;gap:8px;justify-content:flex-end}
.crop-actions button{padding:7px 16px;border-radius:7px;font-size:12.5px;font-family:var(--font-body);cursor:pointer;border:none}
.crop-btn-cancel{background:#f1f3f5;color:var(--text2)}
.crop-btn-cancel:hover{background:var(--bg4)}
.crop-btn-save{background:var(--p);color:#fff}
.crop-btn-save:hover{opacity:.9}

/* Crop modal dark-mode */
html[data-theme="dark"] .crop-preview-wrap{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .crop-btn-cancel{background:rgba(255,255,255,.10) !important;color:var(--text1) !important}
html[data-theme="dark"] .crop-btn-cancel:hover{background:rgba(255,255,255,.18) !important}