/* ============================================================================
   Chatwoot White Label - CSS Customizado W3 Inova
   Cor primária: #ED1E79 (Rosa)
   Cor secundária: #F7931E (Laranja)
   
   NOTA: Logo e texto de login são manipulados via JavaScript (custom-branding.js)
   ============================================================================ */

/* ============================================================================
   1. BOTÕES - Cor primária rosa
   ============================================================================ */
.button,
.btn,
.button--primary,
.login-button,
button[type="submit"],
.primary-button,
.nice-button,
input[type="submit"],
.auth-button {
  background-color: #ED1E79 !important;
  border-color: #ED1E79 !important;
  color: white !important;
}

.button:hover,
.btn:hover,
.button--primary:hover,
.login-button:hover,
button[type="submit"]:hover {
  background-color: #C01862 !important;
  border-color: #C01862 !important;
}

.button:active,
.button--primary:active,
button[type="submit"]:active {
  background-color: #A0145A !important;
  border-color: #A0145A !important;
}

/* Botão específico do login */
.login-submit button,
.auth-submit button,
form button[type="submit"] {
  background-color: #ED1E79 !important;
  border-color: #ED1E79 !important;
}

/* ============================================================================
   3. CORES DE DESTAQUE (highlight, active, focus)
   ============================================================================ */

/* CORREÇÃO: Menu selecionado - evitar retângulo rosa cobrindo texto */
.active,
.selected,
.is-active,
.is-selected {
  background-color: rgba(237, 30, 121, 0.1) !important; /* Rosa com 10% opacidade */
  color: #ED1E79 !important; /* Texto rosa */
  border-left: 4px solid #ED1E79 !important; /* Borda esquerda rosa */
}

/* Itens de menu/navegação ativos */
.conversation-item.active,
.sidebar-item.active,
.nav-item.active,
.secondary-sidebar .menu-item.active,
.primary-sidebar__item.active {
  background-color: rgba(237, 30, 121, 0.15) !important; /* Rosa claro */
  color: #ED1E79 !important; /* Texto visível em rosa */
  border-left: 4px solid #ED1E79 !important;
}

/* Texto dentro de itens ativos deve ser visível */
.active span,
.active .label,
.is-active span,
.is-active .label,
.sidebar-item.active span {
  color: #ED1E79 !important; /* Garantir que texto seja visível */
  position: relative !important;
  z-index: 10 !important;
}

/* Links ativos */
a.active,
a:active,
.router-link-active {
  color: #ED1E79 !important;
}

/* Hover e focus */
.button:focus,
.btn:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: #ED1E79 !important;
  outline-color: #ED1E79 !important;
}

/* Sidebar quando clicado */
.sidebar-item:active,
.sidebar-item.is-active,
.secondary-menu__item.is-active {
  background-color: #ED1E79 !important;
  border-left-color: #ED1E79 !important;
}

/* ============================================================================
   4. ELEMENTOS DA INTERFACE
   ============================================================================ */
/* Badges */
.badge,
.badge--primary,
.label--primary {
  background-color: #ED1E79 !important;
}

/* Checkboxes e radio buttons */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: #ED1E79 !important;
  border-color: #ED1E79 !important;
}

/* Progress bars */
.progress-bar,
.progress-bar-fill {
  background-color: #ED1E79 !important;
}

/* Tabs ativos */
.tabs .tab.is-active,
.woot-tabs .tab.is-active {
  border-bottom-color: #ED1E79 !important;
  color: #ED1E79 !important;
}

/* ============================================================================
   5. WIDGET DE CHAT
   ============================================================================ */
.widget-bubble,
.chat-bubble,
.launcher {
  background-color: #ED1E79 !important;
}

/* ============================================================================
   6. CONVERSAS E MENSAGENS
   ============================================================================ */
.conversation-panel .user-thumbnail,
.conversation-panel .status-badge.online {
  border-color: #ED1E79 !important;
}

.message--incoming .bubble {
  background-color: #ED1E79 !important;
}

/* ============================================================================
   7. LOGO THUMBNAIL (sidebar superior esquerdo) - Usar PNG quadrado
   ============================================================================ */
.sidebar-header__logo img,
.sidebar__logo img,
.app-logo-sidebar img,
.logo--thumbnail img,
img[src*="logo_thumbnail"],
img[src*="logo.svg"],
img[src*="logo.png"] {
  content: url('/brand-assets/logo_thumbnail.png') !important;
  max-width: 40px !important;
  max-height: 40px !important;
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
}

/* Forçar logo thumbnail na sidebar */
.secondary-sidebar .logo img,
.sidebar .branding img,
.app-context-menu .logo img {
  content: url('/brand-assets/logo_thumbnail.png') !important;
  max-width: 40px !important;
  max-height: 40px !important;
}

/* ============================================================================
   8. CORREÇÕES DE CORES ESPECÍFICAS
   ============================================================================ */
/* Remover azul #2b8eff */
*[style*="#2b8eff"] {
  background-color: #ED1E79 !important;
}

/* Remover azul #086de0 */
*[style*="#086de0"] {
  background-color: #ED1E79 !important;
}

/* ============================================================================
   9. VARIÁVEIS CSS GLOBAIS (se o tema usar)
   ============================================================================ */
:root {
  --color-primary: #ED1E79 !important;
  --color-primary-dark: #C01862 !important;
  --color-primary-light: #F04D94 !important;
  --brand-color: #ED1E79 !important;
  --woot-color: #ED1E79 !important;
  --w-500: #ED1E79 !important;
  --w-600: #C01862 !important;
  --w-700: #A0145A !important;
}

/* ============================================================================
   10. SELETORES ESPECÍFICOS DO CHATWOOT v4.9.1
   ============================================================================ */
/* Login box */
.login-box__submit button {
  background: #ED1E79 !important;
}

/* Primárias da interface */
.woot-button.primary,
.woot-button--primary {
  background: #ED1E79 !important;
  border-color: #ED1E79 !important;
}

/* Dropdown ativo */
.dropdown-menu__item:active,
.dropdown-menu__item.is-active {
  background: #ED1E79 !important;
}


/* ========================================================================
==== 
   11. OCULTAR MENU COPILOT/IA (Capitão)
   ========================================================================
==== */
/* Ocultar menu Capitão (Copilot AI) pela estrutura */
nav[aria-label=\ Primary Navigation\] a[href*=\copilot\],
nav[aria-label=\Primary Navigation\] a[href*=\captain\],
.sidebar-item:has(a[href*=\copilot\]),
.sidebar-item:has(a[href*=\captain\]) {
  display: none !important;
}

/* Ocultar por texto (fallback) */
.text-sm.font-medium.leading-5.truncate:has-text(\Capitão\),
.text-sm.font-medium.leading-5.truncate:has-text(\Captain\),
.text-sm.font-medium.leading-5.truncate:has-text(\Copilot\) {
  display: none !important;
}

/* Ocultar item pai do menu */
li:has(a[href*=\copilot\]),
li:has(a[href*=\captain\]) {
  display: none !important;
}


/* Regras adicionais mais específicas para ocultar Copilot */
a[href=\ /app/accounts/1/copilot\],
a[href*=\/copilot\],
a[href*=\/captain\] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Ocultar por estrutura de navegação */
nav li:nth-child(n) > a[href*=\copilot\],
nav li:nth-child(n) > a[href*=\captain\] {
  display: none !important;
}

/* Container do item de menu */
.secondary-menu__item a[href*=\copilot\],
.secondary-menu__item a[href*=\captain\] {
  display: none !important;
}