/* ===================================================================== CoreAPP - Tema (claro / escuro) ===================================================================== Carregado em public/index.php logo depois do Bootstrap, vale para todas as telas. O tema ativo e o atributo data-bs-theme do : o servidor escreve a preferencia do usuario (Configuracoes > Acessibilidade) e o script do resolve "seguir o sistema" antes da primeira pintura. Tres camadas, nesta ordem: 1. TOKENS - as cores da interface. No claro, cada token tem exatamente o valor que as folhas usavam cravado, entao o tema claro nao muda. O escuro redefine so os tokens. 2. BOOTSTRAP - no escuro, as variaveis do Bootstrap 5.3 recebem a mesma paleta dos tokens, para cards, modais, campos e tabelas combinarem com a casca do painel. 3. EXCECOES - utilitarias do Bootstrap que sao claras por definicao (bg-white, btn-light, table-light...), componentes de terceiros sem suporte a tema e cores avulsas das telas que nao viraram token. Por que `:root[data-bs-theme="dark"]` e nao so `[data-bs-theme="dark"]`: o dashboard.css (injetado por rota, depois desta folha) define as variaveis herdadas do template em :root. A especificidade maior garante que o escuro venca independente da ordem de carregamento. Impressao e PDF ficam fora: as rotas /imprimir nao passam por public/index.php e continuam claras de proposito. ===================================================================== */ /* --------------------------------------------------------------------- 1. TOKENS --------------------------------------------------------------------- */ :root { /* superficies */ --app-bg: #f5f9fd; --app-surface: #fff; --app-muted-bg: #e6e7e9; --app-hover: #f2f2f2; --app-danger-tint: #fff5f5; /* texto */ --app-text: #363949; --app-text-2: #677483; --app-text-3: #7d8da1; --app-text-muted: #6c757d; --app-heading: #193148; --app-caption: #8498ae; /* linhas, acento e realces */ --app-line-alpha: rgba(0, 0, 0, 0.125); --app-accent: #253e8f; --app-tint: rgba(132, 139, 200, 0.18); --app-row-hover: rgba(0, 0, 0, 0.10); --app-link: #3b82f6; --app-link-hover: #2563eb; /* Escala neutra das telas mais novas (home, dashboards). No escuro ela se inverte: o 100 que era fundo quase branco vira fundo quase preto, o 800 que era texto escuro vira texto claro. */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; } :root[data-bs-theme="dark"] { color-scheme: dark; --app-bg: #0f1218; --app-surface: #181c25; --app-muted-bg: #232937; --app-hover: #232937; --app-danger-tint: #3a1d22; --app-text: #e2e5ec; --app-text-2: #a9b1c1; --app-text-3: #8b94a7; --app-text-muted: #9098a9; --app-heading: #eef0f5; --app-caption: #8f9ab0; --app-line-alpha: rgba(255, 255, 255, 0.1); /* O azul da marca (#253e8f) some sobre fundo escuro: onde ele e texto ou borda, o escuro usa uma variante clara. Botoes com fundo da marca continuam em var(--primary). */ --app-accent: #8ea7f2; --app-tint: rgba(142, 167, 242, 0.12); --app-row-hover: rgba(255, 255, 255, 0.07); --app-link: #6ea0ff; --app-link-hover: #93b8ff; --slate-50: #161b24; --slate-100: #1c2230; --slate-200: #283042; --slate-300: #38425a; --slate-400: #5f6b84; --slate-500: #8e99ae; --slate-600: #a8b2c4; --slate-700: #c2c9d6; --slate-800: #dde1e9; /* variaveis herdadas do template que o dashboard.css ainda crava */ --gray: #9098a9; --gray-dark: #e2e5ec; /* ------------------------------------------------------------------- 2. BOOTSTRAP Os pares -rgb precisam de valor literal: o Bootstrap monta rgba() com eles e var() nao cabe dentro de rgba(r, g, b). ------------------------------------------------------------------- */ --bs-body-bg: #181c25; --bs-body-bg-rgb: 24, 28, 37; --bs-body-color: #e2e5ec; --bs-body-color-rgb: 226, 229, 236; --bs-secondary-color: rgba(226, 229, 236, 0.75); --bs-secondary-color-rgb: 226, 229, 236; --bs-secondary-bg: #252b38; --bs-secondary-bg-rgb: 37, 43, 56; --bs-tertiary-color: rgba(226, 229, 236, 0.5); --bs-tertiary-color-rgb: 226, 229, 236; --bs-tertiary-bg: #1d222d; --bs-tertiary-bg-rgb: 29, 34, 45; --bs-border-color: #2d3441; --bs-border-color-translucent: rgba(255, 255, 255, 0.12); --bs-link-color: #8ea7f2; --bs-link-color-rgb: 142, 167, 242; --bs-link-hover-color: #b1c3f7; --bs-link-hover-color-rgb: 177, 195, 247; } /* --------------------------------------------------------------------- 3. EXCECOES (so no escuro) --------------------------------------------------------------------- */ /* Utilitarias do Bootstrap que continuam claras no 5.3 mesmo com data-bs-theme="dark". O bg-light ja e resolvido no global.css pelo token --app-muted-bg. */ [data-bs-theme="dark"] .bg-white { background-color: var(--app-surface) !important; } [data-bs-theme="dark"] .text-dark, [data-bs-theme="dark"] .text-black { color: var(--app-text) !important; } [data-bs-theme="dark"] .border-light { border-color: var(--bs-border-color) !important; } [data-bs-theme="dark"] .btn-light { --bs-btn-color: var(--app-text); --bs-btn-bg: #252b38; --bs-btn-border-color: #2d3441; --bs-btn-hover-color: #fff; --bs-btn-active-color: var(--app-text); --bs-btn-active-bg: #2d3441; --bs-btn-active-border-color: #38425a; --bs-btn-disabled-color: var(--app-text-muted); --bs-btn-disabled-bg: #252b38; --bs-btn-disabled-border-color: #2d3441; } [data-bs-theme="dark"] .btn-outline-dark { --bs-btn-color: var(--app-text); --bs-btn-border-color: #5f6b84; --bs-btn-hover-color: #0f1218; --bs-btn-hover-bg: #e2e5ec; --bs-btn-hover-border-color: #e2e5ec; --bs-btn-active-color: #0f1218; --bs-btn-active-bg: #e2e5ec; --bs-btn-active-border-color: #e2e5ec; } [data-bs-theme="dark"] .table-light { --bs-table-color: var(--app-text); --bs-table-bg: #1d222d; --bs-table-border-color: #2d3441; --bs-table-striped-bg: #222835; --bs-table-striped-color: var(--app-text); --bs-table-active-bg: #262c39; --bs-table-active-color: var(--app-text); --bs-table-hover-bg: #262c39; --bs-table-hover-color: var(--app-text); color: var(--bs-table-color); border-color: var(--bs-table-border-color); } /* Variantes de tabela: no 5.3 continuam pastel com texto preto mesmo no escuro (ex.: lancamento vencido = .table-danger). Aqui viram uma tinta escura da mesma cor. So as variantes usadas no sistema. */ [data-bs-theme="dark"] .table-danger, [data-bs-theme="dark"] .table-warning, [data-bs-theme="dark"] .table-success, [data-bs-theme="dark"] .table-primary, [data-bs-theme="dark"] .table-secondary { --bs-table-striped-color: var(--bs-table-color); --bs-table-active-color: var(--bs-table-color); --bs-table-hover-color: var(--bs-table-color); color: var(--bs-table-color); border-color: var(--bs-table-border-color); } [data-bs-theme="dark"] .table-danger { --bs-table-color: #f1c0c5; --bs-table-bg: #3a1d22; --bs-table-border-color: #58303a; --bs-table-striped-bg: #40222a; --bs-table-active-bg: #4a2830; --bs-table-hover-bg: #45252c; } [data-bs-theme="dark"] .table-warning { --bs-table-color: #f3dfa2; --bs-table-bg: #3a3118; --bs-table-border-color: #5a4b22; --bs-table-striped-bg: #40361c; --bs-table-active-bg: #4b3f20; --bs-table-hover-bg: #463b1e; } [data-bs-theme="dark"] .table-success { --bs-table-color: #a9dcc3; --bs-table-bg: #17332a; --bs-table-border-color: #26503f; --bs-table-striped-bg: #1b392f; --bs-table-active-bg: #214436; --bs-table-hover-bg: #1f4033; } [data-bs-theme="dark"] .table-primary { --bs-table-color: #b6c8f5; --bs-table-bg: #1b2a4a; --bs-table-border-color: #2c4170; --bs-table-striped-bg: #1f2f52; --bs-table-active-bg: #25385f; --bs-table-hover-bg: #22345a; } [data-bs-theme="dark"] .table-secondary { --bs-table-color: var(--app-text); --bs-table-bg: #252b38; --bs-table-border-color: #363e4f; --bs-table-striped-bg: #2a303e; --bs-table-active-bg: #313848; --bs-table-hover-bg: #2e3544; } [data-bs-theme="dark"] .alert-light { --bs-alert-color: var(--app-text); --bs-alert-bg: #1d222d; --bs-alert-border-color: #2d3441; --bs-alert-link-color: var(--app-text); } /* Algumas folhas de rota (transactions.css) cravam `td { border: #ccc }` sem escopo; no escuro essas linhas acendem a grade inteira. */ [data-bs-theme="dark"] td { border-color: var(--bs-border-color); } /* ---- Componentes de terceiros ---------------------------------------- */ /* TomSelect (tema padrao, sem suporte a data-bs-theme) */ [data-bs-theme="dark"] .ts-control, [data-bs-theme="dark"] .ts-wrapper.single.input-active .ts-control, [data-bs-theme="dark"] .ts-dropdown { background: var(--app-surface); color: var(--app-text); border-color: var(--bs-border-color); } [data-bs-theme="dark"] .ts-control input, [data-bs-theme="dark"] .ts-dropdown .option { color: var(--app-text); } [data-bs-theme="dark"] .ts-dropdown .active { background-color: #252b38; color: var(--app-text); } [data-bs-theme="dark"] .ts-dropdown .optgroup-header, [data-bs-theme="dark"] .ts-dropdown .no-results, [data-bs-theme="dark"] .ts-dropdown .create { background: var(--app-surface); color: var(--app-text-muted); } [data-bs-theme="dark"] .ts-wrapper.multi .ts-control > div { background: #252b38; color: var(--app-text); border-color: #2d3441; } [data-bs-theme="dark"] .ts-wrapper.disabled .ts-control, [data-bs-theme="dark"] .ts-control.disabled { background-color: #1d222d; } /* DataTables FixedColumns: colunas fixas pintam fundo branco para cobrir o que rola por baixo */ [data-bs-theme="dark"] table.dataTable thead tr > .dtfc-fixed-left, [data-bs-theme="dark"] table.dataTable thead tr > .dtfc-fixed-right, [data-bs-theme="dark"] table.dataTable tbody tr > .dtfc-fixed-left, [data-bs-theme="dark"] table.dataTable tbody tr > .dtfc-fixed-right, [data-bs-theme="dark"] table.dataTable tfoot tr > .dtfc-fixed-left, [data-bs-theme="dark"] table.dataTable tfoot tr > .dtfc-fixed-right { background-color: var(--app-surface); } /* Quill (editor de observacoes da OS) */ [data-bs-theme="dark"] .ql-toolbar.ql-snow, [data-bs-theme="dark"] .ql-container.ql-snow { border-color: var(--bs-border-color); } [data-bs-theme="dark"] .ql-snow .ql-stroke { stroke: var(--app-text-2); } [data-bs-theme="dark"] .ql-snow .ql-fill, [data-bs-theme="dark"] .ql-snow .ql-stroke.ql-fill { fill: var(--app-text-2); } [data-bs-theme="dark"] .ql-snow .ql-picker { color: var(--app-text-2); } [data-bs-theme="dark"] .ql-snow .ql-picker-options, [data-bs-theme="dark"] .ql-snow .ql-tooltip { background-color: var(--app-surface); color: var(--app-text); border-color: var(--bs-border-color); box-shadow: none; } [data-bs-theme="dark"] .ql-editor.ql-blank::before { color: var(--app-text-muted); } /* Fancytree (arvore do plano de contas) */ [data-bs-theme="dark"] ul.fancytree-container { background-color: transparent; border-color: var(--bs-border-color); } [data-bs-theme="dark"] span.fancytree-title { color: var(--app-text); } [data-bs-theme="dark"] span.fancytree-node:hover span.fancytree-title, [data-bs-theme="dark"] span.fancytree-active span.fancytree-title, [data-bs-theme="dark"] span.fancytree-selected span.fancytree-title { color: var(--app-text); background-color: #252b38; border-color: #38425a; } /* ---- Cores avulsas das telas ----------------------------------------- */ /* Logo do menu lateral: PNG com texto escuro sobre transparente. Inverter a luminosidade e girar o matiz de volta clareia o texto sem trocar a cor do simbolo. */ [data-bs-theme="dark"] aside .logo img { filter: invert(1) hue-rotate(180deg); } /* Modal Seja PRO: comparativo FREE x PRO */ [data-bs-theme="dark"] .comparison-table th { color: var(--app-text); } [data-bs-theme="dark"] .comparison-table td { border-color: var(--bs-border-color); } [data-bs-theme="dark"] .comparison-table td:nth-child(2) { background-color: rgba(255, 193, 7, 0.08); } [data-bs-theme="dark"] .comparison-table td:nth-child(3) { background-color: rgba(40, 167, 69, 0.12); } /* Dropdown legado (Etiquetas) */ [data-bs-theme="dark"] .dropdown-content-drop { border-color: var(--bs-border-color); } [data-bs-theme="dark"] .dropdown-content-drop a { color: var(--app-text); } [data-bs-theme="dark"] .dropdown-drop a:hover { background-color: #252b38; } /* Estoque minimo */ [data-bs-theme="dark"] .stock-min-alert { background-color: rgba(220, 38, 38, 0.18) !important; color: #fca5a5; } /* Lancamentos: linha que vence hoje */ [data-bs-theme="dark"] .table-due-today > td { background-color: rgba(250, 204, 21, 0.14) !important; } /* Avatar com iniciais */ [data-bs-theme="dark"] .user-initials { color: var(--app-text); } /* Home: limites do plano free */ [data-bs-theme="dark"] .progress-bar-container { background: #252b38; } [data-bs-theme="dark"] .limit-text { color: var(--app-text); } [data-bs-theme="dark"] .support-body p { color: var(--app-text-2); } /* Home: kanban */ [data-bs-theme="dark"] .kanban-column, [data-bs-theme="dark"] .kanban-list { background: #1d222d; } [data-bs-theme="dark"] .kanban-title, [data-bs-theme="dark"] .due-date { color: var(--slate-500); } [data-bs-theme="dark"] .os-number { color: #7f9fd4; } [data-bs-theme="dark"] .client-name { color: var(--app-text); } [data-bs-theme="dark"] .equipment-info, [data-bs-theme="dark"] .card-menu-btn { color: var(--app-text-2); } [data-bs-theme="dark"] .card-menu-options button { background: #252b38; color: var(--app-text); } [data-bs-theme="dark"] .card-menu-options button:hover { background: #2d3441; color: #fff; } [data-bs-theme="dark"] #kanban-scroll-thumb { background: rgba(200, 205, 215, 0.6); } [data-bs-theme="dark"] #kanban-scrollbar:hover #kanban-scroll-thumb, [data-bs-theme="dark"] #kanban-scrollbar.active #kanban-scroll-thumb { background: rgba(225, 229, 236, 0.95); } /* Ordem de servico: historico de etapas e fotos do equipamento */ [data-bs-theme="dark"] .stages-history-list::before { background-color: #2d3441; } [data-bs-theme="dark"] .stages-history-item::before { background-color: #5f6b84; border-color: var(--app-surface); box-shadow: 0 0 0 2px #2d3441; } [data-bs-theme="dark"] .stages-history-action { color: var(--app-text); } [data-bs-theme="dark"] .equipment-photos-preview-label { color: var(--app-text-2); } [data-bs-theme="dark"] .equipment-photos-section, [data-bs-theme="dark"] .equipment-photos-meta { border-top-color: rgba(255, 255, 255, 0.1); } [data-bs-theme="dark"] .equipment-photos-layout { border-color: rgba(255, 255, 255, 0.1); } [data-bs-theme="dark"] .equipment-photo-slot { border-color: rgba(255, 255, 255, 0.14); } [data-bs-theme="dark"] .equipment-photo-slot:not(.has-photo):hover { background: rgba(13, 110, 253, 0.12); } [data-bs-theme="dark"] .equipment-photo-slot.has-photo { background: #252b38; border-color: rgba(255, 255, 255, 0.12); } /* Usuarios: avatar e cards de laudo */ [data-bs-theme="dark"] .user-avatar, [data-bs-theme="dark"] .inspection-card-thumb { background: #252b38; } [data-bs-theme="dark"] .inspection-card { border-color: rgba(255, 255, 255, 0.1); } [data-bs-theme="dark"] .inspection-card-title { color: var(--app-text); } [data-bs-theme="dark"] .inspection-card-sep { background: rgba(255, 255, 255, 0.1); } /* Atualizacoes */ [data-bs-theme="dark"] .comment-box { background-color: #1d222d; } [data-bs-theme="dark"] h6 i { color: var(--app-text-2); } /* NFS-e: barra de totais das OS vinculadas (estilo embutido na pagina) */ [data-bs-theme="dark"] .nfs-os-totals-bar { background: #1d222d; }