/* ============================================================ WeChurch+ — Tema escuro (data-bs-theme="dark") Carregado por ULTIMO no do base_sistema.html para sobrescrever CSS dos modulos. NAO mexer no tema claro. ============================================================ */ html[data-bs-theme="dark"] { /* Tokens */ --wc-bg: #0b1220; --wc-bg-soft: #0f172a; --wc-surface: #111c2f; --wc-surface-2: #182338; --wc-surface-3: #1f2c45; --wc-border: #243149; --wc-border-soft:#1b2640; --wc-text: #e5e7eb; --wc-muted: #94a3b8; --wc-heading: #f1f5f9; --wc-primary: #60a5fa; --wc-link: #93c5fd; --wc-hover: #1f2c45; /* Bootstrap CSS vars (Bootstrap 5 ja respeita data-bs-theme, mas reforcamos para componentes que ainda usam --bs-body-bg). */ --bs-body-bg: var(--wc-bg); --bs-body-color: var(--wc-text); --bs-secondary-bg: var(--wc-surface); --bs-tertiary-bg: var(--wc-surface-2); --bs-border-color: var(--wc-border); /* Sobrescreve tokens globais --mc-* definidos em base_sistema.css. Como esses tokens sao usados por mc-glass-card, mc-kpi-card, sidebar e dashboards, redefini-los aqui cobre a maioria das telas sem precisar caçar cada componente individualmente. */ --mc-glass-bg: rgba(17, 28, 47, 0.92); --mc-glass-border: rgba(255, 255, 255, 0.06); --mc-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); --mc-text: #f1f5f9; --mc-muted: #94a3b8; --mc-sidebar-bg: #0a111f; --mc-sidebar-soft: #182338; --mc-sidebar-text: #cbd5e1; --mc-sidebar-muted:#94a3b8; /* Tokens do wrapper de modulo (definidos em base_sistema.css / base.css). Usados por dezenas de classes: .finance-page, .ev-page, .gc-module, .mm-module, .card-membros, .mc-form-card, .mc-table-card etc. Sobrescrever aqui propaga o tema escuro para todos os wrappers sem precisar enumerar cada classe individual. */ --app-module-bg: var(--wc-surface); --app-module-border: var(--wc-border); --app-module-shadow: 0 8px 24px rgba(0,0,0,.35); color-scheme: dark; } /* ---------- Base ---------- */ html[data-bs-theme="dark"] body { background-color: var(--wc-bg); color: var(--wc-text); } html[data-bs-theme="dark"] .main-content, html[data-bs-theme="dark"] .content, html[data-bs-theme="dark"] .container, html[data-bs-theme="dark"] .container-fluid { background-color: transparent; color: var(--wc-text); } html[data-bs-theme="dark"] hr, html[data-bs-theme="dark"] .dropdown-divider { border-color: var(--wc-border) !important; background-color: transparent; color: var(--wc-border); opacity: 1; } html[data-bs-theme="dark"] h1, html[data-bs-theme="dark"] h2, html[data-bs-theme="dark"] h3, html[data-bs-theme="dark"] h4, html[data-bs-theme="dark"] h5, html[data-bs-theme="dark"] h6 { color: var(--wc-heading); } html[data-bs-theme="dark"] a { color: var(--wc-link); } html[data-bs-theme="dark"] a:hover { color: #bfdbfe; } html[data-bs-theme="dark"] small, html[data-bs-theme="dark"] .text-muted, html[data-bs-theme="dark"] .small { color: var(--wc-muted) !important; } html[data-bs-theme="dark"] .text-dark { color: var(--wc-heading) !important; } html[data-bs-theme="dark"] .text-secondary { color: var(--wc-muted) !important; } html[data-bs-theme="dark"] .bg-light { background-color: var(--wc-surface) !important; color: var(--wc-text) !important; } html[data-bs-theme="dark"] .bg-white { background-color: var(--wc-surface) !important; color: var(--wc-text) !important; } html[data-bs-theme="dark"] .border, html[data-bs-theme="dark"] .border-top, html[data-bs-theme="dark"] .border-bottom, html[data-bs-theme="dark"] .border-start, html[data-bs-theme="dark"] .border-end, html[data-bs-theme="dark"] .border-light { border-color: var(--wc-border) !important; } /* ---------- Sidebar lateral (desktop) ---------- Atencao: base_sistema.css usa "background: linear-gradient(...)" (shorthand). Para sobrescrever o gradiente precisamos do shorthand tambem, nao "background-color". */ html[data-bs-theme="dark"] .sidebar-icons { background: linear-gradient(180deg, #0a111f 0%, #0f1a2e 100%); border-right: 1px solid var(--wc-border-soft); } html[data-bs-theme="dark"] .sidebar-icons .icon-link, html[data-bs-theme="dark"] .sidebar-icons .icon-link i, html[data-bs-theme="dark"] .sidebar-icons button { color: #cbd5e1; } html[data-bs-theme="dark"] .sidebar-icons .icon-link:hover, html[data-bs-theme="dark"] .sidebar-icons .icon-link.active { background-color: var(--wc-hover); color: #fff; } html[data-bs-theme="dark"] .sidebar-expandido { background-color: var(--wc-bg-soft); color: var(--wc-text); border-right: 1px solid var(--wc-border-soft); } html[data-bs-theme="dark"] .sidebar-expandido h4 { color: var(--wc-heading); } html[data-bs-theme="dark"] .sidebar-expandido a { color: #cbd5e1; } html[data-bs-theme="dark"] .sidebar-expandido a:hover { background-color: var(--wc-hover); color: #fff; } html[data-bs-theme="dark"] .sidebar-perfil-btn { color: #cbd5e1; } html[data-bs-theme="dark"] .sidebar-perfil-menu { background-color: var(--wc-surface); border: 1px solid var(--wc-border); color: var(--wc-text); } html[data-bs-theme="dark"] .sidebar-perfil-menu .dropdown-item { color: var(--wc-text); } html[data-bs-theme="dark"] .sidebar-perfil-menu .dropdown-item:hover, html[data-bs-theme="dark"] .sidebar-perfil-menu .dropdown-item:focus { background-color: var(--wc-surface-3); color: #fff; } html[data-bs-theme="dark"] .sidebar-perfil-header { background-color: var(--wc-bg-soft) !important; border-bottom: 1px solid var(--wc-border) !important; } html[data-bs-theme="dark"] .sidebar-perfil-header .text-dark, html[data-bs-theme="dark"] .sidebar-perfil-header .fw-semibold { color: var(--wc-heading) !important; } html[data-bs-theme="dark"] .sidebar-perfil-header .text-muted { color: var(--wc-muted) !important; } html[data-bs-theme="dark"] .sidebar-perfil-menu { background-color: var(--wc-surface) !important; border-color: var(--wc-border) !important; } /* ---------- Mobile bottom nav + drawer ---------- */ html[data-bs-theme="dark"] .mobile-bottom-nav { background-color: var(--wc-bg-soft); border-top: 1px solid var(--wc-border-soft); } html[data-bs-theme="dark"] .mobile-nav-item { color: #cbd5e1; } html[data-bs-theme="dark"] .mobile-nav-item.active, html[data-bs-theme="dark"] .mobile-nav-item:hover { color: #fff; } html[data-bs-theme="dark"] .mobile-drawer-sheet { background-color: var(--wc-bg-soft); color: var(--wc-text); } html[data-bs-theme="dark"] .mobile-drawer-handle { background-color: var(--wc-border); } html[data-bs-theme="dark"] .mobile-drawer-section-title { color: var(--wc-muted); } html[data-bs-theme="dark"] .mobile-drawer-item, html[data-bs-theme="dark"] .mobile-drawer-sheet .mobile-drawer-item, html[data-bs-theme="dark"] .mobile-drawer-section .mobile-drawer-item { color: var(--wc-text) !important; border-bottom: 1px solid var(--wc-border-soft) !important; background-color: transparent !important; } html[data-bs-theme="dark"] .mobile-drawer-item:hover, html[data-bs-theme="dark"] .mobile-drawer-item:active { background-color: var(--wc-hover) !important; } html[data-bs-theme="dark"] .mobile-drawer-item i { background: transparent !important; padding: 0 !important; border-radius: 0 !important; } html[data-bs-theme="dark"] .mobile-drawer-section { border-bottom-color: var(--wc-border-soft) !important; } html[data-bs-theme="dark"] .mobile-drawer-profile-actions .btn-perfil, html[data-bs-theme="dark"] .mobile-drawer-profile-actions .btn-sair { background: var(--wc-surface-2) !important; color: var(--wc-text) !important; border-color: var(--wc-border) !important; } html[data-bs-theme="dark"] .mobile-drawer-profile-actions .btn-sair { color: #fca5a5 !important; } /* ============================================================ SweetAlert2 (.swal2-*) — modais de alerta showSuccess/Error/ Warning/Info/Confirm renderizados via modal.js + Swal.fire(). No dark precisam virar surface escuro com texto claro. ============================================================ */ html[data-bs-theme="dark"] .swal2-popup { background: var(--wc-surface) !important; color: var(--wc-text) !important; border: 1px solid var(--wc-border) !important; box-shadow: 0 18px 44px rgba(0,0,0,.55) !important; } html[data-bs-theme="dark"] .swal2-title { color: var(--wc-heading) !important; } html[data-bs-theme="dark"] .swal2-html-container, html[data-bs-theme="dark"] .swal2-content { color: var(--wc-text) !important; } html[data-bs-theme="dark"] .swal2-close { color: var(--wc-muted) !important; } html[data-bs-theme="dark"] .swal2-close:hover { color: var(--wc-heading) !important; } html[data-bs-theme="dark"] .swal2-actions { background: transparent !important; } html[data-bs-theme="dark"] .swal2-footer { background: var(--wc-bg-soft) !important; color: var(--wc-muted) !important; border-top: 1px solid var(--wc-border) !important; } html[data-bs-theme="dark"] .swal2-input, html[data-bs-theme="dark"] .swal2-textarea, html[data-bs-theme="dark"] .swal2-select, html[data-bs-theme="dark"] .swal2-file { background: var(--wc-bg-soft) !important; color: var(--wc-text) !important; border-color: var(--wc-border) !important; } html[data-bs-theme="dark"] .swal2-input:focus, html[data-bs-theme="dark"] .swal2-textarea:focus, html[data-bs-theme="dark"] .swal2-select:focus { border-color: var(--wc-primary) !important; box-shadow: 0 0 0 .2rem rgba(96,165,250,.25) !important; } html[data-bs-theme="dark"] .swal2-validation-message { background: var(--wc-bg-soft) !important; color: #fca5a5 !important; } html[data-bs-theme="dark"] .swal2-progress-steps .swal2-progress-step-line { background: var(--wc-border) !important; } html[data-bs-theme="dark"] .swal2-progress-steps .swal2-progress-step { background: var(--wc-surface-2) !important; color: var(--wc-muted) !important; } html[data-bs-theme="dark"] .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step { background: var(--wc-primary) !important; color: #fff !important; } /* Toast (top-end) - mesma cor do popup */ html[data-bs-theme="dark"] .swal2-toast { background: var(--wc-surface) !important; color: var(--wc-text) !important; border: 1px solid var(--wc-border) !important; box-shadow: 0 8px 24px rgba(0,0,0,.45) !important; } html[data-bs-theme="dark"] .swal2-toast .swal2-title, html[data-bs-theme="dark"] .swal2-toast .swal2-html-container { color: var(--wc-text) !important; } html[data-bs-theme="dark"] .swal2-timer-progress-bar { background: rgba(255,255,255,.18) !important; } /* Backdrop sutilmente mais escuro no dark */ html[data-bs-theme="dark"] .swal2-container.swal2-backdrop-show { background: rgba(0,0,0,.65) !important; } /* Modais nativos do app (.app-modal-overlay) — reforco caso o bg-light de showModal venha em algum trecho */ html[data-bs-theme="dark"] .app-modal-overlay .modal-content .alert-light, html[data-bs-theme="dark"] .modal.app-modal-overlay .modal-content .alert-light { background: var(--wc-bg-soft) !important; color: var(--wc-text) !important; border-color: var(--wc-border) !important; } html[data-bs-theme="dark"] .mobile-drawer-profile { background-color: var(--wc-surface); border-bottom: 1px solid var(--wc-border); } html[data-bs-theme="dark"] .mobile-drawer-profile-name { color: var(--wc-heading); } html[data-bs-theme="dark"] .mobile-drawer-profile-role { color: var(--wc-muted); } /* ---------- Cards e containers ---------- */ html[data-bs-theme="dark"] .card, html[data-bs-theme="dark"] .card-body, html[data-bs-theme="dark"] .card-membros, html[data-bs-theme="dark"] .config-card, html[data-bs-theme="dark"] .app-card, html[data-bs-theme="dark"] .app-section, html[data-bs-theme="dark"] .app-table-card, html[data-bs-theme="dark"] .app-filter-panel, html[data-bs-theme="dark"] .app-mobile-row-card, html[data-bs-theme="dark"] .app-mobile-list-card, html[data-bs-theme="dark"] .mc-section-card, html[data-bs-theme="dark"] .mc-form-card, html[data-bs-theme="dark"] .mc-module-card, html[data-bs-theme="dark"] .mc-table-card { background-color: var(--wc-surface) !important; border-color: var(--wc-border) !important; color: var(--wc-text); box-shadow: 0 4px 14px rgba(0,0,0,.32); } html[data-bs-theme="dark"] .card-header, html[data-bs-theme="dark"] .card-membros-header { background-color: var(--wc-bg-soft) !important; color: var(--wc-heading) !important; border-bottom: 1px solid var(--wc-border) !important; } html[data-bs-theme="dark"] .card-footer { background-color: var(--wc-bg-soft) !important; border-top: 1px solid var(--wc-border) !important; color: var(--wc-text); } html[data-bs-theme="dark"] .card-membros-header h1, html[data-bs-theme="dark"] .card-membros-header h2, html[data-bs-theme="dark"] .card-membros-header h3 { color: var(--wc-heading); } /* Escopo restrito ao card de /perfil — perfis.html usa .perfil-header com cor de fundo dinamica vinda de inline style; nao mexer naquele. */ html[data-bs-theme="dark"] .card-membros .perfil-header { background-color: var(--wc-surface); border-bottom: 1px solid var(--wc-border); } html[data-bs-theme="dark"] .perfil-header-info .nome { color: var(--wc-heading); } html[data-bs-theme="dark"] .perfil-header-info .email, html[data-bs-theme="dark"] .perfil-header-info .badge.bg-secondary { color: var(--wc-muted); } html[data-bs-theme="dark"] .section-title, html[data-bs-theme="dark"] .section-title * { color: var(--wc-heading); } /* ---------- Metricas / Super Admin / Pagamentos ---------- */ html[data-bs-theme="dark"] .metric-card, html[data-bs-theme="dark"] .pay-metric, html[data-bs-theme="dark"] .finance-metric-card, html[data-bs-theme="dark"] .finance-analytic-card, html[data-bs-theme="dark"] .finance-mobile-card, html[data-bs-theme="dark"] .finance-card, html[data-bs-theme="dark"] .finance-table-card, html[data-bs-theme="dark"] .integration-card { background-color: var(--wc-surface) !important; border: 1px solid var(--wc-border) !important; color: var(--wc-text); box-shadow: 0 4px 14px rgba(0,0,0,.32); } html[data-bs-theme="dark"] .metric-card .label, html[data-bs-theme="dark"] .pay-metric .label { color: var(--wc-muted); } html[data-bs-theme="dark"] .metric-card .value, html[data-bs-theme="dark"] .pay-metric .value { color: var(--wc-heading); } html[data-bs-theme="dark"] .pay-empty, html[data-bs-theme="dark"] .empty-state, html[data-bs-theme="dark"] .app-empty-state { background-color: var(--wc-surface) !important; border: 1px dashed var(--wc-border) !important; color: var(--wc-muted) !important; } /* Abas de Pagamentos */ html[data-bs-theme="dark"] .config-tabs, html[data-bs-theme="dark"] .nav-tabs { background-color: transparent; border-bottom: 1px solid var(--wc-border); } html[data-bs-theme="dark"] .tab-btn, html[data-bs-theme="dark"] .nav-tabs .nav-link { background-color: var(--wc-surface); color: var(--wc-text); border: 1px solid var(--wc-border); } html[data-bs-theme="dark"] .tab-btn:hover, html[data-bs-theme="dark"] .nav-tabs .nav-link:hover { background-color: var(--wc-surface-2); color: #fff; } html[data-bs-theme="dark"] .tab-btn.active, html[data-bs-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--wc-surface-3); color: #fff; border-color: var(--wc-border); } html[data-bs-theme="dark"] .tab-panel { background-color: var(--wc-surface); color: var(--wc-text); border: 1px solid var(--wc-border); } /* ---------- Tabelas ---------- */ html[data-bs-theme="dark"] .table, html[data-bs-theme="dark"] .mc-table { --bs-table-bg: transparent; --bs-table-color: var(--wc-text); --bs-table-border-color: var(--wc-border); --bs-table-striped-bg: var(--wc-surface-2); --bs-table-striped-color: var(--wc-text); --bs-table-hover-bg: var(--wc-surface-3); --bs-table-hover-color: #fff; color: var(--wc-text); background-color: transparent; border-color: var(--wc-border); } html[data-bs-theme="dark"] .table > :not(caption) > * > *, html[data-bs-theme="dark"] .mc-table > :not(caption) > * > * { background-color: transparent; color: var(--wc-text); border-bottom-color: var(--wc-border); box-shadow: none; } html[data-bs-theme="dark"] .table thead th, html[data-bs-theme="dark"] .table thead td, html[data-bs-theme="dark"] .mc-table thead th { background-color: var(--wc-bg-soft) !important; color: var(--wc-heading) !important; border-bottom-color: var(--wc-border) !important; } html[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--wc-surface-3) !important; color: #fff !important; } html[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,.025); color: var(--wc-text); } /* membros.css define background-color direto no TR */ html[data-bs-theme="dark"] .table tbody tr { background-color: var(--wc-surface) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important; } html[data-bs-theme="dark"] .table tbody tr:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important; } html[data-bs-theme="dark"] .responsive-table-wrap { background-color: var(--wc-surface); border: 1px solid var(--wc-border); } /* table-bordered: as bordas verticais entre celulas (cabecalho NOME|CELULAR| etc.) ficam visiveis demais no dark. Suavizamos para border-soft. */ html[data-bs-theme="dark"] .table-bordered, html[data-bs-theme="dark"] .table-bordered > :not(caption) > *, html[data-bs-theme="dark"] .table-bordered > :not(caption) > * > * { border-color: var(--wc-border-soft) !important; } /* ---------- Formularios ---------- */ html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select, html[data-bs-theme="dark"] textarea.form-control { background-color: var(--wc-bg-soft); border-color: var(--wc-border); color: var(--wc-text); } html[data-bs-theme="dark"] .form-control:focus, html[data-bs-theme="dark"] .form-select:focus { background-color: var(--wc-bg-soft); border-color: var(--wc-primary); color: var(--wc-heading); box-shadow: 0 0 0 .2rem rgba(96, 165, 250, .25); } html[data-bs-theme="dark"] .form-control::placeholder { color: #64748b; } html[data-bs-theme="dark"] .form-control:disabled, html[data-bs-theme="dark"] .form-select:disabled { background-color: #0a111f; color: var(--wc-muted); opacity: .8; } html[data-bs-theme="dark"] .form-label, html[data-bs-theme="dark"] .form-check-label { color: #cbd5e1; } html[data-bs-theme="dark"] .form-text { color: var(--wc-muted); } html[data-bs-theme="dark"] .input-group-text { background-color: var(--wc-surface-2); border-color: var(--wc-border); color: #cbd5e1; } html[data-bs-theme="dark"] .form-check-input { background-color: var(--wc-bg-soft); border-color: var(--wc-border); } html[data-bs-theme="dark"] .form-check-input:checked { background-color: var(--wc-primary); border-color: var(--wc-primary); } /* Choices.js no escuro */ html[data-bs-theme="dark"] .choices__inner { background-color: var(--wc-bg-soft); border-color: var(--wc-border); color: var(--wc-text); } html[data-bs-theme="dark"] .choices__list--dropdown, html[data-bs-theme="dark"] .choices__list[aria-expanded] { background-color: var(--wc-surface); border-color: var(--wc-border); color: var(--wc-text); } html[data-bs-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: var(--wc-surface-3); color: #fff; } /* ---------- Bootstrap components ---------- */ html[data-bs-theme="dark"] .dropdown-menu { background-color: var(--wc-surface); border-color: var(--wc-border); color: var(--wc-text); --bs-dropdown-link-color: var(--wc-text); --bs-dropdown-link-hover-color: #fff; --bs-dropdown-link-hover-bg: var(--wc-surface-3); } html[data-bs-theme="dark"] .dropdown-item { color: var(--wc-text); } html[data-bs-theme="dark"] .dropdown-item:hover, html[data-bs-theme="dark"] .dropdown-item:focus { background-color: var(--wc-surface-3); color: #fff; } html[data-bs-theme="dark"] .modal-content { background-color: var(--wc-surface); color: var(--wc-text); border: 1px solid var(--wc-border); } html[data-bs-theme="dark"] .modal-header, html[data-bs-theme="dark"] .modal-footer { border-color: var(--wc-border); } html[data-bs-theme="dark"] .modal-title { color: var(--wc-heading); } html[data-bs-theme="dark"] .mc-modal-header { background-color: var(--wc-bg-soft); color: var(--wc-heading); border-bottom: 1px solid var(--wc-border); } html[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(1.8); } /* app-modal.css usa background: #fff !important — precisamos do mesmo nivel */ html[data-bs-theme="dark"] .app-modal, html[data-bs-theme="dark"] .app-modal-overlay .modal-content, html[data-bs-theme="dark"] .modal.app-modal-overlay .modal-content { background: var(--wc-surface) !important; border: 1px solid var(--wc-border) !important; color: var(--wc-text); } html[data-bs-theme="dark"] .app-modal-header, html[data-bs-theme="dark"] .app-modal-overlay .modal-header, html[data-bs-theme="dark"] .modal.app-modal-overlay .modal-header { background: var(--wc-bg-soft) !important; background-image: none !important; border-bottom: 1px solid var(--wc-border) !important; color: var(--wc-heading) !important; } html[data-bs-theme="dark"] .app-modal-footer, html[data-bs-theme="dark"] .app-modal-overlay .modal-footer, html[data-bs-theme="dark"] .modal.app-modal-overlay .modal-footer { background: var(--wc-bg-soft) !important; border-top: 1px solid var(--wc-border) !important; color: var(--wc-text); } html[data-bs-theme="dark"] .app-modal-title, html[data-bs-theme="dark"] .app-modal-overlay .modal-title, html[data-bs-theme="dark"] .modal.app-modal-overlay .modal-title { color: var(--wc-heading) !important; } html[data-bs-theme="dark"] .app-modal-body, html[data-bs-theme="dark"] .app-modal-overlay .modal-body, html[data-bs-theme="dark"] .modal.app-modal-overlay .modal-body { background: var(--wc-surface) !important; color: var(--wc-text); } html[data-bs-theme="dark"] .pagination { --bs-pagination-bg: var(--wc-surface); --bs-pagination-color: var(--wc-text); --bs-pagination-border-color: var(--wc-border); --bs-pagination-hover-bg: var(--wc-surface-3); --bs-pagination-hover-color: #fff; --bs-pagination-hover-border-color: var(--wc-border); --bs-pagination-disabled-bg: var(--wc-surface); --bs-pagination-disabled-color: var(--wc-muted); --bs-pagination-disabled-border-color: var(--wc-border); } html[data-bs-theme="dark"] .page-link { background-color: var(--wc-surface); border-color: var(--wc-border); color: var(--wc-text); } html[data-bs-theme="dark"] .page-link:hover { background-color: var(--wc-surface-3); color: #fff; } /* ---------- Alertas e badges (preservar semantica) ---------- */ html[data-bs-theme="dark"] .alert { border-color: var(--wc-border); } html[data-bs-theme="dark"] .alert-primary { background-color: rgba(59,130,246,.12); color: #bfdbfe; border-color: rgba(59,130,246,.35); } html[data-bs-theme="dark"] .alert-secondary { background-color: var(--wc-surface-2); color: var(--wc-text); border-color: var(--wc-border); } html[data-bs-theme="dark"] .alert-success { background-color: rgba(34,197,94,.12); color: #86efac; border-color: rgba(34,197,94,.35); } html[data-bs-theme="dark"] .alert-danger { background-color: rgba(239,68,68,.12); color: #fca5a5; border-color: rgba(239,68,68,.35); } html[data-bs-theme="dark"] .alert-warning { background-color: rgba(245,158,11,.12); color: #fcd34d; border-color: rgba(245,158,11,.35); } html[data-bs-theme="dark"] .alert-info { background-color: rgba(14,165,233,.12); color: #7dd3fc; border-color: rgba(14,165,233,.35); } html[data-bs-theme="dark"] .mc-alert { background-color: var(--wc-surface); color: var(--wc-text); border: 1px solid var(--wc-border); } /* Badges mantem cor de fundo, mas garantimos contraste do .bg-light/.bg-secondary */ html[data-bs-theme="dark"] .badge.bg-light { background-color: var(--wc-surface-3) !important; color: var(--wc-heading) !important; } html[data-bs-theme="dark"] .badge.text-dark { color: var(--wc-heading) !important; } /* Bootstrap 5 text-bg-* (usadas nas categorias financeiras: Ativa, Geral, Contribuicoes, Inativa). No light tem texto escuro sobre cor saturada; no dark precisamos de versoes pastel com texto bem legivel. */ html[data-bs-theme="dark"] .badge.text-bg-success { background-color: rgba(34,197,94,.22) !important; color: #86efac !important; } html[data-bs-theme="dark"] .badge.text-bg-info { background-color: rgba(14,165,233,.22) !important; color: #7dd3fc !important; } html[data-bs-theme="dark"] .badge.text-bg-secondary { background-color: var(--wc-surface-3) !important; color: var(--wc-muted) !important; } html[data-bs-theme="dark"] .badge.text-bg-warning { background-color: rgba(245,158,11,.22) !important; color: #fcd34d !important; } html[data-bs-theme="dark"] .badge.text-bg-danger { background-color: rgba(239,68,68,.22) !important; color: #fca5a5 !important; } html[data-bs-theme="dark"] .badge.text-bg-primary { background-color: rgba(59,130,246,.22) !important; color: #bfdbfe !important; } /* Botoes neutros */ html[data-bs-theme="dark"] .btn-light { background-color: var(--wc-surface-2); color: var(--wc-text); border-color: var(--wc-border); } html[data-bs-theme="dark"] .btn-light:hover { background-color: var(--wc-surface-3); color: #fff; } html[data-bs-theme="dark"] .btn-outline-secondary { color: var(--wc-text); border-color: var(--wc-border); background-color: transparent; } html[data-bs-theme="dark"] .btn-outline-secondary:hover { background-color: var(--wc-surface-3); color: #fff; border-color: var(--wc-border); } /* Header de notificacoes (cores hardcoded em base_sistema.html) */ html[data-bs-theme="dark"] .notification-dropdown { background-color: var(--wc-surface); border-color: var(--wc-border); } html[data-bs-theme="dark"] .notification-dropdown-head, html[data-bs-theme="dark"] .notification-dropdown-footer { background-color: var(--wc-bg-soft) !important; color: var(--wc-text) !important; border-color: var(--wc-border) !important; } html[data-bs-theme="dark"] .notification-item { background-color: var(--wc-surface) !important; border-bottom: 1px solid var(--wc-border) !important; } html[data-bs-theme="dark"] .notification-item:hover { background-color: var(--wc-surface-2) !important; } html[data-bs-theme="dark"] .notification-item strong { color: var(--wc-heading) !important; } html[data-bs-theme="dark"] .notification-item span { color: #cbd5e1 !important; } html[data-bs-theme="dark"] .notification-item small, html[data-bs-theme="dark"] .notification-empty { color: var(--wc-muted) !important; } /* Listas e list-group */ html[data-bs-theme="dark"] .list-group-item { background-color: var(--wc-surface); color: var(--wc-text); border-color: var(--wc-border); } /* Tooltips */ html[data-bs-theme="dark"] .tooltip-inner { background-color: var(--wc-surface-3); color: #fff; } /* ============================================================ Home (home.css) — hero, KPIs, blocos e ações rápidas ============================================================ */ html[data-bs-theme="dark"] .home-principal { background: var(--wc-surface); border-color: var(--wc-border, rgba(255,255,255,.08)); box-shadow: none; } html[data-bs-theme="dark"] .home-hero-text h2 { color: var(--wc-heading); } html[data-bs-theme="dark"] .home-hero-text p { color: var(--wc-muted); } html[data-bs-theme="dark"] .home-hero-church { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.30); color: #bfdbfe; } html[data-bs-theme="dark"] .home-section-label { color: #c4b5fd; } html[data-bs-theme="dark"] .home-block-title { color: #cbd5e1; } html[data-bs-theme="dark"] .home-block-title i { color: #a78bfa; } html[data-bs-theme="dark"] .home-list li { border-bottom-color: var(--wc-border-soft); color: var(--wc-text); } html[data-bs-theme="dark"] .home-list .item-date { color: var(--wc-muted); } html[data-bs-theme="dark"] .home-empty, html[data-bs-theme="dark"] .home-module-unavailable { color: var(--wc-muted); } html[data-bs-theme="dark"] .home-module-unavailable h4 { color: #cbd5e1; } html[data-bs-theme="dark"] .home-stat-row { border-bottom-color: var(--wc-border-soft); } html[data-bs-theme="dark"] .home-stat-row .label { color: var(--wc-muted); } html[data-bs-theme="dark"] .home-stat-row .value { color: var(--wc-heading); } html[data-bs-theme="dark"] .home-action-btn { background: var(--wc-surface); border: 1px solid var(--wc-border); color: #cbd5e1; box-shadow: 0 4px 14px rgba(0,0,0,.28); } html[data-bs-theme="dark"] .home-action-btn:hover { background: var(--wc-surface-2); color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.45); } html[data-bs-theme="dark"] .home-block-link { border-top-color: var(--wc-border); color: #93c5fd; } html[data-bs-theme="dark"] .home-block-link:hover { color: #bfdbfe; } html[data-bs-theme="dark"] .audit-row { border-bottom-color: var(--wc-border-soft); color: var(--wc-text); } html[data-bs-theme="dark"] .audit-action { color: var(--wc-text); } html[data-bs-theme="dark"] .audit-meta { color: var(--wc-muted); } /* Status badges legíveis no dark */ html[data-bs-theme="dark"] .badge-ativa { background: rgba(34,197,94,.18); color: #4ade80; } html[data-bs-theme="dark"] .badge-inativa { background: rgba(148,163,184,.18); color: #cbd5e1; } html[data-bs-theme="dark"] .badge-suspensa { background: rgba(244,63,94,.20); color: #fda4af; } /* item-name em mobile (<=575px) tem color #1f2937 hardcoded */ @media (max-width: 575.98px) { html[data-bs-theme="dark"] .home-list .item-name { color: var(--wc-heading); } } /* KPI / stat cards (mc-glass-card + mc-kpi-card) */ html[data-bs-theme="dark"] .mc-kpi-card, html[data-bs-theme="dark"] .mc-dashboard-card, html[data-bs-theme="dark"] .mc-chart-card { background: var(--mc-glass-bg); border-color: var(--mc-glass-border); color: var(--wc-text); } html[data-bs-theme="dark"] .mc-stat-label { color: var(--wc-muted) !important; } html[data-bs-theme="dark"] .mc-stat-value { color: var(--wc-heading) !important; } html[data-bs-theme="dark"] .mc-stat-icon { background: var(--wc-surface-2); color: var(--wc-text); } /* IMPORTANTE: aplicar pilula (background) APENAS quando a classe estiver combinada com .mc-stat-icon (mesmo padrao do tema claro). Caso contrario, icones inline em