/* ===================================================================== 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. Quatro 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. 4. CONTRASTE - combinacoes de classes do proprio markup que nascem ilegiveis (texto branco sem fundo, texto branco sobre amarelo). Valem nos dois temas, por isso ficam fora do escopo do escuro. 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; --app-warning-tint: #fef9c3; /* tom de linha (listagens): faixa, nao bloco */ --app-tone-overdue: #dc2626; --app-tone-due-today: #ca8a04; --app-tone-success: #16a34a; --app-tone-overdue-tint: rgba(220, 38, 38, 0.06); --app-tone-due-today-tint: rgba(202, 138, 4, 0.08); --app-tone-success-tint: rgba(22, 163, 74, 0.08); /* 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-warning-tint: #3a3118; --app-tone-overdue: #f1c0c5; --app-tone-due-today: #f3dfa2; --app-tone-success: #86efac; --app-tone-overdue-tint: rgba(241, 192, 197, 0.08); --app-tone-due-today-tint: rgba(243, 223, 162, 0.08); --app-tone-success-tint: rgba(134, 239, 172, 0.12); --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; } /* Listagens: linha que vence hoje (legado table-due-today) */ [data-bs-theme="dark"] .table-due-today>td { background-color: var(--app-tone-due-today-tint) !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 da tabela. Os cards de laudo (.inspection-card*) nao precisam de excecao: o inspection_cards.css ja os monta com token. */ [data-bs-theme="dark"] .user-avatar { 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; } /* --------------------------------------------------------------------- 4. CONTRASTE (vale nos dois temas) --------------------------------------------------------------------- */ /* Numero da O.S. nas listagens (Orcamentos, Dashboard, Bobinagem): o markup usa `badge btn-dark`, mas .btn-dark so declara as variaveis --bs-btn-*, e quem as consome e a classe .btn, que nao esta ali. Sem fundo, sobrava o #fff do --bs-badge-color: no claro o numero ficava branco sobre a linha branca da tabela. Aqui a dupla ganha fundo e texto proprios em cada tema. */ .badge.btn-dark { background-color: #212529; color: #fff; } .badge.btn-dark:hover, .badge.btn-dark:focus { background-color: #424649; color: #fff; } :root[data-bs-theme="dark"] .badge.btn-dark { background-color: #2d3441; color: var(--app-text); } :root[data-bs-theme="dark"] .badge.btn-dark:hover, :root[data-bs-theme="dark"] .badge.btn-dark:focus { background-color: #38425a; color: #fff; } /* Badges de status amarelo e azul-claro: o .badge escreve em #fff, e sobre o amarelo (#ffc107) ou o ciano (#0dcaf0) do Bootstrap isso nao passa de 1.8:1. O proprio Bootstrap usa texto preto sobre essas duas cores (.text-bg-warning / .text-bg-info). Sem !important de proposito: as telas que repintam .bg-warning e .bg-info com pasteis proprios (Lancamentos) continuam mandando na cor delas. Badges com bg-opacity tambem ficam de fora - ali a cor e translucida e quem aparece atras e o fundo do tema. */ .badge.bg-warning:not([class*="bg-opacity"]), .badge.bg-info:not([class*="bg-opacity"]) { color: #000; } /* Onde o markup ja crava .text-dark ou .text-white, a utilitaria vem com !important e apagaria o texto de novo: no escuro o .text-dark e invertido para claro (secao 3), e o .text-white e branco nos dois temas. Estes seletores carregam a propria utilitaria, entao alcancam so esses casos e nao as telas que apenas repintam o fundo. */ .badge.bg-warning.text-dark:not([class*="bg-opacity"]), .badge.bg-warning.text-white:not([class*="bg-opacity"]), .badge.bg-info.text-dark:not([class*="bg-opacity"]), .badge.bg-info.text-white:not([class*="bg-opacity"]) { color: #000 !important; }