/* ==========================================================================
   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); }

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;
  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;
  grid-template-columns: 130px 1fr 52px;
  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;
}

.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;
  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; }

.ss-pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  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-list { max-height: 15rem; overflow-y: auto; }
.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; }
.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); }