/* LamiCie CBU — opmaak */
:root{
  --ink:#16192a; --ink-2:#434868; --ink-3:#8b90b8;
  --surface:#fff; --surface-2:#f5f5fb; --surface-3:#ebebf5;
  --accent:#2952d9; --accent-d:#1a3baa; --accent-bg:#edf1fd;
  --ok:#0a7a50; --ok-bg:#e7f5ef;
  --warn:#b35000; --warn-bg:#fff3e8;
  --err:#c0181a; --err-bg:#fdf0f0;
  --wait:#5b5f86; --wait-bg:#eeeef6;
  --border:rgba(22,25,42,.09); --border-2:rgba(22,25,42,.16);
  --radius:9px; --radius-lg:13px; --nav-w:230px;
  --font:'Inter','Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono','Fira Code',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--surface-2);color:var(--ink);
  font-size:14px;line-height:1.5;display:flex;min-height:100vh}
nav{width:var(--nav-w);background:var(--ink);display:flex;flex-direction:column;
  flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}
.nav-brand{padding:14px;border-bottom:1px solid rgba(255,255,255,.07)}
.nav-name{font-size:19px;font-weight:700;color:#fff;letter-spacing:-.4px}
.nav-pc{font-size:10.5px;color:rgba(255,255,255,.42);margin-top:2px;letter-spacing:.06em}
.nav-sec{font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.28);padding:12px 14px 4px}
.nav-item{display:flex;align-items:center;gap:7px;padding:6px 14px;font-size:11.5px;
  color:rgba(255,255,255,.55);cursor:pointer;border:none;background:none;width:100%;
  text-align:left;transition:all .13s}
.nav-item:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.9)}
.nav-item.active{background:var(--accent);color:#fff}
.nav-item .ico{font-size:12px;width:15px;text-align:center}
.nav-badge{margin-left:auto;font-size:9.5px;font-family:var(--mono);
  background:rgba(255,255,255,.1);padding:1px 5px;border-radius:7px}
.nav-foot{margin-top:auto;padding:12px 14px;font-size:9.5px;
  color:rgba(255,255,255,.3);border-top:1px solid rgba(255,255,255,.07);line-height:1.7}
main{flex:1;padding:20px 26px 60px;max-width:1500px;min-width:0}
.page{display:none}.page.on{display:block}
h1{font-size:21px;font-weight:700;letter-spacing:-.4px}
.sub{font-size:12px;color:var(--ink-3);margin-top:2px}
.hd{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:18px;flex-wrap:wrap}
.card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:15px 17px;margin-bottom:14px}
.card-t{font-size:13.5px;font-weight:650;margin-bottom:2px}
.card-s{font-size:11px;color:var(--ink-3);margin-bottom:12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 14px}
.kpi-l{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.kpi-v{font-size:21px;font-weight:700;font-family:var(--mono);letter-spacing:-.7px;margin-top:5px}
.kpi-s{font-size:10.5px;color:var(--ink-3);margin-top:2px}
.kpi.hi{border-color:var(--accent);background:var(--accent-bg)}
.kpi.hi .kpi-v{color:var(--accent-d)}
table{width:100%;border-collapse:collapse;font-size:12px}
th{text-align:left;font-size:9.5px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);padding:6px 8px;border-bottom:1.5px solid var(--border-2);white-space:nowrap}
td{padding:6px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
.r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.c{text-align:center}
.mono{font-family:var(--mono)}
.neg{color:var(--err)}
.nil{color:var(--ink-3)}
.tot td{border-top:2px solid var(--border-2);font-weight:700;background:var(--surface-2)}
.grp td{background:var(--accent-bg);font-weight:650;font-size:11.5px}
.badge{display:inline-block;font-size:9.5px;font-weight:650;padding:2px 7px;
  border-radius:9px;letter-spacing:.03em;white-space:nowrap}
.b-vas{background:var(--ok-bg);color:var(--ok)}
.b-ing{background:var(--accent-bg);color:var(--accent-d)}
.b-cor{background:var(--warn-bg);color:var(--warn)}
.b-con{background:var(--wait-bg);color:var(--wait)}
.b-geen{background:var(--surface-3);color:var(--ink-3)}
.alert{display:flex;gap:9px;padding:10px 13px;border-radius:var(--radius);
  font-size:12px;margin-bottom:12px;line-height:1.6}
.a-info{background:var(--accent-bg);color:var(--accent-d)}
.a-warn{background:var(--warn-bg);color:var(--warn)}
.a-ok{background:var(--ok-bg);color:var(--ok)}
.a-err{background:var(--err-bg);color:var(--err)}
.alert-i{font-weight:700;flex-shrink:0}
.bar{height:7px;background:var(--surface-3);border-radius:4px;overflow:hidden;display:flex;min-width:90px}
.bar>span{display:block;height:100%}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:10.5px;color:var(--ink-2);margin-top:9px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.btn{border:1px solid var(--border-2);background:var(--surface);color:var(--ink-2);
  font:inherit;font-size:11.5px;padding:5px 11px;border-radius:var(--radius);cursor:pointer;
  transition:all .13s}
.btn:hover{border-color:var(--accent);color:var(--accent-d)}
.btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.tabs{display:flex;gap:5px;margin-bottom:12px;flex-wrap:wrap}
.scroll{overflow-x:auto;margin:0 -17px;padding:0 17px}
.pill{font-family:var(--mono);font-size:10.5px;background:var(--surface-3);
  padding:1px 6px;border-radius:5px;color:var(--ink-2)}
details{margin-top:9px}
summary{cursor:pointer;font-size:11.5px;color:var(--accent-d);padding:3px 0}
.hint{font-size:10.5px;color:var(--ink-3);margin-top:9px;line-height:1.7}
@media(max-width:820px){
  body{flex-direction:column}
  nav{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;padding-bottom:6px}
  .nav-brand{width:100%}.nav-sec{display:none}.nav-item{width:auto}.nav-foot{width:100%;margin-top:6px}
  main{padding:16px 14px 40px}
  .kpis{grid-template-columns:1fr 1fr;gap:8px}
  .kpi{padding:10px 11px}
  .kpi-v{font-size:15px;letter-spacing:-.3px}
  h1{font-size:18px}
}
@media(max-width:400px){
  .kpis{grid-template-columns:1fr}
  .kpi-v{font-size:19px}
}

/* ══ AFDRUKKEN ══
   Alleen de inhoud: geen menu, geen knoppen, geen invoerranden. Tabellen
   breken niet midden in een regel, kaarten niet midden in een kaart, en
   de kolomkoppen herhalen op elke pagina. Liggend A4 voor de brede tabellen. */
@page { size: A4 landscape; margin: 12mm 11mm 14mm; }
.print-kop { display: none; }
@media print {
  html, body { background: #fff !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none !important; }
  nav, .topbar, .topbar-right, #aanmeld-scherm, .modal, .notif, #notif, .toast,
  .btn, button, .nav-foot, .alert-ico, .alert-i, .proj-tabs, .terug,
  [onclick*="verwijder"], #beoordeel-modal, #aanlever-modal { display: none !important; }
  main { margin: 0 !important; padding: 0 !important; width: 100% !important;
         max-width: none !important; overflow: visible !important; height: auto !important; }
  body, .content, .page.on, #app, .wrap { display: block !important; overflow: visible !important;
         height: auto !important; min-height: 0 !important; }
  .page:not(.on) { display: none !important; }
  .content { padding: 0 !important; }
  .print-kop { display: flex !important; justify-content: space-between; align-items: baseline;
    border-bottom: 2px solid #14172b; padding-bottom: 6px; margin-bottom: 12px;
    font: 600 12px/1.4 system-ui, sans-serif; color: #14172b; }
  .print-kop b { font-size: 15px; letter-spacing: -.3px; }
  .card, .kpi, details, .alert, .drieluik > *, .mgmt-kpi { break-inside: avoid; page-break-inside: avoid; }
  table { width: 100% !important; border-collapse: collapse; font-size: 9.5pt; }
  thead { display: table-header-group; }
  tr, td, th { break-inside: avoid; page-break-inside: avoid; }
  .tbl-wrap, .scroll { overflow: visible !important; max-height: none !important; }
  input, select, textarea { border: none !important; background: transparent !important;
    -webkit-appearance: none; appearance: none; padding: 0 !important; color: #14172b !important;
    font: inherit !important; }
  select::-ms-expand { display: none; }
  h1, h2, .card-title, .card-t { break-after: avoid; page-break-after: avoid; }
  a { color: inherit !important; text-decoration: none !important; }
}

@media print {
  main, .content, .page, .page.active, .page.on { background: #fff !important; }
  .geen-print { display: none !important; }
  /* Lange lijsten van blokken mogen over pagina's lopen; alleen een regel breekt niet. */
  #invoer-hor details.card, #invoer-hor .card { break-inside: auto; page-break-inside: auto; }
  #invoer-hor details summary { break-after: avoid; page-break-after: avoid; }
  #invoer-hor details { margin-bottom: 6px !important; }
}

/* Bovenbalk met de uitlogknop: rechtsboven en meescrollend, zoals in de BU-tool. */
.topbalk{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;
  background:var(--paper,#fff);border-bottom:1px solid var(--line,#e4e4ee);
  padding:9px 22px;margin:-22px -22px 16px;}
.topbalk #wie-boven{font-size:12px;color:var(--ink-2,#3f4463);}
.uitlog-knop{margin-left:auto;font:inherit;font-size:11.5px;font-weight:600;color:#fff;
  background:var(--ink,#14172b);border:1px solid var(--ink,#14172b);border-radius:8px;
  padding:6px 13px;cursor:pointer;white-space:nowrap;flex-shrink:0;}
.uitlog-knop:hover{opacity:.88;}
@media print{.topbalk{display:none;}}

/* Uitloggen is altijd en overal bereikbaar: vast rechtsboven op het scherm,
   los van de pagina eronder. Geen enkel scherm kan hem wegduwen. */
.uitlog-knop{position:fixed !important;top:10px;right:18px;z-index:99990;margin:0 !important;
  font:inherit;font-size:11.5px;font-weight:600;color:#fff;background:#14172b;
  border:1px solid #14172b;border-radius:8px;padding:7px 14px;cursor:pointer;
  white-space:nowrap;box-shadow:0 2px 10px rgba(20,23,43,.18);}
.uitlog-knop:hover{opacity:.9;}
@media print{.uitlog-knop{display:none !important;}}

.topbalk{padding-right:130px;}

/* ── jaar en stroom (v0.34) ── */
.topbalk{border-top:4px solid var(--stroom,#2952d9);}
.stroom-keuze{display:flex;gap:4px;align-items:center;flex-wrap:wrap;}
.stroom-knop{font:inherit;font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;cursor:pointer;
  border:1px solid var(--sk,#2952d9);color:var(--sk,#2952d9);background:#fff;white-space:nowrap;}
.stroom-knop.aan{background:var(--sk,#2952d9);color:#fff;}
.stroom-knop:focus-visible{outline:2px solid var(--sk);outline-offset:2px;}
.stroom-archief{font:inherit;font-size:11px;padding:3px 6px;border-radius:99px;border:1px solid #c9ccd8;color:#6b7280;background:#fff;}
.stroom-lbl{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:99px;
  color:var(--sk);background:var(--sb);border:1px solid var(--sk);}
.stroom-balk{border-radius:9px;padding:10px 14px;margin:0 0 14px;font-size:12.5px;line-height:1.6;
  border:1px solid var(--sk);background:var(--sb);}
.stroom-balk strong{color:var(--sk);}