@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');

/* =====================================================================
   Compliancy Tools — beheerportaal (de "cockpit" van de leverancier)
   ---------------------------------------------------------------------
   Bewust HERKENBAAR ANDERS dan een klantportal. Dat is geen smaakkwestie
   maar een veiligheidsmaatregel: vanuit dit scherm kun je een klantportal
   bevriezen. Je moet in één oogopslag zien dat je in de cockpit zit en
   niet in de omgeving van een klant. Vandaar de donkere basis met
   koraalaccent, de smalle bovenrand en het rasterpatroon — allemaal
   elementen die in de klantportal niet voorkomen.

   Merkkleuren komen wél uit dezelfde familie als de rest van Compliancy
   Tools: paars #611881 en koraal #DA593D.
   ===================================================================== */

:root{
  --brand:#09409f;      --brand-soft:#e6ecf5;
  --accent:#1187c4;     --accent-hi:#3298cc;  --accent-soft:#e2f1f8;
  --accent-ink:#fff;

  --ink:#161020;
  --paper:#f2f6fa;
  --card:#ffffff;
  --line:#e4dfec;
  --line-soft:#efebf5;
  --muted:#6d6482;

  --side-bg:#062a67;
  --side-card:#184ba5;
  --side-ink:#ffffff;
  --side-dim:#b6acd0;
  --side-brand:#09409f;

  --good:#189065;      --good-soft:#e1f4eb;
  --warn:#b07514;      --warn-soft:#faf0da;
  --bad:#cf3f2e;       --bad-soft:#fbe8e5;

  --radius:14px;
  --radius-sm:10px;
  --bw:1px;
  --shadow:0 1px 2px rgba(22,11,44,.05), 0 6px 20px rgba(22,11,44,.06);
  --shadow-lift:0 2px 6px rgba(22,11,44,.08), 0 18px 46px rgba(22,11,44,.16);
  --ring:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);

  --font-display:'Geist',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:'Geist',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:'Geist Mono',"SF Mono","Cascadia Code",Consolas,Menlo,monospace;

  --side-w:238px;
  --side-w-rail:66px;
}

:root[data-theme="dark"]{
  --brand:#7090c7;   --brand-soft:#0a2967;
  --accent:#379acd;  --accent-hi:#54a9d5; --accent-soft:#0c376a;
  --ink:#f1ecf8; --paper:#0a2051; --card:#062a67; --line:#3d4e75; --line-soft:#30426c; --muted:#a8afc1;
  --side-bg:#062a67; --side-card:#184ba5; --side-ink:#ffffff; --side-dim:#b6acd0; --side-brand:#09409f;
  --good:#3ecb92; --good-soft:#123122;
  --warn:#e3ad3a; --warn-soft:#332612;
  --bad:#f0705c;  --bad-soft:#3a1712;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
  --shadow-lift:0 2px 6px rgba(0,0,0,.45), 0 18px 46px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{ font-family:var(--font-display); font-weight:700; letter-spacing:-.025em; margin:0; text-wrap:balance; }
a{ color:inherit; }
button{ font-family:inherit; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:8px; }

/* De cockpit-streep: staat altijd bovenaan, in élk scherm. Dit is het teken
   "je zit in de cockpit, niet bij een klant". */
.cockpit-streep{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:60; pointer-events:none;
  background:linear-gradient(90deg, var(--accent), var(--brand) 45%, var(--accent) 90%);
}

/* ---------- shell ---------- */
.app{ min-height:100vh; }

.sidebar{
  position:fixed; top:0; bottom:0; left:0; width:var(--side-w); z-index:40;
  background:var(--side-bg); color:var(--side-ink);
  display:flex; flex-direction:column; padding:18px 12px; gap:18px;
  overflow:hidden auto; border-right:1px solid rgba(255,255,255,.06);
}
/* Rasterpatroon + gloed: puur sfeer, maakt de cockpit herkenbaar. */
.sidebar::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(320px 240px at 20% 0%, color-mix(in srgb, var(--side-brand) 22%, transparent), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(255,255,255,.022) 23px 24px);
}
.sidebar > *{ position:relative; }

.main{ margin-left:var(--side-w); min-width:0; display:flex; flex-direction:column; min-height:100vh; }

.merk{ display:flex; align-items:center; gap:10px; padding:4px 8px 2px; }
.merk-teken{
  width:34px; height:34px; flex:none; border-radius:10px;
  background:linear-gradient(140deg, var(--accent), var(--brand));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; color:#fff; letter-spacing:-.03em;
  box-shadow:0 0 20px color-mix(in srgb, var(--accent) 45%, transparent);
}
.merk-naam{ font-size:13.5px; font-weight:700; line-height:1.2; }
.merk-sub{ font-size:10.5px; color:var(--side-dim); margin-top:1px; letter-spacing:.02em; }

.nav{ display:flex; flex-direction:column; gap:2px; }
.nav-kop{
  font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--side-dim);
  padding:14px 10px 5px; opacity:.75;
}
.nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px;
  color:var(--side-dim); text-decoration:none; font-size:13.5px; font-weight:500;
  position:relative; white-space:nowrap;
}
.nav-item svg{ width:17px; height:17px; flex:none; }
.nav-item:hover{ color:var(--side-ink); background:rgba(255,255,255,.05); }
.nav-item.active{ color:#fff; background:color-mix(in srgb, var(--side-brand) 20%, transparent); }
.nav-item.active::after{
  content:''; position:absolute; left:-12px; top:9px; bottom:9px; width:3px;
  border-radius:0 3px 3px 0; background:var(--accent);
}
.nav-tel{
  margin-left:auto; font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:999px;
  background:color-mix(in srgb, var(--accent) 85%, transparent); color:#fff;
}
.nav-tel.rustig{ background:rgba(255,255,255,.14); color:var(--side-dim); }

.zij-voet{ margin-top:auto; display:flex; flex-direction:column; gap:8px; padding-top:12px; }
.zij-wie{
  display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:10px;
  background:var(--side-card);
}
.zij-avatar{
  width:28px; height:28px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg, var(--accent), var(--brand)); color:#fff; font-weight:700; font-size:11.5px;
}
.zij-naam{ font-size:12.5px; font-weight:600; }
.zij-rol{ font-size:10.5px; color:var(--side-dim); }
.zij-knop{
  background:none; border:1px solid rgba(255,255,255,.12); color:var(--side-dim);
  padding:8px 10px; border-radius:9px; cursor:pointer; font-size:12.5px; text-align:left;
  display:flex; align-items:center; gap:9px; text-decoration:none;
}
.zij-knop svg{ width:15px; height:15px; flex:none; }
.zij-knop:hover{ color:var(--side-ink); border-color:color-mix(in srgb, var(--side-brand) 50%, transparent); }

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; gap:14px;
  padding:14px 30px; border-bottom:var(--bw) solid var(--line);
  background:color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  position:sticky; top:0; z-index:5; flex-wrap:wrap;
}
.topbar h1{ font-size:17px; }
.topbar .rechts{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.thema-wissel{ display:flex; background:var(--paper); border:var(--bw) solid var(--line); border-radius:9px; padding:2px; }
.thema-wissel button{
  border:none; background:none; cursor:pointer; padding:5px 11px; border-radius:7px;
  font-size:12px; color:var(--muted);
}
.thema-wissel button.actief{ background:var(--card); color:var(--ink); box-shadow:var(--shadow); }

.page{ padding:26px 30px 60px; }
.page-kop{ margin-bottom:22px; }
.page-kop p{ color:var(--muted); font-size:13.5px; margin:6px 0 0; max-width:70ch; }

/* ---------- kaarten ---------- */
.card{
  background:var(--card); border:var(--bw) solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:20px;
}
.card + .card{ margin-top:16px; }
.card-kop{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.card-kop h2{ font-size:15px; }
.card-kop .rechts{ margin-left:auto; display:flex; gap:8px; }

.rooster{ display:grid; gap:16px; }
.rooster.k2{ grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.rooster.k3{ grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
.rooster.k4{ grid-template-columns:repeat(auto-fit, minmax(185px, 1fr)); }

/* kerncijfer-tegel */
.cijfer{ background:var(--card); border:var(--bw) solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); }
.cijfer .getal{ font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums; }
.cijfer .label{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-top:6px; display:flex; align-items:center; gap:6px; }
.cijfer .stip{ width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none; }
.cijfer.ok .getal{ color:var(--good); } .cijfer.ok .stip{ background:var(--good); }
.cijfer.let .getal{ color:var(--warn); } .cijfer.let .stip{ background:var(--warn); }
.cijfer.mis .getal{ color:var(--bad); }  .cijfer.mis .stip{ background:var(--bad); }

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 15px; border-radius:var(--radius-sm); font-size:13px; font-weight:600;
  border:var(--bw) solid var(--line); background:var(--card); color:var(--ink); cursor:pointer;
  text-decoration:none; white-space:nowrap;
}
.btn:hover{ border-color:color-mix(in srgb, var(--brand) 45%, var(--line)); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn svg{ width:15px; height:15px; }
.btn.primair{
  background:linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-color:transparent; color:var(--accent-ink);
  box-shadow:0 1px 2px rgba(0,0,0,.12), 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
.btn.primair:hover{ filter:brightness(1.05); }
.btn.gevaar{ color:var(--bad); border-color:color-mix(in srgb, var(--bad) 40%, transparent); }
.btn.gevaar:hover{ background:var(--bad-soft); border-color:var(--bad); }
.btn.klein{ padding:6px 11px; font-size:12px; }

/* ---------- velden ---------- */
.veld{ margin-bottom:14px; }
.veld label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:5px; }
.veld .uitleg{ font-size:12px; color:var(--muted); margin:-2px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=datetime-local], input[type=number], input[type=search], select, textarea{
  width:100%; padding:9px 12px; border-radius:var(--radius-sm);
  border:var(--bw) solid var(--line); background:var(--card); color:var(--ink);
  font-family:inherit; font-size:13.5px;
}
input:focus, select:focus, textarea:focus{ outline:none; box-shadow:var(--ring); border-color:var(--brand); }
.veld-rij{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.veld-rij .veld{ flex:1; min-width:180px; margin-bottom:0; }

/* ---------- tabellen ---------- */
table.lijst{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.lijst th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:600; padding:0 12px 9px; border-bottom:var(--bw) solid var(--line);
}
table.lijst td{ padding:11px 12px; border-bottom:var(--bw) solid var(--line-soft); vertical-align:middle; }
table.lijst tbody tr:last-child td{ border-bottom:none; }
table.lijst tbody tr:hover td{ background:color-mix(in srgb, var(--brand) 4%, transparent); }
.tabel-omhulsel{ overflow-x:auto; }

/* ---------- status ---------- */
.merkje{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  font-size:11.5px; font-weight:600; white-space:nowrap;
}
.merkje::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.merkje.actief{ background:var(--good-soft); color:var(--good); }
.merkje.bevroren{ background:var(--warn-soft); color:var(--warn); }
.merkje.uit{ background:var(--bad-soft); color:var(--bad); }
.merkje.neutraal{ background:var(--line-soft); color:var(--muted); }

.leeg{ text-align:center; padding:40px 20px; color:var(--muted); font-size:13.5px; }
.voetnoot{ font-size:12px; color:var(--muted); }

/* ---------- meldingsbalk ---------- */
.balk{
  padding:12px 16px; border-radius:var(--radius-sm); font-size:13px; line-height:1.5;
  border:var(--bw) solid transparent; margin-bottom:16px;
}
.balk.info{ background:var(--brand-soft); color:var(--brand); border-color:color-mix(in srgb, var(--brand) 25%, transparent); }
.balk.let{ background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 30%, transparent); }
.balk.slecht{ background:var(--bad-soft); color:var(--bad); border-color:color-mix(in srgb, var(--bad) 30%, transparent); }
.balk.goed{ background:var(--good-soft); color:var(--good); border-color:color-mix(in srgb, var(--good) 30%, transparent); }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 18px);
  background:#160b2c; color:#fff; padding:12px 20px; border-radius:11px;
  font-size:13px; box-shadow:var(--shadow-lift); z-index:100;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  max-width:min(560px, calc(100vw - 32px));
}
.toast.zichtbaar{ opacity:1; transform:translate(-50%, 0); }
.toast.error{ background:var(--bad); }
.toast.success{ background:var(--good); }

/* ---------- venster (modal) ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(10,5,20,.62); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:80;
}
.venster{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-lift);
  width:100%; max-width:560px; max-height:88vh; overflow:auto; padding:24px;
  border:var(--bw) solid var(--line);
}
.venster h2{ font-size:16px; margin-bottom:4px; }
.venster .sub{ font-size:12.5px; color:var(--muted); margin-bottom:18px; }
.venster-voet{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }

/* ---------- inlogpagina ---------- */
.inlog-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:
    radial-gradient(900px 420px at 50% -6%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 62%),
    radial-gradient(700px 380px at 88% 108%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--paper);
}
.inlog-kaart{ width:100%; max-width:390px; padding:32px 30px; }
.inlog-merk{ display:flex; align-items:center; gap:11px; margin-bottom:22px; }
.inlog-merk .merk-teken{ width:38px; height:38px; font-size:16px; }
.inlog-titel{ font-size:18px; font-weight:700; letter-spacing:-.02em; }
.inlog-sub{ font-size:12.5px; color:var(--muted); }

@media (max-width: 820px){
  .sidebar{ width:100%; height:auto; position:static; flex-direction:row; align-items:center; flex-wrap:wrap; gap:10px; }
  .sidebar .nav{ flex-direction:row; flex-wrap:wrap; }
  .sidebar .nav-kop{ display:none; }
  .zij-voet{ margin-top:0; flex-direction:row; }
  .main{ margin-left:0; }
  .page, .topbar{ padding-left:16px; padding-right:16px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---------- factuur-print.html: losse afdrukbare weergave ---------- */
.print-wrap{ max-width:760px; margin:0 auto; padding:30px 24px 60px; }
.knopbalk-print{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.knopbalk-print a{ font-size:13px; color:var(--muted); text-decoration:none; }
.knopbalk-print a:hover{ color:var(--ink); }
.factuur-vel{
  background:var(--card); border:var(--bw) solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:36px 40px;
}
.fv-kop{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:26px; }
.fv-merk{ font-size:16px; font-weight:800; letter-spacing:-.02em; }
.fv-titel{ font-size:22px; font-weight:800; letter-spacing:-.03em; color:var(--muted); }
.fv-partijen{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:20px 0; }
.bg-regel{ display:flex; justify-content:space-between; gap:12px; padding:3px 0; font-size:13px; }
.bg-regel span:first-child{ color:var(--muted); }
.bg-leeg span:last-child{ color:var(--bad); font-style:italic; }
.fv-tabel{ width:100%; border-collapse:collapse; margin:22px 0; font-size:13.5px; }
.fv-tabel th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:6px 8px; border-bottom:var(--bw) solid var(--line); }
.fv-tabel td{ padding:8px; border-bottom:1px solid var(--line-soft); }
.fv-tabel th:nth-child(n+2), .fv-tabel td:nth-child(n+2){ text-align:right; }
.fv-totalen{ max-width:280px; margin-left:auto; }
.fv-eindtotaal{ font-weight:800; font-size:15px; border-top:var(--bw) solid var(--line); margin-top:6px; padding-top:8px; }
.fv-betaling{ margin-top:22px; padding-top:16px; border-top:var(--bw) solid var(--line); }

@media print{
  .cockpit-streep, .sidebar, .topbar, .knopbalk-print{ display:none !important; }
  body{ background:#fff; }
  .print-wrap{ padding:0; max-width:none; }
  .factuur-vel{ box-shadow:none; border:none; padding:0; }
}

/* ---------- nieuw-project.html: de wizard-stappenrail ---------- */
.wizard{ display:grid; grid-template-columns:300px 1fr; gap:16px; align-items:start; }
@media (max-width:880px){ .wizard{ grid-template-columns:1fr; } }
.stappenkaart{ padding:14px; }
.stappenrail{ display:flex; flex-direction:column; gap:4px; }
.stap-item{
  display:flex; align-items:flex-start; gap:12px; padding:12px 10px; border-radius:var(--radius-sm);
  cursor:pointer; border:none; background:none; width:100%; text-align:left; position:relative;
}
.stap-item:hover{ background:var(--line-soft); }
.stap-item.actief{ background:var(--brand-soft); }
.stap-item.vergrendeld{ cursor:not-allowed; opacity:.55; }
.stap-lijn{ position:absolute; left:24px; top:38px; bottom:-4px; width:1.5px; background:var(--line); }
.stap-item:last-child .stap-lijn{ display:none; }
.stap-bol{
  width:28px; height:28px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; font-family:var(--font-mono); z-index:1;
  background:var(--card); border:1.5px solid var(--line); color:var(--muted);
}
.stap-item.klaar .stap-bol{ background:var(--good); border-color:var(--good); color:#fff; }
.stap-item.wacht .stap-bol{ background:var(--warn-soft); border-color:var(--warn); color:var(--warn); }
.stap-item.actief .stap-bol{ border-color:var(--brand); color:var(--brand); }
.stap-tekst{ padding-top:3px; min-width:0; }
.stap-naam{ font-size:13.5px; font-weight:600; }
.stap-sub{ font-size:11.5px; color:var(--muted); margin-top:2px; }

.detail-kop{ display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.detail-kop h2{ font-size:16px; }
.detail-sub{ font-size:12.5px; color:var(--muted); margin:4px 0 18px; max-width:60ch; }

.genummerd{ counter-reset:stap; margin:0 0 16px; padding:0; }
.genummerd li{
  counter-increment:stap; list-style:none; position:relative; padding-left:34px; margin-bottom:14px; font-size:13px; line-height:1.6;
}
.genummerd li::before{
  content:counter(stap); position:absolute; left:0; top:-1px; width:22px; height:22px; border-radius:50%;
  background:var(--brand-soft); color:var(--brand); font-size:11.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono);
}
.genummerd code{ background:var(--line-soft); padding:1px 6px; border-radius:5px; font-family:var(--font-mono); font-size:12px; }

.rij-org{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border:var(--bw) solid var(--line);
  border-radius:var(--radius-sm); margin-top:6px;
}
.rij-org .naam{ font-weight:600; font-size:13.5px; }
.rij-org .meta{ font-size:11.5px; color:var(--muted); margin-top:1px; }

.bouwlijst{ display:flex; flex-direction:column; gap:0; }
.bouwstap{ display:flex; align-items:center; gap:11px; padding:9px 4px; font-size:13px; }
.bouwstap .stip{ width:8px; height:8px; border-radius:50%; background:var(--line); flex:none; }
.bouwstap.klaar .stip{ background:var(--good); }
.bouwstap.klaar{ color:var(--muted); }