:root{
  --bg:#F4F6FA;
  --panel:#FFFFFF;
  --ink:#0B1220;
  --ink-soft:#5C6578;
  --line:#E4E8F0;
  --primary:#2954E5;
  --primary-dark:#1D3EBF;
  --accent:#0FA968;
  --accent-soft:#E4F7EE;
  --warn:#B9740E;
  --warn-soft:#FBF0DD;
  --danger:#C22A3E;
  --danger-soft:#FBEAEC;
  --neutral-soft:#EDF0F7;
  --radius:10px;
}

*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.55;
}
h1,h2,h3,h4{margin:0 0 6px;font-weight:700;letter-spacing:-0.01em;}
h1{font-size:26px;}
h2{font-size:20px;}
h3{font-size:16px;}
p{margin:0 0 12px;color:var(--ink-soft);}
a{color:var(--primary);text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

/* ---------- topbar ---------- */
.topbar{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;}
.topbar-inner{display:flex;align-items:center;gap:36px;height:64px;}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;color:var(--ink);}
.brand:hover{text-decoration:none;}
.brand-mark{width:24px;height:24px;color:var(--primary);display:flex;}
.brand-mark svg{width:100%;height:100%;}
.topnav{display:flex;gap:22px;flex:1;font-size:14.5px;font-weight:600;}
.topnav a{color:var(--ink-soft);padding:4px 0;border-bottom:2px solid transparent;}
.topnav a:hover{color:var(--ink);text-decoration:none;}
.topnav a.is-active{color:var(--primary);border-color:var(--primary);}
.topbar-user{display:flex;align-items:center;gap:14px;font-size:14px;}
.user-name{color:var(--ink-soft);}

main.with-topbar{padding:32px 0 60px;}
main.centered{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 0;}
main.centered .wrap{max-width:420px;}

/* ---------- flash ---------- */
.flash-stack{margin-bottom:20px;display:flex;flex-direction:column;gap:8px;}
.flash{padding:11px 14px;border-radius:8px;font-size:14px;}
.flash-success{background:var(--accent-soft);color:#0B6B45;border:1px solid #BFE6D3;}
.flash-error{background:var(--danger-soft);color:#8F1F30;border:1px solid #F0C4CA;}

/* ---------- buttons ---------- */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:inherit;font-weight:600;font-size:14.5px;cursor:pointer;
  padding:10px 18px;border-radius:8px;border:1px solid transparent;
  text-decoration:none;transition:background .15s,border-color .15s;
}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);text-decoration:none;}
.btn-secondary{background:var(--neutral-soft);color:var(--ink);}
.btn-secondary:hover{background:#E1E5F0;text-decoration:none;}
.btn-ghost{background:transparent;color:var(--ink-soft);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink-soft);color:var(--ink);text-decoration:none;}
.btn-danger{background:var(--danger);color:#fff;}
.btn-danger:hover{background:#A32235;text-decoration:none;}
.btn-sm{padding:6px 12px;font-size:13px;}
button.btn-primary, button.btn-secondary, button.btn-ghost, button.btn-danger{border:none;}
button.btn-ghost{border:1px solid var(--line);}

/* ---------- cards / panels ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;}
.panel + .panel{margin-top:20px;}
/* Binnen een two-col grid zorgt de grid-gap al voor de juiste tussenruimte
   (ook tussen rijen); de margin hierboven zou het paneel in de tweede kolom
   telkens net iets lager laten beginnen dan zijn buurpaneel in de eerste
   kolom, waardoor de koppen niet meer op gelijke hoogte staan. */
.two-col > .panel + .panel{margin-top:0;}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px;flex-wrap:wrap;}
.page-head p{margin:4px 0 0;}

.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;}
@media (max-width:820px){.kpi-row{grid-template-columns:repeat(2,1fr);}}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;}
.kpi .kpi-label{font-size:12.5px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;line-height:1.3;min-height:2.6em;}
.kpi .kpi-value{font-size:26px;font-weight:800;margin-top:6px;letter-spacing:-0.01em;}
.kpi .kpi-value.accent{color:var(--accent);}
.kpi .kpi-value.warn{color:var(--warn);}
.kpi .kpi-value.danger{color:var(--danger);}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:14.5px;}
th{
  text-align:left;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-soft);padding:0 14px 10px;border-bottom:1px solid var(--line);
}
td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#FAFBFD;}
.table-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.table-card table{margin:0;}
.table-card th:first-child, .table-card td:first-child{padding-left:20px;}
.table-card th:last-child, .table-card td:last-child{padding-right:20px;}
.empty-state{padding:48px 20px;text-align:center;color:var(--ink-soft);}

/* ---------- kolomfilters (automatisch toegevoegd door tabel-zoek.js) ---------- */
tr.kolom-filter-rij th{padding:0 8px 10px;border-bottom:1px solid var(--line);}
tr.kolom-filter-rij input{
  width:100%;box-sizing:border-box;font-size:12.5px;font-weight:400;text-transform:none;
  letter-spacing:normal;color:var(--ink);padding:6px 8px;border:1px solid var(--line);
  border-radius:6px;background:var(--panel);
}
tr.kolom-filter-rij input:focus{border-color:var(--primary);outline:none;}
.table-card tr.kolom-filter-rij th:first-child{padding-left:20px;}
.table-card tr.kolom-filter-rij th:last-child{padding-right:20px;}

/* ---------- tabel-paginabalk (automatisch toegevoegd door tabel-zoek.js) ---------- */
.tabel-paginabalk{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:10px 16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-soft);
}
.tabel-paginabalk-select{display:flex;align-items:center;gap:8px;}
.tabel-paginabalk-select select{
  font-family:inherit;font-size:13.5px;padding:4px 8px;border-radius:6px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);
}
.tabel-paginabalk-nav-groep{display:flex;align-items:center;gap:10px;}
.tabel-paginabalk-info{min-width:90px;text-align:center;font-variant-numeric:tabular-nums;}
.tabel-paginabalk-nav{
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  width:28px;height:28px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);
}
.tabel-paginabalk-nav:hover:not(:disabled){background:var(--neutral-soft);color:var(--ink);}
.tabel-paginabalk-nav:disabled{opacity:.4;cursor:default;}

/* ---------- workflow-stappen (statusknoppen) ---------- */
.workflow-stappen{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;}
.workflow-stap{
  background:var(--neutral-soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;min-width:160px;margin:0;
}
.workflow-stap .f-row{margin-bottom:8px;}
.workflow-stap button{width:100%;}

/* ---------- status badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  padding:4px 10px;border-radius:20px;white-space:nowrap;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.badge-nieuw{background:var(--neutral-soft);color:#4A5570;}
.badge-goedgekeurd{background:#E7EDFF;color:var(--primary-dark);}
.badge-afgewezen{background:var(--danger-soft);color:#8F1F30;}
.badge-in_behandeling{background:#E7EDFF;color:var(--primary-dark);}
.badge-niet_akkoord{background:var(--warn-soft);color:var(--warn);}
.badge-klaar_om_aan_te_kopen{background:#E7EDFF;color:var(--primary-dark);}
.badge-gefinancierd{background:var(--warn-soft);color:var(--warn);}
.badge-afwikkelen{background:#E7EDFF;color:var(--primary-dark);}
.badge-betaald{background:var(--accent-soft);color:#0B6B45;}
.badge-gesloten{background:var(--neutral-soft);color:#4A5570;}
.badge-gearchiveerd{background:var(--neutral-soft);color:#8891A3;}
.badge-oninbaar{background:var(--warn-soft);color:#8F1F30;}
.badge-afgeboekt{background:var(--danger-soft);color:#8F1F30;}
.badge-verwerkt{background:var(--accent-soft);color:#0B6B45;}
.badge-genegeerd{background:var(--neutral-soft);color:#8891A3;}
.badge-actief{background:var(--accent-soft);color:#0B6B45;}
.badge-geschorst{background:var(--danger-soft);color:#8F1F30;}
.overdue-flag{color:var(--danger);font-weight:700;}

/* ---------- forms ---------- */
form .f-row{margin-bottom:16px;}
form .f-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:600px){form .f-two{grid-template-columns:1fr;}}
label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], select, textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:14.5px;color:var(--ink);background:#FBFBFD;
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--primary);outline-offset:1px;background:#fff;}
textarea{resize:vertical;min-height:80px;}
.hint{font-size:12.5px;color:var(--ink-soft);margin-top:5px;}
.form-actions{display:flex;gap:10px;margin-top:22px;}

/* ---------- auth pages ---------- */
.auth-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:36px 32px;width:100%;}
.auth-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;margin-bottom:26px;color:var(--ink);}
.auth-brand .brand-mark{width:26px;height:26px;color:var(--primary);}
.auth-brand .brand-mark svg{width:100%;height:100%;}
.auth-foot{margin-top:18px;font-size:13.5px;color:var(--ink-soft);text-align:center;}

/* ---------- misc ---------- */
.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.export-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.muted{color:var(--ink-soft);}
.mono{font-variant-numeric:tabular-nums;white-space:nowrap;}
.filters{
  display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;
  position:sticky;top:64px;z-index:15;
  background:var(--bg);padding:12px 0;margin-top:-12px;
  border-bottom:1px solid var(--line);
}
.filter-pill{
  padding:6px 14px;border-radius:20px;border:1px solid var(--line);font-size:13px;font-weight:600;
  color:var(--ink-soft);background:var(--panel);
}
.filter-pill.is-active{background:var(--primary);border-color:var(--primary);color:#fff;}
.filter-pill:hover{text-decoration:none;border-color:var(--primary);}
button.filter-pill{font:inherit;cursor:pointer;}
button.filter-pill:hover{background:var(--primary);border-color:var(--primary);color:#fff;}

/* Snelle statusknoppen op de factuurpagina — zelfde stijl als de filterpillen,
   maar niet vastzittend (die zitten midden in een paneel, niet bovenaan de pagina). */
.pill-row{display:flex;gap:8px;flex-wrap:wrap;}

/* Zoekbalk boven een tabel (bijv. platformoverzicht). */
.search-box{max-width:420px;margin-bottom:24px;}
.search-box input[type=text]{border-color:#AEB8CC;}
.search-box input[type=text]:focus{border-color:var(--primary);}

.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:stretch;}
@media (max-width:860px){.two-col{grid-template-columns:1fr;}}

.wrap.wrap-wide{max-width:1600px;}

/* Compacte tabelstijl voor brede kostenspecificatie-tabellen (aankoopnota/eindnota):
   iets minder padding en een net iets kleiner lettertype, zodat alle kolommen
   zonder tekstterugloop of horizontale schuifbalk op de pagina passen. */
table.table-compact{font-size:13px;}
table.table-compact th{padding:0 8px 8px;font-size:10.5px;white-space:nowrap;}
table.table-compact td{padding:9px 8px;white-space:nowrap;}
table.table-compact td:first-child{white-space:normal;}

.app-footer{border-top:1px solid var(--line);margin-top:40px;padding:18px 0 28px;font-size:12.5px;color:var(--ink-soft);}

.note{background:var(--neutral-soft);border-radius:8px;padding:12px 14px;margin-bottom:10px;}
.note .note-meta{font-size:12px;color:var(--ink-soft);margin-bottom:4px;}
.note p{margin:0;color:var(--ink);}

.history-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.history-item:last-child{border-bottom:none;}
.history-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);margin-top:6px;flex:none;}

.disclaimer{
  background:var(--warn-soft);border:1px solid #EBD3A6;border-radius:8px;
  padding:12px 16px;font-size:13.5px;color:#6B4A0E;margin-bottom:24px;
}
.disclaimer strong{color:#5A3D0B;}

/* ---------- live WhatsApp-widget (rechtsonder in beeld) ---------- */
.wa-widget{
  position:fixed;right:20px;bottom:20px;z-index:500;
  width:640px;max-width:calc(100vw - 40px);
  height:440px;max-height:calc(100vh - 40px);
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 32px rgba(15,25,50,.18);
  display:flex;flex-direction:column;overflow:hidden;
}
.wa-widget[hidden]{display:none;}
.wa-widget-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--accent);color:#fff;flex:none;cursor:default;
}
.wa-widget-title{font-weight:700;font-size:14.5px;}
.wa-widget-iconbtn{
  background:rgba(255,255,255,.18);color:#fff;border:none;border-radius:6px;
  width:26px;height:26px;font-size:16px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.wa-widget-iconbtn:hover{background:rgba(255,255,255,.3);}
.wa-widget-body{flex:1;display:flex;min-height:0;}
.wa-widget-list{
  width:240px;flex:none;border-right:1px solid var(--line);
  overflow-y:auto;background:#FAFBFD;
}
.wa-widget-gesprek{
  display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);
  padding:10px 14px;cursor:pointer;font-family:inherit;
}
.wa-widget-gesprek:hover{background:var(--neutral-soft);}
.wa-widget-gesprek.is-actief{background:var(--accent-soft);}
.wa-widget-gesprek-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px;}
.wa-widget-gesprek-naam{font-weight:700;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wa-widget-gesprek-tijd{font-size:11px;color:var(--ink-soft);flex:none;}
.wa-widget-gesprek-preview{font-size:12.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.wa-widget-gesprek-badge{
  display:inline-block;min-width:18px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;
  border-radius:20px;padding:1px 6px;margin-left:6px;
}
.wa-widget-chat{flex:1;display:flex;flex-direction:column;min-width:0;}
.wa-widget-leeg{color:var(--ink-soft);font-size:13.5px;text-align:center;margin:auto;padding:20px;}
.wa-widget-chat-actief{flex:1;display:flex;flex-direction:column;min-height:0;}
.wa-widget-chat-header{
  display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);
  font-weight:700;font-size:13.5px;flex:none;
}
.wa-widget-terug-mobiel{display:none;}
.wa-widget-berichten{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px;}
.wa-widget-bericht{max-width:78%;padding:8px 11px;border-radius:12px;font-size:13.5px;line-height:1.4;white-space:pre-wrap;word-break:break-word;}
.wa-widget-bericht.in{align-self:flex-start;background:var(--neutral-soft);color:var(--ink);border-bottom-left-radius:3px;}
.wa-widget-bericht.uit{align-self:flex-end;background:var(--accent-soft);color:#0B6B45;border-bottom-right-radius:3px;}
.wa-widget-bericht.mislukt{background:var(--danger-soft);color:#8F1F30;}
.wa-widget-bericht-tijd{display:block;font-size:10.5px;color:var(--ink-soft);margin-top:3px;}
.wa-widget-form{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line);flex:none;}
.wa-widget-form input[type=text]{flex:1;padding:9px 12px;}
.wa-widget-bubble{
  position:fixed;right:20px;bottom:20px;z-index:500;
  width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;
  border:none;font-size:24px;cursor:pointer;box-shadow:0 8px 20px rgba(15,25,50,.25);
  display:flex;align-items:center;justify-content:center;
}
.wa-widget-bubble[hidden]{display:none;}
.wa-widget-badge{
  position:absolute;top:-4px;right:-4px;background:var(--danger);color:#fff;
  font-size:11px;font-weight:700;border-radius:20px;min-width:18px;padding:1px 5px;line-height:1.5;
}
.wa-widget-badge[hidden]{display:none;}
@media (max-width:700px){
  .wa-widget{width:calc(100vw - 24px);right:12px;bottom:12px;height:70vh;}
  .wa-widget-list{width:150px;}
}

/* ---------- instellingen-tabs ---------- */
.instellingen-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.instellingen-tab-btn{
  font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer;
  padding:8px 14px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink-soft);
}
.instellingen-tab-btn:hover{background:var(--neutral-soft);color:var(--ink);}
.instellingen-tab-btn.is-actief{background:var(--primary);border-color:var(--primary);color:#fff;}
[data-tab-pane][hidden]{display:none;}