/* ════════════════════════════════════════════════════════════
   Selvi Portaal — centrale stylesheet
   Designsysteem: tokens → layout → componenten → modules
   ════════════════════════════════════════════════════════════ */

:root {
  /* Kleuren, radii, schaduwen en semantiek staan centraal in assets/tokens.css
     (één bron van waarheid, gedeeld met het Klantportaal). Hier alleen werkportaal-
     specifieke overrides. --brand blijft overschrijfbaar via Beheer → Huisstijl
     (applyTheme() zet de custom property runtime op :root). */
  --sidebar-w: 256px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--text);
  display: flex; overflow: hidden;
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; letter-spacing: -0.01em;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; border: 2px solid transparent; }

/* ═══════ SIDEBAR ═══════ */
#sidebar {
  width: var(--sidebar-w); background: #0f1226;
  background-image: radial-gradient(at 0% 0%, rgba(16,64,86,.18) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(29,111,140,.16) 0px, transparent 50%);
  display: flex; flex-direction: column; flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,.06);
}
.logo { padding: 22px 20px 18px; display: flex; align-items: center; gap: 11px; }
.logo-mark { width: 36px; height: 36px; background: var(--brand-grad); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 16px; box-shadow: 0 6px 20px rgba(16,64,86,.4); overflow: hidden; }
.logo-mark img { width: 74%; height: 74%; object-fit: contain; display: block; }
.logo-text h1 { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.logo-text span { color: rgba(255,255,255,.45); font-size: 11px; font-weight: 500; }

.admin-pick { margin: 4px 14px 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: var(--transition); }
.admin-pick:hover { background: rgba(255,255,255,.08); }
.admin-pick .lbl { font-size: 10px; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .8px; font-weight: 600; margin-bottom: 2px; }
.admin-pick-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; }
.admin-pick-row .nm { color:#fff; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-pick-caret { color:rgba(255,255,255,.5); font-size:14px; flex-shrink:0; }

/* ── inklapbaar zijmenu (collapse + hover-expand) ── */
#sidebar { transition: width .2s ease; }
#sidebar.collapsed { width: 76px; }
#sidebar.collapsed:hover { width: var(--sidebar-w); box-shadow: 10px 0 34px rgba(0,0,0,.28); }
.collapse-btn { display:flex; align-items:center; gap:11px; padding:11px 18px; border-top:1px solid rgba(255,255,255,.06); color:rgba(255,255,255,.55); font-size:12px; font-weight:600; cursor:pointer; transition:var(--transition); }
.collapse-btn:hover { background:rgba(255,255,255,.06); color:#fff; }
.collapse-btn .ci { font-size:15px; width:18px; text-align:center; }
.nav-label { white-space:nowrap; }
#sidebar.collapsed:not(:hover) .logo-text,
#sidebar.collapsed:not(:hover) .admin-pick,
#sidebar.collapsed:not(:hover) .nav-section,
#sidebar.collapsed:not(:hover) .nav-label,
#sidebar.collapsed:not(:hover) .nav-item .badge,
#sidebar.collapsed:not(:hover) .footer-info,
#sidebar.collapsed:not(:hover) .collapse-btn .ctxt { display:none; }
#sidebar.collapsed:not(:hover) .logo { justify-content:center; padding:22px 0 18px; }
#sidebar.collapsed:not(:hover) .admin-pick { display:none; }
#sidebar.collapsed:not(:hover) nav { padding-top:14px; }
#sidebar.collapsed:not(:hover) .nav-item { justify-content:center; padding:11px 0; }
#sidebar.collapsed:not(:hover) .sidebar-footer { justify-content:center; }
#sidebar.collapsed:not(:hover) .collapse-btn { justify-content:center; }

nav { flex: 1; padding: 4px 12px; overflow-y: auto; }
.nav-section { padding: 14px 10px 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,.35); letter-spacing: 1px; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; cursor: pointer; color: rgba(255,255,255,.7); font-size: 13px; font-weight: 500; border-radius: 8px; margin: 1px 0; transition: var(--transition); position: relative; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: var(--brand-grad); color: #fff; box-shadow: 0 4px 14px rgba(16,64,86,.35); }
.nav-item .badge { margin-left: auto; background: rgba(255,255,255,.15); color: #fff; border-radius: 20px; padding: 1px 7px; font-size: 10px; font-weight: 700; min-width: 20px; text-align: center; }
.nav-item.active .badge { background: rgba(255,255,255,.25); }
.nav-item:not(.active) .badge.alert { background: var(--danger); }
.nav-item:not(.active) .badge.warn { background: var(--warning); }
.nav-icon { width: 18px; text-align: center; font-size: 15px; opacity: .9; }

.sidebar-footer { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-grad); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; box-shadow: 0 4px 12px rgba(16,64,86,.4); }
.footer-info { flex: 1; min-width: 0; }
.footer-info .name { color: #fff; font-weight: 600; font-size: 13px; }
.footer-info .role { color: rgba(255,255,255,.45); font-size: 11px; }

/* ═══════ MAIN / TOPBAR ═══════ */
#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
#topbar { background: rgba(255,255,255,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 0 28px; height: 60px; display: flex; align-items: center; gap: 16px; flex-shrink: 0; z-index: 10; }
.page-title { font-weight: 700; font-size: 17px; color: var(--text); flex: 0 1 auto; min-width: 96px; letter-spacing: -0.02em; }
.page-title > span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.page-title small { display: block; font-size: 12px; color: var(--text-3); font-weight: 400; margin-top: 1px; letter-spacing: 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* topbar-right = vaste controls; mag NIET krimpen (anders overlapt 'ie de zoekbalk). De .global-search (flex:1) absorbeert de resterende ruimte en duwt de controls naar rechts. */
.topbar-right { display: flex; gap: 10px; align-items: center; flex: 0 0 auto; justify-content: flex-end; flex-wrap: nowrap; }
.topbar-right > * { flex: none; }
/* Zoekbalk groeit mee maar houdt een bruikbare min-breedte; de page-title ellipst i.p.v. de layout op te blazen. */
#topbar > .global-search { flex: 1 1 0; min-width: 160px; }
/* Onder 1280px is er naast de vaste controls te weinig ruimte → verberg de zoekbalk (⌘K blijft), de queue-pill en de rol-preview. Kerncontrols (admin/sync/portaal/avatar) blijven. */
@media (max-width: 1280px) {
  #topbar > .global-search, #topbar > .topbar-right > .global-search, #topbar > .topbar-right > .search-box { display: none; }
  #topbar .topbar-right > #queue-pill, #topbar .topbar-right > #role-preview-wrap { display: none; }
}
.search-box { background: var(--surface-3); border: 1px solid var(--border); border-radius: 10px; padding: 7px 12px; width: 200px; max-width: 22vw; font-size: 13px; color: var(--text); outline: none; transition: var(--transition); font-family: inherit; }
.search-box:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(16,64,86,.1); }
.status-pill { background: var(--success-soft); color: var(--success); padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.status-pill::before { content: ''; width: 7px; height: 7px; background: var(--success); border-radius: 50%; box-shadow: 0 0 0 3px rgba(16,185,129,.2); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,.2); } 50% { box-shadow: 0 0 0 5px rgba(16,185,129,.1); } }

/* verwerkingswachtrij (geleerd van concurrent) */
.queue-pill { display:flex; align-items:center; gap:10px; background:var(--surface-3); border:1px solid var(--border); border-radius:20px; padding:5px 12px; font-size:11.5px; font-weight:600; }
.queue-pill .q { display:flex; align-items:center; gap:5px; color:var(--text-2); }
.queue-pill .q b { color:var(--text); font-variant-numeric:tabular-nums; }
.queue-dot { width:7px; height:7px; border-radius:50%; }
.queue-dot.active { background:var(--info); box-shadow:0 0 0 3px rgba(14,165,233,.2); }
.queue-dot.wait { background:var(--warning); }
.queue-dot.fail { background:var(--danger); }

.admin-context { display:flex; align-items:center; gap:8px; background:var(--brand-soft); color:var(--brand); padding:7px 14px; border-radius:20px; font-size:12.5px; font-weight:700; cursor:pointer; transition:var(--transition); white-space:nowrap; border:1px solid transparent; }
.admin-context:hover { border-color:var(--brand); }
.admin-context-dot { width:7px; height:7px; border-radius:50%; background:var(--brand); flex-shrink:0; box-shadow:0 0 0 3px rgba(16,64,86,.2); }
#topbar-admin-name { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:bottom; }
/* ═══════ INLOG-GATE (harde toegangspoort) ═══════ */
#login-gate {
  position:fixed; inset:0; z-index:200;
  background:#0f1226;
  background-image: radial-gradient(at 0% 0%, rgba(16,64,86,.25) 0, transparent 50%), radial-gradient(at 100% 100%, rgba(124,58,237,.18) 0, transparent 50%);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
#login-gate.hidden { display:none; }
/* Herlaad met bestaande sessie: formulier verborgen + spinner tot de sessie-check klaar is (geen login-flits). */
html.auth-checking #login-gate .sa-card, html.auth-checking #login-gate .gate-card { opacity:0; pointer-events:none; }
html.auth-checking #login-gate::after { content:''; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:36px; height:36px; border-radius:50%; border:3px solid rgba(255,255,255,.22); border-top-color:#fff; animation:authSpin .8s linear infinite; }
@keyframes authSpin { to { transform:rotate(360deg); } }
/* Sessie + portaal al gekozen in deze tab → gate helemaal niet tonen: direct de app-shell. */
html.auth-app #login-gate { display:none; }
.gate-card { width:400px; max-width:94vw; background:var(--surface); border-radius:18px; box-shadow:var(--shadow-lg); padding:34px 32px; animation:modalIn .35s cubic-bezier(.4,0,.2,1); }
.gate-brand { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.gate-brand .logo-mark { width:42px; height:42px; font-size:18px; }
.gate-brand h1 { font-size:18px; font-weight:800; letter-spacing:-.02em; }
.gate-brand span { font-size:12px; color:var(--text-3); }
.gate-card h2 { font-size:16px; font-weight:700; margin:18px 0 4px; }
.gate-card .sub { font-size:13px; color:var(--text-2); margin-bottom:18px; }
.gate-foot { font-size:12px; color:var(--text-3); text-align:center; margin-top:16px; }
.testmode-toggle { display:flex; align-items:center; gap:7px; background:var(--surface-3); border:1px solid var(--border); border-radius:20px; padding:5px 11px; font-size:12px; font-weight:600; color:var(--text-2); cursor:pointer; transition:var(--transition); white-space:nowrap; }
.testmode-toggle:hover { border-color:var(--border-strong); color:var(--text); }
.testmode-toggle.on { background:#fff4eb; color:#ea580c; border-color:#fed7aa; }

.auth-chip { display:flex; align-items:center; gap:8px; }
.auth-email { font-size:12px; font-weight:600; color:var(--text-2); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Compacte icoonknop in de topbar (bv. Sync) ── */
.tb-icon { display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; background:var(--surface-3); border:1px solid var(--border); border-radius:10px; font-size:15px; cursor:pointer; color:var(--text-2); transition:var(--transition); line-height:1; }
.tb-icon:hover { border-color:var(--brand); color:var(--brand); background:#fff; }
.tb-icon.syncing { animation:tb-spin .8s linear infinite; }
.sync-btn.syncing svg { animation:tb-spin .8s linear infinite; transform-origin:50% 50%; }
@keyframes tb-spin { to { transform:rotate(360deg); } }

/* ── Queue-pill: compact (cijfers + gekleurde stippen), labels via tooltip ── */
.queue-pill.qzero { opacity:.5; }
.queue-pill.qfail { border-color:var(--danger); background:#fff5f5; }
.queue-pill .q b { min-width:9px; display:inline-block; text-align:center; }

/* ── Account-menu: avatar → dropdown (vouwt account/portaal/preview/test samen) ── */
.account-wrap { position:relative; display:flex; align-items:center; }
.account-avatar { width:36px; height:36px; border-radius:50%; border:none; cursor:pointer; background:var(--brand-grad, var(--brand)); color:#fff; font-size:12.5px; font-weight:800; letter-spacing:.02em; display:flex; align-items:center; justify-content:center; transition:var(--transition); box-shadow:0 1px 3px rgba(16,64,86,.25); }
.account-avatar:hover { transform:translateY(-1px); box-shadow:0 3px 8px rgba(16,64,86,.32); }
.account-avatar.av-test { box-shadow:0 0 0 2px #fff, 0 0 0 4px #ea580c; }   /* testomgeving actief = oranje ring */
.account-menu { position:absolute; right:0; top:46px; min-width:262px; max-width:88vw; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 12px 34px rgba(15,18,38,.16); padding:7px; z-index:120; animation:acc-in .13s ease; }
@keyframes acc-in { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
.acc-head { display:flex; align-items:center; gap:11px; padding:9px 9px 11px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.acc-avatar-lg { width:42px; height:42px; flex:none; border-radius:50%; background:var(--brand-grad, var(--brand)); color:#fff; font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.acc-name { font-size:13.5px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-mail { font-size:11.5px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-rol { display:inline-block; margin-top:4px; font-size:10.5px; font-weight:700; color:var(--brand); background:var(--brand-soft); padding:1px 8px; border-radius:10px; }
.acc-sec { font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); padding:9px 10px 4px; }
.acc-pad { padding:2px 9px 7px; }
.acc-item { display:flex; align-items:center; gap:10px; width:100%; border:none; background:none; text-align:left; padding:9px 10px; border-radius:9px; font-size:13px; font-weight:600; color:var(--text-2); cursor:pointer; transition:background .12s; font-family:inherit; }
.acc-item:hover { background:var(--surface-3); color:var(--text); }
.acc-item .acc-ico { width:18px; text-align:center; flex:none; font-size:14px; }
.acc-item .acc-arr, .acc-item .acc-now { margin-left:auto; font-size:11px; color:var(--text-3); }
.acc-item.acc-current { color:var(--brand); }
.acc-item .acc-now { color:var(--brand); font-weight:800; background:var(--brand-soft); padding:1px 8px; border-radius:9px; }
.acc-item.acc-danger { color:var(--danger); }
.acc-item.acc-danger:hover { background:#fff1f1; }
.acc-toggle .acc-sw { margin-left:auto; font-size:10px; font-weight:800; padding:2px 8px; border-radius:10px; background:var(--surface-3); color:var(--text-3); }
.acc-toggle.on .acc-sw { background:#fff4eb; color:#ea580c; }

#content { flex: 1; overflow-y: auto; padding: 28px; }
/* Ingebedde pagina (Klanten/Documenten via iframe): vul de volledige content-ruimte, geen dubbele padding/scroll. */
#content:has(> iframe) { padding: 0; overflow: hidden; }
#content > iframe { height: 100%; width: 100%; border: 0; display: block; }
.page { animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ═══════ BUTTONS ═══════ */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: var(--transition); font-family: inherit; letter-spacing: -0.01em; white-space: nowrap; }
.btn-primary { background: var(--brand-grad); color: #fff; box-shadow: 0 4px 12px rgba(16,64,86,.25); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16,64,86,.35); }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn-success { background: var(--success); color: #fff; box-shadow: 0 4px 12px rgba(16,185,129,.25); }
.btn-success:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16,185,129,.35); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }

/* ═══════ CARDS ═══════ */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.card-header { padding: 16px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.card-header h3 { font-size: 14px; font-weight: 700; flex: 1; letter-spacing: -0.01em; }
.card-body { padding: 22px; }

/* ═══════ KPI ═══════ */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: var(--transition); }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.kpi-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; }
.kpi-label { font-size: 12px; color: var(--text-2); margin-bottom: 6px; font-weight: 500; }
.kpi-value { font-size: 28px; font-weight: 800; color: var(--text); line-height: 1.1; letter-spacing: -0.03em; }
.kpi-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.kpi-trend { font-weight: 600; } .kpi-trend.up { color: var(--success); } .kpi-trend.down { color: var(--danger); }
.kpi.brand .kpi-icon { background: var(--brand-grad); color: #fff; }
.kpi.success .kpi-icon { background: var(--success-soft); color: var(--success); }
.kpi.warning .kpi-icon { background: var(--warning-soft); color: var(--warning); }
.kpi.danger .kpi-icon { background: var(--danger-soft); color: var(--danger); }
.kpi.info .kpi-icon { background: var(--info-soft); color: var(--info); }

/* ═══════ PILLS ═══════ */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: -0.01em; }
.pill-green { background: var(--success-soft); color: var(--success); }
.pill-yellow { background: var(--warning-soft); color: var(--warning); }
.pill-red { background: var(--danger-soft); color: var(--danger); }
.pill-blue { background: var(--info-soft); color: var(--info); }
.pill-brand { background: var(--brand-soft); color: var(--brand); }
.pill-gray { background: var(--surface-3); color: var(--text-2); }
.pill-orange { background: #fff4eb; color: #ea580c; }

/* ═══════ TABLE ═══════ */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { background: var(--surface-2); padding: 11px 18px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--text-3); text-align: left; border-bottom: 1px solid var(--border); }
.tbl td { padding: 13px 18px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
/* Compacte tabel: meer regels per scherm, rustiger beeld (inkoop/verkoop/bank). */
.tbl-compact th { padding: 7px 12px; }
.tbl-compact td { padding: 7px 12px; font-size: 12.5px; }
.tbl-compact .gb-chip { padding: 1px 6px; }
.tbl tbody tr { transition: var(--transition); }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; }
.tbl .num.pos { color: var(--success); } .tbl .num.neg { color: var(--danger); }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; }
.tbl-footer { padding:12px 22px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--text-2); gap:16px; flex-wrap:wrap; }

/* per-pagina */
.page-size { display:flex; gap:5px; align-items:center; }
.page-size .lbl { font-size:11px; color:var(--text-3); text-transform:uppercase; letter-spacing:.5px; font-weight:600; margin-right:3px; }
.psize { padding:4px 10px; border-radius:7px; font-size:12px; font-weight:600; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text-2); transition:var(--transition); }
.psize:hover { border-color:var(--border-strong); color:var(--text); }
.psize.active { background:var(--brand-grad); color:#fff; border-color:transparent; box-shadow:0 2px 6px rgba(16,64,86,.3); }
.attach-flag { color:var(--brand); font-size:12px; cursor:pointer; }

/* ═══════ TABS ═══════ */
.tabs { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 5px; margin-bottom: 22px; width: fit-content; box-shadow: var(--shadow-xs); flex-wrap: wrap; }
.tab { padding: 8px 16px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2); border-radius: 8px; transition: var(--transition); display: flex; align-items: center; gap: 6px; }
.tab:hover { color: var(--text); background: var(--surface-3); }
.tab.active { color: #fff; background: var(--brand-grad); box-shadow: 0 2px 8px rgba(16,64,86,.3); }

/* sub-navigatie (instellingen) */
.subnav { display:flex; flex-direction:column; gap:2px; }
.subnav-item { padding:9px 14px; border-radius:9px; font-size:13px; font-weight:600; color:var(--text-2); cursor:pointer; transition:var(--transition); display:flex; align-items:center; gap:9px; }
.subnav-item:hover { background:var(--surface-3); color:var(--text); }
.subnav-item.active { background:var(--brand-soft); color:var(--brand); }
.subnav-item .ico { width:16px; text-align:center; }

/* ═══════ GRID ═══════ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.grid-settings { display:grid; grid-template-columns: 220px 1fr; gap:20px; align-items:start; }

/* ═══════ UPLOAD ═══════ */
.upload-zone { border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 44px 24px; text-align: center; cursor: pointer; transition: var(--transition); background: var(--brand-grad-soft); }
.upload-zone:hover { border-color: var(--brand); background: linear-gradient(135deg, #dfeaef 0%, #e9f2f5 100%); transform: scale(1.01); }
.upload-zone p { color: var(--text-2); font-size: 13px; margin-top: 8px; }
.upload-zone.disabled { opacity:.55; cursor:not-allowed; background:#f4f5f9; border-color:var(--border); }
.upload-zone.disabled:hover { transform:none; border-color:var(--border); background:#f4f5f9; }
.grid-2 .upload-zone { padding:24px 18px; }
.mb8 { margin-bottom:8px; }

/* ── Inklapbare kaart (ruimtebesparing) ── */
details.collapse-card { border:1px solid var(--border); border-radius:var(--radius); background:#fff; margin-bottom:16px; overflow:hidden; }
details.collapse-card > summary { list-style:none; cursor:pointer; padding:13px 18px; display:flex; align-items:center; gap:10px; font-weight:700; font-size:14.5px; user-select:none; }
details.collapse-card > summary::-webkit-details-marker { display:none; }
details.collapse-card > summary .sum-caret { margin-left:auto; color:var(--text-2); transition:transform .2s; }
details.collapse-card[open] > summary .sum-caret { transform:rotate(180deg); }
details.collapse-card > summary:hover { background:#f7f8fb; }
.collapse-body { padding:4px 18px 18px; border-top:1px solid var(--border); }

/* ── Segmented control (tabs) ── */
.seg { display:inline-flex; background:#eef0f5; border-radius:10px; padding:3px; gap:2px; flex-wrap:wrap; }
.seg button { border:none; background:transparent; padding:7px 16px; border-radius:8px; font-weight:600; font-size:13px; cursor:pointer; color:var(--text-2); transition:var(--transition); }
.seg button.active { background:#fff; color:var(--brand); box-shadow:0 1px 3px rgba(0,0,0,.10); }
.upload-icon { font-size: 38px; margin-bottom: 6px; }

/* ═══════ TIMELINE ═══════ */
.timeline { list-style: none; position: relative; }
.timeline::before { content: ''; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.tl-item { position: relative; padding: 0 0 18px 40px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: 6px; top: 4px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--surface); z-index: 1; box-shadow: 0 0 0 2px var(--border); }
.tl-dot.brand { background: var(--brand); box-shadow: 0 0 0 2px rgba(16,64,86,.3); }
.tl-dot.success { background: var(--success); box-shadow: 0 0 0 2px rgba(16,185,129,.3); }
.tl-dot.warning { background: var(--warning); box-shadow: 0 0 0 2px rgba(245,158,11,.3); }
.tl-dot.danger { background: var(--danger); box-shadow: 0 0 0 2px rgba(239,68,68,.3); }
.tl-time { font-size: 11px; color: var(--text-3); font-weight: 500; }
.tl-text { font-size: 13px; color: var(--text); margin-top: 2px; font-weight: 500; }
.tl-sub { font-size: 12px; color: var(--text-2); margin-top: 3px; }

/* ═══════ AI CHAT ═══════ */
.ai-chat { display: flex; flex-direction: column; height: 380px; }
.ai-messages { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.55; }
.msg-ai { background: var(--surface-3); color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg-user { background: var(--brand-grad); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; box-shadow: 0 4px 12px rgba(16,64,86,.25); }
.ai-input { display: flex; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--surface-2); }
.ai-input input { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; outline: none; background: #fff; font-family: inherit; transition: var(--transition); }
.ai-input input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(16,64,86,.1); }

/* AI-instructies (geleerd van concurrent) */
.instr-wrap { position:relative; }
.instr-wrap textarea { min-height: 320px; line-height:1.6; font-size:13px; }
.char-count { position:absolute; bottom:10px; right:14px; font-size:11px; color:var(--text-3); background:var(--surface); padding:2px 8px; border-radius:8px; border:1px solid var(--border); }

/* ═══════ PROGRESS ═══════ */
.progress { background: var(--surface-3); border-radius: 100px; height: 8px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 100px; transition: width .8s cubic-bezier(.4,0,.2,1); background: var(--brand-grad); }
.progress-bar.success { background: linear-gradient(90deg, #10b981, #34d399); }
.progress-bar.warning { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

/* ═══════ MODAL ═══════ */
.modal-bg { position: fixed; inset: 0; background: rgba(11,16,32,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 100; display: flex; align-items: center; justify-content: center; animation: fadeIn .2s; }
.modal-bg.hidden { display: none; }
/* De bevestigingsdialoog (confirmModal) opent vaak BOVENOP een andere open modal (bv. Bulk boeken op grootboek).
   Alle .modal-bg delen z-index 100 → bij gelijke z-index wint de laatste in de DOM, waardoor de bevestiging
   ACHTER de al-open modal verdween en de knoppen onklikbaar waren. Til 'm expliciet boven de rest. */
#modal-confirm { z-index: 200; }
.modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 560px; max-width: 95vw; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; animation: modalIn .3s cubic-bezier(.4,0,.2,1); }
@keyframes modalIn { from { opacity: 0; transform: scale(.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-header h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.modal-close { cursor: pointer; color: var(--text-3); font-size: 18px; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.modal-close:hover { background: var(--surface-3); color: var(--text); }
.modal-body { padding: 22px; overflow-y: auto; }
.modal-footer { padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface-2); display: flex; justify-content: flex-end; gap: 8px; }

/* ═══════ FORM ═══════ */
.form-group { margin-bottom: 16px; }
.form-label { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; display: block; letter-spacing: -0.01em; }
.form-control { width: 100%; min-height: var(--field-h); padding: 9px var(--field-pad-x); border: 1px solid var(--field-border); border-radius: var(--field-radius); font-size: var(--field-fs); outline: none; background: var(--field-bg); color: var(--text); font-family: inherit; transition: var(--transition); box-sizing: border-box; }
.form-control:hover { border-color: var(--border-strong); }
.form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(16,64,86,.1); }
textarea.form-control { resize: vertical; min-height: 90px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
select.form-control { cursor: pointer; }

/* ═══════ ALERT ═══════ */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 18px; display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; border: 1px solid; }
.alert-icon { font-size: 16px; flex-shrink: 0; line-height: 1.2; }
.alert-info { background: var(--info-soft); color: #075985; border-color: #bae6fd; }
.alert-warn { background: var(--warning-soft); color: #92400e; border-color: #fed7aa; }
.alert-success { background: var(--success-soft); color: #065f46; border-color: #a7f3d0; }
.alert-brand { background: var(--brand-soft); color: var(--brand); border-color: #bcd5de; }

/* ═══════ KOLOMMENBALANS ═══════ */
.kb-h { background: linear-gradient(135deg, #0f1226 0%, #1e1b4b 100%); color: #fff; }
.kb-h td { color: #fff !important; font-weight: 700; letter-spacing: -0.01em; padding: 12px 18px !important; font-size: 13px; }
.kb-subh { background: var(--surface-3); }
.kb-subh td { color: var(--text-2) !important; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; padding: 8px 18px !important; }
.kb-totaal { background: var(--brand-soft); }
.kb-totaal td { font-weight: 700; color: var(--text); }
.kb-subtot td { font-weight: 600; font-size: 12px; border-top: 1px solid var(--border); background: #fafbff; }

/* ═══════ CONFIDENCE ═══════ */
.conf { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.conf-bar { flex: 1; height: 5px; background: var(--surface-3); border-radius: 100px; overflow: hidden; }
.conf-fill { height: 100%; border-radius: 100px; transition: width .6s; }
.conf-high .conf-fill { background: linear-gradient(90deg, var(--success), #34d399); }
.conf-mid .conf-fill { background: linear-gradient(90deg, var(--warning), #fbbf24); }
.conf-low .conf-fill { background: linear-gradient(90deg, var(--danger), #f87171); }
.conf-val { font-size: 11px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ═══════ INSIGHT ═══════ */
.insight { padding: 14px 16px; background: var(--surface-2); border-radius: var(--radius-sm); border-left: 3px solid; display: flex; gap: 12px; align-items: flex-start; }
.insight-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }
.insight.brand { border-color: var(--brand); } .insight.brand .insight-icon { background: var(--brand-soft); color: var(--brand); }
.insight.success { border-color: var(--success); } .insight.success .insight-icon { background: var(--success-soft); color: var(--success); }
.insight.warning { border-color: var(--warning); } .insight.warning .insight-icon { background: var(--warning-soft); color: var(--warning); }
.insight-text { flex: 1; }
.insight-title { font-weight: 600; font-size: 13px; color: var(--text); }
.insight-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; line-height: 1.5; }

/* ═══════ SETTINGS ROWS ═══════ */
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); gap: 16px; }
.setting-row:first-child { padding-top: 0; }
.setting-row:last-child { border-bottom: none; padding-bottom: 0; }
.setting-info h4 { font-size: 13px; font-weight: 600; color: var(--text); }
.setting-info p { font-size: 12px; color: var(--text-2); margin-top: 3px; line-height: 1.5; }
.toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: var(--border-strong); border-radius: 100px; cursor: pointer; transition: var(--transition); }
.toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: var(--transition); box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.toggle input:checked + .toggle-slider { background: var(--brand-grad); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }

/* AI-toegang checkbox grid (grootboek) */
.ck { width:18px; height:18px; accent-color: var(--brand); cursor:pointer; }

/* split-boeking */
.split-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gb-chip { background:var(--brand-soft); color:var(--brand); border-radius:7px; padding:2px 8px; font-size:11px; font-weight:700; font-family:'JetBrains Mono',monospace; }
.btw-chip { border-radius:6px; padding:2px 7px; font-size:10px; font-weight:700; }
.btw-hoog { background:#ede9fe; color:#6d28d9; }
.btw-laag { background:#dbeafe; color:#1d4ed8; }
.btw-geen { background:var(--surface-3); color:var(--text-2); }

/* ═══════ ACCORDERING ═══════ */
.accordering-card { border: 2px solid var(--warning); border-radius: var(--radius); padding: 18px 20px; background: var(--warning-soft); }
.accordering-card.accepted { border-color: var(--success); background: var(--success-soft); }

/* ═══════ REPORT TILE ═══════ */
.report-tile { cursor: pointer; transition: var(--transition); text-align: center; padding: 28px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.report-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand); }
.report-tile-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--brand-grad-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 12px; }
.report-tile h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.report-tile p { font-size: 12px; color: var(--text-2); }

/* ═══════ USAGE CHART (prijs/verbruik) ═══════ */
.usage-chart { display:flex; align-items:flex-end; gap:8px; height:120px; padding:10px 0; }
.usage-bar { flex:1; background:var(--brand-grad); border-radius:6px 6px 0 0; min-height:4px; position:relative; transition:var(--transition); }
.usage-bar:hover { opacity:.85; }
.usage-bar span { position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:700; color:var(--text-2); }
.usage-x { display:flex; gap:8px; } .usage-x span { flex:1; text-align:center; font-size:10px; color:var(--text-3); }

/* ═══════ DOC DRAWER ═══════ */
.doc-overlay { position:fixed; inset:0; background:rgba(11,16,32,.45); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:90; animation:fadeIn .2s; }
.doc-overlay.hidden { display:none; }
.doc-drawer { position:fixed; top:0; right:0; height:100vh; width:min(1500px, 98vw); max-width:98vw; background:var(--surface); box-shadow:-16px 0 48px rgba(15,23,42,.2); z-index:95; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1); }
.doc-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width:880px) { .doc-grid { grid-template-columns:1fr; } }
.doc-drawer.open { transform:translateX(0); }
.doc-drawer-header { padding:18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.doc-drawer-header h3 { font-size:15px; font-weight:700; }
.doc-drawer-body { flex:1; overflow-y:auto; padding:20px 22px; background:var(--surface-2); }
.doc-toolbar { display:flex; gap:10px; align-items:center; margin-bottom:16px; }
.doc-thumb { width:48px; height:62px; border-radius:7px; border:2px solid var(--border); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow:var(--shadow-xs); transition:var(--transition); }
.doc-thumb.active { border-color:var(--brand); box-shadow:0 0 0 3px rgba(16,64,86,.15); }
.doc-thumb:hover { border-color:var(--brand); }
.doc-paper { background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:30px 32px; color:#1f2733; }
.doc-paper .dp-head { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #eef0f5; padding-bottom:16px; margin-bottom:16px; }
.doc-paper .dp-logo { width:44px; height:44px; border-radius:9px; background:var(--brand-grad); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; }
.dp-row { display:flex; justify-content:space-between; font-size:12.5px; padding:5px 0; }
.dp-row.tot { border-top:1px solid #eef0f5; margin-top:8px; padding-top:10px; font-weight:700; font-size:14px; }
.dp-muted { color:#8a92a8; font-size:11px; }
.doc-receipt { max-width:300px; margin:0 auto; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px; background:#fff; padding:24px 26px; border-radius:6px; box-shadow:var(--shadow); border:1px solid var(--border); color:#333; }
.doc-receipt .flex { display:flex; justify-content:space-between; padding:2px 0; }

/* ═══════ ADMIN SWITCHER ═══════ */
.admin-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; cursor:pointer; transition:var(--transition); }
.admin-row:hover { background:var(--surface-3); }
.admin-row.active { background:var(--brand-soft); }
.admin-row-num { width:36px; height:36px; border-radius:9px; background:var(--brand-grad); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; flex-shrink:0; }
.admin-row-info { flex:1; min-width:0; }
.admin-row-info .nm { font-weight:600; font-size:13px; }
.admin-row-info .mt { font-size:11px; color:var(--text-3); }
.filter-chips { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:14px 22px; border-bottom:1px solid var(--border); }
.chip { padding:6px 13px; border-radius:20px; font-size:12px; font-weight:600; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text-2); transition:var(--transition); }
.chip:hover { border-color:var(--border-strong); color:var(--text); }
.chip.active { background:var(--brand-grad); color:#fff; border-color:transparent; box-shadow:0 2px 8px rgba(16,64,86,.3); }
.chip .cnt { opacity:.65; margin-left:3px; }

/* ═══════ MISC ═══════ */
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; }
.flex { display: flex; } .flex-1 { flex: 1; }
.gap8 { gap: 8px; } .gap12 { gap: 12px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.text-sm { font-size: 12px; } .text-xs { font-size: 11px; }
.text-muted { color: var(--text-2); }
.fw600 { font-weight: 600; } .fw700 { font-weight: 700; }
.checkbox-cell input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.section-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-3); margin:4px 0 12px; }

/* ═══════ HAMBURGER + MOBIEL ═══════ */
.hamburger { display:none; width:40px; height:40px; border-radius:10px; align-items:center; justify-content:center; font-size:20px; cursor:pointer; color:var(--text); background:var(--surface-3); border:1px solid var(--border); flex-shrink:0; transition:var(--transition); }
.hamburger:hover { background:var(--border); }
.mobile-backdrop { position:fixed; inset:0; background:rgba(11,16,32,.5); backdrop-filter:blur(2px); z-index:78; animation:fadeIn .2s; }
.mobile-backdrop.hidden { display:none; }

@media (max-width: 860px) {
  .hamburger { display:flex; }
  #sidebar { position:fixed; left:0; top:0; height:100vh; z-index:80; transform:translateX(-100%); transition:transform .25s ease; width:min(86vw,var(--sidebar-w)); }
  #sidebar.mobile-open { transform:translateX(0); box-shadow:8px 0 44px rgba(0,0,0,.4); }
  #sidebar.collapsed { width:min(86vw,var(--sidebar-w)); }       /* negeer desktop-inklap op mobiel */
  #sidebar.collapsed:not(:hover) .nav-label,
  #sidebar.collapsed:not(:hover) .nav-section,
  #sidebar.collapsed:not(:hover) .nav-item .badge,
  #sidebar.collapsed:not(:hover) .logo-text,
  #sidebar.collapsed:not(:hover) .admin-pick,
  #sidebar.collapsed:not(:hover) .footer-info { display:revert; }
  .collapse-btn { display:none; }
  /* Mobiele topbar: alleen het essentiële zichtbaar. Het account-menu (avatar) blijft —
     portaalwissel, "Bekijk als" en testomgeving zitten nu IN dat menu, dus niet meer los verbergen.
     !important omdat applyChrome op sommige elementen een inline display zet (dat zou de hide anders overrulen). */
  #topbar { padding:0 12px; gap:8px; height:56px; }
  /* Alleen de TOPBAR-zoekbalk verbergen — de globale selector verborg ook de zoekvelden
     ín de lijsten (openstaand/verwerken), review 19-07. */
  #topbar .search-box, .queue-pill, .global-search { display:none !important; }
  #topbar-admin-name { max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Losse administratie-pill + handmatige sync eruit (cron synct toch); avatar blijft. */
  #topbar .topbar-right > .admin-context { display:none !important; }   /* losse "001 - Selvi"-pill (inline display:flex) — staat ook in zijmenu */
  .sync-btn { display:none; }
  #role-preview-wrap { display:none !important; }   /* "Bekijk als"-rolpreview — zit niet op mobiel */
  .ap-portal-switch { display:none !important; }     /* portaalwissel — via zijmenu/avatar */
  #auth-chip { flex-shrink:0; }
  #content { padding:14px; }
  .page-title { font-size:15px; }
  .page-title small { display:none; }
  .grid-2, .grid-3, .grid-settings, .form-row, .doc-grid, .kb-cols { grid-template-columns:1fr !important; }
  .kpi-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .tabs { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .card-header { padding:13px 15px; flex-wrap:wrap; row-gap:8px; }
  .card-body { padding:16px; }
  .section-title { font-size:14px; }
  /* Modals → bottom-sheet; drawers → volledig scherm */
  .modal-bg { align-items:flex-end; }
  .modal { width:100%; max-width:100vw; max-height:92vh; border-radius:18px 18px 0 0; }
  .modal-body, .modal-header, .modal-footer { padding-left:16px; padding-right:16px; }
  .doc-drawer { width:100vw; max-width:100vw; }
  .doc-drawer-body { padding:16px; }
  /* Filterbalken + tabs wikkelen netjes */
  .rel-tabs, [id$="-filterbar"], [id$="-bulkbar"] { flex-wrap:wrap; }
  /* Grotere tap-targets */
  .btn-sm { padding:8px 13px; font-size:12.5px; }
  .chip { padding:7px 12px; }
  /* Tabellen → kaartjes (per rij), label vóór elke waarde */
  .tbl-stack thead { display:none; }
  .tbl-stack tbody tr { display:block; border:1px solid var(--border); border-radius:12px; margin:0 0 10px; padding:8px 13px; background:var(--surface); cursor:default; }
  .tbl-stack tbody tr:hover { background:var(--surface); }
  .tbl-stack td { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:5px 0; border:none !important; text-align:right; font-size:13px; min-height:0; }
  .tbl-stack td::before { content:attr(data-label); font-weight:600; color:var(--text-3); text-align:left; white-space:nowrap; flex:none; }
  .tbl-stack td:not([data-label])::before, .tbl-stack td[data-label='']::before { content:none; }
  .tbl-stack td.m-acts { justify-content:flex-end; flex-wrap:wrap; padding-top:8px; }
  .tbl-stack td.m-acts .btn { flex:1; justify-content:center; }
  .tbl-stack .checkbox-cell { display:none; }
  /* Mijn administraties: kaart inklapbaar — toon naam + chevron, details na uitklappen */
  .adm-toggle { display:inline-flex !important; align-items:center; justify-content:center; width:30px; height:30px; margin-left:auto; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface-3); cursor:pointer; font-size:13px; flex:none; transition:transform .2s; }
  .adm-tr.cc-open .adm-toggle { transform:rotate(180deg); }
  .tbl-stack tbody tr.adm-tr td.adm-detail { display:none; }
  .tbl-stack tbody tr.adm-tr.cc-open td.adm-detail { display:flex; }
  .bank-mob-zoek { display:block !important; width:100%; flex:1 1 100%; margin-top:4px; }
}
.adm-toggle, .bank-mob-zoek { display:none; }   /* alleen op mobiel zichtbaar */
@media (max-width: 520px) {
  .kpi-grid { grid-template-columns:1fr; }
  #topbar-admin-name { display:none; }
  .topbar-right { gap:6px; }
  #content { padding:11px; }
}

/* ── Administratie-lijst (Mijn administraties) — volle-breedte regels onder elkaar ── */
.adm-grid { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.adm-card { border:1px solid var(--border); border-radius:var(--radius); padding:14px 18px; background:#fff; display:flex; flex-direction:row; align-items:center; gap:16px; transition:var(--transition); }
.adm-card:hover { box-shadow:0 4px 16px rgba(30,30,60,.07); border-color:var(--brand-soft); }
.adm-card-todo { background:linear-gradient(135deg, #fffdf5 0%, #fff 55%); border-style:dashed; }
.adm-avatar { width:44px; height:44px; flex:0 0 44px; border-radius:12px; background:var(--brand-grad-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; }
.adm-card-info { flex:1; min-width:0; }
.adm-card-naam { font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-card-meta { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:6px; }
.adm-card-id { font-size:11px; color:var(--text-2); background:#f4f5f9; padding:3px 8px; border-radius:6px; }
.adm-card-acties { display:flex; gap:8px; flex:0 0 auto; margin-left:auto; }
.adm-card-acties .btn { white-space:nowrap; }
@media (max-width: 700px) {
  .adm-card { flex-wrap:wrap; }
  .adm-card-acties { margin-left:58px; width:100%; }
  .adm-card-acties .btn { flex:1; justify-content:center; }
}

/* ── Command-center "Mijn administraties" ── */
.cc-bar { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.cc-kpi { flex:1; min-width:128px; border:1px solid var(--border); border-radius:14px; background:#fff; padding:14px 16px; transition:var(--transition); }
.cc-kpi:hover { box-shadow:0 4px 16px rgba(30,30,60,.07); }
.cc-kpi-val { font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.cc-kpi-lbl { font-size:12px; color:var(--text-2); margin-top:6px; font-weight:600; }
.cc-kpi-green { border-color:#bfe6cd; background:linear-gradient(135deg,#f3fbf6,#fff 60%); }
.cc-kpi-green .cc-kpi-val { color:#1a9d5a; }
.cc-kpi-red { border-color:#f3c6c6; background:linear-gradient(135deg,#fdf4f4,#fff 60%); }
.cc-kpi-red .cc-kpi-val { color:#d5403a; }
.cc-kpi-blue { border-color:#c6d4f3; background:linear-gradient(135deg,#f4f7fd,#fff 60%); }
.cc-kpi-blue .cc-kpi-val { color:#3b5bd5; }
.cc-kpi-amber { border-color:#f0dcae; background:linear-gradient(135deg,#fdfaf2,#fff 60%); }
.cc-kpi-amber .cc-kpi-val { color:#b9821a; }
/* Klikbare werk-getallen in de tabelrijen */
.cnt-pill { display:inline-block; min-width:24px; padding:2px 9px; border-radius:999px; font-weight:800; font-size:12.5px; cursor:pointer; transition:var(--transition); }
.cnt-pill:hover { transform:translateY(-1px); filter:brightness(.97); }
.cnt-red { background:#fde7e6; color:#d5403a; }
.cnt-amber { background:#fbf0d8; color:#b9821a; }
.cnt-blue { background:#e7edfb; color:#3b5bd5; }
.geld-link { font-weight:700; color:var(--text-1); cursor:pointer; border-bottom:1px dotted var(--border); }
.geld-link:hover { color:var(--brand); border-bottom-color:var(--brand); }
.zeker-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--zc,#999); margin-right:2px; }
/* Per-boeking actiebalk (verwerkscherm) */
.ink-toolbar { display:flex; gap:6px; flex-wrap:wrap; }
/* Gelabelde knoppen (icoon + tekst) → duidelijk én groter klikvlak (betrouwbaarder klikken). */
.ink-tool { min-height:34px; display:inline-flex; align-items:center; gap:6px; padding:0 11px; font-size:12.5px; font-weight:600; color:var(--text-1); border:1px solid var(--border); background:#fff; border-radius:9px; cursor:pointer; transition:background .15s,border-color .15s; white-space:nowrap; }
.ink-tool .ink-tool-i { font-size:14px; line-height:1; }
.ink-tool:hover { background:var(--brand-soft); border-color:var(--brand); }
.ink-tool:active { background:var(--brand); border-color:var(--brand); color:#fff; }
.ink-tool-ai { background:#ede7fb; border-color:#c9b8f5; color:#4b2ea8; font-weight:700; }
.ink-tool-ai:hover { background:#e3d8fa; border-color:#a98bf0; }
.ink-tool-danger { color:var(--danger); }
.ink-tool-danger:hover { background:#fdecea; border-color:var(--danger); color:var(--danger); }
.ink-opm { border:1px solid var(--border); border-radius:10px; background:var(--surface-2); padding:10px 12px; margin-bottom:14px; }
.ink-opm-head { font-weight:700; font-size:13px; margin-bottom:6px; }
.ink-opm-list { display:flex; flex-direction:column; gap:6px; max-height:180px; overflow-y:auto; }
.ink-opm-item { background:#fff; border:1px solid var(--border); border-radius:8px; padding:6px 9px; font-size:13px; }
/* Bijlage naast de boekingsregels (split-view) */
.ink-split { display:flex; gap:14px; align-items:flex-start; }
.ink-listpane { flex:0 0 215px; max-height:80vh; overflow:auto; border:1px solid var(--border); border-radius:10px; background:var(--surface); position:sticky; top:0; }
.ink-listhead { padding:8px 12px; font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px; position:sticky; top:0; background:var(--surface); border-bottom:1px solid var(--border); z-index:1; }
.ink-listrow { padding:8px 12px; border-bottom:1px solid var(--border); cursor:pointer; display:flex; flex-direction:column; gap:2px; border-left:3px solid transparent; }
.ink-listrow:hover { background:var(--surface-3); }
.ink-listrow.active { background:var(--brand-soft); border-left-color:var(--brand); }
.ink-docpane { flex:0 0 34%; position:sticky; top:0; }
.ink-editpane { flex:1; min-width:0; }
.ink-doc-bar { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; }
.ink-doc-frame { width:100%; height:80vh; border:1px solid var(--border); border-radius:10px; background:#fff; }
.ink-doc-img { width:100%; max-height:80vh; object-fit:contain; border:1px solid var(--border); border-radius:10px; background:#fff; }
.ink-doc-empty { color:var(--text-3); font-size:13px; padding:40px 12px; text-align:center; border:1px dashed var(--border); border-radius:10px; }
@media (max-width:1100px){ .ink-listpane{ display:none; } .ink-docpane{ flex:0 0 42%; } }
@media (max-width:980px){ .ink-split{ flex-direction:column; } .ink-docpane{ flex:none; width:100%; position:static; } .ink-doc-frame{ height:52vh; } }
/* Herbruikbare compacte icoon-actieknop (bespaart ruimte in tabellen/bulkbalken) */
.icon-btn { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; border:1px solid var(--border); background:#fff; border-radius:8px; cursor:pointer; transition:var(--transition); color:var(--text-1); text-decoration:none; flex:none; padding:0; }
.icon-btn:hover { background:var(--brand-soft); border-color:var(--brand); }
/* Rij-actieknoppen (🤖/📎/✎) iets groter + kleinere gaten → betrouwbaarder klikken zonder de tabel te verdikken. */
td.m-acts .icon-btn { width:36px; height:36px; font-size:15px; }
td.m-acts .icon-row { gap:4px; }
.icon-btn:disabled { opacity:.5; cursor:default; transform:none; }
.icon-btn-primary { background:var(--brand); border-color:var(--brand); color:#fff; }
.icon-btn-primary:hover { background:var(--brand); filter:brightness(1.06); }
.icon-btn-danger:hover { background:#fdecea; border-color:var(--danger); color:var(--danger); }
.icon-row { display:inline-flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
/* Zwevende bulk-actiebalk (inkoop/verkoop): grotere, aaneengesloten klikvlakken zodat elke klik pakt.
   De iconen zaten op 32px met gaten + hover-versprong → clicks misten soms. */
#inkoop-bulkbar, #bank-bulkbar { flex-wrap:nowrap; gap:2px; padding:8px 10px; }
#inkoop-bulkbar .icon-row, #bank-bulkbar .icon-row { gap:2px; flex-wrap:nowrap; }
#inkoop-bulkbar .icon-btn, #bank-bulkbar .icon-btn { width:42px; height:42px; font-size:17px; border-color:transparent; background:transparent; }
#inkoop-bulkbar .icon-btn:hover, #bank-bulkbar .icon-btn:hover { transform:none; background:var(--brand-soft); border-color:var(--brand); }
#inkoop-bulkbar .icon-btn:active, #bank-bulkbar .icon-btn:active { transform:none; background:var(--brand); color:#fff; }
#bank-bulkbar .icon-btn.icon-btn-primary { background:var(--brand); color:#fff; }
/* Smal scherm: laat de zwevende balk binnen de viewport wrappen i.p.v. buiten beeld te lopen. */
@media (max-width: 620px) {
  #inkoop-bulkbar, #bank-bulkbar { flex-wrap:wrap; max-width:calc(100vw - 16px); justify-content:center; }
  #inkoop-bulkbar .icon-row, #bank-bulkbar .icon-row { flex-wrap:wrap; justify-content:center; }
}
/* Gelabelde bulk-actieknoppen (icoon + tekst) — bank-bulkbar én werkbak-bulkbars */
.bbtn { display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 12px; border-radius:10px; border:1px solid transparent; background:transparent; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--text-1); white-space:nowrap; }
.bbtn:hover { background:var(--brand-soft); border-color:var(--brand); }
.bbtn-primary { background:var(--brand); color:#fff; }
.bbtn-primary:hover { background:var(--brand); border-color:transparent; filter:brightness(1.08); }
/* In de getinte werkbak-balken: witte knoppen met randje, iets lager */
#werk-bulkbar .bbtn, #werk-conceptbar .bbtn { height:34px; background:#fff; border-color:#D4E0E5; }
#werk-bulkbar .bbtn:hover, #werk-conceptbar .bbtn:hover { background:var(--brand-soft); border-color:var(--brand); }
#werk-conceptbar .bbtn-primary { background:var(--brand); border-color:var(--brand); color:#fff; }
/* Bankmutaties: compacte rijen (meer mutaties in beeld) + btw-label per grootboekregel */
#bank-snelstart-list td { padding-top:5px; padding-bottom:5px; }
#bank-snelstart-list .pill { padding:2px 8px; font-size:10.5px; }
#bank-snelstart-list td.m-acts .icon-btn { width:30px; height:30px; font-size:13px; }
/* Actieknoppen naast elkaar houden — gestapeld maakten ze de rij 3× zo hoog. */
#bank-snelstart-list td.m-acts { white-space:nowrap; }
#bank-snelstart-list td.m-acts .icon-row { flex-wrap:nowrap; }
.btw-tag { display:inline-block; border-radius:6px; padding:1px 6px; font-size:10px; font-weight:800; vertical-align:1px; white-space:nowrap; }
/* Openstaande posten: rij-actieknoppen altijd zichtbaar (hover-verbergen was onvindbaar en touch-onbruikbaar) */
.os-abtn { display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 10px; border-radius:8px; border:1px solid #E2E8EC; background:#fff; cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; color:#0F1F26; white-space:nowrap; }
.os-abtn:hover { background:var(--brand-soft); border-color:var(--brand); }
.os-abtn-p { background:#104056; border-color:#104056; color:#fff; }
.os-abtn-p:hover { background:#104056; border-color:#104056; filter:brightness(1.12); }
.os-abtn-dis { opacity:.45; }
/* Verplaatsen-modal (kies administratie) */
.vpl-overlay { display:none; position:fixed; inset:0; background:rgba(20,20,40,.45); z-index:10000; align-items:center; justify-content:center; padding:20px; }
.vpl-modal { background:var(--surface); border-radius:16px; width:min(460px,96vw); max-height:80vh; display:flex; flex-direction:column; padding:18px 20px; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.vpl-head { display:flex; justify-content:space-between; align-items:center; font-size:16px; }
.vpl-list { overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.vpl-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 11px; border:1px solid var(--border); border-radius:10px; background:#fff; cursor:pointer; font-size:14px; font-weight:600; transition:var(--transition); }
.vpl-item:hover { background:var(--brand-soft); border-color:var(--brand); }
@media (max-width:860px){ .vpl-overlay{ align-items:flex-end; padding:0; } .vpl-modal{ width:100%; border-radius:18px 18px 0 0; max-height:88vh; } }
/* Op mobiel blijven icoonknoppen compact (niet uitrekken zoals .btn) */
@media (max-width: 860px) { .tbl-stack td.m-acts .icon-btn { flex:none; } }
.section-title { display:flex; align-items:center; }
/* Moderne zoekbalk (Mijn administraties) */
.port-search { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:9px 14px; margin:4px 0 14px; max-width:420px; transition:var(--transition); }
.port-search:focus-within { border-color:var(--brand); box-shadow:0 0 0 3px rgba(16,64,86,.12); }
.port-search span { color:var(--text-3); font-size:15px; }
.port-search input { flex:1; border:none; outline:none; background:transparent; font-size:14px; font-family:inherit; color:var(--text-1); }
@media (max-width:860px){ .port-search { max-width:100%; } }

/* ── Toast ── */
#toast-container { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:9999;
  display:flex; flex-direction:column-reverse; gap:8px; align-items:center; pointer-events:none; max-width:92vw; }
.app-toast { background:#1e2030; color:#fff; padding:12px 18px; border-radius:12px; font-size:13.5px; font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.25); opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .25s, transform .25s; max-width:min(520px,92vw); }
.app-toast.show { opacity:1; transform:translateY(0); }
.app-toast.success { background:#0f7b4f; }
.app-toast.warn { background:#9a5b00; }
.app-toast.fout, .app-toast.danger, .app-toast.error { background:var(--danger); }

/* ════════ Zoekbare combobox (typeahead) ════════ */
.combo { position:relative; min-width:200px; }
.combo .combo-search { width:100%; }
.combo-list { position:fixed; z-index:9000; background:var(--surface); border:1px solid var(--border-strong);
  border-radius:10px; box-shadow:0 12px 32px rgba(20,24,48,.18); max-height:280px; overflow-y:auto;
  display:none; padding:4px; }
.combo-list.open { display:block; }
.combo-item { padding:7px 10px; font-size:13px; color:var(--text); cursor:pointer; border-radius:7px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.combo-item:hover, .combo-item.active { background:var(--brand-soft); color:var(--brand); }
.combo-empty { padding:9px 10px; font-size:12.5px; color:var(--text-3); }

/* ════════ Relatie-modal tabs (klantenkaart) ════════ */
.rel-tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin:0 0 16px; flex-wrap:wrap; }
.rel-tab { background:none; border:none; border-bottom:2px solid transparent; padding:8px 14px; font-size:13px; font-weight:600; color:var(--text-3); cursor:pointer; font-family:inherit; margin-bottom:-1px; }
.rel-tab:hover { color:var(--text); }
.rel-tab.active { color:var(--brand); border-bottom-color:var(--brand); }

/* ════════ Globale zoek (topbar) ════════ */
.global-search { position:relative; }
#global-results { max-width:420px; }
.gs-item { position:relative; padding:8px 12px; }
.gs-item .gs-type { float:right; font-size:10.5px; font-weight:600; color:var(--text-3); background:var(--surface-3); padding:1px 7px; border-radius:10px; }
.gs-item .gs-sub { font-size:11.5px; color:var(--text-3); margin-top:2px; }

/* Dashboard-widget knoppen (in-/uitklappen, verbergen) */
.widget-btn { cursor:pointer; color:var(--text-3); font-size:13px; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; user-select:none; }
.widget-btn:hover { background:var(--surface-3); color:var(--text); }
.widget-drag { cursor:grab; }
.widget-drag:active { cursor:grabbing; }
/* Aanpasbaar dashboard-grid (sleepbare boxes) */
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px; align-items:start; }
.dash-grid > [data-span="full"] { grid-column:1 / -1; }
.dash-grid > .card { transition:box-shadow .15s, opacity .15s; }
.dash-grid > .card.dash-dragging { opacity:.45; }
.dash-grid > .card.dash-over { outline:2px dashed var(--brand); outline-offset:2px; }
@media (max-width:860px) { .dash-grid { grid-template-columns:1fr; } }

/* Inkoop/verkoop-lijst: rij-acties rustig gedimd tot hover (alleen muis-apparaten — touch houdt ze zichtbaar). */
@media (hover: hover) and (min-width: 861px) {
  #inkoop-list td.m-acts .icon-row { opacity: .28; transition: opacity .15s; }
  #inkoop-list tr:hover td.m-acts .icon-row,
  #inkoop-list td.m-acts .icon-row:focus-within { opacity: 1; }
}

/* Bank-lijst: rij-acties gedimd tot hover (zelfde patroon als inkoop; touch blijft zichtbaar). */
@media (hover: hover) and (min-width: 861px) {
  #bank-snelstart-list td.m-acts .icon-row { opacity: .28; transition: opacity .15s; }
  #bank-snelstart-list tr:hover td.m-acts .icon-row,
  #bank-snelstart-list td.m-acts .icon-row:focus-within { opacity: 1; }
}

/* Skeletons (shimmer) — gedeeld met het klantportaal, voor ladende lijsten in het werkportaal */
.skel { background: linear-gradient(90deg,#eef1f6 25%,#f6f8fa 37%,#eef1f6 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skel-row { height: 48px; margin: 10px 0; }
.skel-list { padding: 8px 4px; }

/* Mobiele bottom-nav (werkportaal) — alleen op smal scherm; desktop gebruikt de sidebar. (U7) */
#wp-botnav { display: none; }
@media (max-width: 760px) {
  #wp-botnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: #fff; border-top: 1px solid var(--border); padding: 5px 4px calc(5px + env(safe-area-inset-bottom, 0px)); justify-content: space-around; box-shadow: 0 -2px 10px rgba(20,30,55,.06); }
  #wp-botnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px; border-radius: 10px; color: var(--text-3); font-size: 10px; font-weight: 600; cursor: pointer; min-height: 48px; justify-content: center; text-decoration: none; }
  #wp-botnav a.on { color: var(--brand); }
  #wp-botnav a svg { width: 20px; height: 20px; }
  #content { padding-bottom: 68px; } /* ruimte zodat de bottom-nav niets afdekt */
}

/* ══════════ Toegankelijkheid + AA-contrast (design-audit 17-07) ══════════ */
/* Zichtbare toetsenbord-focus overal (Werkportaal had dit nergens — WCAG 2.4.7). */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.nav-item:focus-visible, .tab:focus-visible, .icon-btn:focus-visible, button:focus-visible { outline-offset: -2px; }
/* Leestekst naar AA (4,5:1): content stond op --text-3 (#9AA9B0 ≈ 2,4:1) → --text-2 (≈ 4,9:1).
   Zuiver-decoratieve eyebrows (.acc-sec/.section-title) blijven --text-3 voor hiërarchie. */
.tbl th, .kpi-sub, .page-title small, .acc-mail, .tl-time, .admin-row-info .mt, .char-count, .usage-x span { color: var(--text-2); }

/* ══ MOBIEL-HARDENING (19-07, app-traject; herzien na 5-agent-review): JS-gerenderde
   schermen telefoon-klaar. !important is bewust: deze schermen zetten opmaak inline. ══ */
/* 1) Hover-onthulde rij-acties (portfolio/verwerken/vraagposten) zijn op touch onbereikbaar
      → altijd zichtbaar, als eigen regel onder de rij-inhoud (grid-column 1/-1).
      Grens 900 = gelijk aan .m-hscroll (review: 861-900 had anders scroll zónder acties). */
@media (hover: none), (max-width: 900px) {
  .vp-act, .wb-acts, .pf-acts {
    opacity: 1 !important; pointer-events: auto !important;
    position: static !important; transform: none !important;
    background: none !important; padding-left: 0 !important;
    grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; margin-top: 8px;
  }
}
/* 2) Brede rij-grids: op smal scherm horizontaal scrollbaar i.p.v. platgedrukt.
      880px default dekt de grid-minima (±850-860); afwijkers zetten --hs-min inline.
      .hs-pin (bulk-balken/voettekst) scrolt NIET mee: sticky links, schermbreed. */
@media (max-width: 900px) {
  .m-hscroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .m-hscroll > * { min-width: var(--hs-min, 880px); }
  .m-hscroll > .hs-pin, .m-hscroll > [id$="bulkbar"] { min-width: 0; position: sticky; left: 0; }
}
/* 3) Modals op telefoonformaat: volg het bestaande bottom-sheet-patroon (regels ~534) —
      de inline breedtes (460-980px) verloren daar zonder !important van (review-fix:
      width:auto brak de sheet; nu rand-tot-rand). */
@media (max-width: 640px) {
  .modal { width: 100% !important; max-width: 100vw !important; }
  /* iOS zoomt in op invoervelden < 16px — breed gescoped (ook inputs zonder .form-control). */
  input, select, textarea { font-size: 16px !important; }
}
/* 4) Twee-koloms werkschermen stapelen. bc-2col op 1024 (review: zijbalk 256px maakt
      het contentvenster tussen 901-1000 te smal voor 320+360+16). */
@media (max-width: 900px) {
  .kk-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 1024px) {
  .bc-2col { grid-template-columns: 1fr !important; }
}
/* 5) Formulier-grids die op mobiel moeten stápelen (niet scrollen). */
@media (max-width: 640px) {
  .m-stack { grid-template-columns: 1fr !important; }
  /* 6) Zwevende bulk-balken (bank/inkoop): op een telefoon werden dit 3-4 rijen die de tabel
        afdekten — nu één rij die horizontaal swipet. */
  #bank-bulkbar, #inkoop-bulkbar {
    flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
    max-width: calc(100vw - 16px); left: 8px !important; transform: none !important;
  }
  #bank-bulkbar .bbtn, #inkoop-bulkbar .bbtn { white-space: nowrap; flex: 0 0 auto; }
}