/* * dark.css — Dark mode para MeuBolso (app do usuário) * Ativado via: * Não afeta a área admin. */ [data-theme="dark"] { --bs-body-bg: #0f0f17; --bs-body-color: #e2e2ee; --bs-border-color: #2a2a3e; --bs-card-bg: #1a1a2e; --bs-card-border-color: #2a2a3e; } /* ── Body e background geral ── */ [data-theme="dark"] body, [data-theme="dark"] .main-content { background: #0f0f17 !important; color: #e2e2ee !important; } /* ── Navbar ── */ [data-theme="dark"] .navbar { background-color: #13131f !important; border-bottom: 1px solid #2a2a3e; } /* ── User stats bar ── */ [data-theme="dark"] .user-stats-bar { background: #13131f !important; border-color: #2a2a3e !important; } [data-theme="dark"] .user-stats-bar .text-muted { color: #8888bb !important; } /* ── Cards genéricos Bootstrap ── */ [data-theme="dark"] .card { background-color: #1a1a2e !important; border-color: #2a2a3e !important; color: #e2e2ee !important; } [data-theme="dark"] .card-header { background-color: #16162a !important; border-color: #2a2a3e !important; color: #e2e2ee !important; } [data-theme="dark"] .card-body { color: #e2e2ee !important; } /* ── Classes específicas do dashboard.html ── */ [data-theme="dark"] .dashboard-card { background: #1a1a2e !important; color: #e2e2ee !important; box-shadow: 0 0.15rem 1.75rem 0 rgba(0,0,0,0.4) !important; } [data-theme="dark"] .chart-container { background: #1a1a2e !important; color: #e2e2ee !important; box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .chart-card { background: #1a1a2e !important; color: #e2e2ee !important; } [data-theme="dark"] .chart-header { background: #16162a !important; color: #e2e2ee !important; border-color: #2a2a3e !important; } [data-theme="dark"] .chart-body { background: #1a1a2e !important; color: #e2e2ee !important; } [data-theme="dark"] .quick-actions { background: #1a1a2e !important; color: #e2e2ee !important; box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .goal-progress-item { background: #1a1a2e !important; color: #e2e2ee !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .budget-item { background: #22223a !important; color: #e2e2ee !important; } [data-theme="dark"] .indicator-card { background: #1a1a2e !important; color: #e2e2ee !important; } /* ── Widget titles e textos ── */ [data-theme="dark"] .widget-title, [data-theme="dark"] .widget-header { color: #e2e2ee !important; border-color: #2a2a3e !important; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #e2e2ee !important; } [data-theme="dark"] .text-muted { color: #8888bb !important; } [data-theme="dark"] .text-gray-800 { color: #e2e2ee !important; } [data-theme="dark"] .text-dark { color: #e2e2ee !important; } /* ── Período selector e controles de filtro ── */ [data-theme="dark"] .period-selector, [data-theme="dark"] .filter-bar, [data-theme="dark"] [class*="period"] { background: #1a1a2e !important; border-color: #2a2a3e !important; color: #e2e2ee !important; } /* ── Inputs e selects ── */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #1a1a2e !important; border-color: #2a2a3e !important; color: #e2e2ee !important; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #1a1a2e !important; border-color: #6c63ff !important; color: #e2e2ee !important; box-shadow: 0 0 0 0.2rem rgba(108,99,255,0.25) !important; } [data-theme="dark"] .form-control::placeholder { color: #5555aa; } [data-theme="dark"] .input-group-text { background-color: #22223a !important; border-color: #2a2a3e !important; color: #8888bb !important; } /* ── Tabelas ── */ [data-theme="dark"] .table { color: #e2e2ee !important; border-color: #2a2a3e !important; --bs-table-bg: #1a1a2e; --bs-table-striped-bg: #16162a; --bs-table-hover-bg: #22223a; --bs-table-color: #e2e2ee; --bs-table-border-color: #2a2a3e; } [data-theme="dark"] .table-hover tbody tr:hover td { background-color: #22223a !important; } [data-theme="dark"] .table tbody td, [data-theme="dark"] .table tbody th { border-color: #2a2a3e !important; } [data-theme="dark"] .table-dark { background-color: #0a0a14 !important; } [data-theme="dark"] .table-light { background-color: #22223a !important; color: #e2e2ee !important; } /* ── Alerts ── */ [data-theme="dark"] .alert { background-color: #1a1a2e !important; border-color: #2a2a3e !important; color: #e2e2ee !important; } [data-theme="dark"] .alert-info { border-left-color: #48cae4 !important; background-color: #0d1f2a !important; } [data-theme="dark"] .alert-success { border-left-color: #00b386 !important; background-color: #0d2a1f !important; } [data-theme="dark"] .alert-warning { border-left-color: #f6c23e !important; background-color: #2a200d !important; } [data-theme="dark"] .alert-danger { border-left-color: #e55039 !important; background-color: #2a0d0d !important; } /* ── Badges ── */ [data-theme="dark"] .bg-light { background-color: #22223a !important; color: #e2e2ee !important; } [data-theme="dark"] .bg-white { background-color: #1a1a2e !important; } /* ── Dropdowns ── */ [data-theme="dark"] .dropdown-menu { background-color: #1a1a2e !important; border-color: #2a2a3e !important; } [data-theme="dark"] .dropdown-item { color: #e2e2ee !important; } [data-theme="dark"] .dropdown-item:hover { background-color: #22223a !important; } [data-theme="dark"] .dropdown-divider { border-color: #2a2a3e !important; } /* ── Modals ── */ [data-theme="dark"] .modal-content { background-color: #1a1a2e !important; border-color: #2a2a3e !important; } [data-theme="dark"] .modal-header { border-color: #2a2a3e !important; color: #e2e2ee !important; } [data-theme="dark"] .modal-footer { background-color: #16162a !important; border-color: #2a2a3e !important; } [data-theme="dark"] .btn-close { filter: invert(1); } /* ── Progress bars ── */ [data-theme="dark"] .progress { background-color: #22223a !important; } /* ── Footer ── */ [data-theme="dark"] .footer { background-color: #0a0a14 !important; color: #8888bb !important; } [data-theme="dark"] .footer .text-light { color: #8888bb !important; } /* ── Botões outline no dark ── */ [data-theme="dark"] .btn-outline-secondary { color: #8888bb !important; border-color: #2a2a3e !important; } [data-theme="dark"] .btn-outline-secondary:hover { background-color: #22223a !important; color: #e2e2ee !important; } /* ── Listas e separadores ── */ [data-theme="dark"] .list-group-item { background-color: #1a1a2e !important; border-color: #2a2a3e !important; color: #e2e2ee !important; } [data-theme="dark"] hr { border-color: #2a2a3e !important; } /* ── Scrollbar ── */ [data-theme="dark"] ::-webkit-scrollbar-track { background: #1a1a2e; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a2a3e; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a3a5e; } /* ── Toggle button ── */ .dark-toggle { background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.75); font-size: 1.1rem; padding: 6px 10px; border-radius: 8px; transition: all 0.2s; line-height: 1; } .dark-toggle:hover { color: white; background: rgba(255,255,255,0.1); } /* ── budgets.html — cards com gradiente hardcoded ── */ [data-theme="dark"] .revenue-expenses-card { background: linear-gradient(135deg, #0d3330 0%, #0d2e1a 100%) !important; color: #e2e2ee !important; } [data-theme="dark"] .global-comparison { background: linear-gradient(135deg, #1a1a3e 0%, #2a1a3e 100%) !important; color: #e2e2ee !important; } [data-theme="dark"] .revenue-expenses-card .comparison-value, [data-theme="dark"] .global-comparison .comparison-value { color: #ffffff !important; } [data-theme="dark"] .revenue-expenses-card .comparison-label, [data-theme="dark"] .global-comparison .comparison-label { color: #aaaacc !important; } /* period-selector (background: white hardcoded) */ [data-theme="dark"] .period-selector { background: #1a1a2e !important; color: #e2e2ee !important; box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .period-selector h5, [data-theme="dark"] .period-selector p { color: #e2e2ee !important; } /* budget-card (background: white hardcoded) */ [data-theme="dark"] .budget-card { background: #1a1a2e !important; color: #e2e2ee !important; box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .budget-card h5, [data-theme="dark"] .budget-card h6, [data-theme="dark"] .budget-card small { color: #e2e2ee !important; } [data-theme="dark"] .budget-card .text-muted { color: #8888bb !important; } [data-theme="dark"] .budget-progress { background: #22223a !important; } /* ── achievements.html ── */ /* Cards de conquista (background: white) */ [data-theme="dark"] .achievement-card { background: #1a1a2e !important; color: #e2e2ee !important; box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important; } /* Conquista desbloqueada (background: amarelo claro) */ [data-theme="dark"] .achievement-card.earned { background: linear-gradient(135deg, #2a2000, #1a1500) !important; border-color: #ffd700 !important; color: #e2e2ee !important; } /* Ícone não conquistado (background: #f8f9fa) */ [data-theme="dark"] .achievement-card:not(.earned) .achievement-icon { background: #22223a !important; color: #6666aa !important; border-color: #2a2a3e !important; } /* Textos internos dos cards */ [data-theme="dark"] .achievement-card .card-title, [data-theme="dark"] .achievement-card h6 { color: #e2e2ee !important; } [data-theme="dark"] .achievement-card .card-text, [data-theme="dark"] .achievement-card p { color: #8888bb !important; } [data-theme="dark"] .achievement-card small { color: #8888bb !important; } [data-theme="dark"] .achievement-card .text-muted { color: #8888bb !important; } [data-theme="dark"] .achievement-card .text-success { color: #00b386 !important; } /* stats-card (gradiente roxo — card de Nível Atual) */ [data-theme="dark"] .stats-card { background: linear-gradient(135deg, #1a1a3e, #2a1a3e) !important; color: #e2e2ee !important; } /* card genérico da seção de conquistas */ [data-theme="dark"] .card.bg-warning { background: #2a1f00 !important; } [data-theme="dark"] .card.bg-success { background: #0d2a1a !important; } [data-theme="dark"] .card.bg-info { background: #0d1f2a !important; } /* progress-ring bg stroke */ [data-theme="dark"] .progress-ring .bg { stroke: #2a2a3e; } /* ── Transição suave ── */ body, .card, .dashboard-card, .chart-container, .chart-card, .quick-actions, .goal-progress-item, .budget-item, .navbar, .user-stats-bar, .form-control, .form-select, .table, .modal-content, .dropdown-menu { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease; } /* ══════════════════════════════════════════════════════ PÁGINAS ESPECÍFICAS — classes com background hardcoded ══════════════════════════════════════════════════════ */ /* ── goals.html ── */ [data-theme="dark"] .goal-card, [data-theme="dark"] .goal-completed-card { background: #1a1a2e !important; color: #e2e2ee !important; box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .progress-inner { background: #0f0f17 !important; color: #e2e2ee !important; } [data-theme="dark"] .goal-card .text-muted, [data-theme="dark"] .goal-completed-card .text-muted { color: #8888bb !important; } /* ── budgets.html ── */ [data-theme="dark"] .budget-card { background: #1a1a2e !important; color: #e2e2ee !important; box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .period-selector { background: #1a1a2e !important; border-color: #2a2a3e !important; color: #e2e2ee !important; } [data-theme="dark"] .budget-progress-bg, [data-theme="dark"] .budget-progress { background: #22223a !important; } /* ── ai_assistant.html ── */ [data-theme="dark"] .ai-tools-panel, [data-theme="dark"] .ai-chat-container { background: #1a1a2e !important; color: #e2e2ee !important; } [data-theme="dark"] .chat-header { border-color: #2a2a3e !important; background: #16162a !important; } [data-theme="dark"] .chat-messages { background: #0f0f17 !important; } [data-theme="dark"] .message.assistant .message-text { background: #22223a !important; color: #e2e2ee !important; } [data-theme="dark"] .quick-question, [data-theme="dark"] .tool-btn { background: #22223a !important; color: #e2e2ee !important; } [data-theme="dark"] .quick-question:hover, [data-theme="dark"] .tool-btn:hover { background: rgba(108,99,255,0.15) !important; color: #a09bff !important; } [data-theme="dark"] .quick-tips { background: #0d1f2a !important; border-color: #48cae4 !important; color: #e2e2ee !important; } [data-theme="dark"] .quick-tips h5 { color: #48cae4 !important; } [data-theme="dark"] .summary-card, [data-theme="dark"] .result-item, [data-theme="dark"] .allocation-item, [data-theme="dark"] .calculation-result, [data-theme="dark"] .financial-summary { background: #1a1a2e !important; color: #e2e2ee !important; border-color: #2a2a3e !important; } [data-theme="dark"] .chat-input { border-color: #2a2a3e !important; background: #13131f !important; } [data-theme="dark"] .chat-input input { background: #1a1a2e !important; border-color: #2a2a3e !important; color: #e2e2ee !important; } /* ── chat.html (suporte/chatbot) ── */ [data-theme="dark"] .chat-messages, [data-theme="dark"] .quick-actions-panel, [data-theme="dark"] .conversation-starters { background: #1a1a2e !important; color: #e2e2ee !important; } [data-theme="dark"] .message-bubble { background: #22223a !important; color: #e2e2ee !important; } [data-theme="dark"] .conversation-starter, [data-theme="dark"] .quick-action-btn, [data-theme="dark"] .faq-item { background: #22223a !important; color: #e2e2ee !important; border-color: #2a2a3e !important; } [data-theme="dark"] .conversation-starter:hover, [data-theme="dark"] .quick-action-btn:hover { background: rgba(108,99,255,0.15) !important; color: #a09bff !important; } [data-theme="dark"] .faq-item .faq-question { background: #22223a !important; color: #e2e2ee !important; } [data-theme="dark"] .faq-item .faq-answer { background: #1a1a2e !important; color: #e2e2ee !important; } /* ── Cards de métricas do dashboard (gradientes hardcoded) ── */ [data-theme="dark"] .metric-card { filter: brightness(0.85) saturate(0.9); } [data-theme="dark"] .metric-card .text-white { color: #fff !important; } /* Fundo branco hardcoded no CSS inline do dashboard.html */ [data-theme="dark"] .metric-card { background: #1a1a2e !important; background-image: none !important; color: #e2e2ee !important; box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important; filter: none !important; } /* metric-value usa -webkit-text-fill-color via gradient clip — precisa resetar */ [data-theme="dark"] .metric-card .metric-value { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: #e2e2ee !important; background-clip: unset !important; color: #e2e2ee !important; } [data-theme="dark"] .metric-card .metric-label { color: #8888bb !important; } [data-theme="dark"] .metric-card .text-muted { color: #8888bb !important; } [data-theme="dark"] .metric-card small { color: #8888bb !important; } /* health-score-inner tem background: white hardcoded */ [data-theme="dark"] .health-score-inner { background: #1a1a2e !important; box-shadow: inset 0 2px 10px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .health-score-value { color: #00b386 !important; } [data-theme="dark"] .health-score-label { color: #8888bb !important; } /* Score / saúde financeira */ [data-theme="dark"] .financial-score { filter: brightness(0.85); } /* Indicator cards (Taxa de Poupança, Reserva, etc.) */ [data-theme="dark"] .indicator-card { background: #1a1a2e !important; color: #e2e2ee !important; } [data-theme="dark"] .indicator-card h3, [data-theme="dark"] .indicator-card h4, [data-theme="dark"] .indicator-card p, [data-theme="dark"] .indicator-card small { color: #e2e2ee !important; } /* Saúde financeira circular */ [data-theme="dark"] .health-score-card, [data-theme="dark"] .score-card { background: #1a1a2e !important; color: #e2e2ee !important; } /* Charts matplotlib → filtro temporário até migrar para Chart.js */ [data-theme="dark"] img[src^="data:image/png"] { filter: invert(0.85) hue-rotate(180deg) saturate(0.8); border-radius: 8px; }