/* Aktsyn | huisstijl en schil zoals demo v13 (src/00-head.html: thema Steen, licht zijmenu met witte pil, v10/v11).
   Accentkleur per kantoor: --petrol en afgeleiden zet app/js/huisstijl.js uit de kantoorinstelling huisstijl/accent. */
/* IBM Plex, zelf gehost (app/haal-fonts.sh): de app laadt niets van derden */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../vendor/fonts/IBMPlexSans-Regular-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../vendor/fonts/IBMPlexSans-Medium-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../vendor/fonts/IBMPlexSans-SemiBold-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:500;font-display:swap;src:url('../vendor/fonts/IBMPlexSerif-Medium-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:600;font-display:swap;src:url('../vendor/fonts/IBMPlexSerif-SemiBold-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../vendor/fonts/IBMPlexMono-Regular-Latin1.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../vendor/fonts/IBMPlexMono-Medium-Latin1.woff2') format('woff2')}
:root{
  --paper:#F7F6F3; --ink:#262421; --zacht:#6B675F; --haar:#E7E4DD; --haar-s:#D3CEC4;
  --veld:#F0EEE9; --veld-h:#EAE7E1;
  --petrol:#147A8C; --petrol-d:#106473; --ijs:#95C3CB; --ijsvlak:#ECF4F6; --ijsl:#E8F2F4; --acc-on:#D7E5E5; --acc-stroke:#66A9B4;
  --messing:#D9B75B; --messing-l:#F1E7CD; --messing-d:#6F5719;
  --ok:#2E7D5B; --ok-l:#E3F0E9; --err:#B4453A; --err-l:#F6E4E1;
  --side:#E8E5DE; --side-haar:#DCD8CF; --side-z:#8C877D; --side-nav:#3D3A35;
  --r-btn:6px; --r-inp:6px; --r-card:8px; --r:12px;
  --sh:0 1px 2px rgba(38,36,33,.14),0 1px 3px 1px rgba(38,36,33,.07);
  --sh-hi:0 2px 6px rgba(38,36,33,.08),0 14px 36px rgba(38,36,33,.14);
  --sans:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --serif:var(--sans);
  /* oude namen (proef en F2), verwijzen naar de tokens hierboven */
  --inkt:var(--ink); --inkt-zacht:var(--zacht); --accent:var(--petrol); --accent-donker:var(--petrol-d); --accent-tint:var(--ijsl);
  --papier:var(--paper); --wit:#fff; --lijn:var(--haar); --rij:#FBFAF7; --fout:var(--err); --fout-vlak:var(--err-l);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
[hidden]{display:none!important}
#app{min-height:100vh}
body{font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
button,select,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:600;letter-spacing:-.012em}
.mono{font-family:var(--mono);font-size:13px}
.zacht{color:var(--zacht)}
.small{font-size:12.5px}
.sp{flex:1}
.r{text-align:right}

/* Iconen (Lucide), zoals v13 */
svg.g{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.g.s{width:15px;height:15px}
svg.g.xs{width:13px;height:13px}

/* Aanmelden */
.aanmeld{min-height:100vh;display:grid;place-items:center;padding:24px}
.aanmeld-kaart{width:100%;max-width:380px;background:#fff;border-radius:14px;padding:36px 32px;box-shadow:var(--sh-hi)}
.woordmerk{font-family:'IBM Plex Serif',Georgia,serif;font-weight:600;font-size:26px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.woordmerk small{display:block;font-family:var(--sans);font-weight:400;font-size:12px;color:var(--zacht);letter-spacing:0}
.aanmeld p{margin:18px 0 24px;color:var(--zacht)}
.knop{border:none;border-radius:8px;padding:10px 18px;cursor:pointer;background:none}
.knop-hoofd{background:var(--petrol);color:#fff;font-weight:500;width:100%}
.knop-hoofd:hover{background:var(--petrol-d)}
.knop-tekst{color:var(--petrol);padding:6px 8px}
.knop-tekst:hover{text-decoration:underline}
.knop:disabled{opacity:.5;cursor:default}

/* Schil (v13: .app, .side, .brand, .goto, .nitem met witte pil, header.top) */
.schil{display:grid;grid-template-columns:228px 1fr;height:100vh}
.side{background:var(--side);border-right:1px solid var(--side-haar);display:flex;flex-direction:column;min-height:0}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}
.brand b{display:block;font:600 19px/1 'IBM Plex Serif',Georgia,serif;color:var(--ink);letter-spacing:.01em}
.brand small{display:block;font-size:11px;color:var(--side-z);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.goto{white-space:nowrap;margin:4px 14px 10px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;background:#DEDAD2;color:var(--zacht);font-size:13px;width:calc(100% - 28px);text-align:left}
.goto:hover{background:#D9D5CC}
.goto kbd{margin-left:auto;font:11px var(--mono);color:var(--side-z);background:var(--side);padding:1px 6px;border-radius:5px}
.navscroll{flex:1;overflow-y:auto;padding:4px 10px 12px}
.ngroup{margin-top:10px}
.nitem{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;color:var(--side-nav);font-size:13.5px;margin:1px 0}
.nitem:hover{background:#DFDBD3;color:var(--ink)}
.nitem.on{background:#fff;color:var(--petrol-d);font-weight:600;box-shadow:0 1px 2px rgba(38,36,33,.08)}
.nitem.on svg.g{color:var(--petrol)}
.sidefoot{border-top:1px solid var(--side-haar);padding:12px 18px 14px;font-size:11.5px;color:var(--side-z);line-height:1.35}
.sidefoot b{font-weight:600;color:var(--zacht)}
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
header.top{height:58px;display:flex;align-items:center;gap:16px;padding:0 32px;flex:none;background:var(--paper);border-bottom:1px solid var(--haar)}
.crumbs{display:flex;align-items:center;gap:8px;color:var(--zacht);font-size:13px;min-width:0;white-space:nowrap;overflow:hidden}
.crumbs b{color:var(--ink);font-weight:500}
.crumbs .sep{color:#B8BFC4}
.today{font:12px var(--mono);color:var(--zacht);margin-right:6px}
.ibtn{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.ibtn:hover{background:var(--veld)}
.usr{display:flex;align-items:center;gap:9px;padding:4px 10px 4px 4px;border-radius:10px;text-align:left;margin-left:4px}
.usr:hover{background:var(--veld)}
.usr b{display:block;font-weight:500;font-size:13px;line-height:1.2;white-space:nowrap}
.usr span.r{display:block;font-size:11.5px;color:var(--zacht);line-height:1.2;white-space:nowrap;text-align:left}
.usr svg.g{color:var(--zacht)}
.av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:600 11px/1 var(--sans);background:var(--acc-on);color:var(--petrol-d);flex:none}
.inhoud{flex:1;overflow-y:auto}
.page{padding:28px 36px 60px;max-width:1260px;margin:0 auto}
.voet{padding:10px 32px;font-size:12px;color:var(--zacht);border-top:1px solid var(--haar)}

/* Pagina */
.phead{display:flex;align-items:flex-end;gap:24px;margin-bottom:22px}
.phead .t{flex:1;min-width:0}
.phead h1{font:600 28px/1.15 var(--sans);letter-spacing:-.012em}
.lead{color:var(--zacht);margin-top:7px;font-size:14.5px}
.uitleg{color:var(--zacht);margin-bottom:16px}
.laden{color:var(--zacht);padding:8px 0}
.panel{background:#fff;border-radius:var(--r);box-shadow:var(--sh)}
.empty{padding:34px 20px;text-align:center;color:var(--zacht)}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.row{display:flex;align-items:center;gap:10px}
.mb8{margin-bottom:8px}
.mb16{margin-bottom:16px}
.mt16{margin-top:16px}
.m0{margin-top:0}
.inp.smal{max-width:140px}
.modal .fout-tekst{margin-top:12px}
.empty svg.g{width:40px;height:40px;color:var(--ijs);margin-bottom:8px}

/* Knoppen, invoer en keuzes (v13: .btn, .tabs, .seg, .filt, .search, .inp, .tag) */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--petrol);color:#fff;font-weight:500;padding:9px 16px;border-radius:9px;white-space:nowrap;transition:background .15s}
.btn:hover{background:var(--petrol-d)}
.btn:disabled{background:#B9C3C7;cursor:not-allowed}
.btn.sm{padding:6px 12px;font-size:13px}
.btn.licht{background:transparent;color:var(--zacht)}
.btn.licht:hover{background:var(--veld);color:var(--ink)}
.tabs{display:inline-flex;gap:4px;background:var(--veld);padding:4px;border-radius:10px;flex-wrap:wrap}
.tabs button{padding:6px 13px;border-radius:7px;color:var(--zacht);font-weight:500;font-size:13.5px;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs .on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(30,43,51,.08)}
.tabs .c{font:11px var(--mono);color:var(--zacht);margin-left:5px}
.seg{display:inline-flex;background:var(--veld);border-radius:9px;padding:3px;gap:2px}
.seg button{padding:5px 11px;border-radius:7px;font-size:13px;color:var(--zacht);font-weight:500;white-space:nowrap}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(30,43,51,.1)}
.filt{display:inline-flex;align-items:center;gap:6px;background:#fff;box-shadow:var(--sh);border-radius:9px;padding:0 4px 0 11px;font-size:13px;color:var(--zacht)}
.filt select{border:0;background:transparent;padding:7px 4px;outline:0;color:var(--ink);font-weight:500;cursor:pointer;max-width:220px}
.search{display:flex;align-items:center;gap:8px;background:#fff;border-radius:9px;padding:7px 11px;box-shadow:var(--sh);min-width:240px;color:var(--zacht)}
.search input{border:0;outline:0;background:transparent;flex:1;min-width:0;color:var(--ink)}
.inp{width:100%;background:var(--veld);border:0;border-radius:8px;padding:8px 11px;outline:0;min-height:36px}
.inp:hover{background:var(--veld-h)}
.inp:focus{background:#fff;box-shadow:0 0 0 2px var(--petrol)}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;padding:2px 8px;border-radius:6px;background:var(--veld);color:var(--ink);white-space:nowrap;line-height:18px}
.tag.p{background:var(--ijsl);color:var(--petrol-d)}
.tag.ok{background:var(--ok-l);color:var(--ok)}
.tag.err{background:var(--err-l);color:var(--err)}
.tag.m{background:var(--messing-l);color:var(--messing-d)}
.tag.ink{background:var(--ink);color:#fff}
.pchips{display:flex;flex-wrap:wrap;gap:5px}

/* Klantenlijst (v13: .klrow, .kico, .klrow.kind) */
.klrow{display:grid;grid-template-columns:40px minmax(0,1.25fr) minmax(0,1.5fr) 150px;gap:16px;align-items:center;padding:12px 20px;border-top:1px solid var(--haar)}
.panel>.klrow:first-child{border-top:0}
.klrow:hover{background:#FCFBF8}
a.klrow.klik{color:inherit;cursor:pointer}
a.klrow.klik:hover b{color:var(--petrol-d)}
.klrow .nm{min-width:0}
.klrow .nm b{display:block;font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.klrow .nm>span{font-size:12.5px;color:var(--zacht);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.klrow.kind{padding-left:44px;background:#FDFCF9;border-top-style:dashed}
.klrow.kind .kico{width:32px;height:32px;font-size:12px}
.kico{width:38px;height:38px;border-radius:10px;background:var(--ijsvlak);color:var(--petrol-d);display:flex;align-items:center;justify-content:center;font:500 13px var(--sans);flex:none}
.kico.rond{border-radius:50%;font:600 12px var(--sans)}
.kkop{display:flex;gap:18px;align-items:flex-start;margin-bottom:20px}
.kkop .t{flex:1;min-width:0}
.kkop h1{font:600 26px/1.2 var(--sans);letter-spacing:-.012em}
.kico.lg{width:52px;height:52px;font-size:17px;border-radius:13px}
.kico.lg.rond{border-radius:50%}
.row.wrap{flex-wrap:wrap}
.kmeta{color:var(--zacht);font-size:13px;margin-top:5px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.kmeta a,.crumbs a,.relrij b{color:var(--petrol-d)}
.kgrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;align-items:start}
.kgrid .col{display:flex;flex-direction:column;gap:16px;min-width:0}
.kgrid .col .mb16{margin-bottom:0}
.panel .hd{display:flex;align-items:flex-start;gap:12px;justify-content:space-between;padding:14px 20px 10px}
.panel .hd h3{font-size:15px}
.panel .pb{padding:4px 20px 18px}
.prodkaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.prodkaart{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.wfrij{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.4fr) minmax(0,1fr) 100px 110px;gap:12px;align-items:center;padding:9px 20px;border-top:1px solid var(--haar)}
.relrij{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 20px;border-top:1px solid var(--haar);color:inherit}
.relrij:hover{background:#FCFBF8}
.relrij span span{display:block}
.cmdbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;background:var(--paper);padding:10px 0 12px;margin-bottom:6px;border-bottom:1px solid var(--haar)}
.plinfo{display:flex;gap:8px;align-items:flex-start;background:var(--ijsvlak);color:var(--petrol-d);border-radius:10px;padding:10px 14px;margin:10px 0 16px;font-size:13px}
.veld .ro{color:var(--ink);font-size:14px;min-height:36px;display:flex;align-items:center}
.verplicht{color:var(--err)}
.meer{padding:12px 20px;border-top:1px solid var(--haar);color:var(--zacht);font-size:13px;display:flex;gap:12px;align-items:center}

/* Lagen: modal, menu, palet, melding (toast) */
.scrim{position:fixed;inset:0;background:rgba(30,43,51,.34);z-index:60}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:640px;max-width:94vw;max-height:90vh;background:var(--paper);border-radius:16px;z-index:62;box-shadow:var(--sh-hi);display:flex;flex-direction:column}
.modal .mh{padding:22px 26px 12px;display:flex;gap:12px;align-items:flex-start}
.modal .mh h2{font-size:22px;flex:1}
.modal .mb{padding:4px 26px 20px;overflow-y:auto}
.modal .mf{padding:14px 26px 18px;display:flex;gap:12px;align-items:center;border-top:1px solid var(--haar)}
.velden{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.veld{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--zacht)}
.veld.breed{grid-column:1 / -1}
.veld b{font-weight:500;color:var(--ink)}
.veld .seg{align-self:flex-start}
.fout-tekst{color:var(--err);font-size:13px}
.menu{position:fixed;z-index:72;background:#fff;border-radius:12px;box-shadow:var(--sh-hi);padding:8px;width:300px}
.menu .mk{font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--zacht);padding:10px 10px 6px}
.menu .mi{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;cursor:pointer;width:100%;text-align:left}
.menu .mi:hover{background:var(--ijsvlak)}
.menu .mi.on{background:var(--ijsl)}
.menu .mi b{display:block;font-weight:500;font-size:13.5px}
.menu .mi span{font-size:12px;color:var(--zacht);line-height:1.35;display:block}
.palette{position:fixed;left:50%;top:12vh;transform:translateX(-50%);width:640px;max-width:94vw;background:#fff;border-radius:14px;box-shadow:var(--sh-hi);z-index:70;overflow:hidden}
.palette .pq{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--haar);color:var(--zacht)}
.palette .pq input{flex:1;border:0;outline:0;font-size:16px;color:var(--ink)}
.palette .pr{max-height:420px;overflow-y:auto;padding:6px}
.palette .pg{font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--zacht);padding:12px 12px 6px}
.palette .pi{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;cursor:pointer}
.palette .pi.on,.palette .pi:hover{background:var(--ijsvlak)}
.palette .pi small{margin-left:auto;color:var(--zacht);font-size:12px}
.toast{position:fixed;right:24px;bottom:24px;z-index:90;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast div{background:var(--ink);color:#fff;padding:11px 16px 11px 13px;border-radius:10px;box-shadow:var(--sh-hi);display:flex;gap:10px;align-items:center;font-size:13.5px;max-width:440px}
.toast div svg{color:var(--ijs)}
.modal.breed{width:900px}
.ilstappen{display:flex;gap:6px;margin:0 0 14px}
.ilstappen span{font-size:12.5px;padding:4px 10px;border-radius:7px;background:var(--veld);color:var(--zacht)}
.ilstappen span.on{background:var(--petrol);color:#fff}
.ilstappen span.klaar{background:var(--ijsl);color:var(--petrol-d)}
.iltekst{min-height:220px;font-size:12.5px;resize:vertical;white-space:pre}
.iltabel{max-height:46vh;overflow:auto;margin-bottom:10px}
.iltabel .tabel td,.iltabel .tabel th{padding:7px 10px}
.ilteller{display:flex;gap:18px;align-items:center;margin-bottom:10px;font-size:13.5px;flex-wrap:wrap}
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 14px}
.swatch{width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.swatch.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}

/* Tabel (Mijn taken, Medewerkers) en meldingen (proef) */
.tabel{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--sh)}
.tabel th{font-size:12px;font-weight:500;color:var(--zacht);text-align:left;padding:10px 14px;background:#FBFAF7;border-bottom:1px solid var(--haar)}
.tabel td{padding:10px 14px;border-bottom:1px solid var(--haar)}
.tabel tr:last-child td{border-bottom:none}
.label{display:inline-block;white-space:nowrap;font-size:12px;padding:1px 10px;border-radius:6px;background:var(--ok-l);color:var(--ok)}
.label-achter{background:var(--err-l);color:var(--err)}
.melding{border-radius:12px;padding:16px 18px;background:var(--err-l);color:var(--ink);display:flex;gap:16px;align-items:flex-start}
.melding strong{display:block;color:var(--err);margin-bottom:2px}
.melding .knop-tekst{margin-left:auto;white-space:nowrap}
.melding .aftellen{display:block;margin-top:6px;font-size:12px;color:var(--zacht)}

@media (max-width:860px){
  .schil{grid-template-columns:1fr;height:auto}
  .side{flex-direction:row;flex-wrap:wrap;align-items:center}
  .navscroll{display:flex;gap:4px;overflow-x:auto}
  .sidefoot,.goto kbd{display:none}
  header.top{padding:0 16px}
  .kgrid{grid-template-columns:1fr}
  .wfrij{grid-template-columns:1fr 1fr;gap:4px 12px}
  .kkop{gap:12px}
  .today{display:none}
  .page{padding:18px 16px 40px}
  .klrow{grid-template-columns:38px minmax(0,1fr);}
  .klrow>div:nth-child(3),.klrow>div:nth-child(4){display:none}
  .velden{grid-template-columns:1fr}
}