/* =========================================================================
   Unavoidable CRM - Enterprise Theme v1.0
   Full rebuild matching marketing home (unavoidablecrm.com/).
   Loaded AFTER brand-tokens.css and pc-theme.css; overrides pc-theme entirely.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* -- Force the token palette to Inter typography everywhere --------------- */
html, body, * {
  font-family: var(--font-sans) !important;
}
body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
}

/* =========================================================================
   1. SHELL - app / body / main
   ========================================================================= */
html body .app-shell,
html body #app,
html body .main-wrap,
html body main.page-content,
html body #mainWrap {
  background: var(--bg) !important;
  color: var(--ink) !important;
}
html body main.page-content {
  padding: 32px 48px !important;
  max-width: none !important;
}

/* =========================================================================
   2. SIDEBAR
   ========================================================================= */
html body .sidebar,
html body #sidebar,
html body aside.sidebar,
html body nav.sidebar,
html body [class*="sidebar-nav"] {
  background: var(--surface) !important;
  border-right: 1px solid var(--line) !important;
  padding: 20px 12px !important;
  width: 240px !important;
  color: var(--ink) !important;
}

/* Brand mark at top */
html body .sidebar .brand-mark,
html body .sidebar .logo,
html body .sidebar [class*="brand"] > div:first-child {
  width: 40px !important;
  height: 40px !important;
  background: linear-gradient(135deg, var(--violet), var(--violet-2)) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Nav section labels */
html body .sidebar .nav-section-title,
html body .sidebar .section-title,
html body .sidebar h5,
html body .sidebar h6,
html body .sidebar [class*="section-label"],
html body .sidebar [class*="section-header"] {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  margin: 20px 12px 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Nav items */
html body .sidebar a,
html body .sidebar-nav a,
html body .sidebar .nav-item,
html body .sidebar .nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  margin: 1px 0 !important;
  border-radius: var(--r-md) !important;
  color: var(--ink-2) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background 0.12s ease, color 0.12s ease !important;
  background: transparent !important;
  border: none !important;
  border-left: none !important;
}
html body .sidebar a:hover,
html body .sidebar-nav a:hover,
html body .sidebar .nav-item:hover,
html body .sidebar .nav-link:hover {
  background: var(--bg-2) !important;
  color: var(--ink) !important;
}

/* Nav item icons */
html body .sidebar a svg,
html body .sidebar-nav a svg,
html body .sidebar .nav-item svg,
html body .sidebar .nav-link svg,
html body .sidebar a i,
html body .sidebar-nav a i {
  width: 18px !important;
  height: 18px !important;
  color: var(--ink-3) !important;
  stroke: var(--ink-3) !important;
  flex-shrink: 0 !important;
}
html body .sidebar a:hover svg,
html body .sidebar a:hover i {
  color: var(--ink-2) !important;
  stroke: var(--ink-2) !important;
}

/* Active nav item - lavender pill, violet ink, violet icon */
html body .sidebar a.active,
html body .sidebar-nav a.active,
html body .sidebar a[aria-current="page"],
html body .sidebar-nav a[aria-current="page"],
html body .sidebar .nav-item.active,
html body .sidebar .nav-link.active,
html body [class*="sidebar"] [class*="active"] {
  background: var(--violet-soft) !important;
  color: var(--violet-ink) !important;
  font-weight: 600 !important;
  border-left: none !important;
  position: relative !important;
}
html body .sidebar a.active::before,
html body .sidebar-nav a.active::before,
html body .sidebar .nav-item.active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 3px !important;
  background: var(--violet) !important;
  border-radius: 0 3px 3px 0 !important;
}
html body .sidebar a.active svg,
html body .sidebar-nav a.active svg,
html body .sidebar a.active i,
html body [class*="sidebar"] [class*="active"] svg {
  color: var(--violet) !important;
  stroke: var(--violet) !important;
}

/* Sidebar user card at bottom */
html body .sidebar-user,
html body .sidebar .user-card,
html body .sidebar [class*="user-info"] {
  padding: 12px !important;
  margin-top: auto !important;
  background: var(--bg-2) !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

/* Viewing context chip */
html body [class*="viewing-context"],
html body [class*="context-chip"],
html body .sidebar .context {
  background: var(--violet-soft) !important;
  color: var(--violet-ink) !important;
  border: 1px solid #E4D5FF !important;
  padding: 8px 12px !important;
  border-radius: var(--r-md) !important;
  margin: 0 4px 12px !important;
  font-size: 12px !important;
}

/* =========================================================================
   3. TOP BAR (header inside page-content)
   ========================================================================= */
html body .topbar,
html body .app-header,
html body .page-topbar,
html body .header-bar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 12px 32px !important;
  color: var(--ink) !important;
}

/* Search input in topbar */
html body .topbar input[type="search"],
html body .topbar input[type="text"],
html body .app-header input[type="search"],
html body [class*="search-input"] {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  min-width: 320px !important;
}
html body .topbar input[type="search"]:focus,
html body [class*="search-input"]:focus {
  border-color: var(--violet) !important;
  background: var(--surface) !important;
  box-shadow: 0 0 0 3px var(--violet-soft) !important;
  outline: none !important;
}

/* =========================================================================
   4. PAGE HERO - big heading with optional gradient word
   ========================================================================= */
html body .page-hero,
html body .page-header,
html body [class*="page-hero"] {
  margin: 8px 0 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
html body h1,
html body .page-title,
html body .page-hero h1,
html body [class*="page-hero"] h1 {
  font-family: var(--font-sans) !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  margin: 0 0 6px !important;
  line-height: 1.1 !important;
}
html body h2 {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 8px !important;
}
html body h3 {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 0 6px !important;
}
html body h4 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 0 4px !important;
}
html body .page-subtitle,
html body .page-hero p,
html body [class*="page-hero"] p:not([class]) {
  color: var(--ink-2) !important;
  font-size: 15px !important;
  margin: 0 !important;
  opacity: 1 !important;
}

/* Utility class: violet-to-cyan gradient text (marketing "actually needs" style) */
html body .grad-word,
html body .brand-gradient,
html body [class*="grad-word"] {
  background: linear-gradient(90deg, var(--violet), var(--cyan)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Kicker (small violet eyebrow above headings) */
html body .kicker,
html body [class*="kicker"],
html body [class*="section-tag"],
html body [class*="page-kicker"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  color: var(--violet) !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  margin: 0 0 8px !important;
  background: transparent !important;
}
html body .kicker::before,
html body [class*="kicker"]::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--violet) !important;
  border-radius: 50% !important;
}

/* =========================================================================
   5. KPI CARDS - marketing-mockup style
   ========================================================================= */
html body .kpi-grid,
html body [class*="kpi-row"],
html body [class*="stat-row"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 16px !important;
  margin: 0 0 32px !important;
}

html body .kpi-card,
html body .stat-tile,
html body .metric-card,
html body .dashboard-card,
html body [class*="kpi-card"],
html body [class*="stat-tile"] {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px 22px !important;
  box-shadow: var(--shadow-1) !important;
  color: var(--ink) !important;
  transition: box-shadow 0.15s ease !important;
}
html body .kpi-card:hover,
html body .stat-tile:hover,
html body .metric-card:hover {
  box-shadow: var(--shadow-2) !important;
}

/* KPI label (kicker with violet dot) */
html body .kpi-card .label,
html body .kpi-card .kpi-label,
html body .stat-tile .label,
html body [class*="stat-tile"] > div:first-child,
html body [class*="kpi-card"] > div:first-child:not(.value):not(.number) {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--ink-2) !important;
  margin: 0 0 10px !important;
}
html body .kpi-card .label::before,
html body .kpi-card .kpi-label::before,
html body .stat-tile .label::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--violet) !important;
  border-radius: 50% !important;
}

/* KPI value (big number) */
html body .kpi-card .value,
html body .kpi-card .kpi-value,
html body .stat-tile .value,
html body .metric-card .value,
html body [class*="stat-tile"] .value,
html body [class*="kpi"] .value {
  font-family: var(--font-sans) !important;
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

/* KPI delta (green up-arrow / red down-arrow) */
html body .kpi-card .delta,
html body .stat-tile .delta,
html body [class*="kpi"] .delta,
html body [class*="stat"] .delta,
html body .kpi-delta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
  color: var(--success) !important;
}
html body .kpi-card .delta.negative,
html body .kpi-card .delta.down,
html body [class*="delta-negative"] {
  color: var(--danger) !important;
}
html body .delta::before,
html body [class*="delta"]::before {
  content: "▲" !important;
  font-size: 9px !important;
}
html body .delta.negative::before,
html body .delta.down::before,
html body [class*="delta-negative"]::before {
  content: "▼" !important;
}

/* Kill legacy KPI icon holders that render as empty pale circles */
html body .kpi-card .icon:empty,
html body .stat-tile .icon:empty,
html body .metric-card .icon:empty,
html body [class*="stat-"] [class*="icon"]:empty,
html body [class*="kpi-"] [class*="icon"]:empty {
  display: none !important;
}

/* =========================================================================
   6. CARDS - general purpose surface
   ========================================================================= */
html body .card,
html body .pc-card,
html body .surface-card,
html body [class*="pc-page-content"] > div,
html body .panel {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 24px !important;
  box-shadow: var(--shadow-1) !important;
  color: var(--ink) !important;
  margin-bottom: 20px !important;
}
html body .card-header,
html body .pc-card .card-header,
html body [class*="card-header"] {
  padding: 0 0 16px !important;
  margin: 0 0 16px !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
html body .card-body,
html body .pc-card .card-body {
  padding: 0 !important;
  color: var(--ink) !important;
}
html body .card p,
html body .card small,
html body .card .helper,
html body .card .subtitle {
  color: var(--ink-2) !important;
  opacity: 1 !important;
}

/* =========================================================================
   7. BUTTONS - primary black pill / violet action / secondary outline
   ========================================================================= */
html body button,
html body .btn,
html body a.btn,
html body [class*="btn-"] {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  line-height: 1.4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-decoration: none !important;
}/* UIFIX-STRIPPED-20260915_005053


/* Primary CTA - violet fill (used for +New/+Add throughout app) * /
html body .btn-primary,
html body .btn.primary,
html body button.primary,
html body [class*="btn-primary"],
html body button[type="submit"]:not(.btn-secondary):not(.btn-outline):not(.btn-ghost):not(.btn-danger),
html body a.btn-primary,
html body a.button-primary,
html body input[type="submit"] {
  background: var(--violet) !important;
  color: #fff !important;
  border: 1px solid var(--violet) !important;
}
*/
html body .btn-primary:hover,
html body .btn.primary:hover,
html body button.primary:hover,
html body [class*="btn-primary"]:hover,
html body input[type="submit"]:hover {
  background: var(--violet-2) !important;
  border-color: var(--violet-2) !important;
  box-shadow: var(--shadow-accent) !important;
}
html body .btn-primary *,
html body button.primary * {
  color: #fff !important;
}

/* Marketing-style black pill CTA - opt-in via .btn-cta or .btn-black */
html body .btn-cta,
html body .btn-black,
html body [class*="btn-cta"],
html body [class*="btn-black"] {
  background: var(--ink) !important;
  color: #fff !important;
  border-radius: var(--r-full) !important;
  padding: 12px 20px !important;
  border: 1px solid var(--ink) !important;
  font-weight: 600 !important;
}
html body .btn-cta:hover,
html body .btn-black:hover {
  background: #1F1F23 !important;
}/* UIFIX-STRIPPED-20260915_005053


/* Secondary - white with border * /
html body .btn-secondary,
html body .btn.secondary,
html body button.secondary,
html body [class*="btn-secondary"],
html body a.btn-secondary {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
}
*/
html body .btn-secondary:hover,
html body .btn.secondary:hover {
  background: var(--bg-2) !important;
  border-color: var(--ink-3) !important;
}

/* Ghost / tertiary */
html body .btn-ghost,
html body .btn.ghost,
html body [class*="btn-ghost"],
html body [class*="btn-link"] {
  background: transparent !important;
  color: var(--violet) !important;
  border: none !important;
  padding: 6px 8px !important;
}
html body .btn-ghost:hover,
html body .btn.ghost:hover {
  background: var(--violet-soft) !important;
}

/* Danger */
html body .btn-danger,
html body [class*="btn-danger"] {
  background: var(--danger) !important;
  color: #fff !important;
  border-color: var(--danger) !important;
}

/* Icon-only button */
html body .btn-icon {
  padding: 8px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--r-md) !important;
  color: var(--ink-2) !important;
  background: transparent !important;
  border: 1px solid var(--line) !important;
}

/* =========================================================================
   8. TABS / FILTER PILLS
   ========================================================================= */
html body .tabs,
html body .tab-nav,
html body [class*="tab-list"] {
  display: flex !important;
  gap: 4px !important;
  border-bottom: 1px solid var(--line) !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}
html body .tab,
html body .tab-item,
html body [class*="tab-link"] {
  padding: 10px 16px !important;
  color: var(--ink-2) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  background: transparent !important;
  cursor: pointer !important;
}
html body .tab:hover,
html body .tab-item:hover {
  color: var(--ink) !important;
}
html body .tab.active,
html body .tab-item.active,
html body [class*="tab-link"].active {
  color: var(--violet) !important;
  border-bottom-color: var(--violet) !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* Filter pills (like on Contacts / Invoices - "All / Draft / Sent") */
html body .filter-pill,
html body .pill,
html body [class*="filter-pill"],
html body [class*="chip"] {
  padding: 6px 12px !important;
  border-radius: var(--r-full) !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
}
html body .filter-pill:hover,
html body .pill:hover {
  background: var(--bg-2) !important;
  color: var(--ink) !important;
}
html body .filter-pill.active,
html body .pill.active,
html body [class*="filter-pill"].active,
html body [class*="chip"].active {
  background: var(--violet) !important;
  color: #fff !important;
  border-color: var(--violet) !important;
}

/* =========================================================================
   9. TABLES - lists like Contacts / Companies
   ========================================================================= */
html body table,
html body .data-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--surface) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
}
html body thead th,
html body table th {
  background: var(--bg-2) !important;
  color: var(--ink-2) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 12px 16px !important;
  text-align: left !important;
  border-bottom: 1px solid var(--line) !important;
}
html body tbody td,
html body table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  vertical-align: middle !important;
  background: var(--surface) !important;
}
html body tbody tr:hover td,
html body table tbody tr:hover td {
  background: var(--bg-2) !important;
}
html body tbody tr:last-child td {
  border-bottom: none !important;
}

/* Business name links inside tables */
html body table a,
html body .data-table a {
  color: var(--violet) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
html body table a:hover {
  text-decoration: underline !important;
}

/* =========================================================================
   10. STATUS BADGES (New Lead / Contacted / Cold / Warm / Hot / etc)
   ========================================================================= */
html body .badge,
html body .status-badge,
html body [class*="badge-"],
html body [class*="status-"]:not([class*="status-badge"]) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  border-radius: var(--r-full) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  border: 1px solid transparent !important;
}
html body .badge::before,
html body .status-badge::before,
html body [class*="badge-"]::before {
  content: "" !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: currentColor !important;
}

/* New Lead - violet */
html body .badge.new-lead,
html body .badge.new_lead,
html body [class*="badge-new-lead"],
html body [class*="new-lead"] {
  background: var(--violet-soft) !important;
  color: var(--violet-ink) !important;
  border-color: #E4D5FF !important;
}
/* Contacted - amber */
html body .badge.contacted,
html body [class*="badge-contacted"] {
  background: #FFF7E6 !important;
  color: #B45309 !important;
  border-color: #FDE68A !important;
}
/* Interested / Warm - orange */
html body .badge.interested,
html body .badge.warm,
html body [class*="temp-warm"] {
  background: #FEF3C7 !important;
  color: #92400E !important;
  border-color: #FDE68A !important;
}
/* Proposal - blue */
html body .badge.proposal-sent,
html body .badge.proposal {
  background: var(--info-soft) !important;
  color: var(--info) !important;
  border-color: #BFDBFE !important;
}
/* Follow Up - cyan */
html body .badge.follow-up {
  background: var(--cyan-soft) !important;
  color: var(--cyan) !important;
  border-color: #A5F3FC !important;
}
/* Won / Success - green */
html body .badge.won,
html body .badge.success,
html body .badge.confirmed,
html body .badge.active,
html body .badge.compliant,
html body .badge.enabled,
html body [class*="badge-won"],
html body [class*="badge-success"] {
  background: var(--success-soft) !important;
  color: var(--success) !important;
  border-color: #A7F3D0 !important;
}
/* Lost / Cold - grey */
html body .badge.lost,
html body .badge.cold,
html body [class*="temp-cold"] {
  background: #F1F5F9 !important;
  color: #475569 !important;
  border-color: #E2E8F0 !important;
}
/* Hot - red */
html body .badge.hot,
html body [class*="temp-hot"] {
  background: #FEE2E2 !important;
  color: #B91C1C !important;
  border-color: #FECACA !important;
}

/* Score chip (0-100) */
html body .score,
html body .score-badge,
html body [class*="score-"] {
  background: var(--violet-soft) !important;
  color: var(--violet-ink) !important;
  border: 1px solid #E4D5FF !important;
  padding: 3px 10px !important;
  border-radius: var(--r-full) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* Plan badge (Starter / Pro) */
html body .plan-badge,
html body .plan-pill,
html body [class*="plan-"] {
  background: var(--violet-soft) !important;
  color: var(--violet-ink) !important;
  border: 1px solid #E4D5FF !important;
  padding: 3px 10px !important;
  border-radius: var(--r-full) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* =========================================================================
   11. FORMS - inputs, selects, textareas
   ========================================================================= */
html body input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html body select,
html body textarea {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  width: 100% !important;
  transition: border-color 0.12s, box-shadow 0.12s !important;
  line-height: 1.4 !important;
}
html body input:focus,
html body select:focus,
html body textarea:focus {
  border-color: var(--violet) !important;
  box-shadow: 0 0 0 3px var(--violet-soft) !important;
  outline: none !important;
}
html body label,
html body .form-label,
html body .field-label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink-2) !important;
  margin: 0 0 6px !important;
}

/* =========================================================================
   12. TUTORIAL "How it works" panels
   ========================================================================= */
html body .info-panel,
html body [class*="how-it-works"],
html body [class*="tutorial"],
html body main.page-content > div:first-child:not(.page-header):not(.pc-page):not(.card):not(.kpi-card):not(.stat-tile):not(.pc-page-content):not(.page-hero) {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--violet) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px 24px !important;
  margin: 0 0 24px !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-1) !important;
}
html body .info-panel *,
html body [class*="how-it-works"] *,
html body [class*="tutorial"] * {
  color: var(--ink) !important;
  opacity: 1 !important;
  background-image: none !important;
}
html body .info-panel h3,
html body .info-panel h4,
html body [class*="how-it-works"] h3,
html body [class*="how-it-works"] h4 {
  color: var(--ink) !important;
  margin: 0 0 8px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
html body .info-panel .step-number,
html body [class*="how-it-works"] .step-number,
html body [class*="how-it-works"] [class*="step"] > span:first-child {
  background: var(--violet) !important;
  color: #fff !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

/* Setup guide tips */
html body .sg-tip,
html body .sg-tip * {
  color: #065F46 !important;
  opacity: 1 !important;
}
html body .sg-tip {
  background: var(--success-soft) !important;
  border-left: 3px solid var(--success) !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
}
html body .sg-tip strong {
  color: var(--success) !important;
  font-weight: 700 !important;
}
html body .sg-warn,
html body .sg-warn * {
  color: #78350F !important;
  opacity: 1 !important;
}
html body .sg-warn {
  background: var(--warning-soft) !important;
  border-left: 3px solid var(--warning) !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
}
html body .sg-warn strong {
  color: #B45309 !important;
}
html body .sg-num {
  background: var(--violet) !important;
  color: #fff !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}
html body .sg-step-title {
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}
html body .sg-field-label {
  color: var(--ink-2) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
html body .sg-field-val {
  color: var(--ink) !important;
  background: var(--bg-2) !important;
  padding: 6px 10px !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
}

/* =========================================================================
   13. EMPTY STATES
   ========================================================================= */
html body .empty-state,
html body [class*="empty-state"] {
  background: var(--surface) !important;
  border: 1px dashed var(--line-strong) !important;
  border-radius: var(--r-lg) !important;
  padding: 48px 24px !important;
  text-align: center !important;
  color: var(--ink) !important;
}
html body .empty-state .empty-icon,
html body [class*="empty-state"] [class*="empty-icon"] {
  width: 56px !important;
  height: 56px !important;
  border-radius: var(--r-full) !important;
  background: var(--violet-soft) !important;
  color: var(--violet) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px !important;
  font-size: 24px !important;
}
html body .empty-title,
html body [class*="empty-title"] {
  color: var(--ink) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 0 6px !important;
  opacity: 1 !important;
}
html body .empty-subtitle,
html body .empty-description,
html body [class*="empty-subtitle"] {
  color: var(--ink-2) !important;
  font-size: 14px !important;
  margin: 0 0 20px !important;
  opacity: 1 !important;
}

/* =========================================================================
   14. CHART styling - override Chart.js / Apex canvases via CSS wrappers
   Uses violet stroke + gradient fill. Chart.js instances that read
   CSS variables benefit automatically; canvas-based charts get styled
   via their container.
   ========================================================================= */
html body .chart-container,
html body [class*="chart-container"] {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px !important;
  margin: 0 0 20px !important;
  box-shadow: var(--shadow-1) !important;
}
html body .chart-container canvas {
  max-width: 100% !important;
}
html body .chart-title,
html body [class*="chart-title"] {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  color: var(--ink-2) !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}

/* =========================================================================
   15. EMAIL TEMPLATE CARDS
   ========================================================================= */
html body .ea-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-1) !important;
}
html body .ea-card:hover {
  box-shadow: var(--shadow-2) !important;
}
html body .ea-thumb {
  background: linear-gradient(135deg, var(--violet-ink) 0%, var(--violet) 60%, var(--purple-light) 100%) !important;
  background-image: linear-gradient(135deg, var(--violet-ink) 0%, var(--violet) 60%, var(--purple-light) 100%) !important;
  min-height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .ea-thumb svg,
html body .ea-thumb i {
  color: rgba(255,255,255,0.85) !important;
  width: 32px !important;
  height: 32px !important;
}
html body .ea-card-body {
  padding: 16px !important;
}
html body .ea-card-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 0 4px !important;
}
html body .ea-card-subject {
  font-size: 13px !important;
  color: var(--ink-2) !important;
  margin: 0 0 10px !important;
}

/* =========================================================================
   16. PIPELINE COLUMNS
   ========================================================================= */
html body .pipeline-columns,
html body [class*="pipeline-column"] {
  gap: 12px !important;
}
html body [class*="pipeline-column"] > div,
html body .pipeline-column {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 12px !important;
}
html body .deal-card,
html body [class*="deal-card"],
html body .pipeline-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  padding: 12px !important;
  margin: 0 0 8px !important;
  box-shadow: var(--shadow-1) !important;
  cursor: grab !important;
}
html body .deal-card:hover,
html body .pipeline-card:hover {
  box-shadow: var(--shadow-2) !important;
  border-color: var(--line-strong) !important;
}

/* =========================================================================
   17. MISC POLISH
   ========================================================================= */
/* Kill legacy warm/orange spots on active sidebar section labels */
html body .sidebar [style*="rgba(255,255,255"] {
  color: var(--ink) !important;
}

/* Any inline-styled elements that had a linear-gradient with dark violet -> light lavender surface */
html body [style*="linear-gradient"][style*="rgba(124"],
html body [style*="linear-gradient"][style*="7C3AED"]:not(.ea-thumb):not(.brand-mark) {
  background: var(--violet-soft) !important;
  border-left: 4px solid var(--violet) !important;
  border-radius: var(--r-lg) !important;
}
html body [style*="linear-gradient"] h1,
html body [style*="linear-gradient"] h2,
html body [style*="linear-gradient"] h3,
html body [style*="linear-gradient"] h4,
html body [style*="linear-gradient"] p,
html body [style*="linear-gradient"] div,
html body [style*="linear-gradient"] span:not(.brand-mark),
html body [style*="linear-gradient"] strong {
  color: var(--ink) !important;
  opacity: 1 !important;
}

/* Force any inline white text to ink (leftover from cards that had dark bg) */
html body [style*="color:rgba(255,255,255"],
html body [style*="color: rgba(255,255,255"],
html body [style*="color:#fff"]:not(button):not(.btn-primary):not(.btn-cta):not(.btn-black),
html body [style*="color:white"]:not(button):not(.btn-primary):not(.btn-cta):not(.btn-black) {
  color: var(--ink) !important;
}

/* Preserve white text for our violet/black buttons */
html body .btn-primary,
html body .btn-primary *,
html body .btn-cta,
html body .btn-cta *,
html body .btn-black,
html body .btn-black *,
html body .btn-danger,
html body .btn-danger * {
  color: #fff !important;
}

/* Muted secondary paragraphs */
html body p {
  color: var(--ink) !important;
  opacity: 1 !important;
}
html body small,
html body .helper,
html body .subtle {
  color: var(--ink-2) !important;
  font-size: 13px !important;
}

/* Kill weird warm dot on avatar (was an orange bubble) */
html body .sidebar-user [class*="status-dot"],
html body .avatar [class*="status-dot"],
html body [class*="online-indicator"] {
  background: var(--success) !important;
  border-color: var(--surface) !important;
}

/* Notification bell unread dot */
html body [class*="notif-dot"],
html body .notification .unread,
html body .notification-badge {
  background: var(--danger) !important;
  border: 2px solid var(--surface) !important;
}

/* =========================================================================
   18. VIEWING CONTEXT CHIP (top-left sidebar) - killed the last orange
   ========================================================================= */
html body [class*="viewing-context"] > *,
html body [class*="context-chip"] > * {
  color: var(--violet-ink) !important;
}

/* =========================================================================
   19. FOOTER
   ========================================================================= */
html body footer,
html body .app-footer {
  color: var(--ink-3) !important;
  font-size: 12px !important;
  padding: 20px 32px !important;
  border-top: 1px solid var(--line) !important;
  background: transparent !important;
}
html body footer a,
html body .app-footer a {
  color: var(--ink-2) !important;
  text-decoration: none !important;
}
html body footer a:hover {
  color: var(--violet) !important;
}


/* =========================================================================
   v10 POLISH PASS - final perfection
   ========================================================================= */

/* 1) Pipeline lifecycle .stage.active - was peach cream, force lavender */
html body .stage,
html body [class*="stage-"],
html body .pipeline-lifecycle .stage {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 16px !important;
  transition: all 0.15s ease !important;
}
html body .stage.active,
html body [class*="stage-"].active,
html body .pipeline-lifecycle .stage.active {
  background: var(--violet-soft) !important;
  border-color: #E4D5FF !important;
  color: var(--violet-ink) !important;
}
html body .stage.active .stat-value,
html body .stage.active .value,
html body .stage.active [class*="value"] {
  color: var(--violet-ink) !important;
}

/* 2) Quote template cards - the peach-tinted grid boxes.
   Original inline is background:rgba(139,92,246,.1) + color:#fff.
   We force lavender-soft bg with ink text. */
html body [style*="background:rgba(139,92,246"],
html body [style*="background: rgba(139,92,246"],
html body [style*="background:rgba(139, 92, 246"],
html body [style*="background: rgba(139, 92, 246"] {
  background: var(--violet-soft) !important;
  border: 1px solid #E4D5FF !important;
  color: var(--ink) !important;
}
html body [style*="background:rgba(139,92,246"] *,
html body [style*="background: rgba(139,92,246"] *,
html body [style*="background:rgba(139, 92, 246"] *,
html body [style*="background: rgba(139, 92, 246"] * {
  color: var(--ink) !important;
}
html body [style*="background:rgba(139,92,246"] > div:first-child,
html body [style*="background: rgba(139,92,246"] > div:first-child {
  font-weight: 700 !important;
  color: var(--violet-ink) !important;
}
/* Broader net for any similar "on tint, text is white" inline pattern */
html body [style*="rgba(139,92,246,.1)"] [style*="color:#fff"],
html body [style*="rgba(139,92,246,.1)"] [style*="color: #fff"],
html body [style*="rgba(139,92,246,0.1)"] [style*="color:#fff"] {
  color: var(--ink) !important;
}

/* 3) Empty-state description (.empty-desc) - was white/faded */
html body .empty-desc,
html body [class*="empty-desc"],
html body .empty-state .desc,
html body .empty-state p:not([class]) {
  color: var(--ink-2) !important;
  font-size: 14px !important;
  margin: 0 0 20px !important;
  opacity: 1 !important;
  line-height: 1.5 !important;
}

/* 4) .stat-card decorative bubble (::after) - hide the pastel corner bubble */
html body .stat-card::after,
html body [class*="stat-card"]::after {
  display: none !important;
}
/* Keep the top violet accent bar (::before) - looks nice */
html body .stat-card::before,
html body [class*="stat-card"]::before {
  background: var(--violet) !important;
  height: 2px !important;
  top: 0 !important;
}
/* And ensure .stat-card itself matches our KPI aesthetic */
html body .stat-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px 22px !important;
  box-shadow: var(--shadow-1) !important;
  position: relative !important;
  overflow: hidden !important;
}
html body .stat-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--ink-2) !important;
  margin: 0 0 10px !important;
}
html body .stat-label::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--violet) !important;
  border-radius: 50% !important;
}
html body .stat-value {
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  line-height: 1.1 !important;
}

/* 5) Grid-5 container - Pipeline lifecycle grid on dashboard */
html body .grid-5 {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px !important;
}
@media (max-width: 900px) {
  html body .grid-5 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; }
}

/* 6) Any lingering peach cream backgrounds anywhere - force violet-soft */
html body [style*="rgb(251, 236, 217)"],
html body [style*="rgb(251,236,217)"],
html body [style*="#FBECD9"],
html body [style*="#fbecd9"] {
  background: var(--violet-soft) !important;
  color: var(--violet-ink) !important;
}

/* 7) Any element with hardcoded inline white color that's NOT a button - ink */
html body div[style*="color:#fff"]:not(.btn-primary):not(.btn-cta):not(.btn-black):not(.btn-danger):not([class*="btn-"]),
html body span[style*="color:#fff"]:not([class*="btn-"]):not(.brand-mark):not(.sg-num),
html body p[style*="color:#fff"]:not([class*="btn-"]) {
  color: var(--ink) !important;
}

/* 8) Card containers with "card mb-8" pattern - our card system */
html body .card.mb-8,
html body [class*="mb-8"] {
  margin-bottom: 32px !important;
}

/* 9) Sidebar top row - LIVE pill and brand mark alignment */
html body .sidebar [class*="live"],
html body .sidebar [class*="LIVE"] {
  background: var(--success-soft) !important;
  color: var(--success) !important;
  border: 1px solid #A7F3D0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: var(--r-full) !important;
  letter-spacing: 0.5px !important;
}

/* 10) Sidebar user profile bottom card polish */
html body .sidebar-user,
html body .sidebar [class*="user-card"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
html body .sidebar-user > div {
  min-width: 0 !important;
}
html body .sidebar-user .role,
html body .sidebar-user [class*="role"] {
  font-size: 11px !important;
  color: var(--ink-3) !important;
  letter-spacing: 0.3px !important;
}

/* 11) Report bottom-right widget button - kill orange */
html body .report-btn,
html body [class*="report-btn"],
html body [class*="report-widget"] {
  background: var(--ink) !important;
  color: #fff !important;
  border-radius: var(--r-full) !important;
  border: none !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-2) !important;
}

/* 12) Section kicker "SALES · CRM" pill polish */
html body .kicker-pill,
html body [class*="kicker-pill"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: 1px solid var(--line) !important;
  padding: 4px 10px !important;
  border-radius: var(--r-full) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  color: var(--violet) !important;
  text-transform: uppercase !important;
}

/* 13) "763 TOTAL" mint pill next to kicker - keep tasteful */
html body [class*="total-pill"],
html body [class*="count-pill"] {
  background: var(--success-soft) !important;
  color: var(--success) !important;
  padding: 3px 10px !important;
  border-radius: var(--r-full) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border: 1px solid #A7F3D0 !important;
  letter-spacing: 0.5px !important;
}

/* 14) Top bar left icons (hamburger) and search alignment */
html body .topbar,
html body [class*="topbar"],
html body [class*="app-header"] {
  padding: 12px 32px !important;
  gap: 16px !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* 15) Any pipeline "Warm" (temperature) tag - keep semantic amber */
html body .badge.warm,
html body [class*="temp-warm"] {
  background: #FEF3C7 !important;
  color: #92400E !important;
  border-color: #FDE68A !important;
}

/* 16) Score chip "50" - final push to violet if it's still amber */
html body td .score,
html body .score-badge,
html body [class*="score-"] {
  background: var(--violet-soft) !important;
  color: var(--violet-ink) !important;
  border: 1px solid #E4D5FF !important;
  padding: 3px 10px !important;
  border-radius: var(--r-full) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  min-width: 32px !important;
  text-align: center !important;
  display: inline-block !important;
}
/* Score-high semantic green */
html body .score.high,
html body [class*="score-high"] {
  background: var(--success-soft) !important;
  color: var(--success) !important;
  border-color: #A7F3D0 !important;
}

/* 17) Any lingering warm/orange dot (avatar status, notification-badge, etc.)  */
html body [class*="status-warm"],
html body [class*="warm-dot"] {
  background: var(--violet) !important;
}

/* 18) Quote template cards - specific selector for the outer div grid */
html body [style*="grid-template-columns"][style*="220px"] > div {
  padding: 12px 14px !important;
}

/* 19) "5 awaiting reply" style helper text */
html body [class*="awaiting"],
html body .subtle-text,
html body .card > div > small {
  color: var(--ink-2) !important;
  font-size: 12px !important;
}

/* 20) The "Report" flag button bottom right - kill flag emoji orange bg */
html body button[class*="report"],
html body a[class*="report"] {
  background: var(--ink) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-full) !important;
  padding: 8px 14px !important;
}/* UIFIX-STRIPPED-20260915_002606


/* =========================================================================
   v11 - NUCLEAR TOKEN OVERRIDE (kills pc-theme --accent-soft: #FBECD9 leak)
   The old peach cream (rgb(251,236,217) = #FBECD9) is being cascaded through
   the --accent-soft variable that pc-theme.css sets. Override the token itself
   at every possible scope so it can't win.
   ========================================================================= * /

/* HIGHEST specificity token override * /
html body,
:root,
html,
html body *,
html body #app,
html body #mainWrap,
html body main,
html body .app-shell {
  --accent-soft:  #F3EEFF !important;
  --accent:       #7C3AED !important;
  --accent-hover: #6D28D9 !important;
  --accent-dim:   #F3EEFF !important;
  --terracotta:      #7C3AED !important;
  --terracotta-hover:#6D28D9 !important;
  --terracotta-soft: #F3EEFF !important;
  --cream:        #F5F5F4 !important;
  --cream-2:      #FAFAF9 !important;
}
*/

/* Kill any element that resolves --accent-soft as a bg (leftover pc-theme rule) */
html body [style*="rgba(139,92,246"],
html body [style*="rgba(139, 92, 246"],
html body [style*="rgba(139,  92, 246"] {
  background: #F3EEFF !important;
  background-color: #F3EEFF !important;
  background-image: none !important;
  border-color: #E4D5FF !important;
  color: #0A0A0B !important;
}
/* Its title text (usually inline color:#fff on these cards) */
html body [style*="rgba(139,92,246"] [style*="color:#fff"],
html body [style*="rgba(139,92,246"] [style*="color: #fff"],
html body [style*="rgba(139, 92, 246"] [style*="color:#fff"] {
  color: #0A0A0B !important;
}
/* First-child title inside these tinted boxes */
html body [style*="rgba(139,92,246"] > div:first-child,
html body [style*="rgba(139,92,246"] > *:first-child {
  color: #4C1D95 !important;
  font-weight: 700 !important;
}

/* Semantic colour cards (red, green, blue) - keep semantic tints, force ink text */
html body [style*="rgba(239,68,68"],
html body [style*="rgba(239, 68, 68"] {
  background: #FEF2F2 !important;
  background-color: #FEF2F2 !important;
  background-image: none !important;
  border-color: #FECACA !important;
  color: #0A0A0B !important;
}
html body [style*="rgba(239,68,68"] > *:first-child {
  color: #B91C1C !important;
  font-weight: 700 !important;
}
html body [style*="rgba(239,68,68"] [style*="color:#fff"] {
  color: #0A0A0B !important;
}

html body [style*="rgba(16,185,129"],
html body [style*="rgba(16, 185, 129"] {
  background: #E9F7EC !important;
  background-color: #E9F7EC !important;
  background-image: none !important;
  border-color: #A7F3D0 !important;
  color: #0A0A0B !important;
}
html body [style*="rgba(16,185,129"] > *:first-child {
  color: #059669 !important;
  font-weight: 700 !important;
}
html body [style*="rgba(16,185,129"] [style*="color:#fff"] {
  color: #0A0A0B !important;
}

html body [style*="rgba(59,130,246"],
html body [style*="rgba(59, 130, 246"] {
  background: #EFF3FE !important;
  background-color: #EFF3FE !important;
  background-image: none !important;
  border-color: #BFDBFE !important;
  color: #0A0A0B !important;
}
html body [style*="rgba(59,130,246"] > *:first-child {
  color: #2563EB !important;
  font-weight: 700 !important;
}
html body [style*="rgba(59,130,246"] [style*="color:#fff"] {
  color: #0A0A0B !important;
}

/* Force every #pex_ tutorial ID box to lavender (Quotes has #pex_quotes) */
html body [id^="pex_"],
html body [id*="pex_"] {
  background: #F3EEFF !important;
  background-color: #F3EEFF !important;
  background-image: none !important;
  border: 1px solid #E4D5FF !important;
  color: #0A0A0B !important;
}
html body [id^="pex_"] [style*="color:#fff"],
html body [id^="pex_"] [style*="color: #fff"] {
  color: #0A0A0B !important;
}
html body [id^="pex_"] > div:first-child,
html body [id^="pex_"] h3,
html body [id^="pex_"] h4 {
  color: #4C1D95 !important;
}

/* Any element using --accent-soft as bg or border - force lavender via token above */
html body [style*="var(--accent-soft)"],
html body .accent-soft,
html body .tint-accent,
html body [class*="accent-tint"] {
  background: #F3EEFF !important;
  color: #0A0A0B !important;
}

/* Any leftover peach hex references */
html body [style*="#FBECD9"],
html body [style*="#fbecd9"],
html body [style*="rgb(251,236,217)"],
html body [style*="rgb(251, 236, 217)"],
html body [style*="rgb(251,  236, 217)"] {
  background: #F3EEFF !important;
  color: #0A0A0B !important;
}

/* Force text in ANY tinted parent to ink (safety net) */
html body [style*="background:rgba"] p,
html body [style*="background:rgba"] div,
html body [style*="background:rgba"] span,
html body [style*="background: rgba"] p,
html body [style*="background: rgba"] div,
html body [style*="background: rgba"] span {
  color: #0A0A0B !important;
}/* UIFIX-STRIPPED-20260915_002606


/* =========================================================================
   v12 - DASHBOARD & PIPELINE ELEVATION
   ========================================================================= * /

/* Kill the leaked warm beige border (rgb(233,227,219) = #E9E3DB) globally * /
html body,
html body *,
html body :root {
  --border:        rgba(10,10,11,0.08) !important;
  --border-strong: rgba(10,10,11,0.14) !important;
  --line-warm:     rgba(10,10,11,0.08) !important;
}
*/

/* Any element with border-color = the beige - override */
html body [style*="rgb(233,227,219)"],
html body [style*="rgb(233, 227, 219)"],
html body [style*="#E9E3DB"],
html body [style*="#e9e3db"] {
  border-color: var(--line) !important;
}

/* =========================================================================
   DASHBOARD - KPI cards (.kpi)
   ========================================================================= */
html body .kpi {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 22px 24px !important;
  box-shadow: var(--shadow-1) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease !important;
}
html body .kpi:hover {
  box-shadow: var(--shadow-2) !important;
  transform: translateY(-1px) !important;
}
/* Corner decoration - subtle violet gradient orb top-right */
html body .kpi::before {
  content: "" !important;
  position: absolute !important;
  top: -30px !important;
  right: -30px !important;
  width: 120px !important;
  height: 120px !important;
  background: radial-gradient(circle, rgba(124,58,237,0.08) 0%, rgba(124,58,237,0) 70%) !important;
  pointer-events: none !important;
}
html body .kpi::after {
  content: none !important;
}
html body .kpi-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--ink-2) !important;
  margin: 0 0 12px !important;
  position: relative !important;
  z-index: 1 !important;
}
html body .kpi-label-dot {
  width: 8px !important;
  height: 8px !important;
  background: var(--violet) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.15) !important;
  flex-shrink: 0 !important;
}
html body .kpi-figure {
  font-family: var(--font-sans) !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  color: var(--ink) !important;
  margin: 0 0 6px !important;
  position: relative !important;
  z-index: 1 !important;
}
html body .kpi-sub {
  color: var(--ink-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Semantic KPI colouring - when the figure element itself is a link or has a class */
html body .kpi.kpi-success .kpi-figure,
html body .kpi.won .kpi-figure {
  color: var(--success) !important;
}

/* Pipeline lifecycle card wrapping the .stage grid */
html body .card:has(.stage),
html body .card:has(.grid-5) {
  padding: 24px !important;
}

/* =========================================================================
   PIPELINE LIFECYCLE STAGES (dashboard) - elevated
   ========================================================================= */
html body .grid-5 {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px !important;
  margin-top: 16px !important;
}
html body .grid-5 + .grid-5,
html body .grid-5:nth-of-type(2) {
  grid-template-columns: repeat(2, 1fr) !important;
  max-width: 40% !important;
}

html body .stage {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  padding: 16px 18px !important;
  transition: all 0.15s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
html body .stage:hover {
  border-color: #E4D5FF !important;
  transform: translateY(-1px) !important;
}
html body .stage::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--line) !important;
}
/* Per-stage accent bars (matches pipeline column colours) */
html body .stage:nth-child(1)::before { background: var(--violet) !important; }
html body .stage:nth-child(2)::before { background: #F97316 !important; }
html body .stage:nth-child(3)::before { background: #F59E0B !important; }
html body .stage:nth-child(4)::before { background: var(--info) !important; }
html body .stage:nth-child(5)::before { background: var(--cyan) !important; }
html body .grid-5:nth-of-type(2) .stage:nth-child(1)::before { background: var(--success) !important; }
html body .grid-5:nth-of-type(2) .stage:nth-child(2)::before { background: #64748B !important; }

html body .stage .stage-label,
html body .stage > div:first-child {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink-2) !important;
  margin: 0 0 8px !important;
  letter-spacing: 0.3px !important;
}
html body .stage .stat-value,
html body .stage .value,
html body .stage > *:nth-child(2) {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}
html body .stage.active {
  background: linear-gradient(135deg, var(--violet-soft) 0%, rgba(243,238,255,0.5) 100%) !important;
  border-color: #E4D5FF !important;
}
html body .stage.active .stat-value {
  color: var(--violet-ink) !important;
}

/* =========================================================================
   DASHBOARD PANELS - Recent activity / New leads
   ========================================================================= */
html body .card > h2:first-child,
html body .card > .card-title:first-child,
html body .card > [class*="panel-title"]:first-child {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: none !important;
}
html body .card > .subtitle,
html body .card > .helper,
html body .card > small:nth-of-type(1) {
  color: var(--ink-2) !important;
  font-size: 13px !important;
  margin: 0 0 16px !important;
  display: block !important;
}

/* New leads list rows */
html body .new-leads-list,
html body [class*="lead-list"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
html body [class*="lead-row"],
html body .new-leads-list > div {
  padding: 10px 12px !important;
  border-radius: var(--r-md) !important;
  transition: background 0.12s ease !important;
  cursor: pointer !important;
}
html body [class*="lead-row"]:hover,
html body .new-leads-list > div:hover {
  background: var(--bg-2) !important;
}

/* Contact avatars (JS, CG, GH, JR, RB) */
html body .avatar,
html body [class*="avatar"] {
  background: var(--violet-soft) !important;
  color: var(--violet-ink) !important;
  border: 1px solid #E4D5FF !important;
  border-radius: 50% !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* =========================================================================
   PIPELINE PAGE - Tutorial banner shrink + column & card elevation
   ========================================================================= */

/* Tutorial box on Pipeline (#pex_pipeline) - shrink to compact strip */
html body #pex_pipeline {
  padding: 10px 16px !important;
  margin-bottom: 12px !important;
  background: var(--violet-soft) !important;
  border: 1px solid #E4D5FF !important;
  border-radius: var(--r-md) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
html body #pex_pipeline > div:first-child {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--violet-ink) !important;
  margin-bottom: 2px !important;
}
html body #pex_pipeline p {
  font-size: 12px !important;
  color: var(--ink-2) !important;
  margin: 0 0 4px !important;
}
html body #pex_pipeline > div:not(:first-child) {
  display: none !important;
}
html body #pex_pipeline::before {
  content: "How this works" !important;
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--violet) !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

/* Pipeline column - kanban style */
html body .kanban-col {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 12px !important;
  min-height: 400px !important;
}
html body .kanban-col-header {
  background: transparent !important;
  border: none !important;
  padding: 4px 4px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  border-bottom: 1px solid var(--line) !important;
  margin-bottom: 10px !important;
}
html body .kanban-col-header > div:first-child,
html body .kanban-col-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
}
html body .kanban-col-count,
html body [class*="col-count"] {
  background: var(--surface) !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--line) !important;
  padding: 2px 8px !important;
  border-radius: var(--r-full) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 24px !important;
  text-align: center !important;
}
/* SMS bulk action icon in column header */
html body .kanban-col-header [class*="sms-btn"],
html body .kanban-col-header button {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  padding: 4px 8px !important;
  color: var(--ink-2) !important;
  font-size: 12px !important;
  cursor: pointer !important;
}
html body .kanban-col-header [class*="sms-btn"]:hover {
  background: var(--violet-soft) !important;
  color: var(--violet) !important;
  border-color: #E4D5FF !important;
}

/* Column top accent bar per stage (matches lifecycle) */
html body .kanban-col {
  position: relative !important;
  overflow: hidden !important;
}
html body .kanban-col::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  z-index: 1 !important;
}
html body .kanban-col:nth-child(1)::before { background: var(--violet) !important; }
html body .kanban-col:nth-child(2)::before { background: #F97316 !important; }
html body .kanban-col:nth-child(3)::before { background: #F59E0B !important; }
html body .kanban-col:nth-child(4)::before { background: var(--info) !important; }
html body .kanban-col:nth-child(5)::before { background: var(--cyan) !important; }
html body .kanban-col:nth-child(6)::before { background: var(--success) !important; }
html body .kanban-col:nth-child(7)::before { background: #64748B !important; }

/* Deal card - elevated */
html body .kanban-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 12px !important;
  margin: 0 0 8px !important;
  box-shadow: 0 1px 2px rgba(10,10,11,0.03) !important;
  cursor: grab !important;
  transition: all 0.15s ease !important;
  position: relative !important;
}
html body .kanban-card:hover {
  box-shadow: var(--shadow-2) !important;
  border-color: var(--line-strong) !important;
  transform: translateY(-1px) !important;
}
html body .kanban-card:active { cursor: grabbing !important; }

/* Card left border colour by temperature (parent col colour) */
html body .kanban-col:nth-child(1) .kanban-card { border-left-color: var(--violet) !important; }
html body .kanban-col:nth-child(2) .kanban-card { border-left-color: #F97316 !important; }
html body .kanban-col:nth-child(3) .kanban-card { border-left-color: #F59E0B !important; }
html body .kanban-col:nth-child(4) .kanban-card { border-left-color: var(--info) !important; }
html body .kanban-col:nth-child(5) .kanban-card { border-left-color: var(--cyan) !important; }
html body .kanban-col:nth-child(6) .kanban-card { border-left-color: var(--success) !important; }
html body .kanban-col:nth-child(7) .kanban-card { border-left-color: #64748B !important; }

html body .kanban-card-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.3 !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.005em !important;
}
html body .kanban-card [class*="meta"],
html body .kanban-card .subtitle,
html body .kanban-card small {
  font-size: 11px !important;
  color: var(--ink-2) !important;
  font-weight: 500 !important;
  margin: 0 0 8px !important;
}
html body .kanban-card [class*="card-tags"],
html body .kanban-card [class*="card-footer"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-top: 6px !important;
}
html body .kanban-card .kanban-card-date {
  font-size: 10px !important;
  color: var(--ink-3) !important;
  margin-top: 6px !important;
}

/* Score chip inside card - always violet-tinted */
html body .kanban-card [class*="score"] {
  background: var(--violet-soft) !important;
  color: var(--violet-ink) !important;
  border: 1px solid #E4D5FF !important;
  padding: 2px 8px !important;
  border-radius: var(--r-full) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 26px !important;
  text-align: center !important;
}

/* "Drop cards here" placeholder */
html body .kanban-cards [class*="drop"],
html body .kanban-cards .empty,
html body [class*="drop-hint"] {
  border: 2px dashed var(--line-strong) !important;
  border-radius: var(--r-md) !important;
  padding: 24px !important;
  color: var(--ink-3) !important;
  font-size: 12px !important;
  text-align: center !important;
  background: transparent !important;
  margin: 0 0 8px !important;
}

/* "+ Add contact" ghost link at bottom of column */
html body .kanban-cards [class*="add-contact"],
html body .kanban-col [class*="add-contact"] {
  border: 1px dashed var(--line-strong) !important;
  background: transparent !important;
  color: var(--ink-2) !important;
  border-radius: var(--r-md) !important;
  padding: 8px !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: block !important;
}
html body .kanban-cards [class*="add-contact"]:hover,
html body .kanban-col [class*="add-contact"]:hover {
  border-color: var(--violet) !important;
  background: var(--violet-soft) !important;
  color: var(--violet) !important;
}

/* Pipeline top filter row (Stages, All trades) */
html body .pipeline-toolbar,
html body [class*="pipe-toolbar"] {
  padding: 10px 16px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Top stage counts strip (New Lead 268 · Contacted 487 ...) */
html body [class*="stage-counts"],
html body [class*="pipe-summary"] {
  display: flex !important;
  gap: 16px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--line) !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
}
html body [class*="stage-count"] {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: var(--ink-2) !important;
}

/* =========================================================================
   MISC POLISH BOTH PAGES
   ========================================================================= */

/* Card headers on Dashboard panels - Recent activity, New leads */
html body .card h2,
html body .card [class*="panel-title"] {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 0 2px !important;
  color: var(--ink) !important;
}

/* "Inbox →" link top right of New leads panel */
html body .card [class*="inbox-link"],
html body .card [href*="inbox"] {
  color: var(--violet) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
html body .card [class*="inbox-link"]:hover {
  text-decoration: underline !important;
}

/* Small "New lead" badges next to each lead */
html body [class*="new-lead-badge"],
html body .new-leads-list [class*="badge"] {
  background: var(--violet-soft) !important;
  color: var(--violet-ink) !important;
  border: 1px solid #E4D5FF !important;
  padding: 3px 8px !important;
  border-radius: var(--r-full) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

/* Consistent card padding & gap on Dashboard */
html body .grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}
@media (max-width: 900px) {
  html body .grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; }
}

/* v12b - undo grid-5 regression */
html body .grid-5,
html body .grid-5 + .grid-5,
html body .grid-5:nth-of-type(2),
html body .card .grid-5 {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px !important;
  max-width: none !important;
  margin-top: 12px !important;
}
@media (max-width: 1100px) {
  html body .grid-5 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
}

/* Stage tiles: keep the subtle top accent bar; but drop per-nth-child colours
   that break when the grid contains 7 items in one row. Use data-attribute or
   fallback to violet accent only. */
html body .stage::before {
  background: var(--violet) !important;
}
html body .stage:nth-child(2)::before { background: #F97316 !important; }
html body .stage:nth-child(3)::before { background: #F59E0B !important; }
html body .stage:nth-child(4)::before { background: var(--info) !important; }
html body .stage:nth-child(5)::before { background: var(--cyan) !important; }
html body .stage:nth-child(6)::before { background: var(--success) !important; }
html body .stage:nth-child(7)::before { background: #64748B !important; }

/* Pipeline lifecycle needs a bit of vertical room; also make the .card that wraps
   the .grid-5(s) not have double padding on the outer + inner */
html body .card .grid-5 {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

/* =========================================================================
   v13 - DASHBOARD ENTERPRISE REWORK
   Two-column grid, sparklines, trend chart, priority actions, compact funnel
   ========================================================================= */

/* Two-column dashboard grid */
html body .dash-grid {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 20px !important;
  align-items: start !important;
  margin-top: 4px !important;
}
@media (max-width: 1200px) {
  html body .dash-grid { grid-template-columns: 1fr !important; }
}

html body .dash-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
html body .dash-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Turn the .grid-4 KPI row into 4 tight columns */
html body .dash-left .grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin: 0 !important;
}

/* KPI card with sparkline + delta */
html body .kpi {
  padding: 16px 18px 0 !important;
  overflow: hidden !important;
  min-height: 148px !important;
  display: flex !important;
  flex-direction: column !important;
}
html body .kpi::before {
  display: none !important;
}
html body .kpi-label {
  font-size: 10px !important;
  letter-spacing: 1.1px !important;
  margin: 0 0 8px !important;
}
html body .kpi-figure {
  font-size: 2rem !important;
  margin: 0 !important;
}
html body .kpi-delta-wrap {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin: 4px 0 0 !important;
}
html body .kpi-delta {
  font-size: 12px !important;
  font-weight: 700 !important;
}
html body .kpi-delta-period {
  color: var(--ink-3) !important;
  font-size: 11px !important;
}
html body .kpi-sub {
  font-size: 11px !important;
  color: var(--ink-3) !important;
  margin: 6px 0 0 !important;
}
html body .kpi-spark {
  margin: 12px -18px -1px !important;
  height: 36px !important;
  display: block !important;
}
html body .kpi-spark svg {
  display: block !important;
  width: 100% !important;
  height: 36px !important;
}

/* Pipeline momentum trend card */
html body .dash-trend {
  padding: 20px 22px !important;
}
html body .dash-trend-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 0 8px !important;
}
html body .dash-trend-head h2 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
html body .dash-trend-tabs {
  display: flex !important;
  gap: 4px !important;
}
html body .dash-trend-tabs .filter-pill {
  padding: 4px 10px !important;
  font-size: 12px !important;
}
html body .dash-trend-chart {
  margin: 12px -6px -6px !important;
  height: 180px !important;
}
html body .dash-trend-chart svg {
  display: block !important;
  width: 100% !important;
  height: 180px !important;
}

/* Priority-actions panel (right rail) */
html body .dash-priority {
  padding: 18px 20px !important;
}
html body .dash-priority-head {
  margin: 0 0 12px !important;
}
html body .dash-priority-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
html body .dash-priority-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  margin: 0 -12px !important;
  border-radius: var(--r-md) !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: background 0.12s ease !important;
  cursor: pointer !important;
}
html body .dash-priority-item:hover {
  background: var(--bg-2) !important;
}
html body .pri-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
}
html body .pri-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.3 !important;
}
html body .pri-sub {
  font-size: 11px !important;
  color: var(--ink-2) !important;
  margin-top: 2px !important;
}
html body .pri-cta {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--violet) !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}

/* Compact pipeline funnel (replaces the stage grid) */
html body .dash-funnel {
  margin-top: 12px !important;
}
html body .funnel-bar {
  display: flex !important;
  align-items: stretch !important;
  height: 14px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: var(--bg-2) !important;
  margin: 0 0 14px !important;
  gap: 2px !important;
}
html body .funnel-seg {
  transition: width 0.3s ease, opacity 0.15s ease !important;
  cursor: pointer !important;
}
html body .funnel-seg:hover {
  opacity: 0.8 !important;
}
html body .funnel-legend {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 8px 20px !important;
}
html body .funnel-legend-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: var(--ink-2) !important;
}
html body .funnel-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
html body .funnel-legend-label {
  font-weight: 500 !important;
  flex: 1 !important;
}
html body .funnel-legend-val {
  font-weight: 700 !important;
  color: var(--ink) !important;
}

/* Right rail panels adjustments (Recent activity + New leads) */
html body .dash-right .card {
  padding: 18px 20px !important;
  margin: 0 !important;
}
html body .dash-right .card h2 {
  font-size: 16px !important;
  margin: 0 0 4px !important;
}
html body .dash-right .card > .subtitle,
html body .dash-right .card > small {
  font-size: 12px !important;
  margin-bottom: 12px !important;
}

/* Kill the old top KPI "corner orb" pseudo since we now have real sparklines */
html body .dash-left .kpi::before {
  content: none !important;
}

/* =========================================================================
   v14 - dashboard enrichment bugfixes
   ========================================================================= */

/* Kill the base .delta::before pseudo across all .kpi-delta / .kd usage */
html body .kpi-delta::before,
html body .kd::before,
html body .kpi-delta-wrap .delta::before,
html body [class*="kpi-delta"]::before,
html body [class*="dash-trend"] [class*="delta"]::before {
  content: none !important;
  display: none !important;
}

/* Force-hide old .grid-5 rows inside the Pipeline lifecycle card if the funnel is there */
html body .card:has(.dash-funnel) .grid-5 {
  display: none !important;
}
html body .dash-funnel + .grid-5,
html body .dash-funnel ~ .grid-5 {
  display: none !important;
}

/* Right rail widen a bit to fit New leads and Recent activity better */
html body .dash-grid {
  grid-template-columns: 1fr 380px !important;
}
@media (max-width: 1200px) {
  html body .dash-grid { grid-template-columns: 1fr !important; }
}

/* Delta wrap layout */
html body .kpi-delta-wrap {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin: 4px 0 0 !important;
  flex-wrap: wrap !important;
}
html body .kd,
html body .kpi-delta-wrap .kd {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
html body .kdp,
html body .kpi-delta-wrap .kdp {
  color: var(--ink-3) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* Right rail cards: force tighter title/layout, no line-wrapping title */
html body .dash-right .card {
  padding: 16px 18px !important;
  overflow: hidden !important;
}
html body .dash-right .card h2 {
  font-size: 15px !important;
  margin: 0 0 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body .dash-right .card > .subtitle,
html body .dash-right .card small {
  font-size: 11px !important;
  color: var(--ink-2) !important;
  margin-bottom: 10px !important;
  display: block !important;
}
/* New leads inline "5 awaiting reply" + "Inbox →" */
html body .dash-right .card [class*="inbox"],
html body .dash-right .card [href*="inbox"] {
  float: right !important;
  font-size: 12px !important;
  color: var(--violet) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
/* Lead rows */
html body .dash-right [class*="lead-row"],
html body .dash-right ul li,
html body .dash-right .card > div > div {
  padding: 8px 10px !important;
  border-radius: var(--r-md) !important;
  transition: background 0.12s ease !important;
}
html body .dash-right [class*="lead-row"]:hover {
  background: var(--bg-2) !important;
}
/* Avatar circle inside lead row */
html body .dash-right .avatar,
html body .dash-right [class*="avatar"] {
  width: 30px !important;
  height: 30px !important;
  font-size: 10px !important;
}
/* Lead name + meta */
html body .dash-right .card a {
  color: var(--ink) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
html body .dash-right .card a:hover {
  color: var(--violet) !important;
}

/* Recent activity empty state - tighter */
html body .dash-right .card .empty-state,
html body .dash-right [class*="empty-state"] {
  padding: 20px 12px !important;
  border: 1px dashed var(--line) !important;
  background: var(--bg-2) !important;
  border-radius: var(--r-md) !important;
}
html body .dash-right .empty-title,
html body .dash-right [class*="empty-title"] {
  font-size: 14px !important;
}
html body .dash-right .empty-subtitle,
html body .dash-right [class*="empty-desc"] {
  font-size: 12px !important;
}

/* =========================================================================
   v15 - right rail Newleads rework + funnel data restored
   ========================================================================= */

/* Right rail width - a bit wider for New leads content */
html body .dash-grid {
  grid-template-columns: 1fr 400px !important;
  gap: 20px !important;
}
@media (max-width: 1200px) {
  html body .dash-grid { grid-template-columns: 1fr !important; }
}

/* New leads card - compact + clear */
html body .dash-right .card h2,
html body .dash-right .card .card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline !important;
}

/* "Inbox →" link floats right at top */
html body .dash-right .card .card-link,
html body .dash-right .card a[class*="inbox"],
html body .dash-right .card > a:first-child {
  float: right !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--violet) !important;
  text-decoration: none !important;
  margin-top: 3px !important;
}

/* Lead rows */
html body .dash-right .card a:not(.card-link) {
  display: grid !important;
  grid-template-columns: 32px 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 8px !important;
  margin: 2px -8px !important;
  border-radius: var(--r-md) !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: background 0.12s ease !important;
  min-width: 0 !important;
}
html body .dash-right .card a:not(.card-link):hover {
  background: var(--bg-2) !important;
}

/* Lead name - big, truncated */
html body .dash-right .card a:not(.card-link) > *:nth-child(2) {
  min-width: 0 !important;
  overflow: hidden !important;
}
html body .dash-right .card a:not(.card-link) [class*="lead-name"],
html body .dash-right .card a:not(.card-link) strong,
html body .dash-right .card a:not(.card-link) > *:nth-child(2) > *:first-child {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  max-width: 100% !important;
}
html body .dash-right .card a:not(.card-link) [class*="lead-meta"],
html body .dash-right .card a:not(.card-link) small,
html body .dash-right .card a:not(.card-link) > *:nth-child(2) > *:nth-child(2) {
  font-size: 11px !important;
  color: var(--ink-3) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  margin-top: 1px !important;
}

/* Small "New lead" pill at end - stack it on right */
html body .dash-right .card a:not(.card-link) [class*="badge"],
html body .dash-right .card a:not(.card-link) [class*="new-lead"],
html body .dash-right .card a:not(.card-link) > *:last-child {
  font-size: 10px !important;
  padding: 2px 6px !important;
  background: var(--violet-soft) !important;
  color: var(--violet-ink) !important;
  border: 1px solid #E4D5FF !important;
  border-radius: var(--r-full) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Avatar in first col */
html body .dash-right .card a:not(.card-link) [class*="avatar"] {
  width: 32px !important;
  height: 32px !important;
  font-size: 11px !important;
  background: var(--violet-soft) !important;
  color: var(--violet-ink) !important;
  border: 1px solid #E4D5FF !important;
}

/* Card header row - New leads + Inbox link */
html body .dash-right .card > div:first-child,
html body .dash-right .card > .card-head {
  overflow: hidden !important;
  margin-bottom: 8px !important;
}

/* =========================================================================
   v16 - correct .activity-item / .activity-list / .card-head styling
   ========================================================================= */

/* card-head row: title + subtitle + Inbox link on one line */
html body .dash-right .card .card-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
}
html body .dash-right .card .card-head > div:first-child {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex: 1 !important;
}
html body .dash-right .card .card-head h2,
html body .dash-right .card .card-head .card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
html body .dash-right .card .card-head small {
  color: var(--ink-3) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
html body .dash-right .card .card-head .card-link {
  color: var(--violet) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Activity list */
html body .dash-right .activity-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* Each activity item - flexbox row */
html body .dash-right .activity-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  margin: 0 -10px !important;
  border-radius: var(--r-md) !important;
  cursor: pointer !important;
  transition: background 0.12s ease !important;
  min-width: 0 !important;
}
html body .dash-right .activity-item:hover {
  background: var(--bg-2) !important;
}
/* Avatar - first element (2-letter block) */
html body .dash-right .activity-item > *:first-child,
html body .dash-right .activity-item .avatar,
html body .dash-right .activity-item [class*="avatar"] {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background: var(--violet-soft) !important;
  color: var(--violet-ink) !important;
  border: 1px solid #E4D5FF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}
/* Middle column - name + meta stacked */
html body .dash-right .activity-item > *:not(:first-child):not(:last-child) {
  min-width: 0 !important;
  overflow: hidden !important;
  flex: 1 !important;
}
/* Name - the bare <a> or first text-carrying child */
html body .dash-right .activity-item a {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  line-height: 1.3 !important;
}
html body .dash-right .activity-item a:hover {
  color: var(--violet) !important;
}
/* Meta (source · date) - small grey line below the name */
html body .dash-right .activity-item small,
html body .dash-right .activity-item [class*="meta"],
html body .dash-right .activity-item .subtle {
  display: block !important;
  font-size: 11px !important;
  color: var(--ink-3) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  margin-top: 1px !important;
  font-weight: 500 !important;
}

/* "New lead" pill at end - hide it, it's redundant in this panel */
html body .dash-right .activity-item [class*="badge"],
html body .dash-right .activity-item [class*="pill"],
html body .dash-right .activity-item [class*="lead-tag"] {
  display: none !important;
}

/* Widen right rail a touch more */
html body .dash-grid {
  grid-template-columns: 1fr 380px !important;
}
@media (max-width: 1200px) {
  html body .dash-grid { grid-template-columns: 1fr !important; }
}

/* =========================================================================
   v17 - break the .split grid inside right rail, un-truncate names/titles
   ========================================================================= */

/* Force .split inside .dash-right to stack vertically (not 2 cols) */
html body .dash-right .split,
html body .dash-right [class*="split"],
html body .dash-right .grid-2,
html body .dash-right .row {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  width: 100% !important;
}
html body .dash-right .split > *,
html body .dash-right [class*="split"] > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Card head titles - stop truncation, allow wrap */
html body .dash-right .card .card-head h2,
html body .dash-right .card .card-head .card-title,
html body .dash-right .card > h2,
html body .dash-right .card > .card-title {
  white-space: normal !important;
  text-overflow: unset !important;
  overflow: visible !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

/* Card head layout - allow the "5 awaiting reply" subtitle + Inbox link to fit */
html body .dash-right .card .card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
  flex-wrap: nowrap !important;
}
html body .dash-right .card .card-head > div:first-child,
html body .dash-right .card .card-head > *:first-child {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html body .dash-right .card .card-head small {
  font-size: 11px !important;
  color: var(--ink-3) !important;
  white-space: nowrap !important;
}

/* Activity items - give lead name plenty of room, kill ellipsis */
html body .dash-right .activity-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  margin: 0 -10px !important;
  border-radius: var(--r-md) !important;
  min-width: 0 !important;
}
html body .dash-right .activity-item > *:first-child {
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 32px !important;
}
/* Middle content - flex grow, min-width 0 for truncation, but wider */
html body .dash-right .activity-item > div:not(:first-child) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Lead name - truncate cleanly at container width */
html body .dash-right .activity-item a {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  max-width: 100% !important;
}

/* Meta (source · date) below name */
html body .dash-right .activity-item small,
html body .dash-right .activity-item [class*="meta"] {
  font-size: 11px !important;
  color: var(--ink-3) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  margin-top: 1px !important;
}

/* Hide the "New lead" pill (redundant in this panel) */
html body .dash-right .activity-item [class*="badge"],
html body .dash-right .activity-item [class*="pill"],
html body .dash-right .activity-item [class*="lead-tag"],
html body .dash-right .activity-item [class*="tag"]:not(.card-tag) {
  display: none !important;
}

/* Widen right rail a bit more so names fit */
html body .dash-grid {
  grid-template-columns: 1fr 400px !important;
}
@media (max-width: 1200px) {
  html body .dash-grid { grid-template-columns: 1fr !important; }
}

/* Recent activity empty state - vertical center, smaller */
html body .dash-right .empty-state,
html body .dash-right [class*="empty-state"] {
  padding: 24px 12px !important;
  border: 1px dashed var(--line) !important;
  background: var(--bg-2) !important;
  border-radius: var(--r-md) !important;
  text-align: center !important;
}

/* =========================================================================
   v18 - polish: hide KPI subs, tighten rail, taller trend chart
   ========================================================================= */

/* Hide redundant KPI sub-label (JS also handles this but belt & braces) */
html body .kpi-sub {
  display: none !important;
}

/* KPI card - fit tighter now sub is gone */
html body .kpi {
  min-height: 138px !important;
  padding: 16px 18px 0 !important;
}
html body .kpi-figure {
  font-size: 2rem !important;
  margin-top: 2px !important;
}

/* Trend chart taller for better readability */
html body .dash-trend-chart {
  height: 220px !important;
  margin: 8px -6px -6px !important;
}
html body .dash-trend-chart svg {
  height: 220px !important;
}
html body .dash-trend {
  padding: 20px 22px 16px !important;
}
html body .dash-trend-head h2 {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}

/* Priority panel - a bit tighter, better icon */
html body .dash-priority {
  padding: 16px 18px !important;
}
html body .dash-priority-item {
  padding: 10px 10px !important;
  margin: 0 -10px !important;
}
html body .pri-title {
  font-size: 13px !important;
}
html body .pri-sub {
  font-size: 11px !important;
  color: var(--ink-3) !important;
}

/* Recent activity empty state - much smaller */
html body .dash-right .empty-state,
html body .dash-right [class*="empty-state"] {
  padding: 16px 12px !important;
  min-height: auto !important;
}
html body .dash-right .empty-title,
html body .dash-right [class*="empty-title"] {
  font-size: 13px !important;
  margin: 0 0 2px !important;
}
html body .dash-right .empty-subtitle,
html body .dash-right [class*="empty-desc"] {
  font-size: 11px !important;
  margin: 0 !important;
}

/* Right rail cards - tighter uniform padding */
html body .dash-right .card {
  padding: 16px 18px !important;
}

/* Reduce dash-grid gap a bit */
html body .dash-grid {
  gap: 18px !important;
  grid-template-columns: 1fr 380px !important;
}
@media (max-width: 1200px) {
  html body .dash-grid { grid-template-columns: 1fr !important; }
}

/* Pipeline lifecycle - tighter and no double-margin */
html body .card:has(.dash-funnel),
html body .card .dash-funnel {
  padding-top: 0 !important;
}
html body .funnel-bar {
  height: 12px !important;
  margin: 8px 0 12px !important;
}
html body .funnel-legend {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 6px 16px !important;
}
html body .funnel-legend-item {
  font-size: 11px !important;
}
html body .funnel-legend-val {
  font-weight: 800 !important;
}

/* Delta wrap tighter */
html body .kpi-delta-wrap {
  gap: 6px !important;
  margin: 6px 0 0 !important;
  align-items: center !important;
}
html body .kdp {
  font-size: 10px !important;
  color: var(--ink-3) !important;
}

/* Sparkline height a touch bigger */
html body .kpi-spark {
  height: 40px !important;
  margin: 8px -18px -1px !important;
}
html body .kpi-spark svg {
  height: 40px !important;
}

/* =========================================================================
   v19 - kill remaining white/washed text + beige leaks
   ========================================================================= */

/* 1) GDPR page .s-title = section titles rendering white */
html body .s-title,
html body [class*="s-title"]:not(.sc-header-title):not(.tour-title),
html body .section-title,
html body .privacy-section-title {
  color: var(--ink) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
}/* UIFIX-STRIPPED-20260915_005053


/* Any other lingering white text on light backgrounds (safety net) * /
html body h1, html body h2, html body h3, html body h4, html body h5,
html body .card-title,
html body [class*="section-title"],
html body [class*="panel-title"] {
  color: var(--ink) !important;
}
*/
html body [style*="color: rgb(255, 255, 255)"]:not(.btn-primary):not(.btn-cta):not(.btn-black):not(.btn-danger):not(.sg-num):not(.pri-icon):not(.step-number):not(.avatar):not([class*="badge"]):not(.brand-mark),
html body [style*="color:rgb(255,255,255)"]:not(.btn-primary):not(.btn-cta):not(.btn-black):not(.btn-danger):not(.sg-num):not(.pri-icon):not(.step-number):not(.avatar):not([class*="badge"]):not(.brand-mark) {
  color: var(--ink) !important;
}

/* 2) Twilio Setup .sg-info (cyan info callouts) - readable */
html body .sg-info,
html body .sg-info * {
  color: #0E7490 !important;
  opacity: 1 !important;
}
html body .sg-info {
  background: #ECFEFF !important;
  border-left: 3px solid #0891B2 !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 8px 0 !important;
}
html body .sg-info strong {
  color: #164E63 !important;
  font-weight: 700 !important;
}

/* 3) .sg-step-body - restore dark text */
html body .sg-step-body,
html body [class*="sg-step-body"] {
  color: var(--ink) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  opacity: 1 !important;
}
html body .sg-step-body p,
html body .sg-step-body div,
html body .sg-step-body span,
html body .sg-step-body strong,
html body .sg-step-body a {
  color: var(--ink) !important;
}
html body .sg-step-body a[href^="http"],
html body .sg-step-body a[href^="/"],
html body .sg-step-body a[class*="link"] {
  color: var(--violet) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
html body .sg-step-body a:hover {
  text-decoration: underline !important;
}

/* 4) Company switcher / Viewing Context chip - kill beige border, restore layout */
html body .company-switcher,
html body [class*="company-switcher"] {
  background: var(--violet-soft) !important;
  border: 1px solid #E4D5FF !important;
  border-radius: var(--r-md) !important;
  padding: 10px 12px !important;
  margin: 0 8px 12px !important;
  color: var(--violet-ink) !important;
}
html body .cs-label,
html body [class*="cs-label"] {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--violet) !important;
  margin: 0 0 4px !important;
  opacity: 1 !important;
}
html body .cs-value,
html body [class*="cs-value"],
html body .company-switcher .value,
html body .company-switcher > *:not(.cs-label):not([class*="cs-label"]) {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--violet-ink) !important;
  line-height: 1.2 !important;
}/* UIFIX-STRIPPED-20260915_005053


/* 5) Enforce Inter font on all text - override any legacy webfont attempt * /
html body,
html body input,
html body textarea,
html body select,
html body button,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body p, html body span, html body div, html body a, html body li, html body td, html body th {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
}
*/
html body code, html body pre, html body kbd, html body samp,
html body .sg-field-val, html body [class*="mono"] {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace !important;
}

/* Improve font rendering globally */
html body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  font-feature-settings: 'ss01', 'cv11', 'kern' !important;
}

/* 6) Twilio Setup - overall step visibility polish */
html body .sg-step {
  padding: 20px 0 !important;
  border-bottom: 1px solid var(--line) !important;
}
html body .sg-step:last-child {
  border-bottom: none !important;
}
html body .sg-step-title {
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin: 0 0 8px !important;
}
html body .sg-step-body p:not(:last-child) {
  margin-bottom: 8px !important;
}

/* 7) GDPR page - card layout tighter */
html body .card > .s-title:first-child,
html body .card > [class*="s-title"]:first-child {
  margin-top: 0 !important;
}

/* 8) Any leftover beige border colour (rgb(232,217,203) etc) globally */
html body [style*="rgb(232, 217, 203)"],
html body [style*="rgb(232,217,203)"],
html body [style*="#E8D9CB"],
html body [style*="rgb(233, 227, 219)"],
html body [style*="rgb(233,227,219)"] {
  border-color: var(--line) !important;
  background-color: transparent !important;
}

/* =========================================================================
   v20 - dashboard FONT REDO
   Sentence-case labels · tabular numbers · medium weight numbers · quieter
   ========================================================================= */

/* KPI card - complete font retreatment */
html body .kpi {
  padding: 18px 20px 0 !important;
  min-height: 130px !important;
}
html body .kpi-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  color: var(--ink-2) !important;
  margin: 0 0 8px !important;
}
html body .kpi-label-dot {
  width: 6px !important;
  height: 6px !important;
  background: var(--violet) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}
html body .kpi-figure {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 2rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: 'tnum', 'ss01', 'cv11' !important;
}
html body .kpi-delta-wrap {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin: 6px 0 0 !important;
}
html body .kd {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums !important;
}
html body .kdp {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  letter-spacing: -0.005em !important;
}

/* Pipeline momentum big number - same treatment */
html body .dash-trend-head h2 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums !important;
}
html body .dash-trend-head .kicker {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
}
html body .dash-trend-head p {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
}

/* Page hero - refine "Good evening, Andrew" - less italic novelty */
html body .page-hero h1,
html body main.page-content h1 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--ink) !important;
  line-height: 1.15 !important;
}
html body .page-hero h1 em,
html body main.page-content h1 em,
html body h1 em {
  font-style: normal !important;
  color: var(--violet) !important;
  font-weight: 700 !important;
}
html body .page-hero .subtitle,
html body .page-hero p,
html body main.page-content > .page-header p,
html body h1 + p {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
  letter-spacing: -0.005em !important;
}

/* "FRIDAY, 24 JULY 2026" date kicker */
html body .page-date,
html body [class*="page-date"],
html body main.page-content > div:first-child > *:first-child {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: var(--ink-3) !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

/* Priority actions - proper typography */
html body .dash-priority .kicker {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
}
html body .pri-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}
html body .pri-sub {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  letter-spacing: -0.005em !important;
  margin-top: 2px !important;
}
html body .pri-cta {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--violet) !important;
  letter-spacing: -0.005em !important;
}

/* Pipeline lifecycle title + funnel legend */
html body .card > h2:first-child,
html body .card .card-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}
html body .card > .subtitle,
html body .card > small {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
  letter-spacing: -0.005em !important;
}
html body .funnel-legend-item {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
  letter-spacing: -0.005em !important;
}
html body .funnel-legend-val {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums !important;
}
html body .funnel-legend-label {
  font-weight: 500 !important;
  color: var(--ink-2) !important;
}

/* Right rail cards */
html body .dash-right .card h2,
html body .dash-right .card .card-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
html body .dash-right .card small,
html body .dash-right .card .card-head small {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  letter-spacing: -0.005em !important;
}

/* Activity items (New leads) */
html body .dash-right .activity-item a {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}
html body .dash-right .activity-item small {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  letter-spacing: -0.005em !important;
}

/* Filter pills (30D / 7D / 90D) */
html body .filter-pill {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}
html body .filter-pill.active {
  font-weight: 600 !important;
}

/* Empty state text */
html body .empty-title,
html body [class*="empty-title"] {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
html body .empty-subtitle,
html body [class*="empty-desc"] {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  letter-spacing: -0.005em !important;
}

/* Sidebar font pass */
html body .sidebar a,
html body .sidebar .nav-link,
html body .sidebar .nav-item {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}
html body .sidebar a.active,
html body .sidebar .nav-link.active {
  font-weight: 600 !important;
}
html body .sidebar .nav-section-title,
html body .sidebar h5,
html body .sidebar [class*="section-label"] {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
}

/* =========================================================================
   v21 - MAXIMUM specificity KPI + heading font override
   Prior v20 rules lost the specificity war. Chain more classes.
   ========================================================================= */

/* KPI card - sentence-case labels, tabular medium-weight numbers */
html body .dash-grid .dash-left .grid-4 .kpi .kpi-label,
html body .dash-grid .grid-4 .kpi .kpi-label,
html body .grid-4 .kpi .kpi-label,
html body .main-inner .kpi .kpi-label,
html body #mainWrap .kpi .kpi-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  color: var(--ink-2) !important;
  margin: 0 0 8px !important;
}
html body .dash-grid .kpi .kpi-label-dot,
html body .grid-4 .kpi .kpi-label-dot,
html body #mainWrap .kpi .kpi-label-dot {
  width: 6px !important;
  height: 6px !important;
  background: var(--violet) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

html body .dash-grid .dash-left .grid-4 .kpi .kpi-figure,
html body .dash-grid .grid-4 .kpi .kpi-figure,
html body .grid-4 .kpi .kpi-figure,
html body .main-inner .kpi .kpi-figure,
html body #mainWrap .kpi .kpi-figure {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 2rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: 'tnum', 'ss01', 'cv11' !important;
}

html body .dash-grid .kpi .kpi-delta-wrap,
html body .grid-4 .kpi .kpi-delta-wrap,
html body #mainWrap .kpi .kpi-delta-wrap {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin: 6px 0 0 !important;
}
html body .dash-grid .kpi .kd,
html body .grid-4 .kpi .kd,
html body #mainWrap .kpi .kd {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums !important;
}
html body .dash-grid .kpi .kdp,
html body .grid-4 .kpi .kdp,
html body #mainWrap .kpi .kdp {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  letter-spacing: -0.005em !important;
}

/* Also nuke the .kpi-card version (older selector) since it also had uppercase */
html body .kpi-card .kpi-label,
html body .stat-tile .label,
html body [class*="stat-tile"] > div:first-child:not(.value):not(.number),
html body [class*="kpi-card"] > div:first-child:not(.value):not(.number) {
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
  gap: 8px !important;
}
html body .kpi-card .kpi-label::before,
html body .stat-tile .label::before {
  width: 6px !important;
  height: 6px !important;
  content: "" !important;
  box-shadow: none !important;
}

/* Pipeline momentum */
html body .dash-left .dash-trend .dash-trend-head h2,
html body .dash-grid .dash-trend h2 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums !important;
}
html body .dash-left .dash-trend .kicker,
html body .dash-grid .dash-trend .kicker {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
}

/* Priority-actions in right rail */
html body .dash-right .dash-priority .pri-title,
html body .dash-grid .dash-priority .pri-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}
html body .dash-right .dash-priority .pri-sub,
html body .dash-grid .dash-priority .pri-sub {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  letter-spacing: -0.005em !important;
}
html body .dash-right .dash-priority .kicker,
html body .dash-grid .dash-priority .kicker {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
}

/* =========================================================================
   v22 - sidebar top-left cleanup
   ========================================================================= */

/* 1) Kill the accidental 8px green dot at top-left of R logo */
html body .sidebar .logo-mark::after,
html body .sidebar-header .logo-mark::after,
html body .logo-mark::after {
  display: none !important;
  content: none !important;
}

/* 2) Sidebar-header ::after rainbow gradient stripe - kill it (or make a subtle line) */
html body .sidebar-header::after,
html body .sidebar .sidebar-header::after {
  background: var(--line) !important;
  background-image: none !important;
  height: 1px !important;
}

/* 3) Sidebar-header beige border-bottom - grey */
html body .sidebar-header,
html body .sidebar .sidebar-header {
  border-bottom: 1px solid var(--line) !important;
  padding: 14px 12px !important;
}

/* 4) Company switcher / Viewing Context chip - kill peach gradient bg */
html body .sidebar .company-switcher,
html body .company-switcher {
  background: var(--violet-soft) !important;
  background-image: none !important;
  border: 1px solid #E4D5FF !important;
  border-radius: var(--r-md) !important;
  padding: 10px 12px !important;
  margin: 12px 8px !important;
  color: var(--violet-ink) !important;
  border-bottom: 1px solid #E4D5FF !important;
}
html body .sidebar .cs-label,
html body .company-switcher .cs-label {
  display: block !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--violet) !important;
  margin: 0 0 4px !important;
  opacity: 1 !important;
}
html body .sidebar .cs-value,
html body .company-switcher .cs-value,
html body .company-switcher > *:not(.cs-label):not(button):not(.company-switcher-menu) {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--violet-ink) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

/* 5) LIVE pill (sidebar-header::before) - keep visible but tuned */
html body .sidebar-header::before,
html body .sidebar .sidebar-header::before {
  background: var(--success-soft) !important;
  color: var(--success) !important;
  border: 1px solid #A7F3D0 !important;
  border-radius: var(--r-full) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 2px 8px !important;
  height: auto !important;
  line-height: 1.4 !important;
}

/* 6) Sidebar toggle button (top-right of header) - tighten */
html body .sidebar-toggle,
html body .sidebar .sidebar-toggle {
  color: var(--ink-3) !important;
  background: transparent !important;
  border: none !important;
  padding: 4px !important;
  cursor: pointer !important;
}
html body .sidebar-toggle:hover {
  color: var(--ink) !important;
  background: var(--bg-2) !important;
  border-radius: var(--r-sm) !important;
}

/* UIFIX-CHAT-COLORS - 20260906_020636 - override rebrand !important rules for chat widget header text */
html body .um-help-header, html body .um-help-header *,
html body .um-help-title, html body .um-help-sub,
html body .um-help-close, html body .um-help-close svg { color: #FFFFFF !important; }
html body .um-help-header svg { color: #FFFFFF !important; stroke: #FFFFFF !important; }/* UIFIX-STRIPPED-20260915_005053

html body .btn-primary, html body .um-btn-primary, html body button.btn-primary,
html body a.btn-primary, html body [class*=btn-primary],
html body [style*=background:#7C3AED], html body [style*=background: #7C3AED],
html body [style*=background:#6D28D9] { color: #FFFFFF !important; }
*/
html body .btn-primary *, html body .um-btn-primary * { color: #FFFFFF !important; }


/* UIFIX-NOTIF-DROP - 20260909_003226 - notifDrop was being clamped to 34px because parent #notifWrap is 36px wide and universal * { max-width:100% } cascades in. Break the clamp. */
html body #notifDrop { width: 340px !important; max-width: 92vw !important; box-sizing: border-box; }
html body #notifDrop * { max-width: none !important; }
html body #notifList { width: auto !important; max-width: none !important; }


/* UIFIX-EMPTY-CIRCLES - 20260915_004311 - hide broken empty stage-caption circles + empty hero-card blocks */
.stage-caption:empty { display: none !important; }
section > div:empty { display: none !important; }