/* ============================================================================
   OO Freelancer Call Tracker: design system
   Licht, clean, Apple-achtig: veel witruimte, één accentkleur (amber uit het
   logo), gelaagde zachte schaduwen, pil-knoppen, rustige maar duidelijke
   micro-animaties. Systeemfont zodat het op Mac/iOS als San Francisco
   rendert in plaats van een generieke web-font-stack.
   ============================================================================ */

:root {
  --ink: #212d45;
  --ink-soft: #5a6478;
  --ink-faint: #8b93a6;
  --paper: #ffffff;
  --paper-soft: #faf9f7;
  --line: rgba(33, 45, 69, 0.08);
  --accent: #f5b800;
  --accent-ink: #8a6500;
  --success: #1f9d55;
  --success-bg: #eaf7ef;
  --danger: #d64545;
  --danger-bg: #fceded;

  --shadow-sm: 0 1px 3px rgba(33, 45, 69, 0.06), 0 1px 2px rgba(33, 45, 69, 0.04);
  --shadow-md: 0 2px 6px rgba(33, 45, 69, 0.07), 0 12px 28px rgba(33, 45, 69, 0.10);
  --shadow-lg: 0 3px 10px rgba(33, 45, 69, 0.09), 0 20px 45px rgba(33, 45, 69, 0.16);

  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 10px;
  --r-btn: 10px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px; --sp-7: 96px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Veiligheidsnet: als ergens onverhoopt iets breder is dan het scherm
   (lange e-mailadressen e.d.), dan afknippen i.p.v. de hele pagina
   horizontaal laten schuiven op mobiel. */
html, body { overflow-x: hidden; }

/* Eigen scrollbalk in de huisstijl i.p.v. de standaard grijze. */
html { scrollbar-width: thin; scrollbar-color: rgba(33, 45, 69, 0.25) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(33, 45, 69, 0.22);
  border-radius: var(--r-pill);
  border: 2px solid var(--paper-soft);
}
::-webkit-scrollbar-thumb:hover { background: rgba(33, 45, 69, 0.35); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper-soft);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

a { color: inherit; }

button {
  font-family: inherit;
  cursor: pointer;
}

input, textarea, select {
  font-family: inherit;
  font-size: 16px; /* voorkomt auto-zoom in mobiel Safari */
}

::selection { background: rgba(245, 184, 0, 0.28); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ─── Ambient achtergrond-gloed ────────────────────────────────────────── */
.glow-field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
.glow-field::before,
.glow-field::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.16;
}
.glow-field::before {
  width: 520px; height: 520px;
  top: -180px; left: -120px;
  background: var(--accent);
  animation: glow-drift-1 24s ease-in-out infinite;
}
.glow-field::after {
  width: 460px; height: 460px;
  bottom: -160px; right: -140px;
  background: var(--ink);
  opacity: 0.08;
  animation: glow-drift-2 28s ease-in-out infinite;
}
/* Zeer trage, subtiele drift, puur ambient (geen aandachttrekker), zodat de
   achtergrond nooit helemaal stilstaat. */
@keyframes glow-drift-1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(45px, 35px); }
}
@keyframes glow-drift-2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-40px, -30px); }
}

/* ─── Layout: gecentreerde login-kaart ────────────────────────────────── */
.center-screen {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(33, 45, 69, 0.06);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5) var(--sp-4);
  animation: rise 0.6s var(--ease) both;
}

.auth-logo {
  display: block;
  height: 30px;
  width: auto;
  margin: 0 auto var(--sp-4);
}

.auth-card h1 {
  font-size: 21px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.01em;
}

.auth-card .sub {
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
  margin-top: 6px;
  text-wrap: balance;
}

/* ─── App shell (dashboard/admin) ─────────────────────────────────────── */
.app-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* viewport-fit=cover laat de pagina helemaal tot de randen lopen (nodig
     voor een echt "app"-gevoel op het beginscherm), maar zonder dit zou de
     navbalk onder de statusbalk (batterij/tijd/signaal) schuiven. */
  padding: 14px var(--sp-3);
  padding-top: max(14px, env(safe-area-inset-top));
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--line), var(--shadow-sm);
}

.app-nav .logo-mark { height: 28px; width: auto; display: block; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 8px;
  margin: -8px;
  color: var(--ink);
  cursor: pointer;
}

.app-nav nav {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 14px;
  color: var(--ink-soft);
}

.app-nav nav a,
.app-nav nav button.linklike {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.app-nav nav a:hover,
.app-nav nav button.linklike:hover { color: var(--ink); }

/* Aantal-badge naast "Funnel" (zie OO.updateLeadsBadge), zachte herinnering
   dat er nog openstaande deals zijn, geen harde melding. */
.nav-badge {
  display: inline-block;
  margin-left: 5px;
  background: var(--accent);
  color: #2e2200;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-pill);
}

/* "Funnel" heeft een klein uitklapmenu met "Taken" erin (Taken is
   inhoudelijk werk dat uit de funnel voortkomt, geen los hoofdonderdeel
   meer) — losse groep i.p.v. twee gelijkwaardige navlinks naast elkaar. */
.nav-group { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-group-toggle {
  background: none; border: none; padding: 4px; margin: -4px -4px -4px -2px;
  color: var(--ink-soft); cursor: pointer; display: flex; align-items: center;
}
.nav-group-toggle svg { transition: transform 0.2s var(--ease); }
.nav-group.open .nav-group-toggle svg { transform: rotate(180deg); }
.nav-submenu {
  display: none; position: absolute; top: 100%; left: 0; margin-top: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--shadow-md); padding: 6px; min-width: 130px; z-index: 20;
}
.nav-group.open .nav-submenu { display: flex; flex-direction: column; }
.nav-submenu a {
  padding: 8px 10px; border-radius: 6px; white-space: nowrap; font-size: 13.5px;
}
.nav-submenu a:hover { background: var(--paper-soft); }

.app-nav nav a.active {
  color: var(--ink);
  font-weight: 600;
  position: relative;
}
.app-nav nav a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
@media (max-width: 640px) {
  .app-nav nav a.active::after { display: none; }
  .app-nav nav a.active { background: var(--paper-soft); border-radius: var(--r-sm); }
}

/* Pijltje/icoon in een knop dat 4px opschuift bij hover, zie .btn-icon-shift. */
.btn-icon-shift svg { transition: transform 0.2s var(--ease); }
.btn-icon-shift:hover:not(:disabled) svg { transform: translateX(4px); }

/* Onder de breakpoint: logo + hamburger op de balk, de links klappen open
   als een los paneel eronder in plaats van naast elkaar te verdringen. */
@media (max-width: 640px) {
  .app-nav { position: relative; }
  .nav-toggle { display: flex; }
  .app-nav nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 4px var(--sp-3) 12px;
  }
  .app-nav nav.open { display: flex; }
  .app-nav nav a,
  .app-nav nav button.linklike {
    padding: 14px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
    text-align: left;
    width: 100%;
  }
  .app-nav nav a:last-child,
  .app-nav nav button.linklike:last-child { border-bottom: none; }

  /* Op mobiel geen apart uitklap-tikje nodig: "Taken" staat gewoon altijd
     ingesprongen zichtbaar onder "Funnel", binnen hetzelfde opengeklapte
     paneel — een extra tik erbij zou alleen maar in de weg zitten. */
  .nav-group { flex-direction: column; align-items: stretch; width: 100%; }
  .nav-group-toggle { display: none; }
  .nav-submenu {
    display: flex; position: static; flex-direction: column; margin-top: 0;
    background: none; border: none; box-shadow: none; padding: 0 0 0 16px;
  }
  .nav-submenu a { font-size: 14px; color: var(--ink-faint); }
}

.app-main {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-3) var(--sp-7);
}

/* Extra ruimte onderin op pagina's met de vaste Hulp-knop, zodat die nooit
   over de laatste knop van een view heen valt. */
.app-main.has-help { padding-bottom: calc(var(--sp-7) + 64px); }

/* ─── Kaarten ──────────────────────────────────────────────────────────── */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: var(--sp-4);
}

.step {
  animation: rise 0.45s var(--ease) both;
}

.step .eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.step h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-3);
}

/* ─── Formuliervelden ──────────────────────────────────────────────────── */
.field { margin-bottom: var(--sp-2); }

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--paper-soft);
  color: var(--ink);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper);
  box-shadow: 0 0 0 4px rgba(245, 184, 0, 0.14);
}

.field textarea { resize: vertical; min-height: 90px; }

.field-row { display: flex; gap: var(--sp-2); }
.field-row .field { flex: 1; }

.field-divider { height: 1px; background: var(--line); margin: var(--sp-3) 0; }

/* ─── Premium toggle-switch ──────────────────────────────────────────────
   iOS-achtige pil-schakelaar, amber als "aan", zachte veer-transitie op de
   knop. Gebruikt overal waar een instelling aan/uit gezet kan worden. */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.premium-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
}
.premium-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.premium-toggle .track {
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: var(--r-pill);
  transition: background 0.25s var(--ease);
}
.premium-toggle .thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  background: var(--paper);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.premium-toggle input:checked ~ .track { background: var(--accent); }
.premium-toggle input:checked ~ .thumb { transform: translateX(20px); }
.premium-toggle input:focus-visible ~ .track { box-shadow: 0 0 0 3px rgba(245, 184, 0, 0.28); }

/* Zelfde uitklap-techniek als .field-info/.help-accordion-body, inclusief
   de grid-template-columns fix (voorkomt dat verborgen inhoud toch breedte
   claimt en de pagina breder maakt dan het scherm). */
.field-collapse {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s var(--ease);
}
.field-collapse-inner { overflow: hidden; min-width: 0; }
.field-collapse.open { grid-template-rows: 1fr; }

.lead-form-tip {
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin: 8px 0 var(--sp-2);
}

.lead-form-optional-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: var(--sp-3) 0 var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: 6px;
}
.field-label-row label { margin-bottom: 0; flex: 1; }

.info-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.info-icon:hover, .info-icon[aria-expanded="true"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.field-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s var(--ease);
}
.field-info-inner { overflow: hidden; min-width: 0; }
.field-info.open { grid-template-rows: 1fr; }
.field-info.open .field-info-inner { padding-top: 10px; }
.field-info-inner p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 6px; }
.field-info-heading { font-weight: 600; color: var(--ink); margin: 8px 0 4px !important; }
.field-info-inner ul { margin: 0 0 6px; padding-left: 18px; }
.field-info-inner li { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.field-info-examples { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 0 !important; list-style: none; }
.field-info-examples li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}

/* Compacte keuzeschakelaar voor iets dat vaak terloops wordt aangetikt
   (bijv. land kiezen), bewust veel lichter dan .radio-group hieronder. */
.segmented {
  display: inline-flex;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 3px;
  gap: 2px;
}
.segmented-option {
  border: none;
  background: transparent;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.segmented-option:active { transform: scale(0.96); }
.segmented-option.checked {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-sm);
}

.radio-group { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.radio-chip {
  flex: 1;
  min-width: 120px;
  text-align: center;
  padding: 12px 14px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  background: var(--paper-soft);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: all 0.2s var(--ease);
}
.radio-chip input { display: none; }
.radio-chip.checked {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ─── Knoppen ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 24px;
  min-height: 50px;
  border-radius: var(--r-btn);
  border: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), opacity 0.2s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(180deg, #2a3856 0%, var(--ink) 55%, #1a2438 100%);
  color: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(33, 45, 69, 0.2), 0 10px 20px rgba(33, 45, 69, 0.18);
}
.btn-primary:hover:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(33, 45, 69, 0.22), 0 14px 28px rgba(33, 45, 69, 0.24);
}

.btn-accent {
  background: var(--accent);
  color: #2e2200;
  box-shadow: 0 1px 2px rgba(245, 184, 0, 0.25), 0 12px 24px rgba(245, 184, 0, 0.28);
}
.btn-accent:hover:not(:disabled) {
  box-shadow: 0 1px 2px rgba(245, 184, 0, 0.3), 0 16px 32px rgba(245, 184, 0, 0.34);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.btn-ghost:hover:not(:disabled) { color: var(--ink); border-color: rgba(33, 45, 69,0.16); }

.btn-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.btn-row { display: flex; gap: var(--sp-2); }
.btn-row .btn { width: auto; flex: 1; }

/* ─── Resultaat-panelen (beschikbaar / geblokkeerd) ────────────────────── */
.result-panel {
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  animation: rise 0.4s var(--ease) both;
}
.result-panel.available { background: var(--success-bg); }
.result-panel.blocked { background: var(--danger-bg); }
.result-panel.notice { background: rgba(245, 184, 0, 0.14); }
.result-panel.notice .result-icon { background: var(--accent); color: #2e2200; }
.result-panel.notice h3 { color: var(--accent-ink); }

.result-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.result-panel.available .result-icon { background: var(--success); color: white; }
.result-panel.blocked .result-icon { background: var(--danger); color: white; }

.result-panel h3 { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.result-panel.available h3 { color: #145c34; }
.result-panel.blocked h3 { color: #8f2a2a; }
.result-panel p { font-size: 14px; color: var(--ink-soft); overflow-wrap: break-word; }

/* Flex-kinderen krimpen standaard niet onder hun inhoud (bijv. een lang
   e-mailadres zonder spaties). Zonder dit duwt zulke tekst het hele
   paneel/de pagina naar rechts uit beeld op mobiel. */
.result-panel > div:not(.result-icon) { min-width: 0; }

/* ─── Toast / inline melding ───────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(0);
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.35s var(--ease) both;
  z-index: 50;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ─── Celebration-melding (realtime: nieuwe preview/afspraak/gewonnen) ────
   Los van .toast hierboven, zodat beide gelijktijdig kunnen voorkomen. Zie
   OO.initLeadNotifications / OO.showCelebrateBanner in supabase-client.js. */
.celebrate-stack {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 340px;
}
@media (max-width: 480px) {
  .celebrate-stack { left: 16px; right: 16px; max-width: none; }
}
.celebrate-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--ink), #35446b);
  color: #fff;
  padding: 14px 16px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  animation: celebrate-in 0.5s var(--ease) both;
}
.celebrate-toast.leaving { animation: celebrate-out 0.35s var(--ease) both; }
@keyframes celebrate-in {
  from { opacity: 0; transform: translateY(-14px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes celebrate-out {
  to { opacity: 0; transform: translateY(-10px) scale(0.96); }
}
.celebrate-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.celebrate-body strong { display: block; font-size: 14px; }
.celebrate-body span { display: block; font-size: 12.5px; opacity: 0.82; margin-top: 2px; }

/* ─── Spinner ──────────────────────────────────────────────────────────── */
.spinner {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: currentColor;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Animaties ────────────────────────────────────────────────────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.stagger > * { animation: rise 0.5s var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: 0.02s; }
.stagger > *:nth-child(2) { animation-delay: 0.08s; }
.stagger > *:nth-child(3) { animation-delay: 0.14s; }
.stagger > *:nth-child(4) { animation-delay: 0.2s; }

/* Uitgaande stap bij het wisselen tussen belscherm-stappen (zie app.js
   showView), samen met .step's eigen "rise"-intro-animatie ontstaat een
   zachte crossfade in plaats van een instant wissel. */
.step.view-leave {
  animation: leave 0.16s var(--ease) both;
}
@keyframes leave {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}

/* Vinkje dat zichzelf "tekent" op het bevestigingsscherm i.p.v. gewoon te
   verschijnen, zie .draw-check op de svg-path. */
.draw-check {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: draw-check 0.5s 0.15s var(--ease) forwards;
}
@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}

/* Confetti-burst, alleen bij een geslaagde preview-/afspraak-registratie,
   zie finishWithConfetti() in app.js. Vierkantjes vallen uiteen vanuit het
   midden in de merkkleuren. */
.confetti-piece {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 999;
  animation: confetti-burst 1800ms cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes confetti-burst {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.6); opacity: 0; }
}

.hidden { display: none !important; }

/* ─── Admin ────────────────────────────────────────────────────────────── */
.admin-list { display: flex; flex-direction: column; gap: var(--sp-2); }

/* Kleine gegevenstabel (bijv. freelancer-prestaties), compact op mobiel
   via horizontaal scrollen in plaats van dichtklappen, zodat niets
   onleesbaar wordt afgeknept. */
.data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 420px; }
.data-table th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-faint); font-weight: 700; padding: 0 12px 8px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr.total-row td { font-weight: 700; border-top: 2px solid var(--line); }

.freelancer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.freelancer-row:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.freelancer-row .who { display: flex; flex-direction: column; min-width: 0; }
.freelancer-row .who .name { font-weight: 600; }
.freelancer-row .who .email {
  font-size: 13px;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Op smalle schermen past naam + acties (Bel nu/WhatsApp/status-select)
   niet meer naast elkaar op één regel (vooral op de "Wacht al te lang"-
   kaarten in Taken, die na een paar uitbreidingen te veel actieknoppen naast
   de naam kregen). Zonder wrap perst justify-content:space-between alles
   samen tot tekst over elkaar heen valt i.p.v. netjes af te breken. */
@media (max-width: 560px) {
  .freelancer-row { flex-wrap: wrap; }
  .freelancer-row .who { flex-basis: 100%; }
}
.freelancer-row .toggle-active-btn { flex-shrink: 0; }

/* Spraaknotitie-transcript: in tegenstelling tot .email hierboven mag dit
   over meerdere regels lopen, dit kan een hele alinea zijn, geen "..."-afkap. */
.acq-transcript-box {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  white-space: pre-wrap;
  width: 100%;
}

.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.status-dot.on { background: var(--success); }
.status-dot.off { background: var(--ink-faint); }

/* ─── Leads (uitklapbare kaarten) ──────────────────────────────────────── */
.lead-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-2) var(--sp-3);
  transition: box-shadow 0.2s var(--ease);
}
.lead-card:hover { box-shadow: var(--shadow-md); }
.lead-card[open] { box-shadow: var(--shadow-md); }

.lead-card summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px var(--sp-2);
  list-style: none;
  padding: 4px 0;
}
.lead-card summary::-webkit-details-marker { display: none; }

.lead-summary-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.lead-summary-main .bedrijf { font-weight: 600; }
.lead-summary-main .meta { font-size: 13px; color: var(--ink-faint); }

.lead-type-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.lead-type-badge.preview { background: rgba(33, 45, 69, 0.08); color: var(--ink); }
.lead-type-badge.afspraak { background: var(--success-bg); color: var(--success); }

/* Ongelezen-indicator (lokaal per browser bijgehouden, zie admin-leads.js).
   Verdwijnt zodra een admin de kaart één keer heeft opengeklikt. */
.lead-new-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #2e2200;
  white-space: nowrap;
}

.lead-handled-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.lead-details {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2) var(--sp-3);
}
.lead-field span { display: block; font-size: 12px; font-weight: 600; color: var(--ink-faint); margin-bottom: 2px; }
.lead-field p { font-size: 14px; word-break: break-word; }
.lead-field.full { grid-column: 1 / -1; }

@media (max-width: 560px) {
  .lead-details { grid-template-columns: 1fr; }
}

/* ─── Salesbord (Kanban-weergave van leads.status) ──────────────────────
   9 kolommen passen op geen enkel scherm, dus bewust horizontaal scrollen
   i.p.v. dichtklappen op mobiel, net als .data-table-wrap hierboven. */
.board-wrap {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-2);
  align-items: flex-start;
}
.board-col { flex: 0 0 250px; display: flex; flex-direction: column; gap: var(--sp-2); }
.board-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px 2px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint);
}
.board-col-count {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 1px 8px; font-size: 11px; font-weight: 700; color: var(--ink-soft);
}
.board-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); padding: var(--sp-2);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.board-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.board-card .bedrijf { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.board-card .meta {
  font-size: 12px; color: var(--ink-faint); margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.board-card select {
  width: 100%; font-size: 12px; padding: 6px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper-soft); color: var(--ink);
}
.board-empty { font-size: 12px; color: var(--ink-faint); padding: var(--sp-2) 4px; text-align: center; }

/* Wachttijd-indicatie: hoe lang een lead al in deze fase zit. Neutraal tot
   3 dagen, amber vanaf 4, rood vanaf 7 (nu echt actie nodig). */
.board-aging {
  flex-shrink: 0; font-weight: 700; font-size: 11px; padding: 2px 7px;
  border-radius: var(--r-pill); background: var(--paper-soft); color: var(--ink-faint);
}
.board-aging.warn { background: rgba(245, 184, 0, 0.16); color: var(--accent-ink); }
.board-aging.danger { background: var(--danger-bg); color: var(--danger); }

/* "Volgende fase"-knop: de meest voorkomende actie is één stap vooruit,
   dus dat verdient een directe knop naast de dropdown (die blijft voor
   sprongen/terugzetten naar Verloren/Lange termijn). */
.btn-next-stage {
  width: 100%; margin-bottom: 6px; padding: 7px 10px; font-size: 12px; font-weight: 600;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--paper-soft);
  color: var(--ink); cursor: pointer; transition: all 0.2s var(--ease);
}
.btn-next-stage:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Stage-kiezer: alleen zichtbaar op mobiel (zie media query hieronder),
   vervangt daar het zijwaarts scrollen door 8 kolommen. */
.board-stage-picker {
  display: none;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  margin-bottom: var(--sp-2);
  scrollbar-width: none;
}
.board-stage-picker::-webkit-scrollbar { display: none; }
.board-stage-pill {
  flex-shrink: 0; border: 1px solid var(--line); background: var(--paper);
  border-radius: var(--r-pill); padding: 7px 14px; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); white-space: nowrap; transition: all 0.2s var(--ease);
}
.board-stage-pill .count {
  display: inline-block; margin-left: 5px; font-size: 11px; padding: 1px 6px;
  border-radius: var(--r-pill); background: var(--paper-soft); color: var(--ink-faint);
}
.board-stage-pill.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.board-stage-pill.active .count { background: rgba(255, 255, 255, 0.18); color: var(--paper); }

/* ─── KPI-bord: belactiviteit per dag/week (27-07-2026) ─────────────────── */
.kpi-granulariteit.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.kpi-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.kpi-bar { width: 11px; border-radius: 3px 3px 0 0; transition: opacity 0.15s var(--ease); }
.kpi-bar:hover { opacity: 0.75; }
.kpi-period-label { font-size: 10px; color: var(--ink-faint); margin-top: 6px; white-space: nowrap; }

@media (max-width: 640px) {
  .board-stage-picker { display: flex; }
  .board-col { flex: 1 1 100%; }
  .board-col:not(.board-col-active) { display: none; }
}

hr.sep { border: none; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }

/* ─── Tabbladen (Beheer-scherm) ─────────────────────────────────────────
   Zelfde onderstreep-motief als de actieve navlink hierboven, zodat het
   herkenbaar aanvoelt als hetzelfde soort "je bent hier"-signaal. Scrollt
   horizontaal op smalle schermen i.p.v. dichtklappen, met een verborgen
   scrollbalk zodat het niet als een gewone lijst oogt. */
.tabs {
  display: flex;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  background: none;
  border: none;
  padding: 4px 2px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
  position: relative;
  transition: color 0.2s var(--ease);
}
.tab-btn:hover { color: var(--ink-soft); }
.tab-btn.active { color: var(--ink); }
.tab-btn.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.tab-panel { animation: rise 0.35s var(--ease) both; }

.section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin-bottom: var(--sp-2);
}

/* ─── Hulp: altijd bereikbare ondersteuning tijdens een gesprek ─────────
   Vaste, kleine trigger rechtsonder, opent als paneel over het huidige
   scherm heen (nooit een navigatie), sluit terug naar exact dezelfde staat.
   Alle content staat al in de pagina (geen netwerkverzoek bij openen). */
.help-trigger {
  position: fixed;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.help-trigger:hover { transform: translateY(-2px); }
.help-trigger:active { transform: scale(0.97); }

.help-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: flex-end;
}
.help-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(33, 45, 69, 0.32);
  animation: help-fade-in 0.2s var(--ease) both;
}
@keyframes help-fade-in { from { opacity: 0; } to { opacity: 1; } }

.help-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 100%;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  animation: help-slide-in 0.24s var(--ease) both;
}
@keyframes help-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.help-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.help-panel-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.help-close {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none; background: var(--paper-soft); color: var(--ink-soft);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.help-close:hover { background: var(--line); color: var(--ink); }

.help-tabs {
  display: flex;
  gap: var(--sp-3);
  padding: 0 var(--sp-3);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.help-tab {
  background: none; border: none;
  padding: 12px 0 10px;
  font-size: 13px; font-weight: 600; color: var(--ink-faint);
  position: relative;
  transition: color 0.2s var(--ease);
}
.help-tab:hover { color: var(--ink-soft); }
.help-tab.active { color: var(--ink); }
.help-tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; border-radius: var(--r-pill); background: var(--accent);
}

.help-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-3);
}

.help-card {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
}
.help-card:last-child { margin-bottom: 0; }
.help-card-quote { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--ink); }
.help-card-direction { font-size: 13px; color: var(--ink-soft); margin: 0; line-height: 1.4; }
.help-card-direction + .help-card-direction { margin-top: 8px; }

.help-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.help-accordion-trigger .help-card-quote { margin: 0; }
.help-accordion-chevron {
  flex-shrink: 0;
  color: var(--ink-faint);
  transition: transform 0.2s var(--ease);
}
.help-card.open .help-accordion-chevron { transform: rotate(180deg); }
.help-accordion-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s var(--ease);
}
.help-accordion-body > div { overflow: hidden; min-width: 0; }
.help-accordion-body > div > .help-card-direction { padding-top: 8px; }
.help-card.open .help-accordion-body { grid-template-rows: 1fr; }

.help-list { margin: 6px 0; padding-left: 18px; }
.help-list li { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

.help-contact-text { font-size: 14px; color: var(--ink); line-height: 1.5; }

/* ─── Onboarding: eerste-bezoek-introductie (dashboard.html) ─────────────
   Toont maximaal 1x per apparaat (localStorage), overgeslagen zodra de app
   al vanaf het beginscherm draait. Zie assets/onboarding.js. */
.onboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
}
.onboard-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(33, 45, 69, 0.45);
  animation: help-fade-in 0.25s var(--ease) both;
}
.onboard-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  text-align: center;
  animation: onboard-pop 0.5s var(--ease) both;
}
@keyframes onboard-pop {
  from { opacity: 0; transform: scale(0.92) translateY(14px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.onboard-icon-badge {
  width: 64px; height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  animation: onboard-badge-in 0.6s 0.1s var(--ease) both;
}
.onboard-icon-badge svg { width: 28px; height: 28px; }
@keyframes onboard-badge-in {
  0% { opacity: 0; transform: scale(0.5) rotate(-12deg); }
  70% { transform: scale(1.08) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Kleine preview van de echte Hulp-knop (zelfde donkere pil + icoon als
   .help-trigger elders op dit scherm), zodat freelancers precies weten
   waar ze straks naar moeten zoeken. */
.onboard-help-preview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px auto 0;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  animation: onboard-badge-in 0.6s 0.1s var(--ease) both;
}
.onboard-help-preview-icon { display: flex; }
.onboard-help-preview-icon svg { width: 18px; height: 18px; }

.onboard-step h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-top: 16px; }
.onboard-step p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin-top: 8px; }

/* Telefoon-mockup met een "omcirkeld" deel-icoon: laat exact zien waar
   getikt moet worden, zonder dat we de echte Safari-UI kunnen aanraken. */
.onboard-phone-mock {
  width: 190px;
  margin: 20px auto 4px;
  border-radius: 30px;
  border: 2px solid var(--line);
  background: var(--paper-soft);
  padding: 8px;
  box-shadow: var(--shadow-sm);
}
.onboard-phone-screen {
  height: 96px;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--paper), var(--paper-soft));
  border: 1px solid var(--line);
}
.onboard-phone-bar {
  margin-top: 8px;
  height: 42px;
  border-radius: 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.onboard-share-ring {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  animation: onboard-ring-pulse 1.8s ease-in-out infinite;
}
.onboard-share-ring svg { width: 16px; height: 16px; }
@keyframes onboard-ring-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 184, 0, 0.55); }
  50% { box-shadow: 0 0 0 8px rgba(245, 184, 0, 0); }
}

.onboard-arrow-down {
  color: var(--ink-faint);
  margin: 2px auto 0;
  animation: onboard-bounce 1.4s ease-in-out infinite;
}
@keyframes onboard-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.onboard-steps-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.onboard-steps-row span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}
.onboard-android-note {
  font-size: 12px !important;
  color: var(--ink-faint) !important;
  margin-top: 10px !important;
}

.onboard-card .btn { margin-top: 20px; width: 100%; }

.onboard-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 14px;
}
.onboard-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.onboard-dots span.active { background: var(--accent); transform: scale(1.3); }

/* ─── Niet-bereikt-herinnering (27-07-2026): puur lokaal per freelancer,
   nooit gesynchroniseerd, zie SPECIFICATIES.md voor de juridische reden
   (Wet DBA, geen freelancer-activiteitentracking op de server). ───────── */
.niet-bereikt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink);
}
.niet-bereikt-row:last-child { border-bottom: none; }

/* ─── Taken (27-07-2026, herontwerp na feedback "logischer, betere UI") ──
   Twee visueel duidelijk te onderscheiden delen: "wacht al te lang" krijgt
   een warme linkerrand (zelfde amber/rood-taal als de bestaande wachttijd-
   badges) zodat het als aandachtspunt leest, "eigen taken" is bewust
   lichter/compacter (een checklist, geen stapel lead-kaarten). */
.taken-summary {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: var(--sp-3);
}
.taken-summary strong { color: var(--ink); }

.taken-attention-card {
  border-left: 3px solid var(--accent);
  padding-left: calc(var(--sp-3) - 3px);
}
.taken-attention-card.urgent { border-left-color: var(--danger); }

.taken-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-faint);
  font-size: 14px;
  padding: var(--sp-2) 0;
}

.taak-list { display: flex; flex-direction: column; }
.taak-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.taak-row:last-child { border-bottom: none; }
.taak-row input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); }
.taak-row span { font-size: 14px; color: var(--ink); transition: color 0.2s var(--ease); }
.taak-row:hover span { color: var(--ink-soft); }

/* ─── Belrit: statistieken/belmoment-inzicht (26-07-2026) ────────────────── */
.acq-stats-rows { display: flex; flex-direction: column; gap: 2px; }
.acq-stats-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  padding: 10px 6px;
  cursor: pointer;
  text-align: left;
  border-radius: var(--r-sm);
  transition: background 0.15s var(--ease);
}
.acq-stats-row:hover { background: var(--paper-soft); }
.acq-stats-label { flex: 0 0 150px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.acq-stats-bar-wrap { flex: 1; height: 8px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; min-width: 40px; }
.acq-stats-bar { display: block; height: 100%; background: var(--success); border-radius: var(--r-pill); transition: width 0.4s var(--ease); }
.acq-stats-pct { flex: 0 0 90px; font-size: 13px; font-weight: 700; color: var(--ink-soft); text-align: right; }
.acq-stats-detail { padding: 6px 6px 10px; }
.acq-stats-detail p { font-size: 13px; color: var(--ink-soft); padding: 2px 0; }

/* ─── Responsief ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .app-main { padding: var(--sp-4) var(--sp-2) var(--sp-6); }
  .app-main.has-help { padding-bottom: calc(var(--sp-6) + 64px); }
  .step h2 { font-size: 21px; }
  .field-row { flex-direction: column; gap: 0; }
  .radio-group { flex-direction: column; }
  .acq-stats-row { flex-wrap: wrap; }
  .acq-stats-label { flex: 1 1 100%; }
  .acq-stats-pct { flex: 0 0 auto; }
}

@media (min-width: 720px) {
  .app-main.wide { max-width: 900px; }
}

@media (min-width: 1200px) {
  .app-main.wide { max-width: 1280px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}