/* beheer.css — Gedeelde styles voor admin.php (kantoor-beheer) + admin.vorio.nl/index.php (superadmin) Vereist: vorio-base.css (laden vóór dit bestand). */
/* admin.php — Kantoor-beheer panelen */
/* iOS Safari schaalt tabeltekst op bij smalle kolommen; hier uitgezet zodat dossier-nrs op mobiel niet 22-28px worden. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; --vorio-brand:var(--p) }
html[data-theme="light"]{
--accent:var(--vorio-brand); --accent2:#1558c0; --accent-light:#e8f4fc; --grad:linear-gradient(135deg,#1558c0,var(--vorio-brand));
--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 2px rgba(15,23,42,.05);
--font:'DM Sans',system-ui,sans-serif;
--mono:'DM Mono',monospace;
}
body{font-family:var(--font);background:var(--bg);color:var(--text1);min-height:100vh}
#loginScreen{position:fixed;inset:0;background:linear-gradient(135deg,#0f172a,#1e293b);display:flex;align-items:center;justify-content:center;z-index:var(--adm-z-login)}
#loginScreen::before{display:none}
.login-box{background:#fff;border:none;border-radius:var(--r-modal);padding:40px;width:100%;max-width:380px;box-shadow:var(--shadow-xl);position:relative;z-index:1}
.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 var(--space-3);border:1.5px solid #e2e8f0;border-radius:var(--r-2);font-size:13.5px;font-family:var(--font);color:var(--text1);background:#fff;outline:none;transition:border var(--t-base)}
.login-field input:focus{border-color:var(--accent,#1a6bdc);box-shadow:var(--ring)}
.login-btn{width:100%;padding:11px;background:var(--accent,#1a6bdc);color:#fff;border:none;border-radius:var(--r-2);font-size:14px;font-weight:600;cursor:pointer;transition:filter var(--t-base);font-family:var(--font);margin-top:6px}
.login-btn:hover{opacity:.92}
.login-btn:active{transform:scale(.99)}
#app{display:none}
.topbar{background:var(--bg2);border-bottom:1.5px solid var(--border);height:56px;display:flex;align-items:center;padding:0 28px;gap:14px;position:sticky;top:0;z-index:var(--adm-z-chrome)}
.topbar-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
.layout{display:block;min-height:100vh}
.sidebar{width:230px;background:#0f172a;color:#fff;flex-shrink:0;position:fixed;top:0;left:0;bottom:0;height:100vh;overflow-y:auto;border-right:none;display:flex;flex-direction:column;z-index:var(--adm-z-chrome)}
.sb-logo{padding:20px 18px 14px;border-bottom:1px solid rgba(255,255,255,.07);position:relative;display:flex;align-items:center;gap:var(--space-2)}
.sb-logo-btn{padding:0;flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-start;color:inherit}
/* SIDEBAR COLLAPSE — gedeeld tussen tenant-admin (beheer/admin.php nav.sidebar) én superadmin (admin.vorio.nl aside.sidebar)
State via data-attribute op sidebar element zelf:
- data-sb-collapsed = user-toggle (persistent in localStorage, alle schermformaten)
- data-sb-rail = auto-collapse op instellingen-panel (desktop-only, zie @media hieronder)
Beide modes renderen identiek: 52px icon-rail.
Tenant-admin gebruikt .nav-item als link-class, superadmin .sb-link — beide zelfde behavior. */
/* Rail-toggle buttons (twee namen behouden voor backward-compat met bestaande HTML) */
.adm-rail-toggle,.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}
.adm-rail-toggle svg,.sa-rail-toggle svg{flex-shrink:0;opacity:.92;box-sizing:content-box;padding:5px;background:rgba(255,255,255,.10);border-radius:var(--r-sm);color:#fff;transition:background var(--t-fast)}
.adm-rail-toggle:hover svg,.sa-rail-toggle:hover svg{background:rgba(255,255,255,.16);opacity:1}
/* Verberg toggle in rail-mode (instellingen) én op mobile (sidebar wordt drawer) */
.sidebar[data-sb-rail="1"] .adm-rail-toggle,
.sidebar[data-sb-rail="1"] .sa-rail-toggle{display:none}
@media(max-width: 768px){.adm-rail-toggle,.sa-rail-toggle{display:none}}
.ntf-svg-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
/* -- Collapsed sidebar (user-toggle, alle schermen) -- */
nav.sidebar[data-sb-collapsed="1"],
aside.sidebar[data-sb-collapsed="1"]{width:52px;overflow:visible;transition:width var(--t-base) ease}
.sidebar[data-sb-collapsed="1"] .nav-item,
.sidebar[data-sb-collapsed="1"] .sb-link{justify-content:center;padding:6px 0;margin:3px var(--space-2);gap:0;font-size:0;position:relative;overflow:visible;min-height:37px;white-space:nowrap}
.sidebar[data-sb-collapsed="1"] .nav-item > *,
.sidebar[data-sb-collapsed="1"] .sb-link > *{display:none}
/* Icoon absoluut centreren i.p.v. flex+margin:auto: WebKit houdt subpixel-restbreedte op font-size:0 label → icoon schuift per label-lengte. Absolute centrering is engine-onafhankelijk (nav-item/sb-link zijn position:relative). */
.sidebar[data-sb-collapsed="1"] .nav-item > svg,
.sidebar[data-sb-collapsed="1"] .nav-item > .nav-icon,
.sidebar[data-sb-collapsed="1"] .sb-link > svg{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;font-size:initial}
.sidebar[data-sb-collapsed="1"] .sb-link [style*=background]{display:none}
.sidebar[data-sb-collapsed="1"] .nav-item > .ntf-svg-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin:0;padding:0}
.sidebar[data-sb-collapsed="1"] .nav-item svg,
.sidebar[data-sb-collapsed="1"] .sb-link svg{width:15px;height:15px;padding:5px;background:rgba(255,255,255,.08);border-radius:var(--r-2);box-sizing:content-box}
.sidebar[data-sb-collapsed="1"] .nav-item .ntf-svg-wrap svg{width:13px;height:13px;padding:6px}
.sidebar[data-sb-collapsed="1"] .nav-item:hover svg,
.sidebar[data-sb-collapsed="1"] .sb-link:hover svg{background:rgba(255,255,255,.16)}
.sidebar[data-sb-collapsed="1"] .nav-item.active svg{background:var(--vorio-brand);box-shadow:none}
.sidebar[data-sb-collapsed="1"] .sb-link.actief svg{background:var(--vorio-brand);box-shadow:0 4px 12px color-mix(in srgb,var(--p) 35%,transparent)}
.sidebar[data-sb-collapsed="1"] .nav-section,
.sidebar[data-sb-collapsed="1"] .nav-sub-groep,
.sidebar[data-sb-collapsed="1"] .sb-sec{display:none}
.sidebar[data-sb-collapsed="1"] .nav-item-first,
.sidebar[data-sb-collapsed="1"] .sb-logo + .nav-item{margin-top:3px}
nav.sidebar[data-sb-collapsed="1"] > .sb-logo,
aside.sidebar[data-sb-collapsed="1"] > .sb-logo{padding:var(--space-2);justify-content:center;gap:0}
.sidebar[data-sb-collapsed="1"] .sb-logo-btn{display:none}
/* Hover-tooltip (800ms delay) op collapsed/rail nav-items — label rechts naast icon.
Werkt voor .nav-item (tenant) én .sb-link (superadmin) in beide collapse-modes. */
.sidebar[data-sb-collapsed="1"] .nav-item[data-tip]::after,
.sidebar[data-sb-collapsed="1"] .sb-link[data-tip]::after,
.sidebar[data-sb-rail="1"] .nav-item[data-tip]::after,
.sidebar[data-sb-rail="1"] .sb-link[data-tip]::after{content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:#0f172a;color:#fff;padding:6px 10px;border-radius:var(--r-sm);font-size:12px;font-weight:500;white-space:nowrap;z-index:var(--adm-z-tooltip);pointer-events:none;box-shadow:var(--shadow-sm);border:1px solid rgba(255,255,255,.10);font-family:var(--font,'DM Sans',system-ui,sans-serif);letter-spacing:.1px;opacity:0;visibility:hidden;transition:opacity var(--t-fast) ease,visibility 0s linear var(--t-fast)}
.sidebar[data-sb-collapsed="1"] .nav-item[data-tip]:hover::after,
.sidebar[data-sb-collapsed="1"] .sb-link[data-tip]:hover::after,
.sidebar[data-sb-rail="1"] .nav-item[data-tip]:hover::after,
.sidebar[data-sb-rail="1"] .sb-link[data-tip]:hover::after{opacity:1;visibility:visible;transition:opacity var(--t-fast) ease .8s,visibility 0s linear .8s}
body.no-tip .nav-item[data-tip]::after,body.no-tip .sb-link[data-tip]::after{display:none}
html[data-theme="light"] .sidebar[data-sb-collapsed="1"] .nav-item[data-tip]::after,
html[data-theme="light"] .sidebar[data-sb-collapsed="1"] .sb-link[data-tip]::after,
html[data-theme="light"] .sidebar[data-sb-rail="1"] .nav-item[data-tip]::after,
html[data-theme="light"] .sidebar[data-sb-rail="1"] .sb-link[data-tip]::after{background:#fff;color:#0f172a;border-color:rgba(15,23,42,.12)}
/* -- Rail mode (instellingen-panel) — ALLEEN desktop (>881px), op mobiel drawer-gedrag zonder centering.
Logo tile blijft links op mobiel (net als de nav-items eronder). -- */
@media (min-width: 881px){
.sidebar[data-sb-rail="1"] .sb-logo-btn{justify-content:center;padding:0}
nav.sidebar[data-sb-rail="1"] > .sb-logo,
aside.sidebar[data-sb-rail="1"] > .sb-logo{padding:var(--space-2) 0;justify-content:center;gap:0}
}
/* Mobile drawer (<1024px): dwing .sb-logo en tile links, ongeacht data-sb-rail/collapsed state.
Hogere specificity (nav.sidebar/aside.sidebar > .sb-logo binnen @media) + source-order wint van rail/collapsed rules. */
@media (max-width: 1023px){
nav.sidebar > .sb-logo,
aside.sidebar > .sb-logo{justify-content:flex-start;padding:0 22px;gap:var(--space-2)}
nav.sidebar .sb-logo-btn,
aside.sidebar .sb-logo-btn{justify-content:flex-start;padding:0;display:flex;flex:1}
}
/* Admin user-pill onderaan sidebar (zelfde patroon als portaal) */
.adm-sb-bottom{margin-top:auto;padding:var(--space-2) 10px var(--space-3);border-top:none;flex-shrink:0;display:flex;flex-direction:column;gap:var(--space-1)}
.adm-sb-bottom .user-pill{display:flex;align-items:center;gap:9px;padding:var(--space-2) 10px;border-radius:var(--r-2);background:rgba(255,255,255,.08);cursor:pointer;transition:background var(--t-base);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);border:0;box-sizing:border-box;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 (desktop-only — op mobiel opent sidebar altijd full-width, dus pill blijft compleet) */
/* User-pill compact in collapsed — globaal (collapse-breedte + label-hiding zijn ook globaal; zonder dit werd de bottom-pill op mobiel <769px niet ingeklapt terwijl de rail wel 52px smal is, waardoor chevron/naam uit de rail poken). Rail-variant blijft desktop-only, zie nested @media. */
/* Bottom-container (tenant: .adm-sb-bottom, super: .sb-bottom) én generieke .user-pill compact in collapsed/rail */
.sidebar[data-sb-collapsed="1"] .adm-sb-bottom,
.sidebar[data-sb-collapsed="1"] .sb-bottom{padding:var(--space-2) 0 10px;display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:52px;overflow:hidden;box-sizing:border-box}
.sidebar[data-sb-collapsed="1"] .user-pill{padding:0;background:transparent;justify-content:center;gap:0;width:34px;max-width:34px;flex:0 0 34px;overflow:hidden;box-sizing:border-box}
.sidebar[data-sb-collapsed="1"] .user-pill:hover{background:transparent}
.sidebar[data-sb-collapsed="1"] .user-pill > *{display:none}
.sidebar[data-sb-collapsed="1"] .user-pill > .user-av{display:flex;width:34px;height:34px;flex:0 0 34px;border:0}
.sidebar[data-sb-collapsed="1"] .user-pill .chevron{display:none}
/* Rail-variant desktop-only: mobiele drawer (<881px) toont bottom-pill altijd uitgeklapt */
@media (min-width:881px){
.sidebar[data-sb-rail="1"] .adm-sb-bottom,
.sidebar[data-sb-rail="1"] .sb-bottom{padding:var(--space-2) 0 10px;display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:52px;overflow:hidden;box-sizing:border-box}
.sidebar[data-sb-rail="1"] .user-pill{padding:0;background:transparent;justify-content:center;gap:0;width:34px;max-width:34px;flex:0 0 34px;overflow:hidden;box-sizing:border-box}
.sidebar[data-sb-rail="1"] .user-pill:hover{background:transparent}
.sidebar[data-sb-rail="1"] .user-pill > *{display:none}
.sidebar[data-sb-rail="1"] .user-pill > .user-av{display:flex;width:34px;height:34px;flex:0 0 34px;border:0}
.sidebar[data-sb-rail="1"] .user-pill .chevron{display:none}
}
.nav-section{padding:9px var(--space-3) var(--space-1);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:var(--space-2) var(--space-3);margin:0 10px;border-radius:var(--r-2);font-size:12.5px;font-weight:500;color:rgba(255,255,255,.84);cursor:pointer;transition:background var(--t-base),color var(--t-base);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:color-mix(in srgb,var(--p) 10%,transparent);color:#fff;border-left-color:transparent;font-weight:700}
.nav-item svg{flex-shrink:0;opacity:.92;transition:background var(--t-base),opacity var(--t-base),color var(--t-base);box-sizing:content-box;padding:5px;background:rgba(255,255,255,.10);border-radius:var(--r-sm);color:#fff}
.nav-item:hover svg{background:rgba(255,255,255,.16)}
.nav-item.active svg{opacity:1;background:var(--vorio-brand);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--p) 35%,transparent)}
.nav-sub-groep{display:none;border-left:2px solid rgba(255,255,255,.1);margin:2px 0 var(--space-1) 28px}
.nav-sub-groep.zichtbaar{display:block}
.nav-sub{display:flex;align-items:center;gap:7px;padding:6px var(--space-3);font-size:12.5px;font-weight:600;color:rgba(255,255,255,.5);cursor:pointer;transition:all var(--t-fast);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:color-mix(in srgb,var(--p) 10%,transparent);font-weight:600}
.main{flex:1;padding:var(--space-5);overflow-x:clip}
.main-inner{padding:28px;flex:1}
@media(max-width: 700px){.main-inner{padding:var(--space-3)}}
/* Tenant-admin margin-left alleen op desktop (>1024px). Op mobiel wordt sidebar drawer,
.main krijgt margin-left:0 via mobile @media in admin.php inline styles. */
@media (min-width: 1025px){
.layout > .main{margin-left:230px;transition:margin-left var(--t-base) ease}
.layout > nav.sidebar[data-sb-collapsed="1"] ~ .main{margin-left:52px;transition:margin-left var(--t-base) ease}
}
.panel{display:none}
.panel.active{display:block}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-3);margin-bottom:var(--space-5)}
.kpi{background:var(--bg2);border:var(--bd);border-radius:var(--r-card);padding:var(--space-4);box-shadow:var(--shadow)}
.kpi-val{font-size:28px;font-weight:700;line-height:1;margin-bottom:var(--space-1)}
.kpi.blauw .kpi-val{color:var(--kc)}
.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)}
.sectie-hoofd{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-4);flex-wrap:wrap;min-height:51px}
.sectie-hoofd h2{font-size:15px;font-weight:700;flex:1;letter-spacing:-.2px;margin:0}
/* .sectie-hoofd .count: canon = token-variant verderop in dit bestand (dedup 2026-09-22, hardcoded-hex dubbel verwijderd) */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:600;line-height:1.4;white-space:nowrap;border:1px solid transparent}
.badge.groen,.badge-groen{background:var(--green-light);color:var(--green)}
.badge.amber,.badge-amber{background:var(--amber-light);color:var(--amber)}
.badge.rood,.badge-rood{background:var(--red-light);color:var(--red)}
.badge.blauw,.badge-blauw{background:var(--accent-light);color:var(--kc)}
.badge.grijs,.badge-grijs{background:var(--bg3);color:var(--text3)}
.badge.paars{background:var(--purple-light);color:var(--purple)}
.badge.goud{background:#fef9e7;color:#b8860b}
/* DEBITEUR STATUS POPUP */
.deb-status-btn{display:inline-flex;align-items:center;gap:var(--space-1);background:none;border:none;padding:0;cursor:pointer;font-family:var(--font)}
.deb-status-btn:hover .badge{opacity:.85;transform:scale(1.03)}
/* .btn base-herdef verwijderd 2026-09-16 — canon .v-btn (alias) is leidend. */
/* .btn-groen verwijderd 2026-09-16 — dode code (0 gebruik). */
/* Backwards-compat aliassen */
.btn-primary{background:var(--accent);color:#fff;border:none}
.filter-bar{display:flex;gap:var(--space-2);margin-bottom:14px;flex-wrap:wrap;align-items:center}
.filter-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 13px;border-radius:var(--r-modal);border:var(--bd-strong);background:var(--bg2);color:var(--text2);font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;transition:all var(--t-base);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:var(--bd-strong);border-radius:var(--r-2);font-size:12.5px;font-family:var(--font);background:var(--bg2);color:var(--text1);outline:none;transition:border var(--t-base)}
.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:var(--space-5);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:var(--space-2) var(--space-3);border-radius:var(--r-2);cursor:pointer;color:var(--text2);font-size:13px;font-weight:500;text-decoration:none;transition:background var(--t-base),color var(--t-base)}
.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(--kc);font-weight:700}
.inst-content{flex:1;min-width:0}
.inst-mw{max-width:640px}
.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:20px;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:var(--bd);border-radius:var(--r-pill);padding:2px 9px;font-weight:600}
/* 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;border:none;box-shadow:none;border-radius:0;padding:0;margin-bottom:0}
/* 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}
/* Vestigingen — simpel card-design met altijd-zichtbare delete-X */
.vest-lijst{display:flex;flex-direction:column;gap:var(--space-2)}
.vest-lijst.vest-leeg{border:1px dashed var(--border);border-radius:var(--r-card);padding:0}
.vest-head{display:grid;grid-template-columns:18px 26px 46px 1.05fr 1.55fr 1.3fr 34px;gap:10px;align-items:center;padding:0 var(--space-3) var(--space-2)}
.vest-head span{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vest-card{display:grid;grid-template-columns:18px 26px 46px 1.05fr 1.55fr 1.3fr 34px;gap:10px;align-items:center;padding:9px var(--space-3);background:var(--bg3);border:var(--bd);border-radius:var(--r-card);transition:border-color var(--t-fast),background var(--t-fast)}
.vest-card:hover{border-color:color-mix(in srgb,var(--p) 40%,var(--border));background:var(--bg2)}
.vest-drag{display:flex;align-items:center;justify-content:center;width:18px;height:34px;color:var(--text3);cursor:grab;opacity:.4;transition:opacity var(--t-fast)}
.vest-drag:active{cursor:grabbing}
.vest-card:hover .vest-drag{opacity:.85}
.vest-drag svg{width:14px;height:14px}
.vest-card.vest-dragging{opacity:.45}
.vest-card.vest-drop{box-shadow:inset 0 2px 0 0 var(--p)}
.vest-kleur{position:relative;width:26px;height:26px;flex-shrink:0;cursor:pointer;border-radius:var(--r-2);box-shadow:0 0 0 1px var(--border),inset 0 0 0 1.5px rgba(255,255,255,.14);transition:transform var(--t-fast)}
.vest-kleur:hover{transform:scale(1.08)}
.vest-kleur input[type=color]{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:transparent;opacity:0}
.vest-kleur-dot{position:absolute;inset:0;border-radius:var(--r-2);pointer-events:none}
.vest-kleur::after{content:"";position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;background:var(--bg2);border:var(--bd);background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:center;opacity:0;transition:opacity var(--t-fast)}
.vest-card:hover .vest-kleur::after{opacity:1}
.vest-kleur:hover::after{background-image:url("data:image/svg+xml;utf8,")}
/* Beeld-acties: hover-chips op logo/banner previews (Instellingen -> Huisstijl) */
.v-imgprev{position:relative}
.v-imgchips{position:absolute;top:6px;right:6px;display:flex;gap:5px;opacity:.5;transform:translateY(-1px);transition:opacity var(--t-fast),transform var(--t-fast)}
.v-imgprev:hover .v-imgchips,.v-imgprev:focus-within .v-imgchips{opacity:1;transform:none}
.v-imgchip{position:relative;width:27px;height:27px;border-radius:var(--r-2);border:var(--bd);background:color-mix(in srgb,var(--bg2) 85%,transparent);backdrop-filter:blur(5px);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.v-imgchip svg{width:15px;height:15px}
.v-imgchip:hover{color:#fff;background:var(--vorio-brand);border-color:var(--vorio-brand)}
.v-imgchip--del:hover{color:#fff;background:var(--red,#dc2626);border-color:var(--red,#dc2626)}
.v-imgchip input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.v-imgempty{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:var(--space-4) var(--space-3);font-size:11.5px;font-weight:600;color:var(--text3);cursor:pointer;transition:color var(--t-fast)}
.v-imgempty svg{width:15px;height:15px}
.v-imgempty:hover{color:var(--vorio-brand)}
.v-imgempty input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
/* Pandfoto-thumbnail per vestiging — verschijnt op de VorioConnect afspraak-kaart */
.vest-foto{position:relative;width:46px;height:34px;flex-shrink:0;padding:0;border-radius:var(--r-2);border:var(--bd);background:var(--bg2) center/cover no-repeat;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text3);transition:border-color var(--t-fast),color var(--t-fast)}
.vest-foto:hover{border-color:color-mix(in srgb,var(--p) 55%,var(--border));color:var(--kc)}
.vest-foto--leeg{border-style:dashed}
.vest-foto--leeg svg{width:16px;height:16px}
.vest-foto--set{box-shadow:0 0 0 1px var(--border)}
.vest-foto-x{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;background:var(--bg2);border:var(--bd);display:flex;align-items:center;justify-content:center;color:var(--text3);opacity:0;cursor:pointer;transition:opacity var(--t-fast),color var(--t-fast)}
.vest-foto-x svg{width:8px;height:8px}
.vest-card:hover .vest-foto-x{opacity:1}
.vest-foto-x:hover{color:var(--red)}
/* AI-assistent logo-control (rond; pen + verwijderen verschijnen bij hover, vestigingen-stijl) */
.ai-logo-ctl{position:relative;flex:none;width:46px;height:46px;cursor:pointer}
.ai-logo-av{position:relative;width:46px;height:46px;border-radius:50%;overflow:hidden;display:grid;place-items:center;color:#fff;font-weight:800;font-size:19px;letter-spacing:.01em;background:linear-gradient(140deg,var(--p,#1a6bdc),#0f2744);box-shadow:0 3px 8px -4px color-mix(in srgb,var(--p,#1a6bdc) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.22);transition:box-shadow var(--t-fast,var(--t-base,.15s))}
.ai-logo-ctl:hover .ai-logo-av{box-shadow:0 0 0 2px color-mix(in srgb,var(--p,#1a6bdc) 45%,transparent),0 4px 12px -4px color-mix(in srgb,var(--p,#1a6bdc) 45%,transparent)}
.ai-logo-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ai-logo-badge{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--bg2,#111a2c);border:1px solid var(--border,#3a4664);display:none;align-items:center;justify-content:center;color:var(--text3,#8a96ac);box-shadow:var(--shadow);transition:color var(--t-fast,var(--t-base,.15s)),border-color var(--t-fast,var(--t-base,.15s))}
.ai-logo-badge svg{width:9px;height:9px}
.ai-logo-pen{right:-3px;bottom:-3px}
.ai-logo-x{right:-4px;top:-4px;cursor:pointer}
.ai-logo-ctl:hover .ai-logo-pen{display:flex}
.ai-logo-pen:hover{color:var(--p,#1a6bdc)}
.ai-logo-ctl.has:hover .ai-logo-x{display:flex}
.ai-logo-x:hover{color:var(--red,#e5484d);border-color:color-mix(in srgb,var(--red,#e5484d) 50%,var(--border,#3a4664))}
.vest-card .v-rij-x-lg{width:34px;height:34px}
.vest-card .v-rij-x-lg svg{width:14px;height:14px}
.vest-input{width:100%;height:var(--ctrl-h);padding:0 11px;border:1px solid transparent;border-radius:var(--r-sm);font-size:13px;font-family:inherit;color:var(--text1);background:var(--bg4);box-sizing:border-box;transition:border-color var(--t-fast),background var(--t-fast);min-width:0;text-overflow:ellipsis}
html[data-theme="dark"] .vest-input{background:rgba(255,255,255,.03)}
.vest-input:focus{outline:none;border-color:var(--p);background:var(--bg2);box-shadow:var(--ring)}
.vest-input.vest-naam{font-weight:600}
.vest-url-wrap{position:relative;display:block;min-width:0}
.vest-url-ic{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text3);pointer-events:none}
.vest-input.vest-url{padding-left:var(--space-6);padding-right:30px;font-size:12px;color:var(--text2);font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace)}
.vest-url-ok{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--green);opacity:0;pointer-events:none;transition:opacity var(--t-fast)}
.vest-url-wrap:has(.vest-url:not(:placeholder-shown)) .vest-url-ok{opacity:1}
.vest-add{margin-top:var(--space-2);width:100%;height:44px;display:flex;align-items:center;justify-content:center;gap:var(--space-2);background:none;border:1px dashed var(--border2);border-radius:var(--r-card);color:var(--text2);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast)}
.vest-add:hover{border-color:var(--p);color:var(--kc);background:color-mix(in srgb,var(--p) 8%,transparent)}
.vest-add svg{width:15px;height:15px}
.vest-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:var(--space-4)}
.vest-dirty{display:inline-flex;align-items:center;gap:var(--space-2);font-size:12.5px;color:var(--text3);visibility:hidden}
.vest-dirty.on{visibility:visible}
.vest-dirty-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 22%,transparent)}
@media (max-width:720px){
.vest-head{display:none}
.vest-card .vest-drag{display:none}
.vest-card{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.vest-card .vest-naam{order:1;flex:1;min-width:120px}
.vest-card .v-rij-x{order:2}
.vest-card .vest-adres{order:3;flex-basis:100%}
.vest-card .vest-url-wrap{order:4;flex-basis:100%}
}
@media (max-width: 880px){
/* Drawer-pattern op mobiel: trigger-knop opent slide-in nav links */
.inst-shell{flex-direction:column;align-items:stretch;margin-top:0}
.inst-page-h1{margin-bottom:var(--space-3)}
.inst-trigger{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;border:var(--bd);border-radius:var(--r-card);background:var(--bg2);color:var(--text1);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;margin-bottom:var(--space-3)}
.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 var(--t-slow),visibility var(--t-slow);z-index:var(--adm-z-inst-bg);backdrop-filter:blur(2px)}
.inst-bd.open{opacity:1;visibility:visible}
.inst-subnav{position:fixed;top:0;left:0;bottom:0;width:min(320px,86vw);max-width:none;background:var(--bg2);border-right:1px solid var(--border);transform:translateX(-100%);transition:transform var(--t-slow) ease;z-index:var(--adm-z-inst);overflow-y:auto;padding:0 10px 18px;margin:0;flex-direction:column}
.inst-subnav.open{transform:translateX(0);box-shadow:6px 0 24px rgba(0,0,0,.35)}
.inst-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:max(var(--space-4),env(safe-area-inset-top)) 6px var(--space-3);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:var(--r-2);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 var(--space-3);font-size:14px}
.inst-sub-sec{padding:14px 10px var(--space-1);font-size:10px}
}
/* Dual-sidebar — main-sidebar krimpt naar icon-rail in Instellingen-panel (desktop-only) */
@media (min-width: 881px){
nav.sidebar[data-sb-rail="1"],
aside.sidebar[data-sb-rail="1"]{width:52px;overflow:visible}
.layout > nav.sidebar[data-sb-rail="1"] ~ .main{margin-left:52px}
.sidebar[data-sb-rail="1"] .nav-item,
.sidebar[data-sb-rail="1"] .sb-link{justify-content:center;padding:6px 0;margin:3px var(--space-2);gap:0;font-size:0;position:relative;overflow:visible;min-height:37px}
.sidebar[data-sb-rail="1"] .nav-item > *,
.sidebar[data-sb-rail="1"] .sb-link > *{display:none}
.sidebar[data-sb-rail="1"] .nav-item > svg{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;font-size:initial}
.sidebar[data-sb-rail="1"] .nav-item > .ntf-svg-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin:0;padding:0}
.sidebar[data-sb-rail="1"] .nav-item .ntf-svg-wrap svg{width:13px;height:13px;padding:6px}
.sidebar[data-sb-rail="1"] .nav-item svg,
.sidebar[data-sb-rail="1"] .sb-link svg{width:15px;height:15px;padding:5px;background:rgba(255,255,255,.08);border-radius:var(--r-2);box-sizing:content-box}
.sidebar[data-sb-rail="1"] .nav-item:hover svg,
.sidebar[data-sb-rail="1"] .sb-link:hover svg{background:rgba(255,255,255,.16)}
.sidebar[data-sb-rail="1"] .nav-item.active svg{background:var(--vorio-brand);box-shadow:0 4px 12px color-mix(in srgb,var(--p) 35%,transparent)}
.sidebar[data-sb-rail="1"] .sb-link.actief svg{background:var(--vorio-brand);box-shadow:0 4px 12px color-mix(in srgb,var(--p) 35%,transparent)}
.sidebar[data-sb-rail="1"] .nav-section,
.sidebar[data-sb-rail="1"] .sb-sec{display:none}
.sidebar[data-sb-rail="1"] .nav-item-first,
.sidebar[data-sb-rail="1"] .sb-logo + .nav-item{margin-top:3px}
.sidebar[data-sb-rail="1"] .nav-sub-groep{display:none}
nav.sidebar[data-sb-rail="1"] > .sb-logo,
aside.sidebar[data-sb-rail="1"] > .sb-logo{padding:var(--space-2);justify-content:center}
/* .sb-logo-btn centering staat al top-level (line 113) — hier niet dupliceren */
/* Notif dot: wit op blauwe active-bubble voor contrast */
.sidebar[data-sb-rail="1"] .nav-item.active #navNotifDot{background:#fff;border-color:var(--vorio-brand)}
}
/* Bundle-tabs (Financieel, Compliance) — gedeelde tab-bar bovenaan bundle-panel */
.vorio-bundle-tabs{display:flex;gap:var(--space-1);margin:0 0 10px;padding:var(--space-1);background:var(--bg3);border:var(--bd);border-radius:var(--r-card);width:fit-content;max-width:100%}
.vorio-bundle-tab{display:inline-flex;align-items:center;min-height:calc(var(--ctrl-h) - 8px);padding:0 18px;background:transparent;border:none;border-radius:var(--r-sm);font-family:inherit;font-size:var(--font-md);font-weight:600;color:var(--text3);cursor:pointer;transition:background var(--t-base),color var(--t-base)}
.vorio-bundle-tab:hover{color:var(--text1)}
.vorio-bundle-tab.actief{background:var(--p);color:#fff;box-shadow:0 1px 3px color-mix(in srgb,var(--p) 30%,transparent)}
html[data-theme="dark"] .vorio-bundle-tab.actief{background:var(--p);color:#fff;box-shadow:var(--shadow)}
/* AI LOG (grid-uitlijning per kolom voor consistent rij-zicht) */
.log-rij{background:var(--bg2);border:var(--bd);border-radius:var(--r-2);margin-bottom:var(--space-2);overflow:hidden}
.log-kop{padding:10px 14px;display:grid;grid-template-columns:130px 170px 1fr 90px 70px 95px 14px;align-items:center;gap:var(--space-3);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-variant-numeric:tabular-nums;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:var(--bd);border-radius:var(--r-2);padding:2px var(--space-2);justify-self:end;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Mobiel: stack kolommen verticaal zodat alles past zonder horizontale scroll */
@media (max-width: 760px){
.log-kop{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);padding:10px var(--space-3)}
.log-kop > *{justify-self:auto;margin:0;width:auto;max-width:100%}
.log-kop .log-vraag-preview{white-space:normal;overflow:visible;text-overflow:initial;line-height:1.4;font-size:12.5px;color:var(--text1)}
.log-kop .log-tijdstip{font-size:10.5px}
.log-kop .log-mw-naam{font-size:12.5px;color:var(--text1)}
.log-kop .log-chev{position:absolute;top:10px;right:10px}
.log-rij{position:relative}
.log-kop .log-engine-cel,.log-kop .log-deel-cel,.log-kop .log-tokens{display:inline-flex;align-self:flex-start;margin-top:2px}
}
.log-body{display:none;border-top:1px solid var(--border);padding:var(--space-3) 14px}
.log-rij.open .log-body{display:block}
.log-vraag{background:var(--accent-light);border:1px solid var(--accent);border-radius:var(--r-sm);padding:10px var(--space-3);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:var(--r-sm);padding:10px var(--space-3);font-size:12.5px;line-height:1.6;white-space:pre-wrap}
/* AI-log: als antwoord markdown bevat (.adm-md), verwijder de gekleurde card-styling
zodat de tabel/headers dezelfde platte look krijgen als in de SA-view. */
.log-antwoord.adm-md { background:transparent; border:0; padding:0; white-space:normal; }
.log-vraag.adm-md { background:transparent; border:0; padding:0 0 var(--space-2); white-space:pre-wrap; color:var(--text1); }
.log-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);margin-bottom:5px}
.danger-zone{background:var(--red-light);border:1px solid var(--red-border);border-radius:var(--r-card);padding:var(--space-4) 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:var(--space-3);line-height:1.5}
.danger-acties{display:flex;gap:var(--space-2);flex-wrap:wrap}
/* 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:var(--adm-z-modal);display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:opacity var(--t-slow)}
.detail-modal-bg.open{visibility:visible;opacity:1}
.detail-modal{background:var(--bg2);color:var(--text1);border-radius:var(--r-card);width:var(--modal-md);max-width:94vw;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-xl);padding:var(--space-5)}
.detail-modal h3{font-size:15px;font-weight:700;margin-bottom:var(--space-4);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 var(--space-2);min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center;line-height:1;border-radius:var(--r-sm)}
.detail-modal .sluit:hover{background:var(--bg3)}
.detail-rij{display:flex;gap:var(--space-2);margin-bottom:var(--space-2);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-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:var(--adm-z-drawer-bg);visibility:hidden;opacity:0;transition:opacity var(--t-slow)}
.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:var(--adm-z-drawer);display:flex;flex-direction:column;transition:right var(--t-slow) ease;overflow:hidden}
.offerte-drawer-bg.open .offerte-drawer{right:0}
.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(--bg2)}
/* LEEG ── (rich variant: icon-in-circle + titel + uitleg) */
.leeg-blok{text-align:center;padding:var(--space-7) 20px;color:var(--text2)}
.leeg-blok .leeg-icon{width:52px;height:52px;border-radius:50%;background:var(--bg3);display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--text3)}
.leeg-blok .leeg-icon svg{width:22px;height:22px;opacity:.85;color:var(--text2)}
.leeg-blok svg{opacity:.55;color:var(--text3)}
.leeg-blok .v-btn svg{opacity:1;color:currentColor}
.leeg-blok .leeg-titel{font-size:14px;font-weight:600;color:var(--text1);margin:0 0 var(--space-1)}
.leeg-blok .leeg-uitleg{font-size:12.5px;color:var(--text3);line-height:1.5;margin:0;max-width:360px;margin-left:auto;margin-right:auto}
.leeg-blok p{font-size:13.5px;color:var(--text3);margin:0}
.pagina-wrap{display:flex;align-items:center;gap:var(--space-2);margin-top:14px;flex-wrap:wrap}
.pagina-wrap .pagina-info{font-size:12px;color:var(--text3);flex:1}
.grafiek-wrap{background:var(--bg2);border:var(--bd);border-radius:var(--r-card);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-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:var(--r-xs);overflow:hidden}
.stat-balk-fill{height:100%;background:var(--accent);border-radius:var(--r-xs);transition:width .5s ease}
.actlog-rij{display:grid;grid-template-columns:150px minmax(0,1fr) 92px 116px 132px auto;align-items:center;gap:var(--space-3);padding:7px 14px;border-bottom:1px solid var(--border);font-size:12.5px}
.actlog-rij:last-child{border-bottom:none}
.actlog-tijd{font-size:11px;font-variant-numeric:tabular-nums;color:var(--text3);white-space:nowrap}
.actlog-wie{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.actlog-wie .actlog-mail{color:var(--text3);font-size:12px;margin-left:6px}
.actlog-kantoor,.actlog-rol{min-width:0;overflow:hidden}
.actlog-kantoor .badge,.actlog-rol .badge{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.actlog-ip{font-size:11px;font-family:var(--mono);color:var(--text3);white-space:nowrap;text-align:right;justify-self:end}
.actlog-status{justify-self:end}
html.density-compact .actlog-rij{padding-top:3px;padding-bottom:3px}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--text1);flex-shrink:0}
.sidebar-overlay.open{display:block}
@media(max-width: 1100px){
/* KPI grids: 3 kolommen op kleinere schermen — ID-specificity beats .kpi-grid base */
#kpiGrid, #kpiGrid + div{grid-template-columns:repeat(3,1fr)}
}
@media(max-width: 768px){
/* KPI grids: 2 kolommen op mobiel */
#kpiGrid, #kpiGrid + div{grid-template-columns:repeat(2,1fr)}
/* login */
.login-box{width:92vw;padding:28px 20px}
/* topbar */
.topbar{padding:0 14px;gap:10px}
.topbar-logo img{height:22px}
#topbarTijd{display:none}
.menu-toggle{display:flex;align-items:center;justify-content:center}
/* sidebar als drawer — source order + @media wint van base .sidebar rule */
.sidebar{
position:fixed;top:0;left:0;bottom:0;z-index:200;
width:240px;transform:translateX(-100%);transition:transform var(--t-slow) ease;
box-shadow:none
}
.sidebar.open{transform:translateX(0);box-shadow:4px 0 20px rgba(0,0,0,.15)}
.sidebar-overlay{z-index:var(--adm-z-sidebar-ov)}
.layout > nav.sidebar[data-sb-collapsed="1"] ~ .main{margin-left:0}
/* main — margin-left reset op mobiel */
.main{padding:14px;margin-left:0}
.content-topbar{padding:0 26px}
/* KPI grid: 2 kolommen op mobiel */
.kpi-grid{grid-template-columns:1fr 1fr;gap:var(--space-2)}
.kpi{padding:var(--space-3)}
.kpi-val{font-size:22px}
/* cockpit grids: stapelen */
#cockpitGrids{grid-template-columns:1fr}
.grafiek-wrap + .grafiek-wrap{margin-top:0}
/* 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:var(--space-1) var(--space-2)}
/* danger zone */
.danger-zone{padding:var(--space-3) 14px}
.danger-acties{flex-direction:column}
.danger-acties .btn{width:100%;justify-content:center}
/* activiteitslog — 2-regel grid op mobiel: naam + status boven, tijd + IP als meta-regel eronder.
Voorkomt dat het lange e-mailadres over de IP-kolom heen valt (flex-min had geen overflow-grens). */
.actlog-rij{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:"wie status" "tijd ip";
align-items:start;column-gap:10px;row-gap:2px
}
.actlog-rij .actlog-wie{grid-area:wie;min-width:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.actlog-rij .actlog-status{grid-area:status;justify-self:end;align-self:center}
.actlog-rij .actlog-tijd{grid-area:tijd;min-width:0;font-size:10px}
.actlog-rij .actlog-ip{grid-area:ip;justify-self:end;text-align:right;white-space:nowrap}
.actlog-rij .actlog-kantoor,.actlog-rij .actlog-rol{display:none}
/* pagination */
.pagina-wrap{gap:6px}
/* Cockpit "Recente offertes" — voorkom horizontale overflow */
#cockpitOffertes, #cockpitAiLog, #cockpitOndertekenen{ overflow-x:auto; -webkit-overflow-scrolling:touch }
/* WWFT inzendingen / tokens — compactere mobile-layout */
#tbl-inzendingen, #tbl-tokens{ font-size:12.5px }#tbl-inzendingen td,#tbl-tokens td{ font-size:12.5px; padding:var(--space-2) 10px }
#tbl-inzendingen .nr, #tbl-tokens .nr{ font-size:13px; font-weight:600 }
}
@media(max-width: 400px){
.kpi-grid{grid-template-columns:1fr}
}
.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 var(--t-fast);
white-space: nowrap;
font-family: var(--font);
}
.insta-tab:hover {
border-bottom-color: color-mix(in srgb, var(--accent) 40%, transparent);
color: var(--kc);
background: var(--bg3);
}
.insta-tab.active {
color: var(--kc);
border-bottom-color: var(--accent);
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
/* VORIO-ADMIN STIJL OVERRIDES — override via source-order (dit blok komt na base-rules).
Latere identieke selectors winnen automatisch bij gelijke specificity. */
body{font-family:var(--font);background:var(--bg)}
.nav-sub::before{content:''}
/* Layout — .layout is display:flex voor tenant-admin (aparte block-mode is dead code) */
.layout{display:flex;min-height:100vh}
.main{flex:1;padding:28px}
/* .btn base-herdef verwijderd 2026-09-16 — canon .v-btn (alias) is leidend. */
/* Badges: canon = enkele bron hoger in dit bestand (dedup 2026-09-17) */
.sectie-hoofd h2{font-size:15px;font-weight:700;letter-spacing:-.2px;color:var(--text1);margin:0}
.sectie-hoofd .count{background:var(--bg3);border:var(--bd);color:var(--text3);font-size:11.5px;font-weight:600;border-radius:var(--r-card);padding:2px 9px}
.kpi{background:var(--bg2);border-radius:var(--r-card);box-shadow:var(--shadow);border:none;min-height:80px;display:flex;flex-direction:column;justify-content:center;padding:var(--space-4) 18px}
.kpi-val{font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1.1}
.filter-bar input,.filter-bar select{border:var(--bd);border-radius:var(--r-2);font-size:13px;font-family:var(--font);background:var(--bg2);color:var(--text1);padding:7px 11px}
.filter-bar input:focus,.filter-bar select:focus{border-color:var(--accent);box-shadow:var(--ring);outline:none}
.insta-tab{font-family:var(--font);font-size:13px;font-weight:600;border-bottom:2.5px solid transparent;color:var(--text3);padding:9px var(--space-4);margin-bottom:-1.5px;background:none;border-top:none;border-left:none;border-right:none}
.insta-tab.active{color:var(--kc);border-bottom-color:var(--accent);background:transparent}
.filter-btn{border-radius:var(--r-sm);border:var(--bd);background:var(--bg2);color:var(--text2);font-family:var(--font);font-size:12.5px;font-weight:600;padding:6px 14px}
.filter-btn:hover{border-color:var(--accent);color:var(--kc);background:var(--accent-light)}
.filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.leeg-blok{background:transparent;border:none;color:var(--text3)}
.leeg-blok p{color:var(--text3);font-size:13px}
/* Main content — margin-left alleen op desktop (>1024px). Op mobiel drawer-mode → margin:0. */
.main{background:var(--bg);padding:0}
@media (min-width: 1025px){
.layout > .main{margin-left:230px}
}
/* Panel = card zoals vorio-admin */
.panel{background:var(--bg2);border-radius:var(--r-card);box-shadow:var(--shadow);padding:var(--space-5);margin-bottom:18px}
.main>.panel,.main>div>.panel{margin-bottom:18px}
/* Groep B — cascade via source-order (dit blok staat ná de base-regels).
Voor identieke selectors wint de latere regel automatisch bij gelijke specificity. */
/* Sectie-hoofd als card-header */
.sectie-hoofd{border-bottom:1px solid var(--border);padding-bottom:14px;margin-bottom:18px}
.sectie-hoofd h2{font-size:15px;font-weight:700;color:var(--text1);letter-spacing:-.2px;margin:0}
.panel .filter-bar{margin-bottom:14px}
.selectie-balk{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:var(--r-2);margin-bottom:10px;font-size:13px;font-weight:600;color:#1d4ed8}
.danger-zone{border:1.5px solid rgba(239,68,68,.32);border-radius:var(--r-card);background:rgba(239,68,68,.10)}
.danger-zone h3{color:var(--red)}
/* Export/import knoppen consistentie */
.btn-ghost svg,.btn-primary svg{vertical-align:-2px}
/* 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:var(--adm-z-content-top);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;padding:9px var(--space-3) var(--space-1)}
/* Sub-kaarten binnen panel geen dubbele shadow */
.panel .kpi{box-shadow:var(--shadow)}
.panel .leeg-blok{background:transparent;border-radius:0;padding:40px 20px}
.kpi-grid{gap:var(--space-3)}
.kpi{border-radius:var(--r-card);padding:var(--space-4) 18px}
.kpi-val{font-size:26px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
/* MOBIEL EXTRAS — uniek voor mobiele iOS/edge-to-edge */
/* De .sidebar/.main mobile-drawer basis staat in het @media blok hierboven (line ~446-540).
Dit blok voegt alleen edge-to-edge topbar en iOS safe-area padding toe. */
@media(max-width: 768px){
.sidebar{height:100vh;padding-top:env(safe-area-inset-top, 0)}
.menu-toggle{display:flex;align-items:center;justify-content:center}
/* Topbar edge-to-edge op mobiel — flush tegen viewport-randen (portaal + superadmin pattern).
padding:0 14px + gap:10px voor consistente spacing tussen hamburger/arrows/titel/datum. */
.main > .topbar,
.main > .content-topbar{
margin:-14px -14px 14px -14px;
width:calc(100% + 28px);
border-radius:0;
max-width:none;
padding:env(safe-area-inset-top, 0) 26px 0;
gap:10px;
height:auto;
min-height:calc(56px + env(safe-area-inset-top, 0))
}
/* Menu-toggle: 6px extra rechts voor visuele scheiding van arrows/titel (superadmin sa-menu-toggle pattern) */
.main > .content-topbar > .menu-toggle{padding:6px var(--space-2);border-radius:var(--r-2);flex-shrink:0;margin-right:6px}
}
/* admin.vorio.nl/index.php — Superadmin sidebar + onboarding */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text1);min-height:100vh}
a{color:inherit;text-decoration:none}
.shell{display:flex;min-height:100vh}
/* Superadmin .main krijgt margin-left vanaf >=1025px voor de position:fixed sidebar; bij <=1024px wordt de sidebar drawer (zie index.php inline media 1024px) en is de margin 0 -- breakpoints sluiten aan, net als tenant-beheer.
Op mobiel wordt sidebar drawer (translateX:-100%) → .main margin:0 (default). */
.shell > .main{flex:1;min-width:0;min-height:100vh;transition:margin-left var(--t-base) ease}
@media (min-width: 1025px){
.shell > .main{margin-left:230px}
.shell > aside.sidebar[data-sb-collapsed="1"] ~ .main,
.shell > aside.sidebar[data-sb-rail="1"] ~ .main{margin-left:52px}
}
.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}
@media(max-width: 700px){.content{padding:var(--space-3)}}
.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-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:var(--space-2) var(--space-3);margin:0 10px;border-radius:var(--r-2);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 var(--t-base)}
.sidebar .sb-link:first-of-type{margin-top:10px}
.sidebar .nav-item-first{margin-top:10px}
.sb-link:hover{background:rgba(255,255,255,.05);color:#fff}
.sb-link.actief{background:color-mix(in srgb,var(--p) 10%,transparent);color:#fff;border-left-color:transparent;font-weight:700}
.sb-link svg{flex-shrink:0;opacity:.92;transition:all var(--t-base);box-sizing:content-box;padding:5px;background:rgba(255,255,255,.10);border-radius:var(--r-sm);color:#fff}
.sb-link:hover svg{background:rgba(255,255,255,.16)}
.sb-link.actief svg{opacity:1;background:var(--vorio-brand);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--p) 35%,transparent)}
.sb-bottom{margin-top:auto;padding:14px 18px;border-top:none}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--bg2);border:var(--bd);border-radius:var(--r-card);padding:18px 20px;box-shadow:var(--shadow)}
.stat-num{font-size:30px;font-weight:800;color:var(--kc);line-height:1;letter-spacing:-1px}
.stat-label{font-size:12px;color:var(--text2);margin-top:var(--space-1);font-weight:500}
.card{background:var(--bg2);border:var(--bd);border-radius:var(--r-card);padding:22px var(--space-5);margin-bottom:18px;box-shadow:var(--shadow)}
.card-title{font-size:14.5px;font-weight:700;margin-bottom:var(--space-4);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 var(--space-3) 10px;border-bottom:1.5px solid var(--border)}
.tbl td{padding:10px var(--space-3);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(--row-hover)}
/* .badge-*: enkele bron hoger in dit bestand */
.slug{font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);background:var(--bg3);border:var(--bd);border-radius:var(--r-xs);padding:2px 7px;font-size:12px;color:var(--text2)}
.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:not([type=checkbox]):not([type=radio]),.field select,.field textarea{width:100%;padding:6px var(--space-3);border:var(--bd);border-radius:var(--r-2);font-size:13.5px;font-family:inherit;color:var(--text1);outline:none;transition:border var(--t-base);background:var(--bg2);line-height:1.5;box-sizing:border-box;min-height:36px}
.field input:not([type=checkbox]):not([type=radio]),.field select{height:36px;appearance:none;-webkit-appearance:none;-moz-appearance:none}
.field textarea{height:auto;min-height:72px}
.field select{background-image:var(--v-chevron);background-repeat:no-repeat;background-position:right 12px center;padding-right:var(--space-6)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:var(--ring)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width: 700px){.grid2{grid-template-columns:1fr}}
/* Kantoorgegevens: op mobiel valt .grid2 terug naar 1 kolom; de row-gap stapelde
dan op de .field-margin (14+14=28) waardoor het veldritme ongelijk werd. */
@media(max-width: 700px){.inst-blok-wrap[data-blok="kantoor"] .grid2{row-gap:0}}
/* Superadmin (.shell): v-mb-0 wordt daar niet gebruikt, dus elke grid die op mobiel
inklapt dubbelde de gap (14/12) bovenop de .field-marge (14). Zelfde neutralisatie
als het kantoor-blok; grids met een toggle (.vrio-tgl) uitgesloten zodat de toggle-rij
niet tegen het veld eronder plakt. */
@media(max-width: 700px){.shell .grid2:not(:has(.vrio-tgl)){row-gap:0}}
@media(max-width: 640px){.shell .tar-brevo-grid{row-gap:0}}
/* Tenant huisstijl "Algemeen & contact" is de enige .grid2 (class) in dat blok en
telt meerdere rijen; row-gap uit zodat de .field-marge (14) het ritme draagt op
zowel desktop (2 kol) als mobiel (1 kol). Kleuren-grids gebruiken inline display:grid,
niet .grid2, dus die blijven ongemoeid. */
.inst-blok-wrap[data-blok="huisstijl"] .grid2{row-gap:0}
.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:9px;margin-bottom:var(--space-4)}
.mod-groep{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);margin:0 0 9px}
.module-grid + .mod-groep{margin-top:var(--space-4)}
.module-item{display:flex;align-items:center;gap:10px;padding:var(--space-2) 11px;border:var(--bd);border-radius:var(--r);cursor:pointer;background:var(--bg2);transition:border-color var(--t-base),background var(--t-base);position:relative;min-width:0}
.module-item:hover{border-color:var(--border2);background:var(--bg3)}
.module-item input{position:absolute;opacity:0;width:0;height:0}
.mi-ico{width:28px;height:28px;border-radius:var(--r-2);display:grid;place-items:center;background:var(--bg3);color:var(--text3);flex:0 0 auto;transition:background var(--t-base),color var(--t-base)}
.mi-ico svg{width:16px;height:16px}
.mi-lbl{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi-check{width:18px;height:18px;border-radius:var(--r-sm);border:var(--bd-strong);flex:0 0 auto;display:grid;place-items:center;color:transparent;transition:all var(--t-base)}
.mi-check svg{width:11px;height:11px}
.module-item:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--bg2))}
.module-item:has(input:checked) .mi-ico{background:var(--p);color:#fff}
.module-item:has(input:checked) .mi-lbl{color:var(--text1)}
.module-item:has(input:checked) .mi-check{background:var(--accent);border-color:var(--accent);color:#fff}
.module-item:focus-within{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px}
.module-item.is-kern{cursor:default;border-color:var(--border);background:var(--bg3)}
.module-item.is-kern .mi-ico{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent)}
.module-item.is-kern .mi-lbl{color:var(--text2)}
.module-item.is-kern .mi-check{background:transparent;border:0;color:var(--text3)}
.module-item.is-kern .mi-check svg{width:14px;height:14px}
.tabs{display:flex;gap:var(--space-1);margin-bottom:22px;border-bottom:1.5px solid var(--border);overflow-x:auto;overflow-y:hidden}
.tab-btn{padding:9px 13px;font-size:13px;white-space:nowrap;font-weight:600;color:#64748b;border:none;border-radius:0;background:none;cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;font-family:inherit;transition:all var(--t-base)}
.tab-btn.actief{color:var(--vorio-brand);border-bottom-color:var(--vorio-brand)}
.tab-btn:hover:not(.actief){color:var(--kc);border-bottom-color:color-mix(in srgb,var(--accent) 40%,transparent)}
html[data-theme="dark"] .tab-btn:hover:not(.actief){border-bottom-color:color-mix(in srgb,var(--kc) 70%,transparent)}
.tab-btn:focus{outline:none}
.tab-btn:focus-visible{outline:none}
.danger-zone{border:1.5px solid #fecaca;border-radius:var(--r-card);padding:18px 20px;background:#fff5f5;margin-top:var(--space-4)}
.danger-zone h3{font-size:13px;font-weight:700;color:var(--red);margin-bottom:var(--space-2)}
.log-item{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.log-item:last-child{border-bottom:none}
.mon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.mon-stat{background:#f8fafc;border-radius:var(--r-2);padding:var(--space-3) 14px;text-align:center}
.mon-num{font-size:22px;font-weight:800;color:var(--vorio-brand);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:color-mix(in srgb, var(--p) 82%, #fff); --accent2:var(--p); --accent-light:color-mix(in srgb, var(--p) 18%, transparent);
--grad:linear-gradient(135deg,rgba(21,88,192,.55),color-mix(in srgb,var(--p) 45%,transparent));
--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 2px rgba(0,0,0,.40);
--font:'DM Sans',system-ui,sans-serif; --mono:'DM Mono',monospace;
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)}
html[data-theme="dark"] .login-box{background:var(--bg2);box-shadow:var(--shadow-xl)}
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
}
html[data-theme="dark"] .btn-ghost{background:var(--bg3);color:var(--text2)}
html[data-theme="dark"] .btn-ghost:hover{background:var(--bg4);border-color:var(--border2)}
/* Sidebar blijft donker — geen override nodig */
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:color-mix(in srgb,var(--p) 18%,transparent);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}
html[data-theme="dark"] .mon-stat{background:var(--bg3);border:var(--bd)}
html[data-theme="dark"] .mon-num{color:var(--kc)}
html[data-theme="dark"] .mon-lbl{color:var(--text3)}
/* 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;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--accent-light);border:1.5px solid var(--accent);border-radius:var(--r-2);margin-bottom:10px}
.adm-selectie-balk.zichtbaar{display:flex}
.adm-selectie-tekst{font-size:13px;font-weight:600;color:var(--kc);flex:1 1 auto;min-width:0}
.adm-selectie-balk .btn{flex:0 0 auto;white-space:nowrap}
html[data-theme="dark"] .adm-selectie-balk{background:color-mix(in srgb,var(--p) 18%,transparent);border-color:color-mix(in srgb,var(--p) 50%,transparent)}
html[data-theme="dark"] .adm-selectie-tekst{color:#7ab5ee}
@media(max-width: 640px){
.adm-selectie-balk{padding:var(--space-2) 10px;gap:6px}
.adm-selectie-tekst{flex-basis:100%}
.adm-selectie-balk .btn{font-size:12px;padding:7px 10px}
}
/* Superadmin login: volledig dark-mode (page-bg is altijd donkere gradient) */
/* Cockpit widgets */
.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}
/* 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:var(--bd);border-radius:var(--r-card);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:var(--space-2)}
.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:var(--r-xs)}
.hero-card .hc-delta.up{background:var(--green-bg);color:var(--green)}
.hero-card .hc-delta.down{background:#fee2e2;color:var(--red)}
.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}
.kpi-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--space-2);margin-bottom:20px}
.kpi-mini{background:var(--bg2);border:var(--bd);border-radius:var(--r-2);padding:10px var(--space-3);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.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:var(--bd);border-radius:var(--r-card);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:var(--space-2);font-size:11.5px}
.donut-row .dt-bullet{width:8px;height:8px;border-radius:var(--r-xs);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:var(--space-3);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 var(--space-2);border-radius:var(--r-xs);background:#fff1f2;color:#be123c;letter-spacing:-.2px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tl-row.urgent .tl-age{background:#fee2e2;color:var(--red-solid)}
.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:var(--space-2)}
.vb-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);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:var(--r-xs) var(--r-xs) 0 0;min-height:6px;transition:opacity var(--t-base)}
.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)}
/* Line chart component (lc-*) — herbruikbaar area+line over var(--accent) */
/* Widget: Passeer-agenda (vervangt Bottleneck-fase) */
.pa-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin-bottom:14px}
.pa-stat{padding:var(--space-3) 10px;border-radius:var(--r-2);border:var(--bd);cursor:pointer;transition:background var(--t-base);text-align:left}
.pa-stat:hover{background:var(--row-hover)}
.pa-stat b{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1}
.pa-stat span{display:block;font-size:11px;color:var(--text2);margin-top:5px;font-weight:500}
.pa-stat--rood{background:rgba(220,38,38,.06);border-color:rgba(220,38,38,.22)}
.pa-stat--rood b{color:var(--red)}
.pa-stat--oranje{background:rgba(217,119,6,.06);border-color:rgba(217,119,6,.22)}
.pa-stat--oranje b{color:var(--amber)}
.pa-stat--geel{background:rgba(245,158,11,.05);border-color:rgba(245,158,11,.20)}
.pa-stat--geel b{color:#92400e}
html[data-theme="dark"] .pa-stat--geel b{color:#fbbf24}
.pa-lijst{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
/* Kolom-layout: Dossier | WWFT | Passeert-badge */
.pa-head{display:grid;grid-template-columns:minmax(0,1fr) 72px 58px;gap:10px;align-items:center;padding:6px var(--space-1);border-bottom:1px solid var(--border);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);font-weight:600}
.pa-head > div:last-child{text-align:right}
.pa-row{display:grid;grid-template-columns:minmax(0,1fr) 72px 58px;gap:10px;align-items:center;padding:9px var(--space-1);border-bottom:1px solid var(--border);font-size:12.5px}
.pa-row:last-child{border-bottom:none}
.pa-row:hover{background:var(--row-hover);border-radius:var(--r-sm)}
.pa-row-l{min-width:0}
.pa-titel{font-weight:600;color:var(--text1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-dosnaam{color:var(--text2);font-weight:500}
.pa-sub{font-size:11px;color:var(--text2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-nr{font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:10.5px;font-weight:600;color:var(--text3);letter-spacing:.2px}
.pa-afw{display:inline-block;margin-left:var(--space-2);padding:1px 6px;background:rgba(220,38,38,.10);color:var(--red);border-radius:var(--r-xs);font-size:10.5px;font-weight:600}
/* WWFT-kolom: platte tekst, kleur volgt urgentie (rood bij ≤3d, amber anders, muted bij 0 open) */
.pa-wwft{font-size:11.5px;font-weight:500;color:var(--text2);white-space:nowrap;font-variant-numeric:tabular-nums}
.pa-wwft.is-warn{color:var(--amber);font-weight:600}
.pa-wwft.is-urgent{color:var(--red);font-weight:600}
.pa-wwft.is-ok{color:var(--text3);font-weight:400}
/* Passeert-kolom: dagen-badge (2d/3d), rood ≤3d, amber ≤7d, neutraal daarna */
.pa-days{display:inline-flex;align-items:center;justify-content:center;min-width:36px;padding:3px var(--space-2);border-radius:var(--r-sm);font-size:11px;font-weight:600;line-height:1.4;background:var(--bg3);color:var(--text1);justify-self:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.pa-days.is-warn{background:rgba(245,158,11,.12);color:#92400e}
html[data-theme="dark"] .pa-days.is-warn{color:#fbbf24}
.pa-days.is-soon{background:rgba(220,38,38,.12);color:var(--red)}
/* .pa-alle → nu canonieke .v-seclink */
/* Widget: Behandelaar — 3-col (avatar | naam+workload-bar | op-tijd-chip) */
.bh-row{display:grid;grid-template-columns:26px minmax(0,1fr) 62px;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:12px;cursor:pointer;transition:background var(--t-base)}
.bh-row:last-child{border-bottom:none}
.bh-row:hover{background:var(--row-hover)}
.bh-row .bh-av{width:26px;height:26px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;letter-spacing:-.3px;flex-shrink:0}
.bh-row .bh-info{min-width:0;overflow:hidden}
.bh-row .bh-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);line-height:1.2}
.bh-row .bh-top b{color:var(--text1);font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bh-row .bh-med{color:var(--text3);font-size:10.5px;font-variant-numeric:tabular-nums;flex-shrink:0;font-weight:500}
/* Workload-bar: uniforme accent-kleur (lengte doet het werk, geen threshold-coloring) */
.bh-row .bh-wl{position:relative;height:12px;background:var(--bg3);border-radius:var(--r-xs);margin-top:5px;overflow:hidden}
.bh-row .bh-wl-bar{position:absolute;top:0;left:0;height:100%;border-radius:var(--r-xs);background:color-mix(in srgb, var(--p) 35%, transparent);transition:width var(--t-slow)}
.bh-row .bh-wl-v{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:700;color:var(--text1);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.2px}
/* Op-tijd-chip — compact %-badge, geen tweede regel; drempels via _pctCls in JS */
.bh-row .bh-pct{display:flex;align-items:center;justify-content:center;padding:6px var(--space-1);border-radius:var(--r-sm);font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.3px}
.bh-pct--ok {background:color-mix(in srgb, var(--green) 10%, transparent);color:var(--green)}
.bh-pct--warn{background:color-mix(in srgb, var(--amber) 10%, transparent);color:var(--amber)}
.bh-pct--bad {background:color-mix(in srgb, var(--red) 10%, transparent);color:var(--red)}
.bh-pct--na {background:var(--bg3);color:var(--text3)}
/* Superadmin cross-tenant cockpit: bottleneck-fasebalken + tenant-activiteit delta */
/* Fase-balken (saFases): label | track | dagen — kleur via JS-class warn/bad */
.fs-row{display:grid;grid-template-columns:minmax(88px,120px) 1fr auto;gap:10px;align-items:center;padding:6px 0;font-size:12.5px}
.fs-row .fs-lbl{color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-row .fs-track{height:6px;background:var(--bg3);border-radius:var(--r-xs);overflow:hidden}
.fs-row .fs-fill{height:100%;border-radius:var(--r-xs);background:var(--accent);transition:width .5s ease}
.fs-row .fs-fill.warn{background:var(--amber)}
.fs-row .fs-fill.bad{background:var(--red)}
.fs-row .fs-v{font-weight:700;font-size:11.5px;color:var(--text1);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.fs-tip{margin-top:var(--space-3);padding-top:10px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text2)}
/* Tenant-activiteit (saTenantTrend): eigen 4-koloms variant — deelt .bh-row met behandelaar-widget, daarom scoped op #saTenantTrend */
#saTenantTrend .bh-row{grid-template-columns:26px minmax(0,1fr) auto auto;cursor:default}
#saTenantTrend .bh-row:hover{background:transparent}
#saTenantTrend .bh-info{display:flex;flex-direction:column;gap:1px}
#saTenantTrend .bh-info b{color:var(--text1);font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#saTenantTrend .bh-info span{color:var(--text3);font-size:10.5px}
#saTenantTrend .bh-open{font-weight:700;font-size:11.5px;color:var(--text2);white-space:nowrap;font-variant-numeric:tabular-nums}
#saTenantTrend .bh-med{font-size:10.5px;font-weight:600;padding:2px var(--space-2);border-radius:var(--r-xs);white-space:nowrap;background:var(--bg3);color:var(--text3)}
#saTenantTrend .bh-med.slow{background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--amber)}
/* Dossier voortgang segmented bar */
.dv-totaal{display:flex;align-items:baseline;gap:var(--space-2);margin-bottom:10px}
.dv-totaal-v{font-size:24px;font-weight:800;letter-spacing:-.5px;color:var(--text1)}
.dv-bar{display:flex;height:14px;background:var(--bg3);border-radius:var(--r-sm);overflow:hidden;margin-bottom:14px}
.dv-seg{height:100%;transition:width var(--t-slow)}
.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:var(--r-xs);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:var(--space-3);border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--space-2)}
.dv-tenant{background:var(--bg3);border-radius:var(--r-sm);padding:var(--space-2) 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-uav{width:22px;height:22px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:8.5px;font-weight:700;letter-spacing:.2px}
.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 */
.sa-hero{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
.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:var(--space-2);margin-bottom:10px}
.sa-mini-card{background:var(--bg2);border:var(--bd);border-radius:var(--r-2);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:var(--r-2);padding:10px 14px;display:flex;align-items:center;gap:10px;margin-top:var(--space-2)}
.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}
/* Superadmin dashboard */
/* Activity-feed filter chips + per-type icon */
.sa-act-filters{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0 0 var(--space-3);padding:var(--space-1);background:var(--bg3);border-radius:var(--r-xs)}
.sa-act-chip{padding:5px 11px;background:transparent;border:none;border-radius:var(--r-xs);font-family:inherit;font-size:11.5px;font-weight:600;color:var(--text3);cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.sa-act-chip:hover{color:var(--text1)}
.sa-act-chip.is-active{background:var(--bg2);color:var(--text1);box-shadow:var(--shadow)}
html[data-theme="dark"] .sa-act-chip.is-active{background:var(--bg);box-shadow:var(--shadow)}
.log-item .log-ic{width:26px;height:26px;border-radius:var(--r-xs);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--bg3);color:var(--text2);margin-right:10px}
.log-item .log-ic svg{width:14px;height:14px}
/* SA-dashboardrijen — cascade-native grid (geen inline grid, geen !important); collapse werkt óók in de partial-iframe */
.sa-dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.sa-dash-main{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sa-dash-main>.adm-card{margin-bottom:0}
@media(min-width:1101px){.sa-dash-main .sa-col-span2{grid-column:span 2}}
@media(max-width:1100px){.sa-dash-stats,.sa-dash-main{grid-template-columns:1fr}}
/* SA-panel: cascade-native vervangers voor inline 2/3-koloms grids die vroeger via het
head-