/* ===========================================================================
   Camada de contraste — WCAG AA (4.5:1 texto normal, 3:1 texto grande)

   O Sneat pinta texto semântico com a cor cheia da marca: --bs-success #71dd37,
   --bs-warning #ffab00, --bs-info #03c3ec, --bs-primary #696cff. Esses tons têm
   contraste de sobra como *preenchimento*, e nenhum como *texto* — "Salvar
   alterações" em branco sobre o verde cheio mede 1.74:1, "0 abertas" em cima do
   chip amarelo mede 1.7:1.

   O Bootstrap 5.3 já calcula o tom legível de cada cor semântica e guarda em
   --bs-*-text-emphasis, com valor próprio por tema. Esta camada só troca a cor
   cheia por esse token onde a cor vira texto. Preenchimento de marca continua
   igual; o que muda é a legibilidade em cima dele.

   Medido no navegador em 30 telas × 2 temas × 4 larguras, comparando cada texto
   com o fundo composto real. Carregada depois do tema, então ganha por ordem.
   =========================================================================== */

:root {
    /* Indigo da marca legível como texto — mesmo par já usado em --crm-kicker.
       O --bs-primary-text-emphasis do Bootstrap (#2a2b66) é quase preto e mata
       a identidade; este passa em AA e continua indigo. */
    --hub-primary-text: #4b4ed6;
    /* Cinza secundário do Sneat (#697079) cai para 4.16:1 sobre cartão
       tonalizado — passa no branco puro e falha no resto. */
    --bs-secondary-color: #5b626b;
    --bs-secondary-color-rgb: 91, 98, 107;
    --bs-tertiary-color: rgba(91, 98, 107, .78);
    /* Texto escuro para preenchimento claro (verde, amarelo, ciano da marca). */
    --hub-sobre-claro: #1c1e21;
    /* Índigo cheio legível sob texto branco: o #696cff da marca mede 4.05:1.
       Mesmo tom que a seção 6 já aplica no .btn-primary — aqui vira token para
       quem pinta superfície própria (avatar, selo, ícone em círculo). */
    --hub-primary-fill: #5c5fe6;
}

[data-bs-theme="dark"] {
    /* #b6b8ff passava sobre o fundo do body, mas o índigo aparece quase sempre
       EM CIMA de um chip tonalizado (.bg-label-primary, .crm-tag, contador da
       home), e ali o fundo composto sobe para rgb(72,83,116): 4.08:1. Um degrau
       mais claro cobre os dois casos — 4.61:1 no chip, 9.45:1 no menu. */
    --hub-primary-text: #c3c5ff;
    /* 0.75 de opacidade dava 3.81:1 sobre o cartão escuro. */
    --bs-secondary-color: #ced2d6;
    --bs-secondary-color-rgb: 206, 210, 214;
    --bs-tertiary-color: rgba(189, 193, 197, .82);
    /* Os tons de ênfase do Bootstrap são calculados contra o fundo do body;
       sobre cartão e chip tonalizado ficam entre 3.5:1 e 4.4:1. Um passo mais
       claro cada, mantendo o matiz. */
    --bs-danger-text-emphasis: #ffab9c;
    --bs-success-text-emphasis: #c2f0a9;
    --bs-warning-text-emphasis: #ffdb99;
    --bs-info-text-emphasis: #94e6f8;
    --bs-secondary-text-emphasis: #ccd2d9;
}

/* --- 0. Link ------------------------------------------------------------ */
/* --bs-link-color é o índigo cru (#696cff): 2.43:1 no escuro, 3.5:1 no claro.
   Só trocar --bs-link-color não bastava: o tema pinta o link com
   `rgba(var(--bs-link-color-rgb), …)` e depois com `var(--bs-custom-link-color)`,
   que vence por vir por último. Enquanto esses dois ficaram de fora, esta seção
   não teve efeito em lugar nenhum — medido na tela de login em produção, onde
   "Esqueci minha senha" seguia em 2,07:1. */
:root, [data-bs-theme="dark"] {
    --bs-link-color: var(--hub-primary-text);
    --bs-link-hover-color: var(--hub-primary-text);
    --bs-custom-link-color: var(--hub-primary-text);
}
:root { --bs-link-color-rgb: 75, 78, 214; }              /* #4b4ed6 */
[data-bs-theme="dark"] { --bs-link-color-rgb: 195, 197, 255; }   /* #c3c5ff */

/* --- 1. Texto semântico solto ------------------------------------------- */
.text-primary { color: var(--hub-primary-text) !important; }
.text-success { color: var(--bs-success-text-emphasis) !important; }
.text-info { color: var(--bs-info-text-emphasis) !important; }
.text-warning { color: var(--bs-warning-text-emphasis) !important; }
.text-danger { color: var(--bs-danger-text-emphasis) !important; }

/* --- 2. Chips tonalizados: o fundo continua, o texto ganha peso ---------- */
.bg-label-primary { color: var(--hub-primary-text) !important; }
.bg-label-success { color: var(--bs-success-text-emphasis) !important; }
.bg-label-info { color: var(--bs-info-text-emphasis) !important; }
.bg-label-warning { color: var(--bs-warning-text-emphasis) !important; }
.bg-label-danger { color: var(--bs-danger-text-emphasis) !important; }
.bg-label-secondary { color: var(--bs-secondary-text-emphasis) !important; }
.bg-label-dark { color: var(--bs-dark-text-emphasis) !important; }

/* --- 3. Botão vazado em repouso (hover inverte para fundo cheio) --------- */
.btn-outline-primary { color: var(--hub-primary-text); }
.btn-outline-success { color: var(--bs-success-text-emphasis); }
.btn-outline-info { color: var(--bs-info-text-emphasis); }
.btn-outline-warning { color: var(--bs-warning-text-emphasis); }
.btn-outline-danger { color: var(--bs-danger-text-emphasis); }
.btn-outline-secondary { color: var(--bs-secondary-text-emphasis); }

/* --- 4. Alertas --------------------------------------------------------- */
.alert-primary { color: var(--bs-primary-text-emphasis); }
.alert-success { color: var(--bs-success-text-emphasis); }
.alert-info { color: var(--bs-info-text-emphasis); }
.alert-warning { color: var(--bs-warning-text-emphasis); }
.alert-danger { color: var(--bs-danger-text-emphasis); }
.alert .alert-link { color: inherit; text-decoration: underline; }

/* --- 5. Preenchimento claro pede texto escuro, não branco ---------------- */
.btn-success, .btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-warning, .btn-warning:hover, .btn-warning:focus, .btn-warning:active,
.btn-info, .btn-info:hover, .btn-info:focus, .btn-info:active,
.btn-check:checked + .btn-success, .btn-check:checked + .btn-warning,
.btn-check:checked + .btn-info {
    color: var(--hub-sobre-claro);
}
.badge.bg-success, .badge.bg-warning, .badge.bg-info {
    color: var(--hub-sobre-claro);
}

/* --- 6. Primário cheio: #696cff com texto branco mede 4.05:1 ------------- */
/* O tema marca o preenchimento com !important, então além das variáveis do
   componente a cor precisa vir marcada também. */
.btn-primary {
    --bs-btn-bg: #5c5fe6;
    --bs-btn-border-color: #5c5fe6;
    --bs-btn-hover-bg: #5053cc;
    --bs-btn-hover-border-color: #5053cc;
    --bs-btn-active-bg: #5053cc;
    --bs-btn-active-border-color: #5053cc;
    background-color: #5c5fe6 !important;
    border-color: #5c5fe6 !important;
}
.btn-primary:hover, .btn-primary:active, .btn-check:checked + .btn-primary {
    background-color: #5053cc !important;
    border-color: #5053cc !important;
}
.badge.bg-primary { background-color: #5c5fe6 !important; }

/* --- 7. Superfície forçada a branco não segue o tema ---------------------- */
/* .bg-white mantém o fundo claro mesmo no escuro; o texto em cima dela precisa
   dos tons do tema claro, senão vira claro sobre claro. */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .badge.bg-white {
    --hub-primary-text: #4b4ed6;
    --bs-secondary-color: #5b626b;
    /* Os tons de ênfase voltam aos valores do tema claro para que .text-danger
       e companhia continuem escuros em cima do branco forçado. */
    --bs-primary-text-emphasis: #2a2b66;
    --bs-success-text-emphasis: #2d5816;
    --bs-info-text-emphasis: #014e5e;
    --bs-warning-text-emphasis: #664400;
    --bs-danger-text-emphasis: #66190c;
    color: #22303e;
}

/* --- 8. Acordeão: o tema esquece a cor do texto no escuro ---------------- */
/* O botão fechado fica com o texto do tema claro (#384551) sobre o cartão
   escuro: 1.15:1. */
.accordion {
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-active-color: var(--hub-primary-text);
}
.accordion-button { color: var(--bs-accordion-btn-color); }
.accordion-button:not(.collapsed) { color: var(--bs-accordion-active-color); }

/* --- 9. Alvo de toque no celular ----------------------------------------- */
/* O base.html já leva .btn, .form-control e .form-select a 44px; a paginação
   ficou de fora. Componente com altura própria declarada no <style> da página
   não se corrige daqui — o bloco da página é renderizado depois desta folha e
   ganha; esses ficam para a rodada por módulo.
   Link dentro de texto corrido não entra: a regra de tamanho de alvo do WCAG
   abre exceção para ele. */
@media (max-width: 767.98px) {
    .page-link { min-height: 44px; }
}

/* --- 10. Barra lateral: aparece em toda tela, então falha em toda tela ---- */
/* Medido na home nos dois temas, com o fundo composto real do menu:
   - .menu-header-text (#a7acb2): 2.29:1 no claro, 3.72:1 no escuro. É o rótulo
     de seção do menu — Operacional, Vendas, Admin.
   - item ativo (#696cff sobre o realce #e7e7ff): 3.33:1 no claro, 4.34:1 no
     escuro. Mesmo índigo cru já corrigido em --crm-kicker e nos links.
   - .badge.bg-danger (branco sobre #ff3e1d): 3.52:1 nos dois. É o contador de
     pendências do menu, e o vermelho do Sneat é claro demais para texto branco.
     Escurecer o preenchimento segue o que a seção 6 já fez com o primário. */
.menu-header .menu-header-text { color: var(--bs-secondary-color); }
/* O tema pinta o item ativo por token, num seletor bem mais específico
   (.menu-vertical .menu-inner > .menu-item.active > .menu-link). Trocar o token
   é mais estável do que competir em especificidade. */
:root, [data-bs-theme="dark"] {
    --bs-menu-active-color: var(--hub-primary-text);
    /* O pai de um submenu aberto (CRM Comercial) usa um token próprio. */
    --bs-menu-sub-active-color: var(--hub-primary-text);
}
.badge.bg-danger { background-color: #d42d0f !important; }

/* --- 11. Aba marcada e pílula de navegação -------------------------------- */
/* .nav-tabs pinta a aba ativa com o índigo cru: 2.43:1 sobre o cartão. É a
   navegação interna de Gestão do CRM, do cadastro de cliente e do BI. A pílula
   preenchida (.nav-pills) tem o problema oposto: branco sobre o índigo cheio,
   4.05:1 — mesmo caso do .btn-primary. */
.nav-tabs { --bs-nav-tabs-link-active-color: var(--hub-primary-text); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--hub-primary-fill); }

/* --- 12. Botão vazado marcado: o preenchimento ativo é claro demais ------- */
/* .btn-outline-secondary.active pinta branco sobre o cinza cheio do tema
   (#788393): 3.84:1. É o segmentado de filtro ("Todos / Ativos / Inativos") que
   aparece em Clientes, no board e no CRM. O mesmo cinza escuro que a camada já
   usa como texto de apoio serve de preenchimento e passa com folga (6.17:1). */
.btn-outline-secondary {
    --bs-btn-active-bg: #5b626b;
    --bs-btn-active-border-color: #5b626b;
    --bs-btn-hover-bg: #5b626b;
    --bs-btn-hover-border-color: #5b626b;
}

/* --- 13. Tour guiado (Driver.js) ------------------------------------------ */
/* O X de fechar do popover vem #d2d2d2 sobre branco: 1.51:1. É a única saída do
   tour, e ele abre sozinho na primeira visita ao Editor de Contratos. */
.driver-popover-close-btn { color: var(--bs-secondary-color); }
.driver-popover-close-btn:hover,
.driver-popover-close-btn:focus-visible { color: var(--bs-emphasis-color); }

/* --- 14. Alvo de toque mínimo (WCAG 2.5.8: 24×24 CSS) --------------------- */
/* Medido em 18 telas. O que ficava abaixo de 24px:
   - .form-check-input: 18px. É o switch e a caixa de seleção do CRM, dos
     Relatórios Operacionais e das Recorrentes. O switch do Bootstrap é
     `2em × 1em`, então a largura acompanha a altura e ele não fica achatado.
   - caixa de seleção de card no Pipeline: 16×16.
   - âncora de linha (.app-brand-link, .alert-link, .lead-company,
     .agenda-empresa): 17-21px de altura, largura de sobra. Aqui basta reservar
     a altura sem mexer na aparência do texto — vira inline-flex centrado.
   Link dentro de texto corrido continua de fora: o WCAG abre exceção para ele,
   e esticá-lo quebraria a entrelinha do parágrafo. */
.form-check-input {
    min-width: 1.5rem;
    min-height: 1.5rem;
}
.form-switch .form-check-input {
    /* O switch mantém a proporção 2:1 do Bootstrap. */
    min-width: 3rem;
}
.app-brand-link,
.alert-link,
.lead-company,
.agenda-empresa {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
}

@media (max-width: 767.98px) {
    /* No toque o alvo confortável é 44px (CLAUDE.md), não o mínimo do WCAG. */
    .app-brand-link,
    .alert-link,
    .lead-company,
    .agenda-empresa { min-height: 2.75rem; }
}