:root {
  --bg: #f4f6fc;
  --card: #ffffff;
  --ink: #0d1424;
  --muted: #6b7794;
  --line: #e6eaf3;
  --brand: #4338ca;
  --brand-2: #2563eb;
  --brand-ink: #312e81;
  --ok: #059669;
  --warn: #d97706;
  --danger: #e11d48;
  --radius: 16px;
  /* één verloop voor alle merkaccenten: knoppen, actieve nav, grafiek */
  --grad: linear-gradient(135deg, #4338ca 0%, #2563eb 55%, #0ea5e9 100%);
  --grad-zacht: linear-gradient(135deg, #eef2ff 0%, #eff6ff 100%);
  --shadow: 0 1px 2px rgba(13,20,36,.04), 0 6px 20px rgba(13,20,36,.05);
  --shadow-op: 0 2px 6px rgba(13,20,36,.06), 0 14px 36px rgba(13,20,36,.09);
  --ring: 0 0 0 3px rgba(67,56,202,.16);

  /* ---- betekeniskleuren ----
     Vier rollen per familie: -zacht als vlak, -rand als lijn, -mid als accent en
     -diep voor tekst erop. Hiervoor stonden er acht groenen en zes gelen los in
     dit bestand, elk net iets anders; daardoor oogde het geheel als losse
     toevoegingen in plaats van als één ontwerp. */
  --ok-zacht: #ecfdf5;   --ok-rand: #a7f3d0;   --ok-mid: #059669;   --ok-diep: #047857;
  --let-zacht: #fef3c7;  --let-rand: #fcd34d;  --let-mid: #d97706;  --let-diep: #92400e;
  --fout-zacht: #fee2e2; --fout-rand: #fca5a5; --fout-mid: #e11d48; --fout-diep: #b91c1c;
  --info-zacht: #eef2ff; --info-rand: #c7d2fe; --info-mid: #0ea5e9; --info-diep: #312e81;
  /* vlakken en lijnen */
  --vlak: #f8fafc;       --vlak-2: #f1f5f9;    --line-sterk: #cbd5e1;
  --muted-sterk: #475569;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased;
  /* zachte kleurgloed in de hoeken, in plaats van één vlakke kleur */
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(99,102,241,.13), transparent 60%),
    radial-gradient(760px 460px at -6% 8%, rgba(14,165,233,.11), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}
h1, h2, h3 { letter-spacing: -.022em; }
a { color: var(--brand); }
button {
  font: inherit; cursor: pointer; border: 0; border-radius: 11px; padding: 9px 16px;
  background: var(--grad); color: #fff; font-weight: 600; letter-spacing: -.01em;
  box-shadow: 0 1px 2px rgba(13,20,36,.1), 0 4px 12px rgba(67,56,202,.22);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
button:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(13,20,36,.12), 0 8px 20px rgba(67,56,202,.28); }
button:active { transform: translateY(0); }
button.ghost {
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(13,20,36,.04);
}
button.ghost:hover { background: var(--vlak); border-color: var(--line); box-shadow: 0 2px 8px rgba(13,20,36,.07); }
button.danger { background: linear-gradient(135deg, var(--fout-mid), var(--fout-diep)); box-shadow: 0 1px 2px rgba(13,20,36,.1), 0 4px 12px rgba(225,29,72,.25); }
button.danger:hover { box-shadow: 0 2px 4px rgba(13,20,36,.12), 0 8px 20px rgba(225,29,72,.3); }
button.sm { padding: 6px 11px; font-size: 13px; border-radius: 9px; }
input, select, textarea {
  font: inherit; width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 11px; background: #fff; color: var(--ink);
  transition: border-color .12s, box-shadow .12s;
}
input:hover, select:hover, textarea:hover { border-color: var(--line); }
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--brand); box-shadow: var(--ring);
}
label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 5px; }
.field { margin-bottom: 14px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 140px; }

/* ---- layout met zijmenu (navigator) ---- */
.layout { display: flex; min-height: 100vh; align-items: stretch; }
.sidebar {
  width: 248px; flex: none; border-right: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card) 0%, var(--vlak) 55%, var(--vlak) 100%);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.side-top { padding: 20px 20px 14px; border-bottom: 1px solid var(--line); }
.side-top .merk { display: flex; align-items: center; gap: 10px; }
.merkicoon { width: 30px; height: 30px; flex: none; border-radius: 8px; }
.sidebar .brand { font-weight: 800; letter-spacing: -.03em; font-size: 19px; }
/* het merkaccent volgt hetzelfde verloop als de knoppen */
.sidebar .brand span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sidebar .ctx { font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 600; }
.nav { flex: 1; padding: 10px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.nav button {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 11px; background: transparent; color: var(--muted);
  font-weight: 600; font-size: 14px; box-shadow: none;
}
.nav button:hover { background: var(--vlak); color: var(--ink); transform: none; box-shadow: none; }
.nav button.active {
  background: var(--grad); color: #fff;
  box-shadow: 0 2px 6px rgba(67,56,202,.24), 0 8px 18px rgba(67,56,202,.18);
}
.nav button.active:hover { transform: none; }
.nav .ic { width: 18px; height: 18px; flex: none; }
.side-foot { padding: 12px; border-top: 1px solid var(--line); }
.side-foot .me { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.side-foot .nm { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot .ghost { width: 100%; }
.side-foot .me > div { min-width: 0; }
/* profielfoto; zonder foto tonen we de initialen */
.avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--info-zacht); color: var(--brand-ink); font-size: 12px; font-weight: 700; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.groot { width: 64px; height: 64px; font-size: 22px; }
.profielkop { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--info-zacht); color: var(--brand-ink); }
.main { flex: 1; min-width: 0; }
.main-inner { max-width: 1000px; margin: 0 auto; padding: 28px 32px; }
@media (max-width: 720px) {
  .layout { flex-direction: column; }
  .sidebar { width: auto; height: auto; position: static; flex-direction: column; }
  .nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; }
  .nav button span { white-space: nowrap; }
  .main-inner { padding: 20px 16px; }
  /* op een telefoon past een brede tabel niet; laat de kaart zelf scrollen
     in plaats van de hele pagina */
  .card { overflow-x: auto; }
}
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px; margin-bottom: 16px;
  transition: box-shadow .16s ease;
}
.card:hover { box-shadow: var(--shadow-op); }
.card h2 { margin: 0 0 4px; font-size: 17px; }
.card .sub { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
label.sub2 { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
/* uitleg onder een label: hoort zachter te spreken dan de inhoud eronder */
p.sub2 { color: var(--muted); font-size: 12px; margin: 4px 0 8px; }
.thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--vlak); }
.thumb.ph { background: repeating-linear-gradient(45deg, var(--vlak-2), var(--vlak-2) 6px, var(--line) 6px, var(--line) 12px); }
.usp-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
/* filterbalk boven een overzicht: presets links, losse velden ernaast */
/* Filterbalk: eerst wanneer, dan wie. De groepen staan naast elkaar met een
   scheidingslijn ertussen, zodat het oog niet hoeft te zoeken welk veld bij
   welke vraag hoort. */
.filterbalk { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-start;
  padding: 14px 16px; background: var(--vlak); border: 1px solid var(--line); border-radius: 10px; }
.filtergroep { display: flex; flex-direction: column; gap: 8px; }
.filtergroep + .filtergroep { padding-left: 22px; border-left: 1px solid var(--line); }
.filtergroep > .kop { font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.filtergroep .regel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filterbalk .presets { display: flex; gap: 6px; flex-wrap: wrap; }
.filterbalk .field { margin: 0; min-width: 150px; flex: 0 1 auto; }
.filterbalk .field label { font-size: 11px; }
/* invoervelden zijn standaard 100% breed; binnen een filterregel moeten ze juist
   naast elkaar passen, anders valt "t/m" tussen twee volle regels */
.filterbalk .regel input, .filterbalk .regel select { width: auto; flex: 0 1 auto; }
.filterbalk input[type=date], .filterbalk select { padding: 7px 10px; font-size: 13px; }
.filterbalk input[type=date] { min-width: 148px; }
.filterbalk .regel select { min-width: 168px; max-width: 240px; }
.filterbalk .tot { color: var(--muted); font-size: 12px; font-weight: 600; }
.filterbalk button.actief { background: var(--brand); color: #fff; border-color: var(--brand); }
/* wissen staat rechts, los van de groepen — het is geen filter maar een uitweg */
.filterbalk .wisfilter { margin-left: auto; align-self: flex-end; }
@media (max-width: 720px) {
  .filtergroep + .filtergroep { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
  .filterbalk .wisfilter { margin-left: 0; }
}
td.rang { width: 34px; color: var(--muted); font-weight: 700; text-align: center; }
/* brede tabel mag scrollen; de pagina zelf nooit */
.tabelwrap { overflow-x: auto; }

/* --- statistiekenpagina --- */
.statgrid { margin-bottom: 16px; }
.stat.groot { text-align: left; }
.stat.groot .n { font-size: 31px; margin: 2px 0 6px; }
.stat.groot .sub2b { font-size: 12px; color: var(--muted); }
.stat.groot.open::before { background: linear-gradient(90deg, var(--let-rand), var(--let-mid)); }
.stat.groot.behaald::before { background: linear-gradient(90deg, var(--ok-mid), var(--ok-mid)); }
.stat.groot.behaald .n { background: linear-gradient(135deg, var(--ok-mid), var(--ok-diep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chartkop { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.legenda { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.legenda i.bar { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
/* de blokjes in de legenda krijgen dezelfde vulling als de staven */
.legenda i.bar.verstuurd { background: linear-gradient(180deg, var(--info-rand), var(--brand-2)); }
.legenda i.bar.getekend { background: linear-gradient(180deg, var(--ok-mid), var(--ok-mid)); }
.chartwrap { overflow-x: auto; padding-bottom: 4px; }
.chart { display: flex; align-items: flex-end; gap: 3px; height: 190px;
  min-width: min(100%, calc(var(--n) * 22px)); }
.chart .kolom { flex: 1 1 0; min-width: 18px; display: flex; flex-direction: column; height: 100%; }
.chart .staven { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
/* een telling van 0 blijft als streepje zichtbaar, zodat de dag niet "ontbreekt" */
.chart .bar { width: 45%; max-width: 14px; border-radius: 4px 4px 0 0; min-height: 2px; }
.chart .bar.verstuurd { background: linear-gradient(180deg, var(--info-rand), var(--brand-2)); }
.chart .bar.getekend { background: linear-gradient(180deg, var(--ok-mid), var(--ok-mid)); }
.chart .kolom:hover .bar { filter: brightness(1.08); }
.chart .tik { height: 26px; padding-top: 5px; font-size: 10px; color: var(--muted);
  text-align: center; white-space: nowrap; overflow: hidden; }
/* voortgangsbalkje onder een sub-partnernaam */
.balk { height: 6px; border-radius: 999px; background: var(--vlak); margin-top: 6px; max-width: 160px; overflow: hidden; }
.balk span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--ok-mid), var(--ok-mid)); transition: width .4s ease; }
.badge.aan { background: var(--ok-zacht); color: var(--ok-diep); }
.badge.uit { background: var(--fout-zacht); color: var(--fout-diep); }
/* rij van een gedeactiveerde gebruiker — nog leesbaar, duidelijk uitgezet */
tr.inactief td { opacity: .55; }
tr.inactief td:last-child { opacity: 1; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--vlak-2); color: var(--muted-sterk); }
.chip.een { background: var(--info-zacht); color: var(--brand-ink); }
.chip.mnd { background: var(--ok-zacht); color: var(--ok-diep); }
.chip.vast { background: var(--let-zacht); color: var(--let-diep); }

/* meekijk-balk (impersonatie) */
.impbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 9px 20px; font-size: 13px; color: #fff;
  background: linear-gradient(90deg, var(--info-diep) 0%, var(--info-diep) 60%, var(--info-diep) 100%);
}
.impbar b { color: #fff; }
.impbar button { background: #fff; color: var(--info-diep); box-shadow: none; }
.impbar button:hover { background: var(--info-zacht); transform: none; box-shadow: none; }
.layout.has-imp .sidebar { height: calc(100vh - 38px); top: 38px; }

/* proefbalk: staat op elke pagina zolang iemand aan het uitproberen is.
   Rustig groen bij ruime tijd, oranje in de laatste week, rood als het op is. */
.proefbalk {
  position: sticky; top: 0; z-index: 39; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 9px 20px; font-size: 13px; font-weight: 600; color: var(--ok-diep);
  background: linear-gradient(90deg, var(--ok-zacht) 0%, var(--ok-zacht) 100%); border-bottom: 1px solid var(--ok-rand);
}
.proefbalk b { color: inherit; }
.proefbalk button { background: var(--ok-diep); color: #fff; box-shadow: none; }
.proefbalk button:hover { background: var(--ok-diep); transform: none; box-shadow: none; }
.proefbalk.bijna { color: var(--let-diep); background: linear-gradient(90deg, var(--let-zacht) 0%, var(--let-zacht) 100%); border-bottom-color: var(--let-rand); }
.proefbalk.bijna button { background: var(--let-diep); }
.proefbalk.bijna button:hover { background: var(--let-diep); }
.proefbalk.op { color: var(--fout-diep); background: linear-gradient(90deg, var(--fout-zacht) 0%, var(--fout-zacht) 100%); border-bottom-color: var(--fout-rand); }
.proefbalk.op button { background: var(--fout-diep); }
.proefbalk.op button:hover { background: var(--fout-diep); }
.layout.has-proef .sidebar { height: calc(100vh - 39px); top: 39px; }
.layout.has-imp.has-proef .sidebar { height: calc(100vh - 77px); top: 77px; }

/* subtabs binnen Instellingen */
.subtabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.subtabs button { background: transparent; color: var(--muted); border-radius: 9px 9px 0 0; padding: 9px 15px; font-size: 14px; border-bottom: 2px solid transparent; box-shadow: none; }
.subtabs button:hover { background: var(--vlak); color: var(--ink); transform: none; box-shadow: none; }
.subtabs button.active { color: var(--brand); border-bottom-color: var(--brand); background: transparent; box-shadow: none; transform: none; }
.cardhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; margin: 0; white-space: nowrap; }
.chk input { width: 15px; height: 15px; accent-color: var(--brand); }
.req { color: var(--danger); }
.fieldgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 16px; }

/* offerte-wizard */
.wizhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.stepper { display: flex; gap: 6px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); color: var(--muted); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; box-shadow: 0 1px 2px rgba(13,20,36,.04); }
.step .num { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--line); color: var(--muted); font-size: 12px; font-weight: 800; }
.step.active { border-color: transparent; color: #fff; background: var(--grad); box-shadow: 0 2px 8px rgba(67,56,202,.28); }
.step.active .num { background: rgba(255,255,255,.25); color: #fff; }
.step.done { color: var(--ok-diep); border-color: var(--ok-rand); background: var(--ok-zacht); cursor: pointer; }
.step.done .num { background: linear-gradient(135deg, var(--ok-mid), var(--ok-mid)); color: #fff; }
.wiznav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 4px; }
.wiznav button[disabled] { opacity: .45; cursor: not-allowed; }
.runtot { display: flex; gap: 18px; align-items: baseline; font-size: 14px; flex-wrap: wrap; }
.prow.picked { border-color: var(--brand); background: var(--vlak); }
.duurkeuze { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.duur { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; border: 1px solid var(--line); color: var(--ink); padding: 14px 22px; border-radius: 14px; min-width: 104px; box-shadow: 0 1px 2px rgba(13,20,36,.04); transition: transform .12s, box-shadow .12s, border-color .12s; }
.duur:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.duur b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.duur span { font-size: 12px; color: var(--muted); }
.duur.active { border-color: transparent; background: var(--grad-zacht); box-shadow: var(--ring), 0 6px 16px rgba(67,56,202,.12); }
.duur.active b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.duur.active span { color: var(--brand-ink); }
.duurkorting { margin-top: 3px; background: var(--ok-zacht); color: var(--ok-diep); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.duur.active .duurkorting { background: var(--ok-zacht); color: var(--ok-diep); }
.korting-in { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; margin: 0; }
.korting-in input { width: 62px; }
.vasteKorting { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--vlak); }
.vastbedrag { margin-top: 10px; display: inline-block; background: var(--ok-zacht); color: var(--ok-diep); font-weight: 700; padding: 6px 14px; border-radius: 999px; font-size: 14px; }
.vastbedrag.geen { background: var(--vlak-2); color: var(--muted); }
.samenvat { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; background: var(--vlak); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.samenvat .lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 3px; }
.samenvat b { font-size: 17px; }
.gegevenslijst { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; font-size: 13px; }
.pvinline { width: 100%; height: 62vh; border: 1px solid var(--line); border-radius: 10px; background: #fff; }

/* offertetekst-editor */
.varbar { position: sticky; top: 0; z-index: 20; }
.varlijst { display: flex; flex-wrap: wrap; gap: 6px; }
.varlijst button { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.blokrij { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin-bottom: 8px; }
.blokrij input { flex: 1; max-width: 230px; }
.blokrij textarea { flex: 2; }

/* afbeelding uploaden */
.uploadrij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.uppreview { width: 52px; height: 52px; flex: none; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; overflow: hidden; background: var(--vlak); }
.uppreview img { width: 100%; height: 100%; object-fit: cover; }
.uppreview span { font-size: 11px; color: var(--muted); }

/* versleepbare productlijst */
.plist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; border-radius: 10px; padding: 4px; transition: background .12s; }
.plist.over { background: var(--info-zacht); outline: 2px dashed var(--brand); outline-offset: -2px; }
.plist .leeg { padding: 14px; text-align: center; color: var(--muted); font-size: 13px; border: 1px dashed var(--line); border-radius: 10px; }
.prod-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.prod-row.dragging { opacity: .45; border-color: var(--brand); }
.grip { cursor: grab; color: var(--muted); font-size: 17px; line-height: 1; user-select: none; padding: 2px 4px; }
.grip:active { cursor: grabbing; }
.prod-row .pinfo { flex: 1; min-width: 0; }
.prod-row .pprices { flex: none; width: 230px; font-size: 13px; }
.prod-row .pacts { flex: none; display: flex; gap: 6px; }
@media (max-width: 720px) {
  .prod-row { flex-wrap: wrap; }
  .prod-row .pprices { width: 100%; }
}

/* voorwaardelijk verplichte velden (instellingen) */

/* ---- veldeditor: één kaart per veld ----
   Alles op één rij persen leverde afgeknepen keuzelijsten op waarin je de helft
   van de tekst niet meer las. Nu een kaart met kopjes boven elke keuze, zodat je
   ziet wát je instelt in plaats van te raden naar '— geen contr…'. */
.veldkaart { border: 1px solid var(--line); border-radius: 12px; padding: 14px;
  margin-bottom: 10px; background: var(--card); }
.veldkaart:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.vkkop { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.vkkop .vklabel { flex: 1; margin: 0; font-weight: 600; font-size: 15px; }
.vkkop .chip { flex: 0 0 auto; }
.vkweg { flex: 0 0 auto; padding: 6px 10px; line-height: 1; }
.vkraster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.vkveld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vkveld > span { font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em; }
.vkveld select, .vkveld input { margin: 0; width: 100%; }
.vkbreed { grid-column: 1 / -1; }
/* de keuzes horen alleen bij een keuzelijst; anders is het een leeg vak dat afleidt */
.vkopties { display: none; }
.vkopties.aan { display: flex; }
.vkvinkjes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.vkvinkjes .chk { margin: 0; }
.vkvoorwaarde { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-left: auto; font-size: 12px; }
.vkvoorwaarde select { max-width: 170px; margin: 0; }
.vkvoorwaarde input { max-width: 150px; margin: 0; }
.vkvoorwaarde .gelijk, .vkvoorwaarde input { display: none; }
.vkvoorwaarde.actief .gelijk, .vkvoorwaarde.actief input { display: inline-block; }
@media (max-width: 900px) {
  .vkraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vkvoorwaarde { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
  .vkraster { grid-template-columns: 1fr; }
}

/* velden die de klant nog moet aanvullen */
.field.aanvullen input, .field.aanvullen select, .field.aanvullen textarea {
  border-color: var(--warn); background: var(--let-zacht);
}
.field.aanvullen label { color: var(--let-diep); }

/* handtekening zetten */
.sigpad-wrap { position: relative; border: 2px dashed var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.sigpad { display: block; touch-action: none; cursor: crosshair; }
.sigpad-hint { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: var(--muted); font-size: 13px; }
.sigpad-acties { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.sigbewijs { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.sigbewijs img { max-height: 70px; margin-top: 6px; display: block; }

/* akkoordverklaringen + volledige overeenkomst op de klantpagina */
.doc-frame { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.akklijst { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.akkregel { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; cursor: pointer; font-weight: 500; color: var(--ink); }
.akkregel:hover { background: var(--vlak); }
.akkregel input { width: 17px; height: 17px; flex: none; margin-top: 1px; accent-color: var(--qbrand, var(--brand)); }
.akkregel a { color: var(--qbrand, var(--brand)); font-weight: 600; }
.akkgegeven { background: var(--ok-zacht); border: 1px solid var(--ok-zacht); border-radius: 10px; padding: 12px 14px; margin: 12px 0; font-size: 13px; }
.akkgegeven div { margin-top: 4px; color: var(--ok-diep); }
.akkvoorbeeld { margin-top: 14px; }
.akkvoorbeeld .pvkop { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.akkvoorbeeld .akkregel { cursor: default; background: var(--vlak); }
code { background: var(--vlak-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* inloggen of registreren */
.authtabs { display: flex; gap: 4px; margin-bottom: 26px; background: var(--line); padding: 4px; border-radius: 12px; }
.authtabs button { flex: 1; background: transparent; color: var(--muted); box-shadow: none;
  font-size: 14px; padding: 9px 10px; border-radius: 9px; }
.authtabs button:hover { transform: none; box-shadow: none; color: var(--ink); }
.authtabs button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(13,20,36,.1); }
.gratis { display: inline-block; background: var(--ok-zacht); color: var(--ok-diep); font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; margin-left: 5px; }
/* honeypot: buiten beeld, maar niet display:none — bots vullen 'm dan wel in */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* rondleiding */
.tourlaag { position: fixed; inset: 0; z-index: 200; background: rgba(13,20,36,.45); }
.tourkaart { position: absolute; top: 50%; left: 50%; width: 320px; max-width: calc(100vw - 32px);
  background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 12px 40px rgba(13,20,36,.3); }
.tourkaart h3 { margin: 6px 0 8px; font-size: 17px; }
.tourkaart p { margin: 0 0 16px; font-size: 14px; color: var(--muted); line-height: 1.55; }
.tourteller { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.tourknoppen { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* het uitgelichte menu-item komt boven de donkere laag uit */
.touruitgelicht { position: relative; z-index: 201; background: #fff !important; color: var(--ink) !important;
  box-shadow: 0 0 0 3px var(--brand), 0 8px 24px rgba(0,0,0,.3); border-radius: 11px; }

/* aan de slag */
.card.aandeslag { border-left: 4px solid var(--brand); }
.voortgangbalk { height: 6px; border-radius: 999px; background: var(--vlak); overflow: hidden; margin: 4px 0 14px; }
.voortgangbalk span { display: block; height: 100%; border-radius: 999px; background: var(--grad); transition: width .4s ease; }
.slaglijst { display: flex; flex-direction: column; }
.slagstap { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.slagstap:last-child { border-bottom: 0; }
.slagstap .vink { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid;
  place-items: center; font-size: 11px; font-weight: 800; background: var(--vlak); color: var(--muted); }
.slagstap.klaar .vink { background: var(--ok-zacht); color: var(--ok-diep); }
.slagstap.klaar .slagtitel { color: var(--muted); text-decoration: line-through; }
.slagtitel { flex: 1; font-size: 14px; }

/* pakketkeuze bij facturatie */
.pakketten { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pakket { border: 1px solid var(--line); border-radius: 14px; padding: 16px;
  background: #fff; display: flex; flex-direction: column; gap: 4px; }
.pakket.huidig { border-color: var(--brand); background: var(--grad-zacht); box-shadow: var(--ring); }
.pknaam { font-weight: 700; font-size: 15px; }
.pkprijs { font-size: 26px; font-weight: 800; letter-spacing: -.03em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pkprijs span { font-size: 13px; font-weight: 600; color: var(--muted);
  background: none; -webkit-text-fill-color: var(--muted); }
.pkregel { font-size: 13px; }
.pkregel.waarschuw { color: var(--warn); font-weight: 600; }
.pakket button { margin-top: 10px; }
select.factstatus { font-size: 13px; padding: 5px 8px; min-width: 118px; }

/* tweestapsverificatie */
.tweefaopzet { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.qrvak { flex: none; background: #fff; padding: 10px; border: 1px solid var(--line); border-radius: 12px; line-height: 0; }
code.sleutel { display: inline-block; background: var(--ink); color: var(--line-sterk); padding: 10px 14px;
  border-radius: 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; letter-spacing: .08em; }
.herstelcodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.herstelcodes code { background: var(--vlak); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; letter-spacing: .06em; }

/* koppelingen (webhooks) */
.maprij { margin-bottom: 8px; }
.maprij .row > button { flex: 0 0 auto; min-width: 0; }
.jsonvoorbeeld { background: var(--ink); color: var(--line-sterk); padding: 12px 14px; border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  overflow-x: auto; max-height: 340px; margin: 6px 0 0; }

/* beveiliging en logboek (adminportaal) */
.dreiging { border: 1px solid var(--line); border-left-width: 4px; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.dreiging.hoog { border-left-color: var(--danger); background: var(--fout-zacht); }
.dreiging.midden { border-left-color: var(--warn); background: var(--let-zacht); }
.dreiging.laag { border-left-color: var(--brand); background: var(--vlak); }
.dkop { display: flex; align-items: center; gap: 9px; font-size: 14px; margin-bottom: 4px; }
.niveau { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 999px; }
.niveau.hoog { background: var(--fout-zacht); color: var(--fout-diep); }
.niveau.midden { background: var(--let-zacht); color: var(--let-diep); }
.niveau.laag { background: var(--info-zacht); color: var(--brand-ink); }
.dtekst { font-size: 13px; color: var(--ink); }
.dadvies { font-size: 13px; color: var(--muted); margin-top: 5px; }
.controle { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.controle:last-child { border-bottom: 0; }
.controle .vink { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid;
  place-items: center; font-size: 12px; font-weight: 800; }
/* let op: niet .ok noemen — dat is al de klasse voor een succesmelding en die
   geeft de hele regel een groene achtergrond */
.controle.geslaagd .vink { background: var(--ok-zacht); color: var(--ok-diep); }
.controle.gezakt .vink { background: var(--fout-zacht); color: var(--fout-diep); }
tr.logzwaar td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.stat .sub2b { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* leadformulier: embedcode en aanvragenlijst */
.embedvak { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--vlak); }
.embedkop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.embedcode { display: block; background: var(--ink); color: var(--line-sterk); padding: 10px 12px; border-radius: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-x: auto; white-space: nowrap; }
.embedvak .sub2 { color: var(--muted); font-size: 12px; margin: 8px 0 0; text-transform: none; letter-spacing: 0; }
/* een nog niet opgepakte aanvraag springt eruit */
tr.leadnieuw td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
tr.leadnieuw td { background: var(--vlak); }
select.leadstatus { font-size: 13px; padding: 5px 8px; min-width: 150px; }
/* in een .row krijgt elk kind flex:1; knopjes en vinkjes moeten juist smal blijven */

.bezig { background: var(--info-zacht); border: 1px solid var(--info-rand); color: var(--brand-ink); padding: 10px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 10px; }
button[disabled] { opacity: .6; cursor: wait; }

/* commissie */
.profielkaart { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 12px; background: #fff; }
.staffeltabel { width: 100%; border-collapse: collapse; }
.staffeltabel th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); text-align: left; padding: 6px 8px; }
.staffeltabel td { padding: 5px 8px; border-top: 1px solid var(--line); font-size: 14px; }
.staffeltabel input { width: 82px; }
.commissiegrid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.stat.commissie { padding: 18px 20px; }
.stat.commissie .n { font-size: 30px; line-height: 1.15; }
.stat.commissie .n.klein { font-size: 20px; margin-top: 10px; }
.stat.commissie .sub2b { font-size: 12px; color: var(--muted); }
.stat.commissie.behaald { background: linear-gradient(160deg, var(--ok-zacht), var(--card) 70%); }
.stat.commissie.behaald::before { background: linear-gradient(90deg, var(--ok-mid), var(--ok-mid)); }
.stat.commissie.behaald .n { background: linear-gradient(135deg, var(--ok-mid), var(--ok-diep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat.commissie.open { background: linear-gradient(160deg, var(--info-zacht), var(--card) 70%); }

/* contracten en aflopende looptijden */
.card.aflopend { border-left: 4px solid var(--warn); }
.card.contractkaart { border-left: 4px solid var(--ok); }
.card.contractkaart.binnenkort { border-left-color: var(--warn); background: var(--let-zacht); }
.card.contractkaart.verlopen { border-left-color: var(--danger); background: var(--fout-zacht); }
.card.contractkaart.vervangen { border-left-color: var(--muted); background: var(--vlak); }
.card.contractkaart.doorlopend { border-left-color: var(--brand); }
.card.contractkaart h2 { font-size: 15px; }
.verloop { display: inline-block; font-weight: 700; font-size: 12px; padding: 2px 9px; border-radius: 999px; }
.verloop.loopt { background: var(--ok-zacht); color: var(--ok-diep); }
.verloop.binnenkort { background: var(--let-zacht); color: var(--let-diep); }
.verloop.verlopen { background: var(--fout-zacht); color: var(--fout-diep); }
tr.verlopen td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
tr.binnenkort td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

/* klantreacties + tijdlijn */
.qlink { color: var(--ink); text-decoration: none; }
.qlink:hover { color: var(--brand); text-decoration: underline; }
.card.attentie { border-left: 4px solid var(--warn); }
.card.reacties { border-left: 4px solid var(--brand); }
.reactie { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--vlak); }
.reactie.afgewezen { background: var(--fout-zacht); border-color: var(--fout-rand); }
.reactie.opmerking { background: var(--info-zacht); border-color: var(--info-rand); }
.rkop { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13px; margin-bottom: 5px; flex-wrap: wrap; }
.rkop .muted { font-weight: 500; font-size: 12px; }
.rkop button { margin-left: auto; }
.rtekst { font-size: 14px; white-space: pre-wrap; }
.tijdlijn { display: flex; flex-direction: column; gap: 2px; }
.tl-item { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.tl-item:last-child { border-bottom: 0; }
.tl-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--vlak-2); font-size: 14px; }
.tl-t { font-weight: 600; font-size: 14px; }
.tl-x { font-size: 13px; color: var(--ink); background: #fff; border-left: 3px solid var(--brand); padding: 5px 10px; margin: 4px 0; border-radius: 0 6px 6px 0; white-space: pre-wrap; }

/* productgroepen */
h3.gsec { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 20px 0 2px; }
h3.gsec:first-of-type { margin-top: 4px; }
.gblock { border: 1px solid var(--line); border-radius: 12px; padding: 8px; margin-bottom: 12px; background: var(--vlak); }
.ghead { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 13px; color: var(--secondary, var(--ink)); padding: 4px 8px 8px; }
.ghead .muted { font-weight: 600; font-size: 12px; }
.gblock.keuzegroep { background: var(--let-zacht); border-color: var(--let-rand); }
.keuzelabel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--warn); background: var(--let-zacht); padding: 2px 8px; border-radius: 999px; }
.ghead { gap: 10px; }
.ghead button { margin-left: auto; }
.gblock .prow { margin-bottom: 6px; }
.gblock .prow:last-child { margin-bottom: 2px; }

/* offerte-bouwer */
.prow { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: #fff; }
.prow input[type=checkbox], .prow input[type=radio] { width: 17px; height: 17px; flex: none; accent-color: var(--brand); }
.prow .pinfo { flex: 1; min-width: 0; }
.prow .pqty { display: flex; align-items: center; gap: 8px; min-width: 160px; justify-content: flex-end; flex: none; }
.prow input[type=range] { width: 110px; accent-color: var(--brand); padding: 0; border: 0; }
.qval { font-weight: 700; min-width: 26px; text-align: right; }
.linkhint { font-size: 11px; color: var(--brand-ink); margin-top: 3px; }
.linkhint.waarschuwing { color: var(--warn); }
.prow.geenbasis { opacity: .6; }
.linklijst { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.chk.lnk { font-size: 13px; color: var(--ink); font-weight: 500; }
.totalsbox { background: var(--vlak); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin: 14px 0; font-size: 14px; display: flex; gap: 26px; flex-wrap: wrap; align-items: baseline; }
.modal.pv { max-width: 840px; width: 100%; height: 88vh; display: flex; flex-direction: column; padding: 14px; }
.pvbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.modal.pv iframe { flex: 1; border: 1px solid var(--line); border-radius: 8px; width: 100%; background: #fff; }
.btitle { font-size: 15px; margin: 18px 0 6px; color: var(--qink, var(--ink)); }
tr.krt td { color: var(--qbrand, var(--brand)); font-weight: 600; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.stat {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--card) 0%, var(--vlak) 100%);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
  box-shadow: var(--shadow); transition: transform .16s ease, box-shadow .16s ease;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-op); }
/* dun kleurstreepje bovenaan, geeft de kaart een accent zonder ruis */
.stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); opacity: .85; }
.stat .n { font-size: 27px; font-weight: 800; letter-spacing: -.03em; }
/* het grote getal in merkverloop */
.stat .n { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* vangnet: kan de browser geen tekst uit een verloop knippen, dan gewoon inkt —
   anders zou het getal onzichtbaar zijn */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat .n, .sidebar .brand span, .duur.active b { background: none; color: var(--brand); }
}
.stat .l { font-size: 13px; color: var(--muted); font-weight: 500; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--line); font-size: 14px; }
th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--vlak); }
tbody tr:last-child td { border-bottom: 0; }
.st { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; text-transform: capitalize; }
.st.concept { background: var(--vlak-2); color: var(--muted-sterk); }
.st.verzonden { background: var(--info-zacht); color: var(--info-diep); }
.st.bekeken { background: var(--let-zacht); color: var(--let-diep); }
.st.getekend { background: var(--ok-zacht); color: var(--ok-diep); }
.st.afgewezen { background: var(--fout-zacht); color: var(--fout-diep); }
.muted { color: var(--muted); }
.right { text-align: right; }

/* login + public */
.center { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.auth { width: 100%; max-width: 400px; }

/* ---------- inlogscherm: formulier links, merk rechts ---------- */
.authsplit { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.authpane { display: grid; place-items: center; padding: 40px 24px;
  background: var(--vlak); }
.authinner { width: 100%; max-width: 380px; }
.authkop { margin-bottom: 22px; }
.authkop .brand { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.2px; }
.authkop .brand span { color: var(--brand); }
.authkop h1 { font-size: 30px; line-height: 1.15; margin: 14px 0 6px; letter-spacing: -.7px; }
.authkop .sub { color: var(--muted); font-size: 14px; margin: 0; }

.authpane .field input { background: #fff; border-radius: 11px; padding: 12px 13px; font-size: 15px; }
.authpane .field { margin-bottom: 14px; }
button.groot { width: 100%; padding: 13px; font-size: 15px; border-radius: 11px; }

/* wachtwoordveld met tonen/verbergen */
.pwveld { position: relative; display: flex; align-items: center; }
.pwveld input { padding-right: 84px; }
.pwtoon { position: absolute; right: 6px; background: transparent; color: var(--muted);
  font-size: 12px; font-weight: 600; padding: 6px 8px; border-radius: 8px; width: auto; }
.pwtoon:hover { background: var(--line); color: var(--ink); }

/* Google-knop — nog niet werkend, dus zichtbaar uitgeschakeld */
.socialknop { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: var(--ink); border: 1px solid var(--line-sterk); border-radius: 11px;
  padding: 12px; font-size: 14px; font-weight: 600; }
.socialknop:disabled { opacity: 1; cursor: not-allowed; color: var(--muted); }
/* let op: NIET .binnenkort noemen — die klasse gebruiken de contractrijen al
   voor "loopt binnenkort af", en text-transform erft door naar de hele rij */
.komteraan { background: var(--info-zacht); color: var(--brand-ink); font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.scheider { display: flex; align-items: center; gap: 12px; margin: 18px 0;
  color: var(--muted); font-size: 12px; }
.scheider::before, .scheider::after { content: ""; flex: 1; height: 1px; background: var(--line-sterk); }
.authhulp { margin: 18px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.authhulp a { color: var(--brand-ink); font-weight: 600; }

/* merkpaneel rechts */
/* Trewi-blauwen, zodat het logo op zijn eigen kleurfamilie staat */
.authbrand { position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 40px;
  background: linear-gradient(155deg, #041a33 0%, #08325c 45%, #0d4a86 78%, #1668b6 100%); color: #fff; }
/* zachte lichtvlek, geeft het vlak diepte zonder afbeelding */
.authbrand::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 70% 25%, rgba(255,255,255,.16), transparent 70%); }
.authbrandinner { position: relative; z-index: 1; text-align: center; max-width: 420px; }
/* schaduw tilt het logo los van het verloop, anders zakt het blauwe blok weg */
.trewimark { width: 320px; max-width: 100%; height: auto;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.35)); }
.authbrand .claim { margin: 24px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.72); }
.authvoetnoot { position: absolute; bottom: 22px; font-size: 12px; color: rgba(255,255,255,.55); z-index: 1; }

/* voorbeeld tweestapsverificatie */
.voorbeeldbalk { background: var(--let-zacht); color: var(--let-diep); font-size: 12px; font-weight: 700;
  padding: 8px 12px; border-radius: 9px; margin-bottom: 18px; text-align: center; }
.codevakjes { display: flex; gap: 8px; }
.codevak { width: 100%; aspect-ratio: 1 / 1.15; text-align: center; font-size: 22px;
  font-weight: 700; padding: 0; border-radius: 11px; background: #fff; }

@media (max-width: 900px) {
  .authsplit { grid-template-columns: 1fr; }
  /* merkpaneel als smalle kop boven het formulier */
  .authbrand { order: -1; min-height: 170px; padding: 26px; }
  .trewimark { width: 240px; }
  .authbrand .claim { font-size: 12px; margin-top: 14px; }
  .authvoetnoot { display: none; }
  .authpane { padding: 32px 20px 48px; }
}
.hint { font-size: 12px; color: var(--muted); margin-top: 10px; }
.err { background: var(--fout-zacht); color: var(--fout-diep); padding: 10px 12px; border-radius: 10px; font-size: 14px; margin-bottom: 12px; }
.ok { background: var(--ok-zacht); color: var(--ok-diep); padding: 10px 12px; border-radius: 10px; font-size: 14px; margin-bottom: 12px; }

.linebox { border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.linebox > *:first-child { flex: 2; }

/* eindklant offerte */
.quote-page { max-width: 880px; margin: 0 auto; padding: 32px 20px; }
.quote-page table { display: block; overflow-x: auto; white-space: nowrap; }
.quote-page table td:first-child, .quote-page table th:first-child { white-space: normal; }
@media (max-width: 640px) {
  .quote-page { padding: 20px 12px; }
  .quote-page .card { padding: 16px 14px; }
}
.quote-head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 2px solid var(--qbrand, var(--brand)); margin-bottom: 24px; }
.quote-head img { max-height: 54px; max-width: 180px; }
.quote-head .qname { font-size: 22px; font-weight: 800; color: var(--qink, var(--ink)); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.actions .accept { background: var(--qbrand, var(--brand)); }
.modal-bg { position: fixed; inset: 0; background: rgba(15,23,42,.4); display: grid; place-items: center; padding: 20px; z-index: 50; }
.modal { background: #fff; border-radius: var(--radius); padding: 22px; width: 100%; max-width: 420px; }
.hidden { display: none !important; }

/* ---- offertesamensteller op de eigen website ---- */
/* een kadertje met achtergrond bij een keuze die uitleg verdient */
.uitleg { border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 10px;
  padding: 11px 14px; margin: 14px 0 18px; background: var(--vlak); }
.uitleg b { font-size: 13px; }
.vinkjes { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 6px; }
/* de vinkjes staan onder elkaar in een rij labels; iets meer lucht dan in een tabel */
.vinkjes .chk { font-size: 13px; }
/* een offerte die via de website binnenkwam maar nog niet is bevestigd */
.badge.onbevestigd { background: var(--let-zacht); color: var(--let-diep); }

/* een kaart die alleen doorverwijst: tekst links, knop rechts */
.card.wijzer { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.card.wijzer h2 { margin: 0 0 4px; }
.card.wijzer button { flex: 0 0 auto; }
select.leadwie { font-size: 13px; padding: 5px 8px; min-width: 150px; }

/* ---- Mijn taken ---- */
.taaknieuw { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.taaknieuw #tnieuw { flex: 1 1 260px; }
.taaknieuw input[type=date] { flex: 0 0 auto; width: auto; min-width: 150px; }
.taaknieuw select { flex: 0 0 auto; width: auto; min-width: 150px; }
.taaknieuw button { flex: 0 0 auto; }
.taaklijst { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.taak { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: background .12s, opacity .12s; }
.taak:hover { background: var(--vlak); }
/* een afgevinkte taak blijft leesbaar maar treedt op de achtergrond */
.taak.af { opacity: .55; }
.taak.af .tt { text-decoration: line-through; }
.taak > input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--brand); cursor: pointer; }
.taaktekst { flex: 1; min-width: 0; }
.taaktekst .tt { font-weight: 600; }
.taakmeta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; font-size: 12px; color: var(--muted); }
.taakknoppen { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; flex-wrap: wrap; }
.taakknoppen select { width: auto; min-width: 140px; font-size: 13px; padding: 5px 8px; }
.termijn { font-variant-numeric: tabular-nums; }
.termijn .wanneer { font-weight: 700; margin-left: 4px; }
.termijn.laat { color: var(--danger); font-weight: 600; }
.termijn.nu { color: var(--warn); font-weight: 600; }
@media (max-width: 640px) { .taak { flex-wrap: wrap; } .taakknoppen { width: 100%; } }

/* ---- keuze van het documentsjabloon ---- */
.stijlkeuze { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.stijlkaart { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 220px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0;
  cursor: pointer; font-weight: 400; color: var(--ink); background: #fff;
  transition: border-color .12s, box-shadow .12s, background .12s; }
.stijlkaart:hover { border-color: var(--line); background: var(--vlak); }
.stijlkaart.gekozen { border-color: var(--brand); background: var(--vlak); box-shadow: var(--ring); }
.stijlkaart input { width: 17px; height: 17px; margin-top: 2px; flex: none; accent-color: var(--brand); }

/* een link die zich als een terughoudende knop gedraagt (bijv. "bekijk" bij een factuur) */
.ghost-link { display: inline-block; padding: 6px 11px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink);
  text-decoration: none; margin-right: 4px; }
.ghost-link:hover { background: var(--vlak); border-color: var(--line); }

/* het afrekenblok onder een getekende offerte */
.betaalblok { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.betaalblok h3 { margin: 0 0 4px; font-size: 15px; }
.betaalblok .wacht { background: var(--let-zacht); color: var(--let-diep); padding: 11px 14px; border-radius: 10px;
  font-size: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.betaalblok .wacht button { flex: 0 0 auto; }

/* een functie die niet in het pakket zit: rustig uitleggen, niet als fout tonen */
.slotkaart { text-align: center; padding: 40px 28px; }
.slotkaart .slotmerk {
  display: inline-block; background: var(--grad-zacht); color: var(--brand-ink);
  border-radius: 999px; padding: 4px 13px; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: 12px;
}
.slotkaart h2 { font-size: 21px; }
.slotkaart .sub { max-width: 46ch; margin: 0 auto 18px; }

/* een tabblad dat niet in het pakket zit: zichtbaar, maar duidelijk op slot */
.nav button.opslot { opacity: .62; }
.nav button.opslot:hover { opacity: 1; background: var(--vlak); }
.nav button.opslot.active { opacity: 1; }
.nav .slotje { margin-left: auto; font-size: 11px; line-height: 1; }
.nav button.active .slotje { filter: grayscale(1) brightness(3); }
/* een subtabblad op slot: leesbaar, maar duidelijk niet beschikbaar */
.subtabs button.opslot { opacity: .6; }
.subtabs button.opslot:hover { opacity: 1; }

/* variabelen in groepen; één lange rij knoppen werd onleesbaar */
.vargroep { margin-bottom: 12px; }
.vargroep:last-child { margin-bottom: 0; }
.vargroep > .kop { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.varbar code { background: var(--grad-zacht); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* proefweergave van een mailsjabloon, direct onder de tekst die je bewerkt */
.proefblok { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.proefkop { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: var(--vlak); border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--muted); }
.proefvak { padding: 12px 14px; font-size: 14px; }
.proefvak.lang { white-space: pre-wrap; border-top: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.6; }

/* soort offerte: in de wizard te kiezen, op het detail als chipje terug te zien */
.soortkeuze {
  display: grid;
  /* ruimer dan 200px: bij smalle kolommen brak "Nieuwe offerte" af en kregen de
     drie kaarten elk een andere hoogte, wat de rij scheef trok */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin: 8px 0 0;
}
.soortkaart {
  display: grid;                      /* radio in een eigen kolom, tekst ernaast */
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 11px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  background: var(--card);
  font-weight: 400;
  transition: border-color .12s, box-shadow .12s;
}
.soortkaart:hover { border-color: var(--brand); }
.soortkaart.gekozen { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.soortkaart input {
  accent-color: var(--brand);
  width: 17px; height: 17px;
  margin: 0;
  /* op de eerste tekstregel uitlijnen: (regelhoogte − hoogte) / 2 */
  transform: translateY(2px);
}
.soortkaart b { display: block; font-size: 14px; line-height: 1.35; }
.soortkaart .muted { margin-top: 3px; line-height: 1.4; }

.soortchip { font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px;
  background:var(--info-zacht); color:var(--brand); border:1px solid var(--info-rand) }
.soortchip.upgrade { background:var(--let-zacht); color:var(--let-diep); border-color:var(--let-rand) }
.soortchip.verlenging { background:var(--ok-zacht); color:var(--ok-diep); border-color:var(--ok-rand) }

/* ============================================================ STATISTIEKEN
   Filters achter een knop, en met de hand getekende SVG-grafieken. De
   bewegingen zijn kort gehouden (120-260ms): genoeg om te laten zien wat er
   verandert, te weinig om in de weg te zitten als je twintig keer filtert. */

.filterknop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filterknop > button { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.filterknop .trechter { font-size: 9px; transition: transform .2s; }
.filterknop .teller {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700;
}
.actievefilters { display: flex; gap: 6px; flex-wrap: wrap; }
.fchip {
  border: 1px solid var(--line); background: var(--grad-zacht); color: var(--brand-ink);
  border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.fchip:hover { border-color: var(--brand); transform: translateY(-1px); }
.fchip .x { opacity: .5; font-size: 10px; }
.fchip:hover .x { opacity: 1; }

/* het paneel schuift open in plaats van te knipperen */
.filterbalk { overflow: hidden; transition: max-height .26s ease, opacity .2s, margin .26s; max-height: 320px; }
.filterbalk.dicht { max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }

.grafiekkaart h2 { margin-bottom: 2px; }

/* ---- lijndiagram ---- */
.chartkop { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 10px 0 6px; }
.chartkop .legenda {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); cursor: default; transition: color .15s;
}
.chartkop .legenda:hover { color: var(--ink); }
.chartkop .legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.lijnwrap { position: relative; }
.lijnchart { width: 100%; height: 300px; display: block; overflow: visible; }
.lijnchart .raster { stroke: var(--line); stroke-width: 1; }
.lijnchart .asy, .lijnchart .asx { fill: var(--muted); font-size: 11px; font-family: inherit; }
.lijnchart .asy { text-anchor: end; }
.lijnchart .asx { text-anchor: middle; }
.lijnchart .lijn {
  fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  /* de lijn tekent zichzelf bij het openen van de pagina */
  stroke-dasharray: 3000; stroke-dashoffset: 3000;
  animation: lijntekenen .9s ease-out forwards;
}
@keyframes lijntekenen { to { stroke-dashoffset: 0; } }
.lijnchart .vlak { opacity: 0; animation: vlakop .6s ease-out .35s forwards; }
@keyframes vlakop { to { opacity: 1; } }
.lijnchart .stip { opacity: 0; transition: opacity .15s, r .15s; stroke: var(--card); stroke-width: 2; }
.lijnchart .stip.aan { opacity: 1; r: 6; }
.lijnchart .peiler { stroke: var(--brand); stroke-width: 1; stroke-dasharray: 3 3; transition: opacity .15s; }
.lijnchart .raakvlak { fill: transparent; cursor: crosshair; }
.lijnchart [data-reeks] { transition: opacity .2s; }
.lijnchart [data-reeks].gedimd { opacity: .15; }

.charttip {
  position: absolute; top: 8px; transform: translateX(-50%);
  background: var(--ink); color: #fff; border-radius: 10px; padding: 9px 12px;
  font-size: 12px; line-height: 1.5; pointer-events: none; white-space: nowrap;
  box-shadow: var(--shadow-op); z-index: 3;
}
.charttip b { display: block; margin-bottom: 3px; font-size: 12.5px; }
.charttip span { display: flex; align-items: center; gap: 6px; }
.charttip i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* ---- ringdiagram ---- */
.ringwrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.ringchart { width: 240px; height: 240px; flex: 0 0 auto; }
.ringchart .segment {
  cursor: pointer; transform-origin: 120px 120px;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), opacity .2s, filter .2s;
}
.ringchart .segment.aan { transform: scale(1.05); filter: drop-shadow(0 4px 10px rgba(13,20,36,.22)); }
.ringchart .segment.gedimd { opacity: .28; }
.ringchart .ringgetal { text-anchor: middle; font-size: 34px; font-weight: 800; fill: var(--ink); }
.ringchart .ringlabel { text-anchor: middle; font-size: 12px; fill: var(--muted); }

.ringlegenda { list-style: none; margin: 0; padding: 0; flex: 1 1 240px; min-width: 220px; }
.ringlegenda li {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px;
  cursor: pointer; transition: background .15s, transform .15s;
}
.ringlegenda li:hover, .ringlegenda li.aan { background: var(--grad-zacht); transform: translateX(2px); }
.ringlegenda i { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.ringlegenda .naam { flex: 1; font-weight: 600; font-size: 13.5px; }
.ringlegenda .waarde { font-weight: 700; font-variant-numeric: tabular-nums; }
.ringlegenda .pct { color: var(--muted); font-size: 12px; min-width: 38px; text-align: right; }

/* de kerncijfers reageren ook op aanwijzen */
.statgrid .stat { transition: transform .15s, box-shadow .15s; }
.statgrid .stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-op); }

@media (max-width: 640px) {
  .ringwrap { gap: 14px; justify-content: center; }
  .lijnchart { height: 240px; }
}
/* wie beweging liever niet heeft, krijgt hem niet */
@media (prefers-reduced-motion: reduce) {
  .lijnchart .lijn { animation: none; stroke-dashoffset: 0; }
  .lijnchart .vlak { animation: none; opacity: 1; }
  .ringchart .segment, .ringlegenda li, .statgrid .stat, .fchip { transition: none; }
}

/* ---- vergelijking met de vorige periode ---- */
.delta {
  display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0; cursor: help;
  transition: transform .15s;
}
.delta:hover { transform: translateY(-1px); }
.delta .pijl { font-size: 8px; line-height: 1; }
.delta.op { background: var(--ok-zacht); color: var(--ok-diep); }
.delta.af { background: var(--fout-zacht); color: var(--fout-diep); }
.delta.vlak { background: var(--line); color: var(--muted); }
/* in de kleine regels onder een cijfer wat bescheidener */
.sub2b .delta { font-size: 11px; padding: 1px 6px; margin-left: 4px; }

.lijnchart .lijn.vorige {
  stroke: var(--muted); stroke-width: 2; stroke-dasharray: 5 5;
  opacity: .55; animation: none;
}
.chartkop .legenda i.gestippeld {
  width: 14px; height: 0; border-top: 2px dashed var(--muted); border-radius: 0;
}

/* schakelaar tussen aantallen en omzet */
.eenheidswitch {
  display: inline-flex; background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px; gap: 2px;
}
.eenheidswitch button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  transition: background .18s, color .18s, box-shadow .18s;
}
.eenheidswitch button:hover { color: var(--ink); }
.eenheidswitch button.aan { background: var(--card); color: var(--brand-ink); box-shadow: var(--shadow); }
.ringchart .ringgetal.geld { font-size: 26px; }

/* ============================================================ ADMIN-INZICHT */
.aandachtlijst { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.aandachtrij {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 11px 12px; border-radius: 10px; transition: background .15s;
}
.aandachtrij:hover { background: var(--grad-zacht); }
.aandachtrij .signalen { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.sig {
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  border: 1px solid transparent;
}
.sig.slecht { background: var(--fout-zacht); color: var(--fout-diep); border-color: var(--fout-rand); }
.sig.let-op { background: var(--let-zacht); color: var(--let-diep); border-color: var(--let-rand); }
.sig.kans   { background: var(--ok-zacht); color: var(--ok-diep); border-color: var(--ok-rand); }

.functiemeter {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--grad-zacht); color: var(--brand-ink);
  font-size: 12px; font-weight: 700; cursor: help;
}

.functiestaven { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.fstaaf { display: flex; align-items: center; gap: 12px; }
.fstaaf .flabel { flex: 0 0 150px; font-size: 13px; font-weight: 600; }
.fstaaf .fbalk {
  flex: 1; height: 9px; background: var(--line); border-radius: 999px; overflow: hidden;
}
.fstaaf .fbalk i { display: block; height: 100%; background: var(--grad); border-radius: 999px;
  transition: width .4s cubic-bezier(.2,.7,.3,1); }
.fstaaf .fgetal { flex: 0 0 28px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- meldingen ---- */
.melding { border-left: 3px solid var(--line); }
.melding.bug { border-left-color: var(--danger); }
.melding.wens { border-left-color: var(--brand-2); }
.melding.vraag { border-left-color: var(--warn); }
.chip.bug { background: var(--fout-zacht); color: var(--fout-diep); }
.chip.wens { background: var(--info-zacht); color: var(--info-diep); }
.chip.vraag { background: var(--let-zacht); color: var(--let-diep); }

.meldlijst { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.meldrij { padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px;
  transition: border-color .15s; }
.meldrij:hover { border-color: var(--brand); }
.meldkop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* ============================================================ AANKONDIGINGEN */
#aankondigingen:not(:empty) { margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.aankondiging {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 13px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card);
  border-left-width: 4px; box-shadow: var(--shadow);
  animation: ankbinnen .3s cubic-bezier(.2,.7,.3,1);
  transition: opacity .2s, transform .2s;
}
.aankondiging.weg { opacity: 0; transform: translateY(-6px); }
@keyframes ankbinnen { from { opacity: 0; transform: translateY(-8px); } }
.aankondiging .ankinhoud { flex: 1; font-size: 13.5px; line-height: 1.5; }
.aankondiging b { display: block; font-size: 14px; margin-bottom: 2px; }
.aankondiging a { margin-left: 8px; font-weight: 600; }
.aankondiging .ankweg {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 13px; padding: 2px 6px; border-radius: 6px; transition: background .15s, color .15s;
}
.aankondiging .ankweg:hover { background: var(--line); color: var(--ink); }

.aankondiging.info      { border-left-color: var(--brand-2); }
.aankondiging.nieuw     { border-left-color: var(--ok); }
.aankondiging.onderhoud { border-left-color: var(--warn); }
.aankondiging.storing   { border-left-color: var(--danger); background: var(--fout-zacht); }

.chip.info { background: var(--info-zacht); color: var(--info-diep); }
.chip.nieuw { background: var(--ok-zacht); color: var(--ok-diep); }
.chip.onderhoud { background: var(--let-zacht); color: var(--let-diep); }
.chip.storing { background: var(--fout-zacht); color: var(--fout-diep); }

.anklijst { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.ankrij { padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; }
.ankrij.loopt { border-color: var(--brand); background: var(--grad-zacht); }
.ankrijkop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ankvoet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ankknoppen { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* confetti: boven alles, maar volledig door te klikken */
.confetti-vlak {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 9999;
}

/* kort bericht rechtsonder, bijvoorbeeld bij een verse handtekening */
.toast {
  position: fixed; right: 22px; bottom: 22px; z-index: 9998;
  background: var(--ink); color: #fff; padding: 13px 18px; border-radius: 12px;
  font-size: 14px; font-weight: 600; box-shadow: var(--shadow-op);
  max-width: min(90vw, 420px); animation: toastbinnen .35s cubic-bezier(.2,.7,.3,1);
  transition: opacity .3s, transform .3s;
}
.toast.weg { opacity: 0; transform: translateY(8px); }
@keyframes toastbinnen { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ---- doelen ---- */
.doelenkaart .doellijst { display:flex; flex-direction:column; gap:14px; margin-top:14px }
.doelrij { padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--vlak) }
.doelrij.gehaald { border-color:var(--ok-mid); background:linear-gradient(180deg,rgba(22,163,74,.07),transparent) }
.doelrij.achter { border-color:var(--let-mid) }
.doelkop { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:8px }
.doelkop b { font-size:14px }
.doelkop .muted { font-size:12px }
.doeltempo { margin-left:auto; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px;
  background:var(--line); color:var(--muted) }
.doeltempo.gehaald { background:var(--ok-zacht); color:var(--ok-diep) }
.doeltempo.voor { background:var(--info-zacht); color:var(--info-diep) }
.doeltempo.achter { background:var(--let-zacht); color:var(--let-diep) }
.doelbalk { position:relative; height:10px; border-radius:999px; background:var(--line); overflow:visible }
.doelbalk i { display:block; height:100%; border-radius:999px; background:var(--grad);
  transition:width .8s cubic-bezier(.22,1,.36,1) }
.doelrij.gehaald .doelbalk i { background:linear-gradient(90deg,var(--ok-mid),var(--ok-mid)) }
.doelrij.achter .doelbalk i { background:linear-gradient(90deg,var(--let-mid),var(--let-rand)) }
/* het streepje waar je nu zou moeten staan; zonder dat leest elke balk vroeg in
   de maand als een achterstand */
.doelbalk u { position:absolute; top:-3px; width:2px; height:16px; border-radius:2px;
  background:var(--muted); opacity:.45; transform:translateX(-1px) }
.doelvoet { display:flex; justify-content:space-between; gap:8px; margin-top:7px; font-size:12px }
.doelinstel { display:flex; flex-direction:column; gap:10px; margin-top:14px }
.doelregel { display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.doelregel select, .doelregel input { margin:0 }
.doelregel input[data-veld="waarde"] { width:110px }
.doelregel button.klein { padding:6px 10px; line-height:1 }
@media (max-width: 640px) {
  .doelregel { display:grid; grid-template-columns:1fr 1fr; }
  .doelregel select[data-veld="doelwit"] { grid-column:1 / -1 }
}

/* ---- reactie afhandelen ---- */
.reactie .rkop { display:flex; align-items:center; gap:8px }
.reactie .rkop button { margin-left:0 }
.reactie .rkop button[data-open] { margin-left:auto }
.card.reacties.open { border-color:var(--let-mid) }
.afgevinkt { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--ok) }

/* ---- bewijs van ondertekening ---- */
.bewijskaart { border-color:var(--info-rand) }
.bewijsraster { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px }
.bewijsraster .lbl { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); margin-bottom:2px }
.hashregel { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
  word-break:break-all; margin-top:6px; opacity:.75 }

/* ---- geldigheid van een offerte ---- */
.geldig { margin-top:12px; padding:9px 12px; border-radius:10px; font-size:13px;
  background:var(--grad-zacht); border:1px solid var(--line) }
.geldig.bijna { background:var(--let-zacht); border-color:var(--let-rand); color:var(--let-diep) }
.geldig.verlopen { background:var(--fout-zacht); border-color:var(--fout-rand); color:var(--fout-diep) }
.card.geldigkaart.verlopen { border-color:var(--fout-rand) }

/* ---- offertesjablonen ---- */
.sjabloonbak { display:flex; flex-direction:column; gap:8px; margin:12px 0 4px;
  padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--vlak) }
.sjabloonbak.leeg { background:var(--grad-zacht) }
.sjabloon { display:flex; gap:8px; align-items:center }
.sjabloonkies { flex:1; text-align:left; display:flex; flex-direction:column; gap:2px;
  background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; cursor:pointer }
.sjabloonkies:hover { border-color:var(--brand); box-shadow:var(--shadow) }
.sjabloonkies .muted { font-size:12px; font-weight:400 }

/* ---- gesprek met de klant ---- */
.chat { display:flex; flex-direction:column; gap:10px; margin:4px 0 14px }
.bericht { max-width:82%; padding:10px 13px; border-radius:14px; font-size:14px }
.bericht.klant { align-self:flex-start; background:var(--vlak-2); border:1px solid var(--line);
  border-bottom-left-radius:4px }
.bericht.verkoper { align-self:flex-end; background:var(--grad-zacht); border:1px solid var(--info-rand);
  border-bottom-right-radius:4px }
.bericht.afwijzing { background:var(--fout-zacht); border-color:var(--fout-rand) }
.bkop { display:flex; gap:10px; align-items:baseline; font-size:12px; font-weight:600; margin-bottom:3px }
.bkop .muted { font-weight:400; font-size:11px }
.btekst { white-space:pre-wrap; line-height:1.5 }
.chatinvoer { border-top:1px solid var(--line); padding-top:12px }
.chatinvoer textarea { width:100%; margin:0 }
.chatvoet { display:flex; gap:10px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; margin-top:8px }
.chatvoet .sub2 { margin:0 }
.card.gesprekkaart.open { border-color:var(--let-mid) }

/* ---- zoeken in offertes ---- */
.zoekbalk { display:flex; gap:8px; align-items:center; margin:12px 0 4px }
.zoekbalk input { flex:1; margin:0; min-width:0 }

/* ---- omzet van het platform ---- */
.stat.groot .n { font-size:30px }
.stat.goed .n { color:var(--ok) }
.stat.slecht .n { color:var(--danger) }
.bewegen { display:flex; flex-direction:column; gap:2px; margin-top:10px }
.beweegrij { display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:9px 12px; border-radius:9px; font-size:14px; background:var(--vlak) }
.beweegrij.bij b { color:var(--ok) }
.beweegrij.af b { color:var(--danger) }
.beweegrij.totaal { background:var(--grad-zacht); font-weight:600; margin-top:4px }
.pakketbalk { display:flex; gap:3px; height:14px; margin:12px 0 10px; border-radius:999px; overflow:hidden }
.pakketdeel { min-width:3px }
.pakketdeel.k0, .pakketlegenda i.k0 { background:var(--brand) }
.pakketdeel.k1, .pakketlegenda i.k1 { background:var(--brand-2) }
.pakketdeel.k2, .pakketlegenda i.k2 { background:var(--info-mid) }
.pakketdeel.k3, .pakketlegenda i.k3 { background:var(--info-mid) }
.pakketlegenda { display:flex; gap:16px; flex-wrap:wrap; font-size:13px }
.pakketlegenda i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px }
tr.opgezegd td { opacity:.65 }
td.r, th.r { text-align:right }

/* ---- onboarding ---- */
.obkaart { border-left:4px solid var(--line) }
.obkaart.slecht { border-left-color:var(--danger) }
.obkaart.letop { border-left-color:var(--warn) }
.obkaart.goed { border-left-color:var(--brand-2) }
.obkaart.binnen { border-left-color:var(--ok) }
.obstand { font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px;
  background:var(--vlak-2); white-space:nowrap }
.obstand.slecht { background:var(--fout-zacht); color:var(--fout-diep) }
.obstand.letop { background:var(--let-zacht); color:var(--let-diep) }
.obstand.binnen { background:var(--ok-zacht); color:var(--ok-diep) }
.obstappen { display:flex; flex-wrap:wrap; gap:8px }
.obstap { display:flex; align-items:center; gap:7px; font-size:13px; padding:6px 11px;
  border:1px solid var(--line); border-radius:999px; color:var(--muted) }
.obstap.klaar { border-color:var(--ok-zacht); background:var(--ok-zacht); color:var(--ink) }
.obstap .vink { font-weight:700; color:var(--muted) }
.obstap.klaar .vink { color:var(--ok) }
.obvoet { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:12px }
.obvoet .tip { font-style:italic }

/* ---- vormcontrole op velden ---- */
.veldhint { font-size:11px; color:var(--muted); margin-top:3px }
.field.vormfout input, .field.vormfout select, .field.vormfout textarea {
  border-color:var(--danger); box-shadow:0 0 0 3px rgba(225,29,72,.12) }
.veldfout { font-size:12px; color:var(--danger); margin-top:4px }

/* ---- nieuwsbrief-vinkje op de tekenpagina ---- */
.akklijst.nieuwsbrief { margin-top:10px; padding-top:12px; border-top:1px dashed var(--line) }

/* ---- agenda ---- */
.agendaknoppen { display:flex; gap:6px; align-items:center; flex-wrap:wrap }
.agendamaand { margin:0 0 10px; font-size:16px; text-transform:capitalize }
.kalender { display:grid; grid-template-columns:repeat(7,1fr); gap:4px }
.kdagkop { font-size:11px; font-weight:600; color:var(--muted); text-align:center; padding:2px 0;
  text-transform:uppercase; letter-spacing:.04em }
.kdag { min-height:84px; border:1px solid var(--line); border-radius:9px; padding:5px 5px 6px;
  background:var(--card); display:flex; flex-direction:column; gap:3px; overflow:hidden }
.kdag.buiten { background:var(--vlak); opacity:.55 }
.kdag.vandaag { border-color:var(--brand); box-shadow:var(--ring) }
.knummer { font-size:11px; font-weight:600; color:var(--muted) }
.kdag.vandaag .knummer { color:var(--brand) }
.kitem { font-size:11px; line-height:1.25; padding:3px 5px; border-radius:5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-left:3px solid }
.kitem.taak { background:var(--info-zacht); border-color:var(--brand) }
.kitem.signaal { background:var(--let-zacht); border-color:var(--let-mid) }
.kitem.contract { background:var(--fout-zacht); border-color:var(--fout-mid) }
.kitem.geldigheid { background:var(--info-zacht); border-color:var(--info-mid) }
.kitem.klaar { opacity:.5; text-decoration:line-through }
.kmeer { font-size:10px; color:var(--muted) }
.aglijst { display:flex; flex-direction:column; gap:8px }
.agrij { display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); border-left-width:4px }
.agrij.taak { border-left-color:var(--brand) }
.agrij.signaal { border-left-color:var(--let-mid) }
.agrij.contract { border-left-color:var(--fout-mid) }
.agrij.geldigheid { border-left-color:var(--info-mid) }
.agdatum { min-width:88px; font-size:12px; font-weight:600; color:var(--muted); padding-top:2px }
.agtekst { flex:1; font-size:14px; min-width:0 }
.agtekst .muted { font-size:12px; font-weight:400 }
.agknoppen { display:flex; gap:6px; align-items:center; flex-wrap:wrap }
a.knopje { display:inline-block; text-decoration:none; padding:6px 12px; border-radius:8px;
  border:1px solid var(--line); font-size:13px; color:var(--ink); background:var(--card) }
a.knopje:hover { border-color:var(--brand) }
.waarschuw { padding:10px 12px; border-radius:10px; background:var(--let-zacht); border:1px solid var(--let-rand);
  color:var(--let-diep); font-size:13px }
@media (max-width: 720px) {
  .kdag { min-height:58px }
  .kitem { font-size:0; padding:0; height:5px; border-radius:3px; border-left-width:0 }
  .kmeer { display:none }
  .agrij { flex-wrap:wrap }
  .agdatum { min-width:0 }
}

/* ---- live commissie in de wizard ---- */
.commissievak { margin-top:18px; padding-top:14px; border-top:1px dashed var(--line) }
.commissievak button.actief { border-color:var(--brand); color:var(--brand) }
.commissievak button svg { vertical-align:-3px; margin-right:5px }
.cmraster { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;
  margin-top:12px; padding:14px; border-radius:12px; background:var(--grad-zacht);
  border:1px solid var(--info-rand) }
.cmraster .lbl { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); margin-bottom:2px }
.cmraster b { font-size:17px }
.cmraster .muted { font-size:11px }
.cmtip { margin-top:10px; padding:9px 12px; border-radius:9px; background:var(--ok-zacht);
  border:1px solid var(--ok-zacht); color:var(--ok-diep) }

/* ---- nog aan te leveren gegevens ---- */
.card.aanleveren { border-color:var(--let-rand); background:linear-gradient(180deg,var(--let-zacht),transparent) }

/* ---- instellingen: gegroepeerde navigatie ---- */
.instelnav { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: flex-start;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.instelgroep { display: flex; flex-direction: column; gap: 5px; }
.instelkop { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding-left: 2px; }
.instelnav .subtabs { margin: 0; border: 0; padding: 0; }
@media (max-width: 720px) {
  .instelnav { gap: 10px; }
  .instelgroep { width: 100%; }
}