/*
    atom-tema.css — a paleta do Atom num lugar só, em claro e em escuro.

    Esta folha é irmã da `AtomWMS.Web/wwwroot/css/atom-tema.css`, e os valores são os MESMOS de
    propósito: o AtomHD é um braço do AtomWMS, quem usa um usa o outro no mesmo dia, e duas
    paletas parecidas mas não iguais leem como dois produtos de fornecedores diferentes. Mexer
    numa cor daqui sem mexer na de lá é o começo de as duas divergirem — a partir daí ninguém
    mais sabe qual é a certa.

    O AtomHD chegou aqui por um caminho mais curto que o do AtomWMS: lá a declaração
    `:root { --atom-navy:#0d1b2a; ... }` estava copiada em 140 blocos <style> de view, e o
    trabalho foi arrancá-la de cada uma. Aqui ela nunca existiu — as telas escreviam o hex
    direto. O resultado prático era o mesmo (tema escuro impossível: o <style> da view vem
    depois da folha global e ganha dela), mas a correção é escrever a paleta pela primeira vez
    em vez de consolidá-la.

    Regra ao mexer: o bloco claro reproduz o que o AtomWMS já pinta. Se um valor daqui mudar,
    muda a identidade visual dos dois sistemas de uma vez — que é justamente o ponto.
*/

:root {
    /* Tinta e superficie — viram no escuro */
    --atom-navy: #0d1b2a;           /* tinta principal: titulo, valor, rotulo forte */
    --atom-blue: #1565c0;           /* acento: link, borda de foco, numero em destaque */
    --atom-border: #d0dce8;
    --atom-muted: #6c757d;
    --atom-text: #1a1a2e;
    --atom-superficie: #ffffff;     /* fundo de cartao, tabela, dropdown */
    --atom-superficie-2: #f8faff;   /* faixa sutil: cabecalho de tabela, linha alternada */
    --atom-fundo: #f0f4f8;          /* chao da pagina, atras dos cartoes */
    --atom-bg-row: #e8f1fb;
    --atom-superficie-flutuante: rgba(255, 255, 255, 0.95);  /* painel sobre o mapa e sobre a
                                       cena 3D: precisa de translucidez, entao nao da para
                                       reusar --atom-superficie. */

    /* Semaforo */
    --atom-success: #00c896;
    --atom-danger: #e53935;
    --atom-warning: #f4a261;
    --atom-warn: #f57c00;           /* segundo laranja herdado do AtomWMS: convive com
                                       --atom-warning porque unificar os dois mudaria pixel
                                       nos dois sistemas. */

    /* Tinta de indicador — o numero grande do cartao do painel e o valor colorido dentro de
       uma ficha. Sao tons ESCUROS, escolhidos para ler sobre branco, e por isso somem no
       escuro se ficarem cravados: e o "12 chamados em risco" virando vulto no proprio cartao.

       Existem separados do semaforo acima porque nao sao a mesma cor: --atom-danger (#e53935)
       e o vermelho de alerta em fundo claro; #c62828 e o vermelho que se le como TEXTO. No
       escuro os dois convergem para um vermelho claro — la o problema nao existe. */
    --atom-tinta-vermelha: #c62828;
    --atom-tinta-verde: #2e7d32;
    --atom-tinta-ambar: #f57f17;
    --atom-tinta-teal: #00695c;
    --atom-tinta-roxa: #4527a0;
    --atom-tinta-violeta: #6a1b9a;
    --atom-tinta-laranja: #e65100;

    /* Marca — NAO vira no escuro. E o gradiente navy->azul do login e do botao primario,
       sempre com texto branco por cima: ja e escuro, e inverter deixaria o cabecalho claro
       com letra branca. O menu lateral tem os --sidebar-* dele pela mesma razao. */
    --atom-marca-navy: #0d1b2a;
    --atom-marca-blue: #1565c0;
}

/*
    O bloco escuro vive dentro de @media screen de propósito. Na impressão ele simplesmente não
    se aplica, e os valores claros do :root voltam a valer sozinhos — sem uma segunda cópia da
    paleta clara só para o papel. O navegador não imprime cor de fundo por padrão, mas imprime a
    cor do TEXTO: sem isto, tinta clara de tema escuro sairia em cinza quase branco sobre papel
    branco. No AtomHD quem imprime do navegador é o termo de responsabilidade de aparelho — que
    monta o próprio <html> e nem carrega esta folha —, mas a ficha do chamado e a lista de
    equipamentos também vão para a impressora de vez em quando, e essas passam por aqui.
*/
@media screen {

[data-bs-theme="dark"] {
    --atom-navy: #e6edf3;
    --atom-blue: #6fb5ff;
    --atom-border: #2c3a4a;
    --atom-muted: #93a1b1;
    --atom-text: #e6edf3;
    --atom-superficie: #161f2b;
    --atom-superficie-2: #1e2836;
    --atom-fundo: #0f1620;
    --atom-bg-row: #1a2a3d;
    --atom-superficie-flutuante: rgba(22, 31, 43, 0.95);

    /* Tinta de indicador: no escuro ela sobe para ler sobre o cartao (~7:1 ou mais).
       O tom exato importa menos que o degrau — o que nao pode acontecer e o numero
       ficar mais escuro que a superficie em que se apoia. */
    --atom-tinta-vermelha: #ff8a80;
    --atom-tinta-verde: #7ddc94;
    --atom-tinta-ambar: #ffc046;
    --atom-tinta-teal: #4ecdc4;
    --atom-tinta-roxa: #b39ddb;
    --atom-tinta-violeta: #d59ce8;
    --atom-tinta-laranja: #ffab5e;

    --atom-success: #2ee0a8;
    --atom-danger: #ff7b73;
    --atom-warning: #f6b17a;
    --atom-warn: #ffa726;

    /* O Bootstrap 5.3 ja tem escuro proprio; aqui ele so passa a usar a nossa paleta em vez
       da cinza dele, senao o cartao do Bootstrap e o cartao da tela ficam de tons diferentes.
       --bs-body-bg e a superficie (e dela que cartao, dropdown e modal herdam o fundo); o
       chao da pagina vem do background do body, mais abaixo. */
    --bs-body-bg: var(--atom-superficie);
    --bs-body-bg-rgb: 22, 31, 43;
    --bs-body-color: var(--atom-text);
    --bs-secondary-bg: var(--atom-superficie-2);
    --bs-tertiary-bg: var(--atom-fundo);
    --bs-border-color: var(--atom-border);
    --bs-emphasis-color: var(--atom-navy);
    /* A navbar tira a cor do link daqui, via rgba(var(--bs-emphasis-color-rgb), .65) — sem o
       -rgb ela seguiria o branco puro do Bootstrap, fora da paleta. */
    --bs-emphasis-color-rgb: 230, 237, 243;
}

[data-bs-theme="dark"] body {
    background-color: var(--atom-fundo);
}

}
/* fim do @media screen — daqui para baixo vale também no papel */

/*
    O Bootstrap tem o [data-bs-theme=dark] dele fora de qualquer media query, então na impressão
    ele continuaria escurecendo texto e borda por conta própria. Estes poucos --bs-* desfazem
    isso; é a única duplicação de valor claro no arquivo, e é o preço de não poder editar a
    folha do Bootstrap.
*/
@media print {
    [data-bs-theme="dark"] {
        --bs-body-bg: #ffffff;
        --bs-body-color: #1a1a2e;
        --bs-emphasis-color: #0d1b2a;
        --bs-secondary-color: #6c757d;
        --bs-secondary-bg: #f8faff;
        --bs-tertiary-bg: #f0f4f8;
        --bs-border-color: #d0dce8;
    }

    [data-bs-theme="dark"] body {
        background-color: #ffffff;
        color: #1a1a2e;
    }
}

/*
    Utilitarios do Bootstrap que NAO seguem o data-bs-theme, por serem literais: bg-white e
    branco, table-light e claro, ponto. Tratar aqui, e nao trocando classe tela por tela, tem
    duas vantagens: nao mexe em pixel nenhum do modo claro, e vale para a tela que ainda vai
    ser escrita.
*/
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light {
    background-color: var(--atom-superficie-2) !important;
}

/*
    text-dark e uma cor literal (#212529) com !important: no escuro ela vira preto sobre preto.
    Foi assim que os rotulos do quadro de chamados sumiram na primeira montagem deste tema — o
    numero e o titulo do cartao sao ambos `text-dark`.

    A letra so continua escura onde o FUNDO continua claro — e no escuro os unicos fundos que
    nao mudam sao as cores solidas do Bootstrap (bg-warning e companhia), porque elas nao tem
    versao escura. Dai a excecao por :not(): `badge bg-warning text-dark` fica preto no amarelo,
    como deve; `nav-link text-dark` e `badge bg-light text-dark` clareiam.
*/
[data-bs-theme="dark"] .text-dark:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info) {
    color: var(--atom-text) !important;
}

/*
    navbar-light e a mesma armadilha do text-dark, um nivel acima: ele CRAVA as cores do menu
    superior em rgba(0,0,0,.55) e o icone do botao de sanfona num SVG preto embutido, e nada
    disso segue o data-bs-theme (a classe e do Bootstrap 4, mantida por compatibilidade — a
    forma 5.3 e justamente o data-bs-theme). No escuro o menu superior ficava com os itens em
    preto sobre a barra escura, e o botao de menu do celular sumia por inteiro.

    Aqui, e nao trocando a classe na view, pelo mesmo motivo dos demais: o modo Topo e uma das
    duas metades do _Layout, e a preferencia de menu e por usuario — quem esta no Topo nao
    pode ter uma correcao pior que quem esta no lateral.
*/
[data-bs-theme="dark"] .navbar-light {
    --bs-navbar-color: rgba(230, 237, 243, .72);
    --bs-navbar-hover-color: var(--atom-navy);
    --bs-navbar-active-color: var(--atom-navy);
    --bs-navbar-brand-color: var(--atom-navy);
    --bs-navbar-brand-hover-color: var(--atom-navy);
    --bs-navbar-disabled-color: var(--atom-muted);
    --bs-navbar-toggler-border-color: var(--atom-border);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28230, 237, 243, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/*
    btn-outline-secondary usa --bs-secondary (#6c757d), que o Bootstrap NAO clareia no escuro:
    o botao fica em 3,5:1 sobre o cartao e parece desabilitado. Sao os "Cancelar", "Voltar" e
    "Limpar" de todo formulario, e por isso a correcao e aqui e nao trocando classe. So a
    variante de contorno: no btn-secondary solido a mesma cor e FUNDO, com letra branca por
    cima, e clarea-la pioraria o contraste em vez de melhorar.
*/
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--atom-muted);
    --bs-btn-border-color: var(--atom-border);
    --bs-btn-hover-color: var(--atom-navy);
    --bs-btn-hover-bg: var(--atom-superficie-2);
    --bs-btn-hover-border-color: var(--atom-muted);
    --bs-btn-active-color: var(--atom-navy);
    --bs-btn-active-bg: var(--atom-superficie-2);
    --bs-btn-active-border-color: var(--atom-muted);
    --bs-btn-disabled-color: var(--atom-muted);
    --bs-btn-disabled-border-color: var(--atom-border);
}

[data-bs-theme="dark"] .table-light {
    --bs-table-bg: var(--atom-superficie-2);
    --bs-table-color: var(--atom-text);
    --bs-table-border-color: var(--atom-border);
}

/*
    O <html> leva `background` proprio do Bootstrap; sem isto a area alem do conteudo (abaixo
    do rodape em tela curta, e a faixa do "overscroll" no celular) fica branca no escuro.
*/
[data-bs-theme="dark"] html {
    background-color: var(--atom-fundo);
}

/* O gradiente da marca e o unico lugar onde a cor nao vira; deixar explicito evita que a
   proxima conversao de tela o inverta por engano. */
.atom-marca-gradiente {
    background: linear-gradient(135deg, var(--atom-marca-navy) 0%, var(--atom-marca-blue) 100%);
    color: #fff;
}
