/* * Cuber Digital CRM brand overrides. * Loaded after vendor/tabler/css/tabler.min.css. Overrides Tabler's compiled * CSS custom properties only — no SCSS recompile, per CLAUDE.md Phase 0. * Dark mode is locked at the layout level (data-bs-theme="dark" on , * no toggle rendered), so every override lives under that theme scope. * * Contrast verified WCAG AA (all pairs 6.8:1 or higher): * body text #E4E4E4 on bg #0E0E0E 15.18:1 * body text #E4E4E4 on card #1A1A1A 13.69:1 * muted text #9CA3AF on bg #0E0E0E 7.60:1 * muted text #9CA3AF on card #1A1A1A 6.86:1 * headings #FFFFFF on bg #0E0E0E 19.30:1 * button text #0E0E0E on accent #B4E62E 13.14:1 */ [data-bs-theme="dark"] { /* accent lime — CTAs, links, active states, highlights */ --tblr-primary: #b4e62e; --tblr-primary-rgb: 180, 230, 46; --tblr-primary-fg: #0e0e0e; /* dark text on lime surfaces (buttons etc.) */ --tblr-link-color: #b4e62e; --tblr-link-color-rgb: 180, 230, 46; --tblr-link-hover-color: #c4f13e; /* base surfaces */ --tblr-body-bg: #0e0e0e; --tblr-body-bg-rgb: 14, 14, 14; --tblr-bg-surface: #1a1a1a; /* cards, navbar */ --tblr-bg-surface-secondary: #161616; --tblr-bg-surface-tertiary: #242424; /* alternate table row */ --tblr-border-color: #2a2a2a; --tblr-border-color-translucent: rgba(255, 255, 255, 0.08); /* * Tabler's compiled dark theme points .form-control/.form-select at * --tblr-bg-forms, a separate variable from --tblr-bg-surface (defaulting to * a blue-gray gray-900, not this palette's charcoal) — every input/select/ * textarea in the app would otherwise render off-brand even with the * surface overrides above in place. */ --tblr-bg-forms: #161616; /* Same leak, different consumer: 
 blocks (generated email body/prompt/
     enrichment JSON dumps) read --tblr-bg-surface-dark, not --tblr-bg-surface. */
  --tblr-bg-surface-dark: #242424;

  /* text */
  --tblr-body-color: #e4e4e4; /* off-white, not pure white — reduces glare on data-dense screens */
  --tblr-body-color-rgb: 228, 228, 228;
  --tblr-heading-color: #ffffff;
  --tblr-secondary-color: #9ca3af; /* muted copy: help text, subheaders, timestamps */
}

/*
 * Loading indicator (CLAUDE.md Phase 9: "loading indicator on every screen/page transition").
 * This is a classic server-rendered multi-page app — no AJAX transitions to hook — so this is
 * a plain top bar that starts animating toward (not reaching) completion the moment a
 * same-page navigation begins (public/js/loading-bar.js), and is cleared for free the instant
 * the next page's fresh document load replaces it. No vendored library needed for this.
 */
#loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--tblr-primary, #b4e62e);
  z-index: 2000;
  opacity: 0;
  transition: width 2s cubic-bezier(0.1, 0.7, 0.1, 0.9), opacity 0.2s;
}

body.is-loading #loading-bar {
  width: 90%;
  opacity: 1;
}

/*
 * Tabler's stock .navbar-nav .nav-link.active rule only swaps text color — no fill — so the
 * active sidebar item barely reads as "active" against the other nav-links' hover states.
 * Faded lime fill makes it obvious at a glance. Applies to both top-level items (Dashboard,
 * Pipeline) and grouped items (e.g. Actor Configs) since they share the same .nav-link class.
 */
.navbar-vertical .nav-link.active {
  background-color: rgba(180, 230, 46, 0.12);
  border-radius: var(--tblr-border-radius);
}

/*
 * Conversation thread bubbles (conversations/show.blade.php). Outbound uses a much fainter
 * lime tint (0.08, vs 0.12 on the active nav item) than a badge/button would — this repeats
 * once per message in a thread, so a strong fill here would violate the "don't use the accent
 * as a repeated row fill" rule; it's just enough to read as directional, not a highlight.
 */
.thread-bubble {
  max-width: 75%;
  display: inline-block;
  border-radius: var(--tblr-border-radius-lg, 0.5rem);
  padding: 0.625rem 0.875rem;
}

.thread-bubble-outbound {
  background-color: rgba(180, 230, 46, 0.08);
}

.thread-bubble-inbound {
  background-color: var(--tblr-bg-surface-tertiary);
}