/* ============================================================================ * ERP Gestão Deluz — Sistema de Temas (Claro / Escuro / Auto) * ============================================================================ * Carregado DEPOIS de design-system.css em base.html para sobrescrever * superfícies e cores com tokens semânticos. Compatível com Bootstrap 5.3: * usamos `data-bs-theme="light|dark"` no (nativo do Bootstrap 5.3). * * Estratégia: * 1. Definimos tokens semânticos (--bg-*, --text-*, --border-*) por tema. * 2. Refatoramos uso de cores hardcoded para esses tokens. * 3. A navbar SEMPRE permanece navy (identidade da marca) — no dark fica * ainda mais escura, "ink black", para harmonizar com o resto. * 4. Brand verde no dark sobe um tom (emerald-400) para contrastar melhor. * * Inspirações: Linear (slate-900 base), Vercel (ink), Stripe Dashboard. * ========================================================================== */ /* ============================================================================ * 1. TOKENS SEMÂNTICOS — modo CLARO (default) * ========================================================================== */ :root, :root[data-bs-theme="light"], html[data-bs-theme="light"] { /* === Superfícies (camadas de elevação) === */ --bg-app: #dbe4f0; /* fundo do app (corporate slate-200 azulado SATURADO — separação visual clara do navbar navy e dos cards brancos. Antes #eef2f8 era percebido como "branco" contra navbar navy; este tom mais escuro/azulado elimina a "faixa branca" reportada). */ --bg-surface: #ffffff; /* card, panel, navbar dropdown */ --bg-elevated: #ffffff; /* modal, dropdown sobreposto */ --bg-subtle: #f8fafc; /* sub-fundo (footer modal, table head) */ --bg-hover: #f1f5f9; /* hover de table row, dropdown item */ --bg-input: #ffffff; /* fundo de inputs */ --bg-code: rgba(15, 23, 42, 0.06); /* inline code, pre */ /* Aliases legacy (auditoria 07/2026): várias telas usam var(--surface)/ var(--surface-2) SEM definição — no dark caíam no fallback #fff (ou em transparente quando sem fallback). Apontam pros tokens equivalentes (mapa oficial em deluz-components.css: --surface → --bg-surface, --surface-2 → --bg-subtle). Definidos nos DOIS temas. */ --surface: var(--bg-surface); --surface-2: var(--bg-subtle); /* === Texto === */ --text-strong: #0f172a; /* slate-900 — titles, números importantes */ --text-base: #334155; /* slate-700 — corpo principal */ --text-muted: #64748b; /* slate-500 — labels, captions */ --text-faint: #94a3b8; /* slate-400 — placeholder, dividers */ --text-inverse: #ffffff; /* texto sobre fundos escuros (navy, brand) */ --text-link: #047857; /* brand-700 */ /* === Bordas === */ --border-subtle: #e2e8f0; /* slate-200 — bordas suaves */ --border-strong: #cbd5e1; /* slate-300 — bordas mais visíveis */ --border-focus: #10b981; /* brand-500 */ /* === Sombras (modo claro: leves, baseadas em slate-900) === */ --shadow-card: 0 1px 1.5px rgba(15, 23, 42, 0.04); --shadow-pop: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05); --shadow-lift: 0 4px 8px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-modal: 0 20px 32px rgba(15, 23, 42, 0.10), 0 8px 12px rgba(15, 23, 42, 0.05); --shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.18); /* === Identidade — navy SEMPRE permanece navy (marca) === */ --corp-navy-bg: var(--navy-900); --corp-navy-bg-2: var(--navy-800); --corp-navy-border: rgba(255, 255, 255, 0.08); /* === Brand verde — tom usado em UI (botões, links) === */ --brand-ui: #10b981; /* brand-500 */ --brand-ui-hover: #059669; /* brand-600 */ --brand-ui-soft: #ecfdf5; /* brand-50 */ --brand-ui-soft-text: #047857; /* brand-700 */ /* === Semânticos contextuais (badges soft, alerts) === */ --sem-success-soft: #ecfdf5; --sem-success-text: #047857; --sem-success-border: rgba(16, 185, 129, 0.24); --sem-info-soft: #f0f9ff; --sem-info-text: #0369a1; --sem-info-border: rgba(14, 165, 233, 0.22); --sem-warning-soft: #fffbeb; --sem-warning-text: #b45309; --sem-warning-border: rgba(245, 158, 11, 0.28); --sem-danger-soft: #fef2f2; --sem-danger-text: #b91c1c; --sem-danger-border: rgba(239, 68, 68, 0.24); /* === Scrollbar === */ --scrollbar-thumb: #cbd5e1; --scrollbar-thumb-hover: #94a3b8; /* === Selection === */ --selection-bg: #a7f3d0; --selection-text: #064e3b; } /* ============================================================================ * 2. TOKENS SEMÂNTICOS — modo ESCURO * ============================================================================ * Inspirado em Linear/Vercel: base "ink" (azulado bem escuro, não preto puro) * com elevações sutis em slate-800/850. Navy fica ainda mais escuro para * combinar com base geral. Brand verde sobe para emerald-400 (#34d399) que * pulse melhor em fundos escuros. * ========================================================================== */ :root[data-bs-theme="dark"], html[data-bs-theme="dark"] { /* === Superfícies (camadas de elevação no escuro) === */ --bg-app: #0b1220; /* base "ink" — mais escuro que slate-950 */ --bg-surface: #131c2e; /* card padrão (slate-850-ish) */ --bg-elevated: #1a2438; /* modal, dropdown elevados */ --bg-subtle: #1f2a40; /* sub-fundo (table head, modal footer) */ --bg-hover: #243149; /* hover de table row, dropdown item */ --bg-input: #131c2e; /* fundo de inputs (mesmo que card) */ --bg-code: rgba(148, 163, 184, 0.16); /* code/pre */ /* Aliases legacy --surface/--surface-2 — ver bloco do tema claro. Aqui resolvem pros tons escuros (#131c2e / #1f2a40). */ --surface: var(--bg-surface); --surface-2: var(--bg-subtle); /* === Texto === */ --text-strong: #f1f5f9; /* slate-100 — titles */ --text-base: #cbd5e1; /* slate-300 — corpo */ --text-muted: #94a3b8; /* slate-400 — labels */ --text-faint: #64748b; /* slate-500 — dividers, placeholder */ --text-inverse: #ffffff; --text-link: #34d399; /* brand-400 — mais brilhante no dark */ /* === Bordas === */ --border-subtle: #243149; /* sutil mas perceptível */ --border-strong: #334155; /* slate-700 */ --border-focus: #34d399; /* emerald-400 */ /* === Sombras (dark: sombras pretas + contrast ring sutil em branco) === Sombras puras somem em fundo escuro — adicionamos um halo branco muito sutil (1px) que serve de "edge highlight" para dar profundidade. */ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04); --shadow-pop: 0 2px 4px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05); --shadow-lift: 0 8px 16px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.06); --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06); --shadow-focus: 0 0 0 3px rgba(52, 211, 153, 0.28); /* === Navy no dark — fica AINDA mais escuro pra harmonizar c/ bg-app ink === */ --corp-navy-bg: #06101f; --corp-navy-bg-2: #0a182b; --corp-navy-border: rgba(255, 255, 255, 0.06); /* === Brand verde — tom dark vibrante === */ --brand-ui: #34d399; /* emerald-400 */ --brand-ui-hover: #6ee7b7; /* emerald-300 */ --brand-ui-soft: rgba(52, 211, 153, 0.12); --brand-ui-soft-text: #6ee7b7; /* === Semânticos contextuais no dark === */ --sem-success-soft: rgba(16, 185, 129, 0.14); --sem-success-text: #6ee7b7; --sem-success-border: rgba(52, 211, 153, 0.30); --sem-info-soft: rgba(56, 189, 248, 0.14); --sem-info-text: #7dd3fc; --sem-info-border: rgba(56, 189, 248, 0.30); --sem-warning-soft: rgba(251, 191, 36, 0.14); --sem-warning-text: #fcd34d; --sem-warning-border: rgba(251, 191, 36, 0.32); --sem-danger-soft: rgba(248, 113, 113, 0.14); --sem-danger-text: #fca5a5; --sem-danger-border: rgba(248, 113, 113, 0.32); /* === Scrollbar === */ --scrollbar-thumb: #334155; --scrollbar-thumb-hover: #475569; /* === Selection === */ --selection-bg: rgba(52, 211, 153, 0.30); --selection-text: #ecfdf5; /* === Override de tokens legacy do style.css === (--color-*-text/--color-*-soft) — para módulos como compras/financeiro que herdam essas vars. Mantém integração visual no dark. */ --color-primary-text: #6ee7b7; --color-success-text: #6ee7b7; --color-info-text: #7dd3fc; --color-warning-text: #fcd34d; --color-danger-text: #fca5a5; --color-purple-text: #c4b5fd; --color-primary-soft: rgba(52, 211, 153, 0.14); --color-success-soft: rgba(52, 211, 153, 0.14); --color-info-soft: rgba(56, 189, 248, 0.14); --color-warning-soft: rgba(251, 191, 36, 0.14); --color-danger-soft: rgba(248, 113, 113, 0.14); --color-purple-soft: rgba(167, 139, 250, 0.14); /* Tokens de superfície/texto legacy — mapeados para tema dark */ --surface-app: #0b1220; --surface-card: #131c2e; --surface-subtle: #1f2a40; --surface-hover: #243149; --surface-overlay: rgba(0, 0, 0, 0.70); --surface-elevated: #1a2438; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-tertiary: #94a3b8; /* --text-muted já está acima */ /* Override tokens design-system.css */ --slate-100: #1f2a40; --slate-200: #243149; --slate-300: #334155; --slate-400: #475569; --slate-500: #94a3b8; --slate-600: #cbd5e1; --slate-700: #e2e8f0; --slate-800: #f1f5f9; --slate-900: #f8fafc; /* Sombras corp no dark (sombras pretas em vez de slate-900) */ --shadow-corp-xs: 0 1px 1.5px rgba(0, 0, 0, 0.35); --shadow-corp-sm: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 1px rgba(0, 0, 0, 0.20); --shadow-corp-md: 0 2px 4px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-corp-lg: 0 8px 16px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.30); --shadow-corp-xl: 0 20px 32px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.35); } /* ============================================================================ * 3. APLICAÇÃO BASE — body, transições, scrollbar, selection * ========================================================================== */ /* Transição suave APENAS em elementos-chave (não no * — fica lento). */ html { background-color: var(--bg-app); color-scheme: light; } html[data-bs-theme="dark"] { color-scheme: dark; } body { background-color: var(--bg-app) !important; color: var(--text-base); transition: background-color 200ms ease, color 200ms ease; } /* Headings: tom mais "strong" */ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--text-strong); transition: color 200ms ease; } p { color: var(--text-base); } /* Selection custom (light/dark) */ ::selection { background: var(--selection-bg); color: var(--selection-text); } /* Scrollbar custom */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box; } /* ---------------------------------------------------------------------------- * Chart scroll — contêiner com altura LIMITADA e rolagem vertical interna. * Usado em gráficos de barras horizontais "lista" (margem/ranking/top * fornecedores) onde o nº de itens é grande: o canvas interno cresce em * altura (barras legíveis) mas a área visível para num teto, rolando dentro * do próprio card em vez de esticar a página. A altura interna do canvas é * setada via JS no elemento filho (.chart-wrap / *-wrap). * -------------------------------------------------------------------------- */ .chart-scroll { max-height: var(--chart-scroll-max, 440px); overflow-y: auto; overflow-x: hidden; /* leve respiro p/ a barra de rolagem não colar nas barras do gráfico */ padding-right: 2px; } /* Scrollbar sutil, fina e na cor da borda (consistente com o design system) */ .chart-scroll::-webkit-scrollbar { width: 8px; } .chart-scroll::-webkit-scrollbar-track { background: transparent; } .chart-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; } .chart-scroll::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box; } /* Firefox */ .chart-scroll { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } /* CRÍTICO: style.css tem um `canvas { max-height: 320px }` GLOBAL que travava a altura de TODO gráfico em 320px — com muitas equipes as barras ficavam "minúsculas". Dentro do .chart-scroll o canvas PRECISA crescer (N itens × ~46px) para rolar internamente; por isso removemos o teto só aqui. */ .chart-scroll canvas { max-height: none !important; } /* ============================================================================ * 4. NAVBAR — SEMPRE navy (identidade da marca) * ============================================================================ * No light: navy 900 → 800 gradiente (como está). * No dark: navy quase preto (#06101f → #0a182b) para harmonizar com o bg-app * "ink" sem competir visualmente. * ========================================================================== */ .navbar, .navbar.bg-white, .navbar.navbar-light, nav.navbar.navbar-expand-lg { background: linear-gradient(180deg, var(--corp-navy-bg) 0%, var(--corp-navy-bg-2) 100%) !important; background-color: var(--corp-navy-bg) !important; border-bottom: 1px solid var(--corp-navy-border) !important; } /* No dark, a navbar fica ainda mais "premium" com sombra inferior mais marcada */ html[data-bs-theme="dark"] .navbar { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 2px 12px rgba(0, 0, 0, 0.35) !important; } /* ============================================================================ * 5. CARDS * ========================================================================== */ .card { background: var(--bg-surface) !important; border-color: var(--border-subtle) !important; color: var(--text-base); transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; } .card-header { /* light: gradiente sutil; dark: chapado pra não ficar "estranho" */ background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-subtle) 100%) !important; border-bottom-color: var(--border-subtle) !important; color: var(--text-strong); } html[data-bs-theme="dark"] .card-header { background: var(--bg-subtle) !important; } .card-footer { background: var(--bg-subtle) !important; border-top-color: var(--border-subtle) !important; color: var(--text-muted); } .card.shadow-sm, .card.shadow { box-shadow: var(--shadow-pop) !important; } /* Module cards (home) */ .module-card { background: var(--bg-surface); border-color: var(--border-subtle); color: var(--text-base); } .module-card .card-title { color: var(--text-strong); } .module-card .card-text { color: var(--text-muted); } .module-card:hover { border-color: var(--brand-ui); box-shadow: var(--shadow-lift); } /* ============================================================================ * 6. TABELAS * ========================================================================== */ .table { --bs-table-bg: var(--bg-surface); --bs-table-color: var(--text-base); color: var(--text-base); } .table > :not(caption) > * > * { border-bottom-color: var(--border-subtle) !important; background: transparent; } .table > thead, .table > thead th, .table-light > thead > tr > th, thead.table-light th { background: var(--bg-subtle) !important; color: var(--text-muted) !important; border-bottom-color: var(--border-subtle) !important; } .table-hover > tbody > tr:hover > * { background-color: var(--bg-hover) !important; color: var(--text-strong); } .table tbody td { color: var(--text-base); } /* Estilizações DRE no dark — soft com bordas */ html[data-bs-theme="dark"] .dre-tbl .table-success td, html[data-bs-theme="dark"] .dre-tbl tr.table-success > * { background: var(--sem-success-soft) !important; color: var(--sem-success-text) !important; } html[data-bs-theme="dark"] .dre-tbl .table-warning td, html[data-bs-theme="dark"] .dre-tbl tr.table-warning > * { background: var(--sem-warning-soft) !important; color: var(--sem-warning-text) !important; } html[data-bs-theme="dark"] .dre-tbl .table-info td, html[data-bs-theme="dark"] .dre-tbl tr.table-info > * { background: var(--sem-info-soft) !important; color: var(--sem-info-text) !important; } html[data-bs-theme="dark"] .dre-tbl .table-primary td, html[data-bs-theme="dark"] .dre-tbl tr.table-primary > * { background: var(--brand-ui-soft) !important; color: var(--brand-ui-soft-text) !important; } /* ============================================================================ * 7. FORMS * ========================================================================== */ .form-control, .form-select, textarea.form-control { background: var(--bg-input) !important; color: var(--text-strong) !important; border-color: var(--border-strong) !important; transition: border-color 140ms ease, box-shadow 140ms ease, background-color 200ms ease, color 200ms ease; } .form-control:hover, .form-select:hover { border-color: var(--text-faint) !important; } .form-control:focus, .form-select:focus { background: var(--bg-input) !important; color: var(--text-strong) !important; border-color: var(--border-focus) !important; box-shadow: var(--shadow-focus) !important; } .form-control::placeholder { color: var(--text-faint); opacity: 1; } .form-label { color: var(--text-base); } .form-label.fw-semibold { color: var(--text-strong); } .form-text { color: var(--text-muted); } .form-check-label { color: var(--text-base); } .form-check-input { background-color: var(--bg-input); border-color: var(--border-strong); } .form-check-input:checked { background-color: var(--brand-ui); border-color: var(--brand-ui); } /* Input group prefix/suffix */ .input-group-text { background: var(--bg-subtle) !important; border-color: var(--border-strong) !important; color: var(--text-muted) !important; } /* Date inputs — torna o ícone do calendário visível em AMBOS temas e dá um estilo decente pros campos vazios (que por padrão mostram "----- --" bem cinza/feio). Em light: ícone com opacity alta + tom de marca; em dark: filtra invertido. */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator, input[type="week"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.75; padding: 4px; margin-left: 4px; border-radius: 4px; transition: opacity 120ms ease, background-color 120ms ease; } input[type="date"]::-webkit-calendar-picker-indicator:hover, input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover, input[type="month"]::-webkit-calendar-picker-indicator:hover, input[type="time"]::-webkit-calendar-picker-indicator:hover, input[type="week"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background-color: var(--bg-subtle); } html[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, html[data-bs-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator, html[data-bs-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator, html[data-bs-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator, html[data-bs-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator { filter: invert(0.85); } /* Placeholders "----- --" dos campos de data vazios — Chrome/Edge usam essas pseudo-classes para os "fields" internos. Dá uma cor muted neutra ao invés do cinza padrão que parece "lixo visual". */ input[type="date"]::-webkit-datetime-edit-fields-wrapper, input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper, input[type="month"]::-webkit-datetime-edit-fields-wrapper, input[type="time"]::-webkit-datetime-edit-fields-wrapper, input[type="week"]::-webkit-datetime-edit-fields-wrapper { color: var(--text-base); } input[type="date"]:invalid::-webkit-datetime-edit, input[type="datetime-local"]:invalid::-webkit-datetime-edit, input[type="month"]:invalid::-webkit-datetime-edit, input[type="time"]:invalid::-webkit-datetime-edit, input[type="week"]:invalid::-webkit-datetime-edit { color: var(--text-muted); opacity: 0.6; } input[type="date"]::-webkit-datetime-edit-text, input[type="datetime-local"]::-webkit-datetime-edit-text, input[type="month"]::-webkit-datetime-edit-text, input[type="time"]::-webkit-datetime-edit-text, input[type="week"]::-webkit-datetime-edit-text { color: var(--text-muted); padding: 0 2px; } /* ============================================================================ * 8. DROPDOWNS * ========================================================================== */ .dropdown-menu { background: var(--bg-elevated) !important; border-color: var(--border-subtle) !important; box-shadow: var(--shadow-modal) !important; color: var(--text-base); } .dropdown-item { color: var(--text-base) !important; } .dropdown-item:hover, .dropdown-item:focus { background: var(--bg-hover) !important; color: var(--text-strong) !important; } .dropdown-item:active { background: var(--brand-ui-soft) !important; color: var(--brand-ui-soft-text) !important; } .dropdown-item i { color: var(--text-muted); } .dropdown-item:hover i { color: var(--brand-ui); } .dropdown-divider { border-color: var(--border-subtle) !important; } .dropdown-header { color: var(--text-faint) !important; } .dropdown-item-text { color: var(--text-base); } /* ============================================================================ * 9. MODAIS * ========================================================================== */ .modal-content { background: var(--bg-elevated) !important; border-color: var(--border-subtle) !important; box-shadow: var(--shadow-modal) !important; color: var(--text-base); } .modal-header { border-bottom-color: var(--border-subtle) !important; } .modal-title { color: var(--text-strong) !important; } .modal-body { color: var(--text-base) !important; } .modal-footer { border-top-color: var(--border-subtle) !important; background: var(--bg-subtle) !important; } .modal-backdrop.show { /* No dark, overlay mais opaco (preto profundo) pra contraste */ opacity: 0.65; } html[data-bs-theme="dark"] .modal-backdrop { background-color: #000; } /* Close button — no dark precisa virar branco */ html[data-bs-theme="dark"] .btn-close { filter: invert(0.92) brightness(1.3); } /* ============================================================================ * 10. OFFCANVAS (filtros, etc) * ========================================================================== */ .offcanvas { background: var(--bg-elevated) !important; color: var(--text-base); border-left-color: var(--border-subtle) !important; box-shadow: var(--shadow-modal) !important; } .offcanvas-header, .offcanvas-body, .offcanvas-footer { border-color: var(--border-subtle) !important; } .offcanvas-title { color: var(--text-strong); } .offcanvas-footer { background: var(--bg-subtle) !important; } /* ============================================================================ * 11. ALERTS — soft no dark * ========================================================================== */ html[data-bs-theme="dark"] .alert-success { background: var(--sem-success-soft); color: var(--sem-success-text); border-color: var(--sem-success-border); } html[data-bs-theme="dark"] .alert-info { background: var(--sem-info-soft); color: var(--sem-info-text); border-color: var(--sem-info-border); } html[data-bs-theme="dark"] .alert-warning { background: var(--sem-warning-soft); color: var(--sem-warning-text); border-color: var(--sem-warning-border); } html[data-bs-theme="dark"] .alert-danger { background: var(--sem-danger-soft); color: var(--sem-danger-text); border-color: var(--sem-danger-border); } /* ============================================================================ * 12. TOASTS — manter cores vibrantes (notificação) em ambos os temas * No dark dão um leve "glow" graças à shadow-lift * ========================================================================== */ html[data-bs-theme="dark"] .toast { border-color: var(--border-subtle); box-shadow: var(--shadow-modal); } /* ============================================================================ * 13. BADGES — soft variants * ========================================================================== */ html[data-bs-theme="dark"] .badge.bg-success { background: var(--sem-success-soft) !important; color: var(--sem-success-text) !important; border-color: var(--sem-success-border); } html[data-bs-theme="dark"] .badge.bg-primary { background: var(--brand-ui-soft) !important; color: var(--brand-ui-soft-text) !important; border-color: rgba(52, 211, 153, 0.30); } html[data-bs-theme="dark"] .badge.bg-warning { background: var(--sem-warning-soft) !important; color: var(--sem-warning-text) !important; border-color: var(--sem-warning-border); } html[data-bs-theme="dark"] .badge.bg-danger { background: var(--sem-danger-soft) !important; color: var(--sem-danger-text) !important; border-color: var(--sem-danger-border); } html[data-bs-theme="dark"] .badge.bg-info { background: var(--sem-info-soft) !important; color: var(--sem-info-text) !important; border-color: var(--sem-info-border); } html[data-bs-theme="dark"] .badge.bg-secondary { background: var(--bg-hover) !important; color: var(--text-base) !important; border-color: var(--border-strong); } html[data-bs-theme="dark"] .badge.bg-light { background: var(--bg-subtle) !important; color: var(--text-base) !important; border-color: var(--border-subtle); } /* Soft variants Bootstrap 5.3 (bg-X-subtle text-X-emphasis) */ html[data-bs-theme="dark"] .bg-primary-subtle { background-color: var(--brand-ui-soft) !important; } html[data-bs-theme="dark"] .bg-success-subtle { background-color: var(--sem-success-soft) !important; } html[data-bs-theme="dark"] .bg-warning-subtle { background-color: var(--sem-warning-soft) !important; } html[data-bs-theme="dark"] .bg-danger-subtle { background-color: var(--sem-danger-soft) !important; } html[data-bs-theme="dark"] .bg-info-subtle { background-color: var(--sem-info-soft) !important; } html[data-bs-theme="dark"] .bg-secondary-subtle{ background-color: var(--bg-hover) !important; } html[data-bs-theme="dark"] .text-primary-emphasis { color: var(--brand-ui-soft-text) !important; } html[data-bs-theme="dark"] .text-success-emphasis { color: var(--sem-success-text) !important; } html[data-bs-theme="dark"] .text-warning-emphasis { color: var(--sem-warning-text) !important; } html[data-bs-theme="dark"] .text-danger-emphasis { color: var(--sem-danger-text) !important; } html[data-bs-theme="dark"] .text-info-emphasis { color: var(--sem-info-text) !important; } html[data-bs-theme="dark"] .text-secondary-emphasis { color: var(--text-base) !important; } /* ============================================================================ * 14. UTILITÁRIOS BOOTSTRAP — override no dark * ========================================================================== */ html[data-bs-theme="dark"] .text-muted { color: var(--text-muted) !important; } html[data-bs-theme="dark"] .text-dark { color: var(--text-strong) !important; } html[data-bs-theme="dark"] .text-body { color: var(--text-base) !important; } html[data-bs-theme="dark"] .text-secondary{ color: var(--text-muted) !important; } html[data-bs-theme="dark"] .text-primary { color: var(--brand-ui-soft-text) !important; } html[data-bs-theme="dark"] .text-success { color: var(--sem-success-text) !important; } html[data-bs-theme="dark"] .text-danger { color: var(--sem-danger-text) !important; } html[data-bs-theme="dark"] .text-warning { color: var(--sem-warning-text) !important; } html[data-bs-theme="dark"] .text-info { color: var(--sem-info-text) !important; } html[data-bs-theme="dark"] .bg-white { background-color: var(--bg-surface) !important; color: var(--text-base); } html[data-bs-theme="dark"] .bg-light { background-color: var(--bg-subtle) !important; color: var(--text-base); } html[data-bs-theme="dark"] .bg-body { background-color: var(--bg-app) !important; } html[data-bs-theme="dark"] .border, html[data-bs-theme="dark"] .border-top, html[data-bs-theme="dark"] .border-bottom, html[data-bs-theme="dark"] .border-start, html[data-bs-theme="dark"] .border-end { border-color: var(--border-subtle) !important; } /* Bootstrap "table-light" / "table-striped" no dark */ html[data-bs-theme="dark"] .table-light { --bs-table-bg: var(--bg-subtle); --bs-table-color: var(--text-base); --bs-table-border-color: var(--border-subtle); } html[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(255, 255, 255, 0.02); color: var(--text-base); } /* ============================================================================ * 15. PAGE HEADER / BREADCRUMB * ========================================================================== */ .page-header { border-bottom-color: var(--border-subtle); } .page-header__title { color: var(--text-strong); } .page-header__subtitle { color: var(--text-muted); } /* Page header icon — soft com brand */ html[data-bs-theme="dark"] .page-header__title i { background: linear-gradient(135deg, var(--brand-ui-soft), rgba(52, 211, 153, 0.20)); color: var(--brand-ui-soft-text); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.24); } html[data-bs-theme="dark"] .page-header__title i.text-danger { background: linear-gradient(135deg, var(--sem-danger-soft), rgba(248, 113, 113, 0.22)); color: var(--sem-danger-text); } html[data-bs-theme="dark"] .page-header__title i.text-warning { background: linear-gradient(135deg, var(--sem-warning-soft), rgba(251, 191, 36, 0.22)); color: var(--sem-warning-text); } html[data-bs-theme="dark"] .page-header__title i.text-info { background: linear-gradient(135deg, var(--sem-info-soft), rgba(56, 189, 248, 0.22)); color: var(--sem-info-text); } .breadcrumb-trail { color: var(--text-muted); } .breadcrumb-trail a { color: var(--text-muted); } .breadcrumb-trail a:hover { color: var(--brand-ui); } .breadcrumb-trail__sep { color: var(--text-faint); } /* ============================================================================ * 16. FOOTER * ========================================================================== */ .app-footer { background: var(--bg-surface); border-top-color: var(--border-subtle); color: var(--text-muted); } .app-footer a { color: var(--text-base); } .app-footer a:hover { color: var(--brand-ui); } /* ============================================================================ * 17. WELCOME HERO (home) * ========================================================================== */ .welcome-hero { background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(16, 185, 129, 0.06), transparent 70%), radial-gradient(ellipse 60% 80% at 100% 50%, rgba(15, 42, 74, 0.04), transparent 70%), var(--bg-surface); border-color: var(--border-subtle); } .welcome-hero__title { color: var(--text-strong); } .welcome-hero__subtitle { color: var(--text-muted); } html[data-bs-theme="dark"] .welcome-hero { background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(52, 211, 153, 0.08), transparent 70%), radial-gradient(ellipse 60% 80% at 100% 50%, rgba(6, 16, 31, 0.50), transparent 70%), var(--bg-surface); } /* ============================================================================ * 18. KPI mini cards (home) * ========================================================================== */ #home-kpis .kpi-mini { background: var(--bg-surface); border-color: var(--border-subtle); } #home-kpis .kpi-mini__label { color: var(--text-muted); } #home-kpis .kpi-mini__value { color: var(--text-strong); } /* ============================================================================ * 19. EMPTY STATE * ========================================================================== */ .empty-state { color: var(--text-muted); } .empty-state__icon { color: var(--text-faint); } .empty-state__title { color: var(--text-base); } .empty-state__desc { color: var(--text-muted); } /* ============================================================================ * 20. PAGINATION * ========================================================================== */ .pagination .page-link { background: var(--bg-surface); border-color: var(--border-subtle); color: var(--text-base); } .pagination .page-link:hover { background: var(--bg-hover); color: var(--text-strong); border-color: var(--border-strong); } .pagination .page-item.active .page-link { background: var(--brand-ui); border-color: var(--brand-ui); color: #ffffff; } .pagination .page-item.disabled .page-link { background: var(--bg-subtle); border-color: var(--border-subtle); color: var(--text-faint); } /* ============================================================================ * 21. PROGRESS BAR * ========================================================================== */ .progress { background: var(--bg-hover); } .progress-bar { background: var(--brand-ui); } /* ============================================================================ * 22. BOTÕES — refinos para dark * ========================================================================== */ .btn { transition: background-color 140ms, border-color 140ms, color 140ms, box-shadow 140ms, transform 80ms; } /* Outline buttons — usam superfícies do tema */ .btn-outline-primary, .btn-outline-success, .btn-outline-secondary, .btn-outline-danger, .btn-outline-info, .btn-outline-warning { background: var(--bg-surface); border-color: var(--border-strong); } .btn-outline-primary, .btn-outline-success { color: var(--brand-ui-soft-text); } .btn-outline-primary:hover, .btn-outline-success:hover { background: var(--brand-ui-soft); color: var(--brand-ui-soft-text); border-color: var(--brand-ui); } .btn-outline-secondary { color: var(--text-base); } .btn-outline-secondary:hover { background: var(--bg-hover); color: var(--text-strong); border-color: var(--border-strong); } /* Btn ghost */ .btn-ghost { background: transparent; color: var(--text-muted); } .btn-ghost:hover { background: var(--bg-hover); color: var(--text-strong); } /* Btn-link */ .btn-link { color: var(--text-link); } .btn-link:hover { color: var(--brand-ui); background: var(--brand-ui-soft); } /* No dark, btn-light cinza-claro fica feio — convert pra surface */ html[data-bs-theme="dark"] .btn-light { background: var(--bg-elevated); border-color: var(--border-strong); color: var(--text-base); } html[data-bs-theme="dark"] .btn-light:hover { background: var(--bg-hover); color: var(--text-strong); } /* No dark, btn-secondary cinza pode ficar muito claro */ html[data-bs-theme="dark"] .btn-secondary { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-strong); } html[data-bs-theme="dark"] .btn-secondary:hover { background: var(--border-strong); color: #ffffff; } /* ============================================================================ * 23. IA CHAT (FAB + painel) — adaptação dark * ========================================================================== */ /* Painel flutuante (redesign 2026-05) — card com bordas, não mais barra lateral. A sombra principal vem dos tokens --ia-shadow-panel definidos em ia_chat.css. Aqui só ajustamos a cor de superfície base do painel para o tema escuro. */ html[data-bs-theme="dark"] #ia-painel { background: var(--bg-elevated); border-color: var(--border-subtle); } html[data-bs-theme="dark"] #ia-mensagens { background: var(--bg-app); } html[data-bs-theme="dark"] .ia-msg-assistant { background: var(--bg-elevated); color: var(--text-base); border-color: var(--border-subtle); } html[data-bs-theme="dark"] .ia-msg-system { color: var(--text-muted); border-color: var(--border-subtle); } html[data-bs-theme="dark"] .ia-msg pre, html[data-bs-theme="dark"] .ia-msg code { background: var(--bg-code); color: var(--text-base); } html[data-bs-theme="dark"] #ia-input-area { background: var(--bg-elevated); border-top-color: var(--border-subtle); } /* Input agora vive dentro de .ia-input-wrap (sem borda própria). Os tokens abaixo controlam o wrap e o textarea respectivamente. */ html[data-bs-theme="dark"] .ia-input-wrap { background: var(--bg-subtle); border-color: var(--border-subtle); } html[data-bs-theme="dark"] .ia-input-wrap:focus-within { background: var(--bg-elevated); border-color: var(--brand-ui); } html[data-bs-theme="dark"] #ia-input { color: var(--text-strong); background: transparent; } html[data-bs-theme="dark"] .ia-tool-call { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; border-color: rgba(99, 102, 241, 0.30); } html[data-bs-theme="dark"] .ia-alert-card { background: var(--bg-surface); border-color: var(--border-subtle); color: var(--text-base); } html[data-bs-theme="dark"] .ia-alert-body { color: var(--text-strong); } html[data-bs-theme="dark"] .ia-alert-meta { color: var(--text-muted); } html[data-bs-theme="dark"] .ia-alert-resolved { background: var(--sem-success-soft); color: var(--sem-success-text); } html[data-bs-theme="dark"] .ia-config-panel { background: var(--bg-subtle); border-bottom-color: var(--border-subtle); } html[data-bs-theme="dark"] .ia-config-row { color: var(--text-base); } html[data-bs-theme="dark"] .ia-config-btn { background: var(--bg-surface); border-color: var(--border-strong); color: var(--text-base); } html[data-bs-theme="dark"] .ia-config-btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--brand-ui); } html[data-bs-theme="dark"] .ia-config-btn-active { background: rgba(245, 158, 11, 0.18) !important; border-color: var(--sem-warning-text) !important; color: var(--sem-warning-text) !important; } html[data-bs-theme="dark"] .ia-config-status { background: var(--bg-surface); border-color: var(--border-subtle); color: var(--text-base); } html[data-bs-theme="dark"] .ia-config-title { color: var(--text-muted); border-bottom-color: var(--border-subtle); } html[data-bs-theme="dark"] .ia-config-actions { border-top-color: var(--border-subtle); } html[data-bs-theme="dark"] .ia-toast-card .toast-body { background: var(--bg-elevated); color: var(--text-base); } html[data-bs-theme="dark"] .ia-toast-card .ia-toast-resumo { color: var(--text-strong); } html[data-bs-theme="dark"] .ia-toast-card .ia-toast-msg { color: var(--text-muted); } /* ============================================================================ * 24. FILTROS (offcanvas + chips + botão) * ========================================================================== */ .btn-filtros { background: var(--bg-surface); border-color: var(--border-strong); color: var(--text-base); } .btn-filtros:hover { background: var(--bg-hover); color: var(--text-strong); border-color: var(--text-faint); } .btn-filtros--ativo { background: var(--brand-ui-soft); border-color: var(--brand-ui); color: var(--brand-ui-soft-text); } #offcanvas-filtros, .offcanvas-filtros { border-left-color: var(--border-subtle) !important; } .offcanvas-filtros .offcanvas-header, .offcanvas-filtros .offcanvas-footer { border-color: var(--border-subtle); } .offcanvas-filtros .offcanvas-footer { background: var(--bg-subtle); } .offcanvas-filtros .offcanvas-title { color: var(--text-strong); } .filtros-grupo { border-bottom-color: var(--border-subtle); } .filtros-grupo__label { color: var(--text-muted); } .filtros-grupo__hint { color: var(--text-muted); } .filtros-grupo__date-range-sep { color: var(--text-faint); } .filtros-grupo__atalho { background: var(--bg-surface); border-color: var(--border-strong); color: var(--text-base); } .filtros-grupo__atalho:hover { background: var(--bg-hover); color: var(--text-strong); } .filtros-grupo__atalho.is-active { background: var(--corp-navy-bg); border-color: var(--corp-navy-bg); color: #ffffff; } .filtros-grupo__radios .form-check-label, .filtros-grupo__checks .form-check-label, .filtros-grupo__multi .form-check-label { color: var(--text-base); } .filtros-grupo__salvar-padrao { background: var(--bg-subtle); border-top-color: var(--border-subtle); color: var(--text-base); } .filtros-chip { background: var(--bg-hover); border-color: var(--border-subtle); color: var(--text-base); } .filtros-chip:hover { background: var(--bg-subtle); border-color: var(--border-strong); } .filtros-chip__label { color: var(--text-muted); } .filtros-chip__valor { color: var(--text-strong); } .filtros-chip__remover { color: var(--text-muted); } .filtros-chips__limpar { color: var(--text-muted); border-color: var(--border-strong); } /* ============================================================================ * 25. LOGIN — funciona em ambos os temas * ========================================================================== */ body.auth-body { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(16, 185, 129, 0.10), transparent 70%), radial-gradient(ellipse 60% 40% at 100% 100%, rgba(5, 150, 105, 0.08), transparent 60%), var(--bg-app); } .auth-card { background: var(--bg-surface); border-color: var(--border-subtle); box-shadow: var(--shadow-modal); } .auth-logo h1 { color: var(--text-strong); } .auth-logo p { color: var(--text-muted); } .auth-footer { color: var(--text-muted); } .auth-footer a { color: var(--text-link); } html[data-bs-theme="dark"] body.auth-body { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(52, 211, 153, 0.10), transparent 70%), radial-gradient(ellipse 60% 40% at 100% 100%, rgba(6, 16, 31, 0.50), transparent 60%), var(--bg-app); } /* ============================================================================ * 26. LOADING OVERLAY — adapta tom * ========================================================================== */ html[data-bs-theme="dark"] .loading-overlay { background: rgba(11, 18, 32, 0.78); } /* ============================================================================ * 27. HR / DIVISORES * ========================================================================== */ hr { border-top-color: var(--border-subtle) !important; } /* ============================================================================ * 28. LEAFLET (mapa) — opcional, sutil * ============================================================================ * Tiles do OSM são claros por natureza. No dark, aplicamos um filtro de * inversão + matiz para escurecer sem perder legibilidade. Pode-se desativar * removendo o seletor. Mantemos os marcadores normais (sem filter neles). * ========================================================================== */ html[data-bs-theme="dark"] .leaflet-tile-pane { filter: invert(0.92) hue-rotate(180deg) brightness(0.92) contrast(0.95) saturate(0.85); } html[data-bs-theme="dark"] .leaflet-container { background: #0a182b; } /* Controles do Leaflet (zoom, attribution) — manter sem invert */ html[data-bs-theme="dark"] .leaflet-control, html[data-bs-theme="dark"] .leaflet-marker-icon, html[data-bs-theme="dark"] .leaflet-marker-shadow, html[data-bs-theme="dark"] .leaflet-popup, html[data-bs-theme="dark"] .leaflet-popup-tip-container { filter: none; } html[data-bs-theme="dark"] .leaflet-popup-content-wrapper, html[data-bs-theme="dark"] .leaflet-popup-tip { background: var(--bg-elevated); color: var(--text-base); } /* ============================================================================ * 29. SELETOR DE TEMA (componente no dropdown do usuário) * ============================================================================ * 3 botões "pill group" segmentados. Aparece dentro do dropdown user. * ========================================================================== */ .tema-switcher { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 4px; } .tema-switcher__label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .tema-switcher__group { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 3px; gap: 2px; } .tema-switcher__btn { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 6px; color: var(--text-muted); padding: 6px 8px; font-size: 11px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; line-height: 1; transition: background-color 140ms, color 140ms, box-shadow 140ms; letter-spacing: -0.005em; } .tema-switcher__btn i { font-size: 13px; } .tema-switcher__btn:hover { color: var(--text-strong); background: var(--bg-hover); } .tema-switcher__btn.is-active { background: var(--bg-surface); color: var(--brand-ui-soft-text); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10), 0 0 0 1px var(--border-strong); } html[data-bs-theme="dark"] .tema-switcher__btn.is-active { background: var(--bg-elevated); color: var(--brand-ui); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--border-strong); } .tema-switcher__btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand-ui); } /* ============================================================================ * 30. PRINT — sempre tema claro * ========================================================================== */ @media print { html, html[data-bs-theme="dark"] { --bg-app: #ffffff; --bg-surface: #ffffff; --text-base: #000000; --text-strong: #000000; color-scheme: light; } .navbar, .tema-switcher, #ia-btn, .offcanvas, .toast-container { display: none !important; } } /* ============================================================================ * 31. FORTIFICAÇÃO DARK MODE — overrides para classes Bootstrap problemáticas * ============================================================================ * Esta seção cobre os utilitários do Bootstrap que somem ou ficam ilegíveis no * dark mode quando usados sem contexto temático. Foco especial nos templates * standalone do módulo operacional que herdam Bootstrap puro. * * Estratégia: usar os tokens semânticos já definidos para preservar * consistência visual em todo o ERP. * ========================================================================== */ /* --- 31.1 BACKGROUNDS UTILITÁRIOS --- */ html[data-bs-theme="dark"] .bg-white { background-color: var(--bg-surface) !important; color: var(--text-base); } html[data-bs-theme="dark"] .bg-light { background-color: var(--bg-subtle) !important; color: var(--text-base); } html[data-bs-theme="dark"] .bg-body, html[data-bs-theme="dark"] .bg-body-secondary { background-color: var(--bg-app) !important; color: var(--text-base); } html[data-bs-theme="dark"] .bg-body-tertiary { background-color: var(--bg-subtle) !important; color: var(--text-base); } /* bg-dark / bg-black no dark é estranho — mantém fundo escuro mas garante texto branco */ html[data-bs-theme="dark"] .bg-dark, html[data-bs-theme="dark"] .bg-black { background-color: var(--bg-elevated) !important; color: var(--text-strong); } /* Cores de fundo semânticas — fica MUITO vibrante no dark, suaviza para soft. ATENÇÃO: .bg-X.bg-opacity-N é exceção (Bootstrap usa --bs-X-rgb com opacity); deixamos passar pra não perder a semitransparência intencional. */ html[data-bs-theme="dark"] .bg-success:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]) { background-color: var(--sem-success-soft) !important; color: var(--sem-success-text) !important; } html[data-bs-theme="dark"] .bg-danger:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]) { background-color: var(--sem-danger-soft) !important; color: var(--sem-danger-text) !important; } html[data-bs-theme="dark"] .bg-warning:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]) { background-color: var(--sem-warning-soft) !important; color: var(--sem-warning-text) !important; } html[data-bs-theme="dark"] .bg-info:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]) { background-color: var(--sem-info-soft) !important; color: var(--sem-info-text) !important; } html[data-bs-theme="dark"] .bg-primary:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]) { background-color: var(--brand-ui-soft) !important; color: var(--brand-ui-soft-text) !important; } html[data-bs-theme="dark"] .bg-secondary:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]) { background-color: var(--bg-hover) !important; color: var(--text-base) !important; } /* --- 31.2 TEXTOS UTILITÁRIOS --- */ /* text-white quando dentro de fundo bg-X (que vira soft no dark) deve seguir a cor semântica do contexto pra ter contraste; quando dentro de fundo verdadeiramente escuro (navbar, toast colorido, btn sólido), permanece branco. Como heurística, mapeamos o "white sobre soft" para a cor de texto semântica correspondente — assim "card-header bg-primary text-white" no dark exibe título em verde-emerald sobre fundo verde-soft. */ html[data-bs-theme="dark"] .bg-primary:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]) .text-white, html[data-bs-theme="dark"] .bg-primary:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]).text-white { color: var(--brand-ui-soft-text) !important; } html[data-bs-theme="dark"] .bg-success:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]) .text-white, html[data-bs-theme="dark"] .bg-success:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]).text-white { color: var(--sem-success-text) !important; } html[data-bs-theme="dark"] .bg-danger:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]) .text-white, html[data-bs-theme="dark"] .bg-danger:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]).text-white { color: var(--sem-danger-text) !important; } html[data-bs-theme="dark"] .bg-warning:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]) .text-white, html[data-bs-theme="dark"] .bg-warning:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]).text-white { color: var(--sem-warning-text) !important; } html[data-bs-theme="dark"] .bg-info:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]) .text-white, html[data-bs-theme="dark"] .bg-info:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]).text-white { color: var(--sem-info-text) !important; } html[data-bs-theme="dark"] .bg-secondary:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]) .text-white, html[data-bs-theme="dark"] .bg-secondary:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]).text-white, html[data-bs-theme="dark"] .bg-dark:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]) .text-white, html[data-bs-theme="dark"] .bg-dark:not(.btn):not(.toast):not(.badge):not(.dot):not(.indicator):not([class*="bg-opacity-"]).text-white { color: var(--text-strong) !important; } /* Por DEFAULT, text-white em dark fica branco mesmo (caso comum: btn/badge/toast) */ html[data-bs-theme="dark"] .text-white { color: #ffffff !important; } html[data-bs-theme="dark"] .text-black, html[data-bs-theme="dark"] .text-black-50 { color: var(--text-strong) !important; } html[data-bs-theme="dark"] .text-white-50 { color: rgba(255, 255, 255, 0.62) !important; } /* Text-reset (Bootstrap "reset to body color") */ html[data-bs-theme="dark"] .text-reset { color: var(--text-base) !important; } /* --- 31.3 BORDAS UTILITÁRIAS --- */ html[data-bs-theme="dark"] .border-white, html[data-bs-theme="dark"] .border-light { border-color: var(--border-subtle) !important; } html[data-bs-theme="dark"] .border-dark { border-color: var(--border-strong) !important; } html[data-bs-theme="dark"] .border-secondary { border-color: var(--border-strong) !important; } /* Cores semânticas de borda — atenuar no dark */ html[data-bs-theme="dark"] .border-primary { border-color: var(--brand-ui) !important; } html[data-bs-theme="dark"] .border-success { border-color: var(--sem-success-border) !important; } html[data-bs-theme="dark"] .border-danger { border-color: var(--sem-danger-border) !important; } html[data-bs-theme="dark"] .border-warning { border-color: var(--sem-warning-border) !important; } html[data-bs-theme="dark"] .border-info { border-color: var(--sem-info-border) !important; } /* --- 31.4 SOMBRAS UTILITÁRIAS (sombras pretas com halo branco sutil) --- */ html[data-bs-theme="dark"] .shadow-sm { box-shadow: var(--shadow-card) !important; } html[data-bs-theme="dark"] .shadow { box-shadow: var(--shadow-pop) !important; } html[data-bs-theme="dark"] .shadow-lg { box-shadow: var(--shadow-lift) !important; } html[data-bs-theme="dark"] .shadow-none { box-shadow: none !important; } /* --- 31.5 LIST GROUP --- */ html[data-bs-theme="dark"] .list-group { --bs-list-group-bg: var(--bg-surface); --bs-list-group-color: var(--text-base); --bs-list-group-border-color: var(--border-subtle); --bs-list-group-action-color: var(--text-base); --bs-list-group-action-hover-bg: var(--bg-hover); --bs-list-group-action-hover-color: var(--text-strong); } html[data-bs-theme="dark"] .list-group-item { background-color: var(--bg-surface); border-color: var(--border-subtle); color: var(--text-base); } html[data-bs-theme="dark"] .list-group-item-action:hover, html[data-bs-theme="dark"] .list-group-item-action:focus { background-color: var(--bg-hover); color: var(--text-strong); } html[data-bs-theme="dark"] .list-group-item.active { background-color: var(--brand-ui-soft); border-color: var(--brand-ui); color: var(--brand-ui-soft-text); } html[data-bs-theme="dark"] .list-group-item-light { background-color: var(--bg-subtle); color: var(--text-base); } html[data-bs-theme="dark"] .list-group-item-success { background-color: var(--sem-success-soft); color: var(--sem-success-text); } html[data-bs-theme="dark"] .list-group-item-warning { background-color: var(--sem-warning-soft); color: var(--sem-warning-text); } html[data-bs-theme="dark"] .list-group-item-danger { background-color: var(--sem-danger-soft); color: var(--sem-danger-text); } html[data-bs-theme="dark"] .list-group-item-info { background-color: var(--sem-info-soft); color: var(--sem-info-text); } /* --- 31.6 CODE / KBD / PRE / MARK --- */ html[data-bs-theme="dark"] code, html[data-bs-theme="dark"] :not(pre) > code { background: var(--bg-code); color: var(--brand-ui-soft-text); padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.875em; } html[data-bs-theme="dark"] pre { background: var(--bg-subtle); color: var(--text-base); border: 1px solid var(--border-subtle); padding: 0.75rem 1rem; border-radius: 6px; } html[data-bs-theme="dark"] pre code { background: transparent; color: inherit; padding: 0; } html[data-bs-theme="dark"] kbd { background: var(--bg-subtle); color: var(--text-strong); border: 1px solid var(--border-strong); border-bottom-width: 2px; padding: 0.125rem 0.5rem; border-radius: 4px; font-size: 0.875em; } html[data-bs-theme="dark"] mark, html[data-bs-theme="dark"] .mark { background: rgba(251, 191, 36, 0.30); color: var(--sem-warning-text); padding: 0.0625rem 0.25rem; border-radius: 3px; } /* --- 31.7 FORM HELPERS adicionais --- */ html[data-bs-theme="dark"] .form-text, html[data-bs-theme="dark"] small.text-muted, html[data-bs-theme="dark"] .small.text-muted { color: var(--text-muted) !important; } html[data-bs-theme="dark"] .form-floating > label { color: var(--text-muted); } html[data-bs-theme="dark"] .form-floating > .form-control:focus ~ label, html[data-bs-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--text-base); } html[data-bs-theme="dark"] .form-switch .form-check-input { background-color: var(--bg-elevated); border-color: var(--border-strong); } html[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%2394a3b8'/%3E%3C/svg%3E"); } html[data-bs-theme="dark"] .form-range::-webkit-slider-thumb { background: var(--brand-ui); } html[data-bs-theme="dark"] .form-range::-webkit-slider-runnable-track { background: var(--bg-subtle); } /* Placeholders mais visíveis */ html[data-bs-theme="dark"] ::placeholder, html[data-bs-theme="dark"] .form-control::placeholder, html[data-bs-theme="dark"] textarea::placeholder { color: var(--text-faint) !important; opacity: 0.85; } /* --- 31.8 BUTTONS — refinos extras --- */ /* btn-outline-dark — sumia totalmente no dark */ html[data-bs-theme="dark"] .btn-outline-dark { color: var(--text-base); border-color: var(--border-strong); background: var(--bg-surface); } html[data-bs-theme="dark"] .btn-outline-dark:hover { background: var(--bg-hover); color: var(--text-strong); border-color: var(--border-strong); } /* btn-outline-light — invertia para escuro com texto invisível */ html[data-bs-theme="dark"] .btn-outline-light { color: var(--text-base); border-color: var(--border-strong); background: var(--bg-elevated); } html[data-bs-theme="dark"] .btn-outline-light:hover { background: var(--bg-hover); color: var(--text-strong); } /* btn-link visitado */ html[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.page-link) { color: var(--text-link); } html[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.page-link):hover { color: var(--brand-ui-hover); } /* --- 31.9 ACCORDION --- */ html[data-bs-theme="dark"] .accordion { --bs-accordion-bg: var(--bg-surface); --bs-accordion-color: var(--text-base); --bs-accordion-border-color: var(--border-subtle); --bs-accordion-btn-bg: var(--bg-surface); --bs-accordion-btn-color: var(--text-base); --bs-accordion-active-bg: var(--bg-subtle); --bs-accordion-active-color: var(--text-strong); --bs-accordion-btn-focus-border-color: var(--brand-ui); --bs-accordion-btn-focus-box-shadow: var(--shadow-focus); } html[data-bs-theme="dark"] .accordion-button:not(.collapsed) { background: var(--bg-subtle); color: var(--text-strong); box-shadow: inset 0 -1px 0 var(--border-subtle); } html[data-bs-theme="dark"] .accordion-button::after { filter: invert(0.85); } /* --- 31.10 NAV TABS / PILLS --- */ html[data-bs-theme="dark"] .nav-tabs { border-bottom-color: var(--border-subtle); } html[data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--text-muted); border-color: transparent; } html[data-bs-theme="dark"] .nav-tabs .nav-link:hover { color: var(--text-strong); border-color: var(--border-subtle) var(--border-subtle) transparent; background: var(--bg-hover); } html[data-bs-theme="dark"] .nav-tabs .nav-link.active { background: var(--bg-surface); color: var(--text-strong); border-color: var(--border-subtle) var(--border-subtle) var(--bg-surface); } html[data-bs-theme="dark"] .nav-pills .nav-link { color: var(--text-muted); } html[data-bs-theme="dark"] .nav-pills .nav-link:hover { color: var(--text-strong); background: var(--bg-hover); } html[data-bs-theme="dark"] .nav-pills .nav-link.active, html[data-bs-theme="dark"] .nav-pills .show > .nav-link { background: var(--brand-ui); color: #ffffff; } /* --- 31.11 TOOLTIPS / POPOVERS --- */ html[data-bs-theme="dark"] .tooltip-inner { background: var(--bg-elevated); color: var(--text-strong); box-shadow: var(--shadow-modal); border: 1px solid var(--border-subtle); } html[data-bs-theme="dark"] .tooltip .tooltip-arrow::before, html[data-bs-theme="dark"] .bs-tooltip-top .tooltip-arrow::before, html[data-bs-theme="dark"] .bs-tooltip-bottom .tooltip-arrow::before, html[data-bs-theme="dark"] .bs-tooltip-start .tooltip-arrow::before, html[data-bs-theme="dark"] .bs-tooltip-end .tooltip-arrow::before { border-top-color: var(--bg-elevated); border-bottom-color: var(--bg-elevated); border-left-color: var(--bg-elevated); border-right-color: var(--bg-elevated); } html[data-bs-theme="dark"] .popover { background: var(--bg-elevated); border-color: var(--border-subtle); box-shadow: var(--shadow-modal); } html[data-bs-theme="dark"] .popover-header { background: var(--bg-subtle); border-bottom-color: var(--border-subtle); color: var(--text-strong); } html[data-bs-theme="dark"] .popover-body { color: var(--text-base); } html[data-bs-theme="dark"] .popover .popover-arrow::after { border-top-color: var(--bg-elevated); border-bottom-color: var(--bg-elevated); } /* --- 31.12 SPINNERS --- */ html[data-bs-theme="dark"] .spinner-border.text-light, html[data-bs-theme="dark"] .spinner-grow.text-light { color: var(--text-base) !important; } html[data-bs-theme="dark"] .spinner-border.text-dark, html[data-bs-theme="dark"] .spinner-grow.text-dark { color: var(--text-strong) !important; } /* --- 31.13 CLOSE BUTTONS (X) — já tem para modal mas garantimos para todos --- */ html[data-bs-theme="dark"] .btn-close { filter: invert(0.92) brightness(1.3); } html[data-bs-theme="dark"] .btn-close-white { /* Já é branco — mantém */ filter: none; } /* --- 31.14 HR variações --- */ html[data-bs-theme="dark"] hr, html[data-bs-theme="dark"] hr.divider, html[data-bs-theme="dark"] .divider { border-top-color: var(--border-subtle) !important; background-color: transparent; opacity: 1; } /* --- 31.15 IMG/THUMBNAIL --- */ html[data-bs-theme="dark"] .img-thumbnail { background: var(--bg-surface); border-color: var(--border-subtle); } html[data-bs-theme="dark"] .figure-caption { color: var(--text-muted); } /* --- 31.16 CARROSSEL --- */ html[data-bs-theme="dark"] .carousel-caption { color: var(--text-strong); } html[data-bs-theme="dark"] .carousel-control-prev-icon, html[data-bs-theme="dark"] .carousel-control-next-icon { filter: invert(0.85); } /* --- 31.17 KPI / VALUE / CONTADOR (números grandes em dashboards) --- Classes comuns usadas pelo time. Se vc tem classe X que não tá aqui, basta adicionar. */ html[data-bs-theme="dark"] .kpi-value, html[data-bs-theme="dark"] .kpi-number, html[data-bs-theme="dark"] .stat-value, html[data-bs-theme="dark"] .metric-value, html[data-bs-theme="dark"] .card .display-1, html[data-bs-theme="dark"] .card .display-2, html[data-bs-theme="dark"] .card .display-3, html[data-bs-theme="dark"] .card .display-4, html[data-bs-theme="dark"] .card .display-5, html[data-bs-theme="dark"] .card .display-6 { color: var(--text-strong) !important; } html[data-bs-theme="dark"] .kpi-label, html[data-bs-theme="dark"] .stat-label, html[data-bs-theme="dark"] .metric-label { color: var(--text-muted) !important; } /* --- 31.18 CHART.JS CONTAINER --- */ /* Ajusta o canvas (Chart.js) pra não ficar com fundo branco */ html[data-bs-theme="dark"] canvas { background: transparent; } /* Tabelas de legenda de gráficos */ html[data-bs-theme="dark"] .chart-legend, html[data-bs-theme="dark"] .legend-item { color: var(--text-base); } /* --- 31.19 OVERRIDES PARA TEMPLATES STANDALONE DO OPERACIONAL --- Os templates analise/cronograma/contratos/dashboard/faturamento/etc não estendem base.html. Reforçamos aqui defaults pra eles não somam no dark. */ html[data-bs-theme="dark"] body { background-color: var(--bg-app) !important; color: var(--text-base) !important; } /* Containers genéricos com fundo branco visível */ html[data-bs-theme="dark"] .container, html[data-bs-theme="dark"] .container-fluid { color: var(--text-base); } /* Textos genéricos em , , , dentro de cards */ html[data-bs-theme="dark"] .card small, html[data-bs-theme="dark"] .card .small { color: var(--text-muted); } html[data-bs-theme="dark"] .card strong:not([class*="text-"]) { color: var(--text-strong); } /* Labels dentro de KPI cards (operacional) */ html[data-bs-theme="dark"] .card-body label, html[data-bs-theme="dark"] .card-body .label { color: var(--text-muted); } /* --- 31.20 LEAFLET — POPUPS E CONTROLES (já tem leaflet section mas refinamos) */ html[data-bs-theme="dark"] .leaflet-popup-content-wrapper, html[data-bs-theme="dark"] .leaflet-popup-tip { background: var(--bg-elevated) !important; color: var(--text-base) !important; box-shadow: var(--shadow-modal); } html[data-bs-theme="dark"] .leaflet-popup-content { color: var(--text-base); } html[data-bs-theme="dark"] .leaflet-popup-content h1, html[data-bs-theme="dark"] .leaflet-popup-content h2, html[data-bs-theme="dark"] .leaflet-popup-content h3, html[data-bs-theme="dark"] .leaflet-popup-content h4, html[data-bs-theme="dark"] .leaflet-popup-content strong { color: var(--text-strong); } html[data-bs-theme="dark"] .leaflet-popup-content a { color: var(--text-link); } html[data-bs-theme="dark"] .leaflet-control-attribution, html[data-bs-theme="dark"] .leaflet-control-scale-line { background: rgba(19, 28, 46, 0.85) !important; color: var(--text-muted) !important; border-color: var(--border-subtle) !important; } html[data-bs-theme="dark"] .leaflet-control-attribution a { color: var(--text-base) !important; } html[data-bs-theme="dark"] .leaflet-bar a, html[data-bs-theme="dark"] .leaflet-bar a:hover { background: var(--bg-elevated); color: var(--text-base); border-bottom-color: var(--border-subtle); } html[data-bs-theme="dark"] .leaflet-bar a:hover { background: var(--bg-hover); color: var(--text-strong); } /* --- 31.21 SPINNERS DE LOADING DE TELA INTEIRA --- */ html[data-bs-theme="dark"] #loading-screen, html[data-bs-theme="dark"] .loading-screen, html[data-bs-theme="dark"] .page-loader { background: var(--bg-app); color: var(--text-base); } /* --- 31.22 BADGE PILLS sem classes bg (geralmente .badge sozinho)--- Bootstrap default sem cor fica esquisito. Garante mínimo de contraste. */ html[data-bs-theme="dark"] .badge:not([class*="bg-"]):not([class*="text-bg-"]) { background: var(--bg-hover); color: var(--text-base); border: 1px solid var(--border-subtle); } /* --- 31.23 TEXTO MUDADO QUANDO DENTRO DE ELEMENTOS COLORIDOS --- Garante que texto sobre fundos brand/success/danger fique branco no dark */ html[data-bs-theme="dark"] .btn-primary, html[data-bs-theme="dark"] .btn-success, html[data-bs-theme="dark"] .btn-danger, html[data-bs-theme="dark"] .btn-warning, html[data-bs-theme="dark"] .btn-info { color: #ffffff; } html[data-bs-theme="dark"] .btn-warning { /* Warning é amarelo, branco vira invisível — usa preto/strong */ color: var(--navy-900, #06101f); } /* --- 31.24 SCROLLBAR DENTRO DE ELEMENTOS ESCUROS (offcanvas, modal, etc) --- */ html[data-bs-theme="dark"] .offcanvas::-webkit-scrollbar-thumb, html[data-bs-theme="dark"] .modal-body::-webkit-scrollbar-thumb, html[data-bs-theme="dark"] .dropdown-menu::-webkit-scrollbar-thumb { background: var(--border-strong); } /* --- 31.25 TABELA STRIPED — alternância sutil no dark --- */ html[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.025) !important; color: var(--text-base); } html[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > * { background-color: transparent !important; color: var(--text-base); } /* Texto strong (negrito) em tabelas — usar text-strong */ html[data-bs-theme="dark"] .table tbody strong, html[data-bs-theme="dark"] .table tbody b, html[data-bs-theme="dark"] .table tbody .fw-bold, html[data-bs-theme="dark"] .table tbody .fw-semibold { color: var(--text-strong); } /* --- 31.26 ÍCONES "I" CIRCULARES (ajuda) --- */ html[data-bs-theme="dark"] .bi-info-circle, html[data-bs-theme="dark"] .bi-question-circle, html[data-bs-theme="dark"] .bi-info-circle-fill, html[data-bs-theme="dark"] .bi-question-circle-fill { color: var(--text-muted); } /* --- 31.27 DETAILS / SUMMARY (HTML5 colapsável) --- */ html[data-bs-theme="dark"] details { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 0.5rem 0.75rem; } html[data-bs-theme="dark"] details summary { color: var(--text-strong); cursor: pointer; } /* --- 31.28 BLOCKQUOTE --- */ html[data-bs-theme="dark"] blockquote, html[data-bs-theme="dark"] .blockquote { color: var(--text-base); border-left: 4px solid var(--border-strong); padding-left: 1rem; } html[data-bs-theme="dark"] .blockquote-footer { color: var(--text-muted); } /* --- 31.29 ATALHOS pra elementos com inline style chave=valor comuns --- Quando algum desenvolvedor escreveu `style="background: #f8f9fa"` direto no HTML, esses inlines vencem qualquer override de classe. NÃO conseguimos sobrescrever inline via CSS (a não ser com !important + atributo selector). Aqui cobrimos alguns dos casos mais comuns que aparecem no operacional. */ html[data-bs-theme="dark"] [style*="background: #f8f9fa"], html[data-bs-theme="dark"] [style*="background: #fff"], html[data-bs-theme="dark"] [style*="background-color: #f8f9fa"], html[data-bs-theme="dark"] [style*="background-color: #fff"], html[data-bs-theme="dark"] [style*="background-color:#fff"], html[data-bs-theme="dark"] [style*="background:#fff"] { background: var(--bg-subtle) !important; color: var(--text-base) !important; } html[data-bs-theme="dark"] [style*="color: #000"], html[data-bs-theme="dark"] [style*="color:#000"], html[data-bs-theme="dark"] [style*="color: #333"], html[data-bs-theme="dark"] [style*="color:#333"], html[data-bs-theme="dark"] [style*="color: #212529"], html[data-bs-theme="dark"] [style*="color:#212529"] { color: var(--text-strong) !important; } html[data-bs-theme="dark"] [style*="color: #666"], html[data-bs-theme="dark"] [style*="color:#666"], html[data-bs-theme="dark"] [style*="color: #6c757d"], html[data-bs-theme="dark"] [style*="color:#6c757d"], html[data-bs-theme="dark"] [style*="color: #999"], html[data-bs-theme="dark"] [style*="color:#999"] { color: var(--text-muted) !important; } html[data-bs-theme="dark"] [style*="border: 1px solid #ddd"], html[data-bs-theme="dark"] [style*="border: 1px solid #dee2e6"], html[data-bs-theme="dark"] [style*="border:1px solid #ddd"], html[data-bs-theme="dark"] [style*="border:1px solid #dee2e6"] { border-color: var(--border-subtle) !important; } /* --- 31.30 CRONOGRAMA / GANTT específico --- Cronograma tem grid com células que herdam fundo branco. Forçamos surface no dark. Classes inferidas (verificar nomes reais ao editar template). */ html[data-bs-theme="dark"] .gantt-cell, html[data-bs-theme="dark"] .gantt-row, html[data-bs-theme="dark"] .cronograma-cell, html[data-bs-theme="dark"] .cronograma-row, html[data-bs-theme="dark"] .schedule-cell, html[data-bs-theme="dark"] .calendar-cell, html[data-bs-theme="dark"] .day-cell, html[data-bs-theme="dark"] .week-cell { background-color: var(--bg-surface); color: var(--text-base); border-color: var(--border-subtle); } html[data-bs-theme="dark"] .gantt-header, html[data-bs-theme="dark"] .cronograma-header, html[data-bs-theme="dark"] .schedule-header, html[data-bs-theme="dark"] .calendar-header { background-color: var(--bg-subtle); color: var(--text-strong); border-color: var(--border-subtle); } /* --- 31.31 GARANTIA FINAL: bg-light em qualquer canto --- */ html[data-bs-theme="dark"] thead.bg-light, html[data-bs-theme="dark"] thead.bg-white, html[data-bs-theme="dark"] tr.bg-light, html[data-bs-theme="dark"] tr.bg-white { background-color: var(--bg-subtle) !important; color: var(--text-base) !important; } html[data-bs-theme="dark"] thead.bg-light th, html[data-bs-theme="dark"] thead.bg-white th { background-color: var(--bg-subtle) !important; color: var(--text-muted) !important; border-color: var(--border-subtle) !important; } /* --- 31.32 HOME MODULE-ICON — ícone bg cinza-azulado vira escuro-soft --- */ html[data-bs-theme="dark"] .module-icon { background: var(--bg-subtle) !important; color: var(--text-base) !important; box-shadow: inset 0 0 0 1px var(--border-subtle); } html[data-bs-theme="dark"] .module-card:hover .module-icon { background: var(--brand-ui-soft) !important; color: var(--brand-ui-soft-text) !important; box-shadow: inset 0 0 0 1px var(--brand-ui); } /* --- 31.33 CARD KPI com classes "border-start border-X border-4" — light theme tem borda colorida elegante; no dark mantemos cor mas suavizamos */ html[data-bs-theme="dark"] .card.border-start.border-primary { border-left-color: var(--brand-ui) !important; } html[data-bs-theme="dark"] .card.border-start.border-success { border-left-color: var(--sem-success-text) !important; } html[data-bs-theme="dark"] .card.border-start.border-warning { border-left-color: var(--sem-warning-text) !important; } html[data-bs-theme="dark"] .card.border-start.border-danger { border-left-color: var(--sem-danger-text) !important; } html[data-bs-theme="dark"] .card.border-start.border-info { border-left-color: var(--sem-info-text) !important; } /* --- 31.33b BG OPACITY UTILITARIES — quando usam .bg-X .bg-opacity-10 etc --- Bootstrap usa --bs-X-rgb. No dark precisamos garantir RGB visível */ html[data-bs-theme="dark"] .bg-primary { --bs-primary-rgb: 52, 211, 153; } html[data-bs-theme="dark"] .bg-success { --bs-success-rgb: 52, 211, 153; } html[data-bs-theme="dark"] .bg-warning { --bs-warning-rgb: 251, 191, 36; } html[data-bs-theme="dark"] .bg-danger { --bs-danger-rgb: 248, 113, 113; } html[data-bs-theme="dark"] .bg-info { --bs-info-rgb: 56, 189, 248; } /* Em fundos com bg-opacity reduzido, o texto X-emphasis precisa ser brand soft */ html[data-bs-theme="dark"] .bg-success.bg-opacity-10, html[data-bs-theme="dark"] .bg-success.bg-opacity-25, html[data-bs-theme="dark"] .bg-success.bg-opacity-50 { color: var(--sem-success-text); } html[data-bs-theme="dark"] .bg-warning.bg-opacity-10, html[data-bs-theme="dark"] .bg-warning.bg-opacity-25, html[data-bs-theme="dark"] .bg-warning.bg-opacity-50 { color: var(--sem-warning-text); } html[data-bs-theme="dark"] .bg-danger.bg-opacity-10, html[data-bs-theme="dark"] .bg-danger.bg-opacity-25, html[data-bs-theme="dark"] .bg-danger.bg-opacity-50 { color: var(--sem-danger-text); } html[data-bs-theme="dark"] .bg-info.bg-opacity-10, html[data-bs-theme="dark"] .bg-info.bg-opacity-25, html[data-bs-theme="dark"] .bg-info.bg-opacity-50 { color: var(--sem-info-text); } html[data-bs-theme="dark"] .bg-primary.bg-opacity-10, html[data-bs-theme="dark"] .bg-primary.bg-opacity-25, html[data-bs-theme="dark"] .bg-primary.bg-opacity-50 { color: var(--brand-ui-soft-text); } /* --- 31.34 CRONOGRAMA: status-OK/alerta/critico (badges de progresso) --- Já tratamos no template, mas reforçamos aqui caso outros usem */ html[data-bs-theme="dark"] .status-ok-bar { background-color: #15803d !important; } html[data-bs-theme="dark"] .status-alerta-bar { background-color: #b45309 !important; color: #fff !important; } html[data-bs-theme="dark"] .status-critico-bar { background-color: #991b1b !important; } /* --- 31.35 GARANTIA: KPI grandes (h2/h3/h4) sem classe text-* têm cor padrão que pode herdar cinza muted. Forçamos strong em cards. */ html[data-bs-theme="dark"] .card-body h2.fw-bold:not([class*="text-"]), html[data-bs-theme="dark"] .card-body h3.fw-bold:not([class*="text-"]), html[data-bs-theme="dark"] .card-body h4.fw-bold:not([class*="text-"]), html[data-bs-theme="dark"] .card-body h5.fw-bold:not([class*="text-"]) { color: var(--text-strong); }