/* Werkbank: links invullen, rechts het A4 zoals de klant het krijgt. Merkgrijs uit het logo, blauwdrukblauw voor acties. */
:root{
  --bg:#eef0f3; --surface:#ffffff; --surface-2:#f6f7f9; --ink:#2b2d33; --muted:#62666f; --line:#d3d6dc; --brand:#4a4d55;
  --accent:#1f5aa8; --accent-ink:#ffffff; --accent-soft:#e3ecf8;
  --warn:#8a5a00; --warn-soft:#fdf1d3; --ok:#1d6b45; --ok-soft:#dcf1e6; --bad:#a3362b; --bad-soft:#f9e2df; --logo:none;
  --paper:#ffffff; --paper-ink:#2b2d33; --paper-head:#4a4d55; --paper-line:#c9cbd0; --paper-soft:#eceef1; --paper-muted:#6b6e75; --paper-head-ink:#ffffff; --paper-mark:#fff3cd; --paper-mark-ink:#7a5a00;
  --f-kop:Bahnschrift,"Segoe UI",system-ui,sans-serif; --f-tekst:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; --f-papier:Helvetica,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#17191d; --surface:#212429; --surface-2:#2a2e34; --ink:#eceef1; --muted:#a4a9b2; --line:#3b4047; --brand:#d5d8de;
  --accent:#7fb0f0; --accent-ink:#10233d; --accent-soft:#1f3350;
  --warn:#f0c463; --warn-soft:#3d3115; --ok:#7dd3a8; --ok-soft:#173527; --bad:#f09a8f; --bad-soft:#40201c; --logo:invert(1) brightness(1.6); color-scheme:dark;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.45 var(--f-tekst)}
h1,h2,h3{font-family:var(--f-kop);margin:0;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.laden{padding:40px;text-align:center;color:var(--muted)}
.balk{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line);padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.merk{display:flex;align-items:center;gap:10px;font:600 19px var(--f-kop)}
.merk img{height:30px;width:auto;filter:var(--logo)}
.spring{flex:1 1 auto}
.wie{color:var(--muted);font-size:14px}
.opslag{color:var(--muted);font-size:13px;white-space:nowrap}
.opslag.fout{color:var(--bad);font-weight:600}
.knop{border:1px solid var(--line);background:var(--surface);border-radius:4px;padding:7px 12px;font-weight:500;cursor:pointer;white-space:nowrap}
a.knop{text-decoration:none;display:inline-block}
@media (max-width:760px){.balk{position:static}}
.knop:hover{background:var(--surface-2)}
.knop.hoofd{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.knop.hoofd:hover{filter:brightness(1.08);background:var(--accent)}
.knop.gevaar{color:var(--bad)}
.knop:disabled{opacity:.5;cursor:not-allowed}
.knop.klein{padding:3px 9px;font-size:13px}
.linkje{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;cursor:pointer}
.wrap{max-width:1040px;margin:0 auto;padding:24px max(16px,env(safe-area-inset-right)) 64px max(16px,env(safe-area-inset-left))}
.smal{max-width:420px;margin:0 auto;padding:48px 16px}
.lijstkop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
.lijstkop h1{font-size:30px;line-height:1.1}
.lijstkop p{margin:4px 0 0;color:var(--muted)}
.zoek{width:100%;margin-bottom:12px;border:1px solid var(--line);border-radius:4px;background:var(--surface);padding:8px 10px}
.rijen{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.leeg-staat{padding:36px 20px;text-align:center;color:var(--muted)}
.rij{display:grid;grid-template-columns:96px minmax(0,1fr) 124px 98px 170px;gap:12px;align-items:center;padding:12px 14px;border-top:1px solid var(--line)}
.rij:first-child{border-top:0}
.rij .nr{color:var(--muted);font-variant-numeric:tabular-nums;font-size:14px}
.rij .kl{font-weight:600;overflow-wrap:anywhere}
.rij .wk{color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.rij .bedrag{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.rij .bedrag small{display:block;color:var(--muted);font-weight:400;font-size:12px}
.rij .acties{display:flex;gap:6px;justify-content:flex-end}
.pil{display:inline-block;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:500;text-align:center}
.pil.concept{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.pil.verstuurd{background:var(--accent-soft);color:var(--accent)}
.pil.akkoord{background:var(--ok-soft);color:var(--ok)}
.pil.afgewezen{background:var(--bad-soft);color:var(--bad)}
@media (max-width:760px){
  .rij{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .rij .nr{grid-column:1}.rij .st{grid-column:2;grid-row:1;justify-self:end}
  .rij .ond{grid-column:1 / -1}
  .rij .bedrag{grid-column:1;text-align:left}.rij .acties{grid-column:2}
}
.tabs{display:none;border:1px solid var(--line);border-radius:4px;overflow:hidden;width:max-content}
.tabs button{border:0;background:var(--surface);padding:6px 14px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.werk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;max-width:1500px;margin:0 auto;padding:20px max(16px,env(safe-area-inset-right)) 72px max(16px,env(safe-area-inset-left));align-items:start}
.kolom{display:flex;flex-direction:column;gap:14px;min-width:0}
.papierkolom{position:sticky;top:70px;max-height:calc(100vh - 86px);overflow:auto;min-width:0;border:1px solid var(--line);border-radius:4px}
@media (max-width:1099px){
  .tabs{display:flex}
  .werk{grid-template-columns:minmax(0,1fr)}
  .werk[data-tab="form"] .papierkolom{display:none}
  .werk[data-tab="papier"] .kolom{display:none}
  .papierkolom{position:static;max-height:none}
}
.vak{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px}
.vak>h2{font-size:18px;margin-bottom:10px}
.vak>p.uitleg{margin:-6px 0 10px;color:var(--muted);font-size:14px}
.velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.veld{display:flex;flex-direction:column;gap:3px;min-width:0}
.veld.breed{grid-column:1 / -1}
.veld>label{font-size:13px;color:var(--muted)}
input[type=text],input[type=email],input[type=password],textarea,.vak select,.veld select{width:100%;border:1px solid var(--line);border-radius:4px;background:var(--surface);padding:7px 9px}
textarea{resize:vertical;line-height:1.4}
@media (max-width:520px){.velden{grid-template-columns:minmax(0,1fr)}}
.stapel{display:flex;flex-direction:column;gap:12px}
.hulp{background:var(--accent-soft);border-color:transparent}
.hulp p{margin:6px 0 0;font-size:13px;color:var(--muted)}
.hulp .knop{margin-top:8px}
.deelkop{display:grid;grid-template-columns:auto minmax(0,1fr) 118px 74px;gap:8px;align-items:center;margin-bottom:10px}
.deelkop h2{font-size:18px;white-space:nowrap}
@media (max-width:520px){.deelkop{grid-template-columns:auto minmax(0,1fr) auto}.deelkop h2{grid-row:1}.deelkop input{grid-column:2 / 4}.deelkop select{grid-row:2}.deelkop select:first-of-type{grid-column:1 / 3}}
.posten{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.post{border-top:1px solid var(--line);background:var(--surface)}
.post:first-child{border-top:0}
.post.leeg-post{padding:10px;color:var(--muted)}
.postkop{display:grid;grid-template-columns:minmax(0,1fr) 124px;gap:6px;align-items:center;padding:5px 6px 5px 0}
.posttitel{display:flex;gap:8px;align-items:baseline;text-align:left;background:none;border:0;padding:5px 8px;cursor:pointer;min-width:0}
.posttitel .pn{color:var(--muted);font-size:13px;width:28px;flex:none;font-variant-numeric:tabular-nums}
.posttitel .pt{font-weight:500;overflow-wrap:anywhere}
.prijs{display:flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:4px;padding-left:8px;background:var(--surface)}
.prijs input{border:0;width:100%;min-width:0;background:none;padding:6px 8px 6px 0;text-align:right;font-variant-numeric:tabular-nums}
.prijs input:focus{outline:none}
.prijs:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.prijs.leeg{background:var(--warn-soft);border-color:var(--warn)}
.prijs.leeg input::placeholder{color:var(--warn)}
.postbody{padding:4px 10px 12px;display:flex;flex-direction:column;gap:8px;background:var(--surface-2);border-top:1px solid var(--line)}
.voorstel{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 8px 8px 44px;font-size:13px;color:var(--muted)}
.voorstel b{color:var(--accent);font-variant-numeric:tabular-nums}
.nakijken{background:var(--warn-soft);border-color:var(--warn)}
.nakijken ul{margin:0 0 10px;padding-left:20px}
.voorstellen .knop{margin-top:2px}
.bestanden{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}
.bestanden li{display:flex;justify-content:space-between;align-items:center;gap:10px}
.bestanden span{overflow-wrap:anywhere;min-width:0}
.klantrij{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:12px 14px;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.klantrij:first-child{border-top:0}
.klantrij:hover{background:var(--surface-2)}
.klantrij .kl{font-weight:600;overflow-wrap:anywhere}
.klantrij .wk,.itemkop .wk{color:var(--muted);font-size:14px}
.items{list-style:none;margin:0;padding:0;display:grid}
.item{padding:12px 0;border-top:1px solid var(--line);display:grid;gap:6px;min-width:0}
.item:first-child{border-top:0;padding-top:0}
.itemkop{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px}
.itemkop strong{overflow-wrap:anywhere}
.itemtekst{white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto;font-size:14px;background:var(--surface-2);padding:8px 10px;border-radius:4px}
#f-klant input{width:auto;flex:1 1 180px;border:1px solid var(--line);border-radius:4px;background:var(--surface);padding:7px 9px}
.uitleg{max-width:760px}
.uitleg-tekst{margin:0 0 10px}
#tips .items{margin-top:14px}
.uitleg h1{font-size:30px;line-height:1.1}
.uitleg ol,.uitleg ul{margin:0 0 10px;padding-left:22px;display:grid;gap:6px}
.postacties{display:flex;gap:6px;flex-wrap:wrap}
.toevoegen{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.toevoegen select{flex:1 1 200px;width:auto}
.totalen{display:grid;gap:4px;font-variant-numeric:tabular-nums}
.totalen div{display:flex;justify-content:space-between;gap:12px}
.totalen .groot{font-weight:600}
.totalen .apart{color:var(--muted);font-size:14px}
.melding{background:var(--warn-soft);color:var(--warn);padding:6px 10px;border-radius:4px;font-size:14px;margin-top:6px}
.foutmelding{background:var(--bad-soft);color:var(--bad);padding:8px 10px;border-radius:4px;font-size:14px}
details.vak summary{font:600 18px var(--f-kop);cursor:pointer}
details.vak .velden{margin-top:10px}
.stdpost{display:grid;gap:6px;padding:10px 0;border-top:1px solid var(--line)}
.stdpost:first-child{border-top:0;padding-top:0}
.rechts{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.papier{background:var(--paper);color:var(--paper-ink);font:400 14px/1.3 var(--f-papier);padding:40px clamp(18px,4vw,44px)}
.papier .kopje{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.papier img{width:52px;height:auto;display:block;margin-bottom:12px}
.papier .adres{text-align:right}
.papier h1{font:700 26px/1.15 var(--f-papier);color:var(--paper-head);margin:24px 0 8px}
.papier h2{font:700 17px var(--f-papier);color:var(--paper-head);border-bottom:2px solid var(--paper-head);padding-bottom:2px;margin:22px 0 8px}
.papier p{margin:0 0 8px;white-space:pre-line}
.papier .meta{display:grid;grid-template-columns:110px minmax(0,1fr);gap:0 8px;margin-bottom:14px}
.papier .tabelwrap{overflow-x:auto}
.papier table{border-collapse:collapse;width:100%;min-width:360px}
.papier td{border-bottom:1px solid var(--paper-line);padding:6px 5px;vertical-align:top;font-size:13.5px}
.papier tr.tk td{background:var(--paper-head);color:var(--paper-head-ink);font-weight:700}
.papier tr.tot td{background:var(--paper-soft);font-weight:700}
.papier td.n{width:38px}
.papier td.b{width:112px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.papier ul{margin:3px 0 0 16px;padding:0}
.papier .som td{border:0;padding:2px 5px}
.papier .klein{font-size:12px;color:var(--paper-muted)}
.papier mark{background:var(--paper-mark);color:var(--paper-mark-ink);padding:0 3px}
.papier .slot{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:18px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));z-index:30;background:var(--brand);color:var(--bg);padding:9px 14px;border-radius:5px;display:flex;gap:12px;align-items:center;max-width:calc(100vw - 32px);width:max-content;font-size:14px}
.toast button{background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;font-weight:600;padding:0}
.overlay{position:fixed;inset:0;z-index:20;background:rgba(10,12,16,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.dialoog{background:var(--surface);border-radius:8px;padding:18px;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;display:flex;flex-direction:column;gap:10px}
.dialoog h2{font-size:22px}
.notitie{font-size:13px;color:var(--muted);margin:0}