:root{--ink:#0f1524;--ink2:#1a2236;--tekst:#141821;--grijs:#5d6476;--lijn:#e7e9ef;--zacht:#f5f6f9;--bg:#f2f4f8;--oranje:#ff6a2b;--oranje2:#e8561a;--oz:#fff1ea;--groen:#16a34a;--rood:#dc2626}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--tekst);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
input,select,textarea,button{font:inherit;color:inherit}
input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%;padding:10px 12px;border:1.5px solid var(--lijn);border-radius:10px;background:#fff;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--oranje);box-shadow:0 0 0 3px rgba(255,106,43,.13)}
textarea{resize:vertical;min-height:70px}
label.veld{display:block;font-size:.82rem;font-weight:600;color:#3d4457}
label.veld>input,label.veld>select,label.veld>textarea{margin-top:5px}

.btn{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--lijn);background:#fff;padding:9px 15px;border-radius:10px;font-weight:700;cursor:pointer;white-space:nowrap;transition:.15s;font-size:.9rem}
.btn:hover{border-color:#c9cdd8}
.btn.primair{background:var(--oranje);border-color:var(--oranje);color:#fff}.btn.primair:hover{background:var(--oranje2);border-color:var(--oranje2)}
.btn.donker{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.gevaar{color:var(--rood)}.btn.gevaar:hover{border-color:var(--rood)}
.btn.klein{padding:6px 10px;font-size:.82rem;border-radius:8px}
.btn.vol{width:100%;justify-content:center;padding:12px}
.btn:disabled{opacity:.55;cursor:default}
.link{background:none;border:0;cursor:pointer;color:var(--grijs);font-weight:600;padding:0}
.link:hover{color:var(--tekst)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 10%,rgba(255,106,43,.25),transparent 45%),var(--ink);padding:20px}
.login-kaart{background:#fff;border-radius:22px;padding:38px 34px;width:100%;max-width:380px;text-align:center;box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.login-kaart img{margin:0 auto 14px}.login-kaart h1{font-size:1.5rem;letter-spacing:-.5px}.login-kaart h1 b{color:var(--oranje)}
.login-kaart p{color:var(--grijs);margin:4px 0 20px}.login-kaart input{margin-bottom:12px;text-align:center}
.fout-tekst{color:var(--rood)!important;font-weight:600;margin:12px 0 0!important;min-height:1em}

/* layout */
.app{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
.zij{background:var(--ink);color:#c5ccdc;padding:22px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.merk{display:flex;align-items:center;gap:9px;color:#fff;font-weight:800;font-size:1.2rem;padding:0 10px 22px;letter-spacing:-.4px}.merk b{color:var(--oranje)}
.zij nav{display:flex;flex-direction:column;gap:3px}
.zij nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font-weight:600;transition:.15s}
.zij nav a span{width:20px;text-align:center;opacity:.7}
.zij nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.zij nav a.actief{background:rgba(255,106,43,.16);color:#fff}.zij nav a.actief span{color:var(--oranje);opacity:1}
.zij nav em{margin-left:auto;background:var(--oranje);color:#fff;font-style:normal;font-size:.72rem;font-weight:800;border-radius:99px;padding:1px 8px}
.zij-onder{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:0 12px;font-size:.88rem}
.zij-onder .link{color:#8f98ad;text-align:left}.zij-onder a:hover,.zij-onder .link:hover{color:#fff}
.hoofd{min-width:0}
.topbalk{display:flex;align-items:center;gap:14px;padding:18px 30px;background:var(--bg);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--lijn)}
.topbalk h1{font-size:1.35rem;letter-spacing:-.4px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-acties{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.menu-knop{display:none;background:#fff;border:1.5px solid var(--lijn);border-radius:10px;width:40px;height:40px;font-size:1.1rem;cursor:pointer}
.inhoud{padding:26px 30px 60px;max-width:1440px}

/* kaarten */
.kaart{background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:22px}
.kaart+.kaart{margin-top:18px}
.kaart h2{font-size:1.02rem;margin-bottom:14px;letter-spacing:-.2px}
.kaart-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.kaart-kop h2{margin:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.stat{background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:18px 20px}
.stat b{display:block;font-size:2rem;font-weight:800;letter-spacing:-1px}.stat span{color:var(--grijs);font-weight:600;font-size:.86rem}
.stat.accent{background:var(--ink);color:#fff;border-color:var(--ink)}.stat.accent span{color:#aab2c5}.stat.accent b{color:var(--oranje)}
.raster2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.raster3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.span2{grid-column:span 2}.span3{grid-column:1/-1}
.leeg{text-align:center;color:var(--grijs);padding:40px 10px}
.leeg b{display:block;color:var(--tekst);font-size:1.05rem;margin-bottom:4px}

/* tabellen */
.tabel-wrap{overflow-x:auto;background:#fff;border:1px solid var(--lijn);border-radius:16px}
table.tabel{width:100%;border-collapse:collapse}
.tabel th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#8a91a3;padding:12px 16px;border-bottom:1px solid var(--lijn);font-weight:700;white-space:nowrap}
.tabel td{padding:13px 16px;border-bottom:1px solid #f0f1f5;vertical-align:middle}
.tabel tr:last-child td{border-bottom:0}
.tabel tbody tr.klik{cursor:pointer;transition:background .1s}.tabel tbody tr.klik:hover{background:#fafbfd}
.tabel .r{text-align:right;white-space:nowrap}
.tabel .sub{color:var(--grijs);font-size:.83rem}
.ongelezen td:first-child{box-shadow:inset 3px 0 0 var(--oranje)}.ongelezen .naam{font-weight:800}

.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.filters button{border:1.5px solid var(--lijn);background:#fff;border-radius:99px;padding:6px 13px;font-weight:700;font-size:.82rem;cursor:pointer;color:var(--grijs)}
.filters button.aan{background:var(--ink);color:#fff;border-color:var(--ink)}
.zoek{max-width:280px}

.chip{display:inline-block;font-size:.74rem;font-weight:800;padding:3px 9px;border-radius:99px;text-transform:capitalize;white-space:nowrap}
.s-nieuw{background:var(--oz);color:var(--oranje2)}.s-gecontacteerd{background:#eef4ff;color:#2457c5}.s-offerte{background:#f3eefe;color:#6d3fd1}
.s-gewonnen,.s-geaccepteerd{background:#ecfdf3;color:#067647}.s-verloren,.s-geweigerd{background:#fef1f1;color:#b42318}
.s-concept{background:#f1f2f5;color:#4b5263}.s-verstuurd{background:#eef4ff;color:#2457c5}
.tag{display:inline-block;background:var(--zacht);border:1px solid var(--lijn);border-radius:8px;padding:3px 9px;font-size:.8rem;font-weight:600;margin:0 5px 5px 0}

/* detail aanvraag */
.detail{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
.info dl{display:grid;grid-template-columns:130px 1fr;gap:9px 14px;font-size:.93rem}
.info dt{color:var(--grijs);font-weight:600}.info dd{word-break:break-word}
.bericht{white-space:pre-wrap;background:var(--zacht);border-radius:12px;padding:14px;margin-top:16px;font-size:.93rem}
.snel{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

/* offerte-editor */
.lijnen{display:grid}
.lijn{display:grid;grid-template-columns:1fr;gap:10px;padding:14px 0;border-top:1px solid #f0f1f5}
.lijn:first-child{border-top:0;padding-top:0}
.lijn input,.lijn select,.lijn textarea{padding:8px 10px;font-size:.88rem;border-radius:8px}
.l-oms textarea{min-height:36px;margin-top:6px;font-size:.82rem;color:var(--grijs)}
.l-velden{display:grid;grid-template-columns:70px 100px 82px minmax(110px,1fr) auto auto;gap:8px;align-items:start}
.l-velden label{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:#8a91a3;font-weight:700}
.l-velden label>*{margin-top:4px;text-transform:none;letter-spacing:0;color:var(--tekst);font-weight:500;font-size:.88rem}
.l-tot{text-align:right;white-space:nowrap}.l-tot small{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:#8a91a3;font-weight:700}
.l-tot b{display:block;margin-top:10px;font-size:.95rem}
.l-acties{display:flex;gap:1px;padding-top:24px}
.ico-knop{background:none;border:0;cursor:pointer;color:#9aa1b2;font-size:1rem;padding:2px 4px;border-radius:6px}.ico-knop:hover{color:var(--tekst);background:var(--zacht)}.ico-knop.weg:hover{color:var(--rood)}
.lijn-acties{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.totaal-blok{display:flex;gap:14px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
.totaal{background:var(--zacht);border-radius:12px;padding:14px 16px;min-width:230px;font-size:.88rem}
.totaal b{display:block;margin-bottom:6px}.totaal div{display:flex;justify-content:space-between;color:var(--grijs)}
.totaal div.groot{color:var(--tekst);font-weight:800;font-size:1rem;border-top:1px solid var(--lijn);margin-top:5px;padding-top:6px}
.editor{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.editor>*,.detail>*{min-width:0}
.zijpaneel{position:sticky;top:90px}
.tijdlijn{list-style:none;font-size:.86rem;display:grid;gap:8px}.tijdlijn li{display:flex;justify-content:space-between;gap:10px;color:var(--grijs)}.tijdlijn b{color:var(--tekst);font-weight:600}
.niet-bewaard{color:var(--oranje2);font-size:.82rem;font-weight:700}

/* vereenvoudigde offerte */
.editor-smal{max-width:980px}
.statusbalk{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;background:#fff;border:1px solid var(--lijn);border-left:4px solid #9aa1b2;border-radius:14px;padding:14px 18px;margin-bottom:18px}
.statusbalk span{color:var(--grijs);font-size:.9rem}
.statusbalk.blauw{border-left-color:#2457c5}.statusbalk.rood{border-left-color:var(--rood);background:#fff7f7}.statusbalk.ok{border-left-color:var(--groen);background:#f6fef9}
.sb-acties{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* omzetgrafiek */
.overzicht-raster{margin-top:18px;align-items:start}.overzicht-raster .kaart+.kaart{margin-top:0}
.grafiek{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;height:240px;align-items:end;padding-top:10px}
.g-kol{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px;min-width:0}
.g-bar{width:100%;max-width:46px;background:linear-gradient(180deg,#ff8a54,var(--oranje));border-radius:8px 8px 3px 3px;min-height:3px;transition:height .4s}
.g-w{font-size:.68rem;font-weight:700;color:var(--grijs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.g-m{font-size:.75rem;color:var(--grijs);font-weight:600}

/* catalogus met volgorde */
.cat-lijst{display:grid;gap:8px}
.cat{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:12px 14px;transition:box-shadow .15s,border-color .15s}
.cat.sleep{opacity:.45}.cat.doel{border-color:var(--oranje);box-shadow:0 0 0 3px rgba(255,106,43,.15)}
.greep{cursor:grab;color:#a3a9b8;font-size:1.2rem;user-select:none;padding:0 2px}
.cat-info{flex:1;min-width:0;cursor:pointer}.cat-info small{display:block;color:var(--grijs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-prijs{text-align:right;white-space:nowrap}.cat-prijs small{display:block;color:var(--grijs);font-size:.78rem}
.cat-knoppen{display:flex;align-items:center;gap:2px}

/* modal */
.modal{position:fixed;inset:0;background:rgba(15,21,36,.55);display:grid;place-items:center;z-index:100;padding:20px;backdrop-filter:blur(3px)}
.modal-kaart{background:#fff;border-radius:18px;width:100%;max-width:560px;max-height:88vh;overflow:auto;scrollbar-width:thin;padding:26px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.modal-kaart h2{font-size:1.2rem;margin-bottom:16px}
.modal-acties{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
/* kiezen uit de catalogus: één nette scrollzone binnen het venster */
.modal-kaart.kies-modal{display:flex;flex-direction:column;overflow:hidden;max-height:min(720px,88vh)}
.kies-modal .modal-acties{margin-top:14px;padding-top:14px;border-top:1px solid var(--lijn)}
.kies-lijst{display:grid;align-content:start;gap:8px;overflow-y:auto;margin-top:12px;flex:1;min-height:0;padding:2px 6px 2px 2px;scrollbar-width:thin;scrollbar-color:#cfd3dc transparent}
.kies-lijst::-webkit-scrollbar{width:8px}.kies-lijst::-webkit-scrollbar-track{background:transparent}
.kies-lijst::-webkit-scrollbar-thumb{background:#d5d9e2;border-radius:99px}.kies-lijst::-webkit-scrollbar-thumb:hover{background:#b8bdc9}
.kies{display:flex;gap:12px;align-items:center;text-align:left;border:1.5px solid var(--lijn);background:#fff;border-radius:12px;padding:12px 14px;cursor:pointer;width:100%;transition:border-color .12s,background .12s,box-shadow .12s}
.kies:hover{border-color:#ffb894;background:#fffbf9}
.kies-tekst{flex:1;min-width:0}.kies small{display:block;color:var(--grijs)}.kies b.p{white-space:nowrap;text-align:right}
.kies .vink{flex:none;width:24px;height:24px;border-radius:7px;border:1.5px solid #cfd3dc;display:grid;place-items:center;color:transparent;font-size:.8rem;font-weight:800;transition:.12s}
.kies.gekozen{border-color:var(--oranje);background:var(--oz);box-shadow:0 0 0 3px rgba(255,106,43,.12)}
.kies.gekozen .vink{background:var(--oranje);border-color:var(--oranje);color:#fff}

/* toasts */
.toasts{position:fixed;right:20px;bottom:20px;display:grid;gap:8px;z-index:200}
.toast{background:var(--ink);color:#fff;padding:12px 16px;border-radius:12px;font-weight:600;box-shadow:0 12px 30px -10px rgba(0,0,0,.4);animation:in .2s ease;max-width:360px}
.toast.fout{background:var(--rood)}
@keyframes in{from{opacity:0;transform:translateY(8px)}}

.laden{padding:50px;text-align:center;color:var(--grijs)}
.hint{color:var(--grijs);font-size:.84rem;margin-top:6px}
.waarschuwing{background:#fff7d6;border:1px solid #f5e1a0;color:#7a5b00;border-radius:12px;padding:12px 14px;margin-bottom:16px;font-size:.9rem}

@media (max-width:1250px){.editor,.detail{grid-template-columns:1fr}.zijpaneel{position:static}.stats{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.l-velden{grid-template-columns:1fr 1fr}.l-tot{text-align:left}.l-acties{padding-top:0}}
@media (max-width:820px){
  .cat{flex-wrap:wrap}.cat-prijs{text-align:left}.cat-knoppen{margin-left:auto}
  .grafiek{gap:3px;height:200px}.g-w{display:none}
  .app{grid-template-columns:1fr}
  .zij{position:fixed;inset:0 auto 0 0;width:250px;z-index:60;transform:translateX(-100%);transition:transform .2s}
  .app.menu-open .zij{transform:none;box-shadow:20px 0 40px rgba(0,0,0,.3)}
  .menu-knop{display:block}
  .topbalk{padding:14px 16px;flex-wrap:wrap}.inhoud{padding:18px 16px 50px}
  .raster2,.raster3{grid-template-columns:1fr}.span2{grid-column:auto}
  .info dl{grid-template-columns:1fr}.info dt{margin-top:6px}
}

/* Beginscherm klant: info + offerte naast elkaar */
.detail{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.of-kaart .of-titel{margin:-4px 0 12px;color:var(--grijs)}
.of-bedrag{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:12px;background:#f4f7fb;margin-bottom:12px}
.of-bedrag b{font-size:1.6rem;letter-spacing:-.02em}.of-bedrag span{color:var(--grijs);font-size:.88rem}
.of-regel{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #eef1f5;font-size:.93rem}
.of-regel span{color:var(--grijs)}.of-regel b{text-align:right;font-weight:600}
.of-regel .groen,.geopend{color:#15803d}.of-regel .rood{color:#b91c1c}.of-regel .grijs{color:var(--grijs);font-weight:500}
.of-kaart .snel{margin-top:14px}
.opslag{color:var(--grijs);font-size:.86rem;margin-right:auto;align-self:center}
@media (max-width:1100px){.detail{grid-template-columns:1fr}}
.detail>.kaart{margin:0}
.editor-smal{margin-left:auto;margin-right:auto}