/* ============================================================
   Walts Travel CRM — Travel Counsellors-huisstijl
   Azure-kleurencombinatie + Iceland-neutralen
   Fonts: Quincy CF (titels) + Plus Jakarta Sans (tekst) — self-hosted
   ============================================================ */

/* ── Merkfonts (self-hosted, ook offline scherp) ─────────── */
@font-face {
  font-family: 'Quincy CF'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/QuincyCF-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Quincy CF'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../assets/fonts/QuincyCF-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Quincy CF'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/QuincyCF-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('../assets/fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
}

:root {
  /* Azure */
  --azure-dark:#121F3F; --azure-mid:#264F68; --azure-light:#B0E2F5; --azure-bright:#80F4FC;
  /* Iceland (neutralen) */
  --ice-1000:#1D1C1A; --ice-300:#F2ECE1; --ice-200:#F9F6F0; --ice-100:#FBFAF6;
  /* Walts merk */
  --walts:#F3981A;
  /* afgeleid */
  --ink:#1D1C1A; --muted:#6f6a61; --line:#E9E1D2; --card:#ffffff;
  --primary:var(--azure-mid); --primary-2:#1c3e54;
  --radius:16px; --radius-sm:11px;
  --shadow-sm:0 1px 2px rgba(18,31,63,.05), 0 1px 3px rgba(18,31,63,.06);
  --shadow-md:0 14px 40px rgba(18,31,63,.16);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink); background: var(--ice-100); min-height: 100vh; font-weight: 400;
}
.display, h1, h2, h3 { font-family: 'Quincy CF', Georgia, 'Times New Roman', serif; }

/* ── Knoppen ─────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--primary); color: #fff; border: none; border-radius: 12px;
  padding: 11px 17px; font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: background .15s, transform .1s;
}
.btn-primary:hover { background: var(--primary-2); }
.btn-primary:active { transform: scale(.98); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: #fff; color: var(--azure-dark); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 16px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s;
}
.btn-ghost:hover { background: var(--ice-200); border-color: #ddd3c0; }
.btn-danger {
  display: inline-flex; align-items: center; gap: 7px; background: #FBE7E6; color: #b2402a;
  border: 1px solid #f3cfc9; border-radius: 12px; padding: 10px 16px; font-size: 14px;
  font-weight: 600; cursor: pointer; font-family: inherit;
}
.btn-danger:hover { background: #f7d9d5; }
.btn-blok { width: 100%; }
.ico { flex-shrink: 0; }

/* ── Inlogscherm ─────────────────────────────────────────── */
.login-scherm {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 22px;
  background:
    radial-gradient(1100px 600px at 85% -10%, #1e335f 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #1b2c54 0%, transparent 55%),
    var(--azure-dark);
}
.login-kaart {
  background: var(--card); border-radius: 22px; box-shadow: var(--shadow-md);
  padding: 34px 30px; width: 100%; max-width: 400px; text-align: center;
}
.login-merk { display: flex; justify-content: center; margin-bottom: 6px; }
.login-logo-img { width: 88px; height: 88px; }
.login-naam { font-family: 'Quincy CF', serif; font-weight: 500; font-size: 25px; color: var(--azure-dark); margin-top: 6px; }
.login-sub-merk { font-size: 11px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; margin-top: 4px; }
.login-titel { font-family: 'Quincy CF', serif; font-size: 19px; font-weight: 500; color: var(--azure-dark); margin: 22px 0 2px; }
.login-uitleg { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.login-kaart .form-group { text-align: left; }
.login-fout {
  background: #FBE7E6; color: #b2402a; border: 1px solid #f3cfc9;
  padding: 10px 13px; border-radius: 11px; font-size: 13px; margin: 12px 0 2px; text-align: left;
}

/* ── App-shell ───────────────────────────────────────────── */
.app { display: flex; min-height: 100vh; }

/* Sidebar (Azure Dark) */
.sidebar {
  width: 244px; background: var(--azure-dark); color: #d7dceb; display: flex;
  flex-direction: column; padding: 22px 16px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 4px 8px 20px; }
.brand-logo { width: 60px; height: 60px; }
.brand-cap { font-size: 10.5px; color: #8c97b3; letter-spacing: .14em; text-transform: uppercase; }
.brand-mark, .login-mark { display: none; } /* niet meer gebruikt — logo is een <img> */

.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 11px;
  font-size: 14px; font-weight: 500; color: #aeb7cf; cursor: pointer; margin-bottom: 2px;
  background: none; border: none; width: 100%; text-align: left; font-family: inherit;
  transition: background .15s, color .15s; position: relative;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: rgba(128,244,252,.10); color: #fff; }
.nav-item.active::before {
  content: ''; position: absolute; left: -16px; top: 9px; bottom: 9px; width: 3px;
  background: var(--azure-bright); border-radius: 0 3px 3px 0;
}
.nav-item.active .ico { color: var(--azure-bright); }
.nav-soon { margin-left: auto; font-size: 9px; letter-spacing: .07em; text-transform: uppercase;
  color: #8c97b3; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; padding: 1px 7px; }
.side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: 11.5px; color: #8c97b3; display: flex; flex-direction: column; gap: 10px; }
.side-uitlog { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06);
  color: #d7dceb; border: none; border-radius: 10px; padding: 10px 12px; font-size: 13px;
  font-weight: 600; cursor: pointer; font-family: inherit; }
.side-uitlog:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Main */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 15px 26px;
  border-bottom: 1px solid var(--line); background: var(--ice-100); position: sticky; top: 0; z-index: 50; }
.hamburger { display: none; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px; color: var(--azure-dark); cursor: pointer; }
.search { display: flex; align-items: center; gap: 9px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; flex: 1; max-width: 400px; }
.search input { border: none; background: none; outline: none; font-size: 14px; width: 100%; font-family: inherit; color: var(--ink); }
.who { margin-left: auto; text-align: right; }
.who-name { font-size: 13px; font-weight: 700; color: var(--azure-dark); }
.who-sub { font-size: 11px; color: var(--muted); }

.content { flex: 1; overflow-x: hidden; padding: 30px; }
.page-title { font-family: 'Quincy CF', serif; font-size: 32px; font-weight: 500; color: var(--azure-dark); margin: 0 0 4px; letter-spacing: -.01em; }
.page-sub { color: var(--muted); font-size: 14px; margin: 0 0 24px; }

/* KPI */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 19px 20px; box-shadow: var(--shadow-sm); }
.kpi-label { font-size: 12.5px; color: var(--muted); font-weight: 500; display: flex; align-items: center; gap: 7px; }
.kpi-val { font-family: 'Quincy CF', serif; font-size: 34px; font-weight: 500; color: var(--azure-dark); margin-top: 10px; line-height: 1; }
.kpi-foot { font-size: 11.5px; color: var(--azure-mid); margin-top: 8px; font-weight: 600; }

/* Panels & rows */
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm); }
.panel h3 { font-family: 'Quincy CF', serif; font-size: 18px; font-weight: 500; color: var(--azure-dark); margin: 0 0 14px; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: none; }
.avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; background: var(--ice-300); color: var(--azure-dark); font-weight: 600; font-size: 12px; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: 12.5px; color: var(--muted); }

/* Pills */
.pill { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 20px; white-space: nowrap; display: inline-block; }
.pill-new  { background: #E7F4FB; color: #1d4f6b; } /* Azure */
.pill-sent { background: #FBF0DA; color: #8a6a1f; } /* goud */
.pill-nego { background: #FBE7E5; color: #a23b30; } /* cherry */
.pill-ok   { background: #E1F3EC; color: #1f6b50; } /* Amazon */
.pill-done { background: #E9EBEF; color: #51596b; } /* slate */

/* Tabel */
.tbl-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.tbl { width: 100%; border-collapse: collapse; background: var(--card); }
.tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600; padding: 14px 18px; background: var(--ice-200); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 14px 18px; font-size: 14px; border-bottom: 1px solid var(--line); color: var(--ink); }
.tbl tr:last-child td { border-bottom: none; }
.strong { font-weight: 600; }
.seg-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--azure-mid); }
.prio { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.prio-hoog { background: #d8593c; } .prio-midden { background: var(--walts); } .prio-laag { background: #3f9a78; }

/* ── Klantenmodule ───────────────────────────────────────── */
.view-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.seg-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.seg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 20px;
  border: 1px solid var(--line); background: #fff; color: var(--azure-dark); font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background .15s, color .15s, border-color .15s; }
.seg-chip:hover { background: var(--ice-200); }
.seg-chip.active { background: var(--azure-dark); color: #fff; border-color: var(--azure-dark); }
.tbl tr.klikbaar { cursor: pointer; }
.tbl tr.klikbaar:hover td { background: var(--ice-200); }
.terug-knop { display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  color: var(--azure-mid); font-weight: 600; font-size: 13.5px; cursor: pointer; font-family: inherit; margin-bottom: 16px; padding: 0; }
.terug-knop:hover { color: var(--azure-dark); }
.detail-head { display: flex; gap: 16px; align-items: flex-start; }
.detail-av { width: 62px; height: 62px; border-radius: 16px; background: var(--ice-300); color: var(--azure-mid);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-line { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #574f44; margin-top: 7px; }
.detail-acties { display: flex; gap: 10px; margin: 20px 0 24px; flex-wrap: wrap; }

/* ── Profiel ─────────────────────────────────────────────── */
.profiel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 920px; }
.profiel-foot { margin-top: 18px; max-width: 920px; display: flex; justify-content: flex-end; }
@media (max-width: 760px) { .profiel-grid { grid-template-columns: 1fr; } }
.side-user-knop { cursor: pointer; border-radius: 9px; padding: 2px 4px; margin: -2px -4px; transition: background .15s; }
.side-user-knop:hover { background: rgba(255,255,255,.06); }

/* ── Gesprekken (gespreksgeschiedenis) ───────────────────── */
.gesprek-panel { margin-top: 18px; }
.gesprek-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.gesprek-head h3 { margin: 0; }
.gesprek-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.gesprek-filters select, .gesprek-filters input {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit;
  font-size: 13px; background: #fff; color: var(--ink); }
.gesprek-filters input[type="text"] { flex: 1; min-width: 160px; }
.gesprek-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.gesprek-item:last-child { border-bottom: none; }
.gesprek-ic { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; background: var(--ice-300); color: var(--azure-mid); }
.gesprek-body { flex: 1; min-width: 0; }
.gesprek-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.gesprek-onderwerp { font-weight: 600; font-size: 14px; color: var(--ink); }
.gesprek-tijd { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.gesprek-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.g-badge { font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 20px; }
.g-tag { font-size: 10.5px; color: var(--muted); background: var(--ice-200); border: 1px solid var(--line);
  border-radius: 20px; padding: 2px 8px; display: inline-flex; align-items: center; gap: 4px; }
.gesprek-inhoud { font-size: 12.5px; color: #574f44; line-height: 1.5; margin-top: 8px; white-space: pre-wrap; }
.gesprek-acties { display: flex; gap: 5px; justify-content: flex-end; margin-top: 8px; opacity: 0; transition: opacity .15s; }
.gesprek-item:hover .gesprek-acties { opacity: 1; }
/* kanaal-accenten (icoon + badge) */
.kanaal-telefoon { background: #E7F4FB; color: #1d4f6b; }
.kanaal-whatsapp { background: #E1F3EC; color: #1f6b50; }
.kanaal-email    { background: #FBF0DA; color: #8a6a1f; }
.kanaal-notitie  { background: var(--ice-300); color: #5E6B82; }
.kanaal-overig   { background: #ECE6DA; color: #6b6256; }

/* ── Kanban / Pijplijn ───────────────────────────────────── */
.kanban { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.col { background: var(--ice-200); border: 1px solid var(--line); border-radius: var(--radius);
  width: 256px; flex-shrink: 0; display: flex; flex-direction: column; max-height: calc(100vh - 210px); }
.col-head { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700;
  color: var(--azure-dark); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.col-head-l { display: flex; align-items: center; gap: 8px; }
.col-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.col-count { font-size: 11px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 2px 9px; }
.col-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1; min-height: 60px; }
.col-body.drag-over { background: #E7F4FB; }
.col-add { padding: 0 12px 12px; }
.btn-add-card { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px; background: #fff; border: 1px dashed #d6cdba; border-radius: 10px;
  color: var(--muted); cursor: pointer; font-size: 13px; font-family: inherit; transition: all .15s; }
.btn-add-card:hover { border-color: var(--azure-mid); color: var(--azure-mid); }
.empty-col { text-align: center; padding: 16px 8px; color: var(--muted); font-size: 12.5px; }

.kc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px;
  position: relative; cursor: grab; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .12s; }
.kc:hover { box-shadow: 0 8px 22px rgba(18,31,63,.10); }
.kc.dragging { opacity: .4; transform: rotate(1.5deg); }
.kc-title { font-size: 14px; font-weight: 600; line-height: 1.3; padding-right: 40px; color: var(--ink); }
.kc-klant { font-size: 12px; color: var(--azure-mid); font-weight: 600; margin-top: 6px; display: flex; align-items: center; gap: 5px; }
.kc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.kc-chip { font-size: 10.5px; color: var(--muted); background: var(--ice-200); border: 1px solid var(--line);
  border-radius: 20px; padding: 2px 9px; display: inline-flex; align-items: center; gap: 4px; }
.kc-note { font-size: 12px; color: #574f44; line-height: 1.45; margin-top: 9px; border-top: 1px solid var(--line); padding-top: 8px; white-space: pre-wrap; }
.kc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; }
.kc-date { font-size: 11px; color: var(--muted); }
.kc-btns { display: flex; gap: 5px; }
.kc-btn { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: var(--ice-100);
  cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--azure-mid); padding: 0; }
.kc-btn:hover { background: var(--azure-mid); color: #fff; border-color: var(--azure-mid); }
.kc-btn:disabled { opacity: .3; cursor: default; }
.kc-corner { position: absolute; top: 10px; right: 10px; display: flex; gap: 3px; opacity: 0; transition: opacity .15s; }
.kc:hover .kc-corner { opacity: 1; }
.kc-prio { position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 0 3px 3px 0; }
.kc-prio.hoog { background: #d8593c; } .kc-prio.midden { background: var(--walts); } .kc-prio.laag { background: #3f9a78; }

/* Placeholder */
.placeholder { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 56px 24px; text-align: center; color: var(--muted); box-shadow: var(--shadow-sm); }
.placeholder .ph-ico { width: 60px; height: 60px; border-radius: 16px; background: var(--ice-300);
  color: var(--azure-mid); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.placeholder h3 { font-family: 'Quincy CF', serif; font-size: 20px; font-weight: 500; color: var(--azure-dark); margin-bottom: 6px; }

/* ── Modal & bevestiging ─────────────────────────────────── */
.modal-overlay, .confirm-overlay {
  display: none; position: fixed; inset: 0; background: rgba(18,31,63,.5);
  z-index: 1000; align-items: center; justify-content: center; padding: 16px; }
.modal-overlay.open, .confirm-overlay.open { display: flex; }
.confirm-overlay { z-index: 2000; }
.modal { background: var(--card); border-radius: 22px; width: 100%; max-width: 560px;
  box-shadow: var(--shadow-md); overflow: hidden; max-height: 92vh; display: flex; flex-direction: column; animation: pop .18s ease; }
@keyframes pop { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-head { padding: 19px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.modal-head h2 { font-family: 'Quincy CF', serif; font-size: 20px; font-weight: 500; color: var(--azure-dark); }
.modal-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 15px; overflow-y: auto; }
.modal-foot { padding: 15px 24px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }
.icon-x { background: none; border: none; cursor: pointer; color: var(--muted); padding: 5px; border-radius: 8px; }
.icon-x:hover { background: var(--ice-200); color: var(--ink); }

.form-row { display: flex; gap: 13px; }
.form-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.form-group-knop { flex: 0 0 auto; justify-content: flex-end; }
.form-group label { font-size: 12.5px; font-weight: 600; color: var(--azure-dark); }
.form-group input, .form-group select, .form-group textarea {
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; font-size: 14px;
  font-family: inherit; color: var(--ink); background: #fff; width: 100%; transition: border .15s, box-shadow .15s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--azure-mid); box-shadow: 0 0 0 3px rgba(38,79,104,.13); }
.form-group textarea { resize: vertical; min-height: 76px; }

.confirm-box { background: var(--card); border-radius: 20px; padding: 28px; max-width: 380px; width: 100%; box-shadow: var(--shadow-md); text-align: center; }
.confirm-box h3 { font-family: 'Quincy CF', serif; font-size: 20px; font-weight: 500; color: var(--azure-dark); }
.confirm-box p { margin: 8px 0 20px; color: var(--muted); font-size: 14px; }
.confirm-foot { display: flex; gap: 10px; justify-content: center; }

/* Scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ddd4c2; border-radius: 5px; }

/* ── Inklapbare zijbalk (desktop) ────────────────────────── */
.collapse-btn { display: inline-flex; align-items: center; justify-content: center; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px; color: var(--azure-dark); cursor: pointer; flex-shrink: 0; }
.collapse-btn:hover { background: var(--ice-200); }
.nav-label { flex: 1; }

@media (min-width: 761px) {
  .app.sidebar-collapsed .sidebar { width: 78px; padding-left: 12px; padding-right: 12px; }
  .app.sidebar-collapsed .brand { align-items: center; padding: 4px 0 18px; }
  .app.sidebar-collapsed .brand-logo { width: 40px; height: 40px; }
  .app.sidebar-collapsed .brand-cap,
  .app.sidebar-collapsed .nav-label,
  .app.sidebar-collapsed .nav-soon,
  .app.sidebar-collapsed #sideUser,
  .app.sidebar-collapsed .uitlog-label { display: none; }
  .app.sidebar-collapsed .nav-item { justify-content: center; padding: 11px 0; }
  .app.sidebar-collapsed .nav-item.active::before { left: -12px; }
  .app.sidebar-collapsed .side-uitlog { justify-content: center; padding: 11px 0; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 980px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .sidebar { position: fixed; top: 0; left: 0; height: 100vh; z-index: 200; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-md); }
  .app.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(18,31,63,.45); z-index: 150; }
  .app.sidebar-open .sidebar-overlay { display: block; }
  .hamburger { display: inline-flex; }
  .collapse-btn { display: none; }
  .who { display: none; }
  .content { padding: 20px 16px; }
  .page-title { font-size: 26px; }
  .form-row { flex-direction: column; gap: 15px; }
  .col { width: 85vw; max-width: 330px; max-height: none; }
  .search { max-width: none; }
  .kc-corner { opacity: 1; }
  .gesprek-acties { opacity: 1; }
}
@media (max-width: 460px) { .kpi-grid { grid-template-columns: 1fr 1fr; gap: 11px; } .kpi-val { font-size: 28px; } }