/* ====================================================================
   WCT - Centro de Treinamento — Tema customizado para EVO CRM v1.0.0
   Paleta: BRANCO predominante · PRETO (sidebar/texto) · VERMELHO (logo)
   Vermelho da logo: degradê #ED1B24 -> #8E1013
   ==================================================================== */

/* :root:root vence por ESPECIFICIDADE os chunks CSS lazy-loaded do Vite que
   redeclaram :root{--primary: oklch(verde)} DEPOIS deste arquivo (Tailwind v4;
   ordem de carga não é confiável — especificidade é). */
:root:root {
  --wct-red:        #E31E26;   /* vermelho da logo */
  --wct-red-light:  #EA4A44;   /* hover claro (puxa pro laranja, não pro rosa) */
  --wct-red-dark:   #B7151C;   /* hover/active */
  --wct-red-darker: #8E1013;   /* pressed / fim do degradê */
  --wct-black:      #111111;   /* sidebar / headings */
  --wct-gray-900:   #1A1A1A;
  --wct-gray-100:   #ECECEC;
  --wct-gray-50:    #F7F7F7;

  /* Brand/primary do design-system (verde por padrão) -> vermelho WCT */
  --primary: #E31E26;
  --primary-foreground: #ffffff;

  /* Rampa VERDE do Tailwind -> WCT: claros NEUTROS (nada de rosa pastel),
     médios/escuros em vermelho firme */
  --color-green-50:#FAFAFA;  --color-green-100:#F4F4F4; --color-green-200:#E9E9E9;
  --color-green-300:#F07B72; --color-green-400:#EA4A44; --color-green-500:#E31E26;
  --color-green-600:#C4161D; --color-green-700:#A11218; --color-green-800:#7E0E13;
  --color-green-900:#5C0A0E; --color-green-950:#3B0608;

  --color-emerald-100:#F4F4F4; --color-emerald-200:#E9E9E9; --color-emerald-300:#F07B72;
  --color-emerald-400:#EA4A44; --color-emerald-500:#E31E26; --color-emerald-600:#C4161D;
  --color-emerald-700:#A11218; --color-emerald-900:#5C0A0E; --color-emerald-950:#3B0608;

  --color-teal-50:#FAFAFA; --color-teal-100:#F4F4F4; --color-teal-200:#E9E9E9;
  --color-teal-500:#E31E26; --color-teal-600:#C4161D;
  --color-teal-700:#A11218; --color-teal-950:#3B0608;
}
:root.dark, html .dark { --primary:#F0483E; --primary-foreground:#ffffff; }

/* Variantes com cor VERDE compilada inline (#00c758 + alpha) no bundle —
   prefixo html eleva a especificidade acima das classes utilitárias */
html .bg-green-500\/5{background-color:#E31E260d !important}
html .bg-green-500\/10{background-color:#E31E261a !important}
html .bg-green-500\/20{background-color:#E31E2633 !important}
html .bg-green-500\/30{background-color:#E31E264d !important}
html .bg-green-500\/40{background-color:#E31E2666 !important}
html .border-green-500\/10{border-color:#E31E261a !important}
html .border-green-500\/20{border-color:#E31E2633 !important}
html .border-green-500\/30{border-color:#E31E264d !important}
html .border-green-500\/40{border-color:#E31E2666 !important}
html .from-green-500\/10{--tw-gradient-from:#E31E261a !important}
html .ring-green-500\/20{--tw-ring-color:#E31E2633 !important}
html .ring-green-500\/30{--tw-ring-color:#E31E264d !important}
html .ring-green-500\/40{--tw-ring-color:#E31E2666 !important}
html .outline-green-500\/30{outline-color:#E31E264d !important}

/* Utilitárias verdes sólidas (usam var — cobertas — mas garantimos com especificidade) */
html .bg-green-500, html .bg-emerald-500, html .bg-green-600, html .bg-emerald-600 {
  background-color: var(--wct-red) !important;
}
html .text-green-500, html .text-emerald-500, html .text-green-600, html .text-emerald-600 {
  color: var(--wct-red) !important;
}
html .bg-primary { background-color: var(--wct-red) !important; }
html .text-primary { color: var(--wct-red) !important; }

/* =========================
   GLOBAL — botões primários
   ========================= */
button.button--primary,
.button.primary,
.btn-primary,
button[type="submit"],
.action-button {
  background: var(--wct-red) !important;
  border-color: var(--wct-red) !important;
  color: #fff !important;
}
button.button--primary:hover,
.button.primary:hover,
.btn-primary:hover,
button[type="submit"]:hover,
.action-button:hover {
  background: var(--wct-red-dark) !important;
  border-color: var(--wct-red-dark) !important;
}

/* Links */
a.text-primary,
.text-link,
.text-link-hover:hover {
  color: var(--wct-red) !important;
}

/* =========================
   SIDEBAR — fundo preto
   ========================= */
aside.app-sidebar,
.app-sidebar,
.sidebar,
.primary-sidebar,
nav.menu-side-bar,
.main-menu-wrap,
.sidebar-wrap > nav {
  background: var(--wct-black) !important;
  color: #EDEDED !important;
}
.app-sidebar a,
.primary-sidebar a,
.menu-side-bar a,
.main-menu-wrap a {
  color: #C9C9C9 !important;
}
.app-sidebar a:hover,
.primary-sidebar a:hover,
.menu-side-bar a:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}
.app-sidebar a.is-active,
.app-sidebar a.router-link-active,
.app-sidebar a.active,
nav .active,
nav .is-active {
  background: var(--wct-red) !important;
  color: #fff !important;
}

/* =========================
   HEADER — branco limpo
   ========================= */
header.header,
.app-header,
.page-header,
.top-bar {
  background: #fff !important;
  border-bottom: 1px solid var(--wct-gray-100) !important;
}
.tabs .tabs-nav > li > a.active,
.tabs__item--active,
.nav-tabs .nav-item.active,
.tab-active {
  color: var(--wct-red) !important;
  border-bottom-color: var(--wct-red) !important;
}

/* =========================
   LISTA DE CONVERSAS
   ========================= */
.conversation--active,
.conversation.active,
.conversations-list-item.is-active,
li.active.conversation {
  background: var(--wct-gray-50) !important;
  border-left: 3px solid var(--wct-red) !important;
}
.unread-count,
.badge--primary,
.badge.badge-primary,
span[class*="unread"] {
  background: var(--wct-red) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* =========================
   FORMULÁRIOS
   ========================= */
input:focus,
textarea:focus,
select:focus,
.input-wrap input:focus {
  border-color: var(--wct-red) !important;
  box-shadow: 0 0 0 3px rgba(227, 30, 38, 0.15) !important;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--wct-red) !important;
  border-color: var(--wct-red) !important;
  accent-color: var(--wct-red) !important;
}

/* =========================
   BOTÕES SECUNDÁRIOS
   ========================= */
button.button--secondary,
.button.secondary,
.btn-secondary {
  background: #fff !important;
  border: 1px solid #D4D4D4 !important;
  color: var(--wct-gray-900) !important;
}
button.button--secondary:hover,
.button.secondary:hover,
.btn-secondary:hover {
  background: var(--wct-gray-50) !important;
  border-color: #ABABAB !important;
}

/* =========================
   AVATARES — degradê da logo
   ========================= */
.user-thumbnail,
.avatar-container,
.contact-avatar {
  background: linear-gradient(135deg, #ED1B24, #8E1013) !important;
  color: #fff !important;
}

/* =========================
   DETALHES
   ========================= */
.divider, hr, .border-soft { border-color: var(--wct-gray-100) !important; }
.modal-content, .dropdown-menu, .card, .message-content { border-radius: 8px !important; }
.dropdown-menu .item:hover,
.dropdown-menu .item.active {
  background: var(--wct-gray-50) !important;
  color: var(--wct-gray-900) !important;
}
.spinner-border,
.loading-spinner {
  border-color: var(--wct-red) transparent var(--wct-red) var(--wct-red) !important;
}
.pipeline-stage, .kanban-column, [data-stage] { border-top: 3px solid var(--wct-red); }

/* Logo injetada pelo wct-rebrand.js — tamanho por contexto */
img.wct-logo {
  width: auto !important;
  object-fit: contain;
}
img.wct-logo-nav {
  max-height: 34px !important;
}
img.wct-logo-hero {
  height: 72px !important;
  max-height: 72px !important;
  max-width: 100%;
}

/* Menus roláveis (herdado do fix CL-MENU-SCROLL) */
[role="menu"],
[data-radix-menu-content]{
  max-height: 75vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}