/** * Tema global: escuro por omissão (:root nas páginas); claro via html[data-theme="light"]. * Carregar por último no . Usa !important onde os estilos inline das páginas fixam cores escuras. */ html[data-theme="light"] { --bg-deep: #eef2f7; --bg: #eef2f7; --text: #0f172a; --text-secondary: #334155; --accent: #6d28d9; --glass: rgba(255, 255, 255, 0.92); --glass-border: rgba(15, 23, 42, 0.12); --border: rgba(15, 23, 42, 0.14); --muted: #475569; --muted-soft: #64748b; --card-bg: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); --success: #047857; --warning: #b45309; --danger: #b91c1c; --footer: #e2e8f0; --input-bg: #ffffff; --input-border: rgba(15, 23, 42, 0.18); /* Superfície de diálogos */ --modal-bg: #ffffff; --modal-text: #0f172a; --modal-muted: #475569; --modal-border: rgba(15, 23, 42, 0.12); --overlay-scrim: rgba(15, 23, 42, 0.45); /* Texto sobre realces claros (amarelo/verde/vermelho suaves) */ --on-success-bg: #14532d; --on-warn-bg: #92400e; --on-danger-bg: #991b1b; --link-on-light: #5b21b6; } html[data-theme="light"] body { color: var(--text); } /* * Modo claro: escurecer texto que no tema escuro é branco, amarelo-limão (#facc15), * verdes/vermelhos pastéis, roxos muito claros, etc. */ html[data-theme="light"] .tx-credit, html[data-theme="light"] .status-ok { color: var(--on-success-bg) !important; } html[data-theme="light"] .tx-debit, html[data-theme="light"] .status-block { color: var(--on-danger-bg) !important; } html[data-theme="light"] .tx-reversal, html[data-theme="light"] .val-warn, html[data-theme="light"] .summary-row .val-warn { color: var(--on-warn-bg) !important; } html[data-theme="light"] .flash-ok { color: var(--on-success-bg) !important; } html[data-theme="light"] .flash-err { color: var(--on-danger-bg) !important; } html[data-theme="light"] .badge-success { color: var(--on-success-bg) !important; background: rgba(34, 197, 94, 0.14) !important; border-color: rgba(22, 163, 74, 0.45) !important; } html[data-theme="light"] .badge-error { color: var(--on-danger-bg) !important; background: rgba(239, 68, 68, 0.1) !important; border-color: rgba(220, 38, 38, 0.4) !important; } html[data-theme="light"] .ok, html[data-theme="light"] .ok-summary, html[data-theme="light"] .ok-summary dt { color: var(--text-secondary) !important; } html[data-theme="light"] .ok strong { color: var(--on-success-bg) !important; } html[data-theme="light"] .err { color: var(--on-danger-bg) !important; } html[data-theme="light"] .insight, html[data-theme="light"] .insight li { color: var(--text-secondary) !important; } /* dashboard.php: .insight h3 / ul têm branco fixo — forçar legível no modo claro */ html[data-theme="light"] .insight h3 { color: var(--text) !important; } html[data-theme="light"] .insight ul { color: var(--text-secondary) !important; } html[data-theme="light"] .senders .tag { background: #e2e8f0 !important; color: var(--text-secondary) !important; } html[data-theme="light"] .docs a, html[data-theme="light"] .docs-inline a, html[data-theme="light"] .dest-count-link { color: var(--link-on-light) !important; } html[data-theme="light"] code { color: #0f172a !important; background: #f1f5f9 !important; } html[data-theme="light"] .card strong, html[data-theme="light"] .panel strong, html[data-theme="light"] td strong, html[data-theme="light"] .summary-row .label { color: var(--text) !important; } html[data-theme="light"] .summary-row .val { color: var(--text-secondary) !important; } html[data-theme="light"] .badge-ok { color: var(--on-success-bg) !important; background: rgba(34, 197, 94, 0.14) !important; border-color: rgba(22, 163, 74, 0.4) !important; } html[data-theme="light"] .badge-warn { background: #fef3c7 !important; border-color: #fcd34d !important; color: var(--on-warn-bg) !important; } /* Dashboard — cartões de métricas (warning amarelo → âmbar escuro) */ html[data-theme="light"] .card p.value.success { color: var(--on-success-bg) !important; } html[data-theme="light"] .card p.value.warning { color: var(--on-warn-bg) !important; } html[data-theme="light"] .card p.value.danger { color: var(--on-danger-bg) !important; } html[data-theme="light"] .role-pill { color: #5b21b6 !important; background: rgba(124, 58, 237, 0.12) !important; border-color: rgba(124, 58, 237, 0.38) !important; } html[data-theme="light"] .btn-logout { color: #b91c1c !important; border-color: rgba(220, 38, 38, 0.45) !important; background: rgba(254, 202, 202, 0.35) !important; } html[data-theme="light"] .btn-logout:hover { background: rgba(252, 165, 165, 0.45) !important; } /* reports.php — separadores e exportação (texto branco sobre roxo claro) */ html[data-theme="light"] .tabs a { color: var(--text-secondary) !important; background: #f1f5f9 !important; border-color: var(--glass-border) !important; } html[data-theme="light"] .tabs a:hover { background: #e2e8f0 !important; } html[data-theme="light"] .tabs a.active { color: #5b21b6 !important; background: rgba(124, 58, 237, 0.12) !important; border-color: rgba(124, 58, 237, 0.45) !important; } html[data-theme="light"] .btn-export { color: #5b21b6 !important; background: rgba(124, 58, 237, 0.1) !important; border-color: rgba(124, 58, 237, 0.4) !important; } html[data-theme="light"] .btn-export:hover { background: rgba(124, 58, 237, 0.18) !important; } html[data-theme="light"] .btn-nav:hover { background: #f1f5f9 !important; } /* payments — montantes e negritos em modais */ html[data-theme="light"] .amount { color: var(--text) !important; } html[data-theme="light"] .modal-box .lines strong { color: var(--text) !important; } html[data-theme="light"] .btn-home { color: var(--text) !important; background: #f1f5f9 !important; border-color: var(--glass-border) !important; } html[data-theme="light"] .contacts a { color: var(--link-on-light) !important; border-bottom-color: rgba(91, 33, 182, 0.35) !important; } /* --- Tipografia geral (títulos e texto que ficavam brancos) --- */ html[data-theme="light"] .hero h1 { color: var(--text) !important; } html[data-theme="light"] .top h1, html[data-theme="light"] .shell h1, html[data-theme="light"] .main h1, html[data-theme="light"] .wrap h1, html[data-theme="light"] .layout .main h1 { color: var(--text) !important; } html[data-theme="light"] .top .sub, html[data-theme="light"] .sub { color: var(--muted) !important; } html[data-theme="light"] .hint, html[data-theme="light"] .foot-note, html[data-theme="light"] footer { color: var(--muted-soft) !important; } html[data-theme="light"] label, html[data-theme="light"] .search-form label { color: var(--muted) !important; } html[data-theme="light"] p, html[data-theme="light"] .message, html[data-theme="light"] .card p { color: var(--text-secondary); } html[data-theme="light"] th { background: #e2e8f0 !important; color: var(--muted) !important; } html[data-theme="light"] td { color: var(--text-secondary) !important; border-top-color: rgba(15, 23, 42, 0.08) !important; } html[data-theme="light"] tbody tr:hover { background: rgba(99, 102, 241, 0.06) !important; } html[data-theme="light"] .card h2, html[data-theme="light"] h2 { color: var(--muted) !important; } html[data-theme="light"] .brand-tagline, html[data-theme="light"] .hero .slogan { color: var(--text-secondary) !important; } html[data-theme="light"] .panel { background: var(--card-bg) !important; border-color: var(--glass-border) !important; box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08) !important; } html[data-theme="light"] .panel h2 { color: var(--muted) !important; } html[data-theme="light"] .panel li { color: var(--text-secondary) !important; border-top-color: rgba(15, 23, 42, 0.08) !important; } /* Fundo da página */ html[data-theme="light"] .page-bg { background: radial-gradient(ellipse 90% 70% at 18% 32%, rgba(167, 139, 250, 0.25), transparent 55%), radial-gradient(ellipse 80% 60% at 88% 12%, rgba(125, 211, 252, 0.2), transparent 50%), linear-gradient(165deg, #f1f5f9 0%, #e8eef5 45%, #e2e8f0 100%) !important; } html[data-theme="light"] .shape { border-color: rgba(15, 23, 42, 0.06) !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(241, 245, 249, 0.5)) !important; } html[data-theme="light"] .sidebar { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important; border-right-color: var(--glass-border) !important; } html[data-theme="light"] .sidebar-title { color: var(--muted) !important; } html[data-theme="light"] .sidebar a { color: var(--text) !important; } html[data-theme="light"] .sidebar a:hover { background: rgba(15, 23, 42, 0.06) !important; border-color: rgba(15, 23, 42, 0.1) !important; } /* dashboard.php — botão "Ferramentas ADMIN" no tema claro */ html[data-theme="light"] .sidebar .menu-expand-btn { color: var(--text) !important; background: #ffffff !important; border: 1px solid var(--glass-border) !important; } html[data-theme="light"] .sidebar .menu-expand-btn:hover { background: #f1f5f9 !important; border-color: rgba(15, 23, 42, 0.2) !important; } html[data-theme="light"] .sidebar .menu-expand-btn .caret { color: var(--text-secondary) !important; } html[data-theme="light"] footer { background: var(--footer) !important; border-top-color: rgba(15, 23, 42, 0.08) !important; color: var(--muted) !important; } /* --- Botões (contraste no tema claro) --- */ html[data-theme="light"] .btn-primary { background: #0f172a !important; color: #ffffff !important; border-color: transparent !important; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2) !important; } html[data-theme="light"] .btn-primary:hover { box-shadow: 0 8px 22px rgba(15, 23, 42, 0.28) !important; } html[data-theme="light"] .btn-secondary, html[data-theme="light"] a.btn-secondary { background: #ffffff !important; color: var(--text) !important; border: 1px solid var(--glass-border) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important; } html[data-theme="light"] .btn-secondary:hover { background: #f8fafc !important; border-color: rgba(15, 23, 42, 0.2) !important; } html[data-theme="light"] .btn-recharge { background: linear-gradient(135deg, #ea580c, #c2410c) !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(234, 88, 12, 0.35) !important; } html[data-theme="light"] .btn-act { color: #052e16 !important; } html[data-theme="light"] .btn-warn { color: #1a0b2e !important; } html[data-theme="light"] .btn-pay, html[data-theme="light"] .btn-close { color: var(--text) !important; } html[data-theme="light"] .btn-close { background: #f1f5f9 !important; border: 1px solid var(--glass-border) !important; } html[data-theme="light"] .modal-actions .btn-recharge { background: #0f172a !important; color: #fff !important; } /* Campos */ html[data-theme="light"] input[type="text"], html[data-theme="light"] input[type="number"], html[data-theme="light"] input[type="password"], html[data-theme="light"] input[type="email"], html[data-theme="light"] input[type="tel"], html[data-theme="light"] input[type="search"], html[data-theme="light"] input[type="file"], html[data-theme="light"] select, html[data-theme="light"] textarea { background: var(--input-bg) !important; color: var(--text) !important; border-color: var(--input-border) !important; } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: #94a3b8 !important; } html[data-theme="light"] .search-form input[type="text"] { background: var(--input-bg) !important; color: var(--text) !important; } html[data-theme="light"] .nav-link { color: var(--text) !important; border-color: var(--glass-border) !important; background: #ffffff !important; } html[data-theme="light"] .nav-link:hover { background: #f8fafc !important; } html[data-theme="light"] .brand-tagline, html[data-theme="light"] .container .message { color: var(--muted) !important; } html[data-theme="light"] .container { background: var(--modal-bg) !important; border-color: var(--modal-border) !important; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.1) !important; color: var(--text) !important; } html[data-theme="light"] .container h1 { color: var(--text) !important; } /* ========== Overlays e modais / popups (tema claro) ========== */ html[data-theme="light"] .overlay, html[data-theme="light"] .popup-overlay, html[data-theme="light"] .terms-overlay { background: var(--overlay-scrim) !important; } html[data-theme="light"] .modal, html[data-theme="light"] .modal-box, html[data-theme="light"] .popup, html[data-theme="light"] .popup-box, html[data-theme="light"] .terms-modal { background: var(--modal-bg) !important; background-image: none !important; color: var(--modal-text) !important; border: 1px solid var(--modal-border) !important; box-shadow: 0 24px 48px rgba(15, 23, 42, 0.15) !important; } html[data-theme="light"] .modal h3, html[data-theme="light"] .modal-box h3, html[data-theme="light"] .popup h1, html[data-theme="light"] .popup-box h3, html[data-theme="light"] .popup-box h2, html[data-theme="light"] .terms-modal header h3 { color: var(--modal-text) !important; } html[data-theme="light"] .modal p, html[data-theme="light"] .modal-box p, html[data-theme="light"] .popup p, html[data-theme="light"] .popup-box p, html[data-theme="light"] .popup-box .intro, html[data-theme="light"] #messageModal .modal-box p { color: var(--modal-muted) !important; } html[data-theme="light"] .modal-box .lines strong, html[data-theme="light"] .popup .user { color: var(--modal-text) !important; } html[data-theme="light"] .modal textarea, html[data-theme="light"] .modal input, html[data-theme="light"] #upd_message { background: #f8fafc !important; color: var(--modal-text) !important; border-color: var(--input-border) !important; } html[data-theme="light"] .popup .icon { color: var(--success) !important; background: rgba(4, 120, 87, 0.12) !important; border-color: rgba(4, 120, 87, 0.35) !important; } html[data-theme="light"] #pdfOverlay .modal { background: var(--modal-bg) !important; } html[data-theme="light"] #pdfViewerFrame { background: #e2e8f0 !important; border-color: var(--modal-border) !important; } html[data-theme="light"] .pdf-head h3 { color: var(--modal-text) !important; } /* activation.php — detalhe utilizador */ html[data-theme="light"] .user-detail-scroll { color: var(--text-secondary) !important; } html[data-theme="light"] .user-detail-scroll h4, html[data-theme="light"] .user-detail-scroll dt { color: var(--muted) !important; } html[data-theme="light"] .user-detail-scroll dd { color: var(--text) !important; } html[data-theme="light"] .user-detail-btn { color: #5b21b6 !important; } html[data-theme="light"] .user-detail-scroll .docs-inline a { color: #5b21b6 !important; } /* Registo — termos */ html[data-theme="light"] .terms-modal .terms-scroll, html[data-theme="light"] .terms-modal .terms-scroll h4 { color: var(--modal-text) !important; } html[data-theme="light"] .terms-modal header { border-bottom-color: rgba(15, 23, 42, 0.08) !important; } html[data-theme="light"] .terms-modal .terms-scroll hr { border-top-color: rgba(15, 23, 42, 0.1) !important; } html[data-theme="light"] .terms-footer { background: #f8fafc !important; border-top-color: rgba(15, 23, 42, 0.08) !important; } html[data-theme="light"] .terms-footer label { color: var(--text-secondary) !important; } html[data-theme="light"] .terms-scroll-hint { color: #b45309 !important; } /* payments — lista destinos no modal */ html[data-theme="light"] #destModal .dest-list-scroll, html[data-theme="light"] #destModal .dest-list-scroll li { color: var(--text-secondary) !important; border-top-color: rgba(15, 23, 42, 0.08) !important; } /* users.php — wizard popup (título escuro, corpo secundário) */ html[data-theme="light"] .popup-box h3 { color: var(--modal-text) !important; } html[data-theme="light"] .popup-box .btn { background: #0f172a !important; color: #fff !important; } html[data-theme="light"] .popup-icon { background: rgba(99, 102, 241, 0.12) !important; border-color: rgba(99, 102, 241, 0.35) !important; color: #4f46e5 !important; } /* register_password — modal de sucesso */ html[data-theme="light"] #successModal .modal { background: var(--modal-bg) !important; color: var(--modal-text) !important; } html[data-theme="light"] #successModal .modal h2 { color: var(--modal-text) !important; } /* myinformation — texto e botões secundários */ html[data-theme="light"] .shell { color: var(--text) !important; } html[data-theme="light"] .top-actions .btn:not(.btn-primary), html[data-theme="light"] .row .btn:not(.btn-primary), html[data-theme="light"] .shell a.btn:not(.btn-primary), /* myinformation.php sem registo customer: só body>.card (sem .shell) */ html[data-theme="light"] .card a.btn:not(.btn-primary), html[data-theme="light"] body > .card > a.btn { color: var(--text) !important; background: #f1f5f9 !important; border-color: var(--glass-border) !important; } /* accounting.php + quotation.php — botões com melhor contraste no tema claro */ html[data-theme="light"] .wrap .btn, html[data-theme="light"] .wrap a.btn, html[data-theme="light"] .wrap button { color: #ffffff !important; background: #6d28d9 !important; border: 1px solid #6d28d9 !important; } html[data-theme="light"] .wrap .btn:hover, html[data-theme="light"] .wrap a.btn:hover, html[data-theme="light"] .wrap button:hover { background: #5b21b6 !important; border-color: #5b21b6 !important; } html[data-theme="light"] .view-item .val { color: var(--text) !important; } /* users.php — «Promover ADMIN» (.btn-promote: texto #e0f2fe + fundo ciano claro) */ html[data-theme="light"] .btn-promote { background: rgba(14, 165, 233, 0.2) !important; color: #0c4a6e !important; border: 1px solid rgba(2, 132, 199, 0.55) !important; box-shadow: 0 1px 2px rgba(12, 74, 110, 0.12); } html[data-theme="light"] .btn-promote:hover { background: rgba(14, 165, 233, 0.32) !important; border-color: rgba(2, 132, 199, 0.7) !important; } /* Login (index) — navegação e cartão */ html[data-theme="light"] .nav-home { color: var(--text) !important; background: #ffffff !important; border-color: var(--glass-border) !important; } html[data-theme="light"] .nav-home:hover { background: #f8fafc !important; border-color: rgba(15, 23, 42, 0.18) !important; } html[data-theme="light"] form label, html[data-theme="light"] .container label { color: var(--muted) !important; } html[data-theme="light"] .logo-frame { background: linear-gradient(155deg, #ffffff 0%, #f1f5f9 100%) !important; border-color: var(--glass-border) !important; box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08) !important; } /* Botões de aviso / fechar em modais */ html[data-theme="light"] .btn-warn { background: #fef3c7 !important; color: #92400e !important; border: 1px solid #f59e0b !important; } html[data-theme="light"] .btn-warn:hover { background: #fde68a !important; } /* sms_request — popup erro */ html[data-theme="light"] .popup button { background: #0f172a !important; color: #fff !important; } /* sms_request.php — secção «Notas» no fim do formulário (.note com texto branco fixo) */ html[data-theme="light"] .note { color: var(--text-secondary) !important; } html[data-theme="light"] .note strong { color: var(--muted) !important; } html[data-theme="light"] .note li::before { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.22) !important; } /* Modal de mensagem genérico (payments, etc.) */ html[data-theme="light"] .modal-actions a, html[data-theme="light"] .modal-actions button { color: inherit; } html[data-theme="light"] .modal-actions .btn-close { color: var(--text) !important; } /* --- Interruptor de tema (home, index, dashboard, …) --- */ .theme-toggle-wrap { display: flex; align-items: center; gap: 10px; margin-left: auto; } /* Em cabeçalhos com mais elementos, não empurrar só o toggle */ .header-right .theme-toggle-wrap { margin-left: 0; } .theme-toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass); backdrop-filter: blur(10px); cursor: pointer; font-family: inherit; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); transition: border-color 0.15s ease, background 0.15s ease; } html[data-theme="light"] .theme-toggle { color: var(--muted); background: #ffffff; border-color: var(--glass-border); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle__track { position: relative; width: 44px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); flex-shrink: 0; } html[data-theme="light"] .theme-toggle__track { background: #e2e8f0; border-color: #cbd5e1; } .theme-toggle__thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(145deg, #fff, #e0e0e0); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease; } html[data-theme="light"] .theme-toggle__thumb { transform: translateX(20px); background: linear-gradient(145deg, #fff, #fbbf24); } .theme-toggle__label--light { opacity: 0.55; } .theme-toggle__label--dark { opacity: 0.95; } html[data-theme="light"] .theme-toggle__label--light { opacity: 0.95; } html[data-theme="light"] .theme-toggle__label--dark { opacity: 0.45; }