:root{
  --merk:#942137;
  --merk-d:#741a2b;
  --rand:#e3e3e6;
  --tekst:#1f2430;
  --grijs:#6b7280;
  --bg:#f5f6f8;
  --kaart:#ffffff;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--tekst);line-height:1.45;-webkit-text-size-adjust:100%;}
a{color:var(--merk);text-decoration:none;}

.container{max-width:1000px;margin:0 auto;padding:18px 16px 64px;}

/* ---- topbar ---- */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 16px;background:var(--kaart);border-bottom:1px solid var(--rand);}
.topbar .brand img{height:34px;display:block;}
.topbar-acties{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.wie{color:var(--grijs);font-size:.85rem;}

.paginakop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 18px;flex-wrap:wrap;}
h1{font-size:1.5rem;margin:0;}

/* ---- knoppen ---- */
.knop{display:inline-block;padding:8px 14px;border-radius:8px;border:1px solid var(--rand);
  background:var(--kaart);color:var(--tekst);font-size:.92rem;cursor:pointer;line-height:1.2;
  font-family:inherit;white-space:nowrap;}
.knop:hover{border-color:#c9ccd2;}
.knop-primair{background:var(--merk);border-color:var(--merk);color:#fff;}
.knop-primair:hover{background:var(--merk-d);border-color:var(--merk-d);}
.knop-gevaar{color:#b42318;border-color:#f0c4bf;background:#fff;}
.knop-gevaar:hover{background:#fdecea;}
.knop.klein{padding:5px 10px;font-size:.82rem;}
.knop.groot{padding:10px 18px;font-size:1rem;}
.inline{display:inline;margin:0;}

/* ---- flash ---- */
.flash{padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:.92rem;}
.flash-ok{background:#e7f6ec;color:#0f5132;border:1px solid #b7e0c4;}
.flash-fout{background:#fdecea;color:#842029;border:1px solid #f2bcb6;}
.testbanner{background:#fff7e6;border:1px solid #f3d27a;color:#8a5a00;border-radius:8px;
  padding:9px 13px;margin-bottom:14px;font-size:.88rem;}
.testbanner code{background:#f6e9c8;padding:1px 5px;border-radius:4px;}

/* ---- tabel ---- */
table.facturen{width:100%;border-collapse:collapse;background:var(--kaart);border:1px solid var(--rand);
  border-radius:10px;overflow:hidden;}
table.facturen th,table.facturen td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--rand);
  font-size:.92rem;vertical-align:middle;}
table.facturen thead th{background:#fafafa;color:var(--grijs);font-weight:600;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.03em;}
table.facturen tbody tr:last-child td{border-bottom:0;}
.rechts{text-align:right;}
.acties{white-space:nowrap;}
.acties .knop,.acties form{display:inline-block;margin:2px 2px 2px 0;vertical-align:middle;}

/* ---- status-badge ---- */
.badge{border:0;cursor:pointer;padding:4px 11px;border-radius:999px;font-size:.76rem;font-weight:600;
  text-transform:capitalize;font-family:inherit;}
.badge-concept{background:#fff4e5;color:#9a5b00;}
.badge-verzonden{background:#e7f6ec;color:#0f5132;}

.hint{margin-top:16px;background:#fff;border:1px solid var(--rand);border-radius:10px;padding:12px 14px;
  font-size:.88rem;color:#444;}
.hint code{background:#f0f0f3;padding:1px 5px;border-radius:4px;}
.leeg-melding{background:#fff;border:1px dashed var(--rand);border-radius:10px;padding:30px;
  text-align:center;color:var(--grijs);}

/* ---- formulier ---- */
.kaart{background:var(--kaart);border:1px solid var(--rand);border-radius:12px;padding:20px;}
.veld-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;}
.formulier label{display:block;font-weight:600;font-size:.9rem;margin-bottom:14px;}
.formulier input,.formulier select,.formulier textarea{width:100%;margin-top:5px;padding:9px 11px;
  border:1px solid #cfd3da;border-radius:8px;font-size:1rem;font-weight:400;font-family:inherit;background:#fff;}
.formulier input:focus,.formulier select:focus,.formulier textarea:focus{outline:2px solid var(--merk);
  outline-offset:0;border-color:var(--merk);}
.formulier small{display:block;font-weight:400;color:var(--grijs);font-size:.78rem;margin-top:4px;}
.formulier .check{font-weight:500;display:flex;align-items:center;gap:9px;margin-top:4px;}
.formulier .check input{width:auto;margin:0;}
.berekening{display:flex;gap:22px;flex-wrap:wrap;background:#faf7f8;border:1px solid #eccfd5;
  border-left:4px solid var(--merk);border-radius:8px;padding:12px 14px;margin:6px 0 16px;font-size:.95rem;}
.formknoppen{display:flex;gap:10px;align-items:center;margin-top:6px;flex-wrap:wrap;}

/* ---- login ---- */
.login-body{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:20px;}
.login-kaart{background:#fff;border:1px solid var(--rand);border-radius:14px;padding:30px;
  max-width:360px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.07);}
.login-logo{height:40px;display:block;margin:0 auto 18px;}
.login-kaart h1{font-size:1.3rem;text-align:center;margin:0 0 18px;}
.login-uitleg{color:var(--grijs);font-size:.9rem;}
.login-knop{width:100%;margin-top:4px;}
pre{background:#f5f6f8;padding:10px 12px;border-radius:8px;overflow:auto;font-size:.82rem;}

/* ---- mobiel: tabel -> kaarten ---- */
@media (max-width:720px){
  h1{font-size:1.3rem;}
  .veld-grid{grid-template-columns:1fr;}
  table.facturen,table.facturen thead,table.facturen tbody,table.facturen tr,
  table.facturen th,table.facturen td{display:block;}
  table.facturen{border:0;background:transparent;border-radius:0;}
  table.facturen thead{display:none;}
  table.facturen tbody tr.factuur-rij{background:var(--kaart);border:1px solid var(--rand);
    border-radius:12px;margin-bottom:12px;padding:4px 6px;}
  table.facturen td{border-bottom:1px solid #f0f0f2;display:flex;justify-content:space-between;
    align-items:center;gap:12px;text-align:right;padding:9px 8px;}
  table.facturen tbody tr td:last-child{border-bottom:0;}
  table.facturen td::before{content:attr(data-label);font-weight:600;color:var(--grijs);text-align:left;}
  td.acties{flex-wrap:wrap;justify-content:flex-end;}
}