/* ====================================================================
   CL Executivas — Tema customizado para EVO CRM
   Paleta: navy escuro (logo) + azul mais claro (geral) + rosa pontual
   ==================================================================== */

:root {
  /* Paleta CL Executivas */
  --cl-navy:        #1F2C4F;   /* Navy escuro do logo — usado em sidebar, headers, detalhes */
  --cl-navy-50:     #F0F3F9;
  --cl-navy-100:    #DCE3EF;
  --cl-navy-200:    #B5C2DA;
  --cl-navy-300:    #8093B8;
  --cl-navy-400:    #4A6FA5;

  --cl-blue:        #4A7BC4;   /* Azul geral (cor primária do CRM) */
  --cl-blue-light:  #6B95D5;   /* Hover */
  --cl-blue-dark:   #2B5896;   /* Active/pressed */

  --cl-pink:        #E5B5C2;   /* Rosa accent — bem pontual (badges, notificações) */
  --cl-pink-dark:   #D6A4B0;
}

/* =========================
   GLOBAL — botões e estados primários
   ========================= */

/* Botão primário (Chatwoot/EVO usa .button.primary, .btn-primary, ou tailwind bg-woot-*) */
button.button--primary,
.button.primary,
.btn-primary,
button[type="submit"],
.action-button {
  background: var(--cl-blue) !important;
  border-color: var(--cl-blue) !important;
  color: #fff !important;
}
button.button--primary:hover,
.button.primary:hover,
.btn-primary:hover,
button[type="submit"]:hover,
.action-button:hover {
  background: var(--cl-blue-dark) !important;
  border-color: var(--cl-blue-dark) !important;
}

/* Links e textos com cor primária */
a.text-primary,
.text-link,
.text-link-hover:hover,
a:not(.button):not(.btn) {
  color: var(--cl-blue) !important;
}
a:not(.button):not(.btn):hover {
  color: var(--cl-blue-dark) !important;
}

/* =========================
   SIDEBAR — fundo navy
   ========================= */

aside.app-sidebar,
.app-sidebar,
.sidebar,
.primary-sidebar,
nav.menu-side-bar,
.main-menu-wrap,
.sidebar-wrap > nav {
  background: var(--cl-navy) !important;
  color: #E0E7F1 !important;
}

/* Itens de menu na sidebar */
.app-sidebar a,
.primary-sidebar a,
.menu-side-bar a,
.main-menu-wrap a {
  color: #C9D4E8 !important;
}
.app-sidebar a:hover,
.primary-sidebar a:hover,
.menu-side-bar a:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
}
/* Item ativo/selecionado */
.app-sidebar a.is-active,
.app-sidebar a.router-link-active,
.app-sidebar a.active,
nav .active,
nav .is-active {
  background: var(--cl-blue) !important;
  color: #fff !important;
}

/* Logo / brand area na sidebar */
.app-sidebar .logo,
.app-sidebar .brand-logo {
  filter: brightness(1.1) saturate(1.05);
}

/* =========================
   HEADER / NAVBAR superior
   ========================= */

header.header,
.app-header,
.page-header,
.top-bar {
  background: #fff !important;
  border-bottom: 1px solid var(--cl-navy-100) !important;
}

/* Tabs ativos no header */
.tabs .tabs-nav > li > a.active,
.tabs__item--active,
.nav-tabs .nav-item.active,
.tab-active {
  color: var(--cl-blue) !important;
  border-bottom-color: var(--cl-blue) !important;
}

/* =========================
   CONVERSATION LIST — item ativo
   ========================= */

.conversation--active,
.conversation.active,
.conversations-list-item.is-active,
li.active.conversation {
  background: var(--cl-navy-50) !important;
  border-left: 3px solid var(--cl-blue) !important;
}

/* Contador de mensagens não lidas */
.unread-count,
.badge--primary,
.badge.badge-primary,
span[class*="unread"] {
  background: var(--cl-pink) !important;
  color: var(--cl-navy) !important;
  font-weight: 600 !important;
}

/* =========================
   FORMULÁRIOS — focus state
   ========================= */

input:focus,
textarea:focus,
select:focus,
.input-wrap input:focus {
  border-color: var(--cl-blue) !important;
  box-shadow: 0 0 0 3px rgba(74, 123, 196, 0.15) !important;
}

/* Checkboxes/radios primários */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--cl-blue) !important;
  border-color: var(--cl-blue) !important;
  accent-color: var(--cl-blue) !important;
}

/* =========================
   TAGS / LABELS — visual mais polido
   ========================= */

.label,
.label-pill,
.tag,
[class*="label-color"] {
  border-radius: 6px !important;
  font-weight: 500 !important;
}

/* =========================
   BOTÕES SECUNDÁRIOS / ACTIONS
   ========================= */

button.button--secondary,
.button.secondary,
.btn-secondary {
  background: #fff !important;
  border: 1px solid var(--cl-navy-200) !important;
  color: var(--cl-navy) !important;
}
button.button--secondary:hover,
.button.secondary:hover,
.btn-secondary:hover {
  background: var(--cl-navy-50) !important;
  border-color: var(--cl-navy-300) !important;
}

/* =========================
   DETALHES — bordas e divisores
   ========================= */

.divider,
hr,
.border-soft {
  border-color: var(--cl-navy-100) !important;
}

/* =========================
   TYPOGRAPHY — fonte mais polida
   ========================= */

body, .app-wrapper {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* =========================
   AVATAR / INICIAIS — visual coeso
   ========================= */

.user-thumbnail,
.avatar-container,
.contact-avatar {
  background: linear-gradient(135deg, var(--cl-blue), var(--cl-navy)) !important;
  color: #fff !important;
}

/* =========================
   PIPELINE KANBAN — colunas
   ========================= */

.pipeline-stage,
.kanban-column,
[data-stage] {
  border-top: 3px solid var(--cl-navy-200);
}

/* =========================
   AJUSTES FINOS
   ========================= */

/* Cantos arredondados consistentes */
.modal-content,
.dropdown-menu,
.card,
.message-content {
  border-radius: 8px !important;
}

/* Dropdown ativo */
.dropdown-menu .item:hover,
.dropdown-menu .item.active {
  background: var(--cl-navy-50) !important;
  color: var(--cl-navy) !important;
}

/* Loading spinner cor */
.spinner-border,
.loading-spinner {
  border-color: var(--cl-blue) transparent var(--cl-blue) var(--cl-blue) !important;
}

/* ====================================================================

/* ====================================================================
   CL Executivas — OVERRIDE MAGENTA (2026-05-20)
   - Accent (antes azul #4A7BC4) -> magenta #e7446d
   - VERDE do Tailwind (tokens --color-green/emerald/teal-*, base #00c758) -> magenta
   - BRAND/primary do design-system (--primary, era verde hue~159) -> magenta
   - Logo vira texto "CL Executivas" em Playfair (ver cl-rebrand.js)
   Backup do original: /opt/cl-theme/cl-theme.css.bak-pre-magenta
   ==================================================================== */
:root {
  --cl-blue:#e7446d; --cl-blue-light:#ec6587; --cl-blue-dark:#cf3a64;

  /* Brand/primary do design-system (estava VERDE) -> magenta */
  --primary:#e7446d;
  --primary-foreground:#ffffff;

  /* Paleta VERDE do Tailwind -> ramp magenta */
  --color-green-50:#fdf2f5;  --color-green-100:#fbe3ea; --color-green-200:#f7c8d6;
  --color-green-300:#f1a3b9; --color-green-400:#ec7795; --color-green-500:#e7446d;
  --color-green-600:#cf3a64; --color-green-700:#ad2f53; --color-green-800:#8a2643;
  --color-green-900:#6b1e34; --color-green-950:#471320;

  --color-emerald-100:#fbe3ea; --color-emerald-200:#f7c8d6; --color-emerald-300:#f1a3b9;
  --color-emerald-400:#ec7795; --color-emerald-500:#e7446d; --color-emerald-600:#cf3a64;
  --color-emerald-700:#ad2f53; --color-emerald-900:#6b1e34; --color-emerald-950:#471320;

  --color-teal-100:#fbe3ea; --color-teal-500:#e7446d; --color-teal-600:#cf3a64;
  --color-teal-700:#ad2f53; --color-teal-950:#471320;
}
.dark { --primary:#ec6587; --primary-foreground:#ffffff; }

/* Variantes verdes com opacidade (hex inline #00c758 + alpha) -> magenta */
.bg-green-500\/10{background-color:#e7446d1a !important}
.bg-green-500\/20{background-color:#e7446d33 !important}
.bg-green-500\/30{background-color:#e7446d4d !important}
.bg-green-500\/40{background-color:#e7446d66 !important}
.border-green-500\/10{border-color:#e7446d1a !important}
.border-green-500\/20{border-color:#e7446d33 !important}
.border-green-500\/30{border-color:#e7446d4d !important}
.border-green-500\/40{border-color:#e7446d66 !important}
.ring-green-500\/20{--tw-ring-color:#e7446d33 !important}
.ring-green-500\/30{--tw-ring-color:#e7446d4d !important}

/* Logo em texto (Playfair) — injetado por cl-rebrand.js */
.cl-logo-text{
  font-family:'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-weight:800 !important;
  font-size:19px;
  line-height:1;
  letter-spacing:.2px;
  color:#e7446d;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
}

/* CL-MENU-SCROLL (2026-06-25): qualquer menu (dropdown/context + submenus de pipeline)
   rola em vez de cortar/exigir zoom-out. Independe do build JS (pega ate build antigo). */
[role="menu"],
[data-radix-menu-content]{
  max-height: 75vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}