/* Overrides do modo escuro extraidos do globals.css.
   Fica em /public de proposito: arquivos aqui o Next.js serve sem
   processar/minificar, evitando um bug do pipeline de build que
   corrompia regras condicionadas a [data-theme="dark"] (apagava a
   condicao de uma das regras quando o mesmo seletor aparecia em mais
   de um lugar do arquivo). Ver app/layout.tsx: <link> pra este arquivo. */

:root[data-theme="dark"] {
  --bg: #0d1117;
  --surface: #161b22;
  --border: #30363d;
  --text: #c9d1d9;
  --muted: #8b949e;
  --black: #1f6feb;
  --danger: #f85149;
  --success: #3fb950;
  --vermelho: #ff7b72;
  --vermelho-fundo: rgba(248, 81, 73, 0.12);
  --shadow: 0 8px 24px rgba(1, 4, 9, 0.6);
  /* Mockup do WhatsApp em Marketing > Redes Sociais > WhatsApp: cores do
     próprio tema escuro do WhatsApp (bolha de legenda e fundo de mídia). */
  --wa-bubble: #202c33;
  --wa-midia: #0b141a;
  /* Pares dos tokens "soft" de app/globals.css (chip/aviso/sucesso/erro) —
     mesma técnica já usada em .sup-alert-warn logo abaixo (color-mix sobre
     --surface), só que como token reaproveitável em vez de regra pontual. */
  --chip-bg: #21262d;
  --danger-bg: color-mix(in srgb, var(--danger) 16%, var(--surface));
  --danger-border: color-mix(in srgb, var(--danger) 40%, transparent);
  --warn-bg: color-mix(in srgb, #d97706 15%, var(--surface));
  --warn-border: color-mix(in srgb, #d97706 40%, transparent);
  --warn-text: #f2c45a;
  --success-bg: color-mix(in srgb, var(--success) 15%, var(--surface));
  --success-border: color-mix(in srgb, var(--success) 40%, transparent);
  --success-text: #56d38a;
  /* Par escuro de --border-control e --shadow-lg (13/10/2026, globals.css). */
  --border-control: #707070;
  --shadow-lg: 0 24px 64px rgba(1, 4, 9, 0.7);
  color-scheme: dark;
}
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--surface);
  color: #fff;
}
:root[data-theme="dark"] .dia-ss tbody tr:hover td,
:root[data-theme="dark"] .dia-ss tbody tr:hover .dia-ss-td-tvr,
:root[data-theme="dark"] .dia-ss tbody tr:hover .dia-ss-td-tnit,
:root[data-theme="dark"] .date-preset-btn:hover,
:root[data-theme="dark"] .view-toggle-btn:hover,
:root[data-theme="dark"] .vegas-ia-history-item:hover,
:root[data-theme="dark"] .vegas-ia-table tr:hover td,
:root[data-theme="dark"] .vegas-ia-icon-btn:hover:not(:disabled),
:root[data-theme="dark"] .btn-ghost:hover,
:root[data-theme="dark"] .btn-icon:hover,
:root[data-theme="dark"] .det-btn-hist:hover,
:root[data-theme="dark"] .det-linha-clic:hover,
:root[data-theme="dark"] .tools-item:hover:not(:disabled),
:root[data-theme="dark"] .sup-table tr:hover td,
:root[data-theme="dark"] .sup-link-row:hover {
  background: var(--black);
  color: #fff;
}
:root[data-theme="dark"] .users-table tr:hover td {
  background: #141b22;
}
:root[data-theme="dark"] .tasks-board-tab,
:root[data-theme="dark"] .settings-tab,
:root[data-theme="dark"] .sup-period-btn {
  background: #0071ea;
  color: #fff;
  border-color: #0071ea;
}
:root[data-theme="dark"] .tasks-board-tab:hover,
:root[data-theme="dark"] .tasks-board-tab.active,
:root[data-theme="dark"] .settings-tab:hover,
:root[data-theme="dark"] .settings-tab--active,
:root[data-theme="dark"] .sup-period-btn:hover,
:root[data-theme="dark"] .sup-period-btn.active {
  background: #043d78;
  border-color: #043d78;
}
:root[data-theme="dark"] {
  --cp-vazio-bg: var(--surface);
  --cp-vazio-color: var(--muted);
  --cp-vazio-border: var(--border);
  --cp-ok-bg: rgba(63, 185, 80, 0.16);
  --cp-ok-color: #56d38a;
  --cp-ok-border: rgba(63, 185, 80, 0.4);
  --cp-sacesso-bg: rgba(230, 170, 40, 0.16);
  --cp-sacesso-color: #f2c45a;
  --cp-sacesso-border: rgba(230, 170, 40, 0.4);
  --cp-off-bg: rgba(248, 81, 73, 0.16);
  --cp-off-color: #ff8079;
  --cp-off-border: rgba(248, 81, 73, 0.4);
}
/* Padrão único pra todo botão primário no escuro (mesmo usado em Relatórios
   Monitoramento): sem escopo de página, vale pro Hub inteiro. */
:root[data-theme="dark"] .btn-primary {
  background: #0071ea;
  color: #fff;
  border-color: #0071ea;
}
:root[data-theme="dark"] .btn-primary:hover:not(:disabled) {
  background: #043d78;
  border-color: #043d78;
}
:root[data-theme="dark"] .brand-logo--light { display: none; }
:root[data-theme="dark"] .brand-logo--dark { display: block; }
:root[data-theme="dark"] .login-logo.brand-logo--light { display: none; }
:root[data-theme="dark"] .login-logo.brand-logo--dark { display: block; }
:root[data-theme="dark"] .login-root { background-image: none; }
:root[data-theme="dark"] .dia-ss-th,
:root[data-theme="dark"] .dia-ss-th-month,
:root[data-theme="dark"] .dia-ss-th-vr,
:root[data-theme="dark"] .dia-ss-th-nit,
:root[data-theme="dark"] .dia-ss-th-tvr,
:root[data-theme="dark"] .dia-ss-th-tnit,
:root[data-theme="dark"] .dia-ss-th-custo {
  background: var(--bg);
  color: var(--muted);
}
:root[data-theme="dark"] .kanban-col-header { background: var(--bg); }
:root[data-theme="dark"] .kanban-count { background: var(--surface); color: var(--muted); }
:root[data-theme="dark"] .rc-status-btn,
:root[data-theme="dark"] .rc-status-select.st-nao_iniciado,
:root[data-theme="dark"] .rc-status-btn.active.st-nao_iniciado,
:root[data-theme="dark"] .rc-status-select.st-em_andamento,
:root[data-theme="dark"] .rc-status-btn.active.st-em_andamento,
:root[data-theme="dark"] .rc-status-select.st-concluido,
:root[data-theme="dark"] .rc-status-btn.active.st-concluido {
  background: var(--bg);
}
:root[data-theme="dark"] .pl2 {
  --pl2-azul: #79b8ff; --pl2-azul-claro: #3b82d6;
  --pl2-verde: #56d38a; --pl2-verde-claro: #2e9e5b;
  --pl2-vermelho: var(--vermelho); --pl2-vermelho-fundo: var(--vermelho-fundo);
}
:root[data-theme="dark"] .pl2-tom-registrou { --c: #79b8ff; --t: rgba(56, 139, 253, 0.16); }
:root[data-theme="dark"] .pl2-tom-retornou  { --c: #4fd1c1; --t: rgba(45, 190, 170, 0.16); }
:root[data-theme="dark"] .pl2-tom-closer    { --c: #f2c45a; --t: rgba(230, 170, 40, 0.16); }
:root[data-theme="dark"] .pl2-tom-visita    { --c: #f389ad; --t: rgba(230, 90, 140, 0.16); }
:root[data-theme="dark"] .pl2-tom-orcamento { --c: #f7a26b; --t: rgba(240, 120, 50, 0.16); }
:root[data-theme="dark"] .pl2-tom-venda     { --c: #56d38a; --t: rgba(60, 190, 110, 0.16); }
:root[data-theme="dark"] .pl2-tom-perda     { --c: #ff7b72; --t: rgba(248, 81, 73, 0.14); }
:root[data-theme="dark"] .placar-shell { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] .placar-titulo,
:root[data-theme="dark"] .placar-time-num,
:root[data-theme="dark"] .placar-card-nome,
:root[data-theme="dark"] .placar-metrica-num,
:root[data-theme="dark"] .placar-kpi-num,
:root[data-theme="dark"] .placar-nome,
:root[data-theme="dark"] .placar-cel-num,
:root[data-theme="dark"] .placar-vazio strong {
  color: var(--text);
}
:root[data-theme="dark"] .placar-data,
:root[data-theme="dark"] .placar-time-rotulo,
:root[data-theme="dark"] .placar-time-rot,
:root[data-theme="dark"] .placar-time-meta,
:root[data-theme="dark"] .placar-metrica-rot,
:root[data-theme="dark"] .placar-metrica-meta,
:root[data-theme="dark"] .placar-rodape,
:root[data-theme="dark"] .placar-vazio,
:root[data-theme="dark"] .placar-kpi-rotulo,
:root[data-theme="dark"] .placar-kpi-meta,
:root[data-theme="dark"] .placar-kpi-semmeta,
:root[data-theme="dark"] .placar-tabela-titulo,
:root[data-theme="dark"] .placar-pos,
:root[data-theme="dark"] .placar-cel-rot,
:root[data-theme="dark"] .placar-card-pos,
:root[data-theme="dark"] .placar-secao {
  color: var(--muted);
}
:root[data-theme="dark"] .placar-data:hover { background: var(--surface); }
:root[data-theme="dark"] .placar-data-input { border-color: var(--border); }
:root[data-theme="dark"] .placar-time,
:root[data-theme="dark"] .placar-card,
:root[data-theme="dark"] .placar-kpi,
:root[data-theme="dark"] .placar-tabela {
  background: var(--surface);
  border-color: var(--border);
}
:root[data-theme="dark"] .placar-card-pos { background: var(--bg); }
:root[data-theme="dark"] .placar-barra { background: var(--bg); }
:root[data-theme="dark"] .placar-linha { border-bottom-color: var(--border); }
:root[data-theme="dark"] .placar-dot { background: var(--border); }
:root[data-theme="dark"] .placar-canal svg { fill: var(--muted); }
:root[data-theme="dark"] .placar-canal.zero svg { fill: var(--border); }
:root[data-theme="dark"] .placar-canal.zero b { color: var(--muted); }
:root[data-theme="dark"] .placar-card-pend {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 18%, transparent);
}
:root[data-theme="dark"] .placar-metrica.atras .placar-metrica-num { color: var(--danger); }
:root[data-theme="dark"] .placar-metrica.ok .placar-metrica-num,
:root[data-theme="dark"] .placar-kpi-ok {
  color: #56d38a;
}
:root[data-theme="dark"] .placar-hoje-btn {
  color: #56d38a;
  background: rgba(60, 190, 110, 0.16);
  border-color: rgba(60, 190, 110, 0.4);
}
:root[data-theme="dark"] .placar-card.lider .placar-card-pos {
  background: rgba(230, 170, 40, 0.16);
  color: #f2c45a;
}
:root[data-theme="dark"] .placar-linha.lider .placar-pos { color: #f2c45a; }
:root[data-theme="dark"] .placar-secao-alerta,
:root[data-theme="dark"] .placar-metrica.pendente .placar-metrica-num {
  color: #f2c45a;
}
:root[data-theme="dark"] .placar-closer { background: rgba(60, 190, 110, 0.1); }
:root[data-theme="dark"] .sup-alert-info {
  background: var(--surface);
  color: var(--muted);
  border-color: var(--border);
}
:root[data-theme="dark"] .sup-alert-warn {
  background: color-mix(in srgb, #d97706 15%, var(--surface));
  color: #f2c45a;
  border-color: color-mix(in srgb, #d97706 40%, transparent);
}
:root[data-theme="dark"] .ronda-th,
:root[data-theme="dark"] .ronda-th-posto {
  background: var(--bg);
  color: var(--muted);
}
:root[data-theme="dark"] .ronda-row:not(:last-child) td { border-bottom-color: var(--border); }
:root[data-theme="dark"] .ronda-row:hover .ronda-td-posto { background: var(--bg); }
/* .cm-puxar-aviso e .cm-trava passaram a usar --danger-bg/--danger-border
   (13/10/2026, tinham cor fixa e borda lateral), que já tem par escuro
   próprio via color-mix; não precisa mais de override aqui. */
/* Colunas do board Comercial: o fundo pastel em hex por coluna saiu em
   14/10/2026 (corpo agora é --surface, tom só no cabeçalho via rgba), então o
   override que existia aqui ficou sem função. Era também onde faltavam
   closer_agendado e closer_negociando, que ficavam lilás claro no escuro. */
:root[data-theme="dark"] .btn.dist-toggle {
  background: var(--surface);
  border-color: var(--border);
  color: var(--muted);
}
:root[data-theme="dark"] .btn.dist-toggle:hover {
  background: var(--bg);
  border-color: #0073e9;
  color: var(--text);
}
:root[data-theme="dark"] .btn.dist-toggle.ativo,
:root[data-theme="dark"] .btn.dist-toggle.ativo:hover {
  background: #0073e9;
  border-color: #0073e9;
  color: #fff;
}
:root[data-theme="dark"] .cm .cm-card { border-color: transparent; }
:root[data-theme="dark"] .cm .cm-funil-c--registrou .cm-viz,
:root[data-theme="dark"] .cm .cm-funil-c--retornou .cm-viz,
:root[data-theme="dark"] .cm .cm-funil-c--oportunidade .cm-viz,
:root[data-theme="dark"] .cm .cm-funil-c--closer .cm-viz,
:root[data-theme="dark"] .cm .cm-funil-c--visita .cm-viz,
:root[data-theme="dark"] .cm .cm-funil-c--orcamento .cm-viz,
:root[data-theme="dark"] .cm .cm-funil-c--situacao .cm-viz,
:root[data-theme="dark"] .cm .cm-funil-c--resultado .cm-viz {
  background: var(--surface);
}
/* `.info-tip` (bolinha "?" de tooltip, usada em Custo Fiscais e outras
   telas) e `.alr-table` (cabeçalho e hover de linha, usado em várias
   tabelas do Hub) tinham cor clara fixa (#eee/#f9f9f9/#fafafa) sem
   variante escura — ficava uma bolha/linha branca no meio da tela escura. */
:root[data-theme="dark"] .info-tip {
  background: var(--border);
  color: var(--muted);
}
:root[data-theme="dark"] .alr-table thead {
  background: var(--bg);
}
:root[data-theme="dark"] .alr-table tbody tr:hover {
  background: var(--bg);
}
/* Tags categóricas do funil reflexo: tinham cor fixa sem par escuro
   (achado 13/10/2026, docs/revisoes/metodo_2026-10-13/fase0_css.md). */
:root[data-theme="dark"] .tag-cliente { background: color-mix(in srgb, #0ea5e9 22%, var(--surface)); color: #7dd3fc; }
:root[data-theme="dark"] .tag-frio { background: color-mix(in srgb, var(--muted) 25%, var(--surface)); color: var(--text); }
:root[data-theme="dark"] .tag-lead { background: color-mix(in srgb, var(--success) 20%, var(--surface)); color: var(--success-text); }
:root[data-theme="dark"] .tag-kommo { background: color-mix(in srgb, #d97706 20%, var(--surface)); color: var(--warn-text); }