/* Sparki huisstijl (Brand Guidelines + Stylesheet v1.0 in Figma).
   Kleuren: Deep Blue #0B1836, Voltage Red #E30613, White; ondersteunend Ambient Pink #FFC8FF,
   Radiant Yellow #FFFF7D, Fresh Blue #C8F0FF; Power Blue #28286E enkel voor illustraties.
   Lettertype: Plus Jakarta Sans (SIL Open Font License, zie fonts/OFL.txt), lokaal geserveerd.
   Dit bestand komt na app.css en overschrijft enkel kleuren, lettertypes en vormen. */

/* @fonts-start */
@font-face{font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:200 800; font-display:swap; src:url("fonts/PlusJakartaSans-VF.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans"; font-style:italic; font-weight:200 800; font-display:swap; src:url("fonts/PlusJakartaSans-Italic-VF.woff2") format("woff2")}
/* @fonts-end */

:root{
  --deep:#0B1836; --deep-2:#0D234F; --deep-3:#1A3266;
  --red:#E30613; --red-hover:#B6050F; --red-deep:#88040B;
  --tint:#EEF3FF; --fresh:#C8F0FF; --pink:#FFC8FF; --yellow:#FFFF7D; --power:#28286E; --focus:#FD9717;

  --bg:#FFFFFF; --surface:#FFFFFF; --sunk:#F3F6FF; --ink:#0B1836; --muted:#5F6577; --faint:#9399A8;
  --line:#E5E7EB; --line-strong:#CDD3DF; --card-line:#E3EAFB;
  --accent:#E30613; --accent-hover:#B6050F; --accent-ink:#FFFFFF; --accent-soft:#FCE6E7;
  --brand:#0B1836; --brand-soft:#EEF3FF; --brand-ink:#FFFFFF;
  --danger:#B6050F; --danger-soft:#FCE6E7; --danger-btn:#88040B; --warn:#8A4A00; --warn-soft:#FFF0DB; --ok:#11683A; --ok-soft:#DDF3E5;
  --shadow:0 1px 2px rgb(11 24 54 / .06), 0 14px 36px rgb(11 24 54 / .14);
  --t-bu-bg:#FFE3FF; --t-bu-fg:#7A1F7A;
  --t-beh-bg:#DDF5FF; --t-beh-fg:#0B4A6B;
  --t-con-bg:#FFFFB8; --t-con-fg:#5B5200;
  --t-dir-bg:#E6E6F7; --t-dir-fg:#28286E;
  --t-ok-bg:#DDF3E5; --t-ok-fg:#11683A;
  --t-lev-bg:#D9F1EE; --t-lev-fg:#0B5A55;
  --t-done-bg:#EEF0F4; --t-done-fg:#3E4556;
  --t-vr-bg:#FFF0DB; --t-vr-fg:#8A4A00;
  --t-nok-bg:#FCE6E7; --t-nok-fg:#88040B;
  --t-ann-bg:#F0F0F2; --t-ann-fg:#5F6170;
  --f-ui:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-head:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --r:16px; --r-ctl:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#07112A; --surface:#102552; --sunk:#0D1F45; --ink:#F3F6FF; --muted:#A9B4CF; --faint:#7783A3;
    --line:#22396B; --line-strong:#2E4880; --card-line:#1D3468;
    --accent:#E30613; --accent-hover:#FF2D3A; --accent-ink:#FFFFFF; --accent-soft:#3A1022;
    --brand:#C8F0FF; --brand-soft:#17336B; --brand-ink:#0B1836;
    --danger:#FF8A92; --danger-soft:#3A1022; --danger-btn:#C2101C; --warn:#FFC27A; --warn-soft:#3A2A12; --ok:#8FDDB0; --ok-soft:#12382A;
    --shadow:0 1px 2px rgb(0 0 0 / .4), 0 14px 36px rgb(0 0 0 / .5);
    --t-bu-bg:#3A1F45; --t-bu-fg:#F5C2F5; --t-beh-bg:#123A55; --t-beh-fg:#BDEBFF;
    --t-con-bg:#3A3A10; --t-con-fg:#F5F59A; --t-dir-bg:#262A5C; --t-dir-fg:#C9CCFF;
    --t-ok-bg:#12382A; --t-ok-fg:#8FDDB0; --t-lev-bg:#0F3A3A; --t-lev-fg:#8ED9D2;
    --t-done-bg:#1E2A45; --t-done-fg:#B9C3DB; --t-vr-bg:#3A2A12; --t-vr-fg:#FFC27A;
    --t-nok-bg:#3A1022; --t-nok-fg:#FF9AA1; --t-ann-bg:#24283A; --t-ann-fg:#B5BAC8;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#07112A; --surface:#102552; --sunk:#0D1F45; --ink:#F3F6FF; --muted:#A9B4CF; --faint:#7783A3;
  --line:#22396B; --line-strong:#2E4880; --card-line:#1D3468;
  --accent:#E30613; --accent-hover:#FF2D3A; --accent-ink:#FFFFFF; --accent-soft:#3A1022;
  --brand:#C8F0FF; --brand-soft:#17336B; --brand-ink:#0B1836;
  --danger:#FF8A92; --danger-soft:#3A1022; --danger-btn:#C2101C; --warn:#FFC27A; --warn-soft:#3A2A12; --ok:#8FDDB0; --ok-soft:#12382A;
  --shadow:0 1px 2px rgb(0 0 0 / .4), 0 14px 36px rgb(0 0 0 / .5);
  --t-bu-bg:#3A1F45; --t-bu-fg:#F5C2F5; --t-beh-bg:#123A55; --t-beh-fg:#BDEBFF;
  --t-con-bg:#3A3A10; --t-con-fg:#F5F59A; --t-dir-bg:#262A5C; --t-dir-fg:#C9CCFF;
  --t-ok-bg:#12382A; --t-ok-fg:#8FDDB0; --t-lev-bg:#0F3A3A; --t-lev-fg:#8ED9D2;
  --t-done-bg:#1E2A45; --t-done-fg:#B9C3DB; --t-vr-bg:#3A2A12; --t-vr-fg:#FFC27A;
  --t-nok-bg:#3A1022; --t-nok-fg:#FF9AA1; --t-ann-bg:#24283A; --t-ann-fg:#B5BAC8;
  color-scheme:dark;
}

/* basis */
body{margin:0; font-size:14.5px; line-height:1.5}
h1,h2,h3{font-weight:700; letter-spacing:-.01em}
a{color:var(--brand); text-decoration-color:var(--accent); text-underline-offset:3px}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.label,.tbl th,.kv dt,.adm-head{letter-spacing:.06em; font-weight:600}
.pagehead h1{font-size:28px; font-weight:800; letter-spacing:-.02em}
.pagehead p{font-size:15px}

/* kop: Deep Blue, logo in wit met rode ster, tabs als balk zoals de navigatie van sparki.be */
body::before{background:var(--deep)}
.top{background:var(--deep); color:#FFFFFF; border-bottom:0}
.top-in{padding-block:14px 12px}
.brand{align-items:center; gap:12px}
.brand .logo{height:24px; width:auto; display:block}
.brand .prod{font-weight:600; font-size:14px; color:var(--fresh); border-left:1px solid rgb(255 255 255 / .25); padding-left:12px; line-height:1.2}
.brand .tag{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--deep); background:var(--yellow); padding:2px 7px; border-radius:6px}
.top .muted,.top label,.who label{color:#B8C2DA}
.top select{background:var(--deep-2); border-color:rgb(255 255 255 / .2); color:#FFFFFF}
.top select option,.top select optgroup{background:#FFFFFF; color:var(--deep)}
.top .btn{background:transparent; border-color:rgb(255 255 255 / .28); color:#FFFFFF}
.top .btn:hover{border-color:#FFFFFF; background:rgb(255 255 255 / .06)}
.top .btn.quiet{border-color:transparent; color:#D5DCEC}
.top .btn.quiet:hover{color:#FFFFFF; border-color:rgb(255 255 255 / .28)}
.top .bell{padding:0; width:40px; height:38px; justify-content:center}
.top .bell svg{width:19px; height:19px}
.top .bell .badge{background:var(--red); box-shadow:0 0 0 2px var(--deep)}
.clock .sim{color:var(--yellow)}
.usermenu,.meblock{color:#FFFFFF}
.tabs{width:calc(100% - 2 * max(16px, env(safe-area-inset-left,0px))); max-width:1208px; margin:0 auto 14px; padding:5px; gap:4px; background:var(--deep-2); border-radius:16px}
.tabs button{color:#C9D2E6; border:0; border-radius:11px; padding:8px 14px; font-weight:600}
.tabs button:hover{color:#FFFFFF; background:rgb(255 255 255 / .07)}
.tabs button[aria-current="page"]{color:var(--deep); background:#FFFFFF}
.tabs .cnt{background:var(--red); color:#FFFFFF; font-weight:700}
.tabs button[aria-current="page"] .cnt{background:var(--red); color:#FFFFFF}

/* knoppen: Voltage Red, afgerond 10px, SemiBold */
.btn{border-radius:var(--r-ctl); padding:9px 16px; font-weight:600; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); transition:background-color .15s, border-color .15s, color .15s}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn.danger{background:var(--danger-btn); border-color:var(--danger-btn); color:#FFFFFF}
.btn.ghost-danger{color:var(--danger); border-color:transparent; background:transparent}
.btn.ghost-danger:hover{border-color:var(--danger)}
.btn.sm{padding:5px 11px; font-size:13px; border-radius:8px}
.btn:disabled{opacity:.5; cursor:not-allowed}
input[type=file]{font-size:13.5px; color:var(--muted)}
input[type=file]::file-selector-button{font:inherit; font-weight:600; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-ctl); padding:8px 14px; margin-right:10px; cursor:pointer}
input[type=file]::file-selector-button:hover{border-color:var(--ink)}

/* velden: wit, rand #E5E7EB, afgerond 10px, oranje focus zoals op sparki.be */
select,input:not([type]),input[type=text],input[type=date],input[type=email],input[type=url],input[type=password],input[type=number],input[type=search],input[type=tel],textarea{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-ctl); padding:9px 12px; color:var(--ink)}
:is(select,input,textarea):focus{outline:none; border-color:var(--focus); box-shadow:0 0 0 1px var(--focus)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
::placeholder{color:#8A8F9C}
.field > span{font-weight:500; font-size:13.5px; color:var(--muted)}
.seg{border-color:var(--line); border-radius:var(--r-ctl)}
.seg label{border-right-color:var(--line)}
.seg label:has(input:checked){background:var(--brand-soft); color:var(--brand); font-weight:600}
.seg label:has(input:focus-visible){outline-color:var(--focus)}

/* blokken en kaarten: afgerond 16px, lichte blauwe rand zoals de kaarten op sparki.be */
.block,.kpi,.cmt,.mail,.panel{border:2px solid var(--card-line); border-radius:var(--r)}
.block > header{padding:14px 18px}
.block > header h2{font-size:17px}
.block .body{padding:16px 18px}
.kpi{padding:14px 16px}
.kpi .v{font-weight:800; font-size:28px; letter-spacing:-.02em}
.kpi:first-child{background:var(--deep); border-color:var(--deep); color:#FFFFFF}
.kpi:first-child .label,.kpi:first-child .h{color:#B8C2DA}
.panel{border-width:1px; border-color:var(--line)}
.tbl th{background:var(--sunk); color:var(--muted); padding:9px 12px}
.tbl td{padding:10px 12px}
.tbl tr.row:hover td{background:var(--sunk)}
.tbl tr.urgent td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.pill{font-weight:600}
.chip{background:var(--brand-soft); color:var(--brand)}
.tog{border-color:var(--line-strong)}
.tog[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.banner{border-radius:12px}
.banner.info,.note.info{background:var(--brand-soft); color:var(--brand); border-color:var(--brand)}
.note{border-radius:0 10px 10px 0}
.nt.unread{background:var(--brand-soft)}
.step.done i{background:var(--brand)}
.step.cur i{background:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.timeline li.st::before{background:var(--brand); border-color:var(--brand)}
.bar .fill{background:var(--brand)}
.bar .track,.bar .fill{display:block}
.bar .track{border-radius:6px; height:10px}
.bar .fill{border-radius:6px}
.refbox{border:2px solid var(--brand); background:var(--brand-soft); border-radius:var(--r)}
.scn .n{color:var(--accent); font-weight:700}
.cmt.antwoord{border-left:3px solid var(--brand)}
.cmt.vraag{border-left:3px solid var(--t-vr-fg)}
.cmt.afkeur{border-left:3px solid var(--danger)}
.d-head{border-bottom:1px solid var(--line)}
.d-title h2{font-size:22px; font-weight:800; letter-spacing:-.015em}
.scrim,.modal-bg{background:rgb(11 24 54 / .5)}
.modal,.pop{border-radius:var(--r)}
.toast{border-radius:12px; font-weight:500}
.keybox{border-radius:10px}

/* aanmelden als: gele balk (Radiant Yellow) valt meteen op */
.impbar{background:var(--yellow); color:var(--deep); border:0}
.impbar .btn{background:var(--deep); border-color:var(--deep); color:#FFFFFF}
.impbar .btn:hover{background:var(--deep-2)}

/* handleiding */
.helpnav button[aria-current="page"]{background:var(--brand-soft); color:var(--brand)}
.helpdoc h2{font-weight:800}

/* aanmeldscherm (prototype) en aanmeldpagina's van de server: Deep Blue band met witte kaart */
.login{position:relative; padding-block:28px 40px}
.login::before{content:""; position:absolute; z-index:-1; top:-20px; height:180px; left:calc(50% - 50vw); right:calc(50% - 50vw); background:var(--deep)}
.login-card{border:2px solid var(--card-line); border-radius:var(--r); box-shadow:var(--shadow)}
.login-card h1{font-weight:800; letter-spacing:-.02em}
.pickrow{border-radius:var(--r-ctl)}
.pickrow:hover{border-color:var(--brand); background:var(--brand-soft)}
.authtop{background:var(--deep); padding:22px 16px 110px}
.authtop .in{max-width:480px; margin:0 auto; display:flex; align-items:center; gap:12px}
.authtop .logo{height:26px; width:auto; display:block}
.authtop .prod{font-weight:600; font-size:14px; color:var(--fresh); border-left:1px solid rgb(255 255 255 / .25); padding-left:12px}
.authmain{max-width:480px; margin:-84px auto 40px; padding-inline:16px}
.authmain .block{box-shadow:var(--shadow)}
.authmain form .btn{justify-content:center}
.authmain h1{font-weight:800; letter-spacing:-.02em}

/* facturen en Finance */
.s-verwerkt{background:var(--deep); color:#FFFFFF}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .s-verwerkt{background:var(--fresh); color:var(--deep)} }
:root[data-theme="dark"] .s-verwerkt{background:var(--fresh); color:var(--deep)}
.invsum{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.invsum > div{display:grid; gap:2px}
.invsum b{font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.bar .fill.over{background:var(--accent)}
@media (max-width:520px){ .invsum{grid-template-columns:1fr 1fr} }
.btn{text-decoration:none}