/*
* Tema escuro global do Portal SGA.
*
* Reaproveita a paleta "Vault" já validada no módulo financeiro
* (backend/financeiro/templates/financeiro/_base_financeiro.html), agora
* como tokens compartilhados e alternáveis via atributo `data-theme="dark"`
* na tag — em vez de forçado só num módulo isolado.
*
* Ativado/desativado por portal/static/portal/js/theme-toggle.js.
* Bootstrap 5.1.3 (versão usada aqui) não tem suporte nativo a dark mode
* (isso só chegou no Bootstrap 5.3), então os overrides abaixo são manuais,
* cobrindo os componentes mais usados (cards, tabelas, dropdowns, modais,
* formulários, badges, listas) em vez de cada classe utilitária isolada.
*/
:root[data-theme="dark"] {
--dt-accent: #3b82f6;
--dt-accent-dark: #2563eb;
--dt-accent-soft: rgba(59, 130, 246, 0.12);
--dt-ink: #f4f5f7;
--dt-ink-soft: #c7cad1;
--dt-muted: #8b8f98;
--dt-line: #1f2229;
--dt-bg: #06070a;
--dt-surface: #0e0f13;
--dt-card: #131519;
--dt-card-hover: #17191d;
}
/* ── Barra de rolagem (nativa do navegador) ────────────────────────
Sem isso, qualquer `.table-responsive`/overflow-x fica com o
scrollbar claro padrão do SO/navegador destacado sobre o fundo
escuro — a "faixa branca" mais comum em telas com tabela larga. ── */
:root[data-theme="dark"] * {
scrollbar-color: var(--dt-line) var(--dt-surface);
}
:root[data-theme="dark"] ::-webkit-scrollbar {
width: 12px;
height: 12px;
}
:root[data-theme="dark"] ::-webkit-scrollbar-track {
background: var(--dt-surface);
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: var(--dt-line);
border-radius: 6px;
border: 2px solid var(--dt-surface);
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background: #2a2e37;
}
/* ── Barra lateral — mesma paleta "Vault" já usada no financeiro
(_base_financeiro.html tem um bloco idêntico a este, mas só carrega
nas páginas do módulo financeiro; aqui é a versão que vale pro resto
do site, alternável junto com o tema escuro global). ─────────────── */
:root[data-theme="dark"] #sidebarMenu {
background: #0a0b0e !important;
border-right: 1px solid #17191d;
}
:root[data-theme="dark"] #sidebarMenu .nav-link,
:root[data-theme="dark"] #sidebarMenu .btn,
:root[data-theme="dark"] #sidebarMenu .btn-toggle,
:root[data-theme="dark"] #sidebarMenu .sidebar-text {
color: #9aa0ab !important;
}
:root[data-theme="dark"] #sidebarMenu .nav-link:hover {
color: #fff !important;
background: #15171c !important;
}
:root[data-theme="dark"] #sidebarMenu .nav-item.active > .nav-link,
:root[data-theme="dark"] #sidebarMenu .nav-link.active {
color: #fff !important;
background: rgba(59, 130, 246, 0.16) !important;
}
:root[data-theme="dark"] #sidebarMenu .nav-link .sidebar-icon,
:root[data-theme="dark"] #sidebarMenu .nav-link i {
color: #6b7280 !important;
}
:root[data-theme="dark"] #sidebarMenu .nav-link:hover .sidebar-icon,
:root[data-theme="dark"] #sidebarMenu .nav-link:hover i,
:root[data-theme="dark"] #sidebarMenu .nav-item.active > .nav-link .sidebar-icon,
:root[data-theme="dark"] #sidebarMenu .nav-item.active > .nav-link i,
:root[data-theme="dark"] #sidebarMenu .nav-link.active i {
color: #60a5fa !important;
}
:root[data-theme="dark"] #sidebarMenu .fin-sidebar-group-label {
color: #4b5058 !important;
}
:root[data-theme="dark"] #sidebarMenu #sidebar-search-item .input-group-text,
:root[data-theme="dark"] #sidebarMenu #sidebar-search-item input,
:root[data-theme="dark"] #sidebarMenu #sidebar-search-item .btn {
background: #131519 !important;
border-color: #1f2229 !important;
color: #cfd2d8 !important;
}
:root[data-theme="dark"] #sidebarMenu #sidebar-search-item input:focus {
outline: none;
box-shadow: 0 0 0 0.15rem rgba(59, 130, 246, 0.35) !important;
border-color: #3b82f6 !important;
}
:root[data-theme="dark"] #sidebarMenu #sidebar-search-item input::placeholder {
color: #565b66 !important;
}
/* ── Casca da página ──────────────────────────────────────────────── */
:root[data-theme="dark"] body {
background: var(--dt-bg) !important;
color: var(--dt-ink-soft);
}
:root[data-theme="dark"] main.content {
background: var(--dt-bg);
}
:root[data-theme="dark"] .navbar-top {
background: var(--dt-bg) !important;
border-bottom: 1px solid var(--dt-line);
box-shadow: none !important;
}
:root[data-theme="dark"] .navbar-top .btn-outline-secondary {
color: var(--dt-ink-soft);
border-color: var(--dt-line);
background: transparent;
}
:root[data-theme="dark"] .navbar-top .btn-outline-secondary:hover {
background: var(--dt-card-hover);
}
/* ── Tipografia / texto ───────────────────────────────────────────── */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
:root[data-theme="dark"] .text-dark,
:root[data-theme="dark"] .text-gray-900,
:root[data-theme="dark"] .text-gray-800 {
color: var(--dt-ink) !important;
}
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .text-gray-600,
:root[data-theme="dark"] .text-gray-500 {
color: var(--dt-muted) !important;
}
/* `--bs-primary` deste projeto é #1F2937 (cinza-azulado escuro, pensado
pra fundo claro) — em modo escuro fica ilegível sobre o fundo também
escuro. Troca só a leitura de texto/borda por --dt-accent (azul já
usado no resto do tema); não mexe em --bs-primary global pra não
afetar botões/badges que já têm tratamento próprio. */
:root[data-theme="dark"] .text-primary {
color: var(--dt-accent, #3b82f6) !important;
}
:root[data-theme="dark"] .border-left-primary {
border-left-color: var(--dt-accent, #3b82f6) !important;
}
:root[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item) {
color: #60a5fa;
}
/* ── Cards ────────────────────────────────────────────────────────── */
:root[data-theme="dark"] .card {
background-color: var(--dt-card);
border-color: var(--dt-line);
color: var(--dt-ink-soft);
}
:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-footer {
background-color: var(--dt-surface);
border-color: var(--dt-line);
}
/* ── Tabelas ──────────────────────────────────────────────────────── */
:root[data-theme="dark"] .table {
color: var(--dt-ink-soft);
border-color: var(--dt-line);
}
:root[data-theme="dark"] .table thead th {
color: var(--dt-muted);
border-color: var(--dt-line);
background-color: transparent;
}
:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .table th {
border-color: var(--dt-line);
}
:root[data-theme="dark"] .table-hover tbody tr:hover {
background-color: var(--dt-card-hover);
color: var(--dt-ink);
}
:root[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(255, 255, 255, 0.02);
}
/* ── Formulários ──────────────────────────────────────────────────── */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
background-color: var(--dt-surface);
border-color: var(--dt-line);
color: var(--dt-ink);
}
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
background-color: var(--dt-surface);
border-color: var(--dt-accent);
color: var(--dt-ink);
box-shadow: 0 0 0 0.2rem var(--dt-accent-soft);
}
:root[data-theme="dark"] .form-control::placeholder {
color: #565b66;
}
:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] .form-control[readonly],
:root[data-theme="dark"] .form-select:disabled {
background-color: var(--dt-surface) !important;
border-color: var(--dt-line) !important;
color: var(--dt-muted) !important;
}
/* ── ".readonly-field"/".disabled-select" ad-hoc (não são ,
são /