/*
 * Correcoes de contraste no tema escuro.
 *
 * O tema inverte as variaveis no escuro: `--light-rgb` passa a valer 46,45,50
 * (escuro) e `--dark-rgb` passa a 240,245,248 (claro). Quem escreveu
 * `bg-light text-dark` estava pedindo "fundo claro, texto escuro" e recebe
 * fundo escuro com texto escuro — o par se inverte pela metade, porque
 * `.text-dark` do Bootstrap le `--bs-dark-rgb`, que o tema nao redefine.
 *
 * Este arquivo e a camada corretiva: fecha esse par e devolve as cores fixas
 * das telas que foram escritas so pensando no claro. E carregado depois do
 * styles.css, entao ganha por ordem, sem precisar de !important em tudo.
 */

/* ---------------------------------------------------------------------------
 * 1. O par bg-light / text-dark
 *
 * Sem isto, `badge bg-light text-dark` fica ilegivel em todo o sistema.
 * ------------------------------------------------------------------------ */
[data-theme-mode="dark"] {
    --bs-light-rgb: var(--light-rgb);
    --bs-dark-rgb: var(--dark-rgb);
    /* Os pares sem `-rgb` ficavam para tras: quem escreveu
       `background: var(--bs-light)` continuava recebendo #f8f9fa no escuro. */
    --bs-light: rgb(var(--light-rgb));
    --bs-dark: rgb(var(--dark-rgb));
}

[data-theme-mode="dark"] .text-dark,
[data-theme-mode="dark"] .badge.text-dark,
[data-theme-mode="dark"] .text-black {
    color: rgb(var(--dark-rgb)) !important;
}

[data-theme-mode="dark"] .bg-white,
[data-theme-mode="dark"] .bg-light {
    background-color: var(--custom-white) !important;
}

/* Cabecalho de tabela: `table-light` fixa cinza claro na marra. */
[data-theme-mode="dark"] .table-light,
[data-theme-mode="dark"] .table > thead.table-light > tr > th,
[data-theme-mode="dark"] .table > :not(caption) > * > .table-light {
    --bs-table-bg: var(--default-background);
    --bs-table-color: var(--default-text-color);
    background-color: var(--default-background) !important;
    color: var(--default-text-color) !important;
    border-color: var(--default-border) !important;
}

/* ---------------------------------------------------------------------------
 * 2. Cores fixas escritas direto na tela
 *
 * Varias telas nasceram so no claro e trazem #fff / #f8f9fa / #e9ecef no
 * proprio arquivo. Enquanto elas nao migram para as variaveis do tema, estas
 * regras evitam o retangulo branco no meio da pagina escura. Faixa larga de
 * seletor de proposito: e uma rede de seguranca, nao o desenho final.
 * ------------------------------------------------------------------------ */
[data-theme-mode="dark"] [style*="background:#fff"],
[data-theme-mode="dark"] [style*="background: #fff"],
[data-theme-mode="dark"] [style*="background:#f8f9fa"],
[data-theme-mode="dark"] [style*="background: #f8f9fa"],
[data-theme-mode="dark"] [style*="background-color:#fff"],
[data-theme-mode="dark"] [style*="background-color: #fff"],
[data-theme-mode="dark"] [style*="background-color:#f8f9fa"],
[data-theme-mode="dark"] [style*="background-color: #f8f9fa"] {
    background: var(--default-background) !important;
    color: var(--default-text-color);
}

/* ---------------------------------------------------------------------------
 * 3. Selos pastel de tipo
 *
 * Fundo pastel com texto na mesma familia de cor funciona no claro. No escuro
 * o pastel vira uma mancha clara no meio da pagina. Aqui eles viram fundo
 * translucido da propria cor, mantendo a leitura por cor sem o bloco claro.
 * ------------------------------------------------------------------------ */
[data-theme-mode="dark"] .tipo-normal          { background: rgba(21,101,192,.22);  color: #90caf9; }
[data-theme-mode="dark"] .tipo-decimo_terceiro { background: rgba(239,108,0,.22);   color: #ffcc80; }
[data-theme-mode="dark"] .tipo-ferias          { background: rgba(46,125,50,.22);   color: #a5d6a7; }
[data-theme-mode="dark"] .tipo-suplementar     { background: rgba(123,31,162,.22);  color: #ce93d8; }
[data-theme-mode="dark"] .tipo-rescisao        { background: rgba(198,40,40,.22);   color: #ef9a9a; }

/* ---------------------------------------------------------------------------
 * 4. text-dark sobre selo de fundo claro solido
 *
 * A secao 1 devolve o par bg-light/text-dark, mas `.text-dark` tambem aparece
 * em cima de `bg-warning` e `bg-info`, que sao amarelo e azul claro em
 * qualquer tema. Ali o texto tem que continuar escuro, senao vira claro sobre
 * claro — o mesmo defeito, so que na direcao contraria.
 * ------------------------------------------------------------------------ */
[data-theme-mode="dark"] .badge.bg-warning.text-dark,
[data-theme-mode="dark"] .badge.bg-info.text-dark,
[data-theme-mode="dark"] .bg-warning.text-dark,
[data-theme-mode="dark"] .bg-info.text-dark {
    color: #212529 !important;
}

/* ---------------------------------------------------------------------------
 * 4c. O selo `badge bg-dark`
 *
 * A secao 1 vira `--bs-dark-rgb` para a cor clara do tema, entao o selo
 * escuro vira um bloco quase branco com o texto branco do badge (1.10:1).
 * Aqui ele vira fundo translucido da propria cor clara, com texto claro.
 * ------------------------------------------------------------------------ */
[data-theme-mode="dark"] .badge.bg-dark {
    background-color: rgba(var(--dark-rgb), .14) !important;
    color: rgb(var(--dark-rgb)) !important;
}

/* ---------------------------------------------------------------------------
 * 4d. O selo `badge bg-success`
 *
 * No escuro o verde do tema continua claro e vivo, e o texto branco do badge
 * fica em 2.2:1. Mesma saida dos botoes de cor viva (authenticated.css,
 * `.btn-success` no escuro): texto escuro sobre o verde.
 * ------------------------------------------------------------------------ */
[data-theme-mode="dark"] .badge.bg-success {
    color: #212529 !important;
}

/* ---------------------------------------------------------------------------
 * 4e. Texto nas cores da marca e de estado
 *
 * Botao outline e "light", selo transparente, link do breadcrumb e
 * `.text-danger` pintam o texto com a cor pura (roxo, laranja, vermelho,
 * verde, azul), que fica entre 3.0 e 4.5:1 sobre o fundo escuro. O texto passa
 * para o tom claro da mesma cor (tokens --texto-* da secao 5); fundo e borda
 * nao mudam. O `:where()` deixa a regra com a especificidade da original,
 * entao o :hover/:focus do styles.css (texto branco sobre a cor solida)
 * continua valendo. O botao desabilitado le --bs-btn-disabled-color, que o
 * Bootstrap fixa nas cores dele (#0d6efd no primary).
 * ------------------------------------------------------------------------ */
[data-theme-mode="dark"] :where(.btn-outline-primary) {
    color: var(--texto-marca);
    --bs-btn-disabled-color: var(--texto-marca);
    --bs-btn-disabled-border-color: rgb(var(--primary-rgb));
}
[data-theme-mode="dark"] .btn:where(.btn-primary-light) {
    color: var(--texto-marca);
}
[data-theme-mode="dark"] .badge.bg-primary-transparent:not(.painel-filtros__contador) {
    color: var(--texto-marca) !important;
}
[data-theme-mode="dark"] .breadcrumb .breadcrumb-item a {
    color: var(--texto-marca);
}
[data-theme-mode="dark"] :where(.btn-outline-secondary) {
    color: var(--texto-marca-secundaria);
    --bs-btn-disabled-color: var(--texto-marca-secundaria);
}
[data-theme-mode="dark"] :where(.btn-outline-danger) {
    color: var(--texto-perigo);
    --bs-btn-disabled-color: var(--texto-perigo);
}
[data-theme-mode="dark"] .text-danger {
    color: var(--texto-perigo) !important;
}
[data-theme-mode="dark"] .badge.bg-success-transparent {
    color: var(--texto-sucesso) !important;
}
[data-theme-mode="dark"] .badge.bg-info-transparent {
    color: var(--texto-info) !important;
}

/* ---------------------------------------------------------------------------
 * 5. Tokens compartilhados pelas telas
 *
 * Cores que varias telas cravaram e que o tema nao tem equivalente pronto.
 * No claro valem exatamente o que ja valiam; no escuro viram translucido da
 * propria cor. Assim a tela escreve `var(--realce-linha)` e para de decidir
 * cor por conta propria.
 * ------------------------------------------------------------------------ */
:root {
    /* Texto de apoio (descricao, rotulo de contador). As telas cravaram
       #6c757d, que no escuro cai para 3.4:1 contra o cartao. Nao da para usar
       `--text-muted` do tema: no claro ele tem outra cor e mudaria a
       aparencia da tela clara. */
    --texto-secundario: #6c757d;
    /* Texto e icone `text-primary` (authenticated.css). O azul-marinho do
       claro cai para 1.43:1 contra o cartao escuro. */
    --texto-primario: #2c3e50;
    /* Linha de tabela sob o cursor (creme). */
    --realce-linha: #fff9e6;
    --realce-linha-forte: #fff3cd;
    /* Blocos de diferenca "antes" e "depois" da auditoria. */
    --diff-antes: #fff5f5;
    --diff-depois: #f0fff4;
    /* Serie e neutros dos graficos, que sao pintados por JS. */
    --grafico-serie: #2c3e50;
    --grafico-neutro-forte: #212529;
    --grafico-neutro-medio: #495057;
    /* Anel de foco por teclado (secao 7). Mesma cor do item ativo do menu;
       4.56:1 sobre o cartao branco no padrão. */
    --anel-foco: #1c75da;
}

[data-theme-mode="dark"] {
    --texto-secundario: rgba(255, 255, 255, .62);
    --texto-primario: #7fb0d3;
    /* Secao 4e. Todos passam de 4.5:1 sobre #333 e sobre o selo transparente
       (15% da cor) em cima de #333. */
    --texto-marca: #a4c8f0;
    --texto-marca-secundaria: #ff9a75;
    --texto-perigo: #ff8a8d;
    --texto-sucesso: #5ee39a;
    --texto-info: #6cc1ff;
    /* `code`: o rosa do Bootstrap fica em 3.1:1; este e o tom que o proprio
       Bootstrap usa no modo escuro dele. 5.05:1 sobre #333. */
    --bs-code-color: #e685b5;
    --realce-linha: rgba(255, 193, 7, .13);
    --realce-linha-forte: rgba(255, 193, 7, .2);
    --diff-antes: rgba(220, 53, 69, .12);
    --diff-depois: rgba(25, 135, 84, .12);
    --grafico-serie: #7fb0d3;
    --grafico-neutro-forte: #cfd6dc;
    --grafico-neutro-medio: #98a3ad;
    /* 6.73:1 sobre o cartao escuro e 7.24:1 sobre o fundo da pagina no padrão. */
    --anel-foco: #6ba5e7;
}

/* ---------------------------------------------------------------------------
 * 6. Classes que substituem estilo inline repetido
 *
 * Estilo no atributo `style` vence qualquer folha de estilo, entao nao ha como
 * corrigir por CSS: tem que sair do atributo. Estes dois blocos apareciam
 * copiados em dezenas de telas; viram classe aqui uma vez so.
 * ------------------------------------------------------------------------ */

/* Corpo das abas: sem moldura própria. A tela já está dentro de um card, e a
   moldura desenhava uma segunda linha entre o card e o conteúdo. */
.painel-abas {
    padding: 1rem 0 0;
}

/* Abas dentro de um card: a faixa de abas no cabeçalho (`card-header-tabs`)
   e o conteúdo no corpo do MESMO card. Os painéis não ganham moldura própria
   (`.tab-content .tab-pane` do styles.css desenha borda e recuo), senão viram
   uma caixa dentro da caixa. Uso:
   <div class="card cartao-abas"><div class="card-header">
     <ul class="nav nav-tabs card-header-tabs">…</ul></div>
   <div class="card-body"><div class="tab-content">…</div></div></div> */
.cartao-abas > .card-header {
    padding-bottom: 0;
    background: transparent;
}
.cartao-abas > .card-header > .nav-tabs {
    border-bottom: 0;
    row-gap: 0.25rem;
}
.cartao-abas .tab-content .tab-pane {
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* Previa de arquivo gerado (remessa, XML, TXT). */
.pre-previa {
    background: var(--default-background);
    color: var(--default-text-color);
}

/* Blocos "antes" e "depois" da auditoria: o tom conta o que aconteceu. */
.pre-diff-antes  { background: var(--diff-antes);  color: var(--default-text-color); }
.pre-diff-depois { background: var(--diff-depois); color: var(--default-text-color); }

/* ---------------------------------------------------------------------------
 * 7. Foco por teclado
 *
 * O tema zera o contorno de botao, campo e seletor no :focus (styles.css,
 * `.btn-*:focus`, `.form-select:focus`) e troca por sombra quase invisivel.
 * Quem navega com Tab nao via onde estava. Aqui o anel volta so no
 * :focus-visible, entao o clique do mouse em botao continua sem anel.
 *
 * Especificidade: `.btn:focus-visible` empata com `.btn-primary:focus` e
 * `.btn-check:focus-visible + .btn` com `.btn-check:focus + .btn-primary`;
 * o mesmo vale para os componentes que o Bootstrap zera no :focus
 * (`.nav-link`, `.btn-close`, `.form-range`, `.accordion-button`). Este
 * arquivo vem depois do styles.css e do Bootstrap e ganha pela ordem, sem
 * !important.
 * O menu lateral usa esta mesma regra (header-styles.css so muda o offset).
 * ------------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.btn:focus-visible,
.btn-check:focus-visible + .btn,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.form-range:focus-visible,
.page-link:focus-visible,
.nav-link:focus-visible,
.btn-close:focus-visible,
.accordion-button:focus-visible {
    outline: 2px solid var(--anel-foco);
    outline-offset: 2px;
}