/* iDentify Sales - backoffice voor verkooppartners. Navy huisstijl + Inter. */
:root{
  --navy:#0a3d62; --navy2:#0e4d7b; --navy-d:#072c47;
  --accent:#2f80c9; --accent-d:#256aa8;
  --oranje:#e8833a;
  --groen:#15803d; --rood:#b91c1c; --amber:#b45309;
  --bg:#f4f6f9; --wit:#fff; --lijn:#e3e8ef; --tekst:#1e293b; --muted:#64748b;
  --font:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tekst);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-d)}
h1,h2,h3,h4{margin:0;color:var(--navy);font-weight:700;line-height:1.2}
img{max-width:100%}

/* layout shell */
.shell{display:flex;min-height:100vh}
.side{width:236px;flex:0 0 236px;background:var(--navy);color:#cfe0ee;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:40}
.side .merk{padding:20px 22px;font-weight:800;font-size:19px;color:#fff;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;border-bottom:1px solid rgba(255,255,255,.1)}
.side .merk small{display:block;font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8fb2d0;margin-top:1px}
.side .merk .logo-badge{width:34px;height:34px;flex:0 0 34px;background:#fff;color:var(--navy);border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;letter-spacing:-.02em}
.side nav{padding:14px 12px;flex:1;overflow-y:auto}
.side nav .grp{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#6f97ba;padding:14px 12px 6px}
.side nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;color:#cfe0ee;font-weight:500;font-size:14.5px;margin-bottom:2px;transition:.13s}
.side nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.side nav a.actief{background:var(--accent);color:#fff}
.side nav a svg{width:19px;height:19px;flex:0 0 19px}
.side .voet{padding:14px;border-top:1px solid rgba(255,255,255,.1);font-size:13px}
.side .voet .naam{color:#fff;font-weight:600}
.side .voet a{color:#8fb2d0}

.main{flex:1;margin-left:236px;min-width:0;display:flex;flex-direction:column}
.top{background:var(--wit);border-bottom:1px solid var(--lijn);padding:16px 30px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:30}
.top h1{font-size:21px}
.top .sub{color:var(--muted);font-size:13.5px;margin-top:2px}
.inhoud{padding:26px 30px 60px;max-width:1180px;width:100%}

/* knoppen */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-weight:600;font-size:14px;padding:10px 18px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:.14s;white-space:nowrap;text-decoration:none}
.btn.pri{background:var(--navy);color:#fff}.btn.pri:hover{background:var(--navy2);color:#fff}
.btn.acc{background:var(--accent);color:#fff}.btn.acc:hover{background:var(--accent-d);color:#fff}
.btn.oran{background:var(--oranje);color:#fff}.btn.oran:hover{filter:brightness(.94);color:#fff}
.btn.ghost{background:var(--wit);border-color:var(--lijn);color:var(--navy)}.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn.sm{padding:7px 12px;font-size:13px}
.btn svg{width:17px;height:17px}
.btn.groen{background:var(--groen);color:#fff}.btn.rood{background:var(--rood);color:#fff}

/* kaarten */
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:22px}
.kaart.pad0{padding:0;overflow:hidden}
.kaart h3{font-size:16px;margin-bottom:2px}
.rij{display:flex;gap:20px;flex-wrap:wrap}
.grid{display:grid;gap:18px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}

/* KPI */
.kpi{background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:18px 20px}
.kpi .lab{font-size:12.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.kpi .val{font-size:30px;font-weight:800;color:var(--navy);line-height:1.1;margin-top:6px}
.kpi .val small{font-size:15px;color:var(--muted);font-weight:600}
.kpi.acc{background:var(--navy);border-color:var(--navy)}.kpi.acc .lab{color:#8fb2d0}.kpi.acc .val{color:#fff}

/* tabel */
table.lijst{width:100%;border-collapse:collapse;font-size:14px}
table.lijst th{text-align:left;padding:12px 16px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--lijn);background:#fafbfc}
table.lijst td{padding:13px 16px;border-bottom:1px solid var(--lijn);vertical-align:middle}
table.lijst tr:last-child td{border-bottom:0}
table.lijst tr:hover td{background:#f8fafc}
table.lijst .bedrijf{font-weight:600;color:var(--navy)}
table.lijst a.rijlink{color:var(--navy)}

/* badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:100px;white-space:nowrap}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.badge.rol{background:#eef2f7;color:var(--muted)}

/* forms */
label.veld{display:block;margin-bottom:14px}
label.veld .lab{display:block;font-weight:600;font-size:13px;color:var(--navy);margin-bottom:5px}
input,select,textarea{width:100%;font-family:var(--font);font-size:14.5px;padding:10px 12px;border:1px solid var(--lijn);border-radius:8px;background:var(--wit);color:var(--tekst)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,128,201,.14)}
textarea{resize:vertical;min-height:90px;line-height:1.55}
.form-rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* pipeline kanban */
.kanban{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:12px;overflow-x:auto;padding-bottom:8px}
.kol{background:#eef2f7;border-radius:10px;padding:10px;min-width:150px}
.kol .kop{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:4px 6px 10px;display:flex;justify-content:space-between}
.kol .kop .n{color:var(--muted)}
.kol .kaarten{min-height:30px}
.kol.over{outline:2px dashed var(--accent);outline-offset:-3px;background:#e3edf7}
.kkaart{background:var(--wit);border:1px solid var(--lijn);border-radius:8px;padding:10px 11px;margin-bottom:8px;display:block;cursor:grab}
.kkaart:active{cursor:grabbing}
.kkaart.sleep{opacity:.4}
.kkaart .b{font-weight:600;color:var(--navy);font-size:13.5px}
.kkaart .m{font-size:12px;color:var(--muted);margin-top:2px}

/* lead detail */
.lead-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:start}
.info-lijst{list-style:none;padding:0;margin:0}
.info-lijst li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--lijn);font-size:14px}
.info-lijst li:last-child{border-bottom:0}
.info-lijst .k{color:var(--muted)}
.info-lijst .v{font-weight:500;text-align:right}
.tijdlijn{list-style:none;padding:0;margin:0}
.tijdlijn li{padding:11px 0 11px 20px;border-left:2px solid var(--lijn);position:relative;margin-left:4px}
.tijdlijn li::before{content:"";position:absolute;left:-6px;top:15px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--wit)}
.tijdlijn .t{font-size:12px;color:var(--muted)}
.tijdlijn .txt{font-size:14px;margin-top:2px}
.tijdlijn .ty{font-weight:600;color:var(--navy)}

/* melding */
.melding{padding:13px 18px;border-radius:9px;font-size:14px;margin-bottom:20px;font-weight:500}
.melding.ok{background:#e7f6ec;color:var(--groen);border:1px solid #b9e3c6}
.melding.fout{background:#fdecec;color:var(--rood);border:1px solid #f3c2c2}
.melding.info{background:#e9f2fb;color:var(--navy);border:1px solid #c3ddf3}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy),var(--navy-d));padding:20px}
.login-kaart{background:var(--wit);border-radius:16px;padding:36px 34px;width:100%;max-width:400px;box-shadow:0 30px 60px -20px rgba(0,0,0,.4)}
.login-kaart .merk{font-weight:800;font-size:24px;color:var(--navy);margin-bottom:4px}
.login-kaart .merk small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pw-wrap{position:relative}
.pw-wrap .oog{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;color:var(--muted);width:auto;padding:4px}

/* prose (verkoopgids) */
.prose{max-width:820px}
.prose h2{font-size:24px;margin:34px 0 12px}
.prose h3{font-size:18px;margin:26px 0 8px;color:var(--navy2)}
.prose p,.prose li{font-size:15px}
.prose ul{padding-left:20px}
.prijskaart{border:2px solid var(--lijn);border-radius:12px;padding:22px;text-align:center}
.prijskaart.hi{border-color:var(--accent)}
.prijskaart .p{font-size:34px;font-weight:800;color:var(--navy)}
.prijskaart .p small{font-size:14px;color:var(--muted);font-weight:600}

/* mobiel */
.hamb{display:none}
@media(max-width:900px){
  .side{transform:translateX(-100%);transition:.25s;box-shadow:0 0 40px rgba(0,0,0,.3)}
  .side.open{transform:translateX(0)}
  .main{margin-left:0}
  .hamb{display:inline-flex;background:none;border:0;cursor:pointer;color:var(--navy);width:auto;padding:6px}
  .hamb svg{width:26px;height:26px}
  .inhoud{padding:20px 18px 60px}.top{padding:14px 18px}
  .g4{grid-template-columns:repeat(2,1fr)}.g3,.g2{grid-template-columns:1fr}
  .lead-grid{grid-template-columns:1fr}.form-rij{grid-template-columns:1fr}
  .overlay{position:fixed;inset:0;background:rgba(7,44,71,.5);z-index:35;display:none}.overlay.open{display:block}
}
@media(max-width:560px){.g4{grid-template-columns:1fr}table.lijst .verberg{display:none}}