/* Dark mode da Central — overrides da paleta Tailwind (slate/white) sob html.dark.
   Especificidade html.dark .x (0,2,1) vence as utilities .x (0,1,0), independente da ordem.
   Tudo em @media screen pra NÃO afetar a impressão (proposta/contrato saem em folha branca). */
@media screen {
  /* Paleta NEUTRA (cinza/preto Cowmed), sem azul. */
  html.dark body { background-color: #141414; color: #e6e6e6; }

  /* fundos */
  html.dark .bg-slate-100 { background-color: #141414; }
  html.dark .bg-white     { background-color: #202020; }
  html.dark .bg-slate-50  { background-color: #2a2a2a; }

  /* bordas (default do preflight + classes explícitas) */
  html.dark *, html.dark ::before, html.dark ::after { border-color: #383838; }
  html.dark .border-slate-200 { border-color: #383838; }
  html.dark .border-slate-300 { border-color: #4a4a4a; }

  /* textos (cinzas neutros) */
  html.dark .text-slate-900 { color: #f4f4f5; }
  html.dark .text-slate-800 { color: #e8e8e8; }
  html.dark .text-slate-700 { color: #dcdcdc; }
  html.dark .text-slate-600 { color: #c2c2c2; }
  html.dark .text-slate-500 { color: #9c9c9c; }
  html.dark .text-slate-400 { color: #808080; }

  /* links / acentos verdes Cowmed (claros pra ler no escuro) */
  html.dark .text-emerald-700 { color: #93c5fd; }
  html.dark .text-emerald-600 { color: #93c5fd; }
  html.dark .text-red-600 { color: #f87171; }
  html.dark .text-red-700 { color: #f87171; }
  html.dark .text-amber-700 { color: #fbbf24; }

  /* tints "-50" (semáforo de metas, avisos) escurecidos p/ não ficar claro-no-claro no dark */
  html.dark .bg-emerald-50 { background-color: #172554; }
  html.dark .bg-amber-50   { background-color: #3a2e12; }
  html.dark .bg-red-50     { background-color: #3a1f1f; }

  /* botões verdes: verde mais profundo no escuro p/ o texto branco ficar legível e o botão "saltar" */
  html.dark .bg-emerald-600 { background-color: #2563eb; }
  html.dark .hover\:bg-emerald-700:hover { background-color: #3b82f6; }
  html.dark .bg-emerald-700 { background-color: #1d4ed8; }

  /* botões/abas escuros (bg-slate-900 some no fundo escuro) -> cinza neutro */
  html.dark .bg-slate-900 { background-color: #3a3a3a; }
  html.dark .hover\:bg-slate-700:hover { background-color: #505050; }
  html.dark .hover\:bg-slate-100:hover { background-color: #2e2e2e; }
  html.dark .hover\:bg-slate-50:hover  { background-color: #262626; }

  /* campos de formulário */
  html.dark input, html.dark select, html.dark textarea {
    background-color: #1a1a1a !important; color: #ededed; border-color: #4a4a4a;
  }
  html.dark input::placeholder, html.dark textarea::placeholder { color: #7a7a7a; }
  html.dark select option { background-color: #202020; color: #ededed; }
}

/* ============================================================================
   Dark mode — cobertura estendida (2026-07-11). Mesmo mecanismo de override por
   especificidade (html.dark .classe vence a utility). Fecha o gap: neutros slate
   que faltavam, chips semânticos coloridos (mapas de status/prioridade/tag do
   Marketing/CRM/Propostas) e as superfícies de gráfico (SVG/inline) via variáveis.
   Tudo sob @media screen → impressão continua em folha branca.
   NÃO sobrescreve: .text-white, .bg-black (overlays), .text-emerald-400 (sidebar
   é sempre escura), nem os sólidos -400/-500 (dots/strips/pílulas leem no escuro).
   ============================================================================ */
@media screen {
  /* --- Neutros slate que faltavam --- */
  html.dark .bg-slate-200 { background-color: #2e2e2e; }
  html.dark .bg-slate-300 { background-color: #3a3a3a; }
  html.dark .bg-slate-400 { background-color: #52525b; }
  html.dark .bg-slate-800 { background-color: #454545; }
  html.dark .text-slate-300 { color: #6b7280; }
  html.dark .border-slate-100 { border-color: #2e2e2e; }
  html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #2e2e2e; }
  html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #383838; }
  html.dark .hover\:bg-white:hover     { background-color: #262626; }
  html.dark .hover\:bg-slate-900:hover { background-color: #3a3a3a; }
  html.dark .hover\:bg-slate-200:hover { background-color: #303030; }
  html.dark .hover\:text-slate-900:hover { color: #f4f4f5; }
  html.dark .hover\:text-slate-800:hover { color: #e8e8e8; }
  html.dark .hover\:text-slate-700:hover { color: #dcdcdc; }
  html.dark .hover\:text-slate-600:hover { color: #c2c2c2; }
  html.dark .hover\:border-slate-200:hover { border-color: #4a4a4a; }
  html.dark .hover\:border-slate-300:hover { border-color: #545454; }

  /* --- Chips semânticos coloridos ---
     Por família: bg-50/-100 → tint escuro; text-600..900 → tom claro legível;
     border-100/200/300 → borda escurecida; hover bg-50/100 → tint. Sólidos
     -400/-500 ficam como estão (texto neles é branco, não sobrescrito). */

  /* blue */
  html.dark .bg-blue-50 { background-color: #14263a; }
  html.dark .bg-blue-100 { background-color: #16263a; }
  html.dark .text-blue-600, html.dark .text-blue-700 { color: #7fb2e6; }
  html.dark .text-blue-800, html.dark .text-blue-900 { color: #9cc4ee; }
  html.dark .border-blue-100 { border-color: #1e3a56; }
  html.dark .border-blue-200, html.dark .border-blue-300 { border-color: #244a6b; }
  html.dark .hover\:bg-blue-50:hover, html.dark .hover\:bg-blue-100:hover { background-color: #1b3350; }

  /* sky */
  html.dark .bg-sky-50 { background-color: #0e2431; }
  html.dark .bg-sky-100 { background-color: #102a38; }
  html.dark .text-sky-600, html.dark .text-sky-700 { color: #6cc5e6; }
  html.dark .text-sky-800, html.dark .text-sky-900 { color: #8ad3ee; }
  html.dark .border-sky-100 { border-color: #163444; }
  html.dark .border-sky-200, html.dark .border-sky-300 { border-color: #1c4258; }
  html.dark .hover\:bg-sky-50:hover, html.dark .hover\:bg-sky-100:hover { background-color: #143a4d; }

  /* cyan */
  html.dark .bg-cyan-50 { background-color: #0d2a2e; }
  html.dark .bg-cyan-100 { background-color: #103237; }
  html.dark .text-cyan-600, html.dark .text-cyan-700 { color: #5fd0dc; }
  html.dark .text-cyan-800, html.dark .text-cyan-900 { color: #83dbe5; }
  html.dark .border-cyan-100 { border-color: #164046; }
  html.dark .border-cyan-200, html.dark .border-cyan-300 { border-color: #1c4a52; }
  html.dark .hover\:bg-cyan-50:hover, html.dark .hover\:bg-cyan-100:hover { background-color: #144249; }

  /* teal */
  html.dark .bg-teal-50 { background-color: #0d2824; }
  html.dark .bg-teal-100 { background-color: #0f2e2a; }
  html.dark .text-teal-600, html.dark .text-teal-700 { color: #5ed6c0; }
  html.dark .text-teal-800, html.dark .text-teal-900 { color: #82e0ce; }
  html.dark .border-teal-100 { border-color: #163f39; }
  html.dark .border-teal-200, html.dark .border-teal-300 { border-color: #1c4d45; }
  html.dark .hover\:bg-teal-50:hover, html.dark .hover\:bg-teal-100:hover { background-color: #14413a; }

  /* indigo */
  html.dark .bg-indigo-50 { background-color: #1a1b33; }
  html.dark .bg-indigo-100 { background-color: #1e1f3a; }
  html.dark .text-indigo-600, html.dark .text-indigo-700 { color: #9ba3ec; }
  html.dark .text-indigo-800, html.dark .text-indigo-900 { color: #b3b9f1; }
  html.dark .border-indigo-100 { border-color: #2b2d55; }
  html.dark .border-indigo-200, html.dark .border-indigo-300 { border-color: #33356b; }
  html.dark .hover\:bg-indigo-50:hover, html.dark .hover\:bg-indigo-100:hover { background-color: #26284d; }

  /* violet */
  html.dark .bg-violet-50 { background-color: #201634; }
  html.dark .bg-violet-100 { background-color: #241a3a; }
  html.dark .text-violet-600, html.dark .text-violet-700 { color: #b39ae8; }
  html.dark .text-violet-800, html.dark .text-violet-900 { color: #c4b0ef; }
  html.dark .border-violet-100 { border-color: #32264f; }
  html.dark .border-violet-200, html.dark .border-violet-300 { border-color: #3a2d5c; }
  html.dark .hover\:bg-violet-50:hover, html.dark .hover\:bg-violet-100:hover { background-color: #2c2049; }

  /* purple */
  html.dark .bg-purple-50 { background-color: #241633; }
  html.dark .bg-purple-100 { background-color: #2a1a38; }
  html.dark .text-purple-600, html.dark .text-purple-700 { color: #c99ae8; }
  html.dark .text-purple-800, html.dark .text-purple-900 { color: #d5b0ef; }
  html.dark .border-purple-100 { border-color: #392350; }
  html.dark .border-purple-200, html.dark .border-purple-300 { border-color: #43285c; }
  html.dark .hover\:bg-purple-50:hover, html.dark .hover\:bg-purple-100:hover { background-color: #342049; }

  /* fuchsia */
  html.dark .bg-fuchsia-50 { background-color: #2e1330; }
  html.dark .bg-fuchsia-100 { background-color: #351638; }
  html.dark .text-fuchsia-600, html.dark .text-fuchsia-700 { color: #e88fe0; }
  html.dark .text-fuchsia-800, html.dark .text-fuchsia-900 { color: #efabe9; }
  html.dark .border-fuchsia-100 { border-color: #48214c; }
  html.dark .border-fuchsia-200, html.dark .border-fuchsia-300 { border-color: #55265a; }
  html.dark .hover\:bg-fuchsia-50:hover, html.dark .hover\:bg-fuchsia-100:hover { background-color: #401d44; }

  /* pink */
  html.dark .bg-pink-50 { background-color: #2f1622; }
  html.dark .bg-pink-100 { background-color: #38192a; }
  html.dark .text-pink-600, html.dark .text-pink-700 { color: #f08bb0; }
  html.dark .text-pink-800, html.dark .text-pink-900 { color: #f4a7c3; }
  html.dark .border-pink-100 { border-color: #4b2136; }
  html.dark .border-pink-200, html.dark .border-pink-300 { border-color: #5a2740; }
  html.dark .hover\:bg-pink-50:hover, html.dark .hover\:bg-pink-100:hover { background-color: #431e33; }

  /* rose */
  html.dark .bg-rose-50 { background-color: #331519; }
  html.dark .bg-rose-100 { background-color: #3a181d; }
  html.dark .text-rose-600, html.dark .text-rose-700 { color: #f2809a; }
  html.dark .text-rose-800, html.dark .text-rose-900 { color: #f6a1b4; }
  html.dark .border-rose-100 { border-color: #4d2029; }
  html.dark .border-rose-200, html.dark .border-rose-300 { border-color: #5c2733; }
  html.dark .hover\:bg-rose-50:hover, html.dark .hover\:bg-rose-100:hover { background-color: #451d24; }

  /* red (complementa o bloco base: já tem bg-50, text-600/700) */
  html.dark .bg-red-100 { background-color: #3f2323; }
  html.dark .text-red-500 { color: #f87171; }
  html.dark .text-red-800, html.dark .text-red-900 { color: #fca5a5; }
  html.dark .border-red-100 { border-color: #4d2a2a; }
  html.dark .border-red-200, html.dark .border-red-300 { border-color: #5c2e2e; }
  html.dark .border-red-600 { border-color: #7a3a3a; }
  html.dark .hover\:bg-red-50:hover, html.dark .hover\:bg-red-100:hover { background-color: #452626; }

  /* orange */
  html.dark .bg-orange-50 { background-color: #331c0e; }
  html.dark .bg-orange-100 { background-color: #3a2410; }
  html.dark .text-orange-600, html.dark .text-orange-700 { color: #f0a35e; }
  html.dark .text-orange-800, html.dark .text-orange-900 { color: #f4b982; }
  html.dark .border-orange-100 { border-color: #4d3016; }
  html.dark .border-orange-200, html.dark .border-orange-300 { border-color: #5c3a1a; }
  html.dark .hover\:bg-orange-50:hover, html.dark .hover\:bg-orange-100:hover { background-color: #452c14; }

  /* amber (complementa o bloco base: já tem bg-50, text-700) */
  html.dark .bg-amber-100 { background-color: #3f3216; }
  html.dark .text-amber-600 { color: #fbbf24; }
  html.dark .text-amber-800 { color: #fcd34d; }
  html.dark .text-amber-900 { color: #fcd34d; }
  html.dark .border-amber-100 { border-color: #4d3f1c; }
  html.dark .border-amber-200, html.dark .border-amber-300 { border-color: #5c4a1f; }
  html.dark .border-amber-500 { border-color: #7a611f; }
  html.dark .hover\:bg-amber-50:hover, html.dark .hover\:bg-amber-100:hover { background-color: #45391a; }
  /* Prioridade "Média": texto ESCURO sobre a pílula clara bg-amber-400 — mantém
     escuro no dark (compound vence html.dark .text-amber-900 por especificidade). */
  html.dark .bg-amber-400.text-amber-900 { color: #422006; }

  /* yellow */
  html.dark .bg-yellow-50 { background-color: #33300f; }
  html.dark .bg-yellow-100 { background-color: #3a3612; }
  html.dark .text-yellow-700, html.dark .text-yellow-800 { color: #e6d15a; }
  html.dark .border-yellow-100 { border-color: #4d481c; }
  html.dark .border-yellow-200, html.dark .border-yellow-300 { border-color: #5c5620; }
  html.dark .hover\:bg-yellow-50:hover, html.dark .hover\:bg-yellow-100:hover { background-color: #45411a; }

  /* lime */
  html.dark .bg-lime-50 { background-color: #22300f; }
  html.dark .bg-lime-100 { background-color: #283712; }
  html.dark .text-lime-600, html.dark .text-lime-700 { color: #a6d95e; }
  html.dark .text-lime-800, html.dark .text-lime-900 { color: #bce082; }
  html.dark .border-lime-100 { border-color: #38491c; }
  html.dark .border-lime-200, html.dark .border-lime-300 { border-color: #3f5620; }
  html.dark .hover\:bg-lime-50:hover, html.dark .hover\:bg-lime-100:hover { background-color: #33451a; }

  /* green */
  html.dark .bg-green-50 { background-color: #12330f; }
  html.dark .bg-green-100 { background-color: #163a12; }
  html.dark .text-green-600, html.dark .text-green-700 { color: #86d96a; }
  html.dark .text-green-800, html.dark .text-green-900 { color: #a4e28c; }
  html.dark .border-green-100 { border-color: #204d1a; }
  html.dark .border-green-200, html.dark .border-green-300 { border-color: #26521f; }
  html.dark .hover\:bg-green-50:hover, html.dark .hover\:bg-green-100:hover { background-color: #1c451a; }

  /* emerald (complementa o bloco base: já tem bg-50, bg-600/700, text-600/700) */
  html.dark .bg-emerald-100 { background-color: #24391b; }
  html.dark .text-emerald-500 { color: #93c5fd; }
  html.dark .text-emerald-800, html.dark .text-emerald-900 { color: #bce086; }
  html.dark .border-emerald-100 { border-color: #2c451f; }
  html.dark .border-emerald-200, html.dark .border-emerald-300 { border-color: #35521f; }
  html.dark .border-emerald-400 { border-color: #4a6f2a; }
  html.dark .border-emerald-500, html.dark .border-emerald-600 { border-color: #2563eb; }
  html.dark .hover\:bg-emerald-50:hover, html.dark .hover\:bg-emerald-100:hover { background-color: #24391b; }
  html.dark .hover\:border-emerald-300:hover, html.dark .hover\:border-emerald-400:hover,
  html.dark .hover\:border-emerald-500:hover { border-color: #2563eb; }

  /* ring de foco verde (inputs/botões) */
  html.dark .ring-emerald-300, html.dark .ring-emerald-400, html.dark .ring-emerald-500 { --tw-ring-color: #2563eb; }

  /* --- Gráficos (SVG/inline) via variáveis: scatter, treemap, KPI chip ---
     Consumidas com fallback no JSX: var(--x, #hexClaro). */
  :root {
    --chart-grid: #e2e8f0; --chart-axis: #94a3b8; --chart-danger: #fef2f2; --chart-dot-ring: #ffffff;
    --stage-novo_lead:#94a3b8; --stage-contato_feito:#0ea5e9; --stage-proposta_enviada:#f59e0b;
    --stage-em_negociacao:#8b5cf6; --stage-oc_gerada:#14b8a6; --stage-entrada_leads:#94a3b8;
    --stage-link_pagamento:#f59e0b; --stage-reativacao:#8b5cf6;
  }
  html.dark {
    --chart-grid: #383838; --chart-axis: #808080; --chart-danger: #3a1f1f; --chart-dot-ring: #202020;
    --stage-novo_lead:#aab6c4; --stage-contato_feito:#38b6f0; --stage-proposta_enviada:#f7b53d;
    --stage-em_negociacao:#a688f8; --stage-oc_gerada:#2fd4c0; --stage-entrada_leads:#aab6c4;
    --stage-link_pagamento:#f7b53d; --stage-reativacao:#a688f8;
  }
  /* Chip de ícone do KPI (Início) — cor da métrica composta sobre o card no dark. */
  .kpi-ico { background-color: color-mix(in srgb, var(--kc, #059669) 12%, transparent); }
  html.dark .kpi-ico { background-color: color-mix(in srgb, var(--kc, #059669) 26%, #202020); }
}

/* Botão flutuante de alternância (estilo em ambos os temas; escondido na impressão) */
.cc-theme-toggle {
  position: fixed; right: 14px; bottom: 14px; z-index: 50;
  width: 42px; height: 42px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; cursor: pointer;
  background: #fff; border: 1px solid #cbd5e1; box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
html.dark .cc-theme-toggle { background: #202020; border-color: #4a4a4a; }
@media print { .cc-theme-toggle { display: none !important; } }
/* No mobile, o bottom-nav (.cc-bnav) ocupa ~64px embaixo — empurra o toggle pra cima pra
   não sobrepor "Contratos"/o último item. Desktop continua em bottom:14px. */
@media (max-width: 768px) {
  .cc-theme-toggle { bottom: calc(78px + env(safe-area-inset-bottom, 0)); }
}

/* Inbox WhatsApp — tema de balões/fundo espelhando o WhatsApp Web real, com paleta
   compatível com light + dark. As classes sao prefixadas .wa-* pra nao colidir com
   o resto da Central. Aplicado em /whatsapp (#msgs + balões em addMsg/addPending). */
@media screen {
  .wa-chat-bg    { background-color: #EFEAE2; }
  .wa-bubble-out { background-color: #D9FDD3; color: #111B21; }
  .wa-bubble-in  { background-color: #FFFFFF; color: #111B21; }
  .wa-bubble-time-out, .wa-bubble-time-in { color: #667781; }
  .wa-quote-out  { background: rgba(0,0,0,.07);  border-left: 2px solid #06A064; color: #4A5568; }
  .wa-quote-in   { background: rgba(0,0,0,.045); border-left: 2px solid #06A064; color: #4A5568; }
  /* "rabinho" — tail visual: canto inferior do lado do remetente menos arredondado.
     Aplicado por classe pra coexistir com rounded-2xl do bloco principal. */
  .wa-tail-out   { border-bottom-right-radius: 4px; }
  .wa-tail-in    { border-bottom-left-radius:  4px; }

  html.dark .wa-chat-bg    { background-color: #0B141A; }
  html.dark .wa-bubble-out { background-color: #005C4B; color: #E9EDEF; }
  html.dark .wa-bubble-in  { background-color: #202C33; color: #E9EDEF; }
  html.dark .wa-bubble-time-out, html.dark .wa-bubble-time-in { color: #8696A0; }
  html.dark .wa-quote-out  { background: rgba(255,255,255,.10); border-left-color: #00A884; color: #D1D7DB; }
  html.dark .wa-quote-in   { background: rgba(255,255,255,.07); border-left-color: #00A884; color: #D1D7DB; }
}