/*
 * Funnel4Leads corporate design, applied to the Vuexy theme.
 *
 * Values come from the Funnel4Leads brand book (tokens.json) and are never
 * written into a component directly - components reference the tokens, so
 * a later correction happens in one place. The variable names still say
 * "webe" and "signal" from the first design this sheet carried; what they
 * hold is Funnel4Leads: --webe-signal is Lead-Orange.
 *
 * Loaded after core.css so it can map Bootstrap's own variables onto the
 * brand's, and before brand.css, which styles the public funnel.
 */

:root {
  /* Brand book tokens. Lead-Orange is reserved for the lead: main
     buttons, the active state, the result - never body text on white
     (3.2:1). Text on an orange surface is always anthracite. */
  --webe-signal: #FF5A1F;          /* lead */
  --webe-signal-600: #E64A12;      /* lead, pressed/hovered */
  --webe-anthrazit: #1C1F24;       /* anthrazit, ink on light */
  --webe-tiefblau: #0B0D12;        /* ground, the dark page */
  --webe-weiss: #F4F5F7;           /* hellgrau, ink on dark */
  --webe-grau-500: #5E646C;        /* ink-muted on light */
  --webe-grau-200: #D5D8DC;        /* line on light */
  --webe-grau-050: #F4F5F7;        /* surface on light */

  --webe-ok: #0E7C4A;
  --webe-warn: #A9610A;
  --webe-err: #B3261E;
  --webe-info: #24509E;

  --webe-font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* One family for everything; code and keys alone get the system's
     monospace, where columns have to line up character by character. */
  --webe-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --webe-radius: 10px;             /* radius-sm: controls */
  --webe-radius-card: 20px;        /* radius-lg: cards */
  --webe-control-height: 2.5rem;
  --webe-space: 8px;
}

/* Light: anthracite on white and hellgrau, orange only where it marks the
   lead or the one main action. */
:root,
[data-bs-theme="light"] {
  /* Tinted ground behind a selected or active element, and the shade
     that carries text where the brand colour would be too light. */
  --webe-signal-050: #FFF1EA;      /* lead-soft */
  --webe-signal-800: #1C1F24;
  --bs-primary: var(--webe-signal);
  --bs-primary-rgb: 255, 90, 31;
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: var(--webe-anthrazit);
  --bs-body-color-rgb: 28, 31, 36;
  --bs-secondary-color: var(--webe-grau-500);
  --bs-border-color: var(--webe-grau-200);
  --bs-heading-color: var(--webe-anthrazit);

  --bs-success: var(--webe-ok);
  --bs-warning: var(--webe-warn);
  --bs-danger: var(--webe-err);
  --bs-info: var(--webe-info);
  /* The -rgb pairs are what .bg-*, .text-* and .bg-label-* actually read;
     setting only the colour leaves every surface on Vuexy's own palette. */
  --bs-success-rgb: 14, 124, 74;
  --bs-warning-rgb: 169, 97, 10;
  --bs-danger-rgb: 179, 38, 30;
  --bs-info-rgb: 36, 80, 158;

  /* Orange as text on white reaches only 3.2:1, so links stay anthracite
     and show the brand colour in their underline instead. */
  --bs-link-color: var(--webe-signal-800);
  --bs-link-hover-color: var(--webe-signal-800);
  --bs-link-color-rgb: 28, 31, 36;

  --bs-card-bg: #ffffff;
  --bs-tertiary-bg: var(--webe-grau-050);
  --webe-card-border: #E3E5E8;
  --webe-card-shadow: 0 1px 2px rgba(28, 31, 36, .04), 0 2px 8px rgba(28, 31, 36, .04);
  --webe-control-border: var(--webe-grau-200);
}

/* Dark, the brand's primary ground: the space black page, anthracite
   cards, hellgrau ink - and orange may carry text here. */
[data-bs-theme="dark"] {
  --webe-signal-050: #3A1D12;      /* lead-soft */
  --webe-signal-800: var(--webe-weiss);
  --bs-primary: var(--webe-signal);
  --bs-primary-rgb: 255, 90, 31;
  --bs-body-bg: var(--webe-tiefblau);
  --bs-body-bg-rgb: 11, 13, 18;
  --bs-body-color: var(--webe-weiss);
  --bs-body-color-rgb: 244, 245, 247;
  --bs-secondary-color: #9AA0A8;
  --bs-border-color: #2E3239;
  --bs-heading-color: var(--webe-weiss);

  --bs-success: #35A46F;
  --bs-warning: #D08B2A;
  --bs-danger: #E05B52;
  --bs-info: #5B83D6;
  --bs-success-rgb: 53, 164, 111;
  --bs-warning-rgb: 208, 139, 42;
  --bs-danger-rgb: 224, 91, 82;
  --bs-info-rgb: 91, 131, 214;

  /* On the dark ground orange reaches 6.4:1 and may carry text. */
  --bs-link-color: var(--webe-signal);
  --bs-link-hover-color: var(--webe-signal);
  --bs-link-color-rgb: 255, 90, 31;

  --bs-card-bg: var(--webe-anthrazit);
  --bs-tertiary-bg: #24282F;       /* surface-raised */
  --webe-card-border: #2E3239;     /* line */
  --webe-card-shadow: none;
  --webe-control-border: #3A3F47;
}

/* Space Grotesk throughout; headlines bold and set tight, as in the
   brand book. */
body,
.menu,
.btn,
.form-control,
.form-select,
.dropdown-menu {
  font-family: var(--webe-font);
}

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  font-weight: 700;
  letter-spacing: -.02em;
}

/* Figures that are compared line by line - counts, times, amounts. */
.table,
.webe-leads__meta,
.badge {
  font-variant-numeric: tabular-nums;
}

code,
kbd,
pre,
samp,
.font-mono,
.funnel-node__step {
  font-family: var(--webe-mono);
}

/* Soft, calm surfaces as in the webe dashboard (app.webe.de): cards with
   a 12px radius, a light hairline and barely any shadow; controls with
   8px. Status chips and avatars stay fully round. */
.btn,
.form-control,
.form-select,
.dropdown-menu,
.alert,
.list-group,
.modal-content,
.nav-pills .nav-link,
.input-group,
.table-responsive {
  border-radius: var(--webe-radius) !important;
}

.card {
  border: 1px solid var(--webe-card-border) !important;
  border-radius: var(--webe-radius-card) !important;
  box-shadow: var(--webe-card-shadow) !important;
}

/* A card inside a card (stat tiles, lists) is a quiet panel, not a
   second floating sheet. */
.card .card {
  box-shadow: none !important;
}

.card > .card-header {
  padding: 1.5rem 1.5rem .75rem;
  background: transparent;
  border-bottom: 0;
}

.card > .card-header h6,
.card > .card-header .card-title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}

.card > .card-body {
  padding: 1.5rem;
}

.card > .card-header + .card-body,
.card > .card-header + form > .card-body {
  padding-top: .75rem;
}

/* Vuexy drops the footer's top padding after a card body; the buttons
   then sit right on the hairline. */
.card > .card-footer,
.card > form > .card-footer,
.card .card-body + .card-footer,
.card .card-header + .card-footer {
  padding: 1rem 1.5rem;
  background: transparent;
  border-top: 1px solid var(--webe-card-border);
  border-radius: 0 0 var(--webe-radius-card) var(--webe-radius-card) !important;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .btn,
.input-group > .input-group-text {
  border-radius: 0 !important;
}

.input-group > :first-child {
  border-top-left-radius: var(--webe-radius) !important;
  border-bottom-left-radius: var(--webe-radius) !important;
}

.input-group > :last-child {
  border-top-right-radius: var(--webe-radius) !important;
  border-bottom-right-radius: var(--webe-radius) !important;
}

.badge,
.avatar,
.avatar-initial,
.rounded-pill,
.rounded-circle {
  /* Chips and avatars keep their shape - CD 6.3, "Ausnahme". */
  border-radius: 50rem !important;
}

.avatar-initial {
  font-family: var(--webe-font);
}

/*
 * 7.2 Buttons. Three kinds, no more: green surface with anthracite text,
 * an outlined one, and a plain text button. One height for every button
 * and field, so a row of settings lines up.
 */
.btn,
.btn-sm,
.btn-lg {
  --bs-btn-border-radius: var(--webe-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-height: var(--webe-control-height);
  padding: .5rem 1.125rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.2;
}

.form-control,
.form-select {
  min-height: var(--webe-control-height);
  border-color: var(--webe-control-border);
}

textarea.form-control {
  min-height: calc(var(--webe-control-height) * 2);
}

/* Inside a table row a button may be smaller - the row sets the rhythm there. */
.table .btn-sm {
  min-height: 2rem;
  padding: .25rem .75rem;
  font-size: .8125rem;
}

/* Icon-only buttons are square and centre their icon; the padding above
   would leave the icon no room at all - it shrank to 0px and edit, copy
   and delete buttons turned invisible. */
.btn-icon,
.btn-icon.btn-sm,
.btn-icon.btn-lg {
  padding: 0;
  min-height: 0;
}

.btn-primary {
  --bs-btn-bg: var(--webe-signal);
  --bs-btn-border-color: var(--webe-signal);
  --bs-btn-color: var(--webe-anthrazit);
  --bs-btn-hover-bg: var(--webe-signal-600);
  --bs-btn-hover-border-color: var(--webe-signal-600);
  --bs-btn-hover-color: var(--webe-anthrazit);
  --bs-btn-active-bg: var(--webe-signal-600);
  --bs-btn-active-color: var(--webe-anthrazit);
  --bs-btn-disabled-bg: var(--webe-grau-200);
  --bs-btn-disabled-border-color: var(--webe-grau-200);
  --bs-btn-disabled-color: var(--webe-grau-500);
}

.btn-outline-secondary,
.btn-outline-primary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--bs-card-bg);
  --bs-btn-border-color: var(--webe-control-border);
  --bs-btn-hover-bg: var(--bs-tertiary-bg);
  --bs-btn-hover-border-color: var(--webe-control-border);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--bs-tertiary-bg);
  --bs-btn-active-border-color: var(--bs-body-color);
  --bs-btn-active-color: var(--bs-body-color);
  border-width: 1px;
}

.btn-outline-danger {
  border-width: 1px;
}

/* 7.3 Focus is a two-pixel green frame. */
.form-control:focus,
.form-select:focus,
.btn:focus-visible,
.menu-link:focus-visible {
  border-color: var(--webe-signal);
  box-shadow: 0 0 0 2px var(--webe-signal);
  outline: none;
}

/*
 * The menu. An active entry is a green surface with anthracite on it -
 * never green lettering on white, which is the one combination the
 * manual rules out for text (CD 4.9).
 */
.menu-horizontal .menu-inner > .menu-item > .menu-link,
.menu-vertical .menu-inner > .menu-item > .menu-link {
  border-radius: var(--webe-radius);
  font-weight: 500;
}

.menu-horizontal .menu-inner > .menu-item.active > .menu-link,
.menu-vertical .menu-inner > .menu-item.active > .menu-link {
  background: var(--webe-signal);
  color: var(--webe-anthrazit);
  box-shadow: none;
}

.menu-horizontal .menu-inner > .menu-item.active > .menu-link .menu-icon,
.menu-horizontal .menu-inner > .menu-item.active > .menu-link i {
  color: var(--webe-anthrazit);
}

.menu-sub .menu-item.active > .menu-link {
  background: var(--webe-signal-050);
  color: var(--webe-anthrazit);
}

[data-bs-theme="dark"] .menu-sub .menu-item.active > .menu-link {
  background: rgba(255, 90, 31, .16);
  color: var(--webe-weiss);
}

/* 6.2 The signal bar returns as a section marker: a short green rule
   under a heading, always square, never rounded. */
.webe-rule::after {
  content: '';
  display: block;
  width: 44px;
  height: 4px;
  margin-top: 12px;
  background: var(--webe-signal);
}

/* 7.6 Movement shows relationships; 150 to 250 ms, and the system
   setting for reduced motion always wins. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* The logo switches with the ground it sits on: anthracite on light,
   hellgrau on dark (the primary version). Same logo, not a second one. */
.webe-logo {
  height: 32px;
  width: auto;
  max-width: none;
}

.navbar-brand.app-brand {
  height: auto;
  padding-block: 10px;
}

/* The bar grows with the logo instead of cropping it. */
#layout-navbar.layout-navbar {
  min-height: calc(32px + 32px);
  height: auto;
}

.webe-logo.app-brand-logo-img {
  padding-top: 0;
}

.webe-logo--dark {
  display: none;
}

[data-bs-theme="dark"] .webe-logo--light {
  display: none;
}

[data-bs-theme="dark"] .webe-logo--dark {
  display: inline-block;
}

/*
 * Links. Vuexy colours the footer's links from a variable of its own; on
 * white they are anthracite (orange text would be 3.2:1), on dark orange.
 * The underline carries the brand colour on light ground.
 */
.footer-link,
a:not(.btn):not(.menu-link):not(.dropdown-item):not(.nav-link):not(.list-group-item):not(.page-link) {
  color: var(--bs-link-color);
}

.footer-link:hover,
a:not(.btn):not(.menu-link):not(.dropdown-item):not(.nav-link):not(.list-group-item):not(.page-link):hover {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
  text-decoration-color: var(--webe-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Vuexy capitalises every word of a pill ("Bestätigung An Den
   Interessenten"). German capitalises nouns, not words, and the manual
   rules out decorative capitals outside labels (CD 5.6). */
.nav-pills .nav-link,
.nav-tabs .nav-link {
  text-transform: none;
}

/*
 * Sticky header: logo, search and menu stay in reach on long pages - the
 * leads list and the structure canvas both scroll a long way.
 */
.webe-sticky-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--bs-body-bg);
}

/* A hairline shows where the header ends once content scrolls under it. */
.webe-sticky-header #layout-menu {
  box-shadow: 0 1px 0 var(--bs-border-color);
}

/*
 * The page ground sits a shade off white so cards lift off it - white on
 * white only ever separated through their borders. The manual keeps
 * 050 and 100 for exactly such surfaces behind content (CD 4.4).
 */
:root,
[data-bs-theme="light"] {
  --webe-page-bg: var(--webe-grau-050);
}

[data-bs-theme="dark"] {
  --webe-page-bg: var(--webe-tiefblau);
}

body,
.layout-page,
.content-wrapper {
  background-color: var(--webe-page-bg);
}

/* Header, menu and cards stay on the full surface colour above the page. */
.webe-sticky-header,
.webe-sticky-header #layout-navbar,
.webe-sticky-header #layout-menu {
  background-color: var(--bs-card-bg);
}

/*
 * Funnel e-mail settings.
 *
 * Vuexy draws a bordered, shadowed box around any tab content that follows
 * pills - a second card inside the card. Here the tabs underline instead
 * and the content sits directly in the card.
 */
.webe-mails__tabs {
  gap: 24px;
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 24px;
}

.webe-mails__tabs .nav-link {
  display: inline-flex;
  align-items: center;
  padding: 12px 0;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  background: none;
  color: var(--bs-secondary-color);
  font-weight: 500;
}

.webe-mails__tabs .nav-link:hover {
  color: var(--bs-body-color);
}

/* The active tab is marked by the green bar, the text stays anthracite -
   green lettering on white is ruled out (CD 4.9). */
.webe-mails__tabs .nav-link.active {
  color: var(--bs-body-color);
  border-bottom-color: var(--webe-signal);
  background: none;
  box-shadow: none;
}

.webe-mails__state {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 50rem;
  font-size: 11px;
  font-weight: 600;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
}

.webe-mails__state.is-on {
  background: var(--webe-signal-050);
  color: var(--webe-signal-800);
}

[data-bs-theme="dark"] .webe-mails__state.is-on {
  background: rgba(255, 90, 31, .14);
  color: var(--webe-signal);
}

.webe-mails__content.tab-content {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
}

.webe-mails__intro {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bs-border-color);
}

/* 5.4 "Label": small, semibold, spaced capitals - the one place the
   manual allows capitals. */
.webe-mails__group {
  margin: 24px 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.webe-mails__fields {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  transition: opacity .18s ease;
}

.webe-mails__fields:disabled {
  opacity: .45;
}

.webe-mails__placeholders {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.webe-mails__chip {
  padding: 2px 8px;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--webe-radius);
  background: var(--bs-card-bg);
  color: var(--bs-body-color);
  font-family: var(--webe-mono);
  font-size: 12px;
  cursor: pointer;
}

.webe-mails__chip:hover {
  border-color: var(--webe-signal);
  background: var(--webe-signal-050);
}

[data-bs-theme="dark"] .webe-mails__chip:hover {
  background: rgba(255, 90, 31, .14);
}

.webe-mails__footer {
  border-top: 1px solid var(--webe-card-border);
  background: transparent;
}

.webe-mails__test {
  border-top: 1px solid var(--bs-border-color);
}

/* 5.4 "Label": small, semibold, spaced capitals. */
.webe-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

/*
 * The leads list: one line per lead, read left to right the way it is
 * acted on - who and when, how to reach them, what about, done or not.
 */
.webe-leads__row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.4fr) 120px 16px;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
  color: var(--bs-body-color);
}

.webe-leads__row:hover {
  color: var(--bs-body-color);
}

.webe-leads__row.is-unread {
  background: var(--webe-signal-050);
}

[data-bs-theme="dark"] .webe-leads__row.is-unread {
  background: rgba(255, 90, 31, .07);
}

.webe-leads__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.webe-leads__line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.webe-leads__line .icon-base {
  flex: none;
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: var(--bs-secondary-color);
}

.webe-leads__name {
  font-size: 15px;
  font-weight: 600;
}

.webe-leads__meta {
  font-size: 13px;
  color: var(--bs-secondary-color);
}

.webe-leads__status {
  justify-self: end;
}

.webe-leads__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.webe-leads__badge .icon-base {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

.webe-leads__badge.is-unread {
  font-weight: 600;
  color: var(--bs-body-color);
}

.webe-leads__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--webe-signal);
  box-shadow: 0 0 0 2px var(--webe-signal-800);
}

@media (max-width: 991.98px) {
  .webe-leads__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
  }

  .webe-leads__cell {
    grid-column: 1;
  }

  .webe-leads__status {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .webe-leads__go {
    display: none;
  }
}

/* Answers on the lead page: question small above, answer below. */
.webe-answers dt {
  font-size: 13px;
  font-weight: 400;
  color: var(--bs-secondary-color);
}

.webe-answers dd {
  margin: 0 0 16px;
  font-weight: 600;
}

.webe-answers dd:last-child {
  margin-bottom: 0;
}

.webe-facts dt {
  font-size: 12px;
  font-weight: 400;
  color: var(--bs-secondary-color);
}

.webe-facts dd {
  margin: 0 0 12px;
  font-size: 14px;
}

/* The visit as a timeline: one step per line, its time on the right. */
.webe-journey {
  list-style: none;
  margin: 0;
  padding: 0;
}

.webe-journey li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 16px 24px;
  font-size: 14px;
}

.webe-journey li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--bs-border-color);
  background: var(--bs-card-bg);
}

.webe-journey li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 17px;
  bottom: 0;
  width: 1px;
  background: var(--bs-border-color);
}

.webe-journey li.is-done::before {
  border-color: var(--webe-signal);
  background: var(--webe-signal);
}

.webe-journey li.is-dropoff::before {
  border-color: var(--webe-err);
}

.webe-journey li.is-dropoff .webe-journey__time {
  color: var(--webe-err);
}

.webe-journey__time {
  flex: none;
  color: var(--bs-secondary-color);
  font-family: var(--webe-mono);
  font-size: 12px;
}

.webe-journey__title {
  flex: 1;
  min-width: 0;
}

.webe-facts dd {
  overflow-wrap: anywhere;
}

/* Conversion rows: one conversion per block, separated by a rule. */
.webe-conversions__row {
  padding: 16px 0;
  border-bottom: 1px solid var(--bs-border-color);
}

.webe-conversions__row:first-child {
  padding-top: 0;
}

.webe-conversions__id {
  font-family: var(--webe-mono);
}

.webe-conversions__remove {
  flex: none;
}

.webe-conversions__remove .icon-base {
  flex: none;
}

.webe-webhook__preview {
  max-height: 480px;
  overflow: auto;
  padding: 16px;
  border-radius: var(--webe-radius);
  background: var(--bs-tertiary-bg);
  font-family: var(--webe-mono);
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Portal overview: key figures, then what is waiting. */
.webe-kpi .card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.webe-kpi__icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
  margin-bottom: 8px;
  color: var(--bs-secondary-color);
}

.webe-kpi__value {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bs-heading-color);
}

.webe-kpi__label {
  font-size: 13px;
  color: var(--bs-secondary-color);
}

.webe-kpi.is-highlight {
  box-shadow: inset 0 3px 0 var(--webe-signal);
}

.webe-kpi.is-highlight .webe-kpi__icon {
  color: var(--webe-signal-800);
}

[data-bs-theme="dark"] .webe-kpi.is-highlight .webe-kpi__icon {
  color: var(--webe-signal);
}

.webe-overview-lead {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  color: var(--bs-body-color);
}

.webe-overview-lead__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.webe-overview-lead__main .webe-leads__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.webe-overview-funnel {
  display: block;
  padding: 16px 24px;
  color: var(--bs-body-color);
}

.webe-overview-funnel__numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 13px;
  color: var(--bs-secondary-color);
}

.webe-overview-funnel__numbers strong {
  color: var(--bs-body-color);
  font-weight: 600;
}

.webe-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--webe-radius);
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
}

.webe-empty .icon-base {
  flex: none;
  color: var(--webe-signal-800);
}

/*
 * Acting as a customer: impossible to miss, and in a colour the customer's
 * own view never uses, so a screenshot shows at once which one it was.
 */
/* Pinned to the bottom: at the top it would sit under the navbar, which
   is fixed rather than sticky below the xl breakpoint. */
.webe-impersonation {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1090;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--webe-anthrazit);
  color: #fff;
  font-size: 13px;
  box-shadow: inset 0 3px 0 var(--webe-signal);
}

body:has(.webe-impersonation) {
  padding-bottom: 72px;
}

.webe-impersonation strong {
  color: var(--webe-signal);
}

.webe-impersonation__hint {
  color: rgba(255, 255, 255, .7);
}

.webe-impersonation__button {
  background: var(--webe-signal);
  border-color: var(--webe-signal);
  color: var(--webe-anthrazit);
  font-weight: 600;
}

.webe-impersonation__button:hover {
  background: var(--webe-signal-600);
  border-color: var(--webe-signal-600);
  color: var(--webe-anthrazit);
}

/* A row of filters above a card's content: one line, one height, set on a
   quiet panel so it reads as the card's controls rather than floating. */
.webe-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 12px;
  border-radius: var(--webe-radius);
  background: var(--bs-tertiary-bg);
}

.webe-toolbar__range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.webe-toolbar__range .form-control {
  width: auto;
  background-color: var(--bs-card-bg);
}

.webe-toolbar__text {
  font-size: .875rem;
  color: var(--bs-secondary-color);
}

/* A colour swatch next to its hex field: a small square, not a bar
   stretched across half the group. */
.input-group > .form-control-color {
  flex: 0 0 var(--webe-control-height);
  width: var(--webe-control-height);
  min-width: var(--webe-control-height);
  padding: .3rem;
}