/* ============================================================
   FinVault Beta — Design system
   ============================================================ */
/* Iconen (emoji) monochroom/grijs tonen i.p.v. kleurrijk, i.v.m. huisstijl */
.ic,.av,.em,.fi,.pagehead .em,[class*="icon"]{filter:grayscale(1) contrast(0.9) brightness(1.15);opacity:.85}
:root{
  --bg:#0b0f1a; --bg-elev:#111726; --bg-elev2:#161d2f;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  --txt:#e8ecf4; --txt-dim:#9aa6be; --txt-faint:#6b768f;
  --brand:#6366f1; --brand-2:#8b8cf9; --brand-soft:rgba(99,102,241,.14);
  --good:#2dd4bf; --good-soft:rgba(45,212,191,.14);
  --warn:#f5b544; --warn-soft:rgba(245,181,68,.14);
  --bad:#f4707a; --bad-soft:rgba(244,112,122,.14);
  --radius:16px; --radius-sm:10px;
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
:root[data-theme="light"]{
  --bg:#f5f7fb; --bg-elev:#ffffff; --bg-elev2:#f2f4f9;
  --line:rgba(15,23,42,.09); --line-strong:rgba(15,23,42,.16);
  --txt:#0f172a; --txt-dim:#556074; --txt-faint:#8a94a8;
  --brand-soft:rgba(99,102,241,.10); --good-soft:rgba(45,212,191,.12);
  --warn-soft:rgba(245,181,68,.14); --bad-soft:rgba(244,112,122,.12);
  --shadow:0 12px 40px rgba(15,23,42,.12);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--txt);font-family:var(--font);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit;font-size:14px}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em}
.hidden{display:none!important}

/* primitives */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:12px;
  font-weight:600;font-size:14px;transition:.15s;white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-2)}
.btn-ghost{background:transparent;color:var(--txt-dim);border:1px solid var(--line-strong)}
.btn-ghost:hover{color:var(--txt);border-color:var(--txt-faint)}
.btn-good{background:var(--good);color:#04211d}
.btn-good:hover{filter:brightness(1.06)}
.btn-grey{background:var(--bg-elev2);color:var(--txt-dim);border:1px solid var(--line-strong)}
.btn-grey:hover{color:var(--txt)}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:10px}
.btn-block{width:100%}
.card{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600}
.badge-brand{background:var(--brand-soft);color:var(--brand-2)}
.badge-good{background:var(--good-soft);color:var(--good)}
.badge-warn{background:var(--warn-soft);color:var(--warn)}
.badge-bad{background:var(--bad-soft);color:var(--bad)}
.dim{color:var(--txt-dim)} .faint{color:var(--txt-faint)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.field{display:block;margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--txt-dim);margin-bottom:6px}
.field input,.field select{width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--line-strong);
  background:var(--bg-elev2);color:var(--txt)}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand)}

/* toast */
#toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--good);color:#04211d;font-weight:650;padding:11px 18px;border-radius:12px;z-index:200;
  transition:.25s;pointer-events:none;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Toasts met een actieknop (bijv. "Ongedaan maken") moeten wél klikbaar zijn —
   de standaardtoast blijft pointer-events:none zodat hij nooit in de weg zit. */
#toast.has-action{pointer-events:auto}
#toast .toast-undo{background:transparent;border:1px solid rgba(4,33,29,.35);color:inherit;font-weight:700;
  font-size:12.5px;padding:5px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;flex:none}
#toast .toast-undo:hover{background:rgba(4,33,29,.1)}

/* modal */
#modal{position:fixed;inset:0;background:rgba(3,6,15,.6);backdrop-filter:blur(4px);z-index:150;
  display:flex;align-items:center;justify-content:center;padding:20px}
#modal .box{background:var(--bg-elev);border:1px solid var(--line-strong);border-radius:18px;
  width:100%;max-width:440px;padding:26px;box-shadow:var(--shadow)}
/* Breed venster voor schermen met kolommen naast elkaar (factuur-/offerteregels).
   Bij 440px werd de omschrijving tot 0px platgedrukt door de vaste kolombreedtes. */
#modal .box.wide{max-width:900px;max-height:calc(100vh - 40px);overflow-y:auto}
#modal h3{font-size:20px;margin-bottom:6px}
#modal .sub{color:var(--txt-dim);margin-bottom:18px;font-size:14px}

.chip{padding:6px 11px;border-radius:9px;border:1px solid var(--line);color:var(--txt-dim);
  font-weight:600;font-size:12.5px;background:transparent}
.chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.chip:hover{color:var(--txt)}
.sep{width:1px;height:22px;background:var(--line-strong);margin:0 2px}

/* auth screens */
.authwrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto;
  background:radial-gradient(1200px 600px at 70% -10%,rgba(99,102,241,.22),transparent),
             radial-gradient(900px 500px at 10% 110%,rgba(45,212,191,.14),transparent),var(--bg)}
.authwrap .panel{width:100%;max-width:430px;text-align:center;margin:auto}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:750;font-size:20px;letter-spacing:-.02em}
.logo .mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--good));
  display:grid;place-items:center;color:#fff;font-size:15px}
.authwrap h1{font-size:29px;margin:24px 0 8px}
.authwrap>.panel>p.lead{color:var(--txt-dim);margin:0 0 24px}
.persona-pick{display:grid;gap:10px;text-align:left;margin-bottom:18px}
.persona{display:flex;align-items:center;gap:13px;padding:13px;border:1px solid var(--line);
  border-radius:14px;background:var(--bg-elev);transition:.15s;width:100%;text-align:left}
.persona:hover{border-color:var(--brand);transform:translateY(-1px)}
.persona .av{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:18px;background:var(--brand-soft)}
.persona .t{font-weight:650}.persona .s{font-size:12.5px;color:var(--txt-dim)}
.authlink{color:var(--brand-2);font-weight:600;background:none}
.divider{display:flex;align-items:center;gap:12px;color:var(--txt-faint);font-size:12px;margin:18px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* onboarding choice cards */
.choice{display:grid;gap:12px;text-align:left}
.choice button{display:flex;align-items:center;gap:14px;padding:16px;border:1.5px solid var(--line);
  border-radius:15px;background:var(--bg-elev);transition:.15s}
.choice button:hover{border-color:var(--brand);transform:translateY(-1px)}
.choice .em{font-size:26px;width:46px;height:46px;border-radius:12px;background:var(--brand-soft);display:grid;place-items:center}
.choice .t{font-weight:700}.choice .s{font-size:13px;color:var(--txt-dim)}

/* app shell */
#shell{display:none;height:100%;grid-template-columns:250px 1fr}
#shell.show{display:grid}
.side{background:var(--bg-elev);border-right:1px solid var(--line);display:flex;flex-direction:column;
  padding:16px 12px;gap:2px;overflow-y:auto}
.side .logo{padding:6px 8px 14px;font-size:17px}
.navlbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-faint);
  padding:14px 10px 5px;font-weight:700}
.navitem{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--txt-dim);
  font-weight:550;font-size:14px;transition:.12s;width:100%;text-align:left}
.navitem:hover{background:var(--bg-elev2);color:var(--txt)}
.navitem.on{background:var(--brand-soft);color:var(--brand-2)}
.navitem .ic{width:20px;text-align:center;font-size:15px}
.navitem .count{margin-left:auto;font-size:11px;font-weight:700;background:var(--brand);color:#fff;padding:1px 7px;border-radius:999px}

.main{display:flex;flex-direction:column;height:100%;overflow:hidden}
.topbar{display:flex;align-items:center;gap:14px;padding:14px 26px;border-bottom:1px solid var(--line);
  background:var(--bg);position:relative;z-index:20}
.content{padding:26px;overflow-y:auto;flex:1}
.pagehead{margin-bottom:20px;display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.pagehead h2{font-size:24px}
.pagehead p{margin:4px 0 0;color:var(--txt-dim)}
.pagehead .spacer{flex:1}

/* context switcher */
.ctx{position:relative}
.ctx-btn{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;
  border:1px solid var(--line-strong);background:var(--bg-elev);font-weight:650}
.ctx-btn .av{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px}
.ctx-btn.plain{border:none;background:none;padding-left:0}
.ctx-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:270px;background:var(--bg-elev2);
  border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow);padding:6px;z-index:50}
.ctx-item{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;width:100%;text-align:left}
.ctx-item:hover{background:var(--bg-elev)}
.ctx-item .av{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:14px}
.ctx-item .t{font-weight:600}.ctx-item .s{font-size:12px;color:var(--txt-faint)}
.ctx-item.add{color:var(--brand-2);font-weight:650}
.ctx-div{height:1px;background:var(--line);margin:5px 8px}
.spacer{flex:1}
.iconbtn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--txt-dim);background:var(--bg-elev)}
.iconbtn:hover{color:var(--txt)}
.avatar-top{width:34px;height:34px;border-radius:10px;background:var(--good-soft);color:var(--good);
  display:grid;place-items:center;font-weight:700}

/* grids & tiles */
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1050px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}}
.tile .k{font-size:12.5px;color:var(--txt-dim);font-weight:600}
.tile .v{font-size:26px;font-weight:700;margin-top:6px;letter-spacing:-.02em}
.tile .d{font-size:12.5px;margin-top:4px}
.up{color:var(--good)}.down{color:var(--bad)}
.spark{height:44px;margin-top:10px;display:flex;align-items:flex-end;gap:3px}
.spark i{flex:1;background:var(--brand-soft);border-radius:3px 3px 0 0}
.spark.g i{background:var(--good-soft)}

.row{display:flex;align-items:center;gap:12px}

/* Mobiel-first: bedrag-invoerrijen (Maandlasten-categorieën, inkomen).
   Op desktop label — hint — vast-breed bedragveld, op één regel.
   Onder de breakpoint: label op zijn eigen regel, bedragveld eronder over de
   volle breedte — de vaste 124px duwde het bedragveld voorheen half van het
   scherm af zodra de categorienaam iets langer was dan "BTW". */
.catrow{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap}
.catrow-label{flex:1;min-width:140px;display:flex;align-items:center;gap:8px;min-width:0}
.catrow-hint{font-size:10.5px;color:var(--txt-faint);white-space:nowrap}
.catrow-amt{display:flex;align-items:center;gap:5px;width:124px;flex:none}
@media (max-width:480px){
  .catrow-label{width:100%;flex-basis:100%}
  .catrow-hint{margin-left:auto}
  .catrow-amt{width:100%;flex:1 1 100%}
}
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:none}
.li .ic2{width:36px;height:36px;border-radius:10px;background:var(--bg-elev2);display:grid;place-items:center}
.li .amt{margin-left:auto;font-weight:650}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--txt-faint);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:0 10px 10px}
td{padding:12px 10px;border-top:1px solid var(--line)}
tr:hover td{background:var(--bg-elev2)}

/* empty state */
.empty{text-align:center;max-width:460px;margin:30px auto;padding:36px}
.empty .em{font-size:40px;margin-bottom:14px}
.empty h3{font-size:20px;margin-bottom:8px}
.empty p{color:var(--txt-dim);margin:0 0 20px}
.note{display:flex;gap:11px;padding:13px 15px;border-radius:12px;background:var(--brand-soft);
  border:1px solid rgba(99,102,241,.25);font-size:13.5px;margin-bottom:18px}
.note .em{font-size:16px}

/* ticket */
.ticket{display:grid;grid-template-columns:1fr 320px;gap:16px}
@media(max-width:980px){.ticket{grid-template-columns:1fr}}
.bubble{padding:11px 14px;border-radius:12px;background:var(--bg-elev2);margin-bottom:10px;font-size:14px}
.bubble.me{background:var(--brand-soft)}
.ai{border-left:3px solid var(--good);background:var(--good-soft);padding:12px 14px;border-radius:10px;font-size:13.5px;margin-bottom:16px}
.snap{display:flex;flex-direction:column;gap:9px}
.snap .btn-ghost{justify-content:flex-start;width:100%}

/* #49 Responsive: mobiele navigatie als overlay i.p.v. permanent verborgen */
#mobileNavBtn{display:none}
#mobileNavScrim{display:none;position:fixed;inset:0;background:rgba(3,6,15,.5);z-index:79}
@media(max-width:760px){
  #shell.show{grid-template-columns:1fr}
  .side{display:none;position:fixed;inset:0 20% 0 0;z-index:80;box-shadow:var(--shadow)}
  .side.mobile-open{display:flex}
  #mobileNavScrim.show{display:block}
  #mobileNavBtn{display:grid}
  .content{padding:16px}.g4,.g3,.g2{grid-template-columns:1fr}
  /* Topbar past op mobiel niet met alle knoppen op volle breedte — smaller
     maken en de contextnaam afkappen i.p.v. laten overlopen (#lees: bugreport
     "op mijn iPhone is de site net te breed"). */
  .topbar{gap:8px;padding:10px 14px}
  .ctx-btn{max-width:150px}
  .ctx-btn>div{overflow:hidden}
  .ctx-btn>div>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Datatabellen (facturen, klanten, gebruikers, ...) zijn breder dan een
     telefoonscherm — laat de tabel zelf horizontaal scrollen i.p.v. de hele
     pagina te laten overlopen. */
  .card:has(>table){overflow-x:auto}
}
@media(max-width:480px){
  #quickBtn,#helpBtn{display:none}
  .ctx-btn{max-width:110px}
}
/* Kleinste telefoons (iPhone SE / mini, ~320-375px): topbar nog krapper
   maken zodat ook de avatar rechts niet buiten beeld valt. */
@media(max-width:380px){
  .topbar{gap:6px;padding:10px 10px}
  .ctx-btn{max-width:96px;padding:8px 8px;gap:6px}
  .iconbtn{width:34px;height:34px}
}
/* Factuur-/offerteregels — compacte rij op desktop, nette gelabelde kaart op
   mobiel (voorheen wrapte het BTW%/bedrag rommelig over meerdere regeltjes). */
.blditem,.blditem-add{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.bi-move{display:flex;flex-direction:column;gap:2px}
.bi-move .delx{line-height:1}
.bi-move .delx:disabled{opacity:.3;cursor:default}
.bi-cell{display:flex;flex-direction:column;gap:3px;min-width:0}
.bi-cell .bi-lbl{display:none;font-size:10px;font-weight:600;color:var(--txt-faint)}
.bi-cell input,.bi-cell select{width:100%}
.bi-cdesc{flex:2;min-width:120px}
.bi-cqty{width:62px}.bi-cprice{width:86px}.bi-cbtw{width:68px}
/* Winst% is invulbaar: typ een marge en de verkoopprijs wordt teruggerekend. */
.bi-cmarge{width:76px}
.bi-marge{width:100%;font-variant-numeric:tabular-nums}
/* Koprij boven de regels — op desktop staan de veldlabels verborgen, dus zonder
   deze kop weet je niet welke kolom wat is. Op mobiel tonen de labels zelf. */
.bi-head{font-family:inherit;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--txt-faint);font-weight:600;margin-bottom:4px;align-items:flex-end}
.bi-head .bi-cell{min-height:0}
.bi-head .bi-amt{text-align:right}
/* De lege plekken voor de ▲▼- en ✕-knoppen moeten dezelfde breedte houden als
   in een regel, anders schuift de hele koprij ernaast. */
.bi-head .bi-move,.bi-head .bi-del{width:26px;flex-shrink:0}
.bi-amt{width:80px;text-align:right;font-size:12.5px;flex-shrink:0}
.blditem .bi-del{flex-shrink:0}
@media(max-width:560px){
  .blditem{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:end;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--bg-elev);margin-bottom:10px}
  .blditem .bi-move{display:none}
  .blditem .bi-cell .bi-lbl,.blditem-add .bi-cell .bi-lbl{display:block}
  .blditem .bi-cdesc{grid-column:1 / -1}
  .blditem .bi-cqty,.blditem .bi-cprice,.blditem .bi-cbtw,.blditem .bi-cmarge{width:auto}
  .blditem-add .bi-cmarge{width:auto}
  /* Koprij is op mobiel overbodig: daar staat het label boven elk veld zelf. */
  .bi-head{display:none}
  .blditem .bi-amt{grid-column:1 / 3;width:auto;text-align:left;align-self:center;font-weight:700;font-size:15px}
  .blditem .bi-del{grid-column:3;justify-self:end;align-self:center}
  .blditem-add{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
  .blditem-add .bi-cdesc{grid-column:1 / -1}
  .blditem-add .bi-cqty,.blditem-add .bi-cprice,.blditem-add .bi-cbtw{width:auto}
  /* Het brede venster mag op een telefoon niet breder zijn dan het scherm. */
  #modal .box.wide{max-width:100%}
}

/* ============================================================
   Public landing site
   ============================================================ */
.landing{position:fixed;inset:0;overflow-y:auto;background:var(--bg);z-index:10}
/* Is er al een sessie, dan blijft de publieke landingspagina meteen verborgen
   (zie de minicontrole in index.html) — voorkomt een flits bij ingelogde bezoekers. */
html.has-session .landing{display:none}
.lnav{position:sticky;top:0;display:flex;align-items:center;gap:22px;padding:15px 30px;
  background:var(--bg);border-bottom:1px solid var(--line);z-index:6}
.lnav .navlinks{display:flex;gap:20px}
.lnav a{color:var(--txt-dim);font-weight:550;font-size:14px;cursor:pointer}
.lnav a:hover{color:var(--txt)}
.lnav .spacer{flex:1}
.lnav a.active{color:var(--txt);font-weight:650}
.lnav a.active::after{content:"";display:block;height:2px;background:var(--brand);border-radius:2px;margin-top:14px}
@media(max-width:720px){.lnav .navlinks{gap:12px;font-size:13px;overflow-x:auto}.lnav a.active::after{display:none}}
@media(max-width:480px){.lnav{gap:10px;padding:12px 16px}.lnav .navlinks{display:none}.lnav-login{font-weight:650;color:var(--txt)}}
/* Smalle telefoons: logo + taalkiezer + thema + inloggen + registreerknop passen
   samen niet op één regel (de balk werd breder dan het scherm, waardoor de hele
   site horizontaal schoof). Laat de balk netjes afbreken en houd de taalkiezer
   compact, zodat alles binnen het scherm blijft. */
@media(max-width:560px){
  .lnav{flex-wrap:wrap;row-gap:8px}
  .lnav .logo{flex:0 0 auto}
  .lnav .spacer{flex:1 1 0}
  .langsel{max-width:74px}
}
@media(max-width:380px){
  .lnav{gap:8px;padding:10px 12px}
  .langsel{max-width:62px;font-size:11px}
  .lnav .btn-sm{padding:7px 10px;font-size:12.5px}
}

.mhero{text-align:center;padding:64px 0 8px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--bg-elev)}
.step .stepn{width:36px;height:36px;border-radius:11px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;margin-bottom:14px}
.step .ft{font-weight:650;font-size:17px}
.step .fs{color:var(--txt-dim);font-size:14px;margin-top:6px}
.faq{max-width:720px;margin:30px auto 0}
details.q{border:1px solid var(--line);border-radius:12px;padding:2px 18px;margin-bottom:10px;background:var(--bg-elev)}
details.q summary{padding:15px 0;font-weight:600;cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}
details.q summary::-webkit-details-marker{display:none}
details.q summary::before{content:"+";color:var(--brand-2);font-weight:700;font-size:18px;width:16px}
details.q[open] summary::before{content:"−"}
details.q p{margin:0 0 16px;color:var(--txt-dim);padding-left:26px}
.lwrap{max-width:1060px;margin:0 auto;padding:0 24px}
.hero{text-align:center;padding:76px 0 20px}
.eyebrow{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand-2);font-size:13px;font-weight:600}
.hero h1{font-size:clamp(34px,6vw,58px);line-height:1.04;letter-spacing:-.03em;margin:20px 0 16px}
.hero .glow{background:linear-gradient(120deg,var(--brand-2),var(--good));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{font-size:19px;color:var(--txt-dim);max-width:600px;margin:0 auto 28px;line-height:1.5}
.hcta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-lg{padding:14px 24px;font-size:16px;border-radius:14px}
.micro{color:var(--txt-faint);font-size:13px;margin-top:16px}
.trust{display:flex;gap:14px 30px;justify-content:center;flex-wrap:wrap;color:var(--txt-dim);
  font-size:13.5px;padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:56px}
.trust span{display:inline-flex;align-items:center;gap:8px}
.section{padding:60px 0}
.section h2{font-size:clamp(26px,4vw,34px);text-align:center;letter-spacing:-.02em}
.section .lead{text-align:center;color:var(--txt-dim);max-width:580px;margin:12px auto 0;font-size:16px}
.dualcard{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px}
@media(max-width:760px){.dualcard{grid-template-columns:1fr}}
.pcard{border:1px solid var(--line);border-radius:20px;padding:30px;background:var(--bg-elev);transition:.15s}
.pcard:hover{transform:translateY(-3px);border-color:var(--brand)}
.pcard .pico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:var(--brand-soft);margin-bottom:16px}
.pcard h3{font-size:22px}.pcard ul{margin:14px 0 20px;padding:0;list-style:none}
.pcard li{padding:6px 0 6px 26px;position:relative;color:var(--txt-dim);font-size:14.5px}
.pcard li::before{content:"✓";position:absolute;left:0;color:var(--good);font-weight:700}
.featgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
@media(max-width:900px){.featgrid{grid-template-columns:repeat(2,1fr)}}
.feat{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--bg-elev)}
.feat .fi{font-size:20px}.feat .ft{font-weight:650;margin-top:8px;font-size:14.5px}
.feat .fs{color:var(--txt-faint);font-size:12.5px;margin-top:3px}
.finalcta{text-align:center;background:linear-gradient(135deg,var(--brand-soft),var(--good-soft));
  border:1px solid var(--line);border-radius:24px;padding:52px 24px;margin:40px 0}
.lfoot{border-top:1px solid var(--line);padding:30px 0;color:var(--txt-faint);font-size:13px;text-align:center}
.footlink{color:var(--txt-faint);text-decoration:underline;cursor:pointer}
.footlink:hover{color:var(--txt)}

.cookiebanner{position:fixed;left:16px;right:16px;bottom:16px;z-index:300;max-width:760px;margin:0 auto;
  background:var(--bg-elev);border:1px solid var(--line-strong);border-radius:16px;box-shadow:var(--shadow);
  padding:16px 18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cb-text{flex:1;min-width:220px;font-size:13px;color:var(--txt-dim);line-height:1.5}
.cb-text a{color:var(--brand);cursor:pointer;text-decoration:underline}
.cb-actions{display:flex;gap:8px;flex:none}
@media (max-width:480px){.cookiebanner{left:10px;right:10px;bottom:10px;padding:14px}.cb-actions{width:100%}.cb-actions .btn{flex:1}}

/* ============================================================
   Help drawer, tabs, profile menu
   ============================================================ */
#drawer{position:fixed;inset:0;z-index:160;display:flex;justify-content:flex-end}
#drawer .scrim{position:absolute;inset:0;background:rgba(3,6,15,.5)}
.drawer{position:relative;height:100%;width:410px;max-width:92vw;background:var(--bg-elev);
  border-left:1px solid var(--line-strong);box-shadow:var(--shadow);display:flex;flex-direction:column}
.drawer .dh{padding:18px 20px 0;display:flex;align-items:center;gap:10px}
.drawer .dh h3{font-size:18px;flex:1}
.tabs{display:flex;gap:18px;padding:14px 20px 0}
.tab{padding:8px 2px 12px;font-weight:600;font-size:14px;color:var(--txt-dim);border-bottom:2px solid transparent}
.tab.on{color:var(--txt);border-color:var(--brand)}
.dbody{padding:18px 20px;overflow-y:auto;flex:1}
.docitem{padding:14px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;cursor:pointer;transition:.12s}
.docitem:hover{border-color:var(--brand)}
.docitem .t{font-weight:650}.docitem .s{font-size:13px;color:var(--txt-dim);margin-top:3px}

.pmenu{position:absolute;top:calc(100% + 8px);right:0;min-width:250px;background:var(--bg-elev2);
  border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow);padding:6px;z-index:60}
.pmenu .phead{padding:10px 11px;border-bottom:1px solid var(--line);margin-bottom:6px}
.pmenu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 11px;border-radius:9px;font-weight:550;font-size:14px}
.pmenu button:hover{background:var(--bg-elev)}
.profile-wrap{position:relative}

.prog{height:8px;background:var(--bg-elev2);border-radius:5px;overflow:hidden;margin-top:7px}
.prog i{display:block;height:100%;background:var(--good);border-radius:5px}

/* projecten-planbord */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.kcol{flex:0 0 250px;background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;padding:10px}
.kcol h4{font-size:12.5px;font-weight:700;color:var(--txt-dim);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.kcard{background:var(--bg-elev2);border:1px solid var(--line);border-radius:9px;padding:9px 10px;margin-bottom:8px;cursor:pointer;transition:.12s}
.kcard:hover{border-color:var(--txt-faint)}
.kcard .kname{font-weight:600;font-size:13.5px}
.kcard .kmeta{font-size:11.5px;color:var(--txt-faint);margin-top:3px}
.kcard .kmove{display:flex;gap:4px;margin-top:7px}
.kcard .kmove button{font-size:11px;padding:3px 7px;border-radius:6px;background:var(--bg-elev);border:1px solid var(--line)}
.kcard .kmove button:hover{border-color:var(--brand)}

/* agenda-weekweergave: langere kolommen dan het projecten-planbord, zodat
   een hele werkdag/-week in één oogopslag past zonder te scrollen */
.kanban-agenda .kcol-tall{min-height:520px}

/* emoji picker */
.iconpick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.ip{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);font-size:19px;line-height:1;
  display:grid;place-items:center;background:var(--bg-elev2);transition:.12s}
.ip:hover{border-color:var(--txt-faint)}
.ip.on{border-color:var(--brand);background:var(--brand-soft)}

/* delete buttons */
.delx{width:26px;height:26px;border-radius:8px;color:var(--txt-faint);font-size:12px;flex:none;
  border:1px solid transparent;transition:.12s}
.delx:hover{color:var(--bad);background:var(--bad-soft)}
.li .delx{margin-left:6px}
.pmenu button{align-items:center}
.iconbtn.themebtn{font-size:15px}

/* #16 Print-to-PDF: alleen de factuur/offerte-kaart tonen bij afdrukken */
@media print{
  body *{visibility:hidden}
  /* Factuur-/offertevel afdrukken als het aanwezig is. */
  #docPaper, #docPaper *{visibility:visible}
  #docPaper{position:absolute;left:0;top:0;width:100%;max-width:none;box-shadow:none;padding:0}
  /* Fallback: als er geen docPaper is, druk de eerste kaart af. */
  .content:not(:has(#docPaper)) .card, .content:not(:has(#docPaper)) .card *{visibility:visible}
  .content:not(:has(#docPaper)) .card{position:absolute;left:0;top:0;width:100%;box-shadow:none;border:none}
  .side,.topbar,.pagehead,#toast,#modal,.snap,.spacer{display:none!important}
}