/* =========================================================================== TEMA ESCURO — AT-ERP (implantação por blocos) --------------------------------------------------------------------------- OPT-IN por tela: a tela adiciona {% block bs_theme %}dark{% endblock %} e o passa a ter data-bs-theme="dark". Telas ainda NÃO convertidas ficam 100% claras (não têm o atributo) — nada muda para elas. Estratégia: aproveitamos o modo escuro NATIVO do Bootstrap 5.3 ([data-bs-theme="dark"]) e apenas RETINTAMOS com a paleta da ATIVA (charcoal-verde + verde esmeralda), igual ao piloto aprovado (PRO002). Documentos/PDF (proposta, orçamento, nota de circulação) NÃO recebem o atributo — continuam claros (papel branco), por exigência de impressão. =========================================================================== */ [data-bs-theme="dark"] { /* Paleta base */ --at-bg:#0d120e; --at-surface:#141a15; --at-surface-2:#182019; --at-line:#232c24; --at-ink:#eef3ee; --at-ink-2:#aebbb0; --at-muted:#7c8a7f; --at-accent:#2ecc71; /* Retinta as variáveis do Bootstrap para a nossa paleta */ --bs-body-bg:#0d120e; --bs-body-color:#eef3ee; --bs-emphasis-color:#ffffff; --bs-secondary-color:#aebbb0; --bs-tertiary-color:#7c8a7f; --bs-body-bg-rgb:13,18,14; --bs-secondary-bg:#141a15; --bs-tertiary-bg:#182019; --bs-border-color:#232c24; --bs-border-color-translucent:rgba(255,255,255,.10); --bs-link-color:#4bd488; --bs-link-hover-color:#6fe0a0; --bs-heading-color:#eef3ee; color-scheme: dark; } /* O tem background inline (#f8f9fa) — precisa do !important para escurecer. */ body[data-bs-theme="dark"] { background:var(--at-bg) !important; color:var(--at-ink); /* A TARJA BRANCA DO FIM DA TELA. O também tem o fundo claro inline, e onde o body acabava aparecia ele — uma faixa branca embaixo do conteúdo, gritante dentro do quadro da entrada de compra (POU052), que é alto e mostra pouca coisa. Com o body ocupando a altura inteira, não sobra html à mostra. */ min-height:100vh; } /* --- Cards e superfícies --------------------------------------------------- */ [data-bs-theme="dark"] .card { --bs-card-bg:var(--at-surface); --bs-card-cap-bg:var(--at-surface-2); --bs-card-border-color:var(--at-line); background-color:var(--at-surface); border-color:var(--at-line); } [data-bs-theme="dark"] .shadow-sm { box-shadow:0 1px 3px rgba(0,0,0,.4) !important; } /* --- Tabelas --------------------------------------------------------------- */ [data-bs-theme="dark"] .table { --bs-table-bg:transparent; --bs-table-color:var(--at-ink); --bs-table-border-color:var(--at-line); --bs-table-hover-bg:var(--at-surface-2); --bs-table-hover-color:#ffffff; --bs-table-striped-bg:rgba(255,255,255,.02); } [data-bs-theme="dark"] .table > :not(caption) > * > * { border-color:var(--at-line); } /* Cabeçalho (thead class="table-light") vira faixa escura discreta */ [data-bs-theme="dark"] .table-light, [data-bs-theme="dark"] .table-light > th, [data-bs-theme="dark"] .table-light > td { --bs-table-bg:var(--at-surface-2); --bs-table-color:var(--at-ink-2); background-color:var(--at-surface-2); color:var(--at-ink-2); border-color:var(--at-line); } /* --- Moldura das listagens (lista.css) ------------------------------------- */ [data-bs-theme="dark"] .lst-sec { background:var(--at-surface); border-color:var(--at-line); } [data-bs-theme="dark"] .lst-head { background:transparent; color:var(--at-ink); border-bottom-color:var(--at-line); } [data-bs-theme="dark"] .lst-sec--secundaria { background:transparent; } [data-bs-theme="dark"] .lst-sec--secundaria td { color:var(--at-muted); } [data-bs-theme="dark"] .lst-head--discreto { color:var(--at-muted); } /* Seção de destaque (âmbar) — mantém o alerta, mas em tom escuro */ [data-bs-theme="dark"] .lst-sec--destaque { border-color:#b8912f; } [data-bs-theme="dark"] .lst-sec--destaque > .lst-head { background:#241f0d; color:#e0b83a; border-bottom-color:#3a3416; } /* Linha cancelada */ [data-bs-theme="dark"] .lst-cancelada > td { background:#2a1c1c !important; color:#c98a8a; } /* --- Formulários ----------------------------------------------------------- */ /* PADRÃO (vale para todas as telas): campo que se PREENCHE (editável) = poço PRETO TOTAL -> --at-campo campo SÓ LEITURA (readonly/disabled) = GRAFITE ESCURO -> --at-campo-bloq O contraste entre os dois é o que diz, de olho, onde se pode digitar. */ [data-bs-theme="dark"] { --at-campo:#000000; --at-campo-bloq:#26292b; } /* !important: o campo editável é preto em QUALQUER tela — nenhuma folha local (nem o realce do navegador) pode clarear o poço. O grafite do bloqueado vem depois, também com !important, então continua vencendo este. */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] textarea.form-control { /* A BORDA do campo é mais clara que a das caixas: o poço preto sobre uma superfície escura só se enxerga pela borda, e com `--at-line` ela sumia — o campo virava um buraco sem contorno no meio do formulário. */ background-color:var(--at-campo) !important; border-color:#3b4a3e; color:var(--at-ink); } /* O padrão vale para QUALQUER campo, mesmo SEM a classe do Bootstrap: várias telas estilizam `input`/`textarea` direto (EST012, por exemplo) e ficavam grafite, com cara de bloqueado. Botões e caixas de marcar ficam de fora (têm regra própria). */ [data-bs-theme="dark"] input:not([type=checkbox],[type=radio],[type=button],[type=submit],[type=reset],[type=range],[type=color],[type=image]), [data-bs-theme="dark"] textarea, [data-bs-theme="dark"] select { background-color:var(--at-campo) !important; border-color:#3b4a3e; color:var(--at-ink); } /* color-scheme direto nos campos: sem isto o navegador renderiza o popup do (e date/select nativos) em CLARO, e o texto do input fica escuro. */ [data-bs-theme="dark"] input, [data-bs-theme="dark"] select, [data-bs-theme="dark"] textarea { color-scheme:dark; } /* Marcador do campo (placeholder): legível, mas sem competir com o que se digita. Vale também para campo sem a classe do Bootstrap. */ [data-bs-theme="dark"] .form-control::placeholder, [data-bs-theme="dark"] input::placeholder, [data-bs-theme="dark"] textarea::placeholder { color:#8f9a91 !important; opacity:1; } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color:var(--at-campo); border-color:var(--at-accent); box-shadow:0 0 0 .2rem rgba(46,204,113,.22); color:var(--at-ink); } /* `.rd-falso` = campo que usa readonly só como TRUQUE contra o autofill do navegador (ele sai no primeiro clique). Não é campo bloqueado: segue preto. */ [data-bs-theme="dark"] .form-control[readonly]:not(.rd-falso), [data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-select:disabled, [data-bs-theme="dark"] textarea.form-control[readonly]:not(.rd-falso), [data-bs-theme="dark"] input[readonly]:not(.rd-falso), [data-bs-theme="dark"] input:disabled, [data-bs-theme="dark"] textarea[readonly]:not(.rd-falso), [data-bs-theme="dark"] textarea:disabled, [data-bs-theme="dark"] select:disabled { background-color:var(--at-campo-bloq) !important; color:var(--at-ink-2); cursor:not-allowed; } [data-bs-theme="dark"] .form-control[readonly].rd-falso { cursor:text; } /* O autofill do Chrome pinta o campo por conta própria — no escuro ele sai GRAFITE, dando a impressão de campo bloqueado. Mantém o poço preto do padrão (o box-shadow interno é a única forma de vencer o estilo interno do navegador). */ [data-bs-theme="dark"] .form-control:-webkit-autofill, [data-bs-theme="dark"] .form-control:-webkit-autofill:hover, [data-bs-theme="dark"] .form-control:-webkit-autofill:focus, [data-bs-theme="dark"] .form-control:autofill, [data-bs-theme="dark"] .form-select:-webkit-autofill { -webkit-box-shadow:0 0 0 1000px var(--at-campo) inset !important; box-shadow:0 0 0 1000px var(--at-campo) inset !important; background-color:var(--at-campo) !important; -webkit-text-fill-color:var(--at-ink) !important; caret-color:var(--at-ink); } [data-bs-theme="dark"] .input-group-text { background-color:var(--at-surface-2); border-color:var(--at-line); color:var(--at-ink-2); } /* Caixas de marcar / radio: no escuro o padrão do Bootstrap fica apagado (some no fundo). Borda mais viva, caixa um pouco maior e marcado no verde da ATIVA. */ [data-bs-theme="dark"] .form-check-input { width:1.15em; height:1.15em; margin-top:.15em; background-color:#0f120f; border:2px solid #6d8a75; cursor:pointer; } [data-bs-theme="dark"] .form-check-input:hover { border-color:var(--at-accent); } [data-bs-theme="dark"] .form-check-input:checked { background-color:var(--at-accent); border-color:var(--at-accent); } [data-bs-theme="dark"] .form-check-input:focus { border-color:var(--at-accent); box-shadow:0 0 0 .2rem rgba(46,204,113,.25); } [data-bs-theme="dark"] .form-check-input:disabled { opacity:.5; cursor:not-allowed; } /* Caixa/opção SEM a classe do Bootstrap (várias telas usam puro): o controle nativo fica cinza-apagado no escuro. `accent-color` pinta no verde da ATIVA e o tamanho acompanha o do Bootstrap. */ [data-bs-theme="dark"] input[type=checkbox]:not(.form-check-input), [data-bs-theme="dark"] input[type=radio]:not(.form-check-input) { accent-color:var(--at-accent); width:1.05em; height:1.05em; cursor:pointer; } /* --- Botões (mantêm sentido; só afinamos os "claros") ---------------------- */ [data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color:var(--at-ink-2); --bs-btn-border-color:var(--at-line); --bs-btn-hover-bg:var(--at-surface-2); --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:var(--at-line); } [data-bs-theme="dark"] .btn-light { --bs-btn-bg:var(--at-surface-2); --bs-btn-border-color:var(--at-line); --bs-btn-color:var(--at-ink); --bs-btn-hover-bg:var(--at-line); --bs-btn-hover-color:#fff; } /* Outline com a cor do MÓDULO (base.html pinta com --mod): as cores dos módulos foram feitas para fundo claro e no escuro ficam sem contraste (texto quase invisível). Aqui clareamos a cor do texto/borda; o hover continua na cor cheia. */ [data-bs-theme="dark"] .btn-outline-primary, [data-bs-theme="dark"] .btn-outline-success { --bs-btn-color:color-mix(in srgb, var(--mod, #198754) 40%, #fff); --bs-btn-border-color:color-mix(in srgb, var(--mod, #198754) 62%, #fff); --bs-btn-hover-bg:var(--mod, #198754); --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:var(--mod, #198754); --bs-btn-active-bg:var(--mod, #198754); --bs-btn-active-color:#fff; --bs-btn-disabled-color:color-mix(in srgb, var(--mod, #198754) 34%, #fff); --bs-btn-disabled-border-color:color-mix(in srgb, var(--mod, #198754) 40%, #fff); } /* Danger/warning outline: tons claros o suficiente para ler no escuro. */ [data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color:#f28b82; --bs-btn-border-color:#a8443c; --bs-btn-hover-bg:#a8443c; --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:#a8443c; } [data-bs-theme="dark"] .btn-outline-warning { --bs-btn-color:#f5c761; --bs-btn-border-color:#8a6b22; --bs-btn-hover-bg:#8a6b22; --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:#8a6b22; } /* --- Texto de apoio / links dentro do conteúdo ----------------------------- */ [data-bs-theme="dark"] .text-secondary { color:var(--at-ink-2) !important; } [data-bs-theme="dark"] .text-muted { color:var(--at-muted) !important; } /* app.css pinta links do conteúdo com a cor do módulo; no escuro usamos o verde */ [data-bs-theme="dark"] main a:not(.btn) { color:#4bd488; } [data-bs-theme="dark"] main a:not(.btn):hover { color:#6fe0a0; } /* --- Popup PADRÃO do sistema (appConfirm/appAlert) ------------------------- Quando ele abre POR CIMA de outro popup (ex.: a ficha da empresa, POU013), os dois ficavam com a mesma cor e parecia que nada tinha acontecido. Aqui o de cima ganha superfície mais clara, borda no verde da ATIVA e sombra funda — lê-se na hora que é uma resposta nova, e não a tela de trás. */ [data-bs-theme="dark"] #appDialog .modal-content { background:#20241f; border:1px solid var(--at-accent); border-radius:12px; box-shadow:0 26px 70px rgba(0,0,0,.78), 0 0 0 4px rgba(46,204,113,.12); } [data-bs-theme="dark"] #appDialog .modal-header { background:#1a1f19; border-bottom-color:#2c352c; } [data-bs-theme="dark"] #appDialog .modal-footer { border-top-color:#2c352c; } [data-bs-theme="dark"] #appDialog .modal-body { color:var(--at-ink); } /* Popup sobre popup: escurece mais o que está atrás. */ [data-bs-theme="dark"] .modal-backdrop.show { opacity:.65; } /* --- Badges/contadores claros (text-bg-light / secondary) ------------------ */ [data-bs-theme="dark"] .text-bg-light { background-color:var(--at-surface-2) !important; color:var(--at-ink-2) !important; } /* .bg-light cravado (ex.: campos Descrição/Total dos itens) -> superfície escura */ [data-bs-theme="dark"] .bg-light { background-color:var(--at-surface-2) !important; color:var(--at-ink) !important; } /* --- Padrões comuns das telas com estilo próprio (fiscal/financeiro/estoque) São classes repetidas em vários