/* Verkoop · BouwRadar (28-10-2026). Huisstijl van de dashboards (dezelfde kleurtokens), eigen kleine pagina.
   Geen inline stijl en geen inline script (CSP: style-src 'self', script-src 'self'). Mobiel eerst. */
@font-face{font-family:'Geist';src:url('/fonts/geist-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{
  --bg:#0B0D13;--panel:#12151C;--card:#161A23;--card2:#1B2029;--line:#232936;--line2:#2C3444;
  --txt:#E8ECF4;--txt2:#98A2B3;--txt3:#808B9E;
  --accent:#7A9EFF;--accent-dim:rgba(122,158,255,.14);--accent-soft:rgba(122,158,255,.22);
  --groen:#4AC777;--amber:#F5AF20;--rood:#FF7B7B;--paars:#C77DDB;--oranje:#FF9A6B;
  --r:14px;--ease:cubic-bezier(.2,.7,.2,1);
  --nav-h:62px;--kop-h:56px;
  --veilig-o:env(safe-area-inset-bottom,0px);--veilig-b:env(safe-area-inset-top,0px);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{background:var(--bg);color:var(--txt)}
body{font:15px/1.5 'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;min-height:100vh;min-height:100dvh;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
.verborgen{display:none!important}
.laden{padding:40px 20px;color:var(--txt2);text-align:center}

/* ---- kop en navigatie ---- */
.kop{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;min-height:calc(var(--kop-h) + var(--veilig-b));padding:var(--veilig-b) 14px 0;
  background:rgba(11,13,19,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo{font-weight:800;font-size:17px;letter-spacing:-.02em;white-space:nowrap}
.logo b{color:var(--accent)}
.logo small{font-weight:600;color:var(--txt2);font-size:13px;margin-left:6px;letter-spacing:0}
.kop .ruimte{flex:1}
.kop .knop{min-height:40px}
.topnav{display:none;gap:4px}
.topnav button{background:none;border:0;color:var(--txt2);padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:600;min-height:40px}
.topnav button.aan{background:var(--accent-dim);color:var(--accent)}
.onderbalk{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--nav-h) + var(--veilig-o));
  padding-bottom:var(--veilig-o);background:rgba(18,21,28,.97);border-top:1px solid var(--line)}
.onderbalk button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;border:0;color:var(--txt2);cursor:pointer;
  font-size:11.5px;font-weight:600;min-width:0;padding:6px 2px}
.onderbalk button svg{width:22px;height:22px}
.onderbalk button.aan{color:var(--accent)}
.hoofd{padding:14px 14px calc(var(--nav-h) + var(--veilig-o) + 24px);max-width:1100px;margin:0 auto}
@media (min-width:760px){
  .onderbalk{display:none}
  .topnav{display:flex}
  .hoofd{padding:22px 24px 48px}
}

/* ---- algemene bouwstenen ---- */
h1{font-size:22px;letter-spacing:-.01em;margin:4px 0 12px}
h2{font-size:16px;margin:22px 0 10px}
h3{font-size:14px;margin:0 0 6px}
p{margin:0 0 8px}
.zacht{color:var(--txt2)}
.klein{font-size:13px}
.kaart{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:0 0 10px}
.kaart.waarschuwing{border-color:rgba(245,175,32,.55);background:linear-gradient(135deg,rgba(245,175,32,.10),var(--card) 70%)}
.kaart.fout{border-color:rgba(255,123,123,.55)}
.rij{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rij.tussen{justify-content:space-between}
.stapel{display:grid;gap:8px}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line2);
  background:var(--card2);color:var(--txt);font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.knop:hover{border-color:var(--txt3)}
.knop.hoofdknop{background:var(--accent);border-color:var(--accent);color:#0B0D13}
.knop.gevaar{color:var(--rood);border-color:rgba(255,123,123,.45);background:transparent}
.knop.stil{background:transparent}
.knop.klein{min-height:36px;padding:0 12px;font-size:13px}
.knop[disabled]{opacity:.45;cursor:not-allowed}
.knop.breed{width:100%}
.knoppen{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.knoppen .knop{flex:1 1 auto}
.label{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:8px;background:var(--accent-dim);color:var(--accent);white-space:nowrap}
.label.lead{background:rgba(152,162,179,.14);color:var(--txt2)}
.label.gesprek{background:rgba(199,125,219,.16);color:var(--paars)}
.label.offerte,.label.verstuurd,.label.open{background:var(--accent-dim);color:var(--accent)}
.label.proef{background:rgba(245,175,32,.14);color:var(--amber)}
.label.klant,.label.geaccepteerd,.label.betaald{background:rgba(74,199,119,.14);color:var(--groen)}
.label.gestopt,.label.afgewezen,.label.verlopen,.label.vervangen{background:rgba(128,139,158,.14);color:var(--txt3)}
.label.concept{background:rgba(152,162,179,.14);color:var(--txt2)}
.label.te-laat{background:rgba(255,123,123,.16);color:var(--rood)}
.leeg{color:var(--txt3);padding:18px 4px;text-align:center}
.melding{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + var(--veilig-o) + 14px);z-index:40;background:var(--card2);border:1px solid var(--line2);
  border-radius:12px;padding:11px 16px;box-shadow:0 10px 30px rgba(0,0,0,.45);max-width:calc(100vw - 32px);font-weight:600}
.melding.fout{border-color:rgba(255,123,123,.6);color:var(--rood)}
@media (min-width:760px){.melding{bottom:24px}}

/* ---- lijsten ---- */
.lijst{display:grid;gap:8px}
.item{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;cursor:pointer;min-height:56px;color:var(--txt)}
.item:hover{border-color:var(--line2)}
.item .titel{font-weight:650;min-width:0;overflow-wrap:anywhere}
.item .sub{grid-column:1/-1;color:var(--txt2);font-size:13px;overflow-wrap:anywhere}
.item .bedrag{font-variant-numeric:tabular-nums;font-weight:650;text-align:right}
.item.laat .sub b{color:var(--rood)}
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;margin:0 0 6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:36px;padding:0 12px;border-radius:99px;border:1px solid var(--line2);background:transparent;color:var(--txt2);font-weight:600;font-size:13px;cursor:pointer}
.chip.aan{background:var(--accent-dim);border-color:transparent;color:var(--accent)}
.zoek{width:100%;min-height:44px;margin:0 0 10px}

/* ---- tegels ---- */
.tegels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 12px}
@media (min-width:760px){.tegels{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tegel{background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-width:0}
.tegel span{display:block;color:var(--txt2);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.tegel b{display:block;font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tegel small{color:var(--txt3);font-size:12px}
.tegel.rood b{color:var(--rood)}

/* ---- formulieren ---- */
.veld{display:block;margin:0 0 12px;min-width:0}
.veld>span{display:block;font-size:13px;font-weight:600;color:var(--txt2);margin:0 0 5px}
.veld>small{display:block;color:var(--txt3);font-size:12px;margin-top:4px}
.veld.fout>small{color:var(--rood)}
input[type=text],input[type=password],input[type=date],input[type=search],input[type=number],input[inputmode],select,textarea{width:100%;min-height:44px;padding:10px 12px;
  border-radius:10px;border:1px solid var(--line2);background:var(--panel);color:var(--txt);font-size:16px}
textarea{min-height:96px;resize:vertical;line-height:1.45}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.veld.fout input,.veld.fout select,.veld.fout textarea{border-color:var(--rood)}
.raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 10px}
.raster.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:420px){.raster.drie{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.vinkje{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:600}
.vinkje input{width:22px;height:22px;accent-color:var(--accent)}
.segment{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 0 12px}
.segment::-webkit-scrollbar{display:none}
.segment button{flex:1 0 auto;min-height:40px;padding:0 10px;border-radius:10px;border:1px solid var(--line2);background:transparent;color:var(--txt2);font-weight:600;font-size:13px;cursor:pointer}
.segment button.aan{background:var(--accent);border-color:var(--accent);color:#0B0D13}

/* ---- offerte- en factuurregels ---- */
.regel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 8px}
.regel.uit{opacity:.55}
.regel .rij.tussen b{font-variant-numeric:tabular-nums}
.regel .raster.drie{margin-top:8px}
.totalen{display:grid;grid-template-columns:1fr auto;gap:4px 14px;font-variant-numeric:tabular-nums;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.totalen .r{text-align:right}
.totalen .eind{font-weight:750;border-top:1px solid var(--line2);padding-top:6px}

/* ---- notities ---- */
.notitie{border-left:3px solid var(--line2);padding:6px 0 6px 12px;margin:0 0 10px;white-space:pre-wrap;overflow-wrap:anywhere}
.notitie .rij{font-size:12px;color:var(--txt3)}
.notitie .knop{min-height:32px;padding:0 10px;font-size:12px}

/* ---- grafiek ---- */
.grafiek{width:100%;height:auto;display:block}
.grafiek .as{fill:var(--txt3);font-size:10px}
.grafiek .lijn{stroke:var(--line);stroke-width:1}
.grafiek .gef{fill:var(--accent)}
.grafiek .bet{fill:var(--groen)}
.grafiek .prog{fill:var(--accent-soft);stroke:var(--accent);stroke-dasharray:3 3}
.grafiek .contract{fill:none;stroke:var(--amber);stroke-width:2}
.legenda{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--txt2);margin:8px 0 0}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--accent)}
.legenda i.bet{background:var(--groen)}.legenda i.prog{background:var(--accent-soft);outline:1px dashed var(--accent)}.legenda i.contract{background:var(--amber);height:3px;vertical-align:3px}
.tabel{width:100%;border-collapse:collapse;font-size:14px}
.tabel th{text-align:left;color:var(--txt2);font-size:12px;font-weight:600;padding:6px 4px;border-bottom:1px solid var(--line2)}
.tabel td{padding:8px 4px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.tabel .r{text-align:right}

/* ---- inloggen ---- */
.inlog{max-width:420px;margin:8vh auto 0;padding:0 16px 40px}
.inlog .logo{font-size:26px;display:block;margin:0 0 18px}
.geheim{font:600 17px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;background:var(--panel);border:1px dashed var(--line2);border-radius:10px;padding:10px 12px;
  word-break:break-all;user-select:all;-webkit-user-select:all}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:6px;font:600 15px ui-monospace,SFMono-Regular,Menlo,monospace;margin:10px 0}
.codes span{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px;text-align:center;user-select:all;-webkit-user-select:all}

/* ---- A4-document (offerte en factuur), huisstijl van Vizier/sales/sjablonen ---- */
.doc-balk{position:sticky;top:0;z-index:20;display:flex;gap:8px;align-items:center;padding:calc(10px + var(--veilig-b)) 14px 10px;background:var(--bg);border-bottom:1px solid var(--line)}
.doc-balk .ruimte{flex:1}
.doc-wrap{background:#3a3f4b;padding:16px 8px 40px;min-height:100vh}
.vel{background:#fff;color:#111;max-width:800px;margin:0 auto;padding:28px 26px;font-size:13px;line-height:1.5;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.4);position:relative;overflow:hidden}
.vel .d-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:2px solid #111;padding-bottom:14px;margin-bottom:22px;flex-wrap:wrap}
.vel .d-logo{font-weight:800;font-size:24px;letter-spacing:-.02em}
.vel .d-logo b{color:#3F63D6}
.vel .d-afz{text-align:right;font-size:11.5px;color:#555;line-height:1.45}
.vel .d-volgt{color:#8a5a00}
.vel h1{font-size:24px;margin:0 0 4px;color:#111}
.vel .d-meta{color:#555;font-size:12px;margin-bottom:20px}
.vel .d-twee{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px}
.vel .d-blok h4{margin:0 0 4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#666}
.vel table{width:100%;border-collapse:collapse;margin:8px 0 14px}
.vel th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#666;border-bottom:1px solid #111;padding:6px 0}
.vel td{padding:8px 0;border-bottom:1px solid #ddd;vertical-align:top}
.vel td.r,.vel th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:10px}
.vel td small{display:block;color:#555}
.vel .d-tot td{border-bottom:0;padding:4px 0}
.vel .d-tot .eind td{font-weight:700;border-top:2px solid #111;padding-top:8px;font-size:14.5px}
.vel .d-kader{border:1px solid #ddd;border-radius:8px;padding:12px 14px;margin:14px 0;font-size:12.5px}
.vel .d-kader ol,.vel .d-kader ul{margin:6px 0 0;padding-left:18px}
.vel .d-kader li{margin-bottom:4px}
.vel .d-voet{margin-top:26px;padding-top:10px;border-top:1px solid #ddd;font-size:11px;color:#666}
.vel .d-waarschuwing{border:2px solid #c0392b;color:#c0392b;background:#fdecea;border-radius:8px;padding:10px 12px;margin:0 0 16px;font-weight:600}
.vel .d-stempel{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%) rotate(-24deg);font-size:96px;font-weight:800;color:rgba(192,57,43,.12);letter-spacing:.1em;pointer-events:none;white-space:nowrap}
@media (max-width:560px){.vel{padding:20px 14px;font-size:12px}.vel .d-twee{grid-template-columns:1fr}.vel .d-afz{text-align:left}.vel .d-stempel{font-size:60px}}

/* Elk tikvlak minstens 44 px hoog, ook liggend en op de laptop (kleine knoppen, chips, fasesegment, bovenmenu) */
.knop.klein,.chip,.segment button,.kop .knop,.notitie .knop,.doc-balk .knop,.topnav button{min-height:44px}

@page{size:A4;margin:16mm 14mm}
@media print{
  html,body{background:#fff!important;color:#111}
  .kop,.onderbalk,.doc-balk,.melding{display:none!important}
  .doc-wrap{background:#fff;padding:0;min-height:0}
  .hoofd{padding:0;max-width:none}
  .vel{box-shadow:none;border-radius:0;max-width:none;padding:0;font-size:11pt}
  .vel .d-twee{grid-template-columns:1fr 1fr}
  .vel .d-afz{text-align:right}
}