/* Beheeromgeving - zelfde navy/goud als de website, maar dichter op elkaar:
   dit is een werkscherm, geen etalage. */

:root{
  --navy:#0f1c29;
  --navy-2:#02223d;
  --navy-3:#16283a;
  --ink:#33414f;
  --ink-soft:#5b6b7a;
  --bg:#f4f7fa;
  --wit:#fff;
  --goud:#e4b268;
  --goud-diep:#96661f;
  --groen:#3f7a3f;
  --rood:#b3261e;
  --lijn:#dbe3ec;
  --lijn-licht:#eef2f6;
  --schaduw:0 10px 30px -18px rgba(2,34,61,.35);
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;line-height:1.55;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

/* ---------- kop ---------- */
.kop{background:var(--navy);color:#fff;padding:0 24px;position:sticky;top:0;z-index:30;
  border-bottom:1px solid rgba(255,255,255,.12)}
.kop-in{max-width:1500px;margin:0 auto;height:64px;display:flex;align-items:center;gap:24px}
.merk{font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.merk span{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:#8fa2b3;font-weight:700}
/* Wisselen tussen klanten en leads. */
.tabs{display:flex;gap:.25rem;background:rgba(255,255,255,.07);padding:.25rem;border-radius:999px}
.tabs button{border:0;background:transparent;color:#a9bccd;font-weight:700;font-size:.9rem;
  padding:.45rem 1.05rem;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:.45rem}
.tabs button:hover{color:#fff}
.tabs button[aria-current="page"]{background:var(--goud);color:var(--navy)}
.tabs .teller{display:inline-flex;align-items:center;justify-content:center;min-width:20px;
  height:20px;padding:0 .35rem;border-radius:999px;background:rgba(255,255,255,.16);
  font-size:.72rem;font-variant-numeric:tabular-nums}
.tabs button[aria-current="page"] .teller{background:rgba(15,28,41,.16)}
.tabs .teller:empty{display:none}

.kop .zoek{margin-left:auto;position:relative}
.kop .zoek input{width:280px;padding:.6rem .9rem .6rem 2.2rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff}
.kop .zoek input::placeholder{color:#8fa2b3}
.kop .zoek input:focus{outline:0;border-color:var(--goud);background:rgba(255,255,255,.14)}
.kop .zoek svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);
  width:1rem;height:1rem;stroke:#8fa2b3;fill:none;stroke-width:2}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.92rem;
  padding:.62rem 1.1rem;border-radius:8px;border:1px solid transparent;cursor:pointer;
  transition:background .15s,border-color .15s,transform .1s}
.knop:active{transform:translateY(1px)}
.knop-goud{background:var(--goud);color:var(--navy);border-color:var(--goud)}
.knop-goud:hover{background:#d3a054}
.knop-rand{background:transparent;border-color:var(--lijn);color:var(--navy-2)}
.knop-rand:hover{background:var(--lijn-licht)}
.knop-donker{background:var(--navy-2);color:#fff}
.knop-donker:hover{background:#0b3155}
.knop-rood{background:transparent;border-color:#e7c3c0;color:var(--rood)}
.knop-rood:hover{background:#fdecea}
.knop svg{width:1.05em;height:1.05em;stroke:currentColor;fill:none;stroke-width:2}
:focus-visible{outline:2px solid var(--goud);outline-offset:2px}

/* ---------- kerncijfers ---------- */
.blad{max-width:1500px;margin:0 auto;padding:24px}
.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--lijn);border:1px solid var(--lijn);border-radius:12px;overflow:hidden;
  margin-bottom:20px}
.cijfer{background:var(--wit);padding:16px 18px}
.cijfer b{display:block;font-size:1.5rem;color:var(--navy-2);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cijfer span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700}
.cijfer small{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:.15rem}

/* ---------- werkbalk ---------- */
.balk{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.filters{display:flex;gap:.35rem;background:var(--wit);border:1px solid var(--lijn);
  border-radius:999px;padding:.25rem}
.filters button{border:0;background:transparent;padding:.42rem .9rem;border-radius:999px;
  font-weight:700;font-size:.86rem;color:var(--ink-soft);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--navy-2);color:#fff}
.balk .rechts{margin-left:auto;display:flex;gap:.6rem;align-items:center}

/* ---------- tabel ---------- */
.tabelwrap{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;
  overflow:hidden;box-shadow:var(--schaduw)}
table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;padding:12px 16px;border-bottom:1px solid var(--lijn);
  background:#fafcfd;white-space:nowrap;cursor:pointer;user-select:none}
thead th:hover{color:var(--navy-2)}
thead th.rechts,td.rechts{text-align:right}
thead th .pijl{opacity:.45;font-size:.85em}
tbody tr{border-bottom:1px solid var(--lijn-licht);cursor:pointer}
tbody tr:last-child{border-bottom:0}
tbody tr:hover{background:#fafcfd}
tbody tr.geselecteerd{background:#f0f5fa}
td{padding:12px 16px;vertical-align:middle}
td.naam b{color:var(--navy-2);display:block;line-height:1.35}
td.naam small{color:var(--ink-soft);font-size:.84rem}
td.bedrag{font-variant-numeric:tabular-nums;font-weight:700;color:var(--navy-2);
  white-space:nowrap}
td.bedrag small{display:block;font-weight:500;color:var(--ink-soft);font-size:.8rem}
.leeg{padding:44px 16px;text-align:center;color:var(--ink-soft)}

/* ---------- status ---------- */
.status{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;
  padding:.24rem .6rem;border-radius:999px;white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status-actief{background:#eaf3ea;color:var(--groen)}
.status-offerte{background:#fdf3e3;color:var(--goud-diep)}
.status-geen-reactie{background:#fdecea;color:var(--rood)}
.status-gestopt{background:#eef2f6;color:var(--ink-soft)}
/* Fases van een lead. */
.status-nieuw{background:#e8f0fa;color:#20558f}
.status-contact{background:#fdf3e3;color:var(--goud-diep)}
.status-gewonnen{background:#eaf3ea;color:var(--groen)}
.status-verloren{background:#eef2f6;color:var(--ink-soft)}

/* Opvolgdatum die verstreken is, valt op in de lijst. */
.verlopen{color:var(--rood);font-weight:700}
.vandaag{color:var(--goud-diep);font-weight:700}

.knop-groen{background:var(--groen);color:#fff;border-color:var(--groen)}
.knop-groen:hover{background:#356635}
.aantal{color:var(--ink-soft);font-size:.88rem}
.hint{font-size:.78rem;color:var(--ink-soft);margin-top:.3rem}
/* Velden die niet bij de huidige weergave horen. */
[data-voor].verborgen{display:none}
/* .knop zet display:inline-flex en zou anders van [hidden] winnen. */
[hidden]{display:none !important}

/* ---------- zijpaneel ---------- */
.sluier{position:fixed;inset:0;background:rgba(2,34,61,.45);opacity:0;visibility:hidden;
  transition:opacity .2s;z-index:40}
.sluier.open{opacity:1;visibility:visible}
.paneel{position:fixed;top:0;right:0;height:100dvh;width:min(560px,100vw);background:var(--bg);
  z-index:50;transform:translateX(100%);transition:transform .24s ease;display:flex;
  flex-direction:column;box-shadow:-20px 0 50px -30px rgba(2,34,61,.5)}
.paneel.open{transform:translateX(0)}
.paneel-kop{background:var(--navy);color:#fff;padding:20px 24px;display:flex;gap:14px;
  align-items:flex-start;flex:none}
.paneel-kop h2{font-size:1.25rem;line-height:1.25;letter-spacing:-.01em}
.paneel-kop p{color:#a9bccd;font-size:.9rem;margin-top:.15rem}
.paneel-kop .dicht{margin-left:auto;background:transparent;border:0;color:#a9bccd;
  cursor:pointer;padding:4px;flex:none}
.paneel-kop .dicht:hover{color:#fff}
.paneel-kop .dicht svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.paneel-body{overflow-y:auto;padding:22px 24px 32px;flex:1}
.paneel-voet{flex:none;border-top:1px solid var(--lijn);background:var(--wit);
  padding:14px 24px;display:flex;gap:.6rem;align-items:center}
.paneel-voet .rechts{margin-left:auto;display:flex;gap:.6rem}

/* ---------- formulier ---------- */
.groep{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:18px;
  margin-bottom:16px}
.groep h3{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:14px}
.rij{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.veld{margin-bottom:12px}
.veld:last-child{margin-bottom:0}
.veld label{display:block;font-size:.78rem;font-weight:700;color:var(--navy-2);
  margin-bottom:.32rem}
.veld input,.veld select,.veld textarea{width:100%;padding:.6rem .75rem;border-radius:8px;
  border:1px solid var(--lijn);background:var(--wit)}
.veld textarea{min-height:84px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:0;border-color:var(--navy-2);
  box-shadow:0 0 0 3px rgba(2,34,61,.08)}
.veld .hint{font-size:.78rem;color:var(--ink-soft);margin-top:.3rem}
.veld.fout input{border-color:var(--rood)}

/* Bedrag: incl en excl naast elkaar. */
.bedragen{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.afgeleid{background:var(--lijn-licht);border:1px dashed var(--lijn);border-radius:8px;
  padding:.6rem .75rem;font-variant-numeric:tabular-nums}
.afgeleid b{color:var(--navy-2);font-size:1.05rem}
.afgeleid span{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700}

/* ---------- notities ---------- */
.notitie-nieuw{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:14px}
.notitie-nieuw textarea{min-height:64px}
.notities{list-style:none;display:grid;gap:10px}
.notities li{background:var(--wit);border:1px solid var(--lijn);border-radius:10px;
  padding:12px 14px;position:relative}
.notities time{display:block;font-size:.74rem;letter-spacing:.06em;color:var(--ink-soft);
  font-weight:700;margin-bottom:.25rem}
.notities p{white-space:pre-wrap;font-size:.94rem}
.notities .weg{position:absolute;top:8px;right:8px;background:transparent;border:0;
  color:var(--ink-soft);cursor:pointer;padding:4px;line-height:0;border-radius:6px}
.notities .weg:hover{color:var(--rood);background:#fdecea}
.notities .weg svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.geen-notities{color:var(--ink-soft);font-size:.9rem;font-style:italic}

/* ---------- meldingen ---------- */
.melding{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--navy-2);color:#fff;padding:.8rem 1.3rem;border-radius:10px;font-weight:700;
  font-size:.92rem;opacity:0;transition:opacity .2s,transform .2s;z-index:60;pointer-events:none}
.melding.zichtbaar{opacity:1;transform:translateX(-50%) translateY(0)}
.melding.fout{background:var(--rood)}

@media (max-width:820px){
  .kop .zoek input{width:170px}
  .rij,.bedragen{grid-template-columns:1fr}
  .verbergklein{display:none}
  .blad{padding:16px}
}

/* ---------- inlogscherm ---------- */
.inlogblad{min-height:100dvh;display:grid;place-items:center;padding:24px;
  background:var(--navy);
  background-image:radial-gradient(circle at 20% 15%,rgba(228,178,104,.14),transparent 45%),
                   radial-gradient(circle at 85% 80%,rgba(2,34,61,.7),transparent 50%)}
.inlogkaart{width:100%;max-width:420px;background:var(--wit);border-radius:16px;
  padding:38px 34px 34px;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.inlogmerk{margin-bottom:26px}
.inlogmerk .rule{display:block;width:52px;height:2px;background:var(--goud);margin-bottom:16px}
.inlogmerk b{display:block;color:var(--navy-2);font-size:1.1rem;letter-spacing:-.01em}
.inlogmerk .sub{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;margin-top:.1rem}
.inlogkaart h1{font-size:1.75rem;color:var(--navy-2);letter-spacing:-.02em;margin-bottom:.4rem}
.inloglead{color:var(--ink-soft);font-size:.94rem;margin-bottom:24px}
.inlogkaart .veld{margin-bottom:16px}
.inlogkaart .veld label{display:block;font-size:.78rem;font-weight:700;color:var(--navy-2);
  margin-bottom:.35rem}
.inlogkaart input{width:100%;padding:.72rem .85rem;border-radius:8px;border:1px solid var(--lijn);
  background:var(--wit)}
.inlogkaart input:focus{outline:0;border-color:var(--navy-2);box-shadow:0 0 0 3px rgba(2,34,61,.08)}

/* Wachtwoordveld met oogje. */
.wachtwoordveld{position:relative}
.wachtwoordveld input{padding-right:2.9rem}
.wachtwoordveld button{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  background:transparent;border:0;cursor:pointer;padding:.45rem;line-height:0;border-radius:6px;
  color:var(--ink-soft)}
.wachtwoordveld button:hover{color:var(--navy-2);background:var(--lijn-licht)}
.wachtwoordveld button.aan{color:var(--navy-2)}
.wachtwoordveld svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9}

.inlogknop{width:100%;justify-content:center;margin-top:8px;padding:.85rem 1.2rem}
.inlogknop:disabled{opacity:.65;cursor:default}

/* Foutmelding boven het formulier. */
.inlogkaart .d-form-melding{display:none;padding:.8rem 1rem;border-radius:8px;background:#fdecea;
  border:1px solid #f3c4bf;color:#8c1d18;font-size:.9rem;font-weight:600;margin-bottom:18px}
.inlogkaart .d-form-melding.zichtbaar{display:block}

/* Uitlogknop in de kopbalk van het beheer. */
.kop .uit{background:transparent;border:1px solid rgba(255,255,255,.2);color:#a9bccd;
  font-weight:700;font-size:.84rem;padding:.42rem .85rem;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.kop .uit:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.kop .uit svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.kop .wie{color:#8fa2b3;font-size:.82rem;font-weight:600;white-space:nowrap}
@media (max-width:900px){ .kop .wie{display:none} }