/* ============================================================
   ui-refresh.css  —  additive UI refresh layer
   Loaded AFTER styles.css. FULLY REVERTIBLE: delete this file
   or remove its <link> tags to return to the prior look.
   styles.css is never modified.

   Toolbar: every control its OWN distinct color (flat, clean),
   coordinated at one saturation level so the variety looks
   intentional rather than random.
   ============================================================ */

:root {
  --ui-accent: #4f46e5;
  --ui-accent-hover: #4338ca;
  --ui-indigo-bg: #e0e7ff;
  --ui-indigo-text: #3730a3;
  --ui-indigo-border: #a5b4fc;
  --ui-indigo-hover: #c7d2fe;
  --ui-positive: #15803d;
}

/* --- Primary actions: flatten gradient + glow to one solid accent --- */
.contacts-topbar-add-btn,
.contacts-empty-state-btn--primary {
  background: var(--ui-accent) !important;
  border: 1px solid var(--ui-accent) !important;
  box-shadow: none !important;
  color: #ffffff !important;
}
.contacts-topbar-add-btn:hover,
.contacts-empty-state-btn--primary:hover {
  background: var(--ui-accent-hover) !important;
  border-color: var(--ui-accent-hover) !important;
  box-shadow: none !important;
}

/* --- AI Score: soft indigo --- */
.contacts-ai-score-btn {
  background: var(--ui-indigo-bg) !important;
  border: 1px solid var(--ui-indigo-border) !important;
  color: var(--ui-indigo-text) !important;
  box-shadow: none !important;
}
.contacts-ai-score-btn:hover {
  background: var(--ui-indigo-hover) !important;
  border-color: var(--ui-accent) !important;
}

/* --- AI score pill: top lead reads positive, not alarming --- */
.ai-score-pill--hot {
  background: var(--ui-positive) !important;
  color: #ffffff !important;
}

/* ============================================================
   Filter toolbar — each control a distinct, flat color.
   .filters.filter-toolbar #id (1,2,0) + !important to win.
   ============================================================ */

.filters.filter-toolbar #applyFiltersBtn { background:#4f46e5 !important; border:1px solid #4f46e5 !important; color:#fff !important; box-shadow:none !important; }
.filters.filter-toolbar #applyFiltersBtn:hover { background:#4338ca !important; border-color:#4338ca !important; }

.filters.filter-toolbar #statusFilter { background:#2563eb !important; border:1px solid #2563eb !important; color:#fff !important; box-shadow:none !important; }
.filters.filter-toolbar #statusFilter:hover { background:#1d4ed8 !important; border-color:#1d4ed8 !important; }

.filters.filter-toolbar #outcomeFilter { background:#0891b2 !important; border:1px solid #0891b2 !important; color:#fff !important; box-shadow:none !important; }
.filters.filter-toolbar #outcomeFilter:hover { background:#0e7490 !important; border-color:#0e7490 !important; }

.filters.filter-toolbar #contactsFilterSelect { background:#d97706 !important; border:1px solid #d97706 !important; color:#fff !important; box-shadow:none !important; }
.filters.filter-toolbar #contactsFilterSelect:hover { background:#b45309 !important; border-color:#b45309 !important; }

.filters.filter-toolbar #contactsTasksBtn { background:#16a34a !important; border:1px solid #16a34a !important; color:#fff !important; box-shadow:none !important; }
.filters.filter-toolbar #contactsTasksBtn:hover { background:#15803d !important; border-color:#15803d !important; }

.filters.filter-toolbar #downloadTemplateBtn { background:#7c3aed !important; border:1px solid #7c3aed !important; color:#fff !important; box-shadow:none !important; }
.filters.filter-toolbar #downloadTemplateBtn:hover { background:#6d28d9 !important; border-color:#6d28d9 !important; }

.filters.filter-toolbar #importCsvBtn { background:#e11d48 !important; border:1px solid #e11d48 !important; color:#fff !important; box-shadow:none !important; }
.filters.filter-toolbar #importCsvBtn:hover { background:#be123c !important; border-color:#be123c !important; }

.filters.filter-toolbar #clearSearchBtn { background:#64748b !important; border:1px solid #64748b !important; color:#fff !important; box-shadow:none !important; }
.filters.filter-toolbar #clearSearchBtn:hover { background:#475569 !important; border-color:#475569 !important; }

/* ============================================================
   Twilio call modal — stop Start/End buttons stretching full-width.
   ============================================================ */
.twilio-call-actions {
  justify-content: center !important;
}
.twilio-call-actions button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 140px !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
}

/* Contacts search input: keep the full placeholder visible and prevent the
   field from being clipped by its container (was getting cut off). */
.page-contacts-leads .filter-toolbar #searchInput,
.filter-toolbar #searchInput {
  flex: 1 1 260px !important;
  min-width: 240px !important;
  max-width: none !important;
  box-sizing: border-box !important;
  text-overflow: ellipsis !important;
}