/* =====================================================================
   css/tema-escuro.css — modo escuro do sistema inteiro
   =====================================================================
   [Leonardo, 03/10/2026] "quero que voce crie um modo escuro para todas as
   paginas, que segue a opcao de escuro do sistema operacional".

   SEGUE A ESCOLHA DA PESSOA, e no padrão ('sistema') a escolha é a do
   Windows/macOS/Android. Tudo aqui vive dentro de
   `:where(html[data-tema-escuro])`, e esse atributo é posto pelo
   js/tema-escuro.js. No tema claro este arquivo não aplica uma única regra —
   por isso é seguro incluí-lo em qualquer página.

   ESTE ARQUIVO VAI POR ÚLTIMO, depois de todos os outros CSS da página.
   Ele vence por ordem de cascata, e usa `!important` só onde o original
   também usa (Bootstrap e os utilitários do style2.css usam bastante).

   COMO ELE ALCANÇA O ESTILO ESCRITO NA MÃO
   Metade das telas tem `style="background:#fff"` direto no HTML, e estilo
   inline ganha de qualquer folha — não dá para sobrescrever por classe. A
   última seção casa pelo PRÓPRIO texto do atributo
   (`[style*="background:#fff" i]`). É cirúrgico de propósito: só casa
   declarações de FUNDO claro e de TEXTO escuro, nunca `#fff` solto, senão
   derrubaria o texto branco de cima do verde e do terracota.

   O QUE NÃO MUDA
   Navbar, sidebar e os botões de marca (verde e terracota) já são escuros e
   de alto contraste — continuam iguais nos dois modos. Trocar a identidade da
   empresa por cinza no escuro deixaria o sistema irreconhecível.
   ===================================================================== */

/* QUEM LIGA ISTO É O ATRIBUTO, NÃO A MEDIA QUERY.
   [Leonardo, 03/10/2026] "quero que voce coloque uma opcao ai pro usuario
   escolher o tema claro ou escuro ou o mesmo do sistema operacional". Media
   query não se desliga por escolha de quem usa; atributo sim. Quem decide e
   põe o `data-tema-escuro` no <html> — pela escolha salva ou, em 'sistema',
   pelo `prefers-color-scheme` — é o js/tema-escuro.js, ainda no <head>,
   antes da primeira pintura.

   O `:where()` zera a especificidade do embrulho: cada regra aqui dentro
   continua pesando exatamente o que pesava quando isto era uma media query.
   Sem ele, `.perfil-card` genérico passaria a ganhar de
   `.perfil-card.sel-sp`, e a seleção sumiria outra vez.

   Dentro, o aninhamento nativo do CSS resolve os seletores; `&` é o próprio
   <html>, usado onde a regra precisa pegar a raiz e não um descendente. */
/* OS TOKENS FICAM FORA DO `:where()`, e isto não é detalhe.
   `:where()` zera a especificidade — ótimo para as regras de componente,
   fatal para variável: um `--color-verde-escuro` declarado com peso ZERO
   perde para o `:root` da própria página, que pesa (0,1,0). Foi o que
   aconteceu na primeira conversão: o título verde das telas de RH e da
   Sabesp voltou ao #1a3322 original e sumiu no fundo escuro (1,31:1).
   `html[data-tema-escuro]` pesa (0,1,1) e ganha do `:root`. */
html[data-tema-escuro] {
    --esc-fundo:        #14181a;   /* fundo da página     */
    --esc-superficie:   #1e2427;   /* card, modal, tabela */
    --esc-superficie-2: #252d31;   /* hover, cabeçalho    */
    --esc-campo:        #171c1f;   /* input, select       */
    --esc-borda:        #2f383d;
    --esc-borda-forte:  #3d4950;
    --esc-texto:        #e4e7e6;
    --esc-texto-fraco:  #9aa5a3;

    /* Os tokens do style2.css passam a apontar para o escuro. */
    --text-dark:  var(--esc-texto);
    --bg-light:   var(--esc-fundo);
    --bg-card:    var(--esc-superficie);
    --bg-eco:     var(--esc-fundo);

    /* Verde e terracota da marca NÃO são clareados aqui.
       A primeira versão clareava os dois tokens, e isso quebrou o que
       estava certo: os tokens também são o FUNDO dos botões, e botão
       terracota claro com letra branca caiu para 2,8:1 — pior do que no
       modo claro. A cor da marca como FUNDO continua a original (letra
       branca em cima dela rende os mesmos 4,6:1 do modo claro); o que
       precisa clarear é a marca usada como TEXTO sobre o cartão escuro, e
       para isso existem os dois tokens abaixo. Onde a página escreve o
       verde na mão, quem clareia é o js/tema-escuro.js, pelo contraste
       real contra o fundo daquela regra. */
    --esc-verde-texto:     #9bbaa2;
    --esc-terracota-texto: #e3a67f;

    /* `--color-verde-escuro` (#1a3322) foi feito para TÍTULO sobre fundo
       branco. No escuro ele vira um verde quase invisível — foi o primeiro
       problema que a captura de tela mostrou: os títulos "Colaboradores" e
       "Novo Colaborador" sumiam no fundo. A sidebar, que usa o mesmo token
       como gradiente, tem regra própria logo abaixo para continuar escura. */
    --color-verde-escuro: #a8c4ae;
    }

:where(html[data-tema-escuro]) {

    /* ── Paleta ─────────────────────────────────────────────────────────
       Fundo quase preto com um toque de verde, para conversar com a marca.
       Os textos saem em cinza-claro e não em branco puro: branco puro sobre
       fundo escuro "vibra" e cansa a vista em tela de trabalho. */

    /* A sidebar usava --color-verde-escuro como FUNDO. Clarear o token acima
       deixaria a barra lateral clara; aqui ela volta a ser escura. */
    .app-sidebar,
    .app-sidebar .sidebar-header {
        background: linear-gradient(180deg, #243a2b 0%, #16241a 100%) !important;
    }

    /* Título de página: além do token, há telas com o verde escrito na mão. */
    .page-title, .text-dark-green, h1, h2, h3, h4, h5, h6 {
        color: var(--esc-texto);
    }
    .page-title.text-dark-green, .text-dark-green {
        color: var(--color-verde-escuro) !important;
    }

    /* Bootstrap 5.3 tem modo escuro nativo. O js/tema-escuro.js liga o
       `data-bs-theme="dark"` no <html>, e com isso botões, dropdowns, offcanvas
       e paginação já saem certos sem uma linha nossa. O que vem abaixo é o que
       o Bootstrap não conhece: as classes do projeto e o estilo inline. */

    /* ── Base ───────────────────────────────────────────────────────────── */
    &,
    & body,
    & body.bg-light-eco,
    & body.bg-light {
        background-color: var(--esc-fundo) !important;
        color: var(--esc-texto);
    }

    /* Imagem de fundo clara em tela de login/portal fica velada, senão o
       conteúdo escuro por cima some. */
    body[style*="background-image"]::before {
        background: rgba(0, 0, 0, .45);
    }

    /* ── Superfícies ────────────────────────────────────────────────────── */
    .card,
    .section-card,
    .modal-content,
    .dropdown-menu,
    .list-group-item,
    .accordion-item,
    .accordion-button,
    .offcanvas,
    .toast,
    .popover,
    .custo-table-wrap,
    .quick-card,
    .dep-card,
    .perfil-card,
    .info-item {
        background-color: var(--esc-superficie) !important;
        color: var(--esc-texto);
        /* Sem `!important` na BORDA, de propósito. Com ele, esta regra
           genérica apagava a borda colorida do estado selecionado — na tela
           de NF-e os seis cartões de Destino / Perfil Fiscal ficavam
           idênticos e não dava para saber qual estava escolhido. A borda
           cinza aqui é só o padrão; quem tem estado próprio
           (`.perfil-card.sel-sp`) é mais específico e passa na frente. */
        border-color: var(--esc-borda);
    }

    .card-header, .card-footer, .modal-header, .modal-footer, .accordion-header {
        background-color: var(--esc-superficie-2) !important;
        border-color: var(--esc-borda) !important;
        color: var(--esc-texto);
    }

    /* Cartão clicável: o realce de hover tem que ficar MAIS claro que o
       cartão, não mais escuro — no escuro a intuição se inverte. */
    .quick-card:hover, .perfil-card:hover, .perfil-card.active, .dep-card:hover {
        background-color: var(--esc-superficie-2) !important;
    }

    /* ── Tabelas ────────────────────────────────────────────────────────── */
    .table, .custo-table {
        --bs-table-bg: transparent;
        --bs-table-color: var(--esc-texto);
        --bs-table-border-color: var(--esc-borda);
        --bs-table-striped-bg: rgba(255, 255, 255, .035);
        --bs-table-striped-color: var(--esc-texto);
        --bs-table-hover-bg: rgba(255, 255, 255, .06);
        --bs-table-hover-color: var(--esc-texto);
        color: var(--esc-texto);
        border-color: var(--esc-borda);
    }
    .table > thead, .custo-table thead,
    .table > thead th, .custo-table thead th {
        background-color: var(--esc-superficie-2) !important;
        color: var(--esc-texto) !important;
        border-color: var(--esc-borda) !important;
    }
    .table td, .table th, .custo-table td, .custo-table th {
        border-color: var(--esc-borda) !important;
    }
    .table-light, .table-light > :not(caption) > * > * {
        background-color: var(--esc-superficie-2) !important;
        color: var(--esc-texto) !important;
    }

    /* ── Formulários ────────────────────────────────────────────────────── */
    .form-control, .form-select, .input-group-text, textarea, input, select {
        background-color: var(--esc-campo) !important;
        color: var(--esc-texto) !important;
        border-color: var(--esc-borda-forte) !important;
    }
    .form-control:focus, .form-select:focus {
        background-color: var(--esc-campo) !important;
        border-color: var(--esc-verde-texto) !important;
        box-shadow: 0 0 0 .2rem rgba(155, 186, 162, .25) !important;
    }
    .form-control::placeholder, textarea::placeholder { color: #70797d !important; }
    /* Só `:disabled` ganha cara de desligado. `[readonly]` NÃO entra aqui: na
       tela de colaboradores o campo de busca nasce readonly de propósito (é a
       trava contra o preenchimento automático do Chrome) e sai do readonly no
       foco — pintá-lo de desligado fazia a busca parecer quebrada no escuro,
       que foi o que a captura mostrou. */
    .form-control:disabled, .form-select:disabled {
        background-color: #121619 !important;
        color: var(--esc-texto-fraco) !important;
    }
    .form-label, .form-check-label, label { color: var(--esc-texto); }

    /* O seletor de data do Chrome desenha o ícone em preto — invisível no
       escuro. O filtro inverte só o ícone. */
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator,
    input[type="month"]::-webkit-calendar-picker-indicator {
        filter: invert(1) opacity(.7);
    }

    /* ── Texto e utilitários ────────────────────────────────────────────── */
    .text-dark, .text-black, .text-body { color: var(--esc-texto) !important; }
    .text-muted, .text-secondary { color: var(--esc-texto-fraco) !important; }

    /* As cores semânticas do Bootstrap são as MESMAS nos dois modos: o
       `data-bs-theme="dark"` muda fundo e corpo, não `.text-success` e
       companhia. O verde #198754 em cima do cartão escuro rende 3,1:1 — foi
       o que deixou os valores "R$ 0,00" de Sabesp Compostagem difíceis de
       ler. Aqui cada uma sobe para a versão clara da própria cor.
       (Também precisa ser CSS: a folha do Bootstrap vem do CDN e o tradutor
       não consegue lê-la.) */
    .text-success { color: #5fd49a !important; }
    .text-danger  { color: #f27d8a !important; }
    .text-warning { color: #ffce5c !important; }
    .text-info    { color: #68d2ea !important; }
    .text-primary { color: #7eb0ff !important; }
    .link-success { color: #5fd49a !important; }
    .link-danger  { color: #f27d8a !important; }
    .bg-white, .bg-light, .bg-body, .bg-body-tertiary {
        background-color: var(--esc-superficie) !important;
        color: var(--esc-texto) !important;
    }
    hr, .dropdown-divider { border-color: var(--esc-borda) !important; opacity: 1; }
    .border, .border-top, .border-bottom, .border-start, .border-end {
        border-color: var(--esc-borda) !important;
    }
    .shadow-sm, .shadow { box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .45) !important; }

    /* O botão de fechar do Bootstrap é um SVG preto. */
    .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

    /* ── Botões que o modo escuro do Bootstrap NÃO adapta ───────────────
       `data-bs-theme="dark"` troca a cor do corpo, dos dropdowns e das
       tabelas — mas as VARIANTES de botão são cores fixas nos dois modos.
       `.btn-light` continua #f8f9fa e `.btn-outline-dark` continua escrevendo
       em #212529: o "Limpar" do Flip e do movimento ficavam brancos, e o
       "Fechar Mês" das telas da Sabesp saía preto sobre preto (1,16:1 — o
       texto simplesmente não existia na tela).

       Tem de ser aqui e não no js/tema-escuro.js: essas regras moram na folha
       do Bootstrap, que vem do CDN. O navegador proíbe ler `cssRules` de outro
       domínio, então o tradutor nunca as enxerga em produção.

       O Bootstrap monta cada botão a partir de variáveis `--bs-btn-*`; trocar
       as variáveis acerta fundo, borda, hover e estado ativo de uma vez. */
    .btn-light,
    .btn-check:checked + .btn-light,
    .btn-light:active, .btn-light.active {
        --bs-btn-bg:                  var(--esc-superficie-2);
        --bs-btn-color:               var(--esc-texto);
        --bs-btn-border-color:        var(--esc-borda-forte);
        --bs-btn-hover-bg:            #313b40;
        --bs-btn-hover-color:         var(--esc-texto);
        --bs-btn-hover-border-color:  var(--esc-borda-forte);
        --bs-btn-active-bg:           #37434a;
        --bs-btn-active-color:        var(--esc-texto);
        --bs-btn-active-border-color: var(--esc-borda-forte);
        --bs-btn-disabled-bg:         var(--esc-superficie);
        --bs-btn-disabled-color:      var(--esc-texto-fraco);
        --bs-btn-disabled-border-color: var(--esc-borda);
    }
    .btn-outline-light, .btn-outline-dark, .btn-outline-secondary {
        --bs-btn-color:               var(--esc-texto);
        --bs-btn-border-color:        var(--esc-borda-forte);
        --bs-btn-hover-bg:            var(--esc-superficie-2);
        --bs-btn-hover-color:         var(--esc-texto);
        --bs-btn-hover-border-color:  var(--esc-borda-forte);
        --bs-btn-active-bg:           #37434a;
        --bs-btn-active-color:        var(--esc-texto);
        --bs-btn-active-border-color: var(--esc-borda-forte);
        --bs-btn-disabled-color:      var(--esc-texto-fraco);
        --bs-btn-disabled-border-color: var(--esc-borda);
    }
    .btn-outline-secondary { --bs-btn-color: var(--esc-texto-fraco); }

    /* `.text-muted` dentro de um botão claro era o outro lado do mesmo
       problema: o fundo ficava branco e o texto, clareado, sumia. Com o fundo
       escuro acima, o cinza-fraco volta a ter contraste. */
    .btn-light .text-muted, .btn-light.text-muted { color: var(--esc-texto-fraco) !important; }

    /* ── Abas ───────────────────────────────────────────────────────────── */
    .nav-tabs { border-bottom-color: var(--esc-borda); }
    .nav-tabs .nav-link { color: var(--esc-verde-texto) !important; }
    .nav-tabs .nav-link.active {
        background-color: var(--esc-superficie) !important;
        border-color: var(--esc-borda) var(--esc-borda) var(--esc-superficie) !important;
        color: var(--esc-texto) !important;
    }

    /* ── Avisos (alert) ─────────────────────────────────────────────────── */
    /* Os alerts do Bootstrap são pastéis claros: no escuro viram manchas.
       Fundo translúcido da própria cor, texto na cor viva. */
    .alert { border-width: 1px; }
    .alert-success { background: rgba(25, 135, 84, .15)  !important; color: #75d6a3 !important; border-color: rgba(25,135,84,.4)  !important; }
    .alert-danger  { background: rgba(220, 53, 69, .15)  !important; color: #f08a93 !important; border-color: rgba(220,53,69,.4)  !important; }
    .alert-warning { background: rgba(255, 193, 7, .15)  !important; color: #ffd86b !important; border-color: rgba(255,193,7,.4)  !important; }
    .alert-info    { background: rgba(13, 202, 240, .13) !important; color: #7fdcf5 !important; border-color: rgba(13,202,240,.4) !important; }
    .alert-secondary { background: var(--esc-superficie-2) !important; color: var(--esc-texto) !important; border-color: var(--esc-borda) !important; }

    /* ── Estilo escrito na mão no HTML ──────────────────────────────────
       Estilo inline ganha de qualquer folha de estilo, então aqui o casamento
       é pelo texto do atributo. Só FUNDO claro e só TEXTO escuro: `#fff`
       solto (o texto branco em cima do verde) não entra. */
    [style*="background:#fff" i],
    [style*="background: #fff" i],
    [style*="background-color:#fff" i],
    [style*="background-color: #fff" i],
    [style*="background:white" i],
    [style*="background: white" i],
    [style*="background-color:white" i],
    [style*="background-color: white" i],
    [style*="background:#f8f9fa" i],
    [style*="background: #f8f9fa" i],
    [style*="background-color:#f8f9fa" i],
    [style*="background-color: #f8f9fa" i],
    [style*="background:#fafafa" i],
    [style*="background:#f9f9f9" i],
    [style*="background:#f5f5f5" i],
    [style*="background:#f1f3f5" i],
    [style*="background:#f4f7f6" i],
    [style*="background:#fdfdfd" i] {
        background-color: var(--esc-superficie) !important;
    }

    /* Tons levemente coloridos que o projeto usa como "cartão de dentro". */
    [style*="background:#f0f4f1" i],
    [style*="background: #f0f4f1" i],
    [style*="background:#e9ecef" i],
    [style*="background: #e9ecef" i],
    [style*="background-color:#e9ecef" i],
    [style*="background:#f0f0f0" i] {
        background-color: var(--esc-superficie-2) !important;
    }

    /* Texto escuro escrito na mão, que ficaria ilegível no cartão escuro. */
    [style*="color:#1a1a2e" i], [style*="color: #1a1a2e" i],
    [style*="color:#1a2e1c" i], [style*="color: #1a2e1c" i],
    [style*="color:#2f312f" i], [style*="color: #2f312f" i],
    [style*="color:#212529" i], [style*="color: #212529" i],
    [style*="color:#333" i],    [style*="color: #333" i],
    [style*="color:#000" i],    [style*="color: #000" i],
    [style*="color:#495057" i], [style*="color: #495057" i] {
        color: var(--esc-texto) !important;
    }
    [style*="color:#6c757d" i], [style*="color: #6c757d" i],
    [style*="color:#adb5bd" i], [style*="color: #adb5bd" i] {
        color: var(--esc-texto-fraco) !important;
    }

    /* Borda clara desenhada na mão. */
    [style*="border-top:1px solid #f0f0f0" i],
    [style*="border:1px solid #dee2e6" i],
    [style*="border:1px solid #e9ecef" i],
    [style*="border-color:#dee2e6" i] {
        border-color: var(--esc-borda) !important;
    }

}

/* ── Impressão ──────────────────────────────────────────────────────────
   Relatório impresso sai sempre em papel BRANCO. Sem isto, quem está no
   escuro imprimiria página preta e gastaria um cartucho por folha.
   Fica FORA do bloco acima e escrito por extenso de propósito: aninhado,
   `html` viraria "um <html> dentro do <html>" e nunca casaria. */
@media print {
    html[data-tema-escuro],
    html[data-tema-escuro] body,
    html[data-tema-escuro] .card,
    html[data-tema-escuro] .section-card,
    html[data-tema-escuro] .modal-content,
    html[data-tema-escuro] .table,
    html[data-tema-escuro] [style*="background" i] {
        background: #fff !important;
        color: #000 !important;
    }
}