/** * BAMIS global theme — light (soft blue) / dark (deep blue) * Expects: set by inline boot + js/theme.js */ /* --- Motion (smooth theme switch) --- */ body[data-theme], body[data-theme] *, body[data-theme] .btn, body[data-theme] .card, body[data-theme] .navbar, body[data-theme] .sidebar, body[data-theme] .modal-content, body[data-theme] .dropdown-menu, body[data-theme] .form-control, body[data-theme] .form-select, body[data-theme] .table { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } /* --- Core tokens (SB Admin + shared UI) --- */ body[data-theme="light"] { color-scheme: light; --bamis-bg: #e3f0fb; --bamis-bg-elevated: #f5faff; --bamis-surface: #ffffff; --bamis-surface-2: #eef6fd; --bamis-text: #0f172a; --bamis-text-muted: #475569; --bamis-border: #c7d9ee; --bamis-primary: #1565c0; --bamis-primary-dark: #0d47a1; --bamis-shadow: rgba(15, 23, 42, 0.08); --bamis-table-head: #0d47a1; --bamis-input-bg: #ffffff; --bamis-input-border: #b8cce5; --bamis-footer-bg: #f0f7ff; --bamis-sidebar-bg: #0d47a1; --bamis-sidebar-text: rgba(255, 255, 255, 0.92); --bamis-scrollbar-track: #e2ecf7; --bamis-scrollbar-thumb: #94a3b8; } body[data-theme="dark"] { color-scheme: dark; --bamis-bg: #0b1220; --bamis-bg-elevated: #111b2e; --bamis-surface: #152238; --bamis-surface-2: #1a2d45; --bamis-text: #e8f0fc; --bamis-text-muted: #94b0d6; --bamis-border: #2a3f5c; --bamis-primary: #42a5f5; --bamis-primary-dark: #1565c0; --bamis-shadow: rgba(0, 0, 0, 0.45); --bamis-table-head: #1e3a5f; --bamis-input-bg: #1a2738; --bamis-input-border: #334b6b; --bamis-footer-bg: #101a2b; --bamis-sidebar-bg: #0a1628; --bamis-sidebar-text: rgba(232, 240, 252, 0.92); --bamis-scrollbar-track: #111b2e; --bamis-scrollbar-thumb: #3d5a80; } /* --- Page shell --- */ body[data-theme="light"], body[data-theme="dark"] { background-color: var(--bamis-bg) !important; color: var(--bamis-text); } body[data-theme="light"] #wrapper, body[data-theme="dark"] #wrapper { background-color: var(--bamis-bg); } body[data-theme="light"] #content-wrapper, body[data-theme="dark"] #content-wrapper { background-color: var(--bamis-bg); } body[data-theme="light"] #content, body[data-theme="dark"] #content { background-color: var(--bamis-bg); } /* SB Admin sidebar */ body[data-theme="light"] .sidebar, body[data-theme="dark"] .sidebar { background-color: var(--bamis-sidebar-bg) !important; background-image: none !important; } body[data-theme="light"] .sidebar .nav-item .nav-link, body[data-theme="dark"] .sidebar .nav-item .nav-link { color: var(--bamis-sidebar-text) !important; } body[data-theme="light"] .sidebar .sidebar-brand, body[data-theme="dark"] .sidebar .sidebar-brand { color: #fff !important; } body[data-theme="light"] .sidebar .sidebar-heading, body[data-theme="dark"] .sidebar .sidebar-heading { color: rgba(255, 255, 255, 0.65) !important; } body[data-theme="light"] .sidebar .nav-item.active .nav-link, body[data-theme="dark"] .sidebar .nav-item.active .nav-link { color: #fff !important; } body[data-theme="light"] .sidebar hr.sidebar-divider, body[data-theme="dark"] .sidebar hr.sidebar-divider { border-top-color: rgba(255, 255, 255, 0.12) !important; } /* Cards & panels */ body[data-theme="light"] .card, body[data-theme="dark"] .card { background-color: var(--bamis-surface); color: var(--bamis-text); border-color: var(--bamis-border); box-shadow: 0 2px 12px var(--bamis-shadow); } body[data-theme="light"] .card-header, body[data-theme="dark"] .card-header { background-color: var(--bamis-surface-2); color: var(--bamis-text); border-bottom-color: var(--bamis-border); } /* Global dark heading containers (overrides page-level white headers) */ body[data-theme="dark"] .card-header, body[data-theme="dark"] .dash-hero, body[data-theme="dark"] .page-header, body[data-theme="dark"] .section-header, body[data-theme="dark"] .table-header, body[data-theme="dark"] .content-header, body[data-theme="dark"] .module-header { background-color: #16263d !important; color: #ffffff !important; border-color: #2a3f5c !important; } body[data-theme="dark"] .card-header *, body[data-theme="dark"] .dash-hero *, body[data-theme="dark"] .page-header *, body[data-theme="dark"] .section-header *, body[data-theme="dark"] .table-header *, body[data-theme="dark"] .content-header *, body[data-theme="dark"] .module-header * { color: #ffffff !important; } body[data-theme="light"] .bg-white, body[data-theme="dark"] .bg-white { background-color: var(--bamis-surface) !important; } body[data-theme="light"] .bg-light, body[data-theme="dark"] .bg-light { background-color: var(--bamis-surface-2) !important; } body[data-theme="light"] .border-left-primary, body[data-theme="dark"] .border-left-primary { border-left-color: var(--bamis-primary) !important; } /* Text utilities */ body[data-theme="dark"] .text-gray-800, body[data-theme="dark"] .text-gray-900 { color: var(--bamis-text) !important; } /* Make page/section titles clearly white in dark mode */ body[data-theme="dark"] h1, body[data-theme="dark"] h2, body[data-theme="dark"] h3, body[data-theme="dark"] h4, body[data-theme="dark"] h5, body[data-theme="dark"] h6, body[data-theme="dark"] .card-header, body[data-theme="dark"] .card-header *, body[data-theme="dark"] .page-header, body[data-theme="dark"] .page-header *, body[data-theme="dark"] .section-title, body[data-theme="dark"] .section-title *, body[data-theme="dark"] .table-title, body[data-theme="dark"] .table-title *, body[data-theme="dark"] .requests-title, body[data-theme="dark"] .requests-title * { color: #ffffff !important; } /* Filter/toolbar labels in dark mode */ body[data-theme="dark"] label, body[data-theme="dark"] .filter-label, body[data-theme="dark"] .toolbar-title, body[data-theme="dark"] .dataTables_filter, body[data-theme="dark"] .dataTables_filter *, body[data-theme="dark"] .dataTables_length, body[data-theme="dark"] .dataTables_length * { color: #ffffff !important; } body[data-theme="dark"] .text-gray-700, body[data-theme="dark"] .text-gray-600 { color: var(--bamis-text-muted) !important; } body[data-theme="dark"] .text-gray-500, body[data-theme="dark"] .text-gray-400 { color: #7c9cc4 !important; } body[data-theme="light"] .text-gray-800 { color: #1e293b !important; } /* Tables */ body[data-theme="light"] .table, body[data-theme="dark"] .table { color: var(--bamis-text); } /* Ensure all table text is clearly visible in dark mode */ body[data-theme="dark"] .table, body[data-theme="dark"] .table td, body[data-theme="dark"] .table th, body[data-theme="dark"] table.dataTable, body[data-theme="dark"] table.dataTable td, body[data-theme="dark"] table.dataTable th { color: #ffffff !important; } /* Force table body/cell content text white in dark mode */ body[data-theme="dark"] .table tbody td, body[data-theme="dark"] .table tbody td *, body[data-theme="dark"] .table tbody th, body[data-theme="dark"] .table tbody th *, body[data-theme="dark"] table.dataTable tbody td, body[data-theme="dark"] table.dataTable tbody td *, body[data-theme="dark"] table.dataTable tbody th, body[data-theme="dark"] table.dataTable tbody th * { color: #ffffff !important; } /* Keep action controls readable with intended styling */ body[data-theme="dark"] .table tbody td .badge, body[data-theme="dark"] .table tbody td .btn, body[data-theme="dark"] table.dataTable tbody td .badge, body[data-theme="dark"] table.dataTable tbody td .btn { color: inherit !important; } body[data-theme="dark"] .table .text-muted, body[data-theme="dark"] table.dataTable .text-muted, body[data-theme="dark"] .dataTables_info, body[data-theme="dark"] .dataTables_length label, body[data-theme="dark"] .dataTables_filter label { color: #cfe2ff !important; } body[data-theme="dark"] .dataTables_wrapper .page-link { color: #ffffff; background-color: var(--bamis-surface-2); border-color: var(--bamis-border); } body[data-theme="dark"] .dataTables_wrapper .page-item.active .page-link { color: #ffffff; background-color: var(--bamis-primary); border-color: var(--bamis-primary); } body[data-theme="light"] .table thead th, body[data-theme="dark"] .table thead th { background: linear-gradient(135deg, var(--bamis-table-head) 0%, var(--bamis-primary-dark) 100%); color: #fff; border-color: var(--bamis-border); } /* Light mode: keep table header text clearly black */ body[data-theme="light"] .table thead th, body[data-theme="light"] .table thead td, body[data-theme="light"] .thead-light th, body[data-theme="light"] .thead-light td, body[data-theme="light"] table.dataTable thead th, body[data-theme="light"] table.dataTable thead td { color: #0f172a !important; } body[data-theme="light"] .table thead th i, body[data-theme="light"] .thead-light th i, body[data-theme="light"] table.dataTable thead th i { color: #0f172a !important; } /* Force dark-blue table headers globally in dark mode (all panels/modules) */ body[data-theme="dark"] .table thead th, body[data-theme="dark"] .table thead td, body[data-theme="dark"] .thead-light th, body[data-theme="dark"] .thead-light td, body[data-theme="dark"] table.dataTable thead th, body[data-theme="dark"] table.dataTable thead td { background: linear-gradient(135deg, #1a3150 0%, #13253d 100%) !important; background-color: #1a3150 !important; color: #ffffff !important; border-color: #2a3f5c !important; } body[data-theme="dark"] .table tbody tr:hover { background-color: rgba(66, 165, 245, 0.08); } /* Strong override: never use light/white hover on dark mode tables */ body[data-theme="dark"] .table-hover tbody tr:hover, body[data-theme="dark"] .table tbody tr:hover, body[data-theme="dark"] table.dataTable tbody tr:hover, body[data-theme="dark"] #residentsTable tbody tr:hover { background-color: #1b2e47 !important; } body[data-theme="light"] .table tbody tr:hover { background-color: rgba(21, 101, 192, 0.06); } body[data-theme="dark"] .table-bordered, body[data-theme="dark"] .table-bordered th, body[data-theme="dark"] .table-bordered td { border-color: var(--bamis-border); } /* Forms */ body[data-theme="light"] .form-control, body[data-theme="dark"] .form-control, body[data-theme="light"] .form-select, body[data-theme="dark"] .form-select { background-color: var(--bamis-input-bg); color: var(--bamis-text); border-color: var(--bamis-input-border); } body[data-theme="light"] .form-control:focus, body[data-theme="dark"] .form-control:focus, body[data-theme="light"] .form-select:focus, body[data-theme="dark"] .form-select:focus { background-color: var(--bamis-input-bg); color: var(--bamis-text); border-color: var(--bamis-primary); box-shadow: 0 0 0 0.2rem rgba(21, 101, 192, 0.22); } body[data-theme="dark"] .input-group-text { background-color: var(--bamis-surface-2); color: var(--bamis-text-muted); border-color: var(--bamis-input-border); } /* Footer */ body[data-theme="light"] .sticky-footer, body[data-theme="dark"] .sticky-footer { background-color: var(--bamis-footer-bg) !important; } body[data-theme="light"] .copyright-text, body[data-theme="dark"] .copyright-text { color: var(--bamis-text-muted); } /* Modals & dropdowns */ body[data-theme="light"] .modal-content, body[data-theme="dark"] .modal-content { background-color: var(--bamis-surface); color: var(--bamis-text); border-color: var(--bamis-border); } /* Bootstrap 5's ".btn-close" ("X" close button) markup is used across several modals, but the site's vendor Bootstrap is 4.x, which never defines this class at all -- rendering as a bare, invisible button with no icon. Give it Bootstrap 5's own look so every close/exit "X" is actually visible. Modals with their own colored header already set an inline `filter` to invert this to white on top of this base style, so they are unaffected. */ .btn-close { box-sizing: content-box; width: 1em; height: 1em; padding: 0.25em; color: #000; background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat; border: 0; border-radius: 0.375rem; opacity: 0.6; cursor: pointer; } .btn-close:hover { color: #000; opacity: 0.85; } .btn-close:focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(21, 101, 192, 0.25); opacity: 1; } /* On a dark-themed page, invert the (otherwise black) icon to light so it stays visible against a dark modal surface. */ body[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Bootstrap 5's white variant, for close buttons sitting on a colored header (also previously undefined here). */ .btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); } body[data-theme="light"] .dropdown-menu, body[data-theme="dark"] .dropdown-menu { background-color: var(--bamis-surface); border-color: var(--bamis-border); } body[data-theme="light"] .dropdown-item, body[data-theme="dark"] .dropdown-item { color: var(--bamis-text); } body[data-theme="dark"] .dropdown-item:hover { background-color: rgba(66, 165, 245, 0.12); color: var(--bamis-text); } /* Scrollbar (WebKit) */ body[data-theme="light"] ::-webkit-scrollbar-track, body[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bamis-scrollbar-track); } body[data-theme="light"] ::-webkit-scrollbar-thumb, body[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--bamis-scrollbar-thumb); } /* Topbar palette hooks (topbar.php defines :root — remap per theme) */ body[data-theme="light"] { --pri: #1565c0; --pri2: #0d47a1; --t1: #0f172a; --t2: #475569; --border: #c7d9ee; --bg: #e3f0fb; } body[data-theme="dark"] { --pri: #42a5f5; --pri2: #1565c0; --t1: #e8f0fc; --t2: #94b0d6; --border: #2a3f5c; --bg: #0b1220; } body[data-theme="dark"] .search-results-dropdown { background: var(--bamis-surface); border-color: var(--bamis-border); } body[data-theme="dark"] .search-result-title { color: var(--bamis-text); } body[data-theme="dark"] .search-result-description, body[data-theme="dark"] .search-no-results { color: var(--bamis-text-muted); } body[data-theme="dark"] .notification-item .notif-title { color: var(--bamis-text); } body[data-theme="dark"] .notification-item .notif-body { color: var(--bamis-text-muted); } /* Notification dropdown readability in dark mode */ body[data-theme="dark"] .dropdown-list .dropdown-header, body[data-theme="dark"] #secMarkAllRead, body[data-theme="dark"] .resident-navbar #residentMarkAllRead { color: #ffffff !important; } body[data-theme="dark"] .dropdown-list .dropdown-item, body[data-theme="dark"] #secNotificationsList .dropdown-item, body[data-theme="dark"] #residentNotificationsList .dropdown-item, body[data-theme="dark"] .resident-notification-item { color: #ffffff !important; } body[data-theme="dark"] #secNotificationsList .notif-title, body[data-theme="dark"] #residentNotificationsList .notif-title { color: #ffffff !important; } body[data-theme="dark"] #secNotificationsList .notif-body, body[data-theme="dark"] #residentNotificationsList .notif-body { color: #dbeafe !important; } body[data-theme="dark"] #secNotificationsList .notif-time, body[data-theme="dark"] #residentNotificationsList .notif-time { color: #bfdbfe !important; } /* Resident portal (resident_styles.css companions) */ body[data-theme="dark"].resident-portal, body[data-theme="dark"] .resident-portal { --resident-bg: var(--bamis-bg); --resident-card: var(--bamis-surface); --resident-text: var(--bamis-text); } body[data-theme="light"].resident-portal, body[data-theme="light"] .resident-portal { --resident-bg: var(--bamis-bg); --resident-card: var(--bamis-surface); } body[data-theme="dark"] .resident-navbar { background: linear-gradient(135deg, #0a1628 0%, #152238 55%, #1a3a5c 100%) !important; border-bottom-color: #2a3f5c !important; } body[data-theme="dark"] .resident-container { background: transparent; color: var(--bamis-text); } body[data-theme="dark"] .stat-card, body[data-theme="dark"] .resident-page-header { background: var(--bamis-surface); color: var(--bamis-text); border-color: var(--bamis-border); } /* Restore richer dark-blue tone for resident hero/header in dark mode */ body[data-theme="dark"] .resident-page-header { background: linear-gradient(135deg, #10213a 0%, #162b49 55%, #1d3a61 100%) !important; color: #ffffff !important; border: 1px solid #2a466b !important; box-shadow: 0 10px 30px rgba(7, 15, 28, 0.45) !important; } body[data-theme="dark"] .resident-page-header h1, body[data-theme="dark"] .resident-page-header p, body[data-theme="dark"] .resident-page-header i, body[data-theme="dark"] .resident-page-header strong { color: #ffffff !important; } /* Resident top navbar text/icon readability in dark mode */ body[data-theme="dark"] .resident-navbar .navbar-brand, body[data-theme="dark"] .resident-navbar .brand-text, body[data-theme="dark"] .resident-navbar .nav-link, body[data-theme="dark"] .resident-navbar .nav-link span, body[data-theme="dark"] .resident-navbar .nav-link i, body[data-theme="dark"] .resident-navbar .dropdown-toggle, body[data-theme="dark"] .resident-navbar .dropdown-toggle span { color: #ffffff !important; } body[data-theme="dark"] .resident-navbar .nav-link:hover { background: rgba(66, 165, 245, 0.2) !important; color: #ffffff !important; } body[data-theme="dark"] .resident-navbar .nav-link.active { background: rgba(66, 165, 245, 0.26) !important; color: #ffffff !important; box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.35) !important; } body[data-theme="dark"] .resident-navbar .nav-link.active::before { background: #93c5fd !important; } /* Theme toggle chrome */ .bamis-theme-toggle { display: flex; align-items: center; gap: 0.2rem; } .bamis-theme-toggle--nav { min-height: 1.8rem; margin-top: 0; margin-bottom: 0; } .bamis-theme-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(148, 163, 184, 0.4); background: rgba(255, 255, 255, 0.16); color: #fbbf24; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: all 0.2s ease; } .bamis-theme-btn i { font-size: 0.92rem; line-height: 1; } .bamis-theme-btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.25); } body[data-theme="dark"] .bamis-theme-btn { border-color: #3b536f; background: rgba(17, 31, 51, 0.46); color: #93c5fd; } .bamis-theme-toggle--inverse .bamis-theme-toggle__label { color: rgba(255, 255, 255, 0.92); font-size: 0.8rem; font-weight: 600; margin: 0; user-select: none; } .bamis-theme-toggle__label { font-size: 0.8rem; font-weight: 600; margin: 0; color: var(--bamis-text-muted, #475569); user-select: none; } body[data-theme="dark"] .bamis-theme-toggle__label { color: var(--bamis-text-muted); } /* --- Admin / Treasurer / Captain dark-mode harmonization --- Several pages use fixed light tokens (e.g. --text-dark, white cards). Remap those tokens in dark mode and patch common dashboard blocks. */ body[data-theme="dark"] { --text-dark: #e8f0fc; --primary-blue-dark: #7cc2ff; --success-dark: #4ade80; --danger-dark: #f87171; --warning-dark: #fbbf24; --info-dark: #60a5fa; } body[data-theme="dark"] .kpi-card-body, body[data-theme="dark"] .page-heading, body[data-theme="dark"] .chart-card, body[data-theme="dark"] .chart-card .card-header, body[data-theme="dark"] .recent-item, body[data-theme="dark"] .table-modern thead th, body[data-theme="dark"] .stat-card, body[data-theme="dark"] .dashboard-container .bg-white { background: var(--bamis-surface) !important; color: var(--bamis-text) !important; border-color: var(--bamis-border) !important; } body[data-theme="dark"] .chart-card .card-header, body[data-theme="dark"] .page-heading { background: linear-gradient(135deg, #14243a 0%, #1c3350 100%) !important; color: #ffffff !important; } body[data-theme="dark"] .page-heading h1, body[data-theme="dark"] .page-heading p, body[data-theme="dark"] .page-heading i, body[data-theme="dark"] .chart-card .card-header h6, body[data-theme="dark"] .chart-card .card-header h6 * { color: #ffffff !important; } body[data-theme="dark"] .recent-item:hover, body[data-theme="dark"] .table-modern tbody tr:hover { background-color: #1b2e47 !important; border-left-color: #60a5fa !important; } body[data-theme="dark"] .table-success, body[data-theme="dark"] .table-success > th, body[data-theme="dark"] .table-success > td { background-color: rgba(34, 197, 94, 0.12) !important; } body[data-theme="dark"] .table-danger, body[data-theme="dark"] .table-danger > th, body[data-theme="dark"] .table-danger > td { background-color: rgba(239, 68, 68, 0.14) !important; } /* Role-wide hard override for Admin/Treasurer/Captain dark mode Covers pages that still carry light-only inline/custom CSS. */ body[data-theme="dark"].bamis-role-admin, body[data-theme="dark"].bamis-role-treasurer, body[data-theme="dark"].bamis-role-barangay-captain { color: var(--bamis-text) !important; } body[data-theme="dark"].bamis-role-admin .card, body[data-theme="dark"].bamis-role-treasurer .card, body[data-theme="dark"].bamis-role-barangay-captain .card, body[data-theme="dark"].bamis-role-admin .card-body, body[data-theme="dark"].bamis-role-treasurer .card-body, body[data-theme="dark"].bamis-role-barangay-captain .card-body, body[data-theme="dark"].bamis-role-admin .kpi-card-body, body[data-theme="dark"].bamis-role-treasurer .kpi-card-body, body[data-theme="dark"].bamis-role-barangay-captain .kpi-card-body, body[data-theme="dark"].bamis-role-admin .list-group-item, body[data-theme="dark"].bamis-role-treasurer .list-group-item, body[data-theme="dark"].bamis-role-barangay-captain .list-group-item, body[data-theme="dark"].bamis-role-admin .bg-white, body[data-theme="dark"].bamis-role-treasurer .bg-white, body[data-theme="dark"].bamis-role-barangay-captain .bg-white { background-color: var(--bamis-surface) !important; color: var(--bamis-text) !important; border-color: var(--bamis-border) !important; } body[data-theme="dark"].bamis-role-admin .card-header, body[data-theme="dark"].bamis-role-treasurer .card-header, body[data-theme="dark"].bamis-role-barangay-captain .card-header, body[data-theme="dark"].bamis-role-admin .page-heading, body[data-theme="dark"].bamis-role-treasurer .page-heading, body[data-theme="dark"].bamis-role-barangay-captain .page-heading, body[data-theme="dark"].bamis-role-admin .dash-hero, body[data-theme="dark"].bamis-role-treasurer .dash-hero, body[data-theme="dark"].bamis-role-barangay-captain .dash-hero, body[data-theme="dark"].bamis-role-admin .chart-card .card-header, body[data-theme="dark"].bamis-role-treasurer .chart-card .card-header, body[data-theme="dark"].bamis-role-barangay-captain .chart-card .card-header { background: linear-gradient(135deg, #14243a 0%, #1c3350 100%) !important; color: #ffffff !important; border-color: #2a3f5c !important; } body[data-theme="dark"].bamis-role-admin .card-header *, body[data-theme="dark"].bamis-role-treasurer .card-header *, body[data-theme="dark"].bamis-role-barangay-captain .card-header *, body[data-theme="dark"].bamis-role-admin .page-heading *, body[data-theme="dark"].bamis-role-treasurer .page-heading *, body[data-theme="dark"].bamis-role-barangay-captain .page-heading *, body[data-theme="dark"].bamis-role-admin h1, body[data-theme="dark"].bamis-role-admin h2, body[data-theme="dark"].bamis-role-admin h3, body[data-theme="dark"].bamis-role-admin h4, body[data-theme="dark"].bamis-role-admin h5, body[data-theme="dark"].bamis-role-admin h6, body[data-theme="dark"].bamis-role-treasurer h1, body[data-theme="dark"].bamis-role-treasurer h2, body[data-theme="dark"].bamis-role-treasurer h3, body[data-theme="dark"].bamis-role-treasurer h4, body[data-theme="dark"].bamis-role-treasurer h5, body[data-theme="dark"].bamis-role-treasurer h6, body[data-theme="dark"].bamis-role-barangay-captain h1, body[data-theme="dark"].bamis-role-barangay-captain h2, body[data-theme="dark"].bamis-role-barangay-captain h3, body[data-theme="dark"].bamis-role-barangay-captain h4, body[data-theme="dark"].bamis-role-barangay-captain h5, body[data-theme="dark"].bamis-role-barangay-captain h6 { color: #ffffff !important; } body[data-theme="dark"].bamis-role-admin .text-muted, body[data-theme="dark"].bamis-role-treasurer .text-muted, body[data-theme="dark"].bamis-role-barangay-captain .text-muted, body[data-theme="dark"].bamis-role-admin .text-gray-600, body[data-theme="dark"].bamis-role-treasurer .text-gray-600, body[data-theme="dark"].bamis-role-barangay-captain .text-gray-600, body[data-theme="dark"].bamis-role-admin .text-gray-700, body[data-theme="dark"].bamis-role-treasurer .text-gray-700, body[data-theme="dark"].bamis-role-barangay-captain .text-gray-700 { color: #bfd3f0 !important; } body[data-theme="dark"].bamis-role-admin .table, body[data-theme="dark"].bamis-role-treasurer .table, body[data-theme="dark"].bamis-role-barangay-captain .table, body[data-theme="dark"].bamis-role-admin .table td, body[data-theme="dark"].bamis-role-treasurer .table td, body[data-theme="dark"].bamis-role-barangay-captain .table td, body[data-theme="dark"].bamis-role-admin .table th, body[data-theme="dark"].bamis-role-treasurer .table th, body[data-theme="dark"].bamis-role-barangay-captain .table th { color: #ffffff !important; border-color: var(--bamis-border) !important; } body[data-theme="dark"].bamis-role-admin .table-hover tbody tr:hover, body[data-theme="dark"].bamis-role-treasurer .table-hover tbody tr:hover, body[data-theme="dark"].bamis-role-barangay-captain .table-hover tbody tr:hover, body[data-theme="dark"].bamis-role-admin .recent-item:hover, body[data-theme="dark"].bamis-role-treasurer .recent-item:hover, body[data-theme="dark"].bamis-role-barangay-captain .recent-item:hover { background-color: #1b2e47 !important; } body[data-theme="dark"].bamis-role-admin .modal-content, body[data-theme="dark"].bamis-role-treasurer .modal-content, body[data-theme="dark"].bamis-role-barangay-captain .modal-content, body[data-theme="dark"].bamis-role-admin .dropdown-menu, body[data-theme="dark"].bamis-role-treasurer .dropdown-menu, body[data-theme="dark"].bamis-role-barangay-captain .dropdown-menu { background-color: var(--bamis-surface) !important; border-color: var(--bamis-border) !important; color: var(--bamis-text) !important; } body[data-theme="dark"].bamis-role-admin .form-control, body[data-theme="dark"].bamis-role-treasurer .form-control, body[data-theme="dark"].bamis-role-barangay-captain .form-control, body[data-theme="dark"].bamis-role-admin .custom-select, body[data-theme="dark"].bamis-role-treasurer .custom-select, body[data-theme="dark"].bamis-role-barangay-captain .custom-select, body[data-theme="dark"].bamis-role-admin textarea, body[data-theme="dark"].bamis-role-treasurer textarea, body[data-theme="dark"].bamis-role-barangay-captain textarea, body[data-theme="dark"].bamis-role-admin select, body[data-theme="dark"].bamis-role-treasurer select, body[data-theme="dark"].bamis-role-barangay-captain select { background-color: var(--bamis-input-bg) !important; color: var(--bamis-text) !important; border-color: var(--bamis-input-border) !important; } /* Inline light styles fallback (scoped to affected roles in dark mode) */ body[data-theme="dark"].bamis-role-admin [style*="background: white"], body[data-theme="dark"].bamis-role-treasurer [style*="background: white"], body[data-theme="dark"].bamis-role-barangay-captain [style*="background: white"], body[data-theme="dark"].bamis-role-admin [style*="background:#fff"], body[data-theme="dark"].bamis-role-treasurer [style*="background:#fff"], body[data-theme="dark"].bamis-role-barangay-captain [style*="background:#fff"], body[data-theme="dark"].bamis-role-admin [style*="background-color: #fff"], body[data-theme="dark"].bamis-role-treasurer [style*="background-color: #fff"], body[data-theme="dark"].bamis-role-barangay-captain [style*="background-color: #fff"] { background: var(--bamis-surface) !important; color: var(--bamis-text) !important; border-color: var(--bamis-border) !important; } /* Admin-wide page patterns (all admin files with inline light themes) */ body[data-theme="dark"].bamis-role-admin .page-header-container, body[data-theme="dark"].bamis-role-admin .action-buttons-container, body[data-theme="dark"].bamis-role-admin .filter-section, body[data-theme="dark"].bamis-role-admin .summary-card, body[data-theme="dark"].bamis-role-admin .kpi-card, body[data-theme="dark"].bamis-role-admin .stat-card, body[data-theme="dark"].bamis-role-admin .stats-card, body[data-theme="dark"].bamis-role-admin .view-modal-card, body[data-theme="dark"].bamis-role-admin .preview-content, body[data-theme="dark"].bamis-role-admin .print-preview-content, body[data-theme="dark"].bamis-role-admin .form-section, body[data-theme="dark"].bamis-role-admin .settings-section { background: #152238 !important; color: #e8f0fc !important; border-color: #2a3f5c !important; } body[data-theme="dark"].bamis-role-admin .page-header-container h1, body[data-theme="dark"].bamis-role-admin .page-header-container .badge, body[data-theme="dark"].bamis-role-admin .filter-section h5, body[data-theme="dark"].bamis-role-admin .modal-title { color: #ffffff !important; } body[data-theme="dark"].bamis-role-admin .page-header-container, body[data-theme="dark"].bamis-role-admin .card-header, body[data-theme="dark"].bamis-role-admin .modal-header, body[data-theme="dark"].bamis-role-admin .print-preview-header, body[data-theme="dark"].bamis-role-admin .table-title, body[data-theme="dark"].bamis-role-admin .section-title { background: linear-gradient(135deg, #14243a 0%, #1c3350 100%) !important; color: #ffffff !important; border-color: #2a3f5c !important; } body[data-theme="dark"].bamis-role-admin .table, body[data-theme="dark"].bamis-role-admin .capacity-table, body[data-theme="dark"].bamis-role-admin .print-preview-table, body[data-theme="dark"].bamis-role-admin #officialsTable, body[data-theme="dark"].bamis-role-admin #residentsTable { background: #152238 !important; color: #e8f0fc !important; } body[data-theme="dark"].bamis-role-admin .table thead th, body[data-theme="dark"].bamis-role-admin .capacity-table thead th, body[data-theme="dark"].bamis-role-admin .print-preview-table th, body[data-theme="dark"].bamis-role-admin table.dataTable thead th { background: linear-gradient(135deg, #1a3150 0%, #13253d 100%) !important; color: #ffffff !important; border-color: #2a3f5c !important; } body[data-theme="dark"].bamis-role-admin .table tbody td, body[data-theme="dark"].bamis-role-admin .table tbody th, body[data-theme="dark"].bamis-role-admin .print-preview-table td, body[data-theme="dark"].bamis-role-admin table.dataTable tbody td { background: #152238 !important; color: #e8f0fc !important; border-color: #2a3f5c !important; } body[data-theme="dark"].bamis-role-admin .table-hover tbody tr:hover, body[data-theme="dark"].bamis-role-admin .table tbody tr:hover, body[data-theme="dark"].bamis-role-admin table.dataTable tbody tr:hover { background: #1b2e47 !important; } body[data-theme="dark"].bamis-role-admin .table-hover tbody tr:hover td, body[data-theme="dark"].bamis-role-admin .table tbody tr:hover td, body[data-theme="dark"].bamis-role-admin table.dataTable tbody tr:hover td { background: #1b2e47 !important; } /* More robust inline light-background fallback for admin */ body[data-theme="dark"].bamis-role-admin [style*="background:#ffffff"], body[data-theme="dark"].bamis-role-admin [style*="background: #ffffff"], body[data-theme="dark"].bamis-role-admin [style*="background-color:#ffffff"], body[data-theme="dark"].bamis-role-admin [style*="background-color: #ffffff"], body[data-theme="dark"].bamis-role-admin [style*="background: white"], body[data-theme="dark"].bamis-role-admin [style*="background:white"] { background: #152238 !important; color: #e8f0fc !important; border-color: #2a3f5c !important; } /* Admin dark-mode alerts/messages */ body[data-theme="dark"].bamis-role-admin .alert { background: #152238 !important; color: #e8f0fc !important; border: 1px solid #2a3f5c !important; border-left-width: 4px !important; } body[data-theme="dark"].bamis-role-admin .alert-success { background: rgba(34, 197, 94, 0.14) !important; color: #dcfce7 !important; border-color: #166534 !important; border-left-color: #22c55e !important; } body[data-theme="dark"].bamis-role-admin .alert-danger { background: rgba(239, 68, 68, 0.16) !important; color: #fee2e2 !important; border-color: #7f1d1d !important; border-left-color: #ef4444 !important; } body[data-theme="dark"].bamis-role-admin .alert-warning { background: rgba(245, 158, 11, 0.18) !important; color: #fef3c7 !important; border-color: #78350f !important; border-left-color: #f59e0b !important; } body[data-theme="dark"].bamis-role-admin .alert-info { background: rgba(59, 130, 246, 0.16) !important; color: #dbeafe !important; border-color: #1e3a8a !important; border-left-color: #3b82f6 !important; } body[data-theme="dark"].bamis-role-admin .alert a, body[data-theme="dark"].bamis-role-admin .alert strong { color: inherit !important; } body[data-theme="dark"].bamis-role-admin .alert .close, body[data-theme="dark"].bamis-role-admin .alert .btn-close { color: #e8f0fc !important; opacity: 0.9 !important; text-shadow: none !important; } /* --- Layout spacing fix for page titles under topbar --- Applies to Admin/Treasurer/Captain pages, excluding dashboards. */ body.bamis-role-admin:not(.bamis-page-dashboard) #content > .container-fluid, body.bamis-role-treasurer:not(.bamis-page-dashboard) #content > .container-fluid, body.bamis-role-barangay-captain:not(.bamis-page-dashboard) #content > .container-fluid { padding-top: 0.75rem !important; } @media (max-width: 991.98px) { body.bamis-role-admin:not(.bamis-page-dashboard) #content > .container-fluid, body.bamis-role-treasurer:not(.bamis-page-dashboard) #content > .container-fluid, body.bamis-role-barangay-captain:not(.bamis-page-dashboard) #content > .container-fluid { padding-top: 1rem !important; } } /* --- Auth split pages (login.css / register.css / forgot-password inline) --- */ body[data-theme="light"] { --bg: #dceef9; --panel: #ffffff; --text-light: #ffffff; --text-dark: #0f172a; --muted: #64748b; --brand: #1565c0; --brand-hover: #0d47a1; --input-bg: #f3f8fd; --input-border: #b8cce5; --bg-color: var(--bg); --card-bg: var(--panel); --text-primary: var(--text-dark); --text-secondary: var(--muted); --text-placeholder: #64748b; --border-color: var(--input-border); --accent-color: var(--brand); --accent-hover: var(--brand-hover); --button-text: #ffffff; --shadow: 0 12px 40px rgba(15, 23, 42, 0.1); --ring: rgba(21, 101, 192, 0.35); } body[data-theme="dark"] { --bg: #0a1220; --panel: #152238; --text-light: #ffffff; --text-dark: #dbeafe; --muted: #8ba3c4; --brand: #42a5f5; --brand-hover: #64b5f6; --input-bg: #1a2738; --input-border: #334b6b; --bg-color: var(--bg); --card-bg: var(--panel); --text-primary: var(--text-dark); --text-secondary: var(--muted); --text-placeholder: #8ba3c4; --border-color: var(--input-border); --accent-color: var(--brand); --accent-hover: var(--brand-hover); --button-text: #ffffff; --shadow: 0 14px 42px rgba(0, 0, 0, 0.55); --ring: rgba(66, 165, 245, 0.35); } body[data-theme="light"] .custom-modal-content, body[data-theme="dark"] .custom-modal-content { background: var(--card-bg); color: var(--text-primary); border-color: var(--border-color); } /* Plain checkbox toggle (pages without Bootstrap form-switch) */