/* ==========================================================================
   CCA Carregamentos — Tema visual para Chatwoot (v3.16+)
   --------------------------------------------------------------------------
   Injetado via nginx sub_filter (ver nginx.conf). Sobrescreve a cor de marca
   azul padrao do Chatwoot (#2781F6 / n-brand) pelo vermelho CCA (#E31E24) e
   refina a aparencia do dashboard de atendimento para uso como "workspace".

   NAO e um fork do Chatwoot: apenas overrides de CSS aplicados em runtime.
   Paleta oficial CCA:
     - Primaria  #E31E24  (cca-600)
     - Hover     #B91C1C  (cca-700)
     - Active    #991B1B  (cca-800)
   ========================================================================== */

:root {
  --cca-red: #e31e24;
  --cca-red-hover: #b91c1c;
  --cca-red-active: #991b1b;
  --cca-red-soft: rgba(227, 30, 36, 0.12);
  --cca-red-softer: rgba(227, 30, 36, 0.08);
  --cca-red-rgb: 227 30 36;

  /* Realinha o token de marca "next" usado pelo Tailwind do Chatwoot.
     Funciona para utilitarios que resolvem a marca via variavel. */
  --color-woot: var(--cca-red);
}

/* --------------------------------------------------------------------------
   Tipografia — garante Inter (ja e a fonte padrao do Chatwoot, reforcado)
   -------------------------------------------------------------------------- */
html,
body,
#app {
  font-family:
    "Inter",
    -apple-system,
    system-ui,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif !important;
}

/* --------------------------------------------------------------------------
   COR DE MARCA — fundo solido (botoes primarios, badges, abas ativas, etc.)
   -------------------------------------------------------------------------- */
[class*="bg-n-brand"]:not([class*="/"]),
.bg-woot-500,
.bg-woot-600 {
  background-color: var(--cca-red) !important;
}

[class*="hover\\:bg-n-brand"]:hover,
.hover\:bg-woot-600:hover {
  background-color: var(--cca-red-hover) !important;
}

/* fundos sutis (alpha) da marca -> vermelho translucido */
[class*="bg-n-brand/"],
[class*="bg-n-brand\\/"] {
  background-color: var(--cca-red-soft) !important;
}

/* --------------------------------------------------------------------------
   COR DE MARCA — texto, bordas, outline, ring, fill (SVG), loaders
   -------------------------------------------------------------------------- */
[class*="text-n-brand"],
.text-woot-500,
a.text-link {
  color: var(--cca-red) !important;
}

[class*="border-n-brand"] {
  border-color: var(--cca-red) !important;
}

[class*="outline-n-brand"] {
  outline-color: var(--cca-red) !important;
}

[class*="ring-n-brand"] {
  --tw-ring-color: var(--cca-red) !important;
}

[class*="fill-n-brand"] {
  fill: var(--cca-red) !important;
}

/* spinner / loader que usa a marca */
[class*="border-t-n-brand"] {
  border-top-color: var(--cca-red) !important;
}

/* --------------------------------------------------------------------------
   Botoes primarios — micro-interacoes mais firmes
   -------------------------------------------------------------------------- */
button[class*="bg-n-brand"],
.button.primary,
.button.nice {
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;
  font-weight: 560;
}

button[class*="bg-n-brand"]:hover {
  box-shadow: 0 2px 12px rgba(227, 30, 36, 0.28);
}

button[class*="bg-n-brand"]:active {
  background-color: var(--cca-red-active) !important;
  transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   Sidebar primaria (icones de navegacao) — destaque do item ativo em CCA
   -------------------------------------------------------------------------- */
.secondary-menu .active-view,
nav a[aria-current="page"],
nav a.active {
  position: relative;
}

/* indicador lateral vermelho no item ativo da navegacao */
nav a[aria-current="page"]::before,
.secondary-menu a.active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 3px 3px 0;
  background: var(--cca-red);
}

/* --------------------------------------------------------------------------
   Lista de conversas — item selecionado com leve realce CCA
   -------------------------------------------------------------------------- */
.conversation.active,
.conversation[class*="bg-n-"][class*="active"] {
  box-shadow: inset 3px 0 0 0 var(--cca-red);
}

/* contadores / unread badges */
.unread-count,
[class*="bg-n-brand"].rounded-full {
  background-color: var(--cca-red) !important;
}

/* --------------------------------------------------------------------------
   Cards / paineis — cantos e profundidade mais agradaveis no dark
   -------------------------------------------------------------------------- */
.card,
[class*="rounded-xl"][class*="bg-n-solid"],
[class*="rounded-lg"][class*="bg-n-solid"] {
  border-radius: 12px;
}

/* --------------------------------------------------------------------------
   Links e foco — acessibilidade com a cor da marca
   -------------------------------------------------------------------------- */
*:focus-visible {
  outline-color: var(--cca-red) !important;
}

::selection {
  background: var(--cca-red-soft);
}

/* barra de progresso superior (carregamento de rotas) */
#nprogress .bar {
  background: var(--cca-red) !important;
}
#nprogress .peg {
  box-shadow:
    0 0 10px var(--cca-red),
    0 0 5px var(--cca-red) !important;
}

/* --------------------------------------------------------------------------
   Scrollbar discreta no tema escuro
   -------------------------------------------------------------------------- */
.dark ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--cca-red-hover);
}

/* --------------------------------------------------------------------------
   Tela de login — branding CCA
   -------------------------------------------------------------------------- */
.login,
.auth-wrapper {
  background-image: radial-gradient(
    1200px circle at 50% -10%,
    rgba(227, 30, 36, 0.12),
    transparent 45%
  );
}

/* ==========================================================================
   REFINAMENTOS v2 — caça aos azuis remanescentes + acabamento "workspace"
   ========================================================================== */

/* --------------------------------------------------------------------------
   Paleta legada "woot-*" (Chatwoot ainda usa em varios componentes)
   Cobre toda a escala 25..900 para bg / text / border / ring / fill / stroke.
   -------------------------------------------------------------------------- */
[class*="bg-woot-"]:not([class*="bg-woot-25"]):not([class*="bg-woot-50"]):not([class*="bg-woot-75"]):not([class*="bg-woot-100"]):not([class*="bg-woot-200"]) {
  background-color: var(--cca-red) !important;
}
[class*="bg-woot-25"],
[class*="bg-woot-50"],
[class*="bg-woot-75"],
[class*="bg-woot-100"],
[class*="bg-woot-200"] {
  background-color: var(--cca-red-soft) !important;
}
[class*="text-woot-"] {
  color: var(--cca-red) !important;
}
[class*="border-woot-"] {
  border-color: var(--cca-red) !important;
}
[class*="ring-woot-"] {
  --tw-ring-color: var(--cca-red) !important;
}
[class*="fill-woot-"] {
  fill: var(--cca-red) !important;
}
[class*="stroke-woot-"],
[class*="stroke-n-brand"] {
  stroke: var(--cca-red) !important;
}

/* hover/focus legados */
[class*="hover\\:text-woot-"]:hover {
  color: var(--cca-red-hover) !important;
}
[class*="hover\\:bg-woot-"]:hover {
  background-color: var(--cca-red-hover) !important;
}

/* --------------------------------------------------------------------------
   Abas (Minha / Nao atribuida / Todos) — sublinhado + rotulo ativos em CCA
   -------------------------------------------------------------------------- */
.tabs-title a.active,
.tabs-title.is-active a,
button[role="tab"][aria-selected="true"],
a[role="tab"][aria-selected="true"] {
  color: var(--cca-red) !important;
}

/* barra inferior da aba ativa */
.tabs-title a.active::after,
button[role="tab"][aria-selected="true"]::after {
  background-color: var(--cca-red) !important;
}
[class*="border-b-"][class*="n-brand"],
[class*="border-b-"][class*="woot"] {
  border-bottom-color: var(--cca-red) !important;
}

/* contadores ao lado das abas quando ativos */
[role="tab"][aria-selected="true"] [class*="bg-n-"],
.tabs-title.is-active [class*="bg-n-"] {
  background-color: var(--cca-red) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   Inputs / textarea / select — borda e ring de foco vermelhos
   -------------------------------------------------------------------------- */
input:focus,
textarea:focus,
select:focus,
[contenteditable="true"]:focus,
.ProseMirror:focus {
  outline-color: var(--cca-red) !important;
  border-color: var(--cca-red) !important;
  box-shadow: 0 0 0 1px var(--cca-red) !important;
}

/* checkbox / radio marcados */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: var(--cca-red);
}

/* --------------------------------------------------------------------------
   Toggles / switches ativos
   -------------------------------------------------------------------------- */
[role="switch"][aria-checked="true"],
.toggle-button.active,
input[type="checkbox"][class*="toggle"]:checked + * {
  background-color: var(--cca-red) !important;
}

/* --------------------------------------------------------------------------
   Lista de conversas — hover e item ativo mais nitidos
   -------------------------------------------------------------------------- */
.conversation:hover {
  background-color: var(--cca-red-softer) !important;
}
.conversation.active {
  background-color: var(--cca-red-soft) !important;
  box-shadow: inset 3px 0 0 0 var(--cca-red);
}

/* nome do contato no item ativo */
.conversation.active .conversation--user {
  color: var(--cca-red) !important;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Bolha de mensagem enviada pelo agente — identidade CCA
   -------------------------------------------------------------------------- */
.bubble.is-from-agent,
.message-text--metadata + .bubble,
[class*="bubble"][class*="agent"] {
  background-color: var(--cca-red) !important;
  color: #fff !important;
}
.bubble.is-from-agent a {
  color: #fff !important;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Cabecalho da sidebar primaria — leve gradiente CCA atras do logo
   -------------------------------------------------------------------------- */
.app-sidebar,
[class*="secondary-menu"] {
  background-image: linear-gradient(
    180deg,
    var(--cca-red-softer) 0%,
    transparent 120px
  );
}

/* --------------------------------------------------------------------------
   Banner de atualizacao do Chatwoot — discreto, fora do caminho
   -------------------------------------------------------------------------- */
.update-banner,
[class*="woot-banner"] {
  background-color: var(--cca-red) !important;
  border: none !important;
}

/* --------------------------------------------------------------------------
   Avatares sem foto — fundo CCA padrao (identidade consistente)
   Aplica so ao avatar-fallback do usuario logado/sistema, nao aos contatos.
   -------------------------------------------------------------------------- */
.user-thumbnail .user-thumbnail__text,
[class*="current-user"] [class*="avatar"] {
  background-color: var(--cca-red) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   Links gerais e botoes de texto
   -------------------------------------------------------------------------- */
a:not(.button):hover {
  color: var(--cca-red-hover);
}

/* dropdown / menu — item ativo */
.dropdown-menu__item.active,
[role="menuitem"][aria-selected="true"] {
  color: var(--cca-red) !important;
}

/* --------------------------------------------------------------------------
   Tooltips e popovers — acento CCA na borda superior
   -------------------------------------------------------------------------- */
.v-popper--theme-tooltip .v-popper__inner {
  border-top: 2px solid var(--cca-red);
}