/* ═══════════════════════════════════════════════════════════════════
   Ontwerp G — bank.arslan.nl in de huisstijl van de nieuwe arslan.nl
   Eén laag voor admin (layout.html) én collega-portaal (portaal_layout.html).
   Wordt als láátste stylesheet geladen: hij zet de tokens en de basis-
   onderdelen; paginaspecifieke CSS blijft werken via dezelfde variabelen.
   Bron van de waarden: /opt/arslan-nl/site/public/_g/g.css (Payload-site).
   ═══════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Schibsted';src:url(/static/fonts/schibsted.woff2) format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Schibsted';src:url(/static/fonts/schibsted-ext.woff2) format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1E9F}
@font-face{font-family:'Geist Mono';src:url(/static/fonts/geist-mono.woff2) format('woff2');font-weight:100 900;font-display:swap}

:root{
  --f-kop:'Schibsted',system-ui,-apple-system,sans-serif;
  --f-tekst:'Schibsted',system-ui,-apple-system,sans-serif;
  /* Bedragen: Schibsted met vaste cijferbreedte. Geist Mono alleen voor labels (--f-label). */
  --f-cijfer:'Schibsted',system-ui,-apple-system,sans-serif;
  --f-label:'Geist Mono',ui-monospace,Menlo,monospace;

  /* Palet arslan.nl */
  --g-blauw:#0C4DA2; --g-blauw-diep:#072C5E; --g-blauw-licht:#E8EFF9; --g-nacht:#081833;
  --g-goud:#D1A52C; --g-goud-licht:#F6EDD3; --g-tekst:#14213D; --g-zacht:#5B6475; --g-rand:#E3E6EC; --g-vlak:#F5F7FA;

  /* Merk — de oude namen (--orange/--brand) blijven als alias bestaan */
  --brand:var(--g-blauw); --brand-h:var(--g-blauw-diep); --brand-soft:var(--g-blauw-licht); --brand-line:#C9D7EE; --brand-fg:var(--g-blauw-diep); --brand-ring:rgba(12,77,162,.26); --brand-grad-b:#1A63C4;
  --orange:var(--brand); --orange-h:var(--brand-h); --orange-d:var(--brand-h); --orange-soft:var(--brand-soft); --orange-line:var(--brand-line); --orange-fg:var(--brand-fg); --orange-ring:var(--brand-ring);
  --gold:var(--g-goud); --gold-h:#B88D1F; --gold-soft:var(--g-goud-licht); --gold-line:#ECD795; --gold-fg:#6F4E0E;

  /* Neutraal */
  --canvas:var(--g-vlak); --canvas-2:#EDF0F5; --surface:#FFFFFF; --surface-2:#F5F7FA; --surface-3:#EBEEF3;
  --ink:var(--g-tekst); --ink-soft:#2A3756; --muted:var(--g-zacht); --muted-soft:#8A93A6;
  --line:rgba(20,33,61,.10); --line-strong:rgba(20,33,61,.17); --line-soft:rgba(20,33,61,.06);

  /* Zijbalk/topbalk — nachtblauw zoals de kop van arslan.nl */
  --sb-bg-a:#0B2A5C; --sb-bg-b:var(--g-nacht); --sb-a:#0B2A5C; --sb-b:var(--g-nacht);
  --sb-fg:rgba(255,255,255,.74); --sb-fg-dim:rgba(255,255,255,.44); --sb-hover:rgba(255,255,255,.07);
  --sb-line:rgba(255,255,255,.09); --sb-active:rgba(255,255,255,.10);

  /* Vorm */
  --r-xs:6px; --r-sm:10px; --r:14px; --r-md:20px; --r-lg:24px; --r-pill:999px;
  --sh-xs:none; --sh-sm:0 1px 2px rgba(20,33,61,.04);
  --sh:0 6px 20px -12px rgba(20,33,61,.22); --sh-md:0 14px 34px -16px rgba(20,33,61,.30); --sh-lg:0 30px 70px -24px rgba(20,33,61,.40);
  --rand:inset 0 0 0 1px var(--line);
}
html[data-theme="dark"]{
  --brand:#5B95E8; --brand-h:#8AB4F0; --brand-soft:rgba(91,149,232,.14); --brand-line:rgba(91,149,232,.32); --brand-fg:#A9C8F5; --brand-ring:rgba(91,149,232,.35);
  --orange:var(--brand); --orange-h:var(--brand-h); --orange-d:var(--brand-h); --orange-soft:var(--brand-soft); --orange-line:var(--brand-line); --orange-fg:var(--brand-fg); --orange-ring:var(--brand-ring);
  --gold:#E2BC50; --gold-soft:rgba(226,188,80,.14); --gold-line:rgba(226,188,80,.32); --gold-fg:#F1D58A;
  --canvas:#060F22; --canvas-2:#081833; --surface:#0C1B36; --surface-2:#112342; --surface-3:#172C50;
  --ink:#EEF2F9; --ink-soft:#C6D0E2; --muted:#93A0B8; --muted-soft:#6B7890;
  --line:rgba(200,215,240,.11); --line-strong:rgba(200,215,240,.19); --line-soft:rgba(200,215,240,.06);
  --sb-bg-a:#0A1F44; --sb-bg-b:#050D1F; --sb-a:#0A1F44; --sb-b:#050D1F; --sb-active:rgba(255,255,255,.10); --sb-hover:rgba(255,255,255,.06);
}

/* ── Basis ─────────────────────────────────────────────────────────── */
body{font-family:var(--f-tekst);font-size:14px;color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--f-kop);font-weight:700;letter-spacing:-.035em;color:var(--ink)}
.mono,.amount,.num,.amt,td.amount,[class*=bedrag],.val{font-family:var(--f-cijfer);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
code,kbd,.mw-code-badge{font-family:var(--f-label)!important;letter-spacing:0}
::selection{background:var(--g-blauw);color:#fff}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Eyebrow-labels in Geist Mono, zoals "OP DEZE PAGINA" op arslan.nl */
.stat-label,.sb-group-title,.eyebrow,.stat .label,.stat-card .lbl,.month-stats .lbl,thead th{
  font-family:var(--f-label)!important;font-size:10.5px!important;font-weight:500!important;letter-spacing:.09em!important;text-transform:uppercase;color:var(--muted)}

/* Paginatitel met de gouden punt van het woordmerk */
.page-title,.page-head h1{font-family:var(--f-kop);font-size:clamp(24px,2.2vw,32px);font-weight:750;letter-spacing:-.045em;line-height:1.05}
.page-title::after,.page-head h1::after{content:"";display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--g-goud);margin-left:.06em;vertical-align:baseline}
.page-subtitle,.page-head .sub{font-size:13.5px;color:var(--muted);margin-top:6px}
.page-header,.page-head{border-bottom:0;padding-bottom:0;margin-bottom:22px}

/* ── Knoppen — pillen zoals .cta op arslan.nl ─────────────────────── */
.btn{height:38px;padding:0 17px;border-radius:var(--r-pill);font-weight:650;font-size:13.5px;border:0;box-shadow:inset 0 0 0 1.5px var(--line-strong);background:var(--surface);color:var(--ink);transition:background .2s,box-shadow .2s,transform .2s}
.btn:hover{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-primary{background:var(--g-blauw);color:#fff;box-shadow:0 10px 26px -12px rgba(12,77,162,.7)}
.btn-primary:hover{background:var(--g-blauw-diep);box-shadow:0 10px 26px -12px rgba(12,77,162,.7);transform:translateY(-1px)}
html[data-theme="dark"] .btn-primary{background:#1A63C4}
.btn-goud{background:var(--g-goud);color:var(--g-nacht);box-shadow:none}
.btn-goud:hover{background:#DDB443;box-shadow:none}
.btn-secondary{background:var(--surface-2)}
.btn-ghost{box-shadow:none;background:transparent}
.btn-ghost:hover{background:var(--surface-2);box-shadow:none}
.btn-danger{box-shadow:inset 0 0 0 1.5px var(--red-line);color:var(--red)}
.btn-danger:hover{background:var(--red-soft);box-shadow:inset 0 0 0 1.5px var(--red)}
.btn-success{background:var(--green);color:#fff;box-shadow:0 10px 24px -12px rgba(46,158,91,.7)}
.btn-success:hover{background:var(--green-fg);color:#fff;box-shadow:0 10px 24px -12px rgba(46,158,91,.7)}
.btn-small{height:31px;padding:0 12px;font-size:12.5px;border-radius:var(--r-pill)}

/* ── Kaarten ───────────────────────────────────────────────────────── */
.card,.stat,.stat-card,.qa{border:0!important;box-shadow:var(--rand)!important;border-radius:var(--r-md)!important;background:var(--surface)}
.card-header{background:none;border-bottom:1px solid var(--line-soft);padding:16px 20px}
.card-title{font-family:var(--f-kop);font-weight:650;font-size:16px;letter-spacing:-.025em;text-transform:none}
.card-body{padding:18px 20px}
.stat-value,.stat .val,.stat-card .val,.stat .value,.ytd-card .val{font-family:var(--f-kop)!important;font-weight:750!important;letter-spacing:-.04em!important;font-variant-numeric:tabular-nums}
.qa{transition:box-shadow .2s,transform .2s}
.qa:hover{box-shadow:inset 0 0 0 1.5px var(--brand)!important;transform:translateY(-1px)}
.qa-title{font-family:var(--f-kop);font-weight:650;letter-spacing:-.02em;text-transform:none}

/* ── Segmentknoppen (kantoor-chips) — als de taalknop op arslan.nl ── */
.kant-chips{display:inline-flex;gap:.2rem;padding:.25rem;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--rand);border:0}
.kant-chips .kc{border-radius:var(--r-pill);font-weight:650;font-size:12.5px;padding:6px 12px;border:0;background:transparent;color:var(--ink-soft)}
.kant-chips .kc.on{background:var(--ink);color:var(--surface)}

/* ── Tabellen ──────────────────────────────────────────────────────── */
table{border-collapse:separate;border-spacing:0}
thead th{background:var(--surface)!important;border-bottom:1px solid var(--line)!important}
tbody td{border-bottom:1px solid var(--line-soft)}
tbody tr:hover td{background:var(--surface-2)}

/* Formulieren */
input[type=text],input[type=search],input[type=email],input[type=number],input[type=date],input[type=password],select,textarea,.cs-trigger{border-radius:var(--r-sm)}

/* ═══ Admin: zijbalk + topbalk ═══════════════════════════════════════ */
.sidebar{border-radius:var(--r-lg);background:radial-gradient(120% 60% at 0% 0%,rgba(26,99,196,.35),transparent 60%),linear-gradient(170deg,var(--sb-bg-a),var(--sb-bg-b))}
.sb-brand{padding:18px 14px 16px}
.sb-item{border-radius:12px;font-weight:550;letter-spacing:-.005em}
.sb-item[aria-current="page"]{background:var(--sb-active);color:#fff;box-shadow:inset 3px 0 0 var(--g-goud)}
.sb-item[aria-current="page"]::before{display:none}
.sb-item[aria-current="page"] .sb-item-icon{color:var(--g-goud)}
.sb-group-title{color:var(--sb-fg-dim)!important;font-size:10px!important}
.sb-badge,.sb-tel{background:var(--g-goud)!important;color:var(--g-nacht)!important;border-radius:var(--r-pill);font-weight:700}

.topbar{background:color-mix(in srgb,var(--canvas) 82%,transparent);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid var(--line-soft);box-shadow:none}
.topbar-crumb{font-family:var(--f-kop);font-weight:650;letter-spacing:-.02em;font-size:14.5px}
.topbar-search-btn{border:0;box-shadow:var(--rand);background:var(--surface)}
.topbar-search-btn:hover{box-shadow:inset 0 0 0 1.5px var(--brand);background:var(--surface)}
.theme-toggle{border-radius:50%!important}
.mobile-burger{border-radius:50%;border:0;box-shadow:var(--rand)}

/* ── Merk (oud en nieuw logo, zie _merk.html) ─────────────────────── */
.merk{display:flex;align-items:center;min-width:0;text-decoration:none;color:inherit}
.merk-oud{display:block;height:auto;width:100%;max-width:190px}
.merk-oud.klein{max-width:150px}
.topbar-merk{display:none}
.wmg{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1;color:var(--g-tekst);font-family:var(--f-kop);font-size:30px}
.wmg .w{font-weight:750;letter-spacing:-.055em;position:relative;display:inline-block;padding-right:.18em}
.wmg .dot{position:absolute;width:.2em;height:.2em;border-radius:50%;background:var(--g-goud);right:.035em;bottom:.115em}
.wmg small{display:block;font-size:.27em;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--g-zacht);margin-top:.45em;white-space:nowrap}
.merk.op-donker .wmg{color:#fff}.merk.op-donker .wmg small{color:rgba(255,255,255,.62)}
.wmg.klein{font-size:24px}
.app.collapsed .merk-oud{display:none}
.app.collapsed .merk-icoon{display:grid}
.merk-icoon{display:none;width:36px;height:36px;border-radius:12px;place-items:center;background:rgba(255,255,255,.08);color:#fff;font-family:var(--f-kop);font-weight:750;font-size:18px;letter-spacing:-.05em;position:relative}
.merk-icoon::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--g-goud);right:8px;bottom:10px}
.app.collapsed .merk .wmg{display:none}
.sb-scope-regel{margin-top:10px}

/* ── Mobiele tabbalk (admin) ───────────────────────────────────────── */
.tabbalk{display:none}
@media (max-width:900px){
  .tabbalk{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:90;
    padding:6px;border-radius:22px;background:color-mix(in srgb,var(--g-nacht) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 40px -14px rgba(8,24,51,.55)}
  .tabbalk a,.tabbalk button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border-radius:16px;color:rgba(255,255,255,.66);font-size:10.5px;font-weight:600;text-decoration:none;background:none;border:0;font-family:inherit;position:relative}
  .tabbalk svg{width:20px;height:20px}
  .tabbalk [aria-current="page"]{color:#fff;background:rgba(255,255,255,.10)}
  .tabbalk [aria-current="page"] svg{color:var(--g-goud)}
  .tabbalk .tb-tel{position:absolute;top:3px;right:calc(50% - 20px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--g-goud);color:var(--g-nacht);font-size:10px;font-weight:800;line-height:16px}
  .page{padding:18px 14px calc(96px + env(safe-area-inset-bottom))!important}
  .topbar{padding:0 14px;gap:10px;flex-wrap:nowrap}
  .topbar-crumb{display:none}
  .topbar-merk{display:flex}
  .topbar-merk .merk-oud{max-width:132px}
  .topbar-merk .wmg{font-size:22px}
  .topbar-right{flex-wrap:nowrap;gap:6px}
  .topbar-right .btn{height:36px;padding:0 13px;font-size:12.5px}
  .topbar-search-btn{margin-left:auto}
  .mobile-burger{display:none!important}
}
@media (max-width:420px){ .topbar-right .btn span{font-size:12px} }

/* ═══ Collega-portaal: topbalk + sub-navigatie ═══════════════════════ */
body.portaal{background:var(--canvas);background-image:none}
body.portaal .topbar{position:sticky;top:0;z-index:40;height:auto;min-height:68px;padding:10px clamp(14px,3vw,32px);background:radial-gradient(90% 140% at 0% 0%,rgba(26,99,196,.35),transparent 60%),linear-gradient(170deg,var(--sb-a),var(--sb-b));border:0;color:rgba(255,255,255,.8);flex-wrap:nowrap;gap:12px;backdrop-filter:none}
body.portaal .portal-tag{font-family:var(--f-cijfer);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.55);border-left-color:rgba(255,255,255,.16)}
body.portaal .logout{border:0;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);border-radius:var(--r-pill);padding:8px 15px;background:rgba(255,255,255,.08)}
body.portaal .logout:hover{background:rgba(255,255,255,.18)}
body.portaal .ro-badge{border-radius:var(--r-pill)}
body.portaal .theme-toggle{border-color:rgba(255,255,255,.22)}
body.portaal .page{max-width:1240px;padding:clamp(18px,3vw,34px) clamp(14px,3vw,32px) 60px}
body.portaal .sub-nav{background:var(--surface);border:0;box-shadow:var(--rand);border-radius:var(--r-pill);padding:.3rem;gap:.2rem;margin:0 0 22px}
body.portaal .snav-tab{border-radius:var(--r-pill);font-weight:600;color:var(--ink-soft);padding:8px 14px;border:0}
body.portaal .snav-tab:hover{background:var(--surface-2);color:var(--ink)}
body.portaal .snav-tab.active{background:var(--ink);color:var(--surface);box-shadow:none}
body.portaal .mnav-pill{border:0;box-shadow:var(--rand);font-weight:600}
body.portaal .mnav-pill.active{background:var(--ink);color:var(--surface);box-shadow:none}
@media (max-width:700px){
  body.portaal .portal-tag,body.portaal .who,body.portaal .ro-badge span{display:none}
  body.portaal .ro-badge{padding:6px}
  body.portaal .topbar{min-height:60px}
  /* Sub-nav: horizontaal scrollende pillen in plaats van vijf geperste tegels */
  body.portaal .sub-nav{width:auto;margin-inline:-14px;padding:.3rem 14px;border-radius:0;box-shadow:none;background:transparent;overflow-x:auto}
  body.portaal .snav-tab{flex:0 0 auto;flex-direction:row;font-size:13px;padding:9px 14px;box-shadow:var(--rand);background:var(--surface)}
  body.portaal .snav-tab.active{font-size:13px}
}
.sb-tel{display:inline-block;padding:0 6px;margin-left:4px;font-size:11px;line-height:17px;vertical-align:1px}

/* Grote getallen proportioneel (zoals op arslan.nl); vaste cijferbreedte alleen in tabellen */
.stat-value,.stat .val,.stat-card .val,.stat .value,.ytd-card .val,.hero-rate .num,.actie-getal,.kpi .val,.kerncijfers dd{font-variant-numeric:normal!important;letter-spacing:-.035em}
@media (max-width:700px){ body.portaal .ro-badge{font-size:0;gap:0} body.portaal .ro-badge svg{width:14px;height:14px} }

/* Segmentknoppen in kaartkoppen (bv. maandtrend kantoor/medewerker) */
.trend-mode-tabs{display:inline-flex;gap:.2rem;padding:.25rem;border-radius:var(--r-pill);background:var(--surface-2);border:0!important}
.trend-mode-tabs .tm{border-radius:var(--r-pill)!important;font-weight:600;white-space:nowrap;border:0!important}
.trend-mode-tabs .tm.active{background:var(--ink)!important;color:var(--surface)!important;box-shadow:none!important}
@media (max-width:600px){ .card-head:has(.trend-mode-tabs){flex-wrap:wrap;gap:8px} .trend-mode-tabs .tm{font-size:12px;padding:5px 10px} }
/* Vaste cijferbreedte alleen waar kolommen moeten uitlijnen */
.mono,.amount,.num,.amt,[class*=bedrag],.val{font-variant-numeric:normal}
td.mono,td .mono,td.amount,td .amount,td.amt,td .amt,td [class*=bedrag],.claim-bedrag,.top5-row .amt{font-variant-numeric:tabular-nums}
[class*=stat],[class*=stat] *,.kpi,.kpi *,.hero,.hero *{font-variant-numeric:normal!important}

/* ═══ Tabellen — modern: lucht, zachte scheiding, kop met blur ═══════ */
.table-wrap{border:0!important;box-shadow:var(--rand)!important;border-radius:var(--r-md)!important;background:var(--surface)}
.table-wrap table{font-size:13.5px}
.table-wrap thead th{position:sticky;top:0;z-index:2;padding:13px 14px!important;background:color-mix(in srgb,var(--surface) 90%,transparent)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap;vertical-align:middle}
.table-wrap thead th[data-sort]{cursor:pointer;transition:color .15s}
.table-wrap thead th[data-sort]:hover,.table-wrap thead th.sorted{color:var(--ink)}
.table-wrap thead th .arrow{opacity:.35;margin-left:4px;font-family:var(--f-tekst)}
.table-wrap thead th.sorted .arrow{opacity:1;color:var(--brand)}
.table-wrap tbody td{padding:13px 14px;vertical-align:middle;border-bottom:1px solid var(--line-soft)}
.table-wrap tbody tr:last-child td{border-bottom:0}
.table-wrap tbody tr{transition:background .12s}
.table-wrap tfoot td{padding:13px 14px;background:var(--surface-2);font-weight:600;border-top:1px solid var(--line)}
.col-filter-row td{padding:6px 8px!important;background:var(--surface-2);border-bottom:1px solid var(--line-soft)}
.col-filter{width:100%;height:30px;border:0!important;border-radius:8px!important;box-shadow:inset 0 0 0 1px var(--line);background:var(--surface);padding:0 9px;font:inherit;font-size:12px}
.col-filter:focus{box-shadow:inset 0 0 0 1.5px var(--brand);outline:0}
input[type=checkbox]{accent-color:var(--g-blauw);width:16px;height:16px;cursor:pointer}
/* Statuspillen: zacht vlak, geen rand */
.pill{border:0!important;padding:4px 10px 4px 9px!important;font-size:12px!important;font-weight:600!important;letter-spacing:-.005em}
.pill::before{width:7px!important;height:7px!important}
/* Rij-acties: ronde spookknop */
.row-menu-btn{width:34px;height:34px;border-radius:50%!important;border:0!important;background:transparent!important;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;transition:background .15s,color .15s}
.row-menu-btn:hover,.row-menu-btn[aria-expanded="true"]{background:var(--surface-3)!important;color:var(--ink)}
.row-menu-panel{border:0!important;border-radius:16px!important;box-shadow:var(--sh-lg),inset 0 0 0 1px var(--line)!important;padding:6px!important}
.row-menu-item{border-radius:10px!important}
@media (hover:hover){ .table-wrap tbody tr .row-menu-btn{opacity:.55} .table-wrap tbody tr:hover .row-menu-btn{opacity:1} }
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* De in-animatie mag geen transform achterlaten: daarbinnen hangt position:fixed anders aan .page i.p.v. aan het scherm */
.page,.page-wide{animation-fill-mode:backwards!important}

/* ═══ Dialogen, zoeken en meldingen ══════════════════════════════════ */
.app-confirm-backdrop,.cmdk-backdrop{background:rgba(8,24,51,.5)!important;backdrop-filter:blur(3px)}
.app-confirm-panel{border-radius:24px!important;border:0!important;box-shadow:var(--sh-lg)!important;padding:28px!important}
.app-confirm-title{font-family:var(--f-kop)!important;font-weight:750!important;letter-spacing:-.035em;font-size:20px!important}
.app-confirm-message{font-size:14px!important}
.app-confirm-btn{border-radius:999px!important;height:42px;padding:0 20px!important;font-weight:650!important}
.app-confirm-btn.primary{background:var(--g-blauw)!important;border-color:transparent!important}
.app-confirm-btn.primary:hover{background:var(--g-blauw-diep)!important}
.app-confirm.danger .app-confirm-btn.primary{background:var(--red)!important}
.app-confirm.danger .app-confirm-btn.primary:hover{background:var(--red-fg)!important}
.app-confirm-btn.secondary{box-shadow:inset 0 0 0 1.5px var(--line-strong);border:0!important}
.cmdk-panel{border-radius:22px!important;border:0!important;box-shadow:var(--sh-lg)!important}
.cmdk-header{padding:16px 18px!important}
.cmdk-input{border:0!important;box-shadow:none!important;background:transparent!important;height:auto!important;padding:4px 0!important;font-size:17px!important;border-radius:0!important}
.cmdk-esc-hint,.cmdk-foot kbd{font-family:var(--f-label)!important}
#undo-toast{background:var(--g-nacht)!important;color:#fff!important;border:0!important;border-radius:16px!important;box-shadow:0 18px 40px -14px rgba(8,24,51,.6)!important;padding:12px 12px 12px 18px!important}
#undo-toast-msg{color:#fff}
#undo-toast-btn{border:0!important;background:var(--g-goud)!important;color:var(--g-nacht)!important;border-radius:999px!important;font-weight:700!important;padding:7px 14px!important}
#undo-toast-btn:hover{background:#DDB443!important}
@media (max-width:900px){ #undo-toast{left:12px!important;right:12px!important;bottom:calc(92px + env(safe-area-inset-bottom))!important} }
/* Dialogen met inline opmaak (achtergrond rgba(0,0,0,.55), wit paneel) */
[style*="position:fixed"][style*="rgba(0,0,0,.55)"]{background:rgba(8,24,51,.5)!important;backdrop-filter:blur(3px)}
[style*="position:fixed"][style*="rgba(0,0,0,.55)"] > div{border-radius:22px!important;box-shadow:var(--sh-lg)!important}
[style*="position:fixed"][style*="rgba(0,0,0,.55)"] h3{font-family:var(--f-kop);font-weight:750!important;letter-spacing:-.03em;font-size:19px!important}
html[data-theme="dark"] [style*="position:fixed"] > div[style*="background:white"],
html[data-theme="dark"] [style*="position:fixed"] > .modal[style*="background:white"]{background:var(--surface)!important;color:var(--ink)}
/* Bevestigen (confirmAndDo, #cm-modal) */
#cm-modal{background:rgba(8,24,51,.5)!important;backdrop-filter:blur(3px)!important}
#cm-modal > div{border-radius:24px!important;padding:28px 28px 24px!important;box-shadow:var(--sh-lg)!important;max-width:460px!important}
html[data-theme="dark"] #cm-modal > div{background:var(--surface)!important}
#cm-title{font-family:var(--f-kop);font-size:21px!important;font-weight:750;letter-spacing:-.04em;color:var(--ink)!important;margin-bottom:8px!important}
#cm-msg{font-size:14px!important;line-height:1.55;color:var(--ink-soft)!important}
#cm-progress{border-radius:12px!important;background:var(--brand-soft)!important;color:var(--brand-fg)!important}
#cm-actions .btn{height:42px;padding:0 20px}
#cm-modal .btn-danger{background:var(--red);color:#fff;box-shadow:0 10px 24px -12px rgba(218,61,52,.7)}
#cm-modal .btn-danger:hover{background:var(--red-fg);box-shadow:0 10px 24px -12px rgba(218,61,52,.7)}

/* ═══ Portaal: kpi's, uitleg-bolletje, secties (stond in vijf portaalpagina's) ═══ */
body.portaal .stats,body.portaal .kpis,body.portaal .mij-kpis{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:22px;}
body.portaal .stat,body.portaal .kpi,body.portaal .mij-kpi{border:0 !important;box-shadow:var(--rand) !important;border-radius:var(--r-md) !important;padding:16px 18px !important;background:var(--surface);min-width:0 !important;display:flex;flex-direction:column;gap:4px;}
body.portaal .stat .label,body.portaal .kpi .lbl,body.portaal .mij-kpi .lbl{font-family:var(--f-label) !important;font-size:10.5px !important;letter-spacing:.09em !important;font-weight:500 !important;color:var(--muted);text-transform:uppercase;margin:0 !important;display:flex;align-items:center;gap:6px;}
body.portaal .stat .value,body.portaal .kpi .val,body.portaal .mij-kpi .val{font-family:var(--f-kop) !important;font-size:clamp(22px,2.3vw,28px) !important;font-weight:750 !important;letter-spacing:-.045em !important;line-height:1.1;color:var(--ink);margin-top:4px;}
body.portaal .kpi .val.accent,body.portaal .mij-kpi .val.accent{color:var(--brand);}
body.portaal .kpi .val.neg,body.portaal .mij-kpi .val.neg{color:var(--red-fg);}
body.portaal .kpi .val.warn{color:var(--red-fg);}
body.portaal .stat .stat-note,body.portaal .kpi .sub,body.portaal .mij-kpi .sub{font-size:12px;color:var(--muted);margin-top:2px;}
body.portaal .uitleg{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--surface-3);color:var(--muted);font-family:var(--f-tekst);font-size:10px;font-weight:700;letter-spacing:0;cursor:help;position:relative;text-transform:none;}
body.portaal .uitleg:hover::after,body.portaal .uitleg:focus::after{content:attr(data-uitleg);position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:240px;padding:8px 11px;border-radius:10px;background:var(--g-nacht);color:#fff;font-size:12px;font-weight:500;line-height:1.4;z-index:60;box-shadow:var(--sh-md);white-space:normal;text-align:left;}
body.portaal .section,body.portaal .card{border:0 !important;box-shadow:var(--rand) !important;border-radius:var(--r-md) !important;background:var(--surface);}
body.portaal .section-head h2,body.portaal .card-head h2,body.portaal .mij-section h2{font-family:var(--f-kop);font-size:17px !important;font-weight:700 !important;letter-spacing:-.03em !important;}
body.portaal .cnt,body.portaal .hint{font-size:12.5px;color:var(--muted);}
@media (max-width:700px){
body.portaal .stats,body.portaal .kpis,body.portaal .mij-kpis{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
body.portaal .stat,body.portaal .kpi,body.portaal .mij-kpi{padding:12px 14px !important;}
body.portaal .stat .value,body.portaal .kpi .val,body.portaal .mij-kpi .val{font-size:20px !important;}
body.portaal .stat .label,body.portaal .kpi .lbl,body.portaal .mij-kpi .lbl{font-size:9.5px !important;letter-spacing:.07em !important;}
body.portaal .uitleg:hover::after,body.portaal .uitleg:focus::after{left:auto;right:-8px;transform:none;}
}

/* Maandnavigatie: op mobiel één regel — recente maanden scrollen, "Andere maand" blijft staan */
.mnav-recent{display:contents}
@media (max-width:700px){
  .mnav{flex-wrap:nowrap!important;gap:6px}
  .mnav-recent{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px}
  .mnav-recent::-webkit-scrollbar{display:none}
  .mnav-pill{flex:0 0 auto;white-space:nowrap}
  .mnav-more{flex:0 0 auto}
  .mnav{max-width:100%;min-width:0}
  .month-head > div:has(.mnav){min-width:0;flex:1 1 100%;max-width:100%}
  .mnav-pill,.mnav-more-btn{padding:7px 12px!important;display:inline-flex!important;align-items:center}
}
/* Kantoorlabel (DH goud, RDAM blauw) — gedeeld */
.kant-label{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em}
.kant-label.dh{background:var(--gold-soft);color:var(--gold-fg)}
.kant-label.rdam{background:var(--brand-soft);color:var(--brand-fg)}
/* Segmentknop — gedeeld (zoals de kantoorkeuze en de taalknop op arslan.nl) */
.segment{display:inline-flex;gap:.2rem;padding:.25rem;border-radius:999px;background:var(--surface);box-shadow:var(--rand)}
.segment > *{border:0;background:transparent;border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:650;color:var(--ink-soft);cursor:pointer;text-decoration:none}
.segment > .on,.segment > .active,.segment > [aria-pressed="true"]{background:var(--ink);color:var(--surface)}
/* Algemeen zoekveld (.search-field) als pil, zoals op Transacties */
.search-field input{height:40px;border:0!important;border-radius:999px!important;box-shadow:var(--rand)!important;background:var(--surface)!important;padding-left:38px!important;font-size:14px}
.search-field input:focus{box-shadow:inset 0 0 0 2px var(--brand)!important;outline:0}
.search-field svg{left:14px!important}
/* Melding mag de knoppen van een open paneel niet afdekken */
body.ks-open #undo-toast{right:auto!important;left:24px!important}
@media (max-width:900px){ body.ks-open #undo-toast{top:calc(12px + env(safe-area-inset-top))!important;bottom:auto!important;left:12px!important;right:12px!important} }