/* ============================================================================ Dark mode v1 (2026-07-23) — CSS custom sobre o Bootstrap 4.6.2, SEM upgrade. Tudo escopado em html[data-theme="dark"] => o tema claro fica 100% intocado. Ativado pelo toggle da navbar (persistido em localStorage; default = SO). O seta data-theme cedo (script inline) p/ nao dar flash branco no load. Caveat: o iframe do Power BI (home) e externo e nao segue o tema. ============================================================================ */ html[data-theme="dark"] { --dk-bg: #1b1e22; --dk-surface: #24282d; --dk-surface-2: #2b3036; --dk-border: #3a3f45; --dk-text: #dfe3e7; --dk-muted: #9aa1a8; --dk-link: #6ea8fe; --dk-input: #23272c; color-scheme: dark; /* Assistente IA (chat): tokens lidos pelos var() inline do assistenteIa.php. Custom properties cascateiam p/ o style inline -> no claro caem no fallback. */ --tw-chat-bg: var(--dk-surface); --tw-chat-border: var(--dk-border); --tw-chat-muted: var(--dk-muted); --tw-chat-faint: var(--dk-muted); } /* Fundo geral e texto base */ html[data-theme="dark"] body, html[data-theme="dark"] #page-top, html[data-theme="dark"] .content-wrapper, html[data-theme="dark"] .container-fluid { background-color: var(--dk-bg) !important; color: var(--dk-text); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] label, html[data-theme="dark"] p, html[data-theme="dark"] .text-dark, html[data-theme="dark"] td, html[data-theme="dark"] th { color: var(--dk-text); } html[data-theme="dark"] .text-muted { color: var(--dk-muted) !important; } html[data-theme="dark"] a { color: var(--dk-link); } html[data-theme="dark"] a:hover { color: #9ec5fe; } html[data-theme="dark"] hr, html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-left, html[data-theme="dark"] .border-right { border-color: var(--dk-border) !important; } html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: var(--dk-surface) !important; } /* Cards / superficies / modais / dropdowns / toasts */ html[data-theme="dark"] .card, html[data-theme="dark"] .card-body, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .toast, html[data-theme="dark"] .popover { background-color: var(--dk-surface) !important; color: var(--dk-text); border-color: var(--dk-border) !important; } html[data-theme="dark"] .card-header, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer, html[data-theme="dark"] .toast-header { background-color: var(--dk-surface-2) !important; color: var(--dk-text); border-color: var(--dk-border) !important; } html[data-theme="dark"] .dropdown-item { color: var(--dk-text); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: var(--dk-surface-2); color: #fff; } html[data-theme="dark"] .dropdown-divider { border-color: var(--dk-border); } html[data-theme="dark"] .close { color: var(--dk-text); text-shadow: none; opacity: .85; } html[data-theme="dark"] .close:hover { color: #fff; opacity: 1; } html[data-theme="dark"] .modal-backdrop.show { opacity: .7; } /* Tabelas + DataTables + coluna congelada */ html[data-theme="dark"] .table { color: var(--dk-text); border-color: var(--dk-border); } html[data-theme="dark"] .table td, html[data-theme="dark"] .table th { border-color: var(--dk-border) !important; } html[data-theme="dark"] .table thead th, html[data-theme="dark"] .table thead.thead-light th { background-color: var(--dk-surface-2) !important; color: var(--dk-text); border-color: var(--dk-border) !important; } html[data-theme="dark"] .table-bordered { border-color: var(--dk-border); } html[data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, .05); color: var(--dk-text); } /* override do hover-azul-claro de tabelas.css */ html[data-theme="dark"] #dataTable tr:hover td { color: #9ec5fe !important; } /* coluna congelada (FixedColumns) — geral.css a pintava de #fff/#e9ecef */ html[data-theme="dark"] table.dataTable tbody tr > .dtfc-fixed-left { background-color: var(--dk-surface) !important; } html[data-theme="dark"] table.dataTable thead tr > .dtfc-fixed-left { background-color: var(--dk-surface-2) !important; } html[data-theme="dark"] .dataTables_wrapper, html[data-theme="dark"] .dataTables_info, html[data-theme="dark"] .dataTables_length, html[data-theme="dark"] .dataTables_filter, html[data-theme="dark"] .dataTables_paginate { color: var(--dk-text); } html[data-theme="dark"] .page-link { background-color: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-link); } html[data-theme="dark"] .page-item.active .page-link { background-color: #0d6efd; border-color: #0d6efd; color: #fff; } html[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--dk-surface); color: var(--dk-muted); } /* Formularios */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .custom-select, html[data-theme="dark"] textarea, html[data-theme="dark"] input.flatpickr-input { background-color: var(--dk-input) !important; color: var(--dk-text) !important; border-color: #495057; } html[data-theme="dark"] .form-control::placeholder { color: var(--dk-muted); } html[data-theme="dark"] .form-control:focus { background-color: var(--dk-input); color: var(--dk-text); border-color: #0d6efd; box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .25); } html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly] { background-color: var(--dk-surface-2); } html[data-theme="dark"] .input-group-text { background-color: var(--dk-surface-2); color: var(--dk-text); border-color: #495057; } /* Botoes: melhora contraste dos outline no escuro (secondary cinza some) */ html[data-theme="dark"] .btn-outline-secondary { color: #c2c8ce; border-color: #6c757d; } html[data-theme="dark"] .btn-outline-secondary:hover { color: #fff; background-color: #6c757d; } html[data-theme="dark"] .btn-light { background-color: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text); } html[data-theme="dark"] .btn-light:hover { background-color: #343a40; color: #fff; } /* flatpickr — calendario escuro */ html[data-theme="dark"] .flatpickr-calendar { background: var(--dk-surface); color: var(--dk-text); box-shadow: 0 3px 13px rgba(0, 0, 0, .6); } html[data-theme="dark"] .flatpickr-months, html[data-theme="dark"] .flatpickr-weekdays, html[data-theme="dark"] span.flatpickr-weekday { background: var(--dk-surface-2); color: var(--dk-text); } html[data-theme="dark"] .flatpickr-month, html[data-theme="dark"] .flatpickr-current-month input.cur-year, html[data-theme="dark"] .flatpickr-monthDropdown-months { color: var(--dk-text); } html[data-theme="dark"] .flatpickr-monthDropdown-months { background: var(--dk-surface-2); } html[data-theme="dark"] .flatpickr-day { color: var(--dk-text); } html[data-theme="dark"] .flatpickr-day:hover { background: var(--dk-surface-2); border-color: var(--dk-surface-2); } html[data-theme="dark"] .flatpickr-day.selected { background: #0d6efd; border-color: #0d6efd; color: #fff; } html[data-theme="dark"] .flatpickr-day.flatpickr-disabled, html[data-theme="dark"] .flatpickr-day.prevMonthDay, html[data-theme="dark"] .flatpickr-day.nextMonthDay { color: var(--dk-muted); } html[data-theme="dark"] .flatpickr-prev-month svg, html[data-theme="dark"] .flatpickr-next-month svg { fill: var(--dk-text); } /* O toggle de tema no menu herda o estilo de nav-link; nada extra necessario. */ /* Rodape (sticky-footer): sb-admin usa bg #e9ecef fixo; no escuro o texto claro sumia sobre o cinza claro. Escurece o rodape e deixa o texto legivel. */ html[data-theme="dark"] footer.sticky-footer { background-color: var(--dk-surface-2); border-top: 1px solid var(--dk-border); } html[data-theme="dark"] footer.sticky-footer small, html[data-theme="dark"] footer.sticky-footer .text-center { color: var(--dk-muted); }