/* ─── agent-shared.css ───────────────────────────────────────────────────────
   Gedeelde stijlen voor agents.html, meetings.html, control-center.html
   ────────────────────────────────────────────────────────────────────────────

   PR 0 preflight (feat/shared-css-preflight): design-system.css wordt hier
   ge-imported. Vóór deze PR laadde alleen finance.html 'em expliciet via een
   <link>-tag; alle andere modules laden agent-shared.css maar niet
   design-system.css, waardoor .ds-kpi-strip / .ds-modal-* / .data-table-wrap
   etc. buiten finance dode letter waren. @import moet de eerste regel zijn
   (CSS-spec) — vandaar boven de reset-regel. */
@import url("../../styles/design-system.css");

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* === LIGHT THEME (default) === */
  --surface-page: #fafafa;
  --surface-1: #ffffff;
  --surface-2: #f8fafc;
  --surface-card: #ffffff;
  --surface-card-hover: #f8fafc;

  --border-subtle: #e5e7eb;
  --border-default: #d1d5db;
  --border-strong: #9ca3af;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;
  --text-inverse: #ffffff;

  --brand-primary: #093d54;
  --brand-primary-hover: #0b4d6c;
  --brand-primary-soft: rgba(9, 61, 84, 0.08);
  --brand-primary-soft-hover: rgba(9, 61, 84, 0.12);

  --color-success: #059669;
  --color-success-soft: #d1fae5;
  --color-success-text: #047857;
  --color-warning: #d97706;
  --color-warning-soft: #fef3c7;
  --color-warning-text: #b45309;
  --color-danger: #dc2626;
  --color-danger-soft: #fee2e2;
  --color-danger-text: #b91c1c;
  --color-info: #2563eb;
  --color-info-soft: #dbeafe;
  --color-info-text: #1e40af;
  --color-neutral: #64748b;
  --color-neutral-soft: #f1f5f9;
  --color-neutral-text: #475569;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04);

  --sidebar-w: 220px;
  --sidebar-bg: #ffffff;
  --sidebar-border: #e5e7eb;
  --sidebar-item-hover: #f3f4f6;
  --sidebar-item-active: rgba(9, 61, 84, 0.1);
  --sidebar-item-active-text: #093d54;

  /* === LEGACY ALIASES (backward compat) === */
  --bg: var(--surface-page);
  --bg-elev: var(--surface-1);
  --bg-elev-2: var(--surface-2);
  --border: var(--border-subtle);
  --text: var(--text-primary);
  --text-dim: var(--text-secondary);
  --text-faint: var(--text-tertiary);
  --brand-primary-light: var(--brand-primary-hover);
  --brand-primary-dark: var(--brand-primary);
  --brand-secondary: #688b9b;
  --brand-secondary-light: #8aa9b8;
  --brand-secondary-dark: #4a6470;
  --green: var(--color-success);
  --amber: var(--color-warning);
  --red: var(--color-danger);
  --accent-cyan: var(--brand-primary);
  --accent-violet: var(--brand-primary);
  --accent: var(--brand-primary);
  --accent-grad: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover));
}

[data-theme="dark"] {
  --surface-page: #0a0b10;
  --surface-1: #13151c;
  --surface-2: #181b25;
  --surface-card: #1a1a1d;
  --surface-card-hover: #22232a;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.22);

  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-tertiary: rgba(255, 255, 255, 0.6);
  --text-inverse: #0f172a;

  --brand-primary: #3b82f6;
  --brand-primary-hover: #60a5fa;
  --brand-primary-soft: rgba(59, 130, 246, 0.15);
  --brand-primary-soft-hover: rgba(59, 130, 246, 0.22);

  --color-success: #10b981;
  --color-success-soft: rgba(16, 185, 129, 0.15);
  --color-success-text: #6ee7b7;
  --color-warning: #f59e0b;
  --color-warning-soft: rgba(245, 158, 11, 0.15);
  --color-warning-text: #fbbf24;
  --color-danger: #ef4444;
  --color-danger-soft: rgba(239, 68, 68, 0.15);
  --color-danger-text: #fca5a5;
  --color-info: #3b82f6;
  --color-info-soft: rgba(59, 130, 246, 0.15);
  --color-info-text: #93c5fd;
  --color-neutral: rgba(255, 255, 255, 0.55);
  --color-neutral-soft: rgba(255, 255, 255, 0.08);
  --color-neutral-text: rgba(255, 255, 255, 0.7);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

  --sidebar-bg: #0a0a0e;
  --sidebar-border: rgba(255, 255, 255, 0.06);
  --sidebar-item-hover: rgba(255, 255, 255, 0.06);
  --sidebar-item-active: rgba(59, 130, 246, 0.15);
  --sidebar-item-active-text: #93c5fd;
}

html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Fase-shell topbar-offset (universeel over alle modules): 48px ruimte
     voor de fixed .app-topbar zodat content niet onder de balk verdwijnt.
     box-sizing:border-box rekent de padding binnen de min-height zodat
     er geen 48px extra scroll ontstaat op korte pagina's. */
  padding-top: 48px;
  box-sizing: border-box;
}
body::before {
  content: ''; position: fixed; inset: 0;
  background-image:
    radial-gradient(circle at 25% 15%, rgba(9,61,84,0.18), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(104,139,155,0.09), transparent 50%);
  pointer-events: none; z-index: 0;
}

/* ── Sidebar (full-width-topbar-layout) ──────────────────────────────────
   Sinds de full-width-topbar-migratie begint de sidebar ONDER de topbar
   (top:48px matcht .app-topbar height). Achtergrond opaque via --ds-surface
   zodat topbar + sidebar één doorlopend shell-oppervlak zijn (LMS-stijl);
   de eerdere transparant-keuze (body-glow doorloopt onder sidebar) is
   bewust ingeruild voor visueel-één-shell — glow blijft zichtbaar onder
   .main-content. */
.sidebar {
  position:fixed;
  top:48px; left:0; bottom:0;
  width:var(--sidebar-w);
  background:var(--ds-surface, #ffffff);
  border-right:1px solid var(--sidebar-border);
  display:flex; flex-direction:column;
  z-index:200;
  overflow-y:auto;
}
/* .sidebar-logo styling behouden voor backward-compat als een module 'm
   nog zelf-renderd (defensief no-op sinds de shell-versie leeg is). */
.sidebar-logo { display:flex; align-items:center; justify-content:flex-start; padding:16px; border-bottom:1px solid var(--sidebar-border); flex-shrink:0; }
.sidebar-logo img { max-height:52px; width:auto; max-width:180px; object-fit:contain; display:block; }
.sidebar-logo .logo-dark  { display:block; }
.sidebar-logo .logo-light { display:none; }
[data-theme="dark"] .sidebar-logo .logo-dark  { display:none; }
[data-theme="dark"] .sidebar-logo .logo-light { display:block; }
.sidebar-logo-fallback { font-size:13px; font-weight:700; color:var(--text); }
.sidebar-clock { margin:12px 10px 6px; padding:11px 13px; border-radius:10px; background:var(--sidebar-item-hover); border-left:3px solid var(--brand-azure,#1e6cd6); }
.sidebar-clock-date { display:block; font-size:12px; font-weight:500; color:var(--text-dim); }
.sidebar-clock-time { display:block; font-size:20px; font-weight:500; letter-spacing:1px; color:var(--text); font-variant-numeric:tabular-nums; }
.sidebar-nav { flex:1; padding:10px 8px; }
.nav-section { font-size:10px; text-transform:uppercase; letter-spacing:.7px; color:var(--text-faint); font-weight:600; padding:14px 10px 5px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; color:var(--text-dim); font-size:13px; font-weight:500; text-decoration:none; cursor:pointer; transition:background .15s,color .15s; margin-bottom:2px; user-select:none; }
.nav-icon { width:15px; height:15px; flex-shrink:0; }
.nav-item:hover:not(.active) { background:var(--sidebar-item-hover); color:var(--text); }
.nav-item.active { background:var(--brand-primary,#093d54); color:#fff; font-weight:500; }
.nav-item.active .nav-icon { color:#7fb0f0 !important; stroke:#7fb0f0 !important; }
[data-theme="dark"] .nav-item.active { background:var(--brand-azure,#1e6cd6); color:#fff; }
[data-theme="dark"] .nav-item.active .nav-icon { color:#fff !important; stroke:#fff !important; }
.nav-badge { margin-left:auto; background:var(--red); color:#fff; font-size:10px; font-weight:700; border-radius:10px; padding:1px 6px; display:none; }
.nav-badge.show { display:inline-block; }
.sidebar-footer { flex-shrink:0; padding:8px 8px 14px; border-top:1px solid var(--sidebar-border); }
.footer-user { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px; color:var(--text-dim); font-size:13px; font-weight:500; cursor:pointer; transition:background .15s; }
.footer-user:hover { background:var(--sidebar-item-hover); color:var(--text); }
.footer-avatar { width:26px; height:26px; flex-shrink:0; border-radius:50%; background:var(--accent-grad); display:grid; place-items:center; font-size:10px; font-weight:800; color:#0a0b10; }

/* ── Main ── */
/* min-height compenseert de body padding-top (48px topbar-offset) zodat
   .main precies de resterende viewport-hoogte vult zonder overhang. */
.main { margin-left:var(--sidebar-w); min-height:calc(100vh - 48px); position:relative; z-index:1; }
.main-inner { padding:28px 28px 64px; max-width:1200px; }
.hidden { display:none!important; }

/* ── Buttons ── */
.btn { padding:8px 16px; border-radius:9px; border:1px solid var(--border-strong); background:var(--bg-elev); color:var(--text-dim); font-size:13px; font-weight:500; cursor:pointer; transition:all .15s; font-family:inherit; }
.btn:hover { background:var(--bg-elev-2); color:var(--text); }
.btn-primary { background:var(--brand-primary); border-color:var(--brand-primary); color:var(--text-inverse); }
.btn-primary:hover { background:var(--brand-primary-hover); border-color:var(--brand-primary-hover); color:var(--text-inverse); }
.btn-sm { padding:6px 12px; border-radius:7px; border:1px solid var(--border-strong); background:var(--bg-elev-2); color:var(--text-dim); font-size:12px; font-weight:500; cursor:pointer; transition:all .15s; font-family:inherit; }
.btn-sm:hover { background:var(--bg); color:var(--text); }

/* ── Page header ── */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
.page-title { font-size:22px; font-weight:800; letter-spacing:-.4px; }
.page-sub { font-size:13px; color:var(--text-dim); margin-top:3px; }
.header-actions { display:flex; gap:10px; align-items:center; }

/* ── Chips ── */
.chip { display:inline-flex; align-items:center; gap:4px; background:rgba(104,139,155,0.15); border:1px solid rgba(104,139,155,0.3); border-radius:20px; padding:2px 8px; font-size:11px; font-weight:500; color:var(--brand-secondary-light); }
.chip.agent  { background:rgba(34,211,238,0.1);  border-color:rgba(34,211,238,0.3);  color:#22d3ee; }
.chip.freelance { background:rgba(245,158,11,0.1); border-color:rgba(245,158,11,0.3); color:#f59e0b; }
.chip .chip-x { cursor:pointer; opacity:.7; font-size:10px; line-height:1; margin-left:2px; }
.chip .chip-x:hover { opacity:1; }
.chip.simon  { background:rgba(34,211,238,0.1);  border-color:rgba(34,211,238,0.3);  color:#22d3ee; }
.chip.leon   { background:rgba(104,139,155,0.15); border-color:rgba(104,139,155,0.3); color:var(--brand-secondary-light); }
.chip.aron   { background:rgba(245,158,11,0.1);  border-color:rgba(245,158,11,0.3);  color:#f59e0b; }

/* ── Approval inbox ── */
.approval-row { display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:8px; background:var(--bg-elev-2); margin-bottom:5px; cursor:pointer; transition:background .15s; }
.approval-row:hover { background:rgba(255,255,255,0.05); }
.approval-urgency-red   { color:var(--red);   font-size:10px; font-weight:700; flex-shrink:0; }
.approval-urgency-amber { color:var(--amber); font-size:10px; font-weight:700; flex-shrink:0; }

/* ── Inline approval card (chat) ── */
.inline-approval-card { background:var(--bg-elev-2); border:1px solid var(--border-strong); border-radius:12px; padding:14px; margin-top:10px; }
.inline-approval-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }

/* ── Audit log ── */
.audit-row { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; background:var(--bg-elev-2); margin-bottom:4px; cursor:pointer; transition:background .15s; }
.audit-row:hover { background:rgba(255,255,255,0.05); }
.audit-status-ok  { color:var(--green); font-size:14px; flex-shrink:0; }
.audit-status-err { color:var(--red);   font-size:14px; flex-shrink:0; }

/* ── Report overlay ── */
.report-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:500; display:flex; align-items:center; justify-content:center; padding:20px; }
.report-modal { background:var(--bg-elev); border:1px solid var(--border-strong); border-radius:16px; width:100%; max-width:700px; max-height:80vh; display:flex; flex-direction:column; }
.report-header { padding:18px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.report-title { font-size:15px; font-weight:700; }
.report-close { background:none; border:none; color:var(--text-faint); font-size:18px; cursor:pointer; padding:0 4px; }
.report-body { flex:1; overflow-y:auto; padding:20px; }
.report-content { font-size:13px; line-height:1.8; color:var(--text-dim); white-space:pre-wrap; }
.report-content h1, .report-content h2, .report-content h3 { color:var(--text); margin:16px 0 8px; }
.report-content strong { color:var(--text); }

/* ── Section card (gebruikt in meetings + CC) ── */
.section-card { background:var(--bg-elev); border:1px solid var(--border); border-radius:14px; padding:20px; margin-bottom:20px; }
.section-header { display:flex; align-items:center; gap:10px; justify-content:space-between; margin-bottom:14px; }
.section-title { font-size:14px; font-weight:700; }

/* ── Toast animatie ── */
@keyframes agents-slide-in { from { transform:translateX(20px); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:3px; }

/* ── Responsive ── */
/* Bewuste driedeling — desktop ~1025px+: sidebar + geen topbar-hamburger;
   tablet 641-1024px: topbar-hamburger zichtbaar, sidebar off-canvas via
   .sidebar-open; mobile <=640px: identiek gedrag maar smallere paddings. */
@media(max-width:1024px) {
  .sidebar {
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:var(--shadow-lg);
  }
  body.sidebar-open .sidebar { transform:translateX(0); }
  body.sidebar-open::after {
    content:"";
    position:fixed; inset:0;
    background:rgba(6,24,31,.45);
    z-index:150;
    pointer-events:auto;
  }
  [data-theme="dark"] body.sidebar-open::after { background:rgba(0,0,0,.6); }
  /* Reset content-offset op mobiel. Twee wrapper-conventies naast elkaar:
     - .main   (agents/meetings/meta-ads/lisa/...): shell-default.
     - .app    (finance/email/events/sales/mentor/kennisbank/... — 31 pagina's):
       eigen legacy-wrapper met hardcoded `margin-left:220px` inline per
       pagina, ZONDER eigen mobile-override op de meeste pagina's. Voor
       #874 stond dit onopgemerkt omdat de topbar op mobiel toch overlapte;
       na de full-width topbar viel op dat de content 220px naar rechts stond.

     Specificiteit-boost `body .app` (2 klassen) is nodig omdat per-page
     inline `<style>` in de <head> NA agent-shared.css laadt en met gelijke
     specificity (single class) door source-order zou winnen — klassieke
     cascade-bug zoals #870/#874. Pagina's die zelf een `.app`-override in
     eigen media-query hebben (bv. events-automations `.app { padding:14px }`)
     krijgen padding via die eigen regel; margin-left komt uit deze
     shared-regel. Padding-top-reset alleen op `.main` — pagina's die eigen
     `.app { padding:X }` zetten worden zo niet ongewild ontpadded. */
  /* PR 0 preflight: .main-content erbij — follow-up.html / follow-up-admin.html
     / follow-up-lead.html gebruiken .main-content i.p.v. .main, misten daardoor
     de mobile-offset-reset en klemden op 390px 220px opzij tegen de sidebar.
     Fix #938: specificity-boost `body .main-content` (2 klassen) — deze 3
     files hebben een eigen inline `<style>` die `.main-content { margin-left:
     var(--sidebar-w, 220px) }` opnieuw declareert NA agent-shared.css. Zonder
     de body-prefix wint per-page inline door source-order (zelfde patroon als
     `body .app` uit #870/#874). */
  .main { margin-left:0; padding-top:0; }
  body .main-content { margin-left:0; padding-top:0; }
  body .app { margin-left:0; }
  /* Hamburger toont in de topbar; theme-toggle blijft rechtsboven bereikbaar.
     Topbar is sinds de full-width-migratie sowieso left:0 op alle
     breakpoints — vroegere mobile-only override is redundant.
     Specificiteit VERHOOGD (.app-topbar .app-hamburger = 2 klassen) omdat
     de hoofd-regel .app-hamburger{display:none} verderop in het bestand
     staat en anders qua source-order zou winnen -- klassieke cascade-bug
     die op mobiel de hamburger permanent verborg. */
  .app-topbar .app-hamburger { display:inline-flex; }
}
@media(max-width:720px) {
  /* Op smal scherm past een 420px-zoekbalk niet tussen hamburger + toggle
     + logout in een 48px-strip. Verbergen; Stap 4 kan later een zoek-icon-
     button als collapsed variant toevoegen.
     Specificiteit VERHOOGD (.app-topbar .app-topbar-search = 2 klassen)
     omdat design-system.css later in de <link>-volgorde geladen wordt
     dan agent-shared.css en daar .ds-search{display:flex} zet -- de
     markup gebruikt beide klassen (class="ds-search app-topbar-search"),
     dus zonder specificiteit-boost overrulet de latere file de media-
     query en blijft de zoekbalk zichtbaar op mobiel. */
  .app-topbar .app-topbar-search { display:none; }
  /* User-badge collapse naar avatar-only op mobiel. Naam + email verbergen;
     avatar 30px + gap blijft over. Signout blijft bereikbaar via
     #appTopbarLogout (aparte 36px icon-button rechts). */
  .app-topbar-user .user-name,
  .app-topbar-user .user-email { display:none; }
  .app-topbar-user .user-badge-inner { gap:0; }
  .app-topbar-user { max-width:none; }
}
@media(max-width:640px) {
  .app-topbar { padding:0 10px; }
  .sidebar    { width:min(280px, 84vw); }
}

/* ── Fase-shell: app-topbar (full-width strip bovenaan) ─────────────────
   Sinds de full-width-migratie loopt de topbar DOORLOPEND over de volle
   breedte (left:0) en begint de sidebar eronder (top:48px). Logo staat
   links in de topbar. Background + border via --ds-* tokens met expliciete
   hex-fallback (pattern #868). z:250 blijft boven sidebar (z:200) — hoewel
   ze niet meer overlappen sinds de sidebar top:48px is, behouden we het
   voor eventuele mobile-overlay-edge-cases. */
.app-topbar {
  position:fixed;
  top:0; left:0; right:0;
  height:48px;
  display:flex; align-items:center; gap:8px;
  padding:0 14px;
  background:var(--ds-surface, #ffffff);
  border-bottom:1px solid var(--ds-border, #dfe8ec);
  color:var(--ds-text, #06181f);
  z-index:250;
}
.app-topbar-spacer { flex:1 1 auto; }
.app-topbar-actions { display:inline-flex; align-items:center; gap:6px; }

/* Stap 2/4 topbar-consolidatie: zoekbalk-slot in de flex-rij. Groeit met
   de topbar maar wordt gecapt op 420px zodat de acties rechts leesbaar
   blijven op ruime schermen. min-width:0 voorkomt input-overflow. */
/* Logo links in de topbar (verhuisd uit .sidebar-logo). Twee <img>-varianten
   voor light/dark; theme-flip via CSS (identiek aan het oude .sidebar-logo-
   patroon). max-height matcht de 48px topbar met wat marge. */
.app-topbar-logo {
  flex:0 0 auto;
  display:flex; align-items:center;
  padding:0 6px 0 4px;
  min-width:0;
}
.app-topbar-logo img { max-height:32px; width:auto; max-width:150px; object-fit:contain; display:block; }
.app-topbar-logo .logo-dark  { display:block; }
.app-topbar-logo .logo-light { display:none; }
[data-theme="dark"] .app-topbar-logo .logo-dark  { display:none; }
[data-theme="dark"] .app-topbar-logo .logo-light { display:block; }

.app-topbar-search { flex:1 1 auto; max-width:420px; min-width:0; }
.app-topbar-logout { flex:0 0 auto; }

/* Stap 4bc: dropdown onder de zoekbalk. Absolute t.o.v. .ds-search
   (position:relative) — hangt onder de input met een kleine gap. Alle
   waardes via --ds-* met expliciete fallback (patroon #868). */
.app-topbar-search-dropdown {
  position:absolute;
  top:calc(100% + 4px);
  left:0; right:0;
  background:var(--ds-surface, #ffffff);
  color:var(--ds-text, #06181f);
  border:1px solid var(--ds-border, #dfe8ec);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(6,24,31,.15);
  max-height:400px;
  overflow-y:auto;
  z-index:10001;
}
.app-topbar-search-dropdown[hidden] { display:none; }
.app-search-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  color:var(--ds-text, #06181f);
  text-decoration:none;
  border-bottom:1px solid var(--ds-border, #dfe8ec);
}
.app-search-item:last-child { border-bottom:0; }
.app-search-item:hover,
.app-search-item.is-active { background:var(--ds-surface-2, #f9fbfc); }
.app-search-type { font-size:14px; flex:0 0 auto; }
.app-search-body { flex:1 1 auto; min-width:0; }
.app-search-label {
  display:block;
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.app-search-sub {
  display:block;
  font-size:11px;
  color:var(--ds-text-muted, #48585f);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.app-search-hint,
.app-search-empty {
  padding:12px;
  font-size:12.5px;
  color:var(--ds-text-faint, #7a8b92);
  text-align:center;
}

/* Stap 3a: user-badge in de topbar. renderUserSection injecteert een
   .user-badge-inner met .user-avatar/.user-name/.user-email hooks. Op
   mobiel <=720px collapsen naam+email naar avatar-only zodat het geheel
   past naast hamburger + toggle + logout. Signout blijft altijd bereikbaar
   via het aparte #appTopbarLogout (geen dropdown-fallback nodig). */
.app-topbar-user {
  flex: 0 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  max-width: 220px;
  color: var(--ds-text, #06181f);
}
.app-topbar-user .user-badge-inner {
  max-width: 100%;
}

/* Hamburger — 3 lijnen; klikbaar tap-target min 40x40. Verborgen op desktop.
   Direct op --ds-* met fallback (i.p.v. via de bridge-tokens --surface-1
   /--sidebar-border/--text-primary) zodat de knop leesbaar is ook als
   design-system.css nog niet resolvet is. Dark-override is niet meer
   nodig want --ds-surface / --ds-border / --ds-text worden onder
   [data-theme="dark"] al ge-override door design-system.css. */
.app-hamburger {
  display:none;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  gap:0;
  padding:0;
  background:var(--ds-surface, #ffffff);
  border:1px solid var(--ds-border, #dfe8ec);
  border-radius:8px;
  cursor:pointer;
  transition:background .12s, border-color .12s;
  flex-direction:column;
  row-gap:4px;
}
.app-hamburger:hover { background:var(--ds-surface-2, #f9fbfc); border-color:var(--ds-border-strong, #c1d0d7); }
.app-hamburger span {
  display:block;
  width:18px; height:2px;
  background:var(--ds-text, #06181f);
  border-radius:2px;
}

/* Theme-toggle (maan/zon) — cirkelvormig, min 40x40 tap-target. Zelfde
   ds-fallback pattern als de hamburger; dark-override overbodig. */
.app-theme-toggle {
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ds-surface, #ffffff);
  color:var(--ds-text, #06181f);
  border:1px solid var(--ds-border, #dfe8ec);
  border-radius:50%;
  cursor:pointer;
  font-size:17px;
  transition:background .12s, color .12s, border-color .12s;
}
.app-theme-toggle:hover {
  background:var(--ds-surface-2, #f9fbfc);
  border-color:var(--ds-brand, #0a5178);
  color:var(--ds-brand, #0a5178);
}
.app-theme-toggle:focus-visible {
  outline:none;
  box-shadow:0 0 0 3px var(--ds-brand-soft, rgba(10, 81, 120, 0.25));
}

/* ── Fase-shell: bridging naar --ds-* tokens ─────────────────────────────
   Zodra styles/design-system.css is geladen, worden de bestaande
   sidebar-tokens gemapt naar de nieuwe --ds-* waardes (krachtig-blauw
   light+dark). Fallback op de originele waardes wanneer design-system.css
   NIET geladen is — backward-compat gegarandeerd. Deze block staat aan
   het einde zodat 'ie de eerdere :root / [data-theme="dark"] declaraties
   overschrijft (last-declaration-wins). */
:root {
  --sidebar-bg:               var(--ds-surface,          #ffffff);
  --sidebar-border:           var(--ds-border,           #e5e7eb);
  --sidebar-item-hover:       var(--ds-surface-2,        #f3f4f6);
  --sidebar-item-active:      var(--ds-brand-soft,       rgba(9, 61, 84, 0.10));
  --sidebar-item-active-text: var(--ds-brand-strong,     #093d54);
  --brand-primary:            var(--ds-brand,            #093d54);
  --brand-primary-hover:      var(--ds-brand-strong,     #0b4d6c);
  --brand-primary-soft:       var(--ds-brand-soft,       rgba(9, 61, 84, 0.08));
  --border-subtle:            var(--ds-border,           #e5e7eb);
  --surface-page:             var(--ds-page,             #fafafa);
  --surface-1:                var(--ds-surface,          #ffffff);
  --surface-2:                var(--ds-surface-2,        #f8fafc);
  --text-primary:             var(--ds-text,             #0f172a);
  --text-secondary:           var(--ds-text-muted,       #475569);
  --text-tertiary:            var(--ds-text-faint,       #94a3b8);
}
[data-theme="dark"] {
  --sidebar-bg:               var(--ds-surface,          #0d1922);
  --sidebar-border:           var(--ds-border,           #1b2d38);
  --sidebar-item-hover:       var(--ds-surface-2,        #12222d);
  --sidebar-item-active:      var(--ds-brand-soft,       #082f45);
  --sidebar-item-active-text: var(--ds-brand,            #38bdf8);
  --brand-primary:            var(--ds-brand,            #38bdf8);
  --brand-primary-hover:      var(--ds-brand-strong,     #5fcdfa);
  --brand-primary-soft:       var(--ds-brand-soft,       #082f45);
  --border-subtle:            var(--ds-border,           #1b2d38);
  --surface-page:             var(--ds-page,             #070f14);
  --surface-1:                var(--ds-surface,          #0d1922);
  --surface-2:                var(--ds-surface-2,        #12222d);
  --text-primary:             var(--ds-text,             #e9f5fb);
  --text-secondary:           var(--ds-text-muted,       #90a8b4);
  --text-tertiary:            var(--ds-text-faint,       #5d7681);
}

/* ── Tooltips (CSS-only via data-tooltip="...") ──────────────────────────
   Voeg data-tooltip="tekst" toe aan een element voor een hover-tooltip.
   Standaard positioneert boven; data-tooltip-pos="bottom|left|right" voor variant.
   Theme-aware via bestaande custom properties (auto licht/donker).
   Multiline: gebruik &#10; (LF) in attribuut + white-space pre-line werkt.

   ONTWERP-KEUZES (lessen uit tooltip v1):
   - GEEN ::before pseudo-element (= geen pijltje). Voorkomt botsing met
     elementen die zelf ::before gebruiken (bv. .kpi-groot-card brand-streep).
     Alle 4 doel-modules (dashboard/email/follow-up/lisa) gebruiken ::before
     op meerdere elementen — pijltje-claim zou overal collisies geven.
   - display:none initieel, display:block op hover (NIET opacity:0/1). Anders
     telt de tooltip mee voor overflow-berekening en veroorzaakt horizontale
     page-scroll bij elementen aan de viewport-rand.
   - Trade-off: geen fade-in animatie. Acceptabel voor productiviteit.

   Opt-out: voeg class .no-tooltip toe — voor elementen waar position:relative
   layout breekt of waar je tijdelijk een tooltip wilt onderdrukken. */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  display: none;
  content: attr(data-tooltip);
  position: absolute;
  background: var(--surface-card);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: pre-line;
  max-width: 240px;
  width: max-content;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  text-align: center;
  pointer-events: none;
  z-index: 10000;
}

/* Standaard: BOVEN */
[data-tooltip]::after {
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
}

/* Variant: ONDER */
[data-tooltip][data-tooltip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 6px);
}

/* Variant: LINKS */
[data-tooltip][data-tooltip-pos="left"]::after {
  bottom: 50%;
  left: auto;
  right: calc(100% + 6px);
  transform: translateY(50%);
}

/* Variant: RECHTS */
[data-tooltip][data-tooltip-pos="right"]::after {
  bottom: 50%;
  left: calc(100% + 6px);
  transform: translateY(50%);
}

/* Toon op hover én keyboard-focus (a11y) */
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  display: block;
}

/* Opt-out: voor elementen waar position:relative layout breekt */
[data-tooltip].no-tooltip { position: static; }
[data-tooltip].no-tooltip::after { display: none; }