/* ==========================================================================
   KBO Scout, cyber/security-thema (CrowdStrike-achtig)
   Dark-first: near-black met signaalrood, scherpe hoeken, Space Grotesk +
   Inter + JetBrains Mono, subtiel grid op de achtergrond en glows op wat
   "live" is. Licht thema blijft beschikbaar als omkering.
   ========================================================================== */

:root {
  --plane: #f3f5f9;
  --surface: #ffffff;
  --field-bg: #ffffff;
  --ink: #101623;
  --ink-secondary: #46506a;
  --ink-muted: #7d879e;
  --edge: #dce1ec;
  --hairline: #e8ebf2;
  --ghost: rgba(16, 22, 35, 0.05);
  --accent: #d31f31;
  --accent-strong: #b01527;
  --accent-soft: rgba(211, 31, 49, 0.08);
  --glow: 0 0 14px rgba(211, 31, 49, 0.22);
  --grid-line: rgba(16, 22, 35, 0.045);
  --good: #16a34a;
  --warn: #d97706;
  --bad: #dc2626;
  --sidebar-w: 248px;
  --r-lg: 8px;
  --r-md: 6px;
  --r-sm: 4px;
  --shadow-pop: 0 1px 2px rgba(16, 22, 35, 0.05), 0 4px 14px rgba(16, 22, 35, 0.05);
  --shadow-pop-sm: 0 1px 2px rgba(16, 22, 35, 0.06);
  --shadow-lift: 0 2px 4px rgba(16, 22, 35, 0.06), 0 12px 28px rgba(16, 22, 35, 0.12);
  --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: "Space Grotesk", "Inter", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --font-type: var(--font-sans);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Funnel: ordinale rood-ramp, licht thema (gevalideerd op wit) */
  --funnel-1: #e28585;
  --funnel-2: #d75454;
  --funnel-3: #c62c2c;
  --funnel-4: #a01111;
  --funnel-5: #780000;
}

/* --- Donker thema (standaard): near-black met signaalrood ------------------ */
[data-bs-theme="dark"] {
  --plane: #0a0d13;
  --surface: #101521;
  --field-bg: #141a29;
  --ink: #e8edf6;
  --ink-secondary: #aeb9cc;
  --ink-muted: #76839b;
  --edge: #232c40;
  --hairline: #1b2334;
  --ghost: rgba(232, 237, 246, 0.05);
  --accent: #f83b4c;
  --accent-strong: #ff5c6a;
  --accent-soft: rgba(248, 59, 76, 0.14);
  --glow: 0 0 16px rgba(248, 59, 76, 0.3);
  --grid-line: rgba(232, 237, 246, 0.03);
  --shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-pop-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.45), 0 14px 32px rgba(0, 0, 0, 0.5);

  /* Funnel-ramp voor het donkere oppervlak (gevalideerd op #101521) */
  --funnel-1: #f2bdbd;
  --funnel-2: #e88a8a;
  --funnel-3: #dd5c5c;
  --funnel-4: #cf3232;
  --funnel-5: #a81f1f;
}

html, body { height: 100%; }

body {
  background: var(--plane);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Subtiel technisch grid over het hele vlak, het security-console-gevoel */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
}

.app-shell, .login-wrap { position: relative; z-index: 1; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  font-weight: 700;
}

a { color: var(--accent); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--accent-strong); text-decoration: underline; }

code {
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 0.1em 0.4em;
  border-radius: 5px;
  font-size: 0.85em;
  font-family: var(--font-mono);
}

.text-accent { color: var(--accent); }

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

::selection { background: var(--accent-soft); }

/* --- Beweging: entree, en de aan-uitknop ---------------------------------- */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes grow-w { from { width: 0; } }

@keyframes menu-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.page-header,
.alert,
.card {
  animation: rise-in 0.45s var(--ease-out) both;
  animation-delay: calc(var(--stagger, 0) * 45ms);
}

/* Thema-wissel via View Transitions: crossfade van de héle pagina in één
   keer (grid, kaarten, alles), soepel en zonder per-element geschok. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Terugval voor browsers zonder View Transitions: één zachte kleur-crossfade
   (klasse wordt kort door JS gezet). */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              fill 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ?anim=0 (screenshots/tests): alles meteen in eindtoestand */
html.no-anim *, html.no-anim *::before, html.no-anim *::after {
  animation: none !important;
  transition: none !important;
}

/* --- Inklapbare zijbalk ---------------------------------------------------- */

.sidebar { transition: width 0.2s var(--ease-out); }
.content { transition: margin-left 0.2s var(--ease-out); }

/* --- Zijbalk in secties --------------------------------------------------
   Negen losse regels onder elkaar lezen als een lijst zonder ordening.

   Als <details> en niet als eigen knopwerk: dat opent en sluit ook zonder
   JavaScript, luistert naar het toetsenbord en meldt zichzelf netjes aan
   een schermlezer.

   Elke sectie is een eigen verdiept vlak. Een eerdere versie liet de
   regels gewoon uitgelijnd staan onder een kopje, en dan zie je niet dat
   ze bij dat kopje horen. Nu is het dezelfde vorm als de kaarten in de
   rest van de app: --plane ligt een tint onder --surface, dus het vlak
   ligt zichtbaar in de zijbalk verzonken, in beide thema's. */
.nav-groep {
  background: var(--plane);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  margin-bottom: 0.4rem;
  overflow: hidden;
}

.nav-groep-kop {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background 0.15s, color 0.15s;
}
.nav-groep-kop::marker { content: ""; }
.nav-groep-kop::-webkit-details-marker { display: none; }

/* Hetzelfde rode blokje als boven een kaart: in deze app betekent dat
   "hier begint een sectie". */
.nav-groep-kop::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--accent);
  opacity: 0.5;
  transition: opacity 0.15s;
}

.nav-groep-kop:hover { background: var(--ghost); color: var(--ink-secondary); }
.nav-groep-kop:hover::before,
.nav-groep[open] > .nav-groep-kop::before { opacity: 1; }

.nav-groep-kop:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent-soft);
}

.nav-groep-kop .bi {
  margin-left: auto;
  font-size: 0.62rem;
  opacity: 0.5;
  transition: transform 0.18s var(--ease-out), opacity 0.15s;
}
.nav-groep-kop:hover .bi { opacity: 0.9; }
.nav-groep[open] > .nav-groep-kop .bi { transform: rotate(180deg); }

/* De regels liggen op het oppervlak van de zijbalk, binnen de rand van
   het vlak: daardoor is met een oogopslag te zien wat bij welk kopje
   hoort. */
.nav-groep[open] > .nav-groep-kop { border-bottom: 1px solid var(--hairline); }

.nav-groep > ul {
  background: var(--surface);
  padding: 0.3rem;
  margin: 0;
}
.nav-groep > ul .nav-link { margin-bottom: 2px; }
.nav-groep > ul .nav-item:last-child .nav-link { margin-bottom: 0; }

/* Ingeklapt is er geen ruimte voor kopjes of vlakken: dan staan de iconen
   gewoon onder elkaar, zoals voorheen. */
html.nav-collapsed .nav-groep {
  background: none;
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  overflow: visible;
}
html.nav-collapsed .nav-groep-kop { display: none; }
html.nav-collapsed .nav-groep > ul { background: none; padding: 0; }

html.nav-collapsed { --sidebar-w: 70px; }

html.nav-collapsed .sidebar { padding-left: 0.55rem; padding-right: 0.55rem; }

/* Nav-links ingeklapt: alleen iconen, de markering zit in een net afgerond
   vlakje rond het icoon (font-size 0 verbergt de tekst) */
html.nav-collapsed .sidebar .nav-link {
  font-size: 0;
  justify-content: center;
  gap: 0;
  padding: 0.15rem 0;
  background: transparent;
  margin-bottom: 2px;
}
html.nav-collapsed .sidebar .nav-link i {
  font-size: 1.05rem;
  width: 42px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-md);
  transition: background-color 0.15s, color 0.15s;
}
html.nav-collapsed .sidebar .nav-link:hover i { background: var(--ghost); transform: none; }
html.nav-collapsed .sidebar .nav-link.active i { background: var(--accent-soft); }

/* Bovenbalk gestapeld: logo boven, inklap-knop eronder, gecentreerd */
html.nav-collapsed .sidebar-top {
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  padding-left: 0;
  padding-right: 0;
}
html.nav-collapsed .sidebar-brand { justify-content: center; }
html.nav-collapsed .sidebar-brand > span:not(.brand-mark) { display: none; }

/* Landkiezer: alleen de vlag */
html.nav-collapsed .country-picker { margin-left: 0; margin-right: 0; }
html.nav-collapsed .country-current { justify-content: center; padding: 0.5rem 0.3rem; }
html.nav-collapsed .country-current .cp-name { display: none; }
html.nav-collapsed .country-current.dropdown-toggle::after { display: none; }

/* Gebruikerschip ingeklapt: avatar in het midden. Bij hover (of focus) faadt
   de avatar weg en verschijnt op dezelfde plek de afmeldknop. */
html.nav-collapsed .user-chip {
  position: relative;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  padding: 0.4rem 0;
  background: transparent;
}
html.nav-collapsed .user-chip .user-name { display: none; }
html.nav-collapsed .user-avatar {
  width: 34px;
  height: 34px;
  font-size: 0.82rem;
  transition: opacity 0.15s;
}
html.nav-collapsed .user-chip form {
  position: absolute;
  inset: 0;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
html.nav-collapsed .user-chip:hover .user-avatar,
html.nav-collapsed .user-chip:focus-within .user-avatar { opacity: 0; }
html.nav-collapsed .user-chip:hover form,
html.nav-collapsed .user-chip:focus-within form { opacity: 1; pointer-events: auto; }
html.nav-collapsed .logout-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.95rem;
}
html.nav-collapsed .logout-btn:hover { background: rgba(220, 38, 38, 0.15); color: var(--bad); }

/* Inklap-knop: chevron draait mee */
html.nav-collapsed .nav-collapse-btn i { transform: rotate(180deg); }

/* --- Layout: sidebar + content ------------------------------------------ */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0.875rem;
  z-index: 100;
}

/* Bovenbalk: logo links, inklap-knop rechts */
.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0.375rem 1.1rem;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  min-width: 0;
}

.nav-collapse-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.nav-collapse-btn:hover { color: var(--accent); border-color: var(--accent); }
.nav-collapse-btn i { font-size: 0.9rem; transition: transform 0.2s var(--ease-out); }

.sidebar-brand:hover { color: var(--ink); text-decoration: none; }

.brand-mark {
  width: 34px;
  height: 34px;
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-size: 1rem;
  animation: mark-pulse 3.5s ease-in-out infinite;
}

@keyframes mark-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(248, 59, 76, 0.25); }
  50%      { box-shadow: 0 0 22px rgba(248, 59, 76, 0.5); }
}

.sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink-secondary);
  font-weight: 600;
  font-size: 0.84rem;
  padding: 0.55rem 0.75rem;
  margin-bottom: 3px;
  border-radius: var(--r-md);
  transition: background 0.15s, color 0.15s;
}

.sidebar .nav-link i {
  font-size: 1rem;
  transition: transform 0.2s var(--ease-out);
}

.sidebar .nav-link:hover {
  background: var(--ghost);
  color: var(--ink);
  text-decoration: none;
}

.sidebar .nav-link:hover i { transform: translateX(2px); }

.sidebar .nav-link.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

[data-bs-theme="dark"] .sidebar .nav-link.active { color: var(--accent-strong); }

.sidebar-footer {
  margin-top: auto;
  padding: 0.75rem 0.25rem 0.25rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.8rem;
}

/* --- Landselectie: prominente picker bovenaan de sidebar ------------------ */

.country-picker { margin: 0 0.25rem 1rem; }

.country-current {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop-sm);
  color: var(--ink);
  text-align: left;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.2s;
}

.country-current:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.country-current.dropdown-toggle::after {
  margin-left: auto;
  border-top-color: var(--ink-muted);
}

/* Vlaggen als afbeelding: Windows toont emoji-vlaggen als letters */
.flag-img {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.flag-img-lg { width: 26px; height: 26px; border-radius: 5px; }

.cp-name {
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.country-menu {
  width: 352px;
  padding: 0.65rem;
  border-radius: var(--r-lg);
}

.country-menu-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  padding: 0.3rem 0.45rem 0.55rem;
}
/* Actieknop in een kaartkop. De kop staat in kleine hoofdletters met veel
   letterafstand; een knop die dat overneemt wordt onleesbaar, dus die zetten
   we terug naar normale tekst. Compacter dan een gewone btn-sm, want het is
   een secundaire actie naast een titel. */
.card-header-action {
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
}

/* --- SPF/DKIM/DMARC-instructies: drie afgebakende stappen --------------- */
/* Elk record is een eigen blok met een genummerde kop, zodat je in één
   oogopslag ziet waar de ene instructie ophoudt en de volgende begint. */
.record-block {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.record-block:last-of-type { margin-bottom: 0; }

.record-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.75rem;
}
.record-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
}
.record-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}
.record-sub {
  font-size: 0.78rem;
  color: var(--ink-muted);
}

/* De in te vullen waarden: label links, waarde rechts, op een eigen vlak
   zodat je ze zonder zoeken kunt overnemen. */
.record-values {
  background: var(--ghost);
  border-radius: var(--r-md);
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.6rem;
}
.record-values > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.2rem 0;
}
.record-values > div + div { border-top: 1px solid var(--hairline); }
.record-values span {
  flex: none;
  min-width: 6.5rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.record-values code {
  background: transparent;
  color: var(--ink);
  padding: 0;
  font-size: 0.78rem;
  word-break: break-all;
}

.record-note {
  font-size: 0.8rem;
  color: var(--ink-muted);
  line-height: 1.5;
}
.record-note.record-warn {
  color: var(--ink);
  border-left: 3px solid var(--warn);
  padding-left: 0.7rem;
}

/* Uitkomst van de SPF/DKIM/DMARC-check. Kleur draagt de betekenis, het
   woord staat er ook, zodat het zonder kleurwaarneming leesbaar blijft. */
.dns-state {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: help;
}
.dns-ok {
  color: var(--good);
  background: color-mix(in srgb, var(--good) 12%, transparent);
}
.dns-zwak {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
}
.dns-weg {
  color: var(--accent);
  background: var(--accent-soft);
}
.dns-onbekend {
  color: var(--ink-muted);
  background: var(--ghost);
}

/* "Meer filters": was een grijs tekstlinkje dat over het hoofd werd gezien,
   nu een echte knop met een pijltje dat meedraait bij open/dicht. */
.more-filters { font-weight: 600; }
.more-filters .cell-muted { font-weight: 400; margin-left: 0.35rem; }
.more-filters-caret {
  margin-left: 0.4rem;
  font-size: 0.7rem;
  transition: transform 0.18s var(--ease-out);
}
.more-filters[aria-expanded="true"] .more-filters-caret { transform: rotate(180deg); }

/* Terugmelding terwijl de gefilterde pagina laadt */
.filter-busy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* Beheerknop rechts in de kop van het landmenu */
.country-manage {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.4rem;
  border-radius: var(--r-sm);
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.12s var(--ease-out), background 0.12s var(--ease-out);
}
.country-manage:hover {
  color: var(--accent);
  background: var(--ghost);
  text-decoration: none;
}

.country-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.country-tile {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.12s, border-color 0.12s,
              transform 0.15s var(--ease-out);
}

.country-tile:hover {
  background: var(--ghost);
  transform: translateY(-1px);
}

.country-tile .ct-name {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.country-tile.active i { flex-shrink: 0; }

.country-tile.active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.country-tile.active .ct-name { color: var(--accent); font-weight: 700; }
[data-bs-theme="dark"] .country-tile.active .ct-name { color: var(--accent-strong); }

.country-tile.active i { margin-left: auto; font-size: 0.8rem; color: var(--accent); }

/* Statusstippen (statuspagina) */
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: baseline;
  flex-shrink: 0;
}

.status-ok   { background: var(--good); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15); }
.status-warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15); }
.status-off  { background: var(--ink-muted); opacity: 0.45; }

/* Kanaal structureel niet mogelijk: open rondje, geen "fout"-signaal */
.status-none {
  background: transparent;
  border: 1.5px solid var(--ink-muted);
  opacity: 0.55;
}

/* Link zonder accentkleur: cijfers/aantallen mogen niet als fout lezen */
.link-plain { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.link-plain:hover { color: var(--accent); }

/* Ingelogde gebruiker onderin de sidebar */
.user-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--r-md);
  background: var(--ghost);
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 0.76rem;
  font-weight: 700;
  flex-shrink: 0;
}

[data-bs-theme="dark"] .user-avatar { color: #0e1016; }

.user-name {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logout-btn {
  border: none;
  background: none;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.35rem;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}

.logout-btn i { line-height: 1; }

.logout-btn:hover { color: var(--bad); background: rgba(220, 38, 38, 0.1); }

/* --- Loginpagina ----------------------------------------------------------- */

/* --- Sectiekoppen (o.a. Instellingen: persoonlijk / e-mail / brieven) ----- */

.settings-section {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin: 1.75rem 0 0.85rem;
  /* Ruimte onder de plakkende navigatiebalk, anders schuift een sectie er
     deels achter zodra je ernaartoe springt. */
  scroll-margin-top: 4.5rem;
}

/* --- Verzendritme: instellingen als leesbare zinnen -----------------------
   Volle-breedte invoervelden voor een getal van twee cijfers zien er raar
   uit en dwingen je het label te lezen om te snappen wat je invult. Als
   zin met een smal veld erin is meteen duidelijk wat de waarde betekent. */
.pace-rows { display: flex; flex-direction: column; gap: 0.85rem; }

.pace-row {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.pace-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-md);
  background: var(--ghost);
  color: var(--ink-muted);
  font-size: 0.95rem;
}
/* line-height ruim, want de velden zijn hoger dan de tekst en anders
   plakken de regels bij het afbreken tegen elkaar */
.pace-text {
  font-size: 0.9rem;
  line-height: 2.1;
}

.pace-input {
  width: 3.5rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--field-bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  text-align: center;
}
.pace-input-time { width: 4.5rem; }
/* URL's zijn lang: dit veld groeit mee, maar breekt niet uit de zin */
.pace-input-wide {
  width: min(22rem, 100%);
  font-family: var(--font-sans);
  font-weight: 500;
  text-align: left;
}
/* Kleurkiezer in de zin: klein vierkantje, geen volle-breedte balk */
.pace-color {
  width: 2rem;
  height: 1.5rem;
  padding: 2px;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--field-bg);
  cursor: pointer;
  vertical-align: -3px;
}
.pace-color::-webkit-color-swatch-wrapper { padding: 0; }
.pace-color::-webkit-color-swatch { border: none; border-radius: 2px; }
.pace-color::-moz-color-swatch { border: none; border-radius: 2px; }
.pace-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Pijltjes van number-velden weg: ze passen niet in zo'n smal veld */
.pace-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.pace-input[type="number"]::-webkit-outer-spin-button,
.pace-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pace-select {
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--field-bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
}
.pace-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.pace-hint {
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-top: 0.2rem;
}

/* --- Sprongnavigatie bovenaan Instellingen -------------------------------
   De pagina is lang en je komt er meestal voor één ding. Deze balk blijft
   bij het scrollen bovenaan staan; het script markeert waar je bent. */
.settings-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;

  /* Doortrekken tot de randen van het contentvlak. Zonder deze negatieve
     marges liep de vervaagde strook maar tot de padding van .content, en
     schoof de inhoud er links en rechts scherp langs. De padding zet de
     knoppen weer op hun oorspronkelijke lijn. */
  margin-left: -2rem;
  margin-right: -2rem;
  padding: 0.6rem 2rem;

  /* In rust helemaal doorzichtig: er scrollt nog niets onderdoor, dus een
     achtergrond zou alleen het grid afdekken. */
  background: transparent;
  backdrop-filter: none;
  transition: background 0.2s var(--ease-out),
              backdrop-filter 0.2s var(--ease-out);
}

/* Zodra je scrollt schuift er inhoud onder de balk door: dan pas een
   halfdoorzichtige laag met vervaging, zodat de knoppen leesbaar blijven
   maar het achtergrondgrid zichtbaar is. De klasse wordt door het script
   op de instellingenpagina gezet. */
.settings-nav.is-stuck {
  background: color-mix(in srgb, var(--plane) 72%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.settings-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.14s var(--ease-out), border-color 0.14s var(--ease-out),
              background 0.14s var(--ease-out);
}
.settings-nav a:hover {
  color: var(--ink);
  border-color: var(--edge);
  text-decoration: none;
}
.settings-nav a.is-here {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: var(--accent-soft);
}
.settings-nav a i { font-size: 0.85rem; }

.settings-section:first-of-type { margin-top: 0.5rem; }
/* Anker landt onder de plakkende navigatiebalk in plaats van eronder te
   verdwijnen. Ruim genomen, zodat de kop ook echt in beeld staat. */
.settings-section[id] { scroll-margin-top: 4.5rem; }

.settings-section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.settings-section i { color: var(--accent); font-size: 0.9rem; }

/* Markt-selectie (Instellingen): aanvinkbare tegels met kanaal-labels */
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}

.market-tile {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  margin: 0;
}

.market-tile:hover { border-color: var(--accent); }

.market-tile.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.market-tile input { margin: 0; flex-shrink: 0; }
.market-tile .market-name {
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.market-caps { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }

.cap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* E-mail valt op (kleur), brieven is ingetogen (alle markten hebben het) */
.cap-mail { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.cap-letter { background: var(--ghost); color: var(--ink-muted); }

/* Statuspagina: markt die de gebruiker niet aan heeft staan, duidelijk "uit" */
.table tbody tr.row-inactive td { color: var(--ink-muted); }
.table tbody tr.row-inactive .status-dot { opacity: 0.35; }
.table tbody tr.row-inactive .flag-img { filter: grayscale(0.7); opacity: 0.6; }
.table tbody tr.row-inactive .fw-semibold { color: var(--ink-muted); font-weight: 600; }
/* het "uit"-label en de inschakel-link blijven wél op volle sterkte */
.table tbody tr.row-inactive .badge-status,
.table tbody tr.row-inactive a { color: var(--accent); opacity: 1; }
.table tbody tr.row-inactive .badge-status { color: var(--ink); }

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  /* geen eigen achtergrond: zo blijft het grid van body::before zichtbaar */
}

.login-card {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  padding: 2.25rem 2rem;
  animation: rise-in 0.5s var(--ease-out) both;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
}

.login-title {
  font-family: var(--font-display);
  text-align: center;
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
}

.login-sub {
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.82rem;
  margin-bottom: 1.5rem;
}

.content {
  margin-left: var(--sidebar-w);
  flex: 1;
  /* Een flex-item mag standaard niet smaller worden dan zijn breedste
     inhoud. Zonder dit rekt een brede tabel het hele werkvlak op en
     krijgt de pagina een horizontale schuifbalk, terwijl juist
     .table-responsive dat zou moeten opvangen. */
  min-width: 0;
  padding: 1.75rem 2rem 3rem;
  max-width: calc(1440px + var(--sidebar-w));
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  /* De rise-in-animatie (transform) maakt van page-header, alert én card
     elk een stacking-context. Zonder dit valt een dropdown uit de kop
     achter de kaarten eronder. */
  position: relative;
  z-index: 5;
}

.page-header h1 {
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0;
}

.page-header .subtitle {
  color: var(--ink-muted);
  font-size: 0.86rem;
  margin-top: 0.25rem;
}

/* --- Kaarten: zacht oppervlak met diepte ---------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.card-header {
  font-family: var(--font-mono);
  background: transparent;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--hairline);
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.8rem 1.25rem;
}

/* Het rode blokje staat absoluut, niet in de tekststroom. Als inline-block
   werd het namelijk een flex-item zodra de kop `d-flex` kreeg, en dan
   verdeelde `justify-content: space-between` de ruimte over drie items in
   plaats van twee: de titel schoof naar het midden of naar rechts. Nu is
   het een decoratie die niets aan de indeling verandert. */
.card-header {
  position: relative;
  padding-left: calc(1.25rem + 6px + 0.55rem);
}
.card-header::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--accent);
}

.card-header.bulk-bar::before { display: none; }

.card-header .cell-muted { color: inherit; opacity: 0.75; }

.card-header code { letter-spacing: normal; text-transform: none; }

/* Alleen platte tekstlinks accentkleuren; knoppen houden hun eigen stijl */
.card-header a:not(.btn) { color: var(--accent); text-decoration: none; }
.card-header a:not(.btn):hover { text-decoration: underline; }

.card-header .chart-toggle .btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}

.card-body { padding: 1.25rem; }

/* Bulk-balk in de leadbrowser: blijft in beeld tijdens het scrollen */
.card-header.bulk-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
}

/* --- Stat tiles ------------------------------------------------------------ */

.stat-tile .label {
  font-family: var(--font-mono);
  color: var(--ink-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.35rem;
}

.stat-tile .value {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.stat-tile .context {
  color: var(--ink-muted);
  font-size: 0.78rem;
  margin-top: 0.125rem;
}

/* --- HTML-staafjes (funnel & gemeenten) ------------------------------------ */

.hbar-row {
  display: grid;
  /* auto in plaats van 52px: bij 204.972 brak het getal over twee
     regels, en dan lees je 204.97 met een 2 eronder. */
  grid-template-columns: 130px 1fr minmax(52px, auto);
  align-items: center;
  gap: 0.75rem;
  padding: 0.3rem 0;
}

.hbar-row .hbar-label {
  color: var(--ink-secondary);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bevindingtitels zijn hele zinnen ("Geen omschrijving voor Google") en
   passen niet in de 130px die een statuslabel genoeg is. */
.hbar-row.hbar-breed { grid-template-columns: 210px 1fr minmax(52px, auto); }

.hbar-track { min-width: 0; }

.hbar-fill {
  height: 14px;
  background: var(--accent);
  border-radius: 0 4px 4px 0;
  min-width: 2px;
  animation: grow-w 0.7s var(--ease-out) both;
  animation-delay: calc(var(--stagger, 0) * 60ms);
}

.hbar-fill.funnel-step-1 { background: var(--funnel-1); }
.hbar-fill.funnel-step-2 { background: var(--funnel-2); }
.hbar-fill.funnel-step-3 { background: var(--funnel-3); }
.hbar-fill.funnel-step-4 { background: var(--funnel-4); }
.hbar-fill.funnel-step-5 { background: var(--funnel-5); }

.hbar-row .hbar-value {
  font-size: 0.8rem;
  white-space: nowrap;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- Statusbadges: zachte chips met gekleurde stip -------------------------- */

.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.22rem 0.6rem;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dot, var(--ink-muted)) 11%, transparent);
  color: var(--ink);
  white-space: nowrap;
}

.badge-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot, var(--ink-muted));
  flex-shrink: 0;
}

.badge-status-new       { --dot: #2e77d0; }
.badge-status-qualified { --dot: #8b5cf6; }
.badge-status-contacted { --dot: #d97706; }
.badge-status-replied   { --dot: #0d9488; }
.badge-status-won       { --dot: #16a34a; }
.badge-status-lost      { --dot: #dc2626; }
.badge-status-archived  { --dot: #878da1; }

/* --- Tabellen ---------------------------------------------------------------- */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink);
  --bs-table-hover-bg: var(--ghost);
  --bs-table-hover-color: var(--ink);
  font-size: 0.82rem;
  margin-bottom: 0;
}

.table > :not(caption) > * > * {
  padding: 0.65rem 0.75rem;
  border-bottom-color: var(--hairline);
}

.table thead th {
  font-family: var(--font-mono);
  color: var(--ink-muted);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--edge);
  white-space: nowrap;
}

.table thead th a {
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
}

.table thead th a:hover { color: var(--ink); }
.table thead th a.sort-active { color: var(--accent); }

.table tbody td { vertical-align: middle; }

.table tbody tr { transition: background-color 0.12s; }

/* Rijen in de leadbrowser: klikken = selecteren */
.table tbody tr.row-selectable { cursor: pointer; }
.table tbody tr.row-selected > td {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.table tbody tr.row-selected > td:not(:first-child) { box-shadow: none; }

.cell-muted { color: var(--ink-muted); }
.cell-mono  {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Formulieren & knoppen ----------------------------------------------------- */

.form-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 0.3rem;
}

.form-control, .form-select {
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  font-size: 0.84rem;
  font-family: var(--font-sans);
  background-color: var(--field-bg);
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control::placeholder { color: var(--ink-muted); }

.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  background-color: var(--field-bg);
  color: var(--ink);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-check-input {
  border: 1.5px solid var(--edge);
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
  transform: scale(1.05);
}

.form-check-input:focus { box-shadow: 0 0 0 3px var(--accent-soft); }

.btn {
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8rem;
  transition: transform 0.15s var(--ease-out), box-shadow 0.2s var(--ease-out),
              background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-color: #ffffff;
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-strong);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-border-color: var(--accent-strong);
  --bs-btn-active-bg: var(--accent-strong);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-border-color: var(--accent-strong);
  box-shadow: var(--glow);
}

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: #0e1016;
  --bs-btn-hover-color: #0e1016;
  --bs-btn-active-color: #0e1016;
}

.btn-primary:hover {
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 42%, transparent);
}

.btn-outline-secondary {
  --bs-btn-color: var(--ink-secondary);
  --bs-btn-border-color: var(--edge);
  --bs-btn-hover-bg: var(--ghost);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-border-color: var(--edge);
  --bs-btn-active-bg: var(--ghost);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-border-color: var(--edge);
  --bs-btn-disabled-color: var(--ink-muted);
  --bs-btn-disabled-border-color: var(--hairline);
  background: var(--surface);
}

.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: var(--accent-strong);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-border-color: var(--accent-strong);
}

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-hover-color: #0e1016;
  --bs-btn-active-color: #0e1016;
}

.btn-link {
  --bs-btn-color: var(--ink-secondary);
  --bs-btn-hover-color: var(--accent);
  --bs-btn-active-color: var(--accent-strong);
}

/* --- Dropdown-menu's (o.a. "Status veranderen") ------------------------------------ */

.dropdown-menu {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  padding: 0.3rem;
  font-size: 0.82rem;
}

.dropdown-menu.show { animation: menu-pop 0.18s var(--ease-out); transform-origin: top; }

.dropdown-item {
  border-radius: 7px;
  padding: 0.4rem 0.65rem;
  color: var(--ink);
  transition: background-color 0.12s;
}

.dropdown-item:hover, .dropdown-item:focus {
  background: var(--ghost);
  color: var(--ink);
}

/* --- Upload dropzone -------------------------------------------------------------- */

.dropzone {
  border: 2px dashed var(--edge);
  border-radius: var(--r-lg);
  background: var(--field-bg);
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease-out);
}

.dropzone:hover, .dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.dropzone.dragover { transform: scale(1.01); }

.dropzone .dz-icon {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
  display: inline-block;
  transition: transform 0.25s var(--ease-out);
}

.dropzone:hover .dz-icon, .dropzone.dragover .dz-icon { transform: translateY(-3px); }

.dropzone .dz-hint {
  color: var(--ink-muted);
  font-size: 0.86rem;
}

/* --- Tijdlijn (lead detail) ---------------------------------------------------------- */

.timeline { position: relative; padding-left: 2.25rem; }

.timeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 6px;
  bottom: 6px;
  border-left: 2px solid var(--hairline);
}

.timeline-item { position: relative; padding-bottom: 1.25rem; }
.timeline-item:last-child { padding-bottom: 0; }

.timeline-icon {
  position: absolute;
  left: -2.25rem;
  top: 0;
  width: 32px;
  height: 32px;
  background: var(--accent-soft);
  color: var(--accent);
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
}

.timeline-item.event-status .timeline-icon {
  background: var(--ghost);
  color: var(--ink-muted);
}

.timeline-item .timeline-time {
  color: var(--ink-muted);
  font-size: 0.72rem;
}

/* --- Detailpagina definitielijsten --------------------------------------------------- */

.kv-list { margin: 0; }

.kv-list dt {
  font-family: var(--font-mono);
  color: var(--ink-muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.kv-list dd {
  margin-bottom: 0.7rem;
  font-size: 0.86rem;
}

.kv-list dd:last-child { margin-bottom: 0; }

/* Kop van een kanaalkaart (e-mail, brieven): één regel die in één oogopslag
   zegt of je kunt versturen. De details staan eronder in een kv-list. */
.channel-state {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

/* De twee kanaalkaarten zijn even hoog (h-100). Zonder deze flexkolom bleef
   de kortste kaart onderaan leeg; nu staan beide knoppen op één lijn.
   De gap regelt de tussenruimte, zodat losse mt-*-klassen niet nodig zijn
   en de opbouw van beide kaarten identiek is. */
.channel-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
}
/* auto duwt de knop naar beneden; align-self houdt hem op z'n eigen breedte
   in plaats van over de hele kaart uitgerekt. */
.channel-action {
  margin-top: auto;
  align-self: flex-start;
}

/* --- Markten als kaarten (statuspagina, ledenweergave) -------------------
   Een tabel met vijf kolommen kleine tekst werd een muur. Per markt telt
   maar één vraag: hoeveel leads staan klaar en welke kanalen kunnen? */
.market-grid {
  display: grid;
  /* 1rem = dezelfde tussenruimte als de Bootstrap-rij met de kanaalkaarten
     erboven (g-3), zodat de verticale ritmiek van de pagina klopt. */
  gap: 1rem;
  /* auto-fit, niet auto-fill: auto-fill houdt lege kolommen aan, waardoor
     vier kaarten maar tweederde van de breedte vulden en de rij niet
     uitlijnde met de kaarten erboven. auto-fit vouwt die lege kolommen op
     en laat de kaarten de volle breedte pakken. */
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
}

.market-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg, 12px);
  transition: border-color 0.15s var(--ease-out);
}
.market-card:hover { border-color: var(--edge); }

.market-card-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}
.market-name { font-weight: 600; }

/* Het getal is waar het oog naartoe moet */
.market-count {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}
.market-count span {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-muted);
  margin-left: 0.25rem;
}

.market-rhythm { font-size: 0.76rem; color: var(--ink); }
.market-coverage { font-size: 0.72rem; color: var(--ink-muted); }

/* margin-top: auto duwt de kanaalbalk naar de onderkant van de kaart.
   Zonder dit zweeft de scheidingslijn op de hoogte van de inhoud, en dan
   staan de lijnen van naast elkaar liggende kaarten niet gelijk. */
/* De negatieve linkermarge compenseert de padding van de eerste chip, zodat
   de tekst uitlijnt met de rest van de kaart. De gap houdt de hovervlakken
   van beide chips uit elkaar; eerder overlapten ze door negatieve marges. */
.market-channels {
  display: flex;
  gap: 0.35rem;
  margin-top: auto;
  margin-left: -0.45rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--hairline);
}
.chan {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.45rem;
  border-radius: var(--r-sm);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.12s var(--ease-out);
}
.chan .status-dot { transition: transform 0.12s var(--ease-out); }
/* Alleen de klikbare varianten reageren; een kanaal dat hier niet kán
   krijgt geen hoverstaat, anders beloof je een actie die er niet is. */
a.chan:hover {
  background: var(--ghost);
  color: var(--ink);
  text-decoration: none;
}
a.chan:hover .status-dot { transform: scale(1.25); }
span.chan { cursor: help; }
/* Kanalen die hier niet kunnen: gedempt, niet alarmerend */
.chan.chan-none, .chan.chan-off { color: var(--ink-muted); font-weight: 500; }

/* --- Tooltip zonder JavaScript -------------------------------------------
   Zet data-tip="…" op een element. Werkt op hover én op focus (tabindex),
   zodat het ook met het toetsenbord bereikbaar is. Bewust niet het native
   title-attribuut: dat wacht een seconde en is niet te stylen. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  /* Links uitlijnen i.p.v. centreren: gecentreerd liep de tooltip van de
     eerste chip buiten de kaart en werd hij afgeknipt. Naar rechts is er
     altijd ruimte, want de chips staan links op de kaart. */
  left: 0;
  transform: translateY(3px);
  z-index: 20;
  width: max-content;
  max-width: 14rem;
  padding: 0.4rem 0.6rem;
  background: var(--ink);
  color: var(--plane);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  text-align: left;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.14s var(--ease-out), transform 0.14s var(--ease-out);
}
/* Pijltje naar het element toe */
/* Pijltje bij de linkerrand, in lijn met de tooltip zelf */
[data-tip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 0.9rem;
  transform: translateY(3px);
  z-index: 20;
  border: 5px solid transparent;
  border-top-color: var(--ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.14s var(--ease-out), transform 0.14s var(--ease-out);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after,
[data-tip]:hover::before, [data-tip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Niet-actieve markten: klikbare chips, geen kader eromheen. Elke chip is
   zelf de weg naar Markten, dus er is geen aparte beheer-link meer nodig. */
.market-off-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1rem;
}
.market-off-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 0.76rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.14s var(--ease-out), border-color 0.14s var(--ease-out),
              background 0.14s var(--ease-out);
}
.market-off-chip .flag-img { flex: none; filter: grayscale(0.85); opacity: 0.6; transition: inherit; }
/* Het plusje is de hint dat je 'm kunt aanzetten; rustig tot je hovert */
.market-off-chip i {
  font-size: 0.7rem;
  opacity: 0.4;
  transition: inherit;
}
.market-off-chip:hover {
  color: var(--ink);
  border-color: var(--edge);
  background: var(--ghost);
  text-decoration: none;
}
.market-off-chip:hover .flag-img { filter: none; opacity: 1; }
.market-off-chip:hover i { opacity: 1; color: var(--accent); }



/* --- Diversen -------------------------------------------------------------------------- */

.chart-toggle .btn { padding: 0.15rem 0.6rem; font-size: 0.68rem; }
.chart-toggle .btn:hover { transform: none; }

.empty-state {
  text-align: center;
  color: var(--ink-muted);
  padding: 2.5rem 1rem;
  font-size: 0.9rem;
}

.empty-state i { font-size: 1.7rem; display: block; margin-bottom: 0.5rem; opacity: 0.6; }

.alert {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-size: 0.84rem;
  box-shadow: var(--shadow-pop-sm);
}

.pagination {
  --bs-pagination-bg: var(--surface);
  --bs-pagination-color: var(--ink);
  --bs-pagination-border-color: var(--hairline);
  --bs-pagination-border-radius: var(--r-sm);
  --bs-pagination-hover-bg: var(--ghost);
  --bs-pagination-hover-color: var(--ink);
  --bs-pagination-hover-border-color: var(--hairline);
  --bs-pagination-focus-bg: var(--ghost);
  --bs-pagination-focus-color: var(--ink);
  --bs-pagination-active-bg: var(--accent);
  --bs-pagination-active-color: #ffffff;
  --bs-pagination-active-border-color: var(--accent);
  --bs-pagination-disabled-bg: var(--surface);
  --bs-pagination-disabled-color: var(--ink-muted);
  --bs-pagination-disabled-border-color: var(--hairline);
  font-size: 0.78rem;
}

/* Campagne-voortgang: zachte balk + subtiele beweging tijdens het sturen */
.progress-track {
  border: none;
  background: var(--ghost);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.progress-fill {
  position: relative;
  background: var(--accent);
  border-radius: 999px;
  height: 100%;
  transition: width 0.6s var(--ease-out);
  overflow: hidden;
}

.progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%,
              rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  animation: shimmer 2.2s infinite;
}

@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.live-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--glow);
  vertical-align: middle;
  margin-right: 0.3rem;
}

.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: live-ping 1.6s var(--ease-out) infinite;
}

@keyframes live-ping {
  from { transform: scale(1); opacity: 0.6; }
  to   { transform: scale(2.6); opacity: 0; }
}

/* Handtekening-editor: gedraagt zich als een mail-oppervlak (altijd licht,
   eigen lettertype) zodat geplakte Outlook-opmaak eruitziet zoals bij de
   ontvanger */
.signature-editor {
  background: #ffffff;
  color: #1a1a1a;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  min-height: 140px;
  max-height: 320px;
  overflow: auto;
  padding: 0.9rem 1rem;
  font-family: Aptos, "Segoe UI", Calibri, Arial, sans-serif;
  font-size: 0.9rem;
  color-scheme: light;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.signature-editor:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.signature-editor:empty::before {
  content: attr(data-placeholder);
  color: #999;
  font-style: italic;
}

.signature-editor img { max-width: 100%; }

/* Uitklap-caret (o.a. ontvangerslijst op de compose-pagina) */
.collapse-caret {
  display: inline-block;
  transition: transform 0.2s var(--ease-out);
}

[aria-expanded="true"] .collapse-caret { transform: rotate(90deg); }

details.table-twin summary {
  color: var(--ink-muted);
  font-size: 0.72rem;
  cursor: pointer;
  user-select: none;
}

/* --- Eigen datumkiezer ----------------------------------------------------- */
/* De native kalender van de browser is niet te stylen, dus we tekenen 'm zelf. */
.dp { position: relative; display: inline-block; }

.dp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.6rem;
  background: var(--field-bg);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.dp-toggle:hover { border-color: var(--accent); }
.dp-toggle:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.dp-toggle i { color: var(--ink-muted); font-size: 0.86rem; }

.dp-pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  width: 17.5rem;
  padding: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
}

.dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}
.dp-title {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
}
.dp-nav {
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink-secondary);
  cursor: pointer;
}
.dp-nav:hover { background: var(--ghost); color: var(--ink); }

.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dp-dow {
  display: grid;
  place-items: center;
  height: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.dp-day {
  height: 2rem;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  cursor: pointer;
  transition: background 0.12s var(--ease-out);
}
.dp-day:hover:not(.dp-off):not(.dp-sel) { background: var(--ghost); }
.dp-blank { pointer-events: none; }
.dp-off { color: var(--ink-muted); opacity: 0.4; cursor: default; }
/* Het opgelichte venster blijft rustig: de tint draagt de periode, de
   einddatum is het enige echte focuspunt. */
.dp-in { background: var(--accent-soft); color: var(--ink); }
.dp-sel {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.dp-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--hairline);
}

/* Voetknoppen als chips: even hoog, even rond, en met een echt klikvlak.
   Als platte tekstlinkjes waren ze klein en lastig te raken. */
.dp-act {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.12s var(--ease-out), border-color 0.12s var(--ease-out),
              color 0.12s var(--ease-out);
}
.dp-act:hover {
  background: var(--ghost);
  border-color: var(--edge);
}
/* "Vandaag" is de meest gebruikte sprong, dus die krijgt de nadruk */
.dp-act.dp-today {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.dp-act.dp-today:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.dp-act.dp-clear { color: var(--ink-muted); }
.dp-act.dp-clear:hover { color: var(--accent); }

/* --- Periodekiezer: van → tot en met, als één leesbare regel ------------- */
.range-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.range-word {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
  white-space: nowrap;
}
.range-arrow { color: var(--ink-muted); font-size: 0.8rem; }

/* De datums zijn de hoofdzaak in deze regel, dus iets groter dan de rest */
.range-line .dp-toggle { font-size: 0.84rem; padding: 0.32rem 0.7rem; }

.range-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-secondary);
  padding: 0.1rem 0.5rem;
  background: var(--ghost);
  border-radius: 999px;
  white-space: nowrap;
}
.range-count.over { color: #fff; background: var(--accent); }

.range-quick {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.range-go.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* --- Foutpagina's (404/403/500) ------------------------------------------- */
.error-page {
  max-width: 30rem;
  margin: 0 auto;
  padding: 5rem 1.5rem;
  text-align: center;
}
.error-code {
  font-family: var(--font-mono);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  text-shadow: var(--glow);
}
.error-page h1 {
  margin-top: 0.9rem;
  font-size: 1.35rem;
}
.error-text {
  color: var(--ink-secondary);
  margin-bottom: 1.5rem;
}

/* --- Datumkiezer: lege (optionele) toestand + wis-actie ------------------- */
.dp-toggle.dp-empty .dp-label { color: var(--ink-muted); }
/* De knoppen vullen samen de breedte van de voet, zodat ze bij één, twee
   of drie stuks altijd netjes uitgelijnd staan. */
.dp-foot-actions {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
  width: 100%;
}

/* --- Eigen dropdown (styledselect) ---------------------------------------- */
.ss { position: relative; display: block; }
.ss-native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.ss-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.7rem;
  background: var(--field-bg);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.84rem;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.ss-toggle:hover { border-color: var(--accent); }
.ss-toggle:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ss-toggle .ss-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-toggle i { color: var(--ink-muted); font-size: 0.8rem; flex: none; }

/* Vast ten opzichte van het venster en aan <body> gehangen, want elke
   voorouder met overflow:hidden zou hem bijsnijden. De kaart eromheen
   heeft dat, voor de afgeronde hoeken. Plaats en breedte komen uit JS. */
.ss-pop {
  position: fixed;
  z-index: 1080;
  min-width: 12rem;
  padding: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
}
.ss-search {
  position: relative;
  margin-bottom: 0.35rem;
}
.ss-search i {
  position: absolute;
  left: 0.55rem; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  font-size: 0.78rem;
  pointer-events: none;
}
.ss-search-input {
  width: 100%;
  padding: 0.35rem 0.6rem 0.35rem 1.8rem;
  background: var(--field-bg);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.8rem;
}
.ss-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* --ss-ruimte is wat er op het scherm past, door JS gezet. Zonder die
   grens loopt een lange lijst onderaan het venster uit beeld. */
.ss-list {
  max-height: var(--ss-ruimte, 15rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ss-opt {
  display: block;
  width: 100%;
  padding: 0.4rem 0.6rem;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}
.ss-opt:hover { background: var(--ghost); }
.ss-opt.ss-sel { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
/* Staat er om te laten zien dát hij bestaat en waarom hij niet kan. */
.ss-opt.ss-uit { color: var(--ink-muted); cursor: default; }
.ss-opt.ss-uit:hover { background: none; }
.ss-empty {
  padding: 0.6rem;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.78rem;
}

/* --- Eigen bevestigingsvenster (vervangt native confirm) ------------------ */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  animation: confirm-fade 0.15s ease;
}
.confirm-overlay[hidden] { display: none; }
@keyframes confirm-fade { from { opacity: 0; } }

.confirm-box {
  width: min(26rem, 100%);
  padding: 1.3rem;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  animation: menu-pop 0.18s var(--ease-out);
}
.confirm-msg {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.55;
  margin-bottom: 1.2rem;
}
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* --- Voortgangsbalk bij het ophalen van leads (per markt) ----------------- */
.imp-bar {
  min-width: 200px;
  text-align: left;
  margin-left: auto;
}
.imp-phase {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: var(--ink-secondary);
  margin-bottom: 4px;
}
.imp-bar .progress-track { height: 7px; }

/* Onbepaald: één bron-fetch is één ondeelbare call, dus dan een lopend balkje */
.progress-track.indeterminate .progress-fill {
  width: 35% !important;
  animation: imp-indeterminate 1.1s ease-in-out infinite;
}
@keyframes imp-indeterminate {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(340%); }
}

/* --- Merge-controle op de bevestigpagina ---------------------------------
   Alles is hier ter plekke te corrigeren: een verkeerd veld vervangen, de
   tekst bijwerken, of één ontvanger uitsluiten. Terug naar het opstelscherm
   kostte je anders je hele selectie. */
.merge-check { display: flex; flex-direction: column; gap: 0.75rem; }

.merge-block {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 0.85rem 1rem;
}
.merge-block-fout {
  border-color: color-mix(in srgb, var(--bad) 45%, transparent);
  background: color-mix(in srgb, var(--bad) 7%, transparent);
}
.merge-block-let-op {
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
  background: color-mix(in srgb, var(--warn) 7%, transparent);
}
.merge-block-kop {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
}
.merge-block-fout .merge-block-kop { color: var(--bad); }
.merge-block-let-op .merge-block-kop { color: var(--warn); }
.merge-block-tekst {
  margin: 0.4rem 0 0;
  font-size: 0.84rem;
  color: var(--ink-secondary);
}

/* "Bedoelde je …?" met de knop ernaast */
.merge-fix {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.84rem;
}

.merge-veld { margin-top: 0.7rem; }
.merge-veld-kop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.84rem;
}
.merge-veld-kop > .cell-mono { font-size: 0.76rem; }

/* Lijst met de ontvangers die dit veld missen */
.merge-leadlijst {
  margin-top: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
  max-height: 15rem;
  overflow-y: auto;
}
.merge-lead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.82rem;
  cursor: pointer;
}
.merge-lead span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.merge-bewerk > summary {
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-secondary);
}
.merge-bewerk > summary:hover { color: var(--accent); }

/* Klikbare veldnamen die op de cursorpositie invoegen */
.merge-velden {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  font-size: 0.74rem;
}
.merge-veld-chip {
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: transparent;
  padding: 0.12rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-secondary);
  cursor: pointer;
}
.merge-veld-chip:hover { border-color: var(--accent); color: var(--accent); }

/* --- Analysecijfer -------------------------------------------------------
   Het cijfer telt op wat er te verbeteren valt, dus hoog is goed nieuws.
   De kleuren lopen mee met die richting: het warmste is de beste lead,
   niet de ergste fout. */
.score-pil {
  display: inline-block;
  min-width: 2.4rem;
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
}
.score-pil:hover { text-decoration: none; filter: brightness(1.12); }
.score-hoog   { color: #fff;     background: var(--accent); }
.score-midden { color: var(--accent); border-color: var(--accent); }
.score-laag   { color: var(--muted); border-color: var(--hairline); }


/* --- Afdrukken -----------------------------------------------------------
   Een rapport gaat op papier of als PDF naar de klant. De zijbalk, de
   knoppen en het bewerkvak horen daar niet op. */
@media print {
  .no-print, .sidebar, .messages { display: none !important; }
  body { background: #fff; }
  .card { border: 0; box-shadow: none; }
  main, .content { margin: 0 !important; padding: 0 !important; }
}

/* --- Filterbalk ----------------------------------------------------------
   De uitklapbare filters stonden als negen losse velden op een rij: je moest
   alles lezen om te vinden wat je zocht. Nu drie groepen met een kop, van
   elkaar gescheiden door een hairline. */
.filter-groep {
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--hairline);
}
.filter-groep-laatste {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.filter-groep-kop {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

/* Uitlegteken achter een label dat niet vanzelfsprekend is */
.filter-hint {
  color: var(--muted);
  font-size: 0.82em;
  cursor: help;
  margin-left: 0.15rem;
}
.filter-hint:hover { color: var(--accent); }

/* Groepskoppen in een keuzelijst: de browser maakt ze cursief en grijs,
   dat leest als uitgeschakeld in plaats van als kop. */
.form-select optgroup {
  font-style: normal;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface, #fff);
}
.form-select optgroup option {
  font-weight: 400;
  color: var(--ink);
}

/* Groepskop in de eigen keuzelijst. Geen knop maar een kopje: het scheidt
   twee soorten keuzes die anders als gelijkwaardig lezen. */
.ss-groep {
  padding: 0.5rem 0.7rem 0.25rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ss-groep + .ss-opt { border-top: 0; }
.ss-groep:not(:first-child) {
  margin-top: 0.25rem;
  border-top: 1px solid var(--hairline);
}

/* --- Inklapbare kaart ------------------------------------------------------
   Een <details> die eruitziet als een gewone kaart. De kop is de summary,
   met een pijltje dat meedraait. Nodig op pagina's met meerdere blokken
   onder elkaar: anders scroll je langs vier open formulieren om bij het
   vijfde te komen. */
.kaart-klap > summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2.2rem;
}
.kaart-klap > summary::-webkit-details-marker { display: none; }
.kaart-klap > summary::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.15s;
}
.kaart-klap[open] > summary::after { transform: translateY(-20%) rotate(-135deg); }
.kaart-klap > summary:hover::after { border-color: var(--ink); }

/* --- Uitschuifvenster (rapport naast de belijst) ---------------------------
   Aan de telefoon wil je het rapport erbij kunnen halen zonder je plek in
   de lijst kwijt te raken. Een gewone link brengt je naar een andere
   pagina en weer terug; dit schuift ernaast open. */
.lade {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(46rem, 92vw);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--edge);
  box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35);
}
.lade[hidden] { display: none; }
.lade-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--hairline);
}
.lade-titel {
  font-family: var(--font-display, inherit);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
}
.lade iframe {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: var(--plane);
}
.lade-schaduw {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(4, 6, 11, 0.55);
}
.lade-schaduw[hidden] { display: none; }

/* --- Uitkomst van een telefoontje -----------------------------------------
   Drie knoppen met de kleur van wat ze betekenen: je kiest er een terwijl
   je nog aan de lijn bent, en dan wil je niet hoeven lezen. */
.btn-uitkomst { border: 1px solid transparent; font-weight: 500; }
.uitkomst-gesproken {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
.uitkomst-gesproken:hover { background: var(--accent); color: #fff; }
.uitkomst-stil {
  background: var(--ghost); border-color: var(--edge); color: var(--ink-secondary);
}
.uitkomst-stil:hover { border-color: var(--ink-muted); color: var(--ink); }
.uitkomst-nee {
  background: none; border-color: var(--edge); color: var(--ink-muted);
}
.uitkomst-nee:hover { border-color: var(--ink-muted); color: var(--ink-secondary); }

/* --- Belijst: tabs, notities en terugbellers -----------------------------
   Wie niet opnam is niet afgehandeld en blijft dus gewoon in de lijst
   staan. Hij moet wel opvallen, maar niet schreeuwen: een streep in de
   kantlijn en een regeltje in de kantlijnletter zijn genoeg. Een gevulde
   balk over de hele rij maakt van een herinnering een alarm, en na tien
   van die rijen kijk je er doorheen.

   Een eigen kleur, want het rood van de huisstijl betekent hier "doe
   iets" en dit is iets wat je later doet. */
:root {
  --terug: #b45309;
  --terug-zacht: rgba(217, 119, 6, 0.05);
}
[data-bs-theme="dark"] {
  --terug: #e3973a;
  --terug-zacht: rgba(227, 151, 58, 0.05);
}

.table tbody tr.row-terugbellen > td {
  background: var(--terug-zacht);
  box-shadow: inset 2px 0 0 var(--terug);
}
.table tbody tr.row-terugbellen > td:not(:first-child) { box-shadow: none; }
/* Aangevinkt wint van het merkteken: wat je nú geselecteerd hebt moet je
   kunnen zien, ook op een regel die al een kleur had. */
.table tbody tr.row-terugbellen.row-selected > td { background: var(--accent-soft); }

/* Het merkteken is tegelijk de knop die het weghaalt: je klikte ernaast,
   of je sprak ze alsnog. Het staat naast de naam omdat het daarbij hoort
   en niet bij de knoppenrij, die over het volgende telefoontje gaat. */
.merk-terug {
  /* Op een eigen regel onder de naam en niet erachter: achter een korte
     naam past het wel en achter een lange niet, en dan is de ene regel
     twee keer zo hoog als de andere zonder dat daar iets mee bedoeld is. */
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: fit-content;
  margin: 0.1rem 0 0.05rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  color: var(--terug);
  white-space: nowrap;
}
.merk-terug .merk-af {
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.12s;
}
.merk-terug .merk-af:hover,
.merk-terug .merk-af:focus-visible { opacity: 1; }

/* --- Tabs boven de lijst -------------------------------------------------
   Doorsnedes van dezelfde lijst, dus geen knoppen maar tabs: een streep
   onder waar je staat, en verder de letter die in dit portaal alle
   kolomkoppen en kaartkoppen al hebben. */
.beltabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.beltab {
  padding: 0.85rem 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s;
}
.beltab:hover { color: var(--ink); }
.beltab-aan,
.beltab-aan:hover { color: var(--ink); border-bottom-color: var(--accent); }
.beltab-n {
  margin-left: 0.2rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}
.beltab-aan .beltab-n { opacity: 1; color: var(--accent); }
.beltab-stil:not(.beltab-aan),
.beltab-stil:not(.beltab-aan):hover { color: var(--terug); }

/* Een opmerking over de lijst is geen kaart: het is een voetnoot die
   toevallig bovenaan staat. */
.lijst-noot {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0 0 1rem;
  padding: 0 0.15rem;
  color: var(--ink-muted);
  font-size: 0.8rem;
}

/* Stond in zes sjablonen maar nergens in de stijl: "Verstuurd", "Aan" —
   een bevestiging hoort er niet uit te zien als losse tekst. */
.badge-ok {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1px solid rgba(22, 163, 74, 0.35);
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.1);
  color: var(--good);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Het volgnummer: de hoeveelste dit bedrijf op je lijst kwam. Smal en
   stil, want het is een houvast en geen gegeven om op te sturen. */
.table > :not(caption) > * > .belvink,
.table > :not(caption) > * > .belnr { padding-right: 0.35rem; }
.belvink { width: 1%; }
.belnr {
  width: 1%;
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  opacity: 0.7;
}