/* VZM Portaal — huisstijl (ontwerpspec juli 2026) */
:root{
  --teal:#0C5560; --teal-dark:#0C3C48; --teal-mid:#0F6E7C;
  --gold:#F2B33C; --ink:#17323A; --muted:#6A7E81;
  --line:#E3ECEC; --card-line:#D7E2E2;
  --bg:#E7ECEC; --panel:#fff; --soft:#F4F8F8;
  --green:#2F6B41; --amber:#8A6412; --red:#A6382A; --purple:#6A4E8A;
  /* rolkleuren (spec §6) */
  --role-frontdesk:#0F6E7C; --role-sales:#2F6B41; --role-admin:#8A6412; --role-directie:#6A4E8A; --role-beheerder:#F2B33C;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);font-family:'Work Sans',Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Montserrat',sans-serif;margin:0;letter-spacing:-0.01em}
code,.mono{font-family:'IBM Plex Mono','Courier New',monospace}
a{color:var(--teal-mid);text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px;padding:9px 11px;border:1px solid #cdd9da;border-radius:8px;background:#fff;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal-mid);box-shadow:0 0 0 3px rgba(15,110,124,.12)}
label{font-size:12px;font-weight:600;color:var(--muted);display:block;margin:0 0 4px}
.hidden{display:none!important}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(165deg,#0C3C48 0%,#0C5560 38%,#3f8f99 66%,#e7d8bd 100%)}
.login-card{background:#fff;border-radius:18px;padding:32px 30px;width:100%;max-width:380px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.login-card .logo{display:block;height:74px;margin:0 auto 14px}
.login-card .brand{font-family:'Montserrat';font-weight:800;font-size:26px;color:var(--teal-dark)}
.login-card .tag{font-size:12px;color:var(--muted);margin:2px 0 22px;letter-spacing:.08em;text-transform:uppercase}
.login-card .field{margin-bottom:14px}
.login-err{background:#fdecec;color:var(--red);font-size:13px;padding:9px 12px;border-radius:8px;margin-bottom:12px}
.btn{background:var(--gold);color:var(--ink);border:none;padding:10px 16px;border-radius:9px;font-size:14px;font-weight:700}
.btn:hover{filter:brightness(.96)}
.btn.block{width:100%}
/* Ghost-knop: standaard leesbaar op een lichte achtergrond (o.a. klantportaal). */
.btn.ghost{background:transparent;color:var(--teal-dark);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--soft);filter:none}
/* In de donkere bovenbalk juist licht-op-donker. */
.topbar .btn.ghost{background:rgba(255,255,255,.14);color:#EAF3F3;border:none}
.topbar .btn.ghost:hover{background:rgba(255,255,255,.24)}
.btn.sec{background:var(--soft);color:var(--teal-dark);border:1px solid var(--line)}
.btn.sm{padding:6px 11px;font-size:12.5px;border-radius:7px}
.demo-hint{margin-top:18px;font-size:11.5px;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);padding-top:12px}
.demo-hint b{color:var(--ink)}

/* ---------- Shell ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:210px;background:var(--teal-dark);color:#dceaeb;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar .logo{font-family:'Montserrat';font-weight:800;font-size:20px;color:#fff;padding:18px 18px 6px}
.sidebar .logo small{display:block;font-size:10px;font-weight:600;letter-spacing:.18em;color:#7FB0B6;text-transform:uppercase;margin-top:2px}
.nav{margin-top:12px;flex:1;overflow-y:auto;padding-bottom:10px}
/* Tweelaags navigatie (spec §5): groep bovenin, onderdelen daaronder */
.nav .grp{display:flex;align-items:center;gap:10px;color:#c5dadb;padding:9px 16px;margin:2px 10px;font-size:13.5px;font-weight:600;border-radius:9px;cursor:pointer;border:1px solid transparent}
.nav .grp .ic{width:18px;text-align:center;opacity:.9}
.nav .grp .cnt{margin-left:auto;background:var(--gold);color:var(--ink);font-size:10.5px;font-weight:800;min-width:18px;height:18px;line-height:18px;text-align:center;border-radius:9px;padding:0 5px}
.nav .grp:hover{background:rgba(255,255,255,.06);color:#fff}
.nav .grp.active{background:var(--teal-dark);color:#fff;border-color:rgba(255,255,255,.14);font-weight:700}
.nav .seg{margin:2px 12px 8px;background:rgba(255,255,255,.05);border-radius:10px;padding:4px}
.nav .seg a{display:flex;align-items:center;gap:9px;color:#bcd3d5;padding:8px 12px;font-size:13px;font-weight:500;border-radius:8px}
.nav .seg a .ic{width:16px;text-align:center;opacity:.8;font-size:12.5px}
.nav .seg a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav .seg a.active{background:#fff;color:var(--teal-dark);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.sidebar .foot{padding:12px 18px;font-size:11px;color:#6f9296;border-top:1px solid rgba(255,255,255,.08)}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{background:var(--teal);color:#EAF3F3;padding:11px 22px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20}
.topbar .role{background:var(--gold);color:var(--ink);font-size:12px;font-weight:700;padding:4px 11px;border-radius:20px;display:inline-flex;align-items:center;gap:6px}
.topbar .role.r-frontdesk{background:var(--role-frontdesk);color:#fff}
.topbar .role.r-sales{background:var(--role-sales);color:#fff}
.topbar .role.r-administratie{background:var(--role-admin);color:#fff}
.topbar .role.r-directie{background:var(--role-directie);color:#fff}
.topbar .role.r-beheerder{background:var(--role-beheerder);color:var(--ink)}
.topbar .who{font-size:13px}
.topbar .spacer{flex:1}
.content{padding:24px 26px;max-width:1180px;width:100%}

/* ---------- Common ---------- */
.page-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.page-head h1{font-size:24px;color:var(--teal-dark)}
.page-head .spacer{flex:1}
.search{max-width:280px}
.card{background:var(--panel);border:1px solid var(--card-line);border-radius:16px;padding:0;overflow:hidden}
.card.pad{padding:20px 22px}
/* Informatieblok (spec §3) */
.info-block{background:var(--soft);border-left:4px solid var(--teal-mid);border-radius:8px;padding:13px 16px}
/* Klikbare kaart licht 2px op (spec §7) */
.card.hover:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(12,60,72,.10);transition:transform .16s,box-shadow .16s}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--line);background:var(--soft)}
td{padding:11px 14px;border-bottom:1px solid #eef4f4}
tr:last-child td{border-bottom:none}
tbody tr{cursor:pointer}
tbody tr:hover{background:#f7fbfb}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;background:#E4F0F1;color:var(--teal)}
.pill.green{background:#E7F0E9;color:var(--green)} .pill.amber{background:#FBEFD0;color:var(--amber)}
.pill.red{background:#F8DAD5;color:var(--red)} .pill.grey{background:#EAF1F1;color:#4C6165}
.pill.purple{background:#EEE7F3;color:var(--purple)}
/* Actiecode-badge: monospace, apart van statuslabels (spec §4) */
.codebadge{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:5px;background:#EAF1F1;color:#4C6165}
.muted{color:var(--muted)}
.empty{padding:40px;text-align:center;color:var(--muted);font-size:14px}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.kpi .n{font-family:'Montserrat';font-weight:800;font-size:28px;color:var(--teal-dark)}
.kpi .l{font-size:12.5px;color:var(--muted);margin-top:2px}
.kpi.accent{background:var(--teal-dark);border-color:var(--teal-dark)}
.kpi.accent .n{color:#fff} .kpi.accent .l{color:#9cc0c4}
.kpi.warn .n{color:var(--amber)}

/* Drawer / detail */
.overlay{position:fixed;inset:0;background:rgba(12,40,50,.42);z-index:50;display:flex;justify-content:center;align-items:center;padding:24px;animation:overlayIn .2s ease}
/* Gecentreerd, ruim paneel; versleepbaar aan de kopbalk en schaalbaar rechtsonder. */
.drawer{width:min(920px,96vw);max-height:92vh;background:#fff;border-radius:14px;overflow:auto;box-shadow:0 26px 64px rgba(0,0,0,.30);animation:sheetIn .24s cubic-bezier(.2,.8,.2,1);resize:both;min-width:360px;min-height:220px}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
@keyframes sheetIn{from{transform:translateY(16px) scale(.985);opacity:.4}to{transform:none;opacity:1}}
.drawer .dh{position:sticky;top:0;z-index:2;background:var(--teal-dark);color:#fff;padding:15px 20px;display:flex;align-items:center;gap:12px;cursor:move;user-select:none;border-radius:14px 14px 0 0}
.drawer .dh h2{font-size:18px}
.drawer .dh .spacer{flex:1}
.drawer .db{padding:20px}
.drawer .grip{position:sticky;bottom:0;margin-top:-2px;text-align:right;font-size:12px;color:var(--muted);padding:2px 10px;pointer-events:none}
.x{background:rgba(255,255,255,.16);color:#fff;border:none;width:30px;height:30px;border-radius:8px;font-size:16px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:13.5px;margin:10px 0}
.kv .k{color:var(--muted);font-weight:600}
.section-t{font-family:'Montserrat';font-weight:700;font-size:13px;color:var(--teal-mid);text-transform:uppercase;letter-spacing:.04em;margin:22px 0 8px;padding-bottom:5px;border-bottom:2px solid #E4D9BE}
.sub-list{font-size:13px}
.sub-list .row{padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin-bottom:7px;background:var(--soft)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
.form-actions{display:flex;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--teal-dark);color:#fff;padding:11px 20px;border-radius:10px;font-size:13.5px;z-index:80;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.link-btn{background:none;border:none;color:var(--teal-mid);font-weight:600;font-size:13px;padding:0}
.checkline{display:flex;align-items:center;gap:8px}
.checkline input{width:auto}
.nav-toggle{display:none;background:transparent;border:none;color:#EAF3F3;font-size:22px;line-height:1;cursor:pointer;padding:2px 8px 2px 0}
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:55}
.nav-backdrop.show{display:block}
@media(max-width:720px){
  .sidebar{position:fixed;top:0;bottom:0;left:-260px;z-index:60;transition:left .2s;box-shadow:0 0 40px rgba(0,0,0,.3)} .sidebar.open{left:0}
  .form-grid{grid-template-columns:1fr} .kv{grid-template-columns:110px 1fr}
  .nav-toggle{display:inline-block}
  .topbar{flex-wrap:wrap;gap:6px 10px;padding:9px 12px}
  .topbar .dim-name{display:none}
  .content{padding:16px 14px}
  /* Brede lijsttabellen horizontaal kunnen scrollen i.p.v. afkappen. */
  .card{overflow-x:auto}
  .card table{min-width:560px}
}

/* ---------- Klantportaal als webapp (mobiel-eerst) ---------- */
.pt-appbar{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid #e6eeee;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top));display:flex;align-items:center;gap:12px;box-shadow:0 2px 10px rgba(12,60,72,.06)}
.pt-appbar .app-logo{height:34px;flex:none}
.pt-appbar .pt-role{background:var(--gold);color:var(--ink);font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:20px}
.pt-appbar .pt-spacer{flex:1}
.pt-appbar .pt-logout{background:#eef4f4;color:var(--teal-dark);border:none;border-radius:20px;padding:6px 13px;font-size:12.5px;font-weight:600;cursor:pointer}
.pt-hero{background:linear-gradient(150deg,#0C5560,#0F6E7C 55%,#3f8f99);color:#fff;border-radius:0 0 20px 20px;padding:18px 18px 22px;margin-bottom:-8px}
.pt-hero .greet{font-family:'Montserrat';font-weight:800;font-size:22px;line-height:1.15}
.pt-hero .sub{font-size:13px;opacity:.9;margin-top:3px}
.pt-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;padding:14px 0 2px}
.pt-tile{position:relative;background:#fff;border:1px solid #e6eeee;border-radius:14px;padding:12px 8px;text-align:center;cursor:pointer;transition:transform .12s,box-shadow .12s;user-select:none}
.pt-tile:active{transform:scale(.96)}
.pt-tile:hover{box-shadow:0 6px 16px rgba(12,60,72,.10)}
.pt-tile .ic{font-size:22px;line-height:1}
.pt-tile .lb{font-size:11.5px;font-weight:600;color:var(--teal-dark);margin-top:5px}
.pt-tile .badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;line-height:20px;padding:0 6px;border-radius:11px;background:#d64545;color:#fff;font-size:11px;font-weight:800;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.pt-content{max-width:760px;margin:0 auto;padding:0 16px 40px;padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.pt-content .card{scroll-margin-top:82px}
.pt-installhint{font-size:12px;color:#fff;opacity:.92;margin-top:10px;background:rgba(255,255,255,.14);border-radius:10px;padding:8px 11px;line-height:1.5}
.pt-acc{border:1px solid #e6eeee;border-radius:12px;margin:8px 0;overflow:hidden;background:#fbfdfd}
.pt-acc>summary{list-style:none;cursor:pointer;padding:12px 14px;font-weight:600;font-size:13.5px;color:var(--teal-dark);display:flex;align-items:center;gap:8px;user-select:none}
.pt-acc>summary::-webkit-details-marker{display:none}
.pt-acc>summary .chev{margin-left:auto;color:#7c9195;transition:transform .2s;font-size:12px}
.pt-acc[open]>summary .chev{transform:rotate(180deg)}
.pt-acc>summary .cnt{background:var(--gold);color:var(--ink);font-size:11px;font-weight:800;border-radius:11px;padding:1px 8px}
.pt-acc-body{padding:4px 12px 12px}