/* ============================================================
   PackUp CRM — stylesheet
   1:1 op PackUp_Masterspec_1.html
   · alleen paars + neutraal · signaalkleur ALLEEN als ink in eigen lichte pill
   · geen kantlijn links · geen schaduw voor diepte (alleen frames)
   · font-weight nooit boven 600 · squircle radius 11
   ============================================================ */

:root{
  /* neutraal */
  --s0:#EFEFF1; --s1:#F7F7F8; --s2:#FFFFFF;
  --tx:#1D1D1F; --tx2:#5F5F63; --tx3:#9A9A9E;
  --bd:#E3E3E5; --bd2:#CFCFD3; --hair:#ECECEE;
  /* radii */
  --r-xs:8px; --r-sm:11px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-pill:999px;
  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.22s;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  /* paars */
  --brand:#7342F4; --brand-bg:#EEEDFE; --brand-ink:#3C3489; --brand-bd:#AFA9EC; --outline:#D9D3FB;
  /* signaal — alleen ink in eigen licht vlak */
  --ok:#3B6D11; --ok-bg:#DFF6D0; --ok-bd:#C2FFAD;
  --warn:#B4560E; --warn-bg:#FBEBDD;
  --err:#A32D2D; --err-bg:#FCEBEB;
}

*{margin:0;padding:0;box-sizing:border-box}
b,strong{font-weight:600}
html,body{height:100%}
body{
  font-family:var(--font); font-size:13px; line-height:1.45; letter-spacing:-.014em;
  color:var(--tx); background:var(--s0); -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font:inherit;letter-spacing:inherit;color:inherit}
a{color:var(--brand-ink);text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:99px;border:3px solid transparent;background-clip:content-box}

/* de diagonale lichtbaan — hoort op ELK paars vlak */
.baan{position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 60%);pointer-events:none}

/* ============================================================
   LOGIN
   ============================================================ */
.login{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:var(--s0);padding:24px}
.login-kaart{width:100%;max-width:380px;background:var(--s2);border:.5px solid var(--bd);border-radius:var(--r-lg);padding:30px 28px}
.login-logo{font-size:19px;font-weight:500;letter-spacing:-.02em;margin-bottom:4px}
.login-logo b{font-weight:600}
.login-sub{font-size:12.5px;color:var(--tx2);line-height:1.5;margin-bottom:22px}

/* ============================================================
   APP-FRAME
   ============================================================ */
.app{display:none;min-height:100vh}
.app.actief{display:flex}

/* zijnav — volle paarse drager met lichtbaan (planner-patroon) */
.nav{
  width:196px;flex:none;background:var(--brand);position:relative;color:#fff;
  padding:16px 12px;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.nav::before{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(255,255,255,.12),transparent 45%);pointer-events:none}
.nav-logo{position:relative;font-size:15.5px;font-weight:500;letter-spacing:-.02em;padding:3px 7px 18px}
.nav-logo b{font-weight:600}
.nav-item{
  position:relative;display:flex;align-items:center;gap:9px;width:100%;
  font-size:11.5px;font-weight:500;color:rgba(255,255,255,.72);
  background:none;border:0;cursor:pointer;padding:8px 9px;border-radius:9px;margin-bottom:1px;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);text-align:left;
}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-item.on{background:rgba(255,255,255,.16);color:#fff}
.nav-item .ic{width:15px;height:15px;flex:none}
.nav-tel{margin-left:auto;font-size:10px;font-weight:600;background:rgba(255,255,255,.2);border-radius:var(--r-pill);padding:1px 7px;font-variant-numeric:tabular-nums}
.nav-voet{position:relative;margin-top:auto;border-top:1px solid rgba(255,255,255,.14);padding-top:11px}
.nav-mij{display:flex;align-items:center;gap:8px;font-size:11.5px;color:rgba(255,255,255,.9);padding:2px 4px 9px}
.nav-mij .av{width:24px;height:24px;border-radius:var(--r-xs);background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex:none}
.nav-mij .mb{font-size:9.5px;color:rgba(255,255,255,.6)}
.nav-uit{width:100%;font-size:11px;font-weight:500;color:rgba(255,255,255,.78);background:rgba(255,255,255,.1);border:0;border-radius:9px;padding:7px 9px;cursor:pointer;transition:background var(--dur) var(--ease)}
.nav-uit:hover{background:rgba(255,255,255,.18)}

/* hoofdgebied */
.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--s1)}
.top{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  padding:12px 20px;background:var(--s2);border-bottom:.5px solid var(--bd);
}
.top h1{font-size:16px;font-weight:600;letter-spacing:-.02em}
.top .subt{font-size:11px;color:var(--tx3)}
.top-rechts{margin-left:auto;display:flex;align-items:center;gap:9px}
.pagina{padding:16px 20px 60px;display:flex;flex-direction:column;gap:12px}
.tab{display:none}
.tab.on{display:flex;flex-direction:column;gap:12px}

/* zoek */
.zoek{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx3);background:var(--s1);border:.5px solid var(--bd);border-radius:var(--r-pill);padding:6px 12px}
.zoek input{border:0;background:none;outline:none;width:150px;font-size:11.5px;color:var(--tx)}
.zoek input::placeholder{color:var(--tx3)}
.zoek .ic{width:13px;height:13px;flex:none}

/* ============================================================
   KNOPPEN — masterspec §3
   ↗ diagonaal (M7 17L17 7) is default. → is verboden.
   ============================================================ */
.btn{ /* primair gevuld, pijl in eigen squircle-subframe */
  display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:-.01em;
  color:#fff;background:var(--brand);border:0;border-radius:var(--r-sm);padding:9px 11px 9px 14px;
  cursor:pointer;position:relative;overflow:hidden;transition:filter var(--dur) var(--ease)
}
.btn:hover{filter:brightness(1.07)}
.btn .sq{width:22px;height:22px;border-radius:var(--r-xs);background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;flex:none;position:relative}
.btn .sq svg{width:13px;height:13px}
.btn-pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#fff;background:var(--brand);border:0;border-radius:var(--r-pill);padding:8px 15px;cursor:pointer;transition:filter var(--dur) var(--ease)}
.btn-pill:hover{filter:brightness(1.07)}
.btn-out{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--brand-ink);background:var(--s2);border:1px solid var(--outline);border-radius:var(--r-sm);padding:8px 13px;cursor:pointer;transition:background var(--dur) var(--ease)}
.btn-out:hover{background:var(--brand-bg)}
.chip-btn{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--tx2);background:var(--s2);border:.5px solid var(--bd);border-radius:var(--r-pill);padding:6px 12px;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.chip-btn:hover{background:var(--brand-bg);color:var(--brand-ink);border-color:transparent}
.btn-klein{font-size:11.5px;font-weight:500;color:#fff;background:var(--brand);border:0;border-radius:9px;padding:6px 13px;cursor:pointer}
.btn-circ{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;position:relative;overflow:hidden}
.btn-circ svg{width:15px;height:15px;position:relative}
.btn-sq{width:34px;height:34px;border-radius:var(--r-sm);background:var(--brand);color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.btn-vol{width:100%;justify-content:center;padding:11px 14px}

/* ga-pijl in een rij (licht paars vlak, paarse ink) */
.ga{width:24px;height:24px;border-radius:var(--r-xs);background:var(--brand-bg);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.ga svg{width:13px;height:13px}
.ga.vol{background:var(--brand);color:#fff}

/* ============================================================
   VELDEN — masterspec §4
   ============================================================ */
.fld{display:flex;flex-direction:column;gap:5px;width:100%}
.fld label,.flab{font-size:11px;font-weight:500;color:var(--tx2)}
.inp{
  width:100%;background:var(--s2);border:1px solid var(--bd);border-radius:var(--r-sm);
  padding:9px 12px;font-size:12.5px;min-height:38px;outline:none;color:var(--tx);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)
}
.inp::placeholder{color:var(--tx3)}
.inp:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}
.inp.soft{background:var(--s1);border-color:transparent}
textarea.inp{min-height:56px;resize:vertical;line-height:1.5}
select.inp{cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9A9E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px;padding-right:30px}

/* segmented — masterspec §5 */
.seg{display:inline-flex;background:var(--s0);border-radius:var(--r-pill);padding:3px;gap:2px}
.seg button{border:0;background:none;cursor:pointer;font-size:11px;font-weight:500;color:var(--tx2);padding:6px 12px;border-radius:var(--r-pill);transition:all var(--dur) var(--ease)}
.seg button.on{background:var(--s2);color:var(--tx);box-shadow:0 1px 2px rgba(29,29,31,.06)}

/* switch */
.sw{width:42px;height:25px;border-radius:var(--r-pill);background:var(--brand);padding:2.5px;display:flex;justify-content:flex-end;cursor:pointer;flex:none;transition:background var(--dur) var(--ease)}
.sw.off{background:var(--bd2);justify-content:flex-start}
.sw i{width:20px;height:20px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--brand)}
.sw i svg{width:11px;height:11px}
.sw.off i svg{display:none}
.sw-rij{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--tx2);cursor:pointer}

/* ============================================================
   PILLS & STATUS — masterspec §5
   signaalkleur bestaat ALLEEN als ink binnen eigen lichte pill
   ============================================================ */
.pil{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap}
.pil svg{width:11px;height:11px}
.pil-n{background:var(--s0);color:var(--tx2)}
.pil-brand{background:var(--brand-bg);color:var(--brand-ink)}
.pil-ok{background:var(--ok-bg);color:var(--ok)}
.pil-warn{background:var(--warn-bg);color:var(--warn)}
.pil-err{background:var(--err-bg);color:var(--err)}

/* ============================================================
   KPI — masterspec §6
   ============================================================ */
.kpi-rij{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{background:var(--s2);border:.5px solid var(--bd);border-radius:var(--r-md);padding:12px 14px;position:relative}
.kpi.ring{box-shadow:0 0 0 1.5px var(--brand-bd);border-color:transparent}
.kpi-ic{width:30px;height:30px;border-radius:var(--r-xs);background:var(--brand-bg);color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.kpi-ic svg{width:15px;height:15px}
.kpi-lab{font-size:10.5px;color:var(--tx3)}
.kpi-val{font-size:22px;font-weight:600;letter-spacing:-.03em;color:var(--brand);font-variant-numeric:tabular-nums;margin-top:2px}
.kpi-sub{font-size:9.5px;color:var(--tx3)}
.kpi-bar{height:5px;border-radius:3px;background:var(--s0);margin-top:9px;overflow:hidden}
.kpi-bar span{display:block;height:100%;background:var(--brand);border-radius:3px}

/* ============================================================
   BLOKKEN & LIJSTEN — masterspec §6
   witte rijen op grijze groep, 6px lucht, NOOIT kantlijn links
   ============================================================ */
.blok{background:var(--s2);border:.5px solid var(--bd);border-radius:var(--r-md);padding:13px 15px}
.blok-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.blok-t{font-size:12.5px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:7px}
.blok-t .telt{font-size:10px;font-weight:600;background:var(--s0);color:var(--tx2);border-radius:var(--r-pill);padding:1px 7px;font-variant-numeric:tabular-nums}

.groep{background:var(--s1);border-radius:var(--r-md);padding:6px;display:flex;flex-direction:column;gap:6px}
.rij{
  display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--s2);
  border-radius:var(--r-sm);box-shadow:0 0 0 .5px var(--bd);cursor:pointer;
  transition:box-shadow var(--dur) var(--ease)
}
.rij:hover{box-shadow:0 0 0 1.5px var(--brand-bd)}
.rij.ring-ok{box-shadow:0 0 0 1.5px var(--ok-bd)}
.rij.ring-brand{box-shadow:0 0 0 1.5px var(--brand-bd)}
.anker{width:34px;height:34px;border-radius:var(--r-xs);background:var(--s0);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;line-height:1.05}
.anker b{font-size:8px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.04em}
.anker i{font-style:normal;font-size:13px;font-weight:600;letter-spacing:-.02em}
.anker.brand{background:var(--brand-bg)}
.anker.brand b{color:var(--brand-ink);opacity:.7}
.anker.brand i{color:var(--brand-ink)}
.rij-mid{flex:1;min-width:0}
.rij-t{font-size:12.5px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rij-s{font-size:11px;color:var(--tx3);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:1px}
.rij-acties{display:flex;align-items:center;gap:6px;flex:none}

/* tabelrij (masterspec .plrow — geen side-borders, alleen hairline boven) */
.trij{display:grid;align-items:center;gap:12px;padding:9px 4px;border-top:.5px solid var(--hair);font-size:11.5px}
.trij.head{border-top:0;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);padding-bottom:6px}
.trij .nm{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--tx);min-width:0}
.trij .nm b{font-weight:600}
.trij.klik{cursor:pointer;border-radius:var(--r-xs)}
.trij.klik:hover{background:var(--s1)}
.mono{font-variant-numeric:tabular-nums}
.knip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* mini-stats in een rij */
.stat{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--tx3);font-variant-numeric:tabular-nums}
.stat svg{width:11px;height:11px}
.stat.brand{color:var(--brand-ink)}

/* avatar */
.av{width:26px;height:26px;border-radius:var(--r-xs);background:var(--brand-bg);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex:none;letter-spacing:0}
.av.rond{border-radius:50%}
.av.grijs{background:var(--s0);color:var(--tx2)}

/* leeg */
.leeg{font-size:12px;color:var(--tx3);text-align:center;padding:26px 12px;background:var(--s2);border:.5px solid var(--bd);border-radius:var(--r-md)}
.noot{background:var(--brand-bg);border-radius:var(--r-md);padding:13px 16px;font-size:12.5px;color:var(--brand-ink);line-height:1.5}

/* ============================================================
   PIPELINE — kanban
   ============================================================ */
.pipe-balk{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(214px,1fr);gap:10px;overflow-x:auto;padding-bottom:8px;align-items:start}
.kolom{background:var(--s1);border-radius:var(--r-md);padding:6px;display:flex;flex-direction:column;gap:6px;min-height:120px;transition:box-shadow var(--dur) var(--ease)}
.kolom.drop{box-shadow:0 0 0 1.5px var(--brand-bd)}
.kolom-kop{display:flex;align-items:center;justify-content:space-between;padding:5px 7px 2px}
.kolom-t{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3)}
.kolom-telt{font-size:9.5px;font-weight:600;color:var(--tx2);background:var(--s0);border-radius:var(--r-pill);padding:1px 7px;font-variant-numeric:tabular-nums}
.kaart{
  background:var(--s2);border-radius:var(--r-sm);box-shadow:0 0 0 .5px var(--bd);
  padding:10px 11px;cursor:pointer;transition:box-shadow var(--dur) var(--ease)
}
.kaart:hover{box-shadow:0 0 0 1.5px var(--brand-bd)}
.kaart.warm{box-shadow:0 0 0 1.5px var(--brand-bd)}
.kaart.sleept{opacity:.4}
.kaart-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.kaart-t{font-size:12.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.kaart-s{font-size:10.5px;color:var(--tx3);margin-top:1px}
.kaart-voet{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}
.kaart-stats{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.kolom-add{
  font-size:11px;font-weight:500;color:var(--tx3);background:none;border:0;
  padding:7px;border-radius:var(--r-sm);cursor:pointer;text-align:left;transition:all var(--dur) var(--ease)
}
.kolom-add:hover{background:var(--brand-bg);color:var(--brand-ink)}

/* ============================================================
   DETAIL — slide-over
   ============================================================ */
.dim{position:fixed;inset:0;background:rgba(29,29,31,.22);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);z-index:90}
.dim.open{opacity:1;pointer-events:auto}
.detail{
  position:fixed;top:0;right:0;bottom:0;width:min(660px,94vw);background:var(--s1);
  z-index:100;transform:translateX(100%);transition:transform .3s var(--ease);
  display:flex;flex-direction:column;border-left:.5px solid var(--bd)
}
.detail.open{transform:none}
.detail-kop{position:relative;background:var(--brand);color:#fff;padding:16px 18px;overflow:hidden;flex:none}
.detail-kop h2{position:relative;font-size:18px;font-weight:600;letter-spacing:-.025em;display:flex;align-items:center;gap:9px}
.detail-kop .sub{position:relative;font-size:11.5px;color:rgba(255,255,255,.78);margin-top:3px}
.detail-sluit{position:absolute;top:14px;right:14px;z-index:2;width:28px;height:28px;border-radius:var(--r-xs);background:rgba(255,255,255,.18);border:0;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.detail-sluit svg{width:13px;height:13px}
.detail-body{flex:1;overflow-y:auto;padding:14px 18px 60px;display:flex;flex-direction:column;gap:12px}

/* fase-balk */
.fasebalk{display:flex;gap:4px}
.fs{flex:1;min-width:0}
.fs-streep{height:4px;border-radius:2px;background:var(--s0)}
.fs.gedaan .fs-streep{background:var(--brand-bd)}
.fs.nu .fs-streep{background:var(--brand)}
.fs-nm{font-size:9px;color:var(--tx3);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs.nu .fs-nm{color:var(--brand-ink);font-weight:600}

/* feiten */
.feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.feit{background:var(--s2);border:.5px solid var(--bd);border-radius:var(--r-md);padding:10px 12px}
.feit-l{font-size:10px;color:var(--tx3)}
.feit-w{font-size:12.5px;font-weight:500;margin-top:2px;display:flex;align-items:center;gap:7px}

/* tabs */
.dtabs{display:inline-flex;background:var(--s0);border-radius:var(--r-pill);padding:3px;gap:2px;align-self:flex-start}
.dtabs button{border:0;background:none;cursor:pointer;font-size:11px;font-weight:500;color:var(--tx2);padding:6px 14px;border-radius:var(--r-pill);transition:all var(--dur) var(--ease)}
.dtabs button.on{background:var(--s2);color:var(--tx);box-shadow:0 1px 2px rgba(29,29,31,.06)}

/* engagement-blok */
.eng-rij{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx2);padding:5px 0;border-top:.5px solid var(--hair)}
.eng-rij:first-of-type{border-top:0}
.eng-rij .ic{width:22px;height:22px;border-radius:var(--r-xs);background:var(--brand-bg);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
.eng-rij .ic svg{width:12px;height:12px}
.eng-rij b{color:var(--tx)}
.eng-sub{font-size:10.5px;color:var(--tx3);padding:0 0 4px 30px}
.eng-sub b{color:var(--tx2);font-weight:500}

/* dossier */
.dos{background:var(--s2);border:.5px solid var(--bd);border-radius:var(--r-md);padding:13px 15px}
.dos-kop{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);margin-bottom:7px}
.dos p{font-size:12.5px;color:var(--tx2);line-height:1.55}
.dos ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.dos li{font-size:12.5px;color:var(--tx2);line-height:1.5;padding-left:15px;position:relative}
.dos li::before{content:"";position:absolute;left:2px;top:7px;width:4px;height:4px;border-radius:50%;background:var(--brand-bd)}
.dos-contact{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:.5px solid var(--hair)}
.dos-contact:first-of-type{border-top:0}
.dos-contact .info{flex:1;min-width:0}
.dos-contact .nm{font-size:12px;font-weight:600}
.dos-contact .rl{font-size:11px;color:var(--tx2)}
.dos-contact .mt{font-size:10.5px;color:var(--tx3);margin-top:1px}

/* compose */
.comp-rij{display:flex;align-items:center;gap:10px;border-top:.5px solid var(--hair);padding:7px 0}
.comp-rij:first-child{border-top:0}
.comp-rij>label{font-size:11px;font-weight:500;color:var(--tx3);width:64px;flex:none}
.comp-rij input{flex:1;border:0;outline:none;background:none;font-size:12.5px;min-width:0}
.ontv{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1}
.ontv-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;background:var(--brand-bg);color:var(--brand-ink);border-radius:var(--r-pill);padding:4px 10px;cursor:pointer;font-weight:500}
.ontv-chip input{accent-color:var(--brand);width:12px;height:12px}
.ontv-chip .m{color:var(--brand-ink);opacity:.65}
.ontv-chip.uit{background:var(--s0);color:var(--tx3)}
.ontv-chip.uit .m{color:var(--tx3)}
.comp-txt{width:100%;min-height:110px;border:0;outline:none;background:none;font-size:12.5px;line-height:1.6;resize:vertical;padding:9px 0}
.ht{background:var(--s1);border-radius:var(--r-sm);padding:11px 13px;font-size:11px;color:var(--tx2);line-height:1.6}
.ht-nm{font-size:12px;font-weight:600;color:var(--tx)}
.ht-rij{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}
.ht-rij span{display:inline-flex;align-items:center;gap:5px}
.ht-rij svg{width:12px;height:12px;color:var(--tx3);flex:none}
.ht-logo{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--brand-ink);margin-top:8px}
.comp-voet{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:.5px solid var(--hair);padding-top:11px}

/* samenvatting */
.sv-rij{display:flex;gap:12px;font-size:12px;padding:7px 0;border-top:.5px solid var(--hair)}
.sv-rij:first-child{border-top:0}
.sv-tijd{width:120px;flex:none;color:var(--tx3);font-size:11px}
.sv-tekst{color:var(--tx2)}

/* ============================================================
   MODAL
   ============================================================ */
.modal-dim{position:fixed;inset:0;background:rgba(29,29,31,.22);backdrop-filter:blur(2px);z-index:150;display:none;align-items:center;justify-content:center;padding:24px}
.modal-dim.open{display:flex}
.modal{width:100%;max-width:400px;background:var(--s2);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:12px;border:.5px solid var(--bd)}
.modal h2{font-size:16px;font-weight:600;letter-spacing:-.02em}
.modal-knoppen{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}

/* ============================================================
   CLICKS-PANEEL (rechtsboven)
   ============================================================ */
.klik-wrap{position:relative}
.klik-menu{
  position:absolute;top:calc(100% + 8px);right:0;width:320px;max-height:60vh;overflow-y:auto;
  background:var(--s2);border:.5px solid var(--bd);border-radius:var(--r-md);padding:6px;
  box-shadow:0 8px 24px rgba(29,29,31,.1);display:none;z-index:60
}
.klik-menu.open{display:block}
.klik-kop{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);padding:7px 9px 5px}
.klik-rij{display:flex;gap:9px;align-items:flex-start;padding:8px 9px;border-radius:var(--r-xs);cursor:pointer;font-size:11.5px;color:var(--tx2);transition:background var(--dur) var(--ease)}
.klik-rij:hover{background:var(--s1)}
.klik-rij b{color:var(--tx)}
.klik-rij .ic{width:22px;height:22px;border-radius:var(--r-xs);background:var(--brand-bg);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
.klik-rij .ic svg{width:12px;height:12px}
.klik-tijd{font-size:10px;color:var(--tx3);margin-top:1px}

/* ============================================================
   RESPONSIEF
   ============================================================ */
@media(max-width:900px){
  .nav{width:60px;padding:14px 8px}
  .nav-logo{font-size:0;padding:3px 0 14px}
  .nav-logo::after{content:"P";font-size:15px;font-weight:600;letter-spacing:-.02em}
  .nav-item span.lbl,.nav-mij .txt,.nav-uit{display:none}
  .nav-item{justify-content:center;padding:9px 0}
  .nav-tel{display:none}
  .kpi-rij{grid-template-columns:repeat(2,1fr)}
  .sv-tijd{width:88px}
}
@media(max-width:600px){
  .pagina{padding:12px 12px 60px}
  .top{padding:11px 12px}
  .kpi-rij{grid-template-columns:1fr 1fr}
  .comp-rij>label{width:50px}
}