/* CPDash SAC — tema visual do Chatwoot (22/09/2026).
   Injetado pelo nginx (sub_filter em </head>) em atendimento.cpdash.com.br. O Chatwoot 4.x pinta toda a marca
   com a rampa "blue" (variaveis --blue-1..12 / --text-blue / --solid-blue, estilo Radix, em RGB sem virgulas)
   e alguns restos legados "woot-*". Trocar a rampa pela rosa do CPDash (#E0106A) recolore botoes, links, abas,
   badges e estados ativos sem tocar no codigo do Chatwoot. Nada de !important fora das classes legadas. */

:root, .light, html:not(.dark) {
  --blue-1: 255 252 253;
  --blue-2: 255 247 250;
  --blue-3: 255 233 242;   /* #FFE9F2 rosa-tinta do v2 */
  --blue-4: 255 220 234;
  --blue-5: 254 205 224;
  --blue-6: 250 187 212;
  --blue-7: 244 160 195;
  --blue-8: 236 120 170;
  --blue-9: 224 16 106;    /* #E0106A marca */
  --blue-10: 204 10 96;
  --blue-11: 192 0 89;     /* #C00059 texto/links */
  --blue-12: 96 8 46;
  --text-blue: 192 0 89;
  --solid-blue: 224 16 106;
}
.dark {
  --blue-1: 28 12 20;
  --blue-2: 36 14 24;
  --blue-3: 56 16 34;
  --blue-4: 74 16 42;
  --blue-5: 92 18 52;
  --blue-6: 114 22 64;
  --blue-7: 146 28 82;
  --blue-8: 190 30 100;
  --blue-9: 224 16 106;
  --blue-10: 236 60 130;
  --blue-11: 255 120 170;
  --blue-12: 255 214 230;
  --text-blue: 255 120 170;
  --solid-blue: 224 16 106;
}

/* restos legados (Tailwind compilado, valor fixo #3b9eff) */
.bg-woot-500, .hover\:bg-woot-500:hover, .bg-woot-600 { background-color: #E0106A !important; }
.bg-woot-700, .hover\:bg-woot-700:hover { background-color: #C00059 !important; }
.bg-woot-25, .bg-woot-50 { background-color: #FFF6FA !important; }
.bg-woot-75, .bg-woot-100 { background-color: #FFE9F2 !important; }
.text-woot-500, .text-woot-600, .text-woot-700, .hover\:text-woot-500:hover { color: #C00059 !important; }
.border-woot-500, .border-woot-600, .focus\:border-woot-500:focus { border-color: #E0106A !important; }
.ring-woot-500, .focus\:ring-woot-500:focus { --tw-ring-color: #E0106A !important; }

/* botao primario legado (.button.primary / .button--primary) */
.button.primary, .button--primary, .btn-primary { background-color: #E0106A !important; border-color: #E0106A !important; }
.button.primary:hover, .button--primary:hover { background-color: #C00059 !important; border-color: #C00059 !important; }

/* foco de campos e selecao de texto no tom da marca */
input:focus, textarea:focus, select:focus { border-color: #E0106A !important; }
::selection { background: #FFE9F2; color: #17273E; }

/* classes "n-brand" e "text-link": cor FIXA (#2781f6) no Tailwind compilado, nao passam pela rampa */
.bg-n-brand, .hover\:bg-n-brand:hover, .focus\:bg-n-brand:focus { background-color: #E0106A !important; }
.bg-n-brand\/10 { background-color: rgba(224, 16, 106, .10) !important; }
.bg-n-brand\/5 { background-color: rgba(224, 16, 106, .05) !important; }
.border-n-brand, .border-t-n-brand, .hover\:border-n-brand:hover, .focus\:border-n-brand:focus { border-color: #E0106A !important; }
.outline-n-brand, .focus\:outline-n-brand:focus { outline-color: #E0106A !important; }
.ring-n-brand, .focus\:ring-n-brand:focus, .focus-visible\:ring-n-brand:focus-visible { --tw-ring-color: rgb(224 16 106 / var(--tw-ring-opacity, 1)) !important; }
.text-n-brand, .hover\:text-n-brand:hover, .text-link, .text-link:hover { color: #C00059 !important; }
.dark .text-n-brand, .dark .text-link { color: #FF78AA !important; }

/* ── sidebar navy (modo claro): a mesma barra lateral do CPDash v2 (#10233F). No escuro fica como esta. ── */
html:not(.dark) aside.fixed.bg-n-background { background-color: #10233F !important; border-color: #1B3459 !important; }
html:not(.dark) aside.fixed.bg-n-background .text-n-slate-12,
html:not(.dark) aside.fixed.bg-n-background .text-n-slate-11,
html:not(.dark) aside.fixed.bg-n-background .text-n-slate-10,
html:not(.dark) aside.fixed.bg-n-background .text-n-slate-9 { color: #DCE3EE !important; }
html:not(.dark) aside.fixed.bg-n-background .text-n-slate-11 { color: #C7D0DD !important; }
html:not(.dark) aside.fixed.bg-n-background .text-n-slate-10,
html:not(.dark) aside.fixed.bg-n-background .text-n-slate-9 { color: #9FB0C6 !important; }
html:not(.dark) aside.fixed.bg-n-background .bg-n-alpha-1,
html:not(.dark) aside.fixed.bg-n-background .bg-n-alpha-2,
html:not(.dark) aside.fixed.bg-n-background .bg-n-alpha-3,
html:not(.dark) aside.fixed.bg-n-background .hover\:bg-n-alpha-1:hover,
html:not(.dark) aside.fixed.bg-n-background .hover\:bg-n-alpha-2:hover,
html:not(.dark) aside.fixed.bg-n-background .bg-n-solid-1,
html:not(.dark) aside.fixed.bg-n-background .bg-n-solid-2,
html:not(.dark) aside.fixed.bg-n-background .bg-n-solid-3 { background-color: rgba(255, 255, 255, .08) !important; }
html:not(.dark) aside.fixed.bg-n-background .bg-n-alpha-2 { background-color: rgba(255, 255, 255, .12) !important; }
html:not(.dark) aside.fixed.bg-n-background .border-n-weak,
html:not(.dark) aside.fixed.bg-n-background .border-n-strong { border-color: rgba(255, 255, 255, .10) !important; }
html:not(.dark) aside.fixed.bg-n-background input,
html:not(.dark) aside.fixed.bg-n-background button.bg-n-alpha-2 { background-color: rgba(255, 255, 255, .08) !important; color: #FFFFFF !important; border-color: rgba(255, 255, 255, .12) !important; }
html:not(.dark) aside.fixed.bg-n-background input::placeholder { color: #8FA1B8 !important; }
html:not(.dark) aside.fixed.bg-n-background .text-n-brand { color: #FF78AA !important; }
/* caixa de busca e botao de editar (fundo branco fixo) + o degrade branco acima do rodape do usuario */
html:not(.dark) aside.fixed.bg-n-background .bg-white,
html:not(.dark) aside.fixed.bg-n-background [class*="bg-n-alpha-black"],
html:not(.dark) aside.fixed.bg-n-background [class*="bg-n-solid"] { background-color: rgba(255, 255, 255, .08) !important; color: #DCE3EE !important; }
html:not(.dark) aside.fixed.bg-n-background [class*="from-n-background"] { --tw-gradient-from: #10233F var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(16 35 63 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html:not(.dark) aside.fixed.bg-n-background [class*="to-n-background"] { --tw-gradient-to: #10233F var(--tw-gradient-to-position) !important; }
html:not(.dark) aside.fixed.bg-n-background svg { color: inherit; }
html:not(.dark) aside.fixed.bg-n-background .bg-n-brand\/10 { background-color: rgba(224, 16, 106, .25) !important; }