/* public/css/theme-dark.css ------------------------------------------------------------------- Tema escuro do SYSWATER — alto contraste WCAG AA. Activa-se quando está presente. Sobrepõe variáveis e cores do base.css mantendo a sidebar azul. ------------------------------------------------------------------- */ html[data-theme="dark"] { --gray-50: #0f172a; --gray-100: #1e293b; --gray-200: #334155; --gray-300: #475569; --gray-500: #cbd5e1; /* texto secundario LEGIVEL no escuro */ --gray-700: #e2e8f0; --gray-900: #f8fafc; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --shadow-md: 0 6px 18px rgba(0, 0, 0, .55); --shadow-lg: 0 24px 50px -12px rgba(0, 0, 0, .65); } html[data-theme="dark"] body { background: #0b1220; color: #e2e8f0; } /* ─ Topbar ─ */ html[data-theme="dark"] .topbar { background: #131c33; border-bottom-color: rgba(255, 255, 255, .10); } html[data-theme="dark"] .topbar .title h1 { color: #f8fafc; } html[data-theme="dark"] .topbar .title .crumb { color: #cbd5e1; } html[data-theme="dark"] .topbar .menu-btn { color: #e2e8f0; } html[data-theme="dark"] .topbar .menu-btn:hover { background: rgba(255, 255, 255, .10); } /* ─ Cards ─ */ html[data-theme="dark"] .card, html[data-theme="dark"] .stat-card { background: #131c33; border-color: rgba(255, 255, 255, .10); color: #e2e8f0; } html[data-theme="dark"] .stat-card .value { color: #ffffff; font-weight: 800; } html[data-theme="dark"] .stat-card .label { color: #cbd5e1; } /* ─ Card headers (titulos das seccoes do dashboard) ─ */ html[data-theme="dark"] .card-header { background: #131c33; border-bottom-color: rgba(255, 255, 255, .10); } html[data-theme="dark"] .card-header h2, html[data-theme="dark"] .card-header h3, html[data-theme="dark"] .card-header h4 { color: #f8fafc !important; font-weight: 700; } html[data-theme="dark"] .card-header h2 .bi, html[data-theme="dark"] .card-header h3 .bi { color: #7dd3fc; } html[data-theme="dark"] .card-header .text-muted, html[data-theme="dark"] .card-header .muted { color: #cbd5e1 !important; } /* ─ Tabelas "modern" ─ */ html[data-theme="dark"] .table.modern thead th { background: #0f172a; color: #cbd5e1; border-bottom-color: rgba(255, 255, 255, .12); font-weight: 700; } html[data-theme="dark"] .table.modern tbody td { border-bottom-color: rgba(255, 255, 255, .08); color: #e2e8f0; } html[data-theme="dark"] .table.modern tbody td strong { color: #ffffff; } html[data-theme="dark"] .table.modern tbody tr:hover { background: rgba(255, 255, 255, .04); } html[data-theme="dark"] .table.modern td.empty { color: #cbd5e1; } /* ─ Tabelas Bootstrap genericas ─ */ html[data-theme="dark"] .table { color: #e2e8f0; } html[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: #e2e8f0; border-bottom-color: rgba(255, 255, 255, .08); } html[data-theme="dark"] .table-hover > tbody > tr:hover > * { background: rgba(255, 255, 255, .04); color: #ffffff; } /* ─ Textos auxiliares (TODOS os tons de cinzento mais claros no escuro) ─ */ html[data-theme="dark"] .muted { color: #cbd5e1 !important; } html[data-theme="dark"] .text-muted { color: #cbd5e1 !important; } html[data-theme="dark"] .text-secondary { color: #cbd5e1 !important; } html[data-theme="dark"] .small, html[data-theme="dark"] small { color: inherit; } html[data-theme="dark"] .form-text { color: #cbd5e1; } /* ─ Forms ─ */ html[data-theme="dark"] .form-label { color: #f1f5f9; font-weight: 700; } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: #0f172a; color: #f8fafc; border-color: rgba(255, 255, 255, .15); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: #0f172a; color: #ffffff; border-color: #56b1e3; box-shadow: 0 0 0 3px rgba(86, 177, 227, .25); } html[data-theme="dark"] .form-control::placeholder { color: #94a3b8; } html[data-theme="dark"] .input-group-text { background-color: #1e293b; color: #cbd5e1; border-color: rgba(255, 255, 255, .15); } /* ─ Botoes ─ */ html[data-theme="dark"] .btn-outline-secondary { color: #cbd5e1; border-color: rgba(255, 255, 255, .20); } html[data-theme="dark"] .btn-outline-secondary:hover { background: rgba(255, 255, 255, .08); color: #ffffff; border-color: rgba(255, 255, 255, .30); } html[data-theme="dark"] .btn-light { background: #1e293b; color: #f8fafc; border-color: rgba(255, 255, 255, .15); } html[data-theme="dark"] .btn-light:hover { background: #334155; color: #ffffff; } /* ─ Badges (preserva cores fortes; ajusta os "subtle") ─ */ html[data-theme="dark"] .bg-primary-subtle { background-color: rgba(38, 145, 209, .25) !important; } html[data-theme="dark"] .bg-success-subtle { background-color: rgba(22, 163, 74, .25) !important; } html[data-theme="dark"] .bg-warning-subtle { background-color: rgba(245, 158, 11, .25) !important; } html[data-theme="dark"] .bg-danger-subtle { background-color: rgba(239, 68, 68, .25) !important; } html[data-theme="dark"] .bg-info-subtle { background-color: rgba(56, 189, 248, .25) !important; } html[data-theme="dark"] .bg-secondary-subtle{ background-color: rgba(148, 163, 184, .25) !important; } html[data-theme="dark"] .text-primary { color: #7dd3fc !important; } html[data-theme="dark"] .text-success { color: #86efac !important; } html[data-theme="dark"] .text-warning { color: #fbbf24 !important; } html[data-theme="dark"] .text-danger { color: #fca5a5 !important; } html[data-theme="dark"] .text-info { color: #7dd3fc !important; } /* ─ Border helpers ─ */ html[data-theme="dark"] .border { border-color: rgba(255, 255, 255, .12) !important; } html[data-theme="dark"] .border-top { border-top-color: rgba(255, 255, 255, .12) !important; } html[data-theme="dark"] .border-bottom { border-bottom-color: rgba(255, 255, 255, .12) !important; } html[data-theme="dark"] .border-start { border-left-color: rgba(255, 255, 255, .12) !important; } html[data-theme="dark"] .border-end { border-right-color: rgba(255, 255, 255, .12) !important; } /* ─ Nav tabs ─ */ html[data-theme="dark"] .nav-tabs { border-bottom-color: rgba(255, 255, 255, .12); } html[data-theme="dark"] .nav-tabs .nav-link { color: #cbd5e1; border-color: transparent; } html[data-theme="dark"] .nav-tabs .nav-link:hover { color: #ffffff; border-color: rgba(255, 255, 255, .12); } html[data-theme="dark"] .nav-tabs .nav-link.active { background-color: #131c33; color: #7dd3fc; border-color: rgba(255, 255, 255, .12) rgba(255, 255, 255, .12) #131c33; } /* ─ Pills/badges customizados ─ */ html[data-theme="dark"] .badge.b-soft { background: rgba(125, 211, 252, .22); color: #7dd3fc; } html[data-theme="dark"] .badge.b-soft.green { background: rgba(22, 163, 74, .22); color: #86efac; } html[data-theme="dark"] .badge.b-soft.red { background: rgba(239, 68, 68, .22); color: #fca5a5; } html[data-theme="dark"] .badge.b-soft.amber { background: rgba(245, 158, 11, .22); color: #fbbf24; } html[data-theme="dark"] .badge.b-soft.gray { background: rgba(148, 163, 184, .22); color: #cbd5e1; } /* ─ Modais ─ */ html[data-theme="dark"] .modal-content { background: #131c33; color: #e2e8f0; border: 1px solid rgba(255, 255, 255, .12); } html[data-theme="dark"] .modal-header { border-bottom-color: rgba(255, 255, 255, .12); } html[data-theme="dark"] .modal-footer { border-top-color: rgba(255, 255, 255, .12); } html[data-theme="dark"] .modal-title { color: #f8fafc; } html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(1.5); } /* ─ Dropdowns ─ */ html[data-theme="dark"] .dropdown-menu { background: #131c33; color: #e2e8f0; border-color: rgba(255, 255, 255, .12); } html[data-theme="dark"] .dropdown-item { color: #e2e8f0; } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background: rgba(255, 255, 255, .08); color: #ffffff; } /* ─ Listas (dashboard "Actividade recente") ─ */ html[data-theme="dark"] .list-group-item { background: transparent; color: #e2e8f0; border-color: rgba(255, 255, 255, .08); } html[data-theme="dark"] .fw-semibold { color: #f1f5f9; } /* ─ Alertas ─ */ html[data-theme="dark"] .alert-success { background: rgba(22,163,74,.18); color: #86efac; border-color: rgba(22,163,74,.35); } html[data-theme="dark"] .alert-info { background: rgba(56,189,248,.18); color: #7dd3fc; border-color: rgba(56,189,248,.35); } html[data-theme="dark"] .alert-warning { background: rgba(245,158,11,.18); color: #fbbf24; border-color: rgba(245,158,11,.35); } html[data-theme="dark"] .alert-danger { background: rgba(239,68,68,.18); color: #fca5a5; border-color: rgba(239,68,68,.35); } /* ─ Search/textbox no header ─ */ html[data-theme="dark"] input[type="search"] { background: #0f172a; color: #f8fafc; border-color: rgba(255, 255, 255, .15); } html[data-theme="dark"] input[type="search"]::placeholder { color: #94a3b8; } /* ─ Sidebar fica como esta (gradiente azul) — apenas garantir links visiveis ─ */ html[data-theme="dark"] .sb-brand .small { color: #bdd7eb; } html[data-theme="dark"] .sb-nav a { color: #dfeef9; } html[data-theme="dark"] .sb-nav a:hover { background: rgba(255,255,255,.10); color: #ffffff; } html[data-theme="dark"] .sb-nav a.active { background: rgba(255,255,255,.16); color: #ffffff; } html[data-theme="dark"] .sb-footer { color: #bdd7eb; } /* ─ Botao "toggle theme" (sol/lua) na topbar ─ */ html[data-theme="dark"] .theme-toggle { background: rgba(255, 255, 255, .08); color: #fbbf24; border: 1px solid rgba(255, 255, 255, .12); } html[data-theme="dark"] .theme-toggle:hover { background: rgba(255, 255, 255, .15); } /* ─ POS / Balcao ─ */ html[data-theme="dark"] #posClienteCard, html[data-theme="dark"] .pos-cart, html[data-theme="dark"] .pos-search { background: #131c33; color: #e2e8f0; border-color: rgba(255,255,255,.10); } /* ─ Stat cards do dashboard (Faturas vencidas, Clientes activos, etc.) ─ */ html[data-theme="dark"] .stat-card .icon-wrap { /* gradient e cores mantidas pelo base */ } html[data-theme="dark"] [class*="-kpi"] .lbl, html[data-theme="dark"] [class*="-kpi"] .label { color: #cbd5e1 !important; } html[data-theme="dark"] [class*="-kpi"] .val, html[data-theme="dark"] [class*="-kpi"] .value { color: #ffffff !important; } /* ─ Cliente/ficha — KPIs ─ */ html[data-theme="dark"] .cli-kpi { background: #0f172a; border-color: rgba(255,255,255,.10); } html[data-theme="dark"] .cli-kpi .lbl { color: #cbd5e1; } html[data-theme="dark"] .cli-kpi .sub { color: #94a3b8; } html[data-theme="dark"] .cli-kpi .value { color: #ffffff; } /* ─ Tooltips ─ */ html[data-theme="dark"] .tooltip-inner { background: #1e293b; color: #f8fafc; } html[data-theme="dark"] .tooltip .tooltip-arrow::before { border-bottom-color: #1e293b; } /* ─ Pagination ─ */ html[data-theme="dark"] .page-link { background: #131c33; color: #cbd5e1; border-color: rgba(255,255,255,.12); } html[data-theme="dark"] .page-link:hover { background: #1e293b; color: #ffffff; } html[data-theme="dark"] .page-item.active .page-link { background: #2691d1; color: #ffffff; border-color: #2691d1; } html[data-theme="dark"] .page-item.disabled .page-link { background: #0f172a; color: #475569; } /* ─ Estados (badges customizados das tabelas) ─ */ html[data-theme="dark"] .estado-badge { padding: .2rem .55rem; border-radius: .35rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; } html[data-theme="dark"] .estado-pendente { background: rgba(245,158,11,.25); color: #fbbf24; } html[data-theme="dark"] .estado-paga { background: rgba(22,163,74,.25); color: #86efac; } html[data-theme="dark"] .estado-vencida { background: rgba(239,68,68,.25); color: #fca5a5; } html[data-theme="dark"] .estado-anulada { background: rgba(148,163,184,.20); color: #cbd5e1; } html[data-theme="dark"] .estado-activo, html[data-theme="dark"] .estado-active { background: rgba(22,163,74,.25); color: #86efac; } html[data-theme="dark"] .estado-suspenso { background: rgba(245,158,11,.25); color: #fbbf24; } html[data-theme="dark"] .estado-cortado, html[data-theme="dark"] .estado-cancelado { background: rgba(239,68,68,.25); color: #fca5a5; } /* ─ Acabar com qualquer texto preto/escuro que escape ─ */ html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] label, html[data-theme="dark"] dl, html[data-theme="dark"] dt, html[data-theme="dark"] dd { color: inherit; } html[data-theme="dark"] a:not(.btn):not(.sb-nav a):not(.dropdown-item) { color: #7dd3fc; } html[data-theme="dark"] a:not(.btn):not(.sb-nav a):not(.dropdown-item):hover { color: #38bdf8; } /* ─ Toasts ─ */ html[data-theme="dark"] .toast-mini { background: #1e293b; border-color: #334155; border-left-color: var(--blue-500); /* sobreposto pelas variantes abaixo */ color: #f1f5f9; box-shadow: 0 8px 24px rgba(0,0,0,.55); } html[data-theme="dark"] .toast-mini span { color: #f1f5f9; } html[data-theme="dark"] .toast-mini.success { border-left-color: #10b981; } html[data-theme="dark"] .toast-mini.error { border-left-color: #ef4444; } html[data-theme="dark"] .toast-mini.warn { border-left-color: #f59e0b; } /* ─ Light mode — placeholder agora visivel (saiu de gray-300 para gray-500) ─ */ html:not([data-theme="dark"]) .form-control::placeholder, html:not([data-theme="dark"]) .form-select::placeholder { color: #64748b !important; opacity: 1; } html:not([data-theme="dark"]) .btn-outline-secondary { color: #334155; border-color: #94a3b8; } html:not([data-theme="dark"]) .btn-outline-secondary:hover { background: #f1f5f9; color: #0f172a; border-color: #475569; } /* ─ Modal header/footer: garantir fundo escuro herdado e título visível ─ */ html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { background: #131c33 !important; color: #f8fafc !important; } html[data-theme="dark"] .modal-header .modal-title { color: #f8fafc !important; } html[data-theme="dark"] .modal-header .modal-title .bi { color: #7dd3fc; } html[data-theme="dark"] .modal-body { background: #131c33 !important; color: #e2e8f0 !important; } /* Modal dialog "Detalhes" — cartoes opacos */ html[data-theme="dark"] .detalhe-card { background: #0f172a !important; border-color: rgba(255,255,255,.10) !important; } html[data-theme="dark"] .detalhe-card .detalhe-label { color: #cbd5e1 !important; } html[data-theme="dark"] .detalhe-card .detalhe-valor { color: #f8fafc !important; } html[data-theme="dark"] .detalhe-card .detalhe-valor.grande { color: #7dd3fc !important; } /* ════════════════════════════════════════════════════════════════════════════ OVERRIDES AGRESSIVOS PARA FUNDO ESCURO Apanha cards "vidro" brancos translúcidos (Infrações, Despesas, Tarefas, Tarifas, Permissões) que apareciam com background:#fff e texto escuro ilegível sobre o tema escuro global. ════════════════════════════════════════════════════════════════════════════ */ /* Backgrounds brancos translúcidos em geral (rgba(255,255,255,...)) */ html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background:white"], html[data-theme="dark"] [style*="background-color:#fff"], html[data-theme="dark"] [style*="background-color:white"] { background: #131c33 !important; color: #e2e8f0 !important; } /* Bootstrap bg-white / bg-light */ html[data-theme="dark"] .bg-white { background-color: #131c33 !important; color: #e2e8f0 !important; } html[data-theme="dark"] .bg-light { background-color: #1e293b !important; color: #e2e8f0 !important; } html[data-theme="dark"] .text-dark { color: #f8fafc !important; } html[data-theme="dark"] .text-black { color: #f8fafc !important; } /* Cards customizados (Infrações, Despesas, Tarefas KPIs) */ html[data-theme="dark"] .infrac-kpi, html[data-theme="dark"] .desp-kpi, html[data-theme="dark"] .tarefa-kpi, html[data-theme="dark"] .nota-kpi, html[data-theme="dark"] .turno-kpi, html[data-theme="dark"] [class*="-kpi"] { background: #131c33 !important; border-color: rgba(255,255,255,.10) !important; color: #e2e8f0 !important; } /* Labels e valores dentro de KPIs */ html[data-theme="dark"] [class*="-kpi"] .label, html[data-theme="dark"] [class*="-kpi"] .lbl, html[data-theme="dark"] [class*="-kpi"] .title { color: #cbd5e1 !important; } html[data-theme="dark"] [class*="-kpi"] .value, html[data-theme="dark"] [class*="-kpi"] .val, html[data-theme="dark"] [class*="-kpi"] .number { color: #ffffff !important; font-weight: 800; } html[data-theme="dark"] [class*="-kpi"] small, html[data-theme="dark"] [class*="-kpi"] .sub { color: #94a3b8 !important; } /* Cards de Tarifas — secções "Período de Lançamento", "Tarifas por Tipo de Cliente", "Tarifas de Multas por Atraso", "Taxa de Religação", "Juros de Mora" */ html[data-theme="dark"] .tarifa-section, html[data-theme="dark"] .tarifa-card, html[data-theme="dark"] .tarifa-tipo { background: #131c33 !important; border-color: rgba(255,255,255,.10) !important; color: #e2e8f0 !important; } html[data-theme="dark"] .tarifa-section h2, html[data-theme="dark"] .tarifa-section h3, html[data-theme="dark"] .tarifa-section h4, html[data-theme="dark"] .tarifa-section h5 { color: #f8fafc !important; } html[data-theme="dark"] .tarifa-section .form-label, html[data-theme="dark"] .tarifa-card .form-label { color: #f1f5f9 !important; } html[data-theme="dark"] .tarifa-section .form-text, html[data-theme="dark"] .tarifa-card .form-text { color: #cbd5e1 !important; } /* Painel "Permissões de utilizador" — header info azul-claro com texto ilegível */ html[data-theme="dark"] .alert-info, html[data-theme="dark"] .perm-info, html[data-theme="dark"] .perm-banner { background: rgba(56,189,248,.15) !important; border-color: rgba(56,189,248,.30) !important; color: #e0f2fe !important; } html[data-theme="dark"] .perm-info strong, html[data-theme="dark"] .perm-banner strong { color: #7dd3fc !important; } /* Tabela de permissões */ html[data-theme="dark"] .permissoes-table th, html[data-theme="dark"] table.permissoes thead th { color: #cbd5e1 !important; background: #0f172a !important; } html[data-theme="dark"] .permissoes-table td, html[data-theme="dark"] table.permissoes td { color: #e2e8f0 !important; } html[data-theme="dark"] .modulo-label, html[data-theme="dark"] [class*="modulo-"] { color: #e2e8f0 !important; } /* Inputs dentro destes painéis: garantir texto branco */ html[data-theme="dark"] input.form-control, html[data-theme="dark"] textarea.form-control, html[data-theme="dark"] select.form-select { background-color: #0f172a !important; color: #f8fafc !important; border-color: rgba(255,255,255,.15) !important; } html[data-theme="dark"] input.form-control:focus, html[data-theme="dark"] textarea.form-control:focus, html[data-theme="dark"] select.form-select:focus { background-color: #0f172a !important; color: #ffffff !important; border-color: #56b1e3 !important; } /* Checkbox / switch labels com bom contraste */ html[data-theme="dark"] .form-check-label, html[data-theme="dark"] .form-switch label { color: #e2e8f0 !important; } html[data-theme="dark"] .form-check-input { background-color: #0f172a; border-color: rgba(255,255,255,.25); } html[data-theme="dark"] .form-check-input:checked { background-color: #2691d1; border-color: #2691d1; } /* Dashboard: lista lateral "Actividade recente" — itens com fundo branco */ html[data-theme="dark"] .recent-item, html[data-theme="dark"] #recentList > div { background: transparent !important; color: #e2e8f0 !important; border-bottom-color: rgba(255,255,255,.08) !important; } html[data-theme="dark"] #recentList .fw-semibold { color: #f1f5f9 !important; } html[data-theme="dark"] #recentList .muted, html[data-theme="dark"] #recentList small { color: #cbd5e1 !important; } /* Quaisquer divs com border-bottom escuro herdado de Bootstrap */ html[data-theme="dark"] .border-bottom { border-bottom-color: rgba(255,255,255,.10) !important; } /* ════════════════════════════════════════════════════════════════════════════ OVERRIDES ESPECÍFICOS — Tarifas, Permissões, Utilizadores Aplicados depois do ficheiro próprio de cada módulo para vencer especificidade ════════════════════════════════════════════════════════════════════════════ */ /* ─ TARIFAS ─ */ html[data-theme="dark"] .cfg-card, html[data-theme="dark"] .tar-card { background: #131c33 !important; border-color: rgba(255,255,255,.10) !important; color: #e2e8f0 !important; } html[data-theme="dark"] .cfg-card h2 { color: #f8fafc !important; } html[data-theme="dark"] .cfg-card h2.amber { color: #fbbf24 !important; } html[data-theme="dark"] .cfg-card h2.amber .ic { background: rgba(245,158,11,.18) !important; color: #fbbf24 !important; } html[data-theme="dark"] .cfg-card h2.green { color: #86efac !important; } html[data-theme="dark"] .cfg-card h2.green .ic { background: rgba(22,163,74,.18) !important; color: #86efac !important; } html[data-theme="dark"] .cfg-card h2.red { color: #fca5a5 !important; } html[data-theme="dark"] .cfg-card h2.red .ic { background: rgba(239,68,68,.18) !important; color: #fca5a5 !important; } html[data-theme="dark"] .cfg-card label { color: #cbd5e1 !important; } html[data-theme="dark"] .cfg-card .form-text { color: #94a3b8 !important; } html[data-theme="dark"] .cfg-card input.form-control, html[data-theme="dark"] .cfg-card select.form-select { background: #0f172a !important; color: #f8fafc !important; border-color: rgba(255,255,255,.15) !important; } html[data-theme="dark"] .cfg-card .input-group-text { background: #1e293b !important; color: #cbd5e1 !important; border-color: rgba(255,255,255,.15) !important; } html[data-theme="dark"] .exemplo-box { background: rgba(22,163,74,.12) !important; border: 1px solid rgba(22,163,74,.30) !important; color: #86efac !important; } html[data-theme="dark"] .exemplo-box strong { color: #86efac !important; } html[data-theme="dark"] .exemplo-box code { background: rgba(0,0,0,.30) !important; color: #f8fafc !important; } html[data-theme="dark"] .tar-tabs .tab { color: #cbd5e1 !important; } html[data-theme="dark"] .tar-tabs .tab:hover { color: #7dd3fc !important; } html[data-theme="dark"] .tar-tabs .tab.on { color: #7dd3fc !important; border-bottom-color: #7dd3fc !important; } /* ─ UTILIZADORES / PERMISSÕES ─ */ html[data-theme="dark"] .u-tabs { border-bottom-color: rgba(255,255,255,.10) !important; } html[data-theme="dark"] .u-tabs button { color: #cbd5e1 !important; } html[data-theme="dark"] .u-tabs button:hover { color: #7dd3fc !important; } html[data-theme="dark"] .u-tabs button.on { color: #7dd3fc !important; border-bottom-color: #7dd3fc !important; } html[data-theme="dark"] #modalUser .modal-header { background: linear-gradient(135deg, #0e4b7a, #0a3a5e) !important; color: #fff !important; } html[data-theme="dark"] #modalUser .modal-body { background: #131c33 !important; color: #e2e8f0 !important; } html[data-theme="dark"] .user-cell .det .nome { color: #f8fafc !important; } html[data-theme="dark"] .user-cell .det .meta { color: #cbd5e1 !important; } html[data-theme="dark"] .user-card, html[data-theme="dark"] .user-card-header { background: #0f172a !important; border-color: rgba(255,255,255,.10) !important; color: #e2e8f0 !important; } /* Tabela de permissões (módulo × acção) */ html[data-theme="dark"] .perm-panel { background: #131c33 !important; border-color: rgba(255,255,255,.10) !important; color: #e2e8f0 !important; } html[data-theme="dark"] .perm-panel .perm-table { background: transparent !important; color: #f8fafc !important; } html[data-theme="dark"] .modulo-cell, html[data-theme="dark"] .perm-modulo, html[data-theme="dark"] .perm-table .modulo, html[data-theme="dark"] .perm-table td.modulo, html[data-theme="dark"] table.perm-table tbody tr td:first-child { color: #f8fafc !important; background: transparent !important; font-weight: 600 !important; } html[data-theme="dark"] .perm-table .modulo .ic { background: rgba(56,189,248,.18) !important; color: #7dd3fc !important; } html[data-theme="dark"] .perm-table thead th { color: #cbd5e1 !important; background: #0f172a !important; } html[data-theme="dark"] .perm-table tbody tr:hover td { background: rgba(255,255,255,.04) !important; } html[data-theme="dark"] .perm-info, html[data-theme="dark"] .alert-perm { background: rgba(56,189,248,.12) !important; border-color: rgba(56,189,248,.30) !important; color: #e0f2fe !important; } html[data-theme="dark"] .perm-info strong { color: #7dd3fc !important; } /* ─ Botões de ação rápida das permissões (Repor padrão / Tudo / Nada) ─ Em dark mode têm background:#fff hardcoded com texto var(--gray-700)=#e2e8f0 → branco sobre branco. Corrigido para fundo escuro com texto legível. */ html[data-theme="dark"] .perm-actions button { background: #1e293b !important; color: #e2e8f0 !important; border-color: rgba(255,255,255,.15) !important; } html[data-theme="dark"] .perm-actions button:hover { background: rgba(38,145,209,.18) !important; color: #7dd3fc !important; border-color: #2691d1 !important; } html[data-theme="dark"] .perm-actions button.primary { background: #125f96 !important; color: #fff !important; border-color: #125f96 !important; } html[data-theme="dark"] .perm-actions button.primary:hover { background: #0e4b7a !important; } /* ─ Cards de utilizador (u-card, u-roles-card) com background:#fff ─ */ html[data-theme="dark"] .u-card, html[data-theme="dark"] .u-roles-card { background: #131c33 !important; border-color: rgba(255,255,255,.10) !important; color: #e2e8f0 !important; } html[data-theme="dark"] .u-card h3, html[data-theme="dark"] .u-roles-card h3 { color: #f8fafc !important; } /* ─ POS — dropdown de resultados de pesquisa ─ Problema: .pos-results-dropdown tinha background:#fff hardcoded, então em dark mode os nomes (var(--gray-900) = #f8fafc) ficavam brancos sobre branco. */ html[data-theme="dark"] .pos-results-dropdown { background: #131c33 !important; border-color: rgba(255,255,255,.10) !important; box-shadow: 0 16px 40px -12px rgba(0,0,0,.65) !important; } html[data-theme="dark"] .pos-result { border-bottom-color: rgba(255,255,255,.08) !important; } html[data-theme="dark"] .pos-result:hover, html[data-theme="dark"] .pos-result.kbd-hover { background: rgba(56,189,248,.12) !important; } html[data-theme="dark"] .pos-result .nome { color: #f8fafc !important; } html[data-theme="dark"] .pos-result .meta { color: #cbd5e1 !important; } html[data-theme="dark"] .pos-search-hint { color: #cbd5e1 !important; } html[data-theme="dark"] .pos-kpi { background: #131c33 !important; border-color: rgba(255,255,255,.10) !important; } html[data-theme="dark"] .pos-kpi .lbl { color: #cbd5e1 !important; } html[data-theme="dark"] .pos-kpi .val { color: #f8fafc !important; } html[data-theme="dark"] .pos-tabs button { background: #131c33 !important; border-color: rgba(255,255,255,.10) !important; color: #cbd5e1 !important; } html[data-theme="dark"] .pos-tabs button.on { background: #0ea5e9 !important; color: #fff !important; border-color: #0ea5e9 !important; } html[data-theme="dark"] .pos-empty { background: #131c33 !important; border-color: rgba(255,255,255,.15) !important; color: #cbd5e1 !important; } /* ============================================================================ Dark mode dos cartões financeiros do Dashboard. ============================================================================ */ /* Tons mais claros para se lerem bem em fundo escuro. */ html[data-theme="dark"] .valor-financeiro.valor-positivo { color: #4ade80; } html[data-theme="dark"] .valor-financeiro.valor-pendente { color: #fbbf24; } html[data-theme="dark"] .valor-financeiro.valor-vencido { color: #f87171; } html[data-theme="dark"] .valor-financeiro.valor-neutro { color: #7dd3fc; } /* ════════════════════════════════════════════════════════════════════════════ ── POS — modais (pagamento/recibo/multas/anulação) contraste escuro ── Problema: em pos.css os sub-cartões dos modais usam BACKGROUNDS CLAROS hardcoded (#f8fafc, #fff, #fffbeb…) enquanto o texto usa var(--gray-*), que no tema escuro são remapeadas para tons CLAROS → texto claro sobre fundo claro (quase invisível). Aqui forçamos fundos escuros + texto claro de alto contraste. Tudo dentro de html[data-theme="dark"] para NÃO afectar o modo claro. Paleta: card #0f172a, borda rgba(255,255,255,.10), texto #f8fafc, label #cbd5e1, mudo #94a3b8, azul #7dd3fc, verde #86efac, âmbar #fbbf24, vermelho #fca5a5. ════════════════════════════════════════════════════════════════════════════ */ /* 1 ─ Secções (cartões internos genéricos) + títulos */ html[data-theme="dark"] .pag-section { background: #0f172a !important; border-color: rgba(255,255,255,.10) !important; color: #e2e8f0 !important; } html[data-theme="dark"] .pag-section-title { color: #cbd5e1 !important; } html[data-theme="dark"] .pag-section-title i { color: #7dd3fc !important; } /* 2 ─ Definition list (metadata fatura/cliente) */ html[data-theme="dark"] .pag-dl dt { color: #cbd5e1 !important; } html[data-theme="dark"] .pag-dl dd { color: #f8fafc !important; } /* 3 ─ Grelha de leituras */ html[data-theme="dark"] .pag-leitura-grid > div { background: #0f172a !important; border-color: rgba(255,255,255,.10) !important; } html[data-theme="dark"] .pag-leitura-val { color: #f8fafc !important; } /* mantém azul quando marcado .text-primary (consumo) */ html[data-theme="dark"] .pag-leitura-val.text-primary { color: #7dd3fc !important; } /* 4 ─ Decomposição do valor */ html[data-theme="dark"] .pag-decomp .row-l { border-bottom-color: rgba(255,255,255,.12) !important; } html[data-theme="dark"] .pag-decomp .row-l .lbl { color: #cbd5e1 !important; } html[data-theme="dark"] .pag-decomp .row-l .val { color: #f8fafc !important; } html[data-theme="dark"] .pag-decomp .row-l.total { border-top-color: rgba(255,255,255,.20) !important; } html[data-theme="dark"] .pag-decomp .row-l.total .lbl, html[data-theme="dark"] .pag-decomp .row-l.total .val { color: #86efac !important; } html[data-theme="dark"] .pag-decomp .row-l.desconto .val { color: #fbbf24 !important; } /* 5 ─ Histórico de pagamentos */ html[data-theme="dark"] .pag-hist .pag-hist-item { background: #0f172a !important; border-color: rgba(255,255,255,.10) !important; } html[data-theme="dark"] .pag-hist .hist-data { color: #f8fafc !important; } html[data-theme="dark"] .pag-hist .hist-met { color: #cbd5e1 !important; } html[data-theme="dark"] .pag-hist .hist-obs { color: #94a3b8 !important; } html[data-theme="dark"] .pag-hist .hist-val { color: #86efac !important; } html[data-theme="dark"] .pag-hist-empty { color: #cbd5e1 !important; } html[data-theme="dark"] .pag-hist-totais { color: #f8fafc !important; border-top-color: rgba(255,255,255,.12) !important; } html[data-theme="dark"] .pag-hist .hist-recibo { color: #7dd3fc !important; background: rgba(125,211,252,.14) !important; } /* 6 ─ Secção do formulário (âmbar) + hint multi-método. A pos.css já define o fundo âmbar translúcido escuro; aqui garantimos que os textos do título e hint lêem bem. */ html[data-theme="dark"] .pag-form-section .pag-section-title { color: #fbbf24 !important; } html[data-theme="dark"] .pag-form-section .pag-section-title i { color: #fbbf24 !important; } html[data-theme="dark"] .pag-form-section .form-label { color: #fbbf24 !important; } html[data-theme="dark"] .pag-multi-hint { color: #94a3b8 !important; } /* 7 ─ Sumário (soma das linhas multi-método) */ html[data-theme="dark"] .pag-sumario { border-color: rgba(245,158,11,.30) !important; color: #e2e8f0 !important; } html[data-theme="dark"] .pag-sumario .lbl { color: #cbd5e1 !important; } html[data-theme="dark"] .pag-sumario strong { color: #f8fafc !important; } /* estados de validação visíveis no escuro */ html[data-theme="dark"] .pag-sumario.over strong#pagSomaLinhas { color: #fca5a5 !important; } html[data-theme="dark"] .pag-sumario.exact strong#pagSomaLinhas { color: #86efac !important; } /* 8 ─ Cabeçalho azul (gradiente já escuro) — apenas reforçar legibilidade */ html[data-theme="dark"] .pag-numero { color: #ffffff !important; } html[data-theme="dark"] .pag-saldo { color: #ffffff !important; } html[data-theme="dark"] .pag-saldo.zero { color: #bbf7d0 !important; } /* 10 ─ Linhas de pagamento (labels dentro dos campos) */ html[data-theme="dark"] .pag-linha .ln-field > label { color: #cbd5e1 !important; } html[data-theme="dark"] .pag-linhas-actions .pag-parcial label { color: #cbd5e1 !important; } /* 11 ─ Modais de Multas / Anulação: cartões e helpers JS-built. Os cartões de preview (#anularPreview / #anularPagPreview) são .cfg-card com background CLARO inline (#fff7ed, #fef2f2, #eff6ff…) e títulos com cor escura inline. Forçamos fundo escuro para que o corpo .small (que herda texto claro do override de .cfg-card) fique legível, e tornamos os títulos claros. */ html[data-theme="dark"] #anularPreview .cfg-card, html[data-theme="dark"] #anularPagPreview .cfg-card { background: #0f172a !important; border-color: rgba(255,255,255,.12) !important; color: #e2e8f0 !important; } html[data-theme="dark"] #anularPreview .cfg-card h6, html[data-theme="dark"] #anularPagPreview .cfg-card h6 { color: #f8fafc !important; } html[data-theme="dark"] #anularPreview .cfg-card .small, html[data-theme="dark"] #anularPagPreview .cfg-card .small { color: #e2e8f0 !important; } html[data-theme="dark"] #anularPreview .cfg-card .small strong, html[data-theme="dark"] #anularPagPreview .cfg-card .small strong { color: #f8fafc !important; } html[data-theme="dark"] #anularPreview .cfg-card .text-muted, html[data-theme="dark"] #anularPagPreview .cfg-card .text-muted { color: #94a3b8 !important; } /* Histórico de multas (#multaFatHistorico) usa tabela Bootstrap + ; a tabela já é coberta, só reforçamos o e o texto efectivo. */ html[data-theme="dark"] #multaFatHistorico table { color: #e2e8f0 !important; } html[data-theme="dark"] #multaFatHistorico table th { color: #cbd5e1 !important; } html[data-theme="dark"] #multaFatHistorico table strong { color: #f8fafc !important; } html[data-theme="dark"] #multaFatHistorico code { background: rgba(0,0,0,.30) !important; color: #f8fafc !important; } html[data-theme="dark"] #multaFatEfectivo { color: #cbd5e1 !important; } /* 9 ─ Recibo (#modalRecibo .recibo-preview): é papel branco para impressão. NÃO escurecer — mantém-se claro com texto escuro intencionalmente. Apenas garantimos que o tema escuro não lhe injecta texto claro. */ html[data-theme="dark"] .recibo-preview, html[data-theme="dark"] .recibo-preview .rc-field .val, html[data-theme="dark"] .recibo-preview .rc-table tbody td { color: #111827 !important; } html[data-theme="dark"] .recibo-preview .rc-brand .name, html[data-theme="dark"] .recibo-preview .rc-title { color: #0a3a5e !important; } html[data-theme="dark"] .recibo-preview .rc-brand .sub, html[data-theme="dark"] .recibo-preview .rc-number, html[data-theme="dark"] .recibo-preview .rc-field .lbl, html[data-theme="dark"] .recibo-preview .rc-footer { color: #64748b !important; } /* ════════════════════════════════════════════════════════════════════════════ SWEEP DE PÁGINAS RESTANTES — cards/seccoes/inputs com fundos CLAROS hardcoded -------------------------------------------------------------------------- As páginas Despesas, Turnos, Tarefas, Nota de Crédito e Leituras definem barras de filtro, avisos, caixas de modal e inputs calculados com fundos CLAROS fixos (#fff, #f1f5f9, #fef2f2, gradientes pastel…) enquanto o texto usa var(--gray-*) — que no tema escuro são tons CLAROS → texto claro sobre fundo claro (ilegível). Aqui forçamos fundo escuro + texto claro. Tudo gated em html[data-theme="dark"] → modo claro 100% intacto. Os KPIs destas páginas já são cobertos por [class*="-kpi"] acima; as pílulas de estado (.desp-status, .turno-est, .taref-prio/.taref-est, .gravidade-*, .cliente-estado, .contador-estado, .fatura-estado…) ficam como estão — são pastéis claros com texto escuro, legíveis. Os documentos imprimíveis (.fatura-documento, .recibo-preview, portal) ficam em "papel" claro. Paleta: card #131c33 / nested #0f172a, borda rgba(255,255,255,.10), texto #f8fafc, label #cbd5e1, mudo #94a3b8, azul #7dd3fc, verde #86efac, âmbar #fbbf24, vermelho #fca5a5. ════════════════════════════════════════════════════════════════════════════ */ /* ─ DESPESAS / TURNOS / TAREFAS — barras de filtro (background:#fff fixo) ─ */ html[data-theme="dark"] .desp-filter, html[data-theme="dark"] .turno-filter, html[data-theme="dark"] .taref-filter { background: #131c33 !important; border-color: rgba(255,255,255,.10) !important; color: #e2e8f0 !important; } html[data-theme="dark"] .desp-filter label, html[data-theme="dark"] .turno-filter label, html[data-theme="dark"] .taref-filter label { color: #cbd5e1 !important; } /* ─ TURNOS — banner "aviso" (gradiente verde claro + texto verde escuro) ─ */ html[data-theme="dark"] .turno-aviso { background: rgba(22,163,74,.15) !important; border-color: rgba(22,163,74,.35) !important; color: #86efac !important; } html[data-theme="dark"] .turno-aviso strong, html[data-theme="dark"] .turno-aviso b { color: #bbf7d0 !important; } /* ─ NOTA DE CRÉDITO — internos do modal (#modalNC) ─ O cabecalho do modal mantém o gradiente vermelho forte (texto branco) → OK. Estas caixas usavam fundos vermelho-claros (#fef2f2) com texto que herdava tons claros do tema → ilegíveis sobre o corpo escuro do modal. */ html[data-theme="dark"] .nc-numero { background: rgba(220,38,38,.18) !important; color: #fca5a5 !important; } html[data-theme="dark"] .nc-motivo-box { background: rgba(220,38,38,.12) !important; border-left-color: #ef4444 !important; color: #fecaca !important; } html[data-theme="dark"] .nc-detail-row { border-bottom-color: rgba(255,255,255,.10) !important; } html[data-theme="dark"] .nc-detail-row .lbl { color: #cbd5e1 !important; } html[data-theme="dark"] .nc-detail-row .val { color: #f8fafc !important; } html[data-theme="dark"] .nc-detail-row .val.big { color: #fca5a5 !important; } /* ─ LEITURAS — caixa de destaque do consumo (gradiente azul-claro) ─ (.consumo-box é construída pelo JS; o .detalhe-card já é coberto.) */ html[data-theme="dark"] .consumo-box { background: linear-gradient(135deg, #0a3a5e, #131c33) !important; border-color: rgba(125,211,252,.20) !important; } html[data-theme="dark"] .consumo-box .label { color: #cbd5e1 !important; } html[data-theme="dark"] .consumo-box .val { color: #7dd3fc !important; } /* ─ LEITURAS — inputs calculados/read-only do modal de leitura individual ─ Têm style="background:#f1f5f9|#e2f1fb|#dcfce7" inline. O override global input.form-control{color:#f8fafc!important} ganha à cor inline → texto branco sobre fundo claro (invisível). Forçamos fundo escuro + cor de acento. (Os IDs são fixos no leitura.html.) */ html[data-theme="dark"] #leituraIndividualContador, html[data-theme="dark"] #leituraIndividualAnterior { background: #0f172a !important; color: #f8fafc !important; border-color: rgba(255,255,255,.12) !important; } html[data-theme="dark"] #leituraIndividualConsumo { background: rgba(56,189,248,.14) !important; color: #7dd3fc !important; border-color: rgba(56,189,248,.30) !important; } html[data-theme="dark"] #leituraIndividualValor { background: rgba(22,163,74,.16) !important; color: #86efac !important; border-color: rgba(22,163,74,.30) !important; } /* ===== PADRÃO ÚNICO — modais (tema escuro) ===== */ html[data-theme="dark"] .modal-content{ background:#0f1b2a;border:1px solid rgba(255,255,255,.06); box-shadow:0 30px 70px -20px rgba(0,0,0,.7); } html[data-theme="dark"] .modal-header{border-bottom-color:rgba(255,255,255,.08)} html[data-theme="dark"] .modal-header .modal-title{color:#f1f5f9} html[data-theme="dark"] .modal-header .modal-title .bi{color:#7dd3fc} html[data-theme="dark"] .modal-footer{border-top-color:rgba(255,255,255,.08)} /* ════════════════════════════════════════════════════════════════════════════ CORREÇÕES DE CONTRASTE — bugs identificados por auditoria WCAG ════════════════════════════════════════════════════════════════════════════ */ /* ─ Barras fixas (sticky) que tinham background:#fff sem override escuro ─ .cfg-save-bar → rodapé da página Configurações de Tarifas .perm-saving-bar → rodapé da secção de Permissões de Utilizadores */ html[data-theme="dark"] .cfg-save-bar, html[data-theme="dark"] .perm-saving-bar { background: #0f172a !important; border-top-color: rgba(255,255,255,.08) !important; color: #e2e8f0 !important; box-shadow: 0 -4px 16px rgba(0,0,0,.45) !important; } /* ─ Linhas "dirty" (modificadas) na tabela de permissões ─ Sem override: texto claro (#e2e8f0) herdado sobre fundo amarelo claro (#fef9c3) → contraste 1.15:1 (invisível). Corrigido para amarelo escuro translúcido com texto amarelo claro → 6.9:1. */ html[data-theme="dark"] .perm-table tr.dirty td { background: rgba(234,179,8,.18) !important; color: #fde047 !important; } /* ─ Valores monetários: light mode — cores com contraste WCAG AA ─ Problema: #f59e0b (âmbar) = 2.15:1 sobre branco; #10b981 (verde) = 2.54:1. Ambos falham. Dark mode já tem override com cores claras adequadas. */ html:not([data-theme="dark"]) .valor-financeiro.valor-pendente { color: #b45309; } /* 4.59:1 */ html:not([data-theme="dark"]) .desp-money-in { color: #15803d; } /* 4.63:1 */ html:not([data-theme="dark"]) .turno-money-pos { color: #15803d; } /* 4.63:1 */