:root {
  --bg: #F8F9FC;
  --card: #ffffff;
  --text: #2A1B45;
  --muted: #6B6280;
  --border: #E4DFF5;
  --accent: #3B246B;
  --accent-light: #B9A6F8;
  --ink: #15122B;
  --good: #15803d;
  --good-bg: #dcfce7;
  --warn: #b45309;
  --warn-bg: #fef3c7;
  --crit: #b91c1c;
  --crit-bg: #fee2e2;
  --neutral-bg: #F3EEFC;
  --shadow-card: 0 1px 2px rgba(20,15,40,0.05), 0 10px 30px rgba(20,15,40,0.06);
  --sidebar-width: 264px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.btn-primary {
  background: var(--ink);
  color: #ffffff;
  border: 1px solid var(--ink);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-primary:hover { background: #201c3d; }

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 22px 14px;
  z-index: 10;
  overflow-y: auto;
}
/* De opmaak van de zijbalk staat sinds de brede navigatie in views/partials/sidebar.ejs. De regels voor .sidebar-logo, .sidebar-nav-bottom en .sidebar-user hoorden bij de oude markup en zijn hier weggehaald. */

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }

.sidebar-divider { height: 1px; background: var(--border); margin: 14px 8px; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.sidebar-link:hover { background: var(--neutral-bg); color: var(--accent); }
.sidebar-link.active { background: var(--neutral-bg); color: var(--accent); font-weight: 700; }
.sidebar-icon { width: 18px; height: 18px; flex-shrink: 0; display: flex; }
.sidebar-icon svg { width: 100%; height: 100%; }
.sidebar-link .badge-count { margin-left: auto; }
.location-switcher { margin-bottom: 14px; }
.location-switcher-label {
    display: block;
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 6px 4px;
}
.location-switcher-box { position: relative; background: #1E2A5A; border-radius: 10px; }
.location-switcher-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #ffffff; width: 15px; height: 15px; pointer-events: none; }
.location-switcher-chevron { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #ffffff; width: 13px; height: 13px; pointer-events: none; }
.location-switcher-select {
    width: 100%;
    padding: 10px 32px 10px 36px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.location-switcher-static {
    padding: 10px 32px 10px 36px;
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
}
  
.sidebar-footer { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 10px; }





/* Het werkscherm vult de volle breedte naast de zijbalk: geen vaste max-width
   die op brede schermen een smalle kolom in het midden achterlaat. De content
   loopt van de zijbalk tot de rechtermarge en de kaarten/grids groeien mee.
   Op zeer brede schermen een ruime bovengrens zodat regels niet eindeloos lang
   worden, maar veel royaler dan voorheen. */
.wrap { max-width: 2560px; margin-left: calc(var(--sidebar-width) + 32px); padding: 28px 32px 28px 0; }
.wrap.wrap-wide { max-width: none; }

.btn {
  background: none; border: 1px solid var(--border); padding: 6px 12px; border-radius: 6px;
  cursor: pointer; font-size: 13px; color: var(--text);
}
.btn:hover { background: var(--neutral-bg); }
/* Oranje en niet rood: dit getal betekent "hier ligt werk", niet "er is iets
   mis". Rood leest als een storing, en dan schrikt iedereen van drie leads die
   gewoon nog gecontroleerd moeten worden. Dezelfde amber als de andere
   aandachtsmeldingen op het platform. */
.badge-count { background: var(--warn); color: white; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; margin-left: 4px; }

.aiboard-eyebrow { color: var(--muted); font-size: 13px; margin: 0 0 2px; }
.aiboard-heading { font-size: 34px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.01em; }
.aiboard-sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; }

.aiboard-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }

.aiboard-hero {
  position: relative;
  background: linear-gradient(135deg, #F3EEFC 0%, #EDEBFB 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 30px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.aiboard-hero-glow {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185,166,248,0.55) 0%, rgba(185,166,248,0) 70%);
  pointer-events: none;
}
.aiboard-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
  position: relative;
}
.aiboard-hero-label-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.aiboard-hero-label-icon svg { width: 14px; height: 14px; }
.aiboard-hero-title {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 10px;
  max-width: 520px;
  position: relative;
}
.aiboard-hero-note {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 20px;
  position: relative;
}
.aiboard-hero-actions { display: flex; align-items: center; gap: 18px; position: relative; }
.aiboard-hero-link { color: var(--accent); font-size: 14px; font-weight: 600; text-decoration: none; }
.aiboard-hero-link:hover { text-decoration: underline; }

.aiboard-list { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-top: 18px; box-shadow: var(--shadow-card); }
.aiboard-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.aiboard-row:last-child { border-bottom: none; }
.aiboard-row:hover { background: #fbfaff; }
.aiboard-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.aiboard-num.urgent { background: var(--crit-bg); color: var(--crit); }
.aiboard-num.letop { background: var(--warn-bg); color: var(--warn); }
.aiboard-num.planning { background: #E6F1FB; color: #185FA5; }
.aiboard-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.aiboard-avatar.urgent { background: #FAECE7; color: #993C1D; }
.aiboard-avatar.letop { background: var(--warn-bg); color: var(--warn); }
.aiboard-avatar.planning { background: #E6F1FB; color: #185FA5; }
.aiboard-row-naam { font-size: 15px; font-weight: 700; margin: 0; }
.aiboard-row-detail { font-size: 13px; color: var(--muted); margin: 2px 0 0; }
.aiboard-pill {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  margin-left: auto;
}
.aiboard-pill.urgent { background: var(--crit-bg); color: var(--crit); }
.aiboard-pill.letop { background: var(--warn-bg); color: var(--warn); }
.aiboard-pill.planning { background: #E6F1FB; color: #185FA5; }
.aiboard-chevron { color: var(--muted); font-size: 20px; margin-left: 6px; }

.aiboard-side { display: flex; flex-direction: column; gap: 16px; }
.aiboard-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
.aiboard-card-label { font-size: 13px; font-weight: 600; margin: 0 0 14px; }
.aiboard-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.aiboard-ring { position: relative; width: 128px; height: 128px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.aiboard-ring-inner { position: absolute; inset: 10px; background: var(--card); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.aiboard-ring-value { font-size: 20px; font-weight: 800; }
.aiboard-ring-label { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.3; }
.aiboard-ring-foot { font-size: 12px; color: var(--muted); }

.aiboard-metric { font-size: 30px; font-weight: 800; margin: 0; }
.aiboard-metric-delta { font-size: 12px; font-weight: 700; color: var(--accent); margin: 2px 0 12px; }
.aiboard-sparkline { width: 100%; height: 46px; display: block; }

.aiboard-chatbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 8px 6px 18px;
  margin-top: 20px;
  box-shadow: var(--shadow-card);
}
.aiboard-chatbar-icon { color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.aiboard-chatbar input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  background: transparent;
  padding: 8px 0;
}
.aiboard-chatbar button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); }
thead th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--muted); padding: 7px 12px; border-bottom: 1px solid var(--border); background: var(--neutral-bg); white-space: nowrap; }
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; line-height: 1.35; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfc; }

.truncate {
  display: block;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge.bezig { background: var(--warn-bg); color: var(--warn); }
.badge.afspraak_gepland { background: var(--good-bg); color: var(--good); }
.badge.geen_afspraak_gepland { background: var(--crit-bg); color: var(--crit); }
.badge.online_afspraak_gepland { background: #3B246B; color: #ffffff; }
.badge.review { background: var(--neutral-bg); color: var(--muted); }

.journey { display: flex; align-items: center; gap: 3px; margin-top: 5px; }
.journey-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.journey-dot.filled { background: var(--accent); }
.journey-dot.current { background: var(--card); border: 2px solid var(--accent); width: 7px; height: 7px; box-sizing: border-box; }
.journey-label { font-size: 10px; color: var(--muted); margin-top: 2px; line-height: 1.3; }

.name { font-weight: 600; }
.muted { color: var(--muted); font-size: 12px; }

.channel-buttons { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 0; }
.channel-buttons form { margin: 0; }
.channel-buttons select {
  padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; font-family: inherit;
  max-width: 96px;
}
.channel-btn {
  border: 1px solid var(--border); background: var(--card); border-radius: 6px; padding: 4px 8px;
  font-size: 12px; cursor: pointer; white-space: nowrap;
}
.channel-btn:hover { background: var(--neutral-bg); }

.todo-form { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.todo-form select {
  padding: 4px 5px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; font-family: inherit;
  max-width: 88px;
}
.todo-form .btn { padding: 4px 9px; font-size: 12px; white-space: nowrap; }
.todo-form-wrap { flex-wrap: wrap; }

.todo-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  margin-right: 4px;
}
.todo-label.contact { background: var(--neutral-bg); color: var(--accent); }

.pending-outcome { background: var(--warn-bg); border: 1px solid #f3d38a; border-radius: 8px; padding: 6px 8px; margin-top: 4px; }
.pending-outcome .q { font-size: 12px; color: var(--warn); margin-bottom: 5px; }
.outcome-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.outcome-buttons form { margin: 0; }
.outcome-btn { border: none; border-radius: 6px; padding: 4px 8px; font-size: 12px; cursor: pointer; color: white; white-space: nowrap; }
.outcome-btn.groen { background: var(--good); }
.outcome-btn.rood { background: var(--crit); }
.outcome-btn.oranje { background: var(--warn); }

.history-list { list-style: none; padding: 0; margin: 6px 0 0; }
.history-list li { font-size: 12px; color: var(--muted); padding: 2px 0; }

.month-nav { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.month-nav a { color: var(--accent); text-decoration: none; font-size: 14px; }
.month-nav h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-card); }
.stat-card .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.stat-card .value { font-size: 26px; font-weight: 600; margin-top: 4px; }

body.auth-body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
}

.auth-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.auth-heading {
  font-size: 30px;
  font-weight: 800;
  color: var(--accent);
  margin: 0 0 28px;
  letter-spacing: -0.01em;
}

.auth-logo {
  height: 54px;
  width: auto;
  margin: 0 0 28px;
}

.auth-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 36px 40px;
  width: 400px;
  box-shadow: var(--shadow-card);
}

.field-label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }

.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}

.password-field { position: relative; }
.password-field input { padding-right: 40px; }
.toggle-password {
  position: absolute;
  right: 8px;
  top: 8px;
  background: none;
  border: none;
  padding: 6px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
}
.toggle-password:hover { color: var(--accent); }
.toggle-password.is-visible { color: var(--accent-light); }

.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 20px; cursor: pointer; }
.checkbox-row input { width: auto; margin: 0; accent-color: var(--accent-light); }

.auth-submit {
  width: 100%;
  padding: 13px;
  background: var(--ink);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.auth-submit:hover { background: #201c3d; }

.auth-link { display: block; text-align: center; margin-top: 24px; color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600; }
.auth-link:hover { text-decoration: underline; }

.error { color: var(--crit); font-size: 13px; margin-bottom: 14px; }

/* Meldingen boven aan de leadlijst en het leaddetail.

   Ze werden allemaal in het rood van .error getoond, ook bevestigingen als
   "De reactie is vastgelegd". Dat leest als een foutmelding terwijl er juist
   iets goed ging - en het maakt rood waardeloos, want als alles rood is valt
   een echte fout niet meer op. Welke melding waar hoort staat in
   MELDING_BEVESTIGING in routes/leads.js. */
.melding {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border-radius: 12px;
    padding: 11px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}
.melding::before {
    font-size: 14px;
    line-height: 1.3;
    flex-shrink: 0;
}
.melding.goed { background: var(--good-bg); border: 1px solid #A7D9B8; color: #146C43; }
.melding.goed::before { content: "\2713"; }
.melding.fout { background: var(--crit-bg); border: 1px solid #F3B4B4; color: var(--crit); }
.melding.fout::before { content: "\26A0"; }

.back-link { display: inline-block; margin-bottom: 14px; color: var(--accent); text-decoration: none; font-size: 13px; }

.period-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.period-tabs a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); text-decoration: none; color: var(--text); font-size: 13px; }
.period-tabs a.active { background: var(--accent); color: white; border-color: var(--accent); }

.channel-bars { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-card); }
.channel-bar-row { display: grid; grid-template-columns: 140px 1fr 40px; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.channel-bar-track { background: var(--neutral-bg); border-radius: 6px; height: 10px; overflow: hidden; }
.channel-bar-fill { background: var(--accent); height: 100%; }

.edit-form input { padding: 5px 7px; border: 1px solid var(--border); border-radius: 5px; font-size: 12px; width: 100%; margin-bottom: 4px; }
.edit-form { margin-top: 6px; }

.vestiging-badge {
  background: var(--accent);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.vestiging-switch { display: flex; gap: 6px; flex-wrap: wrap; }
.vestiging-switch form { margin: 0; }

.trend { font-size: 12px; font-weight: 700; margin-top: 6px; display: inline-block; padding: 2px 8px; border-radius: 999px; }
.trend-up { color: var(--good); background: var(--good-bg); }
.trend-down { color: var(--crit); background: var(--crit-bg); }
.trend-flat { color: var(--muted); background: var(--neutral-bg); }

.stat-card.status-oranje { border-left: 4px solid var(--warn); background: var(--warn-bg); }
.stat-card.status-groen { border-left: 4px solid var(--good); background: var(--good-bg); }
.stat-card.status-rood { border-left: 4px solid var(--crit); background: var(--crit-bg); }

.dash-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: stretch; margin-bottom: 22px; }
.dash-row .stat-card { min-width: 160px; }

.donut-card, .sparkline-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
}
.donut-card { min-width: 160px; }
.donut-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 8px; }

.sparkline-card { align-items: stretch; min-width: 260px; }
.sparkline { display: flex; align-items: flex-end; gap: 8px; height: 90px; }
.sparkline-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.sparkline-bar { width: 100%; max-width: 28px; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 3px; }
.sparkline-count { font-size: 11px; color: var(--muted); margin-top: 4px; }

.leaderboard { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); }
.leaderboard-row {
  display: grid; grid-template-columns: 32px 36px 1fr auto auto 60px;
  align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.leaderboard-row:last-child { border-bottom: none; }
.leaderboard-medal { font-size: 18px; text-align: center; color: var(--muted); }
.avatar-circle {
  width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #ffffff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.leaderboard-naam { font-weight: 600; }
.leaderboard-stat { font-size: 13px; color: var(--muted); white-space: nowrap; }
.leaderboard-conversie { font-weight: 700; text-align: right; color: var(--accent); }

@media (max-width: 860px) {
  /* Ook het mobiele gedrag van de zijbalk staat in views/partials/sidebar.ejs. De regels die hier stonden hoorden bij de oude horizontale icoonrij en verborgen de labels en het onderblok. */
  
  
  
  
  .wrap { margin-left: 0; padding: 16px; }
  .aiboard-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .month-nav { flex-direction: column; align-items: flex-start; gap: 6px; }
  .period-tabs { width: 100%; }
  .channel-bar-row { grid-template-columns: 100px 1fr 30px; }
  .dash-row { grid-template-columns: 1fr; }
  .leaderboard-row { grid-template-columns: 24px 30px 1fr auto; }
  .leaderboard-stat:nth-child(4) { display: none; }
}

@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; }

table:has(td[data-label]) thead { display: none; }
  table:has(td[data-label]) { border: none; background: transparent; box-shadow: none; }
  table:has(td[data-label]) tbody,
  table:has(td[data-label]) tr,
  table:has(td[data-label]) td {
    display: block;
    width: 100%;
  }
  table:has(td[data-label]) tbody tr {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 4px 0;
  }
  table:has(td[data-label]) tbody tr:hover { background: var(--card); }
  table:has(td[data-label]) tbody td {
    border-bottom: none;
    padding: 8px 14px;
  }
  table:has(td[data-label]) tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
    margin-bottom: 3px;
  }

.wrap > table:not(:has(td[data-label])) {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

.truncate { max-width: none; white-space: normal; }

.auth-card { width: 100%; padding: 28px 22px; }
}

/* Leadlijst v2: kaarten + tabs + zijpaneel, naast (niet in plaats van) de
   bestaande tabelweergave-classes hierboven, zodat oudere pagina's die de
   tabel nog gebruiken (bijv. Te controleren) niets breekt. */

.lead-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; }
.lead-tab {
    padding: 10px 2px;
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.lead-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
.lead-tab-count { background: var(--neutral-bg); color: var(--muted); font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.lead-tab.active .lead-tab-count { background: var(--accent); color: #ffffff; }

.lead-list { display: flex; flex-direction: column; gap: 10px; }
.lead-card {
    display: grid;
    grid-template-columns: auto 1.4fr auto auto;
    align-items: center;
    gap: 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 18px;
    cursor: pointer;
    box-shadow: var(--shadow-card);
    text-align: left;
    width: 100%;
    font-family: inherit;
}
.lead-card.actief { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); }
.lead-card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--neutral-bg);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.lead-card-naam { font-weight: 700; font-size: 15px; margin: 0; }
.lead-card-sub { font-size: 12px; color: var(--muted); margin: 2px 0 8px; }

.lead-stepper { display: flex; align-items: center; justify-content: center; gap: 4px; }
.lead-step-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.lead-step-dot.gevuld { background: var(--accent); }
.lead-step-dot.huidig { background: var(--card); border: 3px solid var(--accent); box-sizing: border-box; width: 16px; height: 16px; }
.lead-step-lijn { width: 26px; height: 3px; background: var(--border); flex-shrink: 0; }
.lead-step-lijn.gevuld { background: var(--accent); }

.lead-card-actie { min-width: 220px; }
.lead-card-toegewezen { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }

.lead-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 15, 40, 0.15);
    /* Boven de vaste bovenbalk (z-index 70) en het gebruikersmenu (80): het
       leadpaneel is een slide-over en hoort over alles heen, anders schuift de
       bovenkant achter de bovenbalk (zoals bij de campagne-drawer). */
    z-index: 100;
    display: none;
}
.lead-panel-overlay.open { display: block; }
.lead-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 92vw;
    background: var(--card);
    box-shadow: -8px 0 30px rgba(20, 15, 40, 0.12);
    z-index: 101;
    transform: translateX(100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
    padding: 26px;
}
.lead-panel.open { transform: translateX(0); }
/* Rode balk in het paneel zelf, bijv. als een afspraak nog niet compleet is. */
.lead-panel-fout {
    margin: 0 0 16px;
    padding: 11px 14px;
    border-radius: 10px;
    background: #FDECEA;
    border: 1px solid #F3B4AD;
    color: #B3261E;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
}
/* Naam met een potlood-icoon om de gegevens te bewerken (i.p.v. een aparte
   knop, zodat er minder in beeld staat). */
.lead-panel-naamrij { display: flex; align-items: center; gap: 8px; }
.lead-panel-bewerk-icoon {
    flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center;
    border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--muted);
    cursor: pointer; padding: 0;
}
.lead-panel-bewerk-icoon svg { width: 15px; height: 15px; }
.lead-panel-bewerk-icoon:hover { color: var(--accent); border-color: var(--accent-light); background: var(--neutral-bg); }
.lead-panel-bewerk-icoon.actief { color: var(--accent); border-color: var(--accent); background: var(--neutral-bg); }
.lead-panel-bewerk-blok { margin: 12px 0 4px; }
.lead-panel-bewerk-blok[hidden] { display: none; }

.lead-panel-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--muted);
    cursor: pointer;
    line-height: 1;
}
.lead-panel-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.lead-panel-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--neutral-bg);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}
.lead-panel-naam { font-size: 18px; font-weight: 800; margin: 0; }
.lead-panel-meta { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.lead-panel-quickactions { display: flex; gap: 8px; margin-bottom: 22px; }
.lead-panel-quickactions a {
    flex: 1;
    text-align: center;
    padding: 9px 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
    color: var(--text);
}
.lead-panel-quickactions a:hover { background: var(--neutral-bg); }
/* De kaart zelf blijft licht: er staan witte keuzeknoppen in en die zijn op een
   donkere ondergrond niet te lezen. Alleen de kop krijgt het paars van de
   actieknop in de leadlijst, zodat je in het paneel meteen ziet waar de
   volgende stap staat. Vandaar padding aan de zijkant weghalen en de kop met
   een negatieve marge doortrekken tot de rand. */
.lead-panel-actie-card {
    background: var(--neutral-bg);
    border-radius: 12px;
    padding: 0 16px 16px;
    margin-bottom: 22px;
    overflow: hidden;
}
.lead-panel-actie-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 -16px 12px;
    padding: 11px 16px;
    background: linear-gradient(110deg, #3B246B 0%, #6842D8 100%);
}
.lead-panel-actie-tekst { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.lead-panel-activiteit { list-style: none; padding: 0; margin: 0; }
.lead-panel-activiteit li {
    font-size: 13px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--text);
}
.lead-panel-activiteit li:last-child { border-bottom: none; }
.lead-panel-activiteit .tijd { color: var(--muted); font-size: 12px; white-space: nowrap; }
.lead-panel-volledig {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    font-size: 13px;
}

@media (max-width: 780px) {
    .lead-card { grid-template-columns: auto 1fr; }
    .lead-card-stepper-wrap,
    .lead-card-toegewezen { display: none; }
    .lead-card-actie { grid-column: 1 / -1; margin-top: 6px; }
}
@media (max-width: 640px) {
    .lead-panel { width: 100vw; }
}

/* Leadlijst v3: kop met ondertitel + toolbar, kolomkoppen boven de kaarten,
   een echte actieknop per rij, en een iets rijker paneel-menu. */
.lead-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.lead-page-header h1 { font-size: 28px; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.01em; }
.lead-page-header p { color: var(--muted); font-size: 14px; margin: 0; }

.lead-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.lead-toolbar .search-wrap { flex: 1; min-width: 200px; position: relative; }
.lead-toolbar .search-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.lead-toolbar input[type="text"] {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}
.lead-toolbar select {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: var(--card);
    color: var(--text);
}

.lead-list-header {
    display: grid;
    grid-template-columns: auto 1.4fr auto auto;
    align-items: center;
    gap: 18px;
    padding: 0 18px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.lead-list-header .lc-avatar-col { width: 40px; }
.lead-header-stepper { display: flex; justify-content: center; gap: 4px; }
.lead-header-stepper span { width: 42px; text-align: center; font-size: 10px; }

.lead-card-actie-rij { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lead-card-actie-btn {
    background: var(--ink);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.lead-card-toegewezen {
    display: flex;
    align-items: center;
    gap: 6px;
}
.lead-card-toegewezen svg { flex-shrink: 0; }

.lead-panel-menu-row { display: flex; align-items: center; gap: 8px; position: absolute; top: 18px; right: 46px; }
.lead-panel-menu-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
}

@media (max-width: 780px) {
    .lead-list-header { display: none; }
    .lead-page-header { flex-direction: column; }
}

/* Dashboard v2: statistiekkaarten met sparkline, conversietrechter,
   "Aandacht nodig", lijndiagram, bronnen-balken en medewerkerstabel. */

.dash-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.dash-header h1 { font-size: 28px; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.01em; }
.dash-header p { color: var(--muted); font-size: 14px; margin: 0; }
.dash-vs { color: var(--muted); font-size: 13px; margin-left: 10px; }

.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 20px 0; }
.dash-stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-card); }
.dash-stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 8px; }
.dash-stat-value-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.dash-stat-value { font-size: 26px; font-weight: 800; }
.dash-stat-sparkline { width: 100%; height: 34px; display: block; }

.dash-grid { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; margin-bottom: 18px; }

.dash-funnel-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow-card); }
.dash-funnel-title { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.dash-funnel-sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.dash-funnel-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.dash-funnel-icon {
    width: 34px; height: 34px; border-radius: 50%; background: var(--neutral-bg); color: var(--accent);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dash-funnel-label { width: 76px; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.dash-funnel-track { flex: 1; background: var(--neutral-bg); border-radius: 999px; height: 22px; overflow: hidden; }
.dash-funnel-fill { background: var(--accent); height: 100%; border-radius: 999px; }
.dash-funnel-count { width: 90px; text-align: right; font-size: 13px; color: var(--text); flex-shrink: 0; white-space: nowrap; }

.dash-side { display: flex; flex-direction: column; gap: 18px; }
.dash-aandacht-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow-card); }
.dash-aandacht-title { font-size: 14px; font-weight: 700; margin: 0 0 12px; }
.dash-aandacht-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 0; border-top: 1px solid var(--border); text-decoration: none; color: inherit; font-size: 13px;
}
.dash-aandacht-item:first-of-type { border-top: none; }
.dash-aandacht-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex-shrink: 0; margin-right: 8px; }
.dash-aandacht-item:hover { color: var(--accent); }

.dash-bronnen-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow-card); }
.dash-bronnen-title { font-size: 16px; font-weight: 700; margin: 0 0 16px; }
.dash-bron-row { display: grid; grid-template-columns: 110px 1fr 30px; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.dash-bron-track { background: var(--neutral-bg); border-radius: 6px; height: 10px; overflow: hidden; }
.dash-bron-fill { background: var(--accent); height: 100%; }

.dash-lijn-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow-card); }
.dash-lijn-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; display: flex; align-items: center; gap: 16px; }
.dash-lijn-legenda { display: flex; gap: 16px; font-size: 12px; color: var(--muted); font-weight: 500; }
.dash-lijn-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.dash-lijn-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dash-lijn-svg { width: 100%; height: 220px; display: block; margin-top: 10px; }
.dash-lijn-as { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; }

.dash-medewerker-table { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card); }
.dash-medewerker-head {
    display: grid; grid-template-columns: 1fr 90px 90px 160px; gap: 10px; padding: 14px 20px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); background: var(--neutral-bg);
}
.dash-medewerker-row {
    display: grid; grid-template-columns: 1fr 90px 90px 160px; align-items: center; gap: 10px; padding: 12px 20px;
    border-top: 1px solid var(--border); font-size: 13px;
}
.dash-medewerker-naam { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.dash-medewerker-progress-track { background: var(--neutral-bg); border-radius: 999px; height: 8px; flex: 1; overflow: hidden; }
.dash-medewerker-progress-fill { background: var(--accent); height: 100%; }
.dash-medewerker-pct-row { display: flex; align-items: center; gap: 8px; }
.dash-medewerker-pct-label { width: 34px; text-align: right; font-weight: 700; }

@media (max-width: 900px) {
    .dash-stats { grid-template-columns: 1fr 1fr; }
    .dash-grid { grid-template-columns: 1fr; }
    .dash-medewerker-head, .dash-medewerker-row { grid-template-columns: 1fr 70px 70px 110px; }
}
@media (max-width: 640px) {
    .dash-stats { grid-template-columns: 1fr; }
    .dash-header { flex-direction: column; }
}

/* AI-Board v3: prioriteitskaart met bewijslabels, Dagfocus/Reactiesnelheid
   met echte lege staat, en een actiegerichte "Nu oppakken"-lijst. */

.aiboard-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.aiboard-datum {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--muted); font-size: 14px; white-space: nowrap; padding-top: 8px;
}

.aiboard-hero { border-radius: 22px; box-shadow: 0 8px 24px rgba(31, 18, 65, 0.06); }
.aiboard-hero-body { position: relative; max-width: 560px; }

.aiboard-bewijs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; position: relative; }
.aiboard-bewijs-item {
    display: inline-flex; align-items: center; gap: 7px;
    background: #ffffff; border: 1px solid var(--border);
    border-radius: 10px; padding: 7px 12px; font-size: 13px; font-weight: 600;
}
.aiboard-bewijs-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.aiboard-bewijs-item.tijd { color: #b3261e; }
.aiboard-bewijs-item.pogingen { color: var(--accent); }
.aiboard-bewijs-item.prioriteit { color: #b3261e; }

.aiboard-waarom { position: relative; margin-top: 4px; }
.aiboard-waarom summary {
    cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600;
    list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.aiboard-waarom summary::-webkit-details-marker { display: none; }
.aiboard-waarom p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 10px 0 0; }

.aiboard-hero-visual {
    position: absolute; top: 50%; right: 24px; transform: translateY(-50%);
    width: 260px; height: 260px; pointer-events: none; opacity: 0.85;
}
.aiboard-hero-visual svg { width: 100%; height: 100%; display: block; }

.aiboard-btn-secundair {
    display: inline-flex; align-items: center; gap: 8px;
    background: #ffffff; border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--text);
    text-decoration: none; font-family: inherit; cursor: pointer;
}
.aiboard-btn-secundair:hover { background: var(--neutral-bg); }

.aiboard-card { border-radius: 20px; box-shadow: 0 8px 24px rgba(31, 18, 65, 0.06); }
.aiboard-card-titel { font-size: 15px; font-weight: 700; margin: 0 0 16px; }
.aiboard-leeg {
    display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
    padding: 10px 0 4px;
}
.aiboard-leeg-titel { font-size: 14px; font-weight: 600; color: var(--muted); margin: 0; }
.aiboard-leeg-sub { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5; }

.aiboard-lijst-kop { display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; }
.aiboard-lijst-kop h2 { font-size: 18px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.aiboard-lijst-telling {
    background: var(--neutral-bg); color: var(--accent);
    font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}

.aiboard-actie-rij {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px 14px 0; border-bottom: 1px solid var(--border); position: relative;
}
.aiboard-actie-rij:last-child { border-bottom: none; }
.aiboard-urgentiebalk { width: 4px; align-self: stretch; border-radius: 0 4px 4px 0; flex-shrink: 0; }
.aiboard-urgentiebalk.nu { background: #d93025; }
.aiboard-urgentiebalk.vandaag { background: #e8710a; }
.aiboard-urgentiebalk.normaal { background: var(--accent-light); }

.aiboard-num.nu { background: #fdecea; color: #b3261e; }
.aiboard-num.vandaag { background: #fef3e2; color: #a35200; }
.aiboard-num.normaal { background: var(--neutral-bg); color: var(--accent); }
.aiboard-avatar.nu { background: #fdecea; color: #b3261e; }
.aiboard-avatar.vandaag { background: #fef3e2; color: #a35200; }
.aiboard-avatar.normaal { background: var(--neutral-bg); color: var(--accent); }
.aiboard-pill.nu { background: #fdecea; color: #b3261e; }
.aiboard-pill.vandaag { background: #fef3e2; color: #a35200; }
.aiboard-pill.normaal { background: var(--neutral-bg); color: var(--accent); }

.aiboard-actie-info { flex: 1; min-width: 0; }
.aiboard-actie-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 3px 0 0; }
.aiboard-actie-meta span { display: inline-flex; align-items: center; gap: 5px; }
.aiboard-actie-meta svg { width: 13px; height: 13px; flex-shrink: 0; }
.aiboard-actie-meta .stil { color: #b3261e; font-weight: 600; }

.aiboard-actie-knop {
    display: inline-flex; align-items: center; gap: 7px;
    border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 700;
    text-decoration: none; white-space: nowrap; font-family: inherit; cursor: pointer;
}
.aiboard-actie-knop svg { width: 14px; height: 14px; flex-shrink: 0; }
.aiboard-actie-knop.primair { background: var(--ink); color: #ffffff; border: 1px solid var(--ink); }
.aiboard-actie-knop.primair:hover { background: #201c3d; }
.aiboard-actie-knop.secundair { background: #ffffff; color: var(--text); border: 1px solid var(--border); }
.aiboard-actie-knop.secundair:hover { background: var(--neutral-bg); }

.aiboard-chatbar { border-radius: 999px; box-shadow: 0 8px 24px rgba(31, 18, 65, 0.06); }

@media (max-width: 1100px) {
    .aiboard-hero-visual { display: none; }
    .aiboard-hero-body { max-width: none; }
}
@media (max-width: 780px) {
    .aiboard-topbar { flex-direction: column; gap: 8px; }
    .aiboard-actie-rij { flex-wrap: wrap; }
}

/* Leadlijst v4: één gezamenlijk lijstpaneel met CSS Grid-kolommen, een
   gelabelde proceslijn en een aparte "Volgende stap"-kolom. */

.ll-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.ll-top h1 { font-size: 30px; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.01em; }
.ll-top p { color: var(--muted); font-size: 14px; margin: 0; }

.ll-maandnav {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    padding: 6px; box-shadow: 0 8px 24px rgba(31, 18, 65, 0.06);
}
.ll-maandnav a {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600;
    padding: 8px 12px; border-radius: 10px; white-space: nowrap;
}
.ll-maandnav a:hover { background: var(--neutral-bg); color: var(--accent); }
.ll-maandnav a svg { width: 15px; height: 15px; }
.ll-maandnav-label { font-size: 15px; font-weight: 800; padding: 0 12px; white-space: nowrap; }

.ll-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ll-zoek { flex: 1; min-width: 240px; position: relative; }
.ll-zoek > svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.ll-zoek input[type="text"] {
    width: 100%; padding: 13px 46px 13px 44px;
    border: 1px solid var(--border); border-radius: 14px;
    font-size: 14px; font-family: inherit; background: var(--card);
}
.ll-zoek input[type="text"]:focus { outline: 2px solid var(--accent-light); outline-offset: -1px; }
.ll-zoek button {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 9px; border: none;
    background: var(--neutral-bg); color: var(--accent);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ll-zoek button:hover { background: var(--accent); color: #ffffff; }

.ll-filterbadge {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    padding: 12px 18px; font-size: 14px; font-weight: 600; color: var(--text);
}
.ll-filterbadge svg { width: 16px; height: 16px; color: var(--muted); }
.ll-filterbadge .telling {
    background: var(--accent); color: #ffffff; border-radius: 999px;
    font-size: 12px; font-weight: 700; min-width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}

.ll-filters { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.ll-filters select {
    appearance: none; -webkit-appearance: none;
    background: var(--card) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B6280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
    background-size: 15px;
    border: 1px solid var(--border); border-radius: 12px;
    padding: 11px 40px 11px 16px; font-size: 14px; font-family: inherit;
    color: var(--text); cursor: pointer;
}
.ll-filters select:focus { outline: 2px solid var(--accent-light); outline-offset: -1px; }

.ll-tabs { display: flex; gap: 10px; margin-bottom: 18px; }
.ll-tab {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 22px; border-radius: 14px;
    border: 1px solid var(--border); background: var(--card);
    color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 600;
}
.ll-tab:hover { background: var(--neutral-bg); }
.ll-tab.active { background: var(--neutral-bg); border-color: var(--accent-light); color: var(--accent); font-weight: 700; }
.ll-tab-count {
    background: var(--border); color: var(--muted);
    border-radius: 999px; font-size: 12px; font-weight: 700;
    min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px;
}
.ll-tab.active .ll-tab-count { background: var(--ink); color: #ffffff; }

.ll-panel {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 22px; overflow: hidden;
    box-shadow: 0 8px 24px rgba(31, 18, 65, 0.06);
}
.ll-grid { display: grid; grid-template-columns: 31% 30% 19% 20%; align-items: center; gap: 16px; }
.ll-head {
    padding: 18px 24px; border-bottom: 1px solid var(--border);
    font-size: 13px; font-weight: 600; color: var(--muted);
}
.ll-rij { padding: 20px 24px; border-bottom: 1px solid var(--border); position: relative; }
.ll-rij:last-child { border-bottom: none; }

.ll-lead { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.ll-statusbalk { width: 4px; align-self: stretch; border-radius: 3px; flex-shrink: 0; background: var(--accent-light); }
.ll-statusbalk.positief { background: #2e7d4f; }
.ll-statusbalk.actie { background: var(--accent); }
.ll-statusbalk.gesloten { background: var(--border); }
.ll-avatar {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
    background: var(--neutral-bg); color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.ll-lead-tekst { min-width: 0; }
.ll-naam { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.ll-bron {
    font-size: 13px; color: var(--muted); margin: 0 0 8px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.ll-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ll-datum { font-size: 13px; color: var(--muted); white-space: nowrap; }

.ll-fase { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ll-stepper { display: flex; align-items: flex-start; justify-content: center; }
.ll-stap { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 62px; flex-shrink: 0; }
.ll-stap-dot { width: 15px; height: 15px; border-radius: 50%; background: var(--accent-light); box-sizing: border-box; }
.ll-stap-dot.gedaan { background: var(--accent); }
.ll-stap-dot.huidig { background: var(--card); border: 3px solid var(--accent); box-shadow: 0 0 0 4px rgba(185, 166, 248, 0.28); }
.ll-stap-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ll-stap-lijn { height: 3px; flex: 1; min-width: 14px; background: var(--accent-light); margin-top: 6px; border-radius: 2px; }
.ll-stap-lijn.gedaan { background: var(--accent); }
.ll-wacht { font-size: 13px; color: var(--muted); text-align: center; }

.ll-volgende-titel { font-size: 15px; font-weight: 700; margin: 0; }
.ll-actie-cel { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.ll-actie-knop {
    flex: 1; max-width: 210px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ink); color: #ffffff; border: 1px solid var(--ink);
    border-radius: 12px; padding: 13px 16px;
    font-size: 14px; font-weight: 700; font-family: inherit;
    text-align: center; cursor: pointer; text-decoration: none; line-height: 1.3;
}
.ll-actie-knop:hover { background: #201c3d; }
.ll-chevron {
    color: var(--muted); font-size: 24px; line-height: 1; text-decoration: none;
    padding: 4px 6px; border-radius: 8px; flex-shrink: 0;
}
.ll-chevron:hover { background: var(--neutral-bg); color: var(--accent); }

.ll-leeg { padding: 56px 24px; text-align: center; color: var(--muted); font-size: 14px; }

@media (max-width: 1180px) {
    .ll-grid { grid-template-columns: 34% 30% 16% 20%; }
    .ll-stap { width: 54px; }
}
@media (max-width: 980px) {
    .ll-head { display: none; }
    .ll-grid { grid-template-columns: 1fr; gap: 18px; }
    .ll-rij { padding: 20px; }
    .ll-actie-cel { justify-content: flex-start; }
    .ll-actie-knop { flex: none; width: 100%; max-width: none; }
}
@media (max-width: 760px) {
    .ll-top { flex-direction: column; gap: 14px; }
    .ll-toolbar { flex-direction: column; align-items: stretch; }
    .ll-filterbadge { justify-content: center; }
    .ll-filters select { width: 100%; }
}

/* Bewerkformulier in het zijpaneel: standaard ingeklapt, zodat de volgende
   actie bovenaan de aandacht houdt. */
.lead-panel-bewerken { margin-bottom: 22px; border: 1px solid var(--border); border-radius: 12px; }
.lead-panel-bewerken summary {
    cursor: pointer; list-style: none;
    padding: 11px 14px; font-size: 13px; font-weight: 600; color: var(--accent);
}
.lead-panel-bewerken summary::-webkit-details-marker { display: none; }
.lead-panel-bewerken summary:hover { background: var(--neutral-bg); border-radius: 11px; }

/* De afspraak is het enige blok in deze rij dat iets toont wat áf is in plaats
   van een formulier dat je zelf openklapt. Twee standen, en de kleur zegt welke:

   - gepland (groen): datum en tijd liggen vast. Lichtpaars ging hier op in de
     rest van het paneel, en juist dit is wat je in één oogopslag wilt zien.
   - open (amber): de afspraak staat, het tijdstip nog niet. Dat is een
     openstaande taak en geen afgeronde stap. */
.lead-panel-afspraak.gepland { background: var(--good-bg); border-color: #A7D9B8; }
.lead-panel-afspraak.gepland summary { color: #146C43; font-weight: 700; }
.lead-panel-afspraak.gepland summary:hover { background: #CDEFD9; }

.lead-panel-afspraak.open { background: var(--warn-bg); border-color: #F0CE8E; }
.lead-panel-afspraak.open summary { color: var(--warn); font-weight: 700; }
.lead-panel-afspraak.open summary:hover { background: #FCE6B4; }

/* De kalender komt van de browser zelf. Zonder deze regels krijgt hij het
   standaardformaat van het besturingssysteem en staat hij naast de andere
   velden in het formulier uit de toon. De tijd is een keuzelijst per kwartier
   (zie tijdKeuze in views/partials/lead-panel.ejs) en moet er hetzelfde
   uitzien als de invoervelden ernaast. */
.lead-panel-bewerk-form input[type="date"],
.lead-panel-bewerk-form select[name^="tijd_"] {
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--card);
}
.lead-panel-bewerk-form select[name^="tijd_"] {
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.lead-panel-bewerk-form { padding: 4px 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.lead-panel-bewerk-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.lead-panel-bewerk-form input {
    padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 14px; font-family: inherit; color: var(--text);
}
.lead-panel-bewerk-form input:focus { outline: 2px solid var(--accent-light); outline-offset: -1px; }
.lead-panel-bewerk-form small { font-size: 11px; color: var(--muted); font-weight: 500; }
.lead-panel-bewerk-form button { align-self: flex-start; margin-top: 2px; }

/* Handmatig-toevoegen formulier. */
.ll-nieuw-form {
    background: var(--card); border: 1px solid var(--border); border-radius: 20px;
    padding: 26px; box-shadow: 0 8px 24px rgba(31, 18, 65, 0.06);
    display: flex; flex-direction: column; gap: 18px; max-width: 720px;
}
.ll-nieuw-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ll-nieuw-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ll-nieuw-form input {
    padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px;
    font-size: 14px; font-family: inherit; color: var(--text);
}
.ll-nieuw-form input:focus { outline: 2px solid var(--accent-light); outline-offset: -1px; }
.ll-nieuw-form small { font-size: 11px; color: var(--muted); font-weight: 500; }
.ll-nieuw-acties { display: flex; align-items: center; gap: 10px; }
@media (max-width: 640px) { .ll-nieuw-rij { grid-template-columns: 1fr; } }

/* Zes-staps proceslijn. 'Proefpas' is optioneel en krijgt daarom een
   lichtere, gestippelde ring; is die stap overgeslagen (direct ingeschreven)
   dan komt er een kruisje doorheen. */
.ll-stap-dot.optioneel { background: #E9E2FB; border: 2px dashed var(--accent-light); box-sizing: border-box; }
.ll-stap-dot.optioneel-gedaan { background: #A78BFA; }
.ll-stap-dot.overgeslagen {
    background: var(--accent-light); position: relative;
}
.ll-stap-dot.overgeslagen::before,
.ll-stap-dot.overgeslagen::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 9px; height: 2px; background: #ffffff; border-radius: 1px;
}
.ll-stap-dot.overgeslagen::before { transform: translate(-50%, -50%) rotate(45deg); }
.ll-stap-dot.overgeslagen::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ll-stap-label.optioneel { color: var(--accent-light); font-weight: 600; }

/* Actieve filters zichtbaar maken als verwijderbare chip. */
.ll-filter-actief {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--neutral-bg); border: 1px solid var(--accent-light);
    border-radius: 12px; padding: 10px 14px;
    font-size: 14px; font-weight: 600; color: var(--accent);
}
.ll-filter-actief a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    color: var(--accent); text-decoration: none; font-size: 15px; line-height: 1;
}
.ll-filter-actief a:hover { background: var(--accent); color: #ffffff; }

.ll-naam-knop {
    background: none; border: none; padding: 0; margin: 0 0 2px;
    font-family: inherit; font-size: 16px; font-weight: 700; color: var(--text);
    cursor: pointer; text-align: left; text-decoration: underline;
    text-decoration-color: var(--border); text-underline-offset: 3px;
}
.ll-naam-knop:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* De kolom 'Actie' is samengevoegd met 'Volgende stap', dus de lijst heeft
   nog drie kolommen. Deze regels staan bewust achteraan zodat ze de eerdere
   vier-koloms definitie overschrijven. */
.ll-grid { grid-template-columns: 34% 36% 30%; }
@media (max-width: 1180px) { .ll-grid { grid-template-columns: 32% 38% 30%; } }
@media (max-width: 980px) { .ll-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ */
/* Dashboard                                                           */
/* ------------------------------------------------------------------ */

/* Semantische kleur staat los van het paars van het merk: groen betekent
   "gaat goed", amber "let op". Zonder dat onderscheid was alles paars en
   sprong er niets uit. */

/* Zes getallen in twee rijen van drie. Vaste drie kolommen en geen auto-fit:
   met auto-fit verspringt de indeling naar 4+2 zodra het scherm iets breder is,
   en dan staan de twee rijen niet meer onder elkaar. */
.dash-kpi-rij {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}
@media (max-width: 1000px) { .dash-kpi-rij { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .dash-kpi-rij { grid-template-columns: 1fr; } }

/* Rustige kaarten in plaats van zes gekleurde vlakken. Zes keer een volle
   kleur naast elkaar is te druk om iets uit te laten springen; het getal doet
   hier het werk en de kaart houdt zich stil. De rangschikking is een flexkolom
   zodat de voetregels van alle zes op dezelfde hoogte uitkomen. */
.dash-kpi {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 15px 17px 13px;
}
/* Het aantal nieuwe leden is de uitkomst waar al het andere naartoe werkt en
   krijgt daarom als enige nadruk: een zachte lila ondergrond en het cijfer in
   het paars van het merk. Meer accenten op deze rij en er springt opnieuw
   niets uit. */
.dash-kpi.uitgelicht { background: var(--neutral-bg); border-color: #DDD0F7; }
.dash-kpi.uitgelicht .dash-kpi-cijfer { color: var(--accent); }
.dash-kpi.uitgelicht .dash-kpi-voet { border-top-color: #DDD0F7; }
/* De neutrale badge heeft dezelfde lila achtergrond als deze kaart en zou daar
   onzichtbaar in wegvallen; wit zet hem er weer op. */
.dash-kpi.uitgelicht .dash-norm.neutraal { background: #ffffff; }
.dash-kpi-etiket {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.dash-kpi-cijfer {
  font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums; margin: 8px 0 0;
}
/* margin-top:auto duwt de voetregel naar onderen, ook als er geen
   verschilbadge boven staat. Daardoor loopt er een rechte lijn door de hele
   rij in plaats van zes koppen op verschillende hoogtes. */
.dash-kpi-voet {
  font-size: 12px; color: var(--muted); line-height: 1.35;
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--border);
}
/* align-self is hier nodig, niet cosmetisch: in een flexkolom rekt een
   inline-flex badge anders over de hele kaartbreedte uit, en dan staat er een
   gekleurde balk in plaats van een pilletje. */
.dash-kpi .dash-norm { margin-top: 10px; align-self: flex-start; }
.dash-norm {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; border-radius: 999px;
  padding: 2px 9px; margin-top: 8px;
}
.dash-norm.gehaald { background: var(--good-bg); color: var(--good); }
.dash-norm.mis { background: var(--warn-bg); color: var(--warn); }
.dash-norm.neutraal { background: var(--neutral-bg); color: var(--accent); }

.dash-sectiekop { margin: 30px 0 12px; }
.dash-sectiekop h2 { font-size: 17px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.dash-sectiekop p { font-size: 13px; color: var(--muted); margin: 3px 0 0; }

.dash-tweekolom { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .dash-tweekolom { grid-template-columns: 1fr; } }

.dash-kaart {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
}
.dash-kaart-titel { font-size: 15px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.dash-kaart-sub { font-size: 12.5px; color: var(--muted); margin: 3px 0 0; }

/* Trechter met het verlies tussen de stappen */
.dash-stap { display: grid; grid-template-columns: 138px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; }
.dash-stap-naam { font-size: 13.5px; font-weight: 700; }
.dash-stap-balk { height: 26px; border-radius: 7px; background: var(--neutral-bg); overflow: hidden; }
.dash-stap-balk span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: 7px; }
.dash-stap-getal { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }
.dash-lek { display: grid; grid-template-columns: 138px 1fr; gap: 12px; font-size: 12px; padding: 1px 0 3px; }
.dash-pijl { color: var(--muted); margin-right: 4px; }
.dash-lek-goed { color: var(--good); font-weight: 700; }
.dash-lek-zorg { color: var(--crit); font-weight: 700; }
.dash-lek-neutraal { color: var(--muted); }
.dash-conclusie {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 13px; line-height: 1.5;
}
.dash-conclusie strong { color: var(--crit); }

/* Bevindingen: "wat werkt" */
.dash-bevinding { padding: 13px 0; border-bottom: 1px solid var(--border); }
.dash-bevinding:last-child { border-bottom: 0; padding-bottom: 0; }
.dash-zin { font-size: 13.5px; margin: 0; }
.dash-bewijs { font-size: 12px; color: var(--muted); margin: 3px 0 0; }
.dash-vergelijk { display: flex; gap: 8px; margin-top: 9px; }
.dash-vergelijk div { flex: 1; border-radius: 9px; padding: 8px 10px; }
.dash-vergelijk .snel { background: var(--good-bg); color: var(--good); }
.dash-vergelijk .traag { background: var(--crit-bg); color: var(--crit); }
.dash-vergelijk .groot { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; display: block; }
.dash-vergelijk .klein { font-size: 11.5px; font-weight: 600; }
.dash-bevinding-actie { display: grid; gap: 6px; }
.dash-actie {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--text); text-decoration: none;
  background: var(--neutral-bg); border-radius: 9px; padding: 9px 12px;
}
.dash-actie:hover { background: var(--accent-light); }
.dash-actie b { font-weight: 800; }

/* Verhoudingen: zelf geregeld tegenover werk van het team */
.dash-verhouding { padding: 14px 0; border-bottom: 1px solid var(--border); }
.dash-verhouding:first-of-type { padding-top: 2px; }
.dash-verhouding.laatste { border-bottom: 0; padding-bottom: 0; }
.dash-verhouding-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.dash-verhouding-titel { font-size: 13.5px; font-weight: 800; }
.dash-verhouding-som { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dash-split { display: flex; height: 34px; border-radius: 9px; overflow: hidden; background: var(--neutral-bg); }
.dash-split span {
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 28px;
}
.dash-split .deel-vol { background: var(--accent); color: #fff; }
.dash-split .deel-licht { background: var(--neutral-bg); color: var(--accent); }
.dash-split .deel-amber { background: var(--warn-bg); color: var(--warn); }
.dash-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.dash-legenda b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-stip { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 6px; }
.dash-stip.vol { background: var(--accent); }
.dash-stip.licht { background: var(--neutral-bg); border: 1px solid var(--accent-light); }
.dash-stip.amber { background: var(--warn); }

/* Bronnen */
.dash-staaf { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 13px; }
.dash-staaf .naam { width: 112px; flex: 0 0 auto; }
.dash-staaf .spoor { flex: 1; height: 9px; border-radius: 999px; background: var(--neutral-bg); overflow: hidden; }
.dash-staaf .spoor span { display: block; height: 100%; background: var(--accent-light); border-radius: 999px; }
.dash-staaf .getal { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 26px; text-align: right; }

/* Medewerkerstabel */
.dash-tabelhouder { overflow-x: auto; }
.dash-tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-tabel th {
  text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); font-weight: 800; padding: 0 0 8px;
}
.dash-tabel td { padding: 9px 0; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.dash-tabel .rechts { text-align: right; }
.dash-sterk { color: var(--good); font-weight: 800; }
.dash-zwak { color: var(--warn); font-weight: 700; }

/* Lege staat: uitleggen in plaats van nullen tonen */
.dash-leeg { text-align: center; padding: 26px 10px; color: var(--muted); font-size: 13px; }
.dash-leeg strong { display: block; color: var(--text); font-size: 14.5px; margin-bottom: 4px; }
.dash-leeg p { margin: 0; }

/* ---------------------------------------------------------------------------
Te controleren

De pagina toonde alles tegelijk: een gekleurde rand, een badge, vijf feitregels
in een definitielijst, vier invulvelden, een waarschuwing, twee knoppen op
losse regels en een uitklapblok. Allemaal even hard, en daardoor was niet te
zien wat er van je gevraagd werd.

De opzet nu volgt de vraag die de medewerker moet beantwoorden: is deze persoon
al lid, ja of nee. Dat zijn de twee knoppen, en die staan onderaan naast elkaar.
Alles daarboven is er om die keuze te kunnen maken - eerst de naam, dan in één
regel wat er over deze aanmelding bekend is. De invulvelden staan ingeklapt,
tenzij er iets ontbreekt; dan gaan ze vanzelf open.
--------------------------------------------------------------------------- */

.tc-sectie { margin-bottom: 34px; }
.tc-sectiekop { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; }
.tc-sectiekop h2 { font-size: 19px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.tc-teller {
    font-size: 12px; font-weight: 800; color: var(--accent);
    background: var(--neutral-bg); border-radius: 999px; padding: 2px 9px;
}
.tc-uitleg { font-size: 13px; color: var(--muted); margin: 0 0 14px; max-width: 640px; line-height: 1.5; }

.tc-leeg {
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    padding: 26px; text-align: center; color: var(--muted); font-size: 13px;
}

/* Eén kaart per aanmelding. Geen gekleurde linkerrand meer: de aanbieder staat
   al in de badge, en twee kleursignalen voor hetzelfde feit maken de rij
   onrustig zonder iets toe te voegen. */
.tc-kaart {
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow-card); padding: 16px 18px; margin-bottom: 12px;
}
.tc-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tc-naam { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.tc-datum { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.tc-bron {
    font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
    border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.tc-bron.benvitaal { background: #EAF4FA; color: #1F5E80; border: 1px solid #7DB8D9; }
.tc-bron.bfnl { background: #EEF7F0; color: #2E7D4F; border: 1px solid #9BD3A8; }

/* Wat er over deze aanmelding bekend is, op één regel met puntscheiding in
   plaats van een definitielijst van vijf rijen hoog. */
.tc-feiten { margin: 7px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.tc-feiten b { color: var(--text); font-weight: 600; }

.tc-ontbreekt {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 12px 0 0; padding: 9px 12px;
    background: var(--warn-bg); border: 1px solid #F0CE8E; border-radius: 10px;
    font-size: 12.5px; font-weight: 600; color: var(--warn); line-height: 1.45;
}

.tc-velden { margin-top: 12px; }
.tc-velden > summary {
    cursor: pointer; list-style: none;
    font-size: 12.5px; font-weight: 700; color: var(--accent);
}
.tc-velden > summary::-webkit-details-marker { display: none; }
.tc-velden > summary::before { content: "\25B8 "; }
.tc-velden[open] > summary::before { content: "\25BE "; }
.tc-raster {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px; margin-top: 10px; max-width: 720px;
}
.tc-raster label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.tc-raster input {
    width: 100%; box-sizing: border-box;
    padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 14px; font-family: inherit; color: var(--text);
}

/* De keuze zelf, onderaan en naast elkaar. Het zijn twee losse formulieren -
   ze posten naar verschillende routes - dus flex op de rij eromheen. */
.tc-keuze { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.tc-keuze form { margin: 0; }

.tc-voet {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border);
    font-size: 12.5px;
}
.tc-voet a, .tc-voet summary { color: var(--accent); font-weight: 700; text-decoration: none; }
.tc-voet a:hover { text-decoration: underline; }
.tc-voet details > summary { cursor: pointer; list-style: none; }
.tc-voet details > summary::-webkit-details-marker { display: none; }
.tc-bericht {
    white-space: pre-wrap; word-break: break-word; font-size: 11.5px;
    background: var(--neutral-bg); padding: 10px; border-radius: 8px;
    max-height: 260px; overflow: auto; margin: 8px 0 0;
}

/* De twee knoppen onder een bedrijfsfitness-aanmelding krijgen elk een eigen
   kleur, want het zijn twee tegengestelde antwoorden op dezelfde vraag en niet
   een hoofdknop met een nevenknop. Groen betekent hier "klaar, deze persoon
   sport al bij ons"; oranje "er moet nog iets gebeuren, hij gaat de leadlijst
   op". Dat is dezelfde kleurafspraak als in de leadlijst: groen is een
   afgeronde stap, oranje iets dat nog aandacht vraagt. */
.tc-keuze .tc-knop-lead,
.tc-keuze .tc-knop-lid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease;
}
.tc-keuze .tc-knop-lead { background: var(--warn); box-shadow: 0 6px 14px rgba(180, 83, 9, 0.22); }
.tc-keuze .tc-knop-lead:hover { background: #9A470A; transform: translateY(-1px); }
.tc-keuze .tc-knop-lid { background: var(--good); box-shadow: 0 6px 14px rgba(21, 128, 61, 0.22); }
.tc-keuze .tc-knop-lid:hover { background: #116B33; transform: translateY(-1px); }
.tc-keuze .tc-knop-lead:active,
.tc-keuze .tc-knop-lid:active { transform: translateY(0); }

/* De derde uitkomst: al lid, maar het pakket moet nog omgezet worden. Paars en
   niet oranje of groen - het is geen openstaande taak voor deze medewerker en
   ook geen afgeronde stap, maar een doorgeefactie naar de manager. */
.tc-keuze .tc-knop-pakket {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 12px;
    background: var(--accent);
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(59, 36, 107, 0.22);
    transition: background 0.12s ease, transform 0.12s ease;
}
.tc-keuze .tc-knop-pakket:hover { background: #4B2F88; transform: translateY(-1px); }
.tc-keuze .tc-knop-pakket:active { transform: translateY(0); }

/* De kaart die op een manager wacht. Rustig paars: er ligt werk, maar niet bij
   degene die er meestal naar kijkt - dus geen amber alarm. */
.tc-wacht {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 12px 0 0; padding: 10px 12px;
    background: var(--neutral-bg); border: 1px solid #DDD0F7; border-radius: 10px;
    font-size: 12.5px; color: var(--accent); line-height: 1.45;
}

/* Eén stap terug na een beoordeling. Rustig en klein: het is een uitweg voor
   wie verkeerd klikte, geen actie die aandacht hoort te trekken. */
.tc-laatst {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-top: 14px; padding: 10px 14px;
    background: var(--neutral-bg); border: 1px solid var(--border); border-radius: 12px;
    font-size: 12.5px; color: var(--text);
}
.tc-laatst form { margin: 0; }
.tc-ongedaan {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 34px; padding: 0 13px;
    border: 1px solid var(--accent-light); border-radius: 9px;
    background: var(--card); color: var(--accent);
    font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.tc-ongedaan::before { content: "\21B6"; font-size: 14px; }
.tc-ongedaan:hover { background: #EBE4FB; }

/* ---------------------------------------------------------------------------
Tabs boven de instellingen

Stonden in een <style>-blok in views/instellingen.ejs. Dat ging goed zolang er
één instellingenpagina was. Toen AI-antwoorden erbij kwam als eigen view, miste
die deze regels - en omdat de icoontjes alleen een viewBox hebben en geen vaste
maat, groeiden ze uit tot bijna vijfduizend pixels hoog. De pagina was dan wel
compleet, maar je zag alleen twee paarse vlakken.

Dezelfde valkuil als bij views/partials/beheer-tabs.ejs (zie CLAUDE.md): opmaak
die in één view woont terwijl de markup gedeeld is. Vandaar hierheen, zodat hij
met de partial meereist.

De --c-variabelen komen uit campagne.css, dat niet elke pagina laadt. Daarom
hier vaste waarden die dezelfde kleuren opleveren.
--------------------------------------------------------------------------- */
.inst-tabs { display: flex; gap: 10px; margin: 0 0 22px; flex-wrap: wrap; }
.inst-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: 12px;
    border: 1px solid #E7E0F7; background: #ffffff;
    color: #6B6280; text-decoration: none; font-size: 14px; font-weight: 600;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.inst-tab:hover { background: #F1ECFD; color: #4F2CCB; }
.inst-tab.active { background: #F1ECFD; border-color: #E7E0F7; color: #4F2CCB; font-weight: 700; }
/* De maat is hier geen opsmuk maar noodzaak: zonder deze regel vult een svg
   met alleen een viewBox de hele beschikbare breedte. */
.inst-tab svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Volledige geschiedenis op het leadprofiel: elke handeling, ook ongedaan
   gemaakte (die worden doorgestreept en gemarkeerd). */
.ld-historie { list-style: none; margin: 10px 0 0; padding: 0; }
.ld-hist { display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14px; }
.ld-hist:first-child { border-top: 0; }
.ld-hist-tijd { flex: 0 0 132px; color: var(--muted); font-size: 12.5px; }
.ld-hist-tekst { flex: 1; min-width: 0; }
.ld-hist.teruggedraaid .ld-hist-tekst strong { text-decoration: line-through; color: var(--muted); }
.ld-hist-undo { font-size: 11.5px; font-weight: 700; color: #B3261E; background: #FDECEA; border-radius: 999px; padding: 1px 8px; margin-left: 4px; }