/* BeepSweep — Hearth design system.
   Tokens ported from the Hearth reference (Downloads/BS 2). Light is the default on :root;
   [data-theme="dark"] overrides. Brand colours are fixed; surface tokens are themeable. */

:root {
  /* Store-eis A1: geef de UA de juiste kleur voor form-controls, scrollbars en
     de standaard-achtergrond vóórdat onze CSS laadt. Light is de :root-default. */
  color-scheme: light;

  /* brand / fixed */
  --amber: #f2a338;
  --amber-d: #c9801a;
  --amber-text: #8c5a00; /* dark amber for TEXT/links — WCAG-AA contrast on light surfaces (fill stays --amber) */
  --ink: #181a1f;
  --danger: #b23a22; /* destructieve tekst/knoppen — AA op licht; dark override hieronder (B3) */
  --border: #8f8a80; /* zichtbare rand voor form-controls (WCAG 1.4.11 ≥3:1 vs --surf); --hair blijft voor decoratieve hairlines */
  --ok-text: #2f6b3d; /* positieve/actief-tekst (groen) — AA op licht; dark override hieronder (B6) */

  /* surface (light) */
  --bg: #f3f1eb;
  --surf: #fbfaf6;
  --txt: #181a1f;
  --txt2: #6f6e68;
  --txt3: #6f6d64;
  --hair: #e7e3da;
  --hair2: #eeebe3;
}

[data-theme='dark'] {
  color-scheme: dark;
  --danger: #e08a72; /* B3: donkerrood #b23a22 haalt ~3:1 op dark — lichter voor AA */
  --border: #6f7278; /* B4: form-control-rand ≥3:1 vs dark --surf */
  --ok-text: #86c894; /* B6: groen dat op dark AA haalt */
  --bg: #15171b;
  --surf: #202329;
  --txt: #f3f1eb;
  --txt2: #9a988f;
  --txt3: #918e85;
  --amber-text: #f2a338; /* on dark, amber text uses the bright amber */
  --hair: rgba(243, 241, 235, 0.09);
  --hair2: rgba(243, 241, 235, 0.05);
  --ink: #f3f1eb; /* WI-11: --ink is near-black in :root; in dark it must be light or var(--ink) text is unreadable */
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
body {
  background: var(--bg);
  color: var(--txt);
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* ── Accessibility primitives ──────────────────────────────────────────────── */
/* Visually hidden, still read by screen readers (skip-link targets, page h1s). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Skip-to-content link — off-screen until focused. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -56px;
  z-index: 1000;
  background: var(--surf);
  color: var(--txt);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--hair);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus {
  top: 8px;
}
/* One visible keyboard-focus ring for every control. --txt flips per theme so it
   stays high-contrast on light and dark, and the 2px offset keeps it off amber fills. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--txt);
  outline-offset: 2px;
}
/* Controls inside overflow:hidden cards need an inset ring so it is not clipped. */
.sset > summary:focus-visible,
.qhead:focus-visible {
  outline-offset: -2px;
}
/* Honour reduced-motion: neutralise the sonar/beat pulse + every transition. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .livemark .ring {
    display: none;
  }
}

/* App column — mobile-first, centered on wider screens. */
.app {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  /* Fixed viewport height so the header(s) stay put and only .scroll scrolls (app-shell). */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.scroll {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 32px;
}
.scroll::-webkit-scrollbar {
  width: 0;
}
.fade {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  bottom: 0;
  height: 40px;
  pointer-events: none;
  background: linear-gradient(transparent, var(--bg));
  z-index: 4;
}

/* ── Live ()-mark ──────────────────────────────────────────────────────────── */
.livemark {
  position: relative;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.livemark svg {
  width: 30px;
  height: 30px;
  display: block;
  position: relative;
  z-index: 2;
  color: var(--txt);
}
.livemark .ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 999px;
  border: 1.5px solid var(--amber);
  opacity: 0;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .livemark .ring {
    animation: sonar 2.4s ease-out infinite;
  }
  .livemark .ring.r2 {
    animation-delay: 1.2s;
  }
  .livemark .dot {
    animation: beat 2.4s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
  }
}
@keyframes sonar {
  0% {
    transform: scale(0.6);
    opacity: 0.7;
  }
  70% {
    opacity: 0;
  }
  100% {
    transform: scale(2.7);
    opacity: 0;
  }
}
@keyframes beat {
  0%,
  100% {
    opacity: 1;
  }
  45% {
    opacity: 0.55;
  }
}

/* ── Header / wordmark ─────────────────────────────────────────────────────── */
.wm {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  letter-spacing: -0.03em;
  color: var(--txt);
}
.wm b {
  font-weight: 700;
}
.wm i {
  font-weight: 500;
  font-style: normal;
  color: var(--txt2);
}
.topbar {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(6px, env(safe-area-inset-top)) 20px 8px;
}
/* Smalle telefoons: minder zij-padding + kleinere merk-gap zodat de volle merknaam + het tandwiel
   samen passen. */
@media (max-width: 400px) {
  .topbar { padding-left: 12px; padding-right: 12px; }
  .brand { gap: 7px; }
}
/* Ultrasmal (bijv. iPhone SE 1e gen bij een admin-header met veel actieknoppen): eerder het hele woord
   verbergen (alleen het logo) dan een halve merknaam tonen. */
@media (max-width: 340px) {
  .brand .wm { display: none; }
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
/* De merknaam wrapt nooit naar twee regels. We korten 'm NIET in (geen half woord) — hij is óf
   volledig zichtbaar, óf op ultrasmalle schermen helemaal verborgen (zie media-queries onder .topbar),
   zodat er nooit "BeepSw…" verschijnt. */
.brand .wm {
  white-space: nowrap;
}
.beta-tag {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  background: var(--amber);
  color: #181a1f;
  border-radius: 5px;
  padding: 1px 6px;
  flex-shrink: 0; /* de BETA-badge blijft heel; alleen de wordmark kort in */
}
.gear {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt2);
  cursor: pointer;
  border-radius: 11px;
  text-decoration: none;
  /* Reset native <button> chrome so a button.gear (the search loupe) matches an a.gear (the gear). */
  background: none;
  border: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
.gear:hover {
  background: var(--hair2);
  color: var(--txt);
}
.gear svg {
  width: 22px;
  height: 22px;
}

/* B10 (store): kleine icoon-knoppen (<44px visueel) krijgen een onzichtbare ≥44px tik-zone via ::after,
   zodat de visuele maat gelijk blijft maar de tap-target voldoet aan Apple HIG 44pt / Google 48dp. */
.gear,
.ap-btn,
.qcall,
.tcheck,
.tdel {
  position: relative;
}
.gear::after,
.ap-btn::after,
.qcall::after,
.tcheck::after,
.tdel::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.topacts {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0; /* de actieknoppen (incl. tandwiel) blijven altijd volledig zichtbaar */
}
/* Admin shortcut chip in the topbar (admin-only), next to the WhatsApp icon — replaces the old
   "Beheer →" text link buried in Settings → Account. */
.hadmin {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 11px;
  border-radius: 9px;
  border: 1px solid var(--hair);
  color: var(--txt2);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.hadmin:hover {
  background: var(--hair2);
  color: var(--txt);
}
.tbadge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--amber);
  color: #181a1f;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sweepline {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 1px 22px 10px;
  font-size: 12px;
  color: var(--txt2);
}
.sweepline .sdot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--amber);
}
@media (prefers-reduced-motion: no-preference) {
  .sweepline .sdot {
    animation: beat 2s ease-in-out infinite;
  }
}
.sweepline b {
  color: var(--txt);
  font-weight: 700;
}
.sweepline .sep {
  color: var(--txt3);
}

/* ── Header search — the loupe in the topbar reveals this over the row ───────── */
.hsearch {
  display: none;
  position: absolute;
  top: max(6px, env(safe-area-inset-top));
  bottom: 8px;
  left: 16px;
  right: 16px;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  background: var(--surf);
  border: 1px solid var(--hair);
  border-radius: 13px;
}
.topbar.searching .hsearch {
  display: flex;
}
.topbar.searching .brand,
.topbar.searching .topacts {
  visibility: hidden;
}
.hsearch:focus-within {
  border-color: color-mix(in srgb, var(--amber) 55%, var(--hair));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--txt) 35%, transparent);
}
.hsearch .si {
  display: flex;
  color: var(--txt3);
  flex-shrink: 0;
}
.hsearch .si svg {
  width: 17px;
  height: 17px;
}
.hsearch input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 9px 0;
  font-size: 14.5px;
  color: var(--txt);
  border-radius: 0;
}
.hsearch input:focus {
  outline: none;
  border: none;
}
.hsearch .hsx {
  display: flex;
  flex-shrink: 0;
  color: var(--txt3);
  text-decoration: none;
  padding: 8px;
  border-radius: 8px;
}
.hsearch .hsx:hover {
  color: var(--txt);
  background: var(--hair2);
}
.hsearch .hsx svg {
  width: 15px;
  height: 15px;
}

/* ── Section headers ───────────────────────────────────────────────────────── */
.sec {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 22px 8px;
}
.sec .l {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt3);
  white-space: nowrap;
  flex-shrink: 0;
}
.sec .ln {
  flex: 1;
  height: 1px;
  background: var(--hair);
}
.sec .n {
  font-size: 11px;
  font-weight: 800;
  color: var(--txt3);
}
.sec.spot .l {
  color: var(--amber-text);
}
[data-theme='dark'] .sec.spot .l {
  color: var(--amber);
}

/* Opgehangen-sectie: ingeklapt <details>. De summary is een klikbare sectiekop (zelfde ritme als .sec),
   met een chevron die meedraait. Stil gehouden — dit zijn lege gesprekken die je zelden hoeft te zien. */
.sec-hangup > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 22px 8px;
  cursor: pointer;
  list-style: none;
}
.sec-hangup > summary::-webkit-details-marker { display: none; }
.sec-hangup > summary .l {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt3);
  white-space: nowrap;
}
.sec-hangup > summary .ln { flex: 1; height: 1px; background: var(--hair); }
.sec-hangup > summary .n { font-size: 11px; font-weight: 800; color: var(--txt3); }
.sec-hangup > summary::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--txt3);
  border-bottom: 1.5px solid var(--txt3);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  margin-left: -2px;
}
.sec-hangup[open] > summary::after { transform: rotate(45deg); }
/* Gedempt: opgehangen gesprekken zijn per definitie inhoudsloos, dus niet om aandacht schreeuwen. */
.sec-hangup .qrow { opacity: 0.66; }

/* ── Category label pills ──────────────────────────────────────────────────── */
.lab {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Disposition chip (WI-5) — neutral pill, theme-aware vars (works in light + dark). */
.lab.disp {
  background: var(--surf);
  border: 1px solid var(--hair);
  color: var(--txt2);
}
.lab.callback,
.lab.appointment {
  background: color-mix(in srgb, var(--amber) 18%, transparent);
  color: var(--amber-text);
}
[data-theme='dark'] .lab.callback,
[data-theme='dark'] .lab.appointment {
  color: var(--amber);
}
.lab.new {
  background: #3e6e8e22;
  color: #3a6684; /* B3: was #3e6e8e (~4.4:1 op licht) → AA */
}
[data-theme='dark'] .lab.new {
  color: #7fb0ce;
}
.lab.fyi {
  background: var(--hair2);
  color: #5f5e58; /* B3: var(--txt2) haalde ~4.3:1 op licht → iets donkerder voor AA */
}
[data-theme='dark'] .lab.fyi {
  color: var(--txt2); /* op dark haalt --txt2 ~6:1 — houd de subtiele grijstint */
}
.lab.personal {
  background: #5e8c6a22;
  color: #3f6b4d; /* Blok 6 (a11y): was #5e8c6a (~3.4:1 op licht) */
}
[data-theme='dark'] .lab.personal {
  color: #84b894;
}
.lab.urgent {
  background: #c0492f22;
  color: #b23a22;
}
[data-theme='dark'] .lab.urgent {
  color: #e08c79;
}
.lab.other {
  background: transparent;
  color: var(--txt3);
  padding: 3px 0;
}
.lab.voicemail {
  background: #7a6ca822;
  color: #6a5c98;
}
[data-theme='dark'] .lab.voicemail {
  color: #a99cd0;
}

/* B6 — theme-aware status-pills + waarschuwingsnotitie (vervangen de hardcoded light-inline styles
   op de teams-pagina's, die in dark wit-op-wit gaven). */
.st-pill {
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
}
.st-pill.ok {
  background: color-mix(in srgb, #4e9a5f 18%, transparent);
  color: #2f6b3d;
}
.st-pill.pending {
  background: color-mix(in srgb, var(--amber) 20%, transparent);
  color: #8a5a00;
}
.st-pill.none {
  background: var(--hair2);
  color: var(--txt2);
}
[data-theme='dark'] .st-pill.ok {
  color: #86c894;
}
[data-theme='dark'] .st-pill.pending {
  color: var(--amber);
}
.note-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8a5a00;
  background: color-mix(in srgb, var(--amber) 15%, transparent);
  border-radius: 8px;
  padding: 8px 10px;
}
.note-warn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
[data-theme='dark'] .note-warn {
  color: var(--amber);
}
/* Inline icoon+tekst (vervangt ✅/⚠️ emoji — Noah: on-brand iconen). Kleur theme-aware via tokens. */
.inline-ic {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.inline-ic svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.inline-ic.ok {
  color: var(--ok-text);
}
.inline-ic.warn {
  color: var(--amber-text);
}

/* ── Avatar ────────────────────────────────────────────────────────────────── */
.avatar {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber); /* the BeepSweep ( ) brackets (SVG currentColor) */
  font-weight: 800;
  letter-spacing: -0.02em;
}
.avatar.unknown {
  color: var(--txt3); /* neutral brackets for an unknown caller */
}
.av-br {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.av-ini {
  position: relative;
  color: var(--txt);
}
.av-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
}
.num {
  font-variant-numeric: tabular-nums;
}

/* ── Spotlight card ────────────────────────────────────────────────────────── */
.spot {
  margin: 5px 18px 4px;
  background: var(--surf);
  border: 1px solid var(--hair);
  border-radius: 24px;
  padding: 17px 17px 16px;
  box-shadow:
    0 1px 2px rgba(20, 16, 8, 0.05),
    0 18px 36px -24px rgba(20, 16, 8, 0.4);
}
[data-theme='dark'] .spot {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.stop {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.spot .avatar {
  width: 46px;
  height: 46px;
  font-size: 16px;
}
.smid {
  flex: 1;
  min-width: 0;
}
.srow1 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sname {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.smeta1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--txt2);
}
.smeta1 .sep {
  color: var(--txt3);
}
.ssum {
  font-size: 15px;
  line-height: 1.5;
  color: var(--txt);
  margin-top: 13px;
  text-wrap: pretty;
}
.ssum .q {
  color: var(--txt2);
}
.sbadges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.badge.ai {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  color: var(--amber-text);
}
[data-theme='dark'] .badge.ai {
  color: var(--amber);
}
.badge.ai .sd {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}
.trlink {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--txt2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  text-decoration: none;
}
.trlink:hover {
  color: var(--txt);
}
.trlink svg {
  width: 14px;
  height: 14px;
}

.sacts {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.cb {
  background: var(--amber);
  color: #181a1f;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
}
.cb:hover {
  background: var(--amber-d);
}
.cb svg {
  width: 18px;
  height: 18px;
}
.sacts > .cb {
  height: 54px;
  border-radius: 16px;
  font-size: 16.5px;
}
.tiles3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.tile3 {
  height: 60px;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--txt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.tile3:hover {
  background: var(--hair2);
}
.tile3 svg {
  width: 18px;
  height: 18px;
  color: var(--amber-text);
}
[data-theme='dark'] .tile3 svg {
  color: var(--amber);
}

/* ── Queue rows ────────────────────────────────────────────────────────────── */
.lists {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 18px 0;
}
.qrow {
  position: relative;
  background: var(--surf);
  border: 1px solid var(--hair);
  border-radius: 15px;
  overflow: hidden;
  transition:
    border-color 0.15s,
    background 0.15s;
  box-shadow: 0 1px 2px rgba(20, 16, 8, 0.04);
}
[data-theme='dark'] .qrow {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.qrow.open {
  border-color: color-mix(in srgb, var(--amber) 40%, var(--hair));
}
/* Freshest call ("Nieuwste") — pulse the amber border (thicker via a box-shadow ring, no layout shift)
   for ~5s on load to draw attention, then settle back to the normal open-border. */
@keyframes qpulse {
  0%,
  100% {
    border-color: color-mix(in srgb, var(--amber) 40%, var(--hair));
    box-shadow: 0 1px 2px rgba(20, 16, 8, 0.04);
  }
  50% {
    border-color: var(--amber);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--amber) 30%, transparent);
  }
}
.qrow.qfresh {
  animation: qpulse 1.7s ease-in-out 3; /* thicker ring, calmer cadence: 3 × 1.7s ≈ 5 seconds, then stops */
}
@media (prefers-reduced-motion: reduce) {
  .qrow.qfresh {
    animation: none;
  }
}
/* The swipeable card body (header + expanded panel). One opaque element so a swipe drags the WHOLE
   block over the coloured .qact panels — you can start the swipe anywhere on the card, not just the head. */
.qbody {
  position: relative;
  z-index: 2;
  background: var(--surf);
  touch-action: pan-y;
}
.qhead {
  position: relative;
  z-index: 2;
  background: var(--surf);
  touch-action: pan-y;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  cursor: pointer;
}
.qrow .avatar {
  width: 42px;
  height: 42px;
  font-size: 14px;
  border-radius: 12px;
}
.qmid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.qr1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.qname {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qtime {
  font-size: 12px;
  color: var(--txt3);
  white-space: nowrap;
  flex-shrink: 0;
}
.qr2 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  /* Bug A guard: chips krimpen niet (flex-shrink:0) — knip overloop af binnen .qmid zodat een
     lange chip-combinatie nooit meer onder de bel-knop kan schuiven. */
  overflow: hidden;
}
.qsum {
  font-size: 13px;
  color: var(--txt2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.qrow.open .qsum {
  white-space: normal;
}
.qcall {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--amber);
  color: #181a1f;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}
.qcall:hover {
  background: var(--amber-d);
}
.qcall svg {
  width: 17px;
  height: 17px;
}
.qrow.open .qcall {
  display: none;
}
/* Transcript + listen-back icons, top-right of the header — always visible so a collapsed card can be
   opened straight to its transcript via the transcript icon. */
.qhmedia {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.qhi {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt2);
  text-decoration: none;
  /* Reset native <button> chrome so the transcript button.qhi is a subtle icon (matches the play a.qhi),
     not a white default button box. */
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.qhi:hover {
  background: var(--hair2);
  color: var(--txt);
}
.qhi svg {
  width: 18px;
  height: 18px;
}

.qexpand {
  display: none;
  padding: 2px 12px 12px;
}
.qrow.open .qexpand {
  display: block;
}
.htoolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}
.htoolbar .cb {
  flex: 1;
  height: 42px;
  border-radius: 12px;
  font-size: 14px;
  white-space: nowrap;
}
.htoolbar .ib {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--txt);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}
.htoolbar .ib:hover {
  background: var(--hair2);
}
.htoolbar .ib svg {
  width: 16px;
  height: 16px;
}

/* ── Swipe actions (Noah: on-brand amber i.p.v. groen/blauw): rechts → afhandelen/klaar, links → taak. ── */
.qact {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 22px;
  color: #1a1206;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  opacity: 0;
  pointer-events: none;
}
.qact-l {
  justify-content: flex-start;
  background: #c0402a;
}
.qact-r {
  justify-content: flex-end;
  background: var(--amber);
}
.qact-ic {
  display: inline-flex;
  transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.5);
}
.qact-ic svg {
  width: 20px;
  height: 20px;
}
/* which side is revealed while dragging (set by app.js) — ook op taak-rijen (.trow, alleen rechts) */
.qrow.sw-r .qact-l,
.qrow.sw-l .qact-r,
.trow.sw-r .qact-l {
  opacity: 1;
}
/* armed (past threshold) → pop the icon + a touch more vividness */
.qrow.sw-armed.sw-r .qact-l .qact-ic,
.qrow.sw-armed.sw-l .qact-r .qact-ic,
.trow.sw-armed.sw-r .qact-l .qact-ic {
  transform: scale(1.3);
}
.qrow.sw-armed .qact,
.trow.sw-armed .qact {
  filter: brightness(1.06) saturate(1.12);
}
/* settle/commit animation on the moving card body */
.qrow.sw-anim .qbody,
.trow.sw-anim .tbody {
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .qact-ic,
  .qrow.sw-anim .qhead {
    transition: none;
  }
}

/* ── Top navigation (frozen header): Inbox / Taken / Afgehandeld with counts ── */
/* Bottom-tab-bar: vaste onderbalk (icoon + label + telbadge), net als .fade position:fixed. */
.topnav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  z-index: 10;
  display: flex;
  background: var(--bg);
  border-top: 1px solid var(--hair);
  padding: 6px 8px max(6px, env(safe-area-inset-bottom));
}
.tn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 48px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--txt3);
}
.tn-ic { position: relative; display: flex; }
.tn-ic svg { width: 23px; height: 23px; }
/* Teams-tab BETA-badge (herontwerp Noah) — klein amber pilletje boven het team-icoon. */
.tn-beta {
  position: absolute;
  top: -7px;
  left: calc(50% + 8px);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 1.5px 3px;
  border-radius: 4px;
  background: var(--amber);
  color: #181a1f;
}
.tn-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tn-n {
  position: absolute;
  top: -5px;
  left: 12px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--amber);
  color: #181a1f;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.tn.on { color: var(--amber-text); }
[data-theme='dark'] .tn.on { color: var(--amber); }
/* Ruimte onder de scroll voor de vaste balk + de fade erboven (alleen op pagina's mét de nav). */
.app:has(.topnav) .scroll { padding-bottom: 84px; }
.app:has(.topnav) .fade { bottom: 64px; }

/* Directe-link-rij in de instellingen (geen accordeon — navigeert meteen naar de beheerpagina). */
.ssetlink { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; font-size: 15px; font-weight: 700; color: var(--txt); text-decoration: none; }
.ssetlink:hover { background: var(--hair2); }
.ssetlink .ssetlink-chev { display: flex; color: var(--txt3); flex-shrink: 0; }
.ssetlink .ssetlink-chev svg { width: 18px; height: 18px; }

/* Sectie-/link-icoon (amber) in de instellingen-koppen. */
.sumlead { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sumic { display: inline-flex; flex-shrink: 0; color: var(--amber); }
.sumic svg { width: 20px; height: 20px; }
/* Bij openklappen schuift de sectie naar de top van het scrollgebied — wat lucht erboven. */
.sset { scroll-margin-top: 14px; }
/* Inline beheer-secties (Contacten/Lijnen/Team) via een chrome-loos iframe (?embed=1) — voelt als inline,
   formulieren werken native binnen het frame (embed.js). */
.embedhost { padding: 0; }
.embed-frame { width: 100%; border: 0; display: block; min-height: 56px; }
.embedwrap { padding: 4px 18px 12px; }
/* Binnen het frame: vlak de geneste kaarten af zodat het geen kaart-in-kaart wordt. */
.embedwrap .sset { border: 0; background: none; margin: 4px 0; }
.embedwrap .sset > summary { padding: 10px 0; }
.embedwrap .sset > .sbody { padding: 0 0 6px; }
.embedwrap .sec { margin-top: 6px; }

/* Legal-footer in de instellingen: leesbaar in huisstijl (geen blauw) + versie eronder. */
.settings-legal { color: var(--txt3); margin: 24px 18px 14px; font-size: 13px; text-align: center; }
.settings-legal a { color: var(--txt2); text-decoration: none; }
.settings-legal a:hover { color: var(--amber-text); text-decoration: underline; }
[data-theme='dark'] .settings-legal a:hover { color: var(--amber); }
.settings-legal .settings-ver { display: block; margin-top: 6px; color: var(--txt3); font-variant-numeric: tabular-nums; }
/* Login-pagina: juridische links in de huisstijl (amber) i.p.v. standaard-blauw onderstreept. */
.auth-legal a { color: var(--amber-text); text-decoration: none; }
.auth-legal a:hover { text-decoration: underline; }
[data-theme='dark'] .auth-legal a { color: var(--amber); }

/* ── Queue row: chevron + rich expand (summary, transcript/play, four actions) ── */
.qchev {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  margin-left: 4px;
  border-right: 2px solid var(--txt3);
  border-bottom: 2px solid var(--txt3);
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.qrow.open .qchev {
  transform: rotate(-135deg);
}
.qrow.open .qsum {
  display: none;
}
.qx {
  display: none;
  position: relative;
  z-index: 2;
  padding: 0 13px 14px;
}
.qrow.open .qx {
  display: block;
}
.qx-sum {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--txt2);
  margin: 0 0 12px;
}
.qx-media {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.qx-m {
  flex: 1;
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--txt2);
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}
.qx-m:hover {
  background: var(--hair2);
  color: var(--txt);
}
.qx-m svg {
  width: 15px;
  height: 15px;
}
.qx-acts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.qx-btn {
  height: 58px;
  border-radius: 12px;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--txt);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
}
.qx-btn span {
  white-space: nowrap;
}
.qx-btn svg {
  width: 19px;
  height: 19px;
}
.qx-btn:hover {
  background: var(--hair2);
}
.qx-btn.primary {
  background: var(--amber);
  border-color: var(--amber);
  color: #181a1f;
}
.qx-btn.primary:hover {
  background: var(--amber-d);
}

/* ── Premium uitgeklapte-kaart-acties (herontwerp Noah) ─────────────────────────
   Media-rij (Beluister · Transcript lezen · duur) + actiebalk: amber hoofdactie (Bel terug) +
   WhatsApp + een (…)-overflowmenu. Thema-bewust via tokens. */
.qx-media {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px solid var(--hair);
  border-radius: 12px;
}
.qx-media-btn,
.qx-media-tx {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--txt);
}
.qx-media-btn svg { width: 16px; height: 16px; color: var(--amber-text); }
[data-theme='dark'] .qx-media-btn svg { color: var(--amber); }
.qx-media-tx { font-weight: 600; color: var(--txt2); }
.qx-media-btn:hover,
.qx-media-tx:hover { color: var(--txt); }
.qx-media-dur { margin-left: auto; font-size: 12.5px; color: var(--txt3); }

.qx-actbar {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.qx-primary {
  flex: 1;
  height: 46px;
  border-radius: 12px;
  background: var(--amber);
  color: #181a1f;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.qx-primary:hover { background: var(--amber-d); }
.qx-primary svg { width: 18px; height: 18px; }
.qx-quiet {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--txt2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  list-style: none;
}
.qx-quiet:hover { background: var(--hair2); color: var(--txt); }
.qx-quiet svg { width: 18px; height: 18px; }
.qx-quiet::-webkit-details-marker { display: none; }
.qx-dots { font-weight: 800; letter-spacing: 1px; font-size: 15px; line-height: 1; }
.qx-more { position: relative; }
.qx-more-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 5;
  min-width: 172px;
  padding: 6px;
  background: var(--surf);
  border: 1px solid var(--hair);
  border-radius: 12px;
  box-shadow: 0 10px 28px -12px rgba(20, 16, 8, 0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qx-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--txt);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.qx-menu-item:hover { background: var(--hair2); }
.qx-menu-item svg { width: 16px; height: 16px; color: var(--txt2); }
.qx-menu-item.danger-item { color: #b23a22; }
.qx-menu-item.danger-item svg { color: #b23a22; }
[data-theme='dark'] .qx-menu-item.danger-item,
[data-theme='dark'] .qx-menu-item.danger-item svg { color: #e08a72; }

/* Inline transcript/details panel — toggled by the transcript icon (no navigation). */
.qx-detail {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}
/* Subtiele audio-speler (huisstijl) i.p.v. de brede native <audio controls>-balk. */
.aplayer { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 7px 12px; background: var(--surf); border: 1px solid var(--hair); border-radius: 999px; }
.aplayer .ap-el { display: none; }
.ap-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--amber); cursor: pointer; flex-shrink: 0; -webkit-appearance: none; appearance: none; }
.ap-btn svg { width: 26px; height: 26px; }
.ap-ic { display: inline-flex; }
.ap-ic-pause { display: none; }
.aplayer.playing .ap-ic-play { display: none; }
.aplayer.playing .ap-ic-pause { display: inline-flex; }
/* Bug C: het Beluister-icoon (mini-actie) volgt de speel-staat (toggle in app.js zet .qplaying op de rij). */
.qrow.qplaying [data-play] .ap-ic-play { display: none; }
.qrow.qplaying [data-play] .ap-ic-pause { display: inline-flex; }
/* Ook het label wisselt: Beluister → Pauze zodra de opname speelt. */
.ap-lbl-pause { display: none; }
.qrow.qplaying [data-play] .ap-lbl-play { display: none; }
.qrow.qplaying [data-play] .ap-lbl-pause { display: inline; }
.ap-track { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--hair2); cursor: pointer; }
.ap-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px; background: var(--amber); }
.ap-time { font-size: 12px; color: var(--txt2); font-variant-numeric: tabular-nums; flex-shrink: 0; }
/* Inbox: speler verborgen tot het play-icoon wordt ingedrukt (.qrow.aud onthult 'm); detailpagina toont 'm inline. */
.qrow .aplayer { display: none; }
.qrow.aud .aplayer { display: flex; }
.qx-detail .tcall-fields {
  margin: 0 0 10px;
}
.qx-transcript {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--txt2);
  /* No inner max-height/scroll: the transcript flows in the page so scrolling past it continues to the
     blocks below instead of getting trapped in a nested scroll area. */
}
/* Transcript block: hidden even when the row is open — only the transcript icon (.txopen) reveals it. */
.qx-transcript-wrap {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}
.qrow.txopen .qx-transcript-wrap {
  display: block;
}
.qrow.txopen .qhi[data-transcript] {
  background: var(--hair2);
  color: var(--txt);
}
/* Task action buttons (Bel terug / WhatsApp / Agenda) — flex so 1–3 buttons fill the row. */
.tqx-acts {
  display: flex;
  gap: 7px;
  margin-bottom: 12px;
}
.tqx-acts > .qx-btn {
  flex: 1;
}

/* ── Done rows ─────────────────────────────────────────────────────────────── */
.qrow.done {
  background: transparent;
  box-shadow: none;
  border-style: dashed;
}
.qrow.done .qhead {
  cursor: default;
  background: transparent;
}
.qrow.done .qname {
  color: var(--txt2);
}
.donecheck {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber-text);
}
[data-theme='dark'] .donecheck {
  color: var(--amber);
}
.donecheck svg {
  width: 18px;
  height: 18px;
}
.donestat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--txt3);
}

/* ── Empty state ───────────────────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 64px 28px;
  color: var(--txt2);
}
.empty-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.empty h1,
.empty h2 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--txt);
  margin: 0 0 6px;
}
.empty p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.btn-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--amber-text);
  text-decoration: none;
}
[data-theme='dark'] .btn-link {
  color: var(--amber);
}
.btn-link:hover {
  text-decoration: underline;
}

/* ── Call detail page ──────────────────────────────────────────────────────── */
.card {
  margin: 8px 18px;
  background: var(--surf);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 14px 16px;
}
.card h2,
.card h3 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt3);
}
dl.fields {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
}
dl.fields dt {
  font-size: 13px;
  color: var(--txt3);
  text-transform: capitalize;
}
dl.fields dd {
  margin: 0;
  font-size: 14px;
  color: var(--txt);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tag-ok,
.tag-warn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 6px;
}
.tag-ok {
  background: color-mix(in srgb, #5e8c6a 16%, transparent);
  color: #3f6b4d; /* B3: was #4e7a5a (~4:1 op licht) → AA, gelijk aan .lab.personal */
}
[data-theme='dark'] .tag-ok {
  color: #84b894;
}
.tag-ok svg {
  width: 11px;
  height: 11px;
}
.tag-warn {
  background: var(--hair2);
  color: var(--txt2);
}
.transcript {
  margin: 0;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--txt);
  white-space: pre-wrap;
  word-break: break-word;
}
.detail-actions {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 10px 18px 28px;
}
.cb.wide {
  flex: 1;
  height: 48px;
  border-radius: 14px;
  font-size: 15px;
}
.danger {
  height: 48px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--danger);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.danger:hover {
  background: color-mix(in srgb, #c0492f 10%, transparent);
}
.danger svg {
  width: 16px;
  height: 16px;
}

/* ── Auth + forms ──────────────────────────────────────────────────────────── */
.authpage {
  /* Login has no fixed header + a short card — let it grow and document-scroll if it ever exceeds the
     viewport (the card stays centred via its margin:auto when it fits). */
  height: auto;
  min-height: 100dvh;
  justify-content: center;
  padding: 24px;
}
.auth-card {
  width: 100%;
  max-width: 360px;
  margin: auto;
}
.auth-brand {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.auth-card h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 6px;
}
/* B9 (MS 10.1.1): korte uitleg wat de app doet, direct onder de titel. */
.auth-tagline {
  text-align: center;
  color: var(--txt2);
  font-size: 13.5px;
  line-height: 1.45;
  margin: 0 0 18px;
}
.form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field > span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--txt2);
}
input,
select,
textarea {
  font-family: inherit;
  /* 16px (niet 15) voorkomt de auto-zoom van iOS Safari bij focus op formulier-zware pagina's (gebruikerstest). */
  font-size: 16px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surf);
  color: var(--txt);
  width: 100%;
}
textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.5;
}
input:focus,
select:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--amber) 55%, var(--hair));
}
.form-error {
  background: color-mix(in srgb, #c0492f 12%, transparent);
  color: var(--danger);
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  margin-bottom: 12px;
}
[data-theme='dark'] .form-error {
  color: #e08c79;
}
.form-ok {
  background: color-mix(in srgb, #5e8c6a 14%, transparent);
  color: #3f6b4d; /* Blok 6 (a11y): was #4e7a5a (~4.1:1 op licht) */
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  margin: 0 18px 4px;
}
[data-theme='dark'] .form-ok {
  color: #84b894;
}
/* Page-level save banners stick to the top of the scroll area so they stay visible after the browser
   jumps to the saved section's #anchor (BS-006). Only direct children of .scroll are page banners —
   inline form errors nested deeper are unaffected. */
.scroll > .form-ok,
.scroll > .form-error {
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink, #000) 12%, transparent);
}
/* Read-only field (e.g. the login e-mail in Account) — visually distinct from editable inputs. */
.field input.ro,
input.ro {
  background: color-mix(in srgb, var(--hair) 45%, transparent);
  color: var(--txt2);
  cursor: not-allowed;
}

/* ── Settings ──────────────────────────────────────────────────────────────── */
.sset {
  margin: 8px 18px;
  background: var(--surf);
  border: 1px solid var(--hair);
  border-radius: 16px;
  overflow: hidden;
}
.sset > summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 16px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sset > summary::-webkit-details-marker {
  display: none;
}
.sset > summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--txt3);
  border-bottom: 2px solid var(--txt3);
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.sset[open] > summary::after {
  transform: rotate(-135deg);
}
.sset .sbody {
  padding: 4px 16px 16px;
}
.sset .hint {
  font-size: 12.5px;
  color: var(--txt3);
  margin: 0 0 12px;
  line-height: 1.5;
}

/* Grouped settings (iOS-style): related sections share one card as hairline-separated rows. */
.sgroup {
  margin: 2px 18px 14px;
  background: var(--surf);
  border: 1px solid var(--hair);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 16, 8, 0.04);
}
[data-theme='dark'] .sgroup {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.sgroup .sset {
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--hair);
  box-shadow: none;
}
.sgroup .sset:first-child {
  border-top: none;
}
.sgroup .sset[open] {
  background: color-mix(in srgb, var(--amber) 4%, transparent);
}
.row-actions {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-top: 14px;
}
.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.switch > span {
  font-size: 14px;
}
/* Native checkbox restyled as a branded toggle: 44x26 target, 3:1 boundary, amber on. */
.switch input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 1.5px solid var(--txt3);
  background: var(--hair2);
  position: relative;
  cursor: pointer;
}
.switch input[type='checkbox']::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--surf);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}
.switch input[type='checkbox']:checked {
  background: var(--amber);
  border-color: var(--amber-d);
}
.switch input[type='checkbox']:checked::after {
  transform: translateX(18px);
  background: #fff;
}
.linklike {
  background: none;
  border: none;
  color: var(--amber-text);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}
[data-theme='dark'] .linklike {
  color: var(--amber);
}

/* ── Admin ─────────────────────────────────────────────────────────────────── */
.admin-tabs {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  padding: 2px 18px 10px;
}
.admin-tabs a {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
  color: var(--txt2);
  text-decoration: none;
  border: 1px solid var(--hair);
}
.admin-tabs a.on {
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  color: var(--amber-text);
  border-color: transparent;
}
[data-theme='dark'] .admin-tabs a.on {
  color: var(--amber);
}
.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  padding: 6px 18px 4px;
}
.tile-m {
  background: var(--surf);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.num-b {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.lbl {
  font-size: 11.5px;
  color: var(--txt2);
}
.bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-top: 6px;
}
.bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.bar-track {
  width: 100%;
  max-width: 28px;
  height: 80px;
  display: flex;
  align-items: flex-end;
  background: var(--hair2);
  border-radius: 6px;
  overflow: hidden;
}
.bar-fill {
  width: 100%;
  background: var(--amber);
  border-radius: 6px 6px 0 0;
  min-height: 2px;
}
.bar-n {
  font-size: 11px;
  font-weight: 700;
  color: var(--txt2);
}
.bar-l {
  font-size: 10px;
  color: var(--txt3);
}
.tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Scroll-affordance (audit 2026-07-10, punt 11): een randschaduw verschijnt alleen wanneer er
     kolommen buiten beeld staan — de covers (var(--surf)) scrollen mee, de schaduwen niet. */
  background:
    linear-gradient(to right, var(--surf) 30%, transparent) left / 32px 100%,
    linear-gradient(to left, var(--surf) 30%, transparent) right / 32px 100%,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--txt) 16%, transparent), transparent) left / 14px 100%,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--txt) 16%, transparent), transparent) right / 14px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.atable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.atable th.r, .atable td.r { text-align: right; }
.atable th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--txt3);
  padding: 10px 12px;
  border-bottom: 1px solid var(--hair);
  white-space: nowrap;
}
.atable td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--hair);
  color: var(--txt);
  white-space: nowrap;
}
.atable tr:last-child td {
  border-bottom: none;
}
/* Actie-tabellen (Beheer → Gebruikers) stapelen op smal scherm tot kaarten: thead weg, elke rij een
   kaart, elk veld een label/waarde-regel (label via data-th — zelfde t()-bron als de thead), zodat
   acties als Deactiveren zichtbaar blijven i.p.v. buiten beeld (audit 2026-07-10, punt 11/v56-04).
   De njk-markup draagt ARIA-rollen omdat display:block de native tabel-semantiek uitschakelt. */
@media (max-width: 600px) {
  .atable.stack thead { display: none; }
  .atable.stack, .atable.stack tbody, .atable.stack tr, .atable.stack td { display: block; }
  .atable.stack tr {
    border: 1px solid var(--hair);
    border-radius: 12px;
    margin: 10px 12px;
    overflow: hidden;
  }
  .atable.stack td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border-bottom: none;
    white-space: normal;
    word-break: break-word;
    padding: 7px 14px;
  }
  .atable.stack td:first-child { padding-top: 12px; font-weight: 600; }
  .atable.stack td:last-child { padding-bottom: 12px; }
  .atable.stack td[data-th]::before {
    content: attr(data-th);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--txt3);
    flex: 0 0 auto;
  }
  .atable.stack td.act { justify-content: flex-end; }
  .atable.stack td.act:not(:has(form)) { display: none; }
}
.card.no-pad {
  padding: 0;
  overflow: hidden;
}
/* Amber activatie-herinnering (audit 2026-07-10, punt 2) — boven de inbox/taken/afgehandeld zolang
   de doorschakeling niet bewezen is; klikt door naar /app/activate. */
.activation-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 18px 4px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--amber) 14%, var(--surf));
  border: 1.5px solid color-mix(in srgb, var(--amber) 45%, var(--hair));
  border-radius: 12px;
  text-decoration: none;
  color: var(--txt);
  font-size: 13px;
}
.activation-banner .ab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  flex: 0 0 auto;
}
.activation-banner .ab-text { flex: 1; }
.activation-banner .ab-cta {
  font-weight: 700;
  color: var(--amber-text);
  white-space: nowrap;
}

/* Install-banner: rustiger dan de amber activatie-alarm — een duwtje, geen blocker. Neutrale kaart,
   amber alleen op de één-tik-installknop (Android). Wegklikbaar via de x. */
.install-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 18px 4px;
  padding: 11px 12px 11px 14px;
  background: var(--surf);
  border: 1px solid var(--hair2);
  border-radius: 12px;
  color: var(--txt);
  font-size: 13px;
}
.install-banner[hidden] { display: none; }
.install-banner .ib-ic {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--txt3);
}
.install-banner .ib-ic svg { width: 18px; height: 18px; }
.install-banner .ib-text { flex: 1; line-height: 1.35; }
.install-banner .ib-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border: 0;
  border-radius: 9px;
  background: var(--amber);
  color: var(--amber-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.install-banner .ib-btn svg { width: 15px; height: 15px; }
.install-banner .ib-btn[hidden] { display: none; }
.install-banner .ib-x {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  color: var(--txt3);
  cursor: pointer;
}
.install-banner .ib-x svg { width: 15px; height: 15px; }
/* Volwaardig 44px raakvlak zonder de compacte banner-hoogte op te blazen. */
.install-banner .ib-x::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.feed li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 13px;
}
.feed li:last-child {
  border-bottom: none;
}
.f-act {
  font-weight: 700;
}
.f-meta {
  color: var(--txt3);
  font-size: 12px;
  text-align: right;
}

/* ── Tasks ─────────────────────────────────────────────────────────────────── */
.tlist {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 18px 0;
}
.trow {
  position: relative; /* Noah: swipe-klaar — het amber .qact-paneel ligt absoluut achter .tbody */
  background: var(--surf);
  border: 1px solid var(--hair);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 16, 8, 0.04);
}
/* Swipe-vlak van een taak-rij (zelfde patroon als .qbody op de inbox-kaarten). */
.tbody {
  position: relative;
  z-index: 2;
  background: var(--surf);
  touch-action: pan-y;
}
.trow.done .tbody {
  background: transparent;
}
[data-theme='dark'] .trow {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.trow.open {
  border-color: color-mix(in srgb, var(--amber) 40%, var(--hair));
}
.trow.done {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}
.thead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
}
.trow:not(.done) .thead {
  cursor: pointer;
}
.thead > form {
  display: flex;
  flex-shrink: 0;
}
/* Checkbox = the BeepSweep mark: ( ) brackets; ticking fills the amber dot → (•). */
.tcheck {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tcheck:hover {
  background: var(--hair2);
}
.tmark {
  width: 27px;
  height: 27px;
  display: block;
  color: var(--txt3);
}
.tmark-dot {
  opacity: 0;
  transform: scale(0.4);
  transform-origin: center;
  transform-box: fill-box;
  transition:
    opacity 0.18s,
    transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.5);
}
/* hovering an open task previews the dot, hinting the click fills it */
.trow:not(.done) .tcheck:hover .tmark-dot {
  opacity: 0.4;
  transform: scale(0.82);
}
/* done → the amber dot is present: the full logo */
.trow.done .tmark {
  color: var(--txt2);
}
.trow.done .tmark-dot {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .tmark-dot {
    transition: none;
  }
}
.tmid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ttitle {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--txt);
  text-wrap: pretty;
}
.trow.done .ttitle {
  color: var(--txt2);
  text-decoration: line-through;
}
.tmeta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--txt3);
}
.tmeta a {
  color: var(--txt2);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.tmeta a:hover {
  color: var(--txt);
}
.tmeta .sep {
  color: var(--txt3);
}
.tdel {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  border: none;
  background: transparent;
  color: var(--txt3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tdel:hover {
  color: #b23a22;
  background: color-mix(in srgb, #c0492f 10%, transparent);
}
[data-theme='dark'] .tdel:hover {
  color: #e08c79;
}
.tdel svg {
  width: 16px;
  height: 16px;
}

/* ── Task row: expand (call info + note + reminder), reminder badge ──────────── */
.tchev {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  margin-right: 6px;
  border-right: 2px solid var(--txt3);
  border-bottom: 2px solid var(--txt3);
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.trow.open .tchev {
  transform: rotate(-135deg);
}
.texpand {
  display: none;
  padding: 2px 12px 12px;
}
.trow.open .texpand {
  display: block;
}
.trem {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--txt2);
}
.trem svg {
  width: 12px;
  height: 12px;
}
.trem.overdue {
  color: #b23a22;
  font-weight: 700;
}
[data-theme='dark'] .trem.overdue {
  color: #e08c79;
}
.tcall {
  background: var(--hair2);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
/* 2A: ingeklapte gesprek-context — één nette regel i.p.v. het hele kaartje. */
.tcall-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--hair2);
  color: var(--amber-text);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
}
.tcall-line svg { width: 15px; height: 15px; margin-left: auto; flex-shrink: 0; }
.tcall-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tcall-name {
  font-weight: 700;
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tcall-sum {
  font-size: 13px;
  color: var(--txt2);
  margin: 6px 0 0;
  line-height: 1.5;
}
.tcall-fields {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 10px 0 0;
  font-size: 12.5px;
}
.tcall-fields:empty {
  display: none;
}
.tcall-fields dt {
  color: var(--txt3);
}
.tcall-fields dd {
  margin: 0;
  color: var(--txt);
  min-width: 0;
}
.tcall-none {
  margin: 0 0 12px;
}
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--amber-text);
  text-decoration: none;
}
[data-theme='dark'] .tlink {
  color: var(--amber);
}
.tlink svg {
  width: 14px;
  height: 14px;
}
.tremhint {
  margin: -6px 0 0;
  font-size: 11.5px;
}
.tdelrow {
  margin-top: 14px;
  text-align: center;
}
.tdellink {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--txt3);
}
.tdellink:hover {
  color: #b23a22;
}
.tdellink svg {
  width: 14px;
  height: 14px;
}
.tasks-mark svg {
  width: 38px;
  height: 38px;
  color: var(--txt3);
}

/* ── AI context-builder chat (Settings → Kennisbank) ──────────────────────── */
.ai-assist {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
}
.ai-seedrow {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.ai-field {
  flex: 1;
  min-width: 0;
}
.ai-seedrow .cb {
  flex-shrink: 0;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
}
.ai-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  max-height: 320px;
  overflow-y: auto;
  padding: 2px;
}
.ai-bubble {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-bubble.ai {
  align-self: flex-start;
  background: var(--hair2);
  color: var(--txt);
  border-bottom-left-radius: 4px;
}
.ai-bubble.me {
  align-self: flex-end;
  background: var(--amber);
  color: #181a1f;
  border-bottom-right-radius: 4px;
}

/* ── Voicemail schedule list (Settings → Voicemail) ────────────────────────── */
.vm-sched {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vm-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surf);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 11px 12px;
}
.vm-item-main {
  flex: 1;
  min-width: 0;
}
.vm-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.vm-label {
  font-size: 14px;
  font-weight: 700;
}
.vm-range {
  font-size: 12px;
  color: var(--txt3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vm-greet {
  font-size: 13px;
  color: var(--txt2);
  margin-top: 4px;
  white-space: pre-wrap;
}
.vm-daterow {
  display: flex;
  gap: 10px;
}
.vm-daterow .field {
  flex: 1;
  min-width: 0;
}
/* Conditional reveal in the combined Gespreksafhandeling card (AI / Voicemail / Off), driven by
   #handling-body[data-mode] — show only the block matching the chosen mode. */
#handling-body[data-mode='ai'] .hwhen-vm,
#handling-body[data-mode='ai'] .hwhen-off {
  display: none;
}
#handling-body[data-mode='voicemail'] .hwhen-ai,
#handling-body[data-mode='voicemail'] .hwhen-off {
  display: none;
}
#handling-body[data-mode='off'] .hwhen-ai,
#handling-body[data-mode='off'] .hwhen-vm {
  display: none;
}

/* ── Segmented control (BeepSweep status AI/Voicemail/Uit, voicemail mode slider) ─ */
.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surf);
  border: 1px solid var(--hair);
  border-radius: 13px;
}
.seg-opt {
  flex: 1;
  position: relative;
  margin: 0;
}
.seg-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.seg-opt span {
  display: block;
  text-align: center;
  padding: 9px 6px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--txt2);
  transition: background 0.12s, color 0.12s;
}
.seg-opt input:checked + span {
  background: var(--amber);
  color: #181a1f;
}
.seg-opt.seg-off input:checked + span {
  background: var(--hair2);
  color: var(--txt);
}
.seg-opt input:focus-visible + span {
  box-shadow: 0 0 0 2px var(--txt);
}
.seg-opt input:not(:checked) + span:hover {
  background: var(--hair2);
  color: var(--txt);
}

/* ── Call-forwarding helper (Account → BeepSweep): tap-to-dial activate/deactivate ─ */
.fwd {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fwd-act {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 13px;
  border: 1px solid var(--hair);
  background: var(--surf);
  color: var(--txt);
  text-decoration: none;
}
.fwd-act:hover {
  background: var(--hair2);
}
.fwd-act.on:hover {
  border-color: color-mix(in srgb, var(--amber) 55%, var(--hair));
}
.fwd-act svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--txt2);
}
.fwd-act span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.fwd-act b {
  font-size: 14px;
  font-weight: 700;
}
.fwd-act small {
  font-size: 12px;
  color: var(--txt3);
  font-variant-numeric: tabular-nums;
}

/* ── Contacts library list ─────────────────────────────────────────────────── */
.clist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.citem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-top: 1px solid var(--hair);
}
.citem:first-child {
  border-top: 0;
}
.cmid {
  flex: 1;
  min-width: 0;
}
.cname {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cnum {
  font-size: 12.5px;
  color: var(--txt3);
  font-variant-numeric: tabular-nums;
}
.csrc {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--txt2);
  background: var(--hair2);
  padding: 2px 8px;
  border-radius: 999px;
}

/* ── Admin-only version badge (bottom-right, non-interactive) ──────────────── */
.ver-badge {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 60;
  pointer-events: none;
  font-family: 'Space Grotesk', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--txt3);
  background: color-mix(in srgb, var(--surf) 88%, transparent);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 2px 8px;
}
/* BS-08: op smalle schermen staat de vaste onderbalk (.topnav) FULL-WIDTH onderaan; elke horizontale
   badge-positie bedekt dan een tab-label (incl. "Afgehandeld"). De badge is een admin-only, niet-
   interactieve build-indicator, dus we verbergen 'm op mobiel i.p.v. 'm boven de nav te tillen (dat
   botste op notch-toestellen). Op desktop staat de 480px-nav gecentreerd en raakt de rechtsonder-badge
   niet — daar blijft bottom:10px ongewijzigd. */
@media (max-width: 700px) {
  .ver-badge { display: none; }
}

/* ── Live-poll refresh banner ──────────────────────────────────────────────── */
.refresh-banner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 50;
  background: var(--amber);
  color: #181a1f;
  border: none;
  border-radius: 999px;
  padding: 11px 18px;
  font-family: inherit;
  font-weight: 800;
  font-size: 13.5px;
  box-shadow: 0 8px 24px -8px rgba(20, 16, 8, 0.5);
  cursor: pointer;
}
.refresh-banner:hover {
  background: var(--amber-d);
}

/* Korte bevestiging na een AJAX-swipe (bijv. "Taak aangemaakt") — verschijnt onderin, verdwijnt vanzelf.
   Boven de bottom-nav (env safe-area meegerekend). */
.bs-toast {
  position: fixed;
  left: 50%;
  bottom: calc(78px + env(safe-area-inset-bottom));
  transform: translate(-50%, 8px);
  z-index: 60;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 13.5px;
  box-shadow: 0 8px 24px -8px rgba(20, 16, 8, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.bs-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Swipe-naar-taak pop-up (Noah): gecentreerde modal "Wanneer wil je contact opnemen met [naam]?" met
   tijd-keuzes. Eén gedeelde modal per inbox; JS vult titel + call-id. */
.tmodal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tmodal[hidden] { display: none; }
.tmodal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 4, 0.55);
}
.tmodal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  background: var(--surf);
  border: 1px solid var(--hair);
  border-radius: 18px;
  padding: 22px 20px 20px;
  box-shadow: 0 20px 60px -16px rgba(10, 8, 4, 0.7);
  animation: tmodal-in 0.16s ease;
}
@keyframes tmodal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.tmodal-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--txt2);
  border-radius: 9px;
  cursor: pointer;
}
.tmodal-x svg { width: 20px; height: 20px; }
.tmodal-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 2px 30px 16px 0;
  line-height: 1.3;
}
/* Hint als de call al een taak heeft (bewerken i.p.v. dubbel aanmaken). */
.tmodal-hint {
  font-size: 13px;
  color: var(--txt2);
  line-height: 1.4;
  margin: -8px 0 14px;
}
.tmodal-hint[hidden] { display: none; }
/* Kleine badge op een inbox-kaart die al een taak heeft ("je hebt hier al een taak"). */
.qtask-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--amber-text);
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  border-radius: 5px;
  align-self: center;
}
.qtask-flag svg { width: 12px; height: 12px; }

/* Nieuwe-taak-balk (Noah): duidelijk "toevoegen", geen zoekbalk. Plus-icoon vooraan + on-brand amber knop. */
.tnew {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 18px 8px;
  padding: 4px 5px 4px 12px;
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.tnew:focus-within { border-color: var(--amber); }
.tnew-ic { display: inline-flex; flex-shrink: 0; color: var(--amber-text); }
.tnew-ic svg { width: 18px; height: 18px; }
.tnew-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 10px 0;
  font-size: 15px;
  font-family: inherit;
  color: var(--txt);
}
.tnew-input::placeholder { color: var(--txt3); }
.tnew-input:focus { outline: none; }
.tnew-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--amber);
  color: #1a1206;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 14px;
  white-space: nowrap;
}
.tnew-btn svg { width: 15px; height: 15px; }
.tmodal-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tmodal-opt {
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  background: color-mix(in srgb, var(--amber) 10%, var(--surf));
  color: var(--txt);
  font-family: inherit;
  padding: 13px 10px;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
}
/* Beide knoppen zien er identiek uit; ze "lichten op" pas bij indrukken (:active) of hover op een
   echt hover-apparaat. Geen sticky-hover op touch (voorkwam de dubbel-tik) en geen glow-op-één-knop. */
@media (hover: hover) {
  .tmodal-opt:hover {
    border-color: var(--amber);
    background: color-mix(in srgb, var(--amber) 18%, var(--surf));
  }
}
.tmodal-opt:active {
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 24%, var(--surf));
}
.tmodal-opt:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.tmodal-opt-day { display: block; font-weight: 800; font-size: 14.5px; }
.tmodal-opt-time { display: block; margin-top: 2px; font-weight: 700; font-size: 13px; color: var(--amber-text); }
/* "Andere tijd" — subtieler, volle breedte onder de twee presets. */
.tmodal-other {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: none;
  border: 1px solid var(--hair);
  color: var(--txt2);
  font-weight: 700;
  font-size: 13.5px;
}
@media (hover: hover) { .tmodal-other:hover { border-color: var(--amber); } }
.tmodal-other:active { border-color: var(--amber); }
.tmodal-other:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.tmodal-custom {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.tmodal-custom[hidden] { display: none; }
.tmodal-custom input { flex: 1; min-width: 0; }
.tmodal-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: #1a1206;
  background: var(--amber);
  padding: 0 16px;
  border-radius: 12px;
}
.tmodal-go svg { width: 16px; height: 16px; }
body.tmodal-open { overflow: hidden; }

/* ── WhatsApp admin module ─────────────────────────────────────────────────── */

.notif-bar {
  background: color-mix(in srgb, var(--amber) 13%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 28%, transparent);
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
}
.notif-bar a { color: var(--amber-text); text-decoration: none; }
[data-theme='dark'] .notif-bar a { color: var(--amber); }

/* Thread list */
.wa-threads { display: flex; flex-direction: column; }
.wa-thread-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 18px;
  text-decoration: none;
  color: var(--txt);
  border-bottom: 1px solid var(--hair);
}
.wa-thread-row:hover { background: var(--hair2); }
.wa-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--amber) 18%, transparent);
  color: var(--amber-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  flex-shrink: 0;
}
.wa-thread-mid { flex: 1; min-width: 0; }
.wa-thread-r1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}
.wa-name {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-time {
  font-size: 11px;
  color: var(--txt3);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.wa-thread-r2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.wa-preview {
  font-size: 13px;
  color: var(--txt2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--amber);
  color: #181a1f;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Chat bubbles */
.wa-messages { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; }
.wa-msg { display: flex; }
.wa-msg-in { justify-content: flex-start; }
.wa-msg-out { justify-content: flex-end; }
.wa-bubble {
  max-width: 78%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.wa-msg-in .wa-bubble {
  background: var(--hair2);
  color: var(--txt);
  border-bottom-left-radius: 4px;
}
.wa-msg-out .wa-bubble {
  background: color-mix(in srgb, #5e8c6a 16%, transparent);
  color: var(--txt);
  border-bottom-right-radius: 4px;
}
.wa-meta { font-size: 11px; color: var(--txt3); margin-top: 3px; text-align: center; }

/* Concept + form elements */
.wa-concept { border-left: 3px solid var(--amber); }
.wa-concept-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 5px;
  font-size: 13px;
}
.wa-inbound { font-size: 13px; color: var(--txt2); margin-bottom: 8px; line-height: 1.4; }
.wa-edit {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--surf);
  color: var(--txt);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  padding: 10px 12px;
  resize: vertical;
}
.wa-edit:focus { outline: none; border-color: var(--amber); }
.wa-concept-acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.wa-concept-acts .cb,
.wa-concept-acts .ib { height: 38px; padding: 0 16px; border-radius: 11px; font-size: 13.5px; }
.wa-input,
.wa-select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--surf);
  color: var(--txt);
  font-family: inherit;
  font-size: 13.5px;
  box-sizing: border-box;
}
.wa-select {
  padding-right: 26px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  cursor: pointer;
}
.wa-input:focus, .wa-select:focus { outline: none; border-color: var(--amber); }

/* Thread-state */
.wa-state-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
}
.wa-state-admin {
  background: color-mix(in srgb, var(--amber) 11%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 22%, transparent);
}
.wa-state-resolved {
  background: color-mix(in srgb, #5e8c6a 9%, transparent);
  border-bottom: 1px solid color-mix(in srgb, #5e8c6a 18%, transparent);
}
.wa-state-btn {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--txt2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.wa-state-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Scrollable tab-bar (WA admin, 6 tabs) */
.wa-tabs {
  display: flex;
  gap: 5px;
  padding: 4px 18px 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wa-tabs::-webkit-scrollbar { display: none; }
.wa-tabs a {
  scroll-snap-align: start;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 8px 13px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
  color: var(--txt2);
  text-decoration: none;
  border: 1px solid var(--hair);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wa-tabs a.on {
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  color: var(--amber-text);
  border-color: transparent;
}
[data-theme='dark'] .wa-tabs a.on { color: var(--amber); }
.wa-tabs .wtbadge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--amber);
  color: #181a1f;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Bottom navigation (WA section) */
.wa-bottomnav {
  flex-shrink: 0;
  display: flex;
  border-top: 1px solid var(--hair);
}
.wa-bottomnav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 0 max(12px, env(safe-area-inset-bottom));
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--txt3);
  position: relative;
}
.wa-bottomnav a.on { color: var(--amber-text); }
[data-theme='dark'] .wa-bottomnav a.on { color: var(--amber); }
.wa-bottomnav a:hover { color: var(--txt2); }
.wa-bottomnav svg { width: 22px; height: 22px; }
.wm svg { width: 18px; height: 18px; vertical-align: middle; flex-shrink: 0; }
.wa-thread-row > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--txt3); }
.wa-bottomnav .wbn-badge {
  position: absolute;
  top: 6px;
  left: calc(50% + 6px);
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--amber);
  color: #181a1f;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Template language approval badges */
.wa-tpl-langs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.wa-tpl-lang {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
}
.wa-tpl-lang.tpl-ok {
  background: color-mix(in srgb, #5e8c6a 14%, transparent);
  color: #4e7a5a;
}
[data-theme='dark'] .wa-tpl-lang.tpl-ok { color: #84b894; }
.wa-tpl-lang.tpl-pending { background: var(--hair2); color: var(--txt3); }
.wa-tpl-lang.tpl-rejected {
  background: color-mix(in srgb, #b23a22 12%, transparent);
  color: #b23a22;
}

/* Segment labels */
.lab.tag-beta { background: #3e6e8e22; color: #3e6e8e; }
[data-theme='dark'] .lab.tag-beta { color: #7fb0ce; }
.lab.tag-trial {
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  color: var(--amber-text);
}
[data-theme='dark'] .lab.tag-trial { color: var(--amber); }
.lab.tag-paid { background: color-mix(in srgb, #5e8c6a 14%, transparent); color: #4e7a5a; }
[data-theme='dark'] .lab.tag-paid { color: #84b894; }
.lab.tag-free { background: var(--hair2); color: var(--txt3); }

/* Automation rule cards */
.auto-rule { border-left: 3px solid var(--hair); }
.auto-body-wrap { margin: 8px 0 0; }
.auto-lang-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--txt3);
  margin: 8px 0 3px;
}
.auto-body { min-height: 68px; }
.auto-send-btn {
  background: none;
  border: 1px solid var(--hair);
  color: var(--txt2);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 9px;
}
.auto-send-btn:hover { background: var(--hair2); color: var(--txt); }
.auto-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Feed list (kennis / digest) */
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.feed li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 13.5px;
}
.feed li:last-child { border-bottom: none; }
.f-act { font-weight: 700; color: var(--txt); }
.f-meta { font-size: 11px; color: var(--txt3); }

/* ── Legal pages (terms / privacy / cookies) ──────────────────────────────── */
.legal {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.legal-brand {
  flex-shrink: 0;
  padding: max(14px, env(safe-area-inset-top)) 20px 14px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--hair);
}
.legal-brand a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.legal-body {
  flex: 1;
  padding: 28px 24px 0;
}
.legal-body h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--txt);
}
.legal-meta {
  font-size: 12px;
  color: var(--txt3);
  margin: 0 0 32px;
}
.legal-body h2 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt3);
  margin: 28px 0 8px;
}
.legal-body p,
.legal-body li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--txt2);
  margin: 0 0 10px;
}
.legal-body ul {
  padding-left: 20px;
  margin: 0 0 10px;
}
.legal-body strong {
  color: var(--txt);
  font-weight: 700;
}
.legal-body a {
  color: var(--amber-text);
  text-decoration: underline;
}
[data-theme='dark'] .legal-body a {
  color: var(--amber);
}
.legal-foot {
  margin-top: 32px;
  padding: 16px 24px 40px;
  border-top: 1px solid var(--hair);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}
.legal-foot a {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt3);
  text-decoration: none;
}
.legal-foot a:hover {
  color: var(--amber-text);
  text-decoration: underline;
}
[data-theme='dark'] .legal-foot a:hover {
  color: var(--amber);
}
.legal-foot .lf-sep {
  color: var(--hair);
  font-size: 14px;
}
.wa-learned-answer { font-size: 13px; color: var(--txt2); margin-top: 2px; }
.ka-edit.ka-open { display: flex !important; }

/* ── Lijn-centrisch herontwerp — design-system-primitives (Fase 0) ─────────────
   Additief; renderen niets tot ze gebruikt worden. Control-regel: boolean→.switch ·
   1-uit-N (N≤5)→.seg · N≥6→<select> · getal+kleine stappen→.stepper ·
   eenmalige actie→.cb · drill-down→.dgroup/.drow · erf-indicator→.ibadge. */

/* Stepper: − [waarde] +  — begrensd getal met kleine stappen (default+steps). */
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: var(--surf); }
.stepper button { width: 44px; height: 44px; border: 0; background: transparent; color: var(--amber-text); font-size: 20px; font-weight: 700; font-family: inherit; cursor: pointer; }
[data-theme='dark'] .stepper button { color: var(--amber); }
.stepper button:hover { background: var(--hair2); }
.stepper button:disabled { color: var(--txt3); cursor: not-allowed; background: transparent; }
.stepper .stepper-val { min-width: 76px; padding: 0 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; border-left: 1px solid var(--hair); border-right: 1px solid var(--hair); }

/* Drill-down: groep chevron-rijen (kaart) → focused sub-scherm. */
.dgroup { margin: 8px 18px; background: var(--surf); border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; }
.drow { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--txt); text-decoration: none; font-size: 15px; font-weight: 600; }
.drow + .drow { border-top: 1px solid var(--hair); }
.drow:hover { background: var(--hair2); }
.drow:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.drow .drow-ic { display: flex; width: 20px; color: var(--txt2); flex-shrink: 0; }
.drow .drow-label { flex: 1; }
.drow .drow-meta { font-size: 13px; font-weight: 400; color: var(--txt3); }
.drow .drow-chev { display: flex; color: var(--txt3); flex-shrink: 0; }

/* Erf-indicator: "volgt standaard" / "aangepast (+ reset)". */
.ibadge { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.ibadge.follow { color: var(--txt3); background: var(--hair2); }
.ibadge.custom { color: var(--amber-text); background: color-mix(in srgb, var(--amber) 14%, transparent); }
[data-theme='dark'] .ibadge.custom { color: var(--amber); }
.ibadge.custom a { color: var(--txt2); font-weight: 600; margin-left: 6px; }

/* ══ Noah-herontwerp (2026-07-05): hot-rijen, suggest-strip, mini-acties, taken-rij ═══════════ */

/* "Vraagt om actie"-kaart: subtiel amber-getint zodat de sectie visueel urgent leest. */
.qrow.hot {
  border-color: color-mix(in srgb, var(--amber) 32%, var(--hair));
  background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 6%, var(--surf)), var(--surf) 70%);
}
.qrow.hot .qbody,
.qrow.hot .qhead {
  background: transparent;
}

/* URGENT: rode linkerrand (3px) als visuele prioriteitsindicator — conform de handoff-mockups. */
.qrow[data-urgent] {
  border-left: 3px solid #c0402a;
}

/* Ambient dim: omliggende rijen doven naar 40% wanneer één kaart is uitgeklapt. */
.lists:has(.qrow.open) .qrow:not(.open) {
  opacity: 0.4;
  transition: opacity 0.18s ease;
}

/* Sweep-badge in de uitklap: "( ) samengevat door Sweep" — subtiele herkomst-indicator. */
.sweep-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--txt3);
  margin-bottom: 8px;
}
.sweep-badge svg {
  width: 13px;
  height: 13px;
  color: var(--amber);
}

/* Suggest-strip: smalle amber strook in de kaart — Sweep-voorstel + één-tik Taak, of snelkeuze-chips. */
.suggest {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 10px;
  padding: 7px 8px 7px 10px;
  background: color-mix(in srgb, var(--amber) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  border-radius: 10px;
  position: relative;
  z-index: 2; /* boven het swipe-paneel, net als .qbody */
}
.suggest .stime {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--amber-text);
}
[data-theme='dark'] .suggest .stime { color: var(--amber); }
.suggest .stime svg { width: 15px; height: 15px; flex-shrink: 0; }
.suggest .stime span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest .smk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  border: 0;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  color: #1a1206;
  background: var(--amber);
  padding: 6px 11px;
  border-radius: 7px;
}
.suggest .smk svg { width: 14px; height: 14px; }
.suggest.pick { flex-wrap: wrap; gap: 6px; }
.suggest .sq { width: 100%; font-size: 11.5px; color: var(--txt2); }
.suggest .schips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mchip {
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--hair2);
  color: var(--txt);
}
.mchip:hover { border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.mchip-input {
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid var(--hair);
  background: var(--surf);
  color: var(--txt);
}

/* Mini-acties in de uitklap (Noah): compacte icoon+label-knoppen i.p.v. grote tegels. */
.mini-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 2px 2px 4px;
  margin-top: 10px;
}
.ma {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  padding: 4px 2px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt2);
  text-decoration: none;
}
.ma:hover { color: var(--txt); }
.ma svg { width: 16px; height: 16px; }

/* Taken-rij (Noah): amber kloktijd + context, beltegel in de rij, snooze-regel. */
.tmeta .clk {
  color: var(--amber-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
[data-theme='dark'] .tmeta .clk { color: var(--amber); }
.tmeta .clk.overdue { color: #b3261e; }
[data-theme='dark'] .tmeta .clk.overdue { color: #ff8a80; }
.tmeta .sub {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tcallbtn {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  align-self: center;
}
.tsnooze { margin: 6px 0 2px; }
.tsnooze .linklike {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--amber-text);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 2px;
}
[data-theme='dark'] .tsnooze .linklike { color: var(--amber); }
.tsnooze .linklike svg { width: 15px; height: 15px; }

/* ══ Blok 1 (store-gereedheid): Gevarenzone + publieke verwijderpagina ═══════════════════════ */
.danger-zone {
  margin-top: 28px;
  padding: 14px 16px;
  border: 1.5px solid color-mix(in srgb, #b3261e 40%, var(--hair));
  border-radius: 14px;
}
.danger-zone h3 { font-size: 14px; margin-bottom: 4px; color: #b3261e; }
[data-theme='dark'] .danger-zone h3 { color: #ff8a80; }
.danger-zone .dz { margin: 12px 0; }
.danger-zone .dz summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.danger-zone .dz .form { margin-top: 10px; }
.legal-callout {
  margin: 14px 0 22px;
  padding: 14px 16px;
  border: 1.5px solid color-mix(in srgb, var(--amber) 45%, var(--hair));
  border-radius: 14px;
  background: color-mix(in srgb, var(--amber) 7%, transparent);
}
.legal-callout h2 { margin-top: 0; }

/* ══ Blok 6 (store-gereedheid, a11y): raakvlakken ≥44px op de compacte icoon-/tekstknoppen ═════
   Apple HIG 44pt / WCAG 2.5.8. De visuele maat blijft compact (Noah-ontwerp); een onzichtbaar
   ::after-vlak vergroot alleen het klik-/tik-oppervlak van de knop zelf. Bij dicht opeenstaande
   knoppen (gap ≥6px) wint het element dat het dichtst bij het tikpunt in de DOM-volgorde ligt —
   de ambigue zone is enkele pixels en acceptabel. */
.qhi, .ma, .mchip, .tsnooze .linklike { position: relative; }
.qhi::after, .ma::after, .mchip::after, .tsnooze .linklike::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: max(100%, 44px);
}

/* ── Prijzenpagina (/prijzen) ──────────────────────────────────────────────────
   Publieke marketing-pagina; geen .app-wrapper (die is 480px max voor de app-shell).
   Mobile-first: 1 → 2 → 4 kolommen. Hergebruikt --amber, --surf, --hair etc. ── */

.pr-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--bg);
}

/* Brand header (zelfde look als .legal-brand) */
.pr-brand {
  flex-shrink: 0;
  padding: max(14px, env(safe-area-inset-top)) 20px 14px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--hair);
}
.pr-brand a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.pr-main { flex: 1; overflow-x: hidden; }

/* ── Intro ── */
.pr-intro {
  padding: 40px 20px 32px;
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 600px) { .pr-intro { padding: 48px 28px 36px; } }

.pr-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-text);
  margin: 0 0 12px;
}
[data-theme='dark'] .pr-eyebrow { color: var(--amber); }

.pr-title {
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--txt);
  margin: 0 0 10px;
}
.pr-sub {
  font-size: 15px;
  color: var(--txt2);
  margin: 0 0 28px;
  line-height: 1.5;
}

/* Btw-toggle */
.pr-vat-wrap {
  display: inline-flex;
  background: var(--hair2);
  border-radius: 12px;
  padding: 3px;
  gap: 2px;
}
.pr-vat-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--txt2);
  padding: 7px 16px;
  border-radius: 9px;
  transition: background 0.12s, color 0.12s;
}
.pr-vat-btn.is-active,
.pr-vat-btn[aria-pressed='true'] {
  background: var(--surf);
  color: var(--txt);
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}
.pr-vat-btn:hover:not(.is-active):not([aria-pressed='true']) { color: var(--txt); }
.pr-vat-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ── Tier-grid ── */
.pr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0 16px 32px;
  max-width: 1160px;
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
}
@media (min-width: 580px) {
  .pr-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 0 24px 40px; }
}
@media (min-width: 940px) {
  .pr-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}

/* Kaart */
.pr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surf);
  border: 1.5px solid var(--hair);
  border-radius: 18px;
  padding: 24px 20px 20px;
  overflow: hidden;
}
.pr-card--featured {
  border-color: var(--amber);
  box-shadow: 0 4px 20px rgba(242, 163, 56, 0.13);
}
.pr-card--recommended {
  border-color: var(--amber);
  box-shadow: 0 4px 24px rgba(242, 163, 56, 0.16);
  outline: 2px solid color-mix(in srgb, var(--amber) 60%, transparent);
  outline-offset: 2px;
}

/* Lint "Meest gekozen" */
.pr-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--amber);
  color: #181a1f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 0 17px 0 11px;
}

/* Kaart inhoud */
.pr-card-top { flex: 1; }

.pr-tier-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt3);
  margin: 0 0 5px;
}
.pr-pitch {
  font-size: 13.5px;
  color: var(--txt2);
  margin: 0 0 16px;
  min-height: 38px;
  line-height: 1.45;
}
.pr-price-block {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}
.pr-price {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pr-price-per {
  font-size: 12px;
  color: var(--txt3);
  font-weight: 500;
  align-self: flex-end;
  padding-bottom: 2px;
}
.pr-per-user {
  font-size: 12.5px;
  color: var(--txt2);
  margin: 4px 0 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.pr-per-user-price { font-weight: 700; color: var(--txt); }

/* Bundel-blok */
.pr-bundle-block {
  background: color-mix(in srgb, var(--hair2) 80%, transparent);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 16px 0;
}
.pr-bundle {
  font-size: 13px;
  font-weight: 700;
  color: var(--txt);
  margin: 0 0 3px;
  line-height: 1.35;
}
.pr-bundle-note {
  font-size: 11.5px;
  color: var(--txt3);
  margin: 0 0 3px;
  line-height: 1.4;
}
.pr-per-gesprek {
  font-size: 11.5px;
  color: var(--txt3);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.pr-divider {
  border: none;
  border-top: 1px solid var(--hair);
  margin: 0 0 14px;
}

/* Features */
.pr-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  flex: 1;
}
.pr-feature {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--txt2);
  margin-bottom: 8px;
  line-height: 1.45;
}
.pr-feature-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--amber-text);
}
[data-theme='dark'] .pr-feature-icon { color: var(--amber); }
.pr-feature-icon svg { width: 16px; height: 16px; }

/* CTA-knop */
.pr-cta-wrap { margin-bottom: 10px; }
.pr-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  border-radius: 13px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  background: var(--hair2);
  color: var(--txt);
  border: 1.5px solid var(--hair);
  transition: background 0.12s, border-color 0.12s;
}
.pr-cta:hover { background: var(--hair); border-color: var(--hair); }
.pr-cta:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.pr-card--featured .pr-cta {
  background: var(--amber);
  color: #181a1f;
  border-color: transparent;
}
.pr-card--featured .pr-cta:hover { background: var(--amber-d); }

.pr-number-label {
  font-size: 11.5px;
  color: var(--txt3);
  margin: 0;
  line-height: 1.4;
}

/* ── Voicemail-vangnet note ── */
.pr-note-outer {
  padding: 0 16px 40px;
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 600px) { .pr-note-outer { padding: 0 24px 48px; } }

.pr-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--hair2);
  border-radius: 14px;
  padding: 16px 18px;
}
.pr-note-icon { flex-shrink: 0; color: var(--amber-text); margin-top: 1px; }
[data-theme='dark'] .pr-note-icon { color: var(--amber); }
.pr-note-icon svg { width: 18px; height: 18px; }
.pr-note p { font-size: 13.5px; color: var(--txt2); margin: 0; line-height: 1.55; }
.pr-note p strong { color: var(--txt); }

/* ── Add-ons (feature-flagged) ── */
.pr-addons {
  padding: 0 16px 48px;
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 600px) { .pr-addons { padding: 0 24px 56px; } }

.pr-section-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--txt);
  margin: 0 0 6px;
}
.pr-section-sub {
  font-size: 14px;
  color: var(--txt2);
  margin: 0 0 20px;
  line-height: 1.5;
}
.pr-addons-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 500px) { .pr-addons-grid { grid-template-columns: repeat(2, 1fr); } }

.pr-addon-card {
  background: var(--surf);
  border: 1.5px solid var(--hair);
  border-radius: 14px;
  padding: 18px;
}
.pr-addon-label { font-size: 14px; font-weight: 700; color: var(--txt); margin: 0 0 8px; }
.pr-addon-price-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-bottom: 6px;
}
.pr-price--addon { font-size: 22px; }
.pr-addon-per { font-size: 12px; color: var(--txt3); align-self: flex-end; padding-bottom: 1px; }
.pr-addon-note { font-size: 12px; color: var(--txt3); margin: 0; }

/* ── Keuzehulp ── */
.pr-helper {
  padding: 0 16px 56px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 600px) { .pr-helper { padding: 0 24px 64px; } }

.pr-helper-form { margin-top: 18px; }

.pr-helper-fs {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}
.pr-helper-legend {
  font-size: 15px;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 12px;
  display: block;
  padding: 0;
}
.pr-helper-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pr-helper-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 13px 16px;
  border-radius: 13px;
  border: 1.5px solid var(--hair);
  background: var(--surf);
  transition: border-color 0.1s, background 0.1s;
  font-size: 14px;
  color: var(--txt);
}
.pr-helper-opt:hover { border-color: var(--amber); }
.pr-helper-opt:has(.pr-radio:checked) { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 6%, var(--surf)); }

.pr-radio {
  accent-color: var(--amber);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}
.pr-opt-label { flex: 1; line-height: 1.4; }

/* Resultaat */
.pr-helper-result {
  background: var(--hair2);
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 4px;
  border: 1.5px solid var(--amber);
}
.pr-result-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-text);
  margin: 0 0 4px;
}
[data-theme='dark'] .pr-result-eyebrow { color: var(--amber); }
.pr-result-tier {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--txt);
  margin: 0 0 6px;
}
.pr-result-reason {
  font-size: 14px;
  color: var(--txt2);
  margin: 0;
  line-height: 1.55;
}

/* Footer */
.pr-foot {
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 600px) { .pr-foot { padding-left: 24px; padding-right: 24px; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pr-vat-btn,
  .pr-helper-opt,
  .pr-cta { transition: none; }
}

/* Blok 7d (store): "AI-gegenereerd"-label bij samenvatting/transcript/WA-concepten (MS 11.16 e.a.). */
.ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--txt2);
  background: var(--hair2);
  border-radius: 6px;
  padding: 2px 7px;
  vertical-align: middle;
  cursor: help;
}
div.ai-tag { display: inline-flex; margin: 6px 18px 0; }

/* ── Admin: statistieken + desktop (0.47.0) ─────────────────────────────────── */
/* Periode-pills (/admin/stats) */
.pills {
  display: flex;
  gap: 6px;
  padding: 4px 18px 8px;
}
.pills a {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--txt2);
  border: 1px solid var(--hair);
  text-decoration: none;
  white-space: nowrap;
}
.pills a.on {
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  color: var(--amber-text);
  border-color: transparent;
}
[data-theme='dark'] .pills a.on { color: var(--amber); }

/* Lijn-grafiek (server-gerenderde SVG, geen chart-library) */
.chart-wrap { position: relative; }
.chart-wrap .ymax {
  position: absolute;
  top: -2px;
  right: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--txt3);
}
.chart-line {
  display: block;
  width: 100%;
  height: 170px;
  overflow: visible;
}
.chart-line .cgrid { stroke: var(--hair); stroke-width: 1; }
.chart-line .cs0 { fill: none; stroke: var(--amber); stroke-width: 2.5; stroke-linejoin: round; }
.chart-line .cs1 { fill: none; stroke: #6f8fd9; stroke-width: 2.5; stroke-linejoin: round; }
.chart-line .ca0 { fill: color-mix(in srgb, var(--amber) 13%, transparent); stroke: none; }
.xlab {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--txt3);
  padding-top: 4px;
}
.clegend {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--txt2);
  margin: 8px 0 0;
}
.sw {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.sw0 { background: var(--amber); }
.sw1 { background: #6f8fd9; }

/* Donut: klanten per pakket */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.donut { width: 128px; height: 128px; flex-shrink: 0; }
.donut circle { fill: none; stroke-width: 15; }
.donut .dtrack { stroke: var(--hair2); }
.donut .dseg {
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  stroke-linecap: butt;
}
.donut .dnum {
  font-size: 24px;
  font-weight: 800;
  fill: var(--txt);
  text-anchor: middle;
}
.donut .dsub {
  font-size: 10px;
  fill: var(--txt3);
  text-anchor: middle;
}
.dseg0, .dsw0 { stroke: var(--amber); background: var(--amber); }
.dseg1, .dsw1 { stroke: #6f8fd9; background: #6f8fd9; }
.dseg2, .dsw2 { stroke: #5fae86; background: #5fae86; }
.dseg3, .dsw3 { stroke: #b58ae6; background: #b58ae6; }
.dseg4, .dsw4 { stroke: var(--txt3); background: var(--txt3); }
.dlegend { flex: 1; min-width: 220px; }
.dlegend .sw { border-radius: 999px; }

/* Gegroepeerde groei-bars (klanten/gebruikers per maand) */
.gbars .gpair {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 80px;
}
.gbars .gpair .bar-track { height: 100%; max-width: 12px; }
.gbars .bar-fill.alt { background: #6f8fd9; }
.gbars .bar-n { min-height: 14px; font-size: 10px; }

/* Horizontale bars (gesprekstypen, funnel) */
.hbars { display: flex; flex-direction: column; gap: 8px; }
.hrow { display: flex; align-items: center; gap: 10px; }
.hlbl {
  flex: 0 0 168px;
  font-size: 12.5px;
  color: var(--txt2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.htrack {
  flex: 1;
  height: 12px;
  background: var(--hair2);
  border-radius: 6px;
  overflow: hidden;
}
.hfill {
  display: block;
  height: 100%;
  background: var(--amber);
  border-radius: 6px;
  min-width: 2px;
}
.hval {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--txt2);
  white-space: nowrap;
}

/* Desktop: admin-pagina's (.app.wide) mogen de volle breedte gebruiken. Mobiel blijft ongewijzigd
   (dezelfde 480px-shell); dit is puur een min-width-verbreding voor beheer op een groot scherm. */
@media (min-width: 920px) {
  .app.wide { max-width: 1200px; }
  .app.wide .fade { max-width: 1200px; }
  .app.wide .admin-tabs { justify-content: flex-start; }
  .app.wide .admin-tabs a { flex: 0 0 auto; padding: 9px 18px; }
  .app.wide .tiles { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
  .app.wide .agrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2px;
    align-items: start;
  }
  .app.wide .agrid > .card { min-width: 0; }
}
/* Op smal scherm mag de 6-tabs-balk scrollen i.p.v. knijpen. */
@media (max-width: 919px) {
  .admin-tabs { overflow-x: auto; scrollbar-width: none; }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tabs a { flex: 1 0 auto; padding: 9px 12px; white-space: nowrap; }
}

/* ── Beta-pagina (/beta) ────────────────────────────────────────────────────── */

.beta-hero { padding-bottom: 0; }
.beta-sub strong { color: var(--txt); }

/* Hoofd-CTA boven de kaarten */
.beta-cta-main {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 28px;
  background: var(--amber);
  color: #181a1f;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  border-radius: 15px;
  text-decoration: none;
  margin-top: 8px;
  transition: background 0.12s;
}
.beta-cta-main:hover { background: var(--amber-d); }
.beta-cta-main:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.beta-cta-note {
  font-size: 12px;
  color: var(--txt3);
  margin: 8px 0 0;
}

/* Kaartengrid: 2 kolommen naast elkaar op breed scherm */
.beta-grid {
  grid-template-columns: 1fr;
  max-width: 720px;
}
@media (min-width: 580px) {
  .beta-grid { grid-template-columns: repeat(2, 1fr); }
}

.beta-card-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--txt);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.beta-free-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--amber);
  color: #181a1f;
  border-radius: 7px;
  padding: 3px 9px;
}

.beta-card--feedback { border-style: dashed; }

/* FAQ */
.beta-faq {
  padding: 0 16px 56px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 600px) { .beta-faq { padding: 0 24px 64px; } }

.beta-faq-item {
  border-bottom: 1px solid var(--hair);
  padding: 4px 0;
}
.beta-faq-item:first-of-type { border-top: 1px solid var(--hair); }

.beta-faq-q {
  font-size: 15px;
  font-weight: 700;
  color: var(--txt);
  cursor: pointer;
  padding: 14px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.beta-faq-q::-webkit-details-marker { display: none; }
.beta-faq-q::after {
  content: '+';
  font-size: 18px;
  font-weight: 400;
  color: var(--txt3);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.beta-faq-item[open] .beta-faq-q::after { transform: rotate(45deg); }

.beta-faq-a {
  font-size: 14px;
  color: var(--txt2);
  line-height: 1.6;
  padding: 0 0 16px;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .beta-cta-main { transition: none; }
  .beta-faq-q::after { transition: none; }
}

.beta-faq-wa {
  margin-top: 24px;
  text-align: center;
}
.beta-cta-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.12s;
}
.beta-cta-wa:hover { background: #1ebe5b; }
.beta-cta-wa:focus-visible { outline: 2px solid #25D366; outline-offset: 3px; }
.beta-cta-wa svg { width: 20px; height: 20px; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .beta-cta-wa { transition: none; } }

/* ── /prijzen vergelijkingstabel ─────────────────────────────────────────── */
.pr-compare-wrap { margin-top: 4.5rem; }
.pr-compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  border-radius: 14px;
  margin-top: 1.75rem;
}
.pr-compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
  font-size: 14px;
  line-height: 1.45;
}

/* Koptekst */
.pr-compare thead th {
  padding: 24px 16px 20px;
  text-align: center;
  border-bottom: 2px solid var(--rule);
  background: var(--bg);
  vertical-align: bottom;
}
.pr-compare thead .pr-cf-name {
  text-align: left;
  width: 36%;
  padding-left: 24px;
}
.pr-compare thead .pr-cf-featured {
  background: color-mix(in srgb, var(--amber) 9%, var(--bg));
  border-top: 3px solid var(--amber);
  padding-top: 21px;
}
.pr-compare thead .pr-cf-featured .pr-cf-label { color: var(--amber); }
.pr-compare thead .pr-cf-featured .pr-cf-price { color: var(--amber); }
/* Subtiele amber kolom-markering in het lichaam */
.pr-compare tbody td:nth-child(4) {
  background: color-mix(in srgb, var(--amber) 4%, var(--bg));
}

/* Tiernaam */
.pr-cf-label {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--txt);
  line-height: 1.2;
  margin-bottom: 8px;
}
/* Prijs */
.pr-cf-price {
  display: inline;
  font-size: 20px;
  font-weight: 700;
  color: var(--txt);
  line-height: 1;
}
.pr-cf-price-per {
  display: inline;
  font-size: 11px;
  font-weight: 400;
  color: var(--txt3);
  margin-left: 3px;
}

/* Tabelrijen */
.pr-compare tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--txt);
  vertical-align: middle;
  font-size: 14px;
}
.pr-compare tbody td:first-child { padding-left: 24px; }
.pr-compare tbody tr:last-child td { border-bottom: none; }
.pr-compare tbody td + td {
  text-align: center;
  width: 16%;
}

/* Groepkoppen */
.pr-cg td {
  background: var(--bg2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt2);
  padding: 10px 24px !important;
  text-align: left !important;
  border-top: 1px solid var(--rule);
}

/* Vinkjes en streepjes */
.pr-ct { color: var(--amber); font-size: 16px; font-weight: 700; line-height: 1; }
.pr-cm { color: var(--txt3); font-size: 16px; line-height: 1; }
.pr-ct-val { color: var(--txt); font-weight: 600; font-size: 12.5px; }
.pr-cm-val { color: var(--txt3); font-size: 12.5px; }