/**
* 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;
/* Sidebar stays the same fixed blue in both themes (matches the navbar,
which is likewise pinned in topbar.php) instead of switching to a dark
navy background when dark mode is on. */
--bamis-sidebar-bg: #0d47a1;
--bamis-sidebar-text: rgba(255, 255, 255, 0.92);
}
/* --- 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;
padding: 1.25rem 1rem;
gap: 0.75rem;
}
/* Fixed-size seal with a soft ring so it reads as a badge against the
blue background, instead of stretching to fill its unconstrained
container edge-to-edge. */
.sidebar .sidebar-brand-icon {
width: 46px;
height: 46px;
min-width: 46px;
flex-shrink: 0;
border-radius: 50%;
background: #ffffff;
border: 2px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
.sidebar .sidebar-brand-text {
font-size: 1rem;
font-weight: 800;
letter-spacing: 0.6px;
line-height: 1.25;
text-align: left;
}
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);
}
/* The modal footer/header carry a hard-coded light background (footer.php) that
stays white in dark mode — recolor it so the buttons sitting on it are legible. */
body[data-theme="dark"]:not(.bamis-role-resident) .modal-footer {
background-color: #101a2b !important;
border-top-color: #2a3f5c !important;
}
body[data-theme="dark"]:not(.bamis-role-resident) .modal-header:not([style*="gradient"]):not([style*="linear"]) {
background-color: #16263d !important;
border-bottom-color: #2a3f5c !important;
color: #e8f0fc !important;
}
body[data-theme="dark"]:not(.bamis-role-resident) .modal-body {
color: var(--bamis-text);
}
body[data-theme="dark"]:not(.bamis-role-resident) .modal-body .bg-light {
background-color: #101a2b !important;
color: #e8f0fc !important;
}
body[data-theme="dark"]:not(.bamis-role-resident) .modal-body hr {
border-top-color: #2a3f5c !important;
}
/* 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;
}
/* KPI dashboard cards (admin/secretary/captain/treasurer all share this same
markup): the big number is an h1-h6 tag so it already picks up the global
dark-mode heading color above, but .kpi-title ("TOTAL RESIDENTS", etc.) and
.kpi-link-text ("View all residents") are plain /
with their own
light-mode-only color (#64748b) — nothing was overriding those, so they
stayed dim/low-contrast against the dark card background. Not role-scoped
since the same classes render on every role's dashboard. */
body[data-theme="dark"] .kpi-title {
color: #cbd5e1 !important;
}
body[data-theme="dark"] .kpi-link-text,
body[data-theme="dark"] .kpi-link-text i {
color: #93c5fd !important;
}
body[data-theme="dark"] .kpi-card-link:hover .kpi-link-text {
color: #ffffff !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;
}
/* ============================================================
ADMIN DARK MODE — dashboard list widgets + DataTables chrome
that were still white / dark-on-dark.
============================================================ */
/* "Recent Announcements" / activity list widgets on the dashboard */
body[data-theme="dark"].bamis-role-admin .announcement-item,
body[data-theme="dark"].bamis-role-admin .recent-item,
body[data-theme="dark"].bamis-role-admin .activity-item {
background: transparent !important;
border-bottom-color: #2a3f5c !important;
}
body[data-theme="dark"].bamis-role-admin .announcement-item:hover,
body[data-theme="dark"].bamis-role-admin .recent-item:hover {
background: #1b2e47 !important;
}
body[data-theme="dark"].bamis-role-admin .announcement-title,
body[data-theme="dark"].bamis-role-admin .recent-item-title,
body[data-theme="dark"].bamis-role-admin .activity-title {
color: #f1f5f9 !important;
}
body[data-theme="dark"].bamis-role-admin .announcement-meta,
body[data-theme="dark"].bamis-role-admin .recent-item-meta,
body[data-theme="dark"].bamis-role-admin .activity-meta {
color: #9fb2cc !important;
}
/* Modern-table header (the dashboard's custom class) */
body[data-theme="dark"].bamis-role-admin .modern-table thead th,
body[data-theme="dark"].bamis-role-admin .modern-table thead td {
background: linear-gradient(135deg, #1a3150 0%, #13253d 100%) !important;
color: #ffffff !important;
border-color: #2a3f5c !important;
}
body[data-theme="dark"].bamis-role-admin .modern-table tbody td,
body[data-theme="dark"].bamis-role-admin .modern-table tbody td * {
color: #e8f0fc !important;
}
/* DataTables chrome: length menu, search box, info, pagination */
body[data-theme="dark"].bamis-role-admin .dataTables_wrapper,
body[data-theme="dark"].bamis-role-admin .dataTables_length,
body[data-theme="dark"].bamis-role-admin .dataTables_filter,
body[data-theme="dark"].bamis-role-admin .dataTables_info,
body[data-theme="dark"].bamis-role-admin .dataTables_paginate,
body[data-theme="dark"].bamis-role-admin .dataTables_length label,
body[data-theme="dark"].bamis-role-admin .dataTables_filter label {
color: #cfe0f7 !important;
}
body[data-theme="dark"].bamis-role-admin .dataTables_length select,
body[data-theme="dark"].bamis-role-admin .dataTables_filter input {
background-color: #0f1b2d !important;
color: #e8f0fc !important;
border: 1px solid #2a3f5c !important;
}
body[data-theme="dark"].bamis-role-admin .dataTables_paginate .paginate_button {
color: #cfe0f7 !important;
background: transparent !important;
border-color: #2a3f5c !important;
}
body[data-theme="dark"].bamis-role-admin .dataTables_paginate .paginate_button.current,
body[data-theme="dark"].bamis-role-admin .dataTables_paginate .paginate_button.current:hover {
background: #1565c0 !important;
color: #ffffff !important;
border-color: #1565c0 !important;
}
body[data-theme="dark"].bamis-role-admin .dataTables_paginate .paginate_button:hover {
background: #1b2e47 !important;
color: #ffffff !important;
}
body[data-theme="dark"].bamis-role-admin .dataTables_paginate .paginate_button.disabled,
body[data-theme="dark"].bamis-role-admin .dataTables_paginate .paginate_button.disabled:hover {
color: #5a6b85 !important;
background: transparent !important;
}
/* "View All" pills / links inside dashboard widgets */
body[data-theme="dark"].bamis-role-admin .view-all-pill {
background: #1b2e47 !important;
color: #dbeafe !important;
border-color: #2a3f5c !important;
}
/* Catch-all: dark-on-dark helper text inside admin cards */
body[data-theme="dark"].bamis-role-admin .card .text-dark,
body[data-theme="dark"].bamis-role-admin .card .text-gray-900,
body[data-theme="dark"].bamis-role-admin .card .text-gray-800 {
color: #e8f0fc !important;
}
body[data-theme="dark"].bamis-role-admin .card .text-gray-700,
body[data-theme="dark"].bamis-role-admin .card .text-gray-600,
body[data-theme="dark"].bamis-role-admin .card .text-gray-500 {
color: #9fb2cc !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);
}
/* ============================================================
DARK MODE BUTTONS
White / grey / sky-blue button faces leave their label
unreadable on the dark UI. Turn every such button into a
readable DARK button. Solid semantic fills (primary / success
/ danger / warning) already have enough contrast and keep
their colour. Scoped away from the resident portal, which
carries its own button theme.
============================================================ */
body[data-theme="dark"]:not(.bamis-role-resident) .btn-light,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-white,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-default,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-secondary,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-info,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-light,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-secondary,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-primary,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-info,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-dark {
background-color: #1e3252 !important;
background-image: none !important;
border-color: #3c5a86 !important;
color: #e8f0fc !important;
box-shadow: none !important;
}
body[data-theme="dark"]:not(.bamis-role-resident) .btn-light:hover,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-white:hover,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-default:hover,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-secondary:hover,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-info:hover,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-light:hover,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-secondary:hover,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-primary:hover,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-info:hover,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-dark:hover,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-light:focus,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-secondary:focus,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-info:focus,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-primary:focus,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-secondary:focus,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-info:focus {
background-color: #294a72 !important;
border-color: #5580ad !important;
color: #ffffff !important;
}
/* Keep the active/selected filter pill clearly lit against the dark inactive ones */
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-primary.active,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-primary:active,
body[data-theme="dark"]:not(.bamis-role-resident) .btn.active.btn-outline-primary {
background-color: #1565c0 !important;
border-color: #1565c0 !important;
color: #ffffff !important;
}
/* Semantic outline buttons — dark face, but keep the coloured label/border
so "printed", "confirm", "reject" still read at a glance. */
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-success {
background-color: #14261d !important;
border-color: #2f7d4f !important;
color: #6ee7a0 !important;
}
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-danger {
background-color: #2a1620 !important;
border-color: #a13b4e !important;
color: #fca5b6 !important;
}
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-warning {
background-color: #2a2213 !important;
border-color: #a9822f !important;
color: #fcd68a !important;
}
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-success:hover {
background-color: #16a34a !important; color: #ffffff !important;
}
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-danger:hover {
background-color: #dc2626 !important; color: #ffffff !important;
}
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-warning:hover {
background-color: #d97706 !important; color: #ffffff !important;
}
/* Icons follow the button label colour */
body[data-theme="dark"]:not(.bamis-role-resident) .btn-light i,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-white i,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-secondary i,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-info i,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-secondary i,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-primary i,
body[data-theme="dark"]:not(.bamis-role-resident) .btn-outline-info i {
color: inherit !important;
}
/* Light "chip" badges used as labels/pills (e.g. "Next Control Number",
"Status: All", count pills) — same treatment so their text shows. */
body[data-theme="dark"]:not(.bamis-role-resident) .badge-light {
background-color: #263c5c !important;
color: #e8f0fc !important;
border-color: #3c5a86 !important;
}
body[data-theme="dark"]:not(.bamis-role-resident) .badge-light.text-primary,
body[data-theme="dark"]:not(.bamis-role-resident) .badge-light .text-primary,
body[data-theme="dark"]:not(.bamis-role-resident) .badge-light strong {
color: #bcd6f5 !important;
}
/* ============================================================
SweetAlert2 confirm/alert popups — sitewide "modern card" theme
(every page that calls Swal.fire() picks this up automatically,
instead of SweetAlert2's plain default look). Colors set per-call
via confirmButtonColor/icon are left alone; this only reshapes the
chrome (corners, shadow, spacing, button shape, icon badge) so the
popup reads as part of BAMIS instead of a generic browser dialog.
============================================================ */
.swal2-popup {
border-radius: 20px !important;
padding: 2rem 1.75rem 1.75rem !important;
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25), 0 4px 12px rgba(15, 23, 42, 0.08) !important;
font-family: inherit !important;
background: var(--bamis-surface, #ffffff) !important;
}
.swal2-title {
color: var(--bamis-text, #0f172a) !important;
font-weight: 800 !important;
font-size: 1.4rem !important;
padding: 0 !important;
margin-top: 0.25rem !important;
}
.swal2-html-container {
color: var(--bamis-text-muted, #475569) !important;
font-size: 0.95rem !important;
}
/* Filled pastel icon badge instead of SweetAlert2's thin outline icon —
matches the pastel "stat-card-icon" badges used across the dashboards. */
.swal2-icon {
border-width: 0 !important;
width: 4.5rem !important;
height: 4.5rem !important;
}
.swal2-icon.swal2-question {
background: #eaf2ff !important;
color: #1565C0 !important;
}
.swal2-icon.swal2-warning {
background: #fef6e2 !important;
color: #b45309 !important;
}
.swal2-icon.swal2-error {
background: #fdecec !important;
color: #dc2626 !important;
}
.swal2-icon.swal2-success {
background: #e6f9ee !important;
color: #16a34a !important;
}
.swal2-icon.swal2-success [class^='swal2-success-line'] {
background-color: #16a34a !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
border-color: #bbf7d0 !important;
}
.swal2-icon.swal2-info {
background: #e6f9fb !important;
color: #0e7490 !important;
}
.swal2-actions {
gap: 0.75rem !important;
margin-top: 1.5rem !important;
}
.swal2-styled {
border-radius: 10px !important;
padding: 0.65rem 1.5rem !important;
font-weight: 600 !important;
font-size: 0.95rem !important;
box-shadow: none !important;
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}
.swal2-styled:hover {
transform: translateY(-1px);
filter: brightness(1.05);
}
.swal2-styled:focus {
box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.25) !important;
}
.swal2-confirm.swal2-styled {
background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%) !important;
box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3) !important;
}
.swal2-confirm.swal2-styled:hover {
box-shadow: 0 6px 16px rgba(21, 101, 192, 0.4) !important;
}
.swal2-cancel.swal2-styled {
background: #eef2f7 !important;
color: #475569 !important;
}
.swal2-deny.swal2-styled {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}
.swal2-timer-progress-bar {
background: #1565C0 !important;
}
body[data-theme="dark"] .swal2-popup {
background: var(--bamis-surface, #152238) !important;
}
body[data-theme="dark"] .swal2-title {
color: var(--bamis-text, #e8f0fc) !important;
}
body[data-theme="dark"] .swal2-html-container {
color: var(--bamis-text-muted, #94b0d6) !important;
}
body[data-theme="dark"] .swal2-cancel.swal2-styled {
background: #24344f !important;
color: #cbd5e1 !important;
}
body[data-theme="dark"] .swal2-icon.swal2-question {
background: rgba(66, 165, 245, 0.18) !important;
color: #93c5fd !important;
}
body[data-theme="dark"] .swal2-icon.swal2-warning {
background: rgba(245, 158, 11, 0.18) !important;
color: #fbbf24 !important;
}
body[data-theme="dark"] .swal2-icon.swal2-error {
background: rgba(239, 68, 68, 0.18) !important;
color: #fca5a5 !important;
}
body[data-theme="dark"] .swal2-icon.swal2-success {
background: rgba(34, 197, 94, 0.18) !important;
color: #4ade80 !important;
}
body[data-theme="dark"] .swal2-icon.swal2-info {
background: rgba(34, 211, 238, 0.18) !important;
color: #67e8f9 !important;
}
/* DataTables export/print buttons that render without our helper classes */
body[data-theme="dark"]:not(.bamis-role-resident) .dt-buttons .dt-button:not(.btn-success):not(.btn-primary):not(.btn-danger) {
background: #1e3252 !important;
background-image: none !important;
border-color: #3c5a86 !important;
color: #e8f0fc !important;
}
/* Plain checkbox toggle (pages without Bootstrap form-switch) */
/* ============================================================
SECRETARY PANEL — unified pastel modal skin
Applies to every Bootstrap modal across the Secretary panel (Resident
Management, Announcements, Blotter Log, Officials/Positions Management,
Document Issuance, Service Requests, Resident Locations). Most of those
modal headers set their gradient via an inline style attribute, which
beats any normal CSS selector, so several rules below need !important —
that's deliberate, not leftover debugging.
Header/button gradient is the exact .sec-navbar gradient from topbar.php
(#0D47A1 → #1565C0 → #1976D2, 135deg) — kept identical on purpose so the
modal header and its primary/next button read as the same brand color as
the topbar, not a different accent. */
body.bamis-role-secretary .modal-content {
border: none !important;
border-radius: 20px !important;
overflow: hidden;
box-shadow: 0 24px 60px -14px rgba(21, 101, 192, 0.28), 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}
body.bamis-role-secretary .modal-header {
background: linear-gradient(135deg, #0D47A1 0%, #1565C0 50%, #1976D2 100%) !important;
border-bottom: none !important;
}
body.bamis-role-secretary .modal-header .modal-title,
body.bamis-role-secretary .modal-header .modal-title i,
body.bamis-role-secretary .modal-header h5,
body.bamis-role-secretary .modal-header h6 {
color: #ffffff !important;
}
body.bamis-role-secretary .modal-header .close {
color: #ffffff;
opacity: 0.85;
text-shadow: none;
}
body.bamis-role-secretary .modal-header .close:hover {
opacity: 1;
}
body.bamis-role-secretary .modal-header .btn-close {
filter: brightness(0) invert(1);
opacity: 0.85;
}
body.bamis-role-secretary .modal-header .btn-close:hover {
opacity: 1;
}
body.bamis-role-secretary .modal-body {
background: linear-gradient(180deg, #f6f8ff 0%, #ffffff 220px) !important;
}
body.bamis-role-secretary .modal-footer {
background: #f8fafc !important;
border-top: 1px solid #eef2ff !important;
}
/* Form fields inside any Secretary-panel modal */
body.bamis-role-secretary .modal .form-control,
body.bamis-role-secretary .modal .form-select,
body.bamis-role-secretary .modal textarea.form-control {
border-radius: 10px;
border: 1px solid #e2e8f0;
transition: border-color .2s ease, box-shadow .2s ease;
}
body.bamis-role-secretary .modal .form-control:focus,
body.bamis-role-secretary .modal .form-select:focus,
body.bamis-role-secretary .modal textarea.form-control:focus {
border-color: #8b5cf6;
box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.15);
}
body.bamis-role-secretary .modal label {
font-weight: 600;
color: #475569;
}
body.bamis-role-secretary .modal .form-check {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 0.6rem 0.85rem;
transition: all .2s ease;
}
body.bamis-role-secretary .modal .form-check:hover {
border-color: #c4b5fd;
background: #f5f3ff;
}
body.bamis-role-secretary .modal .form-check-input:checked {
background-color: #8b5cf6;
border-color: #8b5cf6;
}
body.bamis-role-secretary .modal .form-check-input:focus {
box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.2);
}
body.bamis-role-secretary .modal .btn-primary {
background: linear-gradient(135deg, #0D47A1 0%, #1565C0 50%, #1976D2 100%);
border: none;
transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
body.bamis-role-secretary .modal .btn-primary:hover {
filter: brightness(1.06);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(21, 101, 192, 0.35);
}
/* Dark mode: give every Secretary modal an explicit dark surface instead of
inheriting whatever a specific page's own (often inconsistent) dark
overrides do — this is the safety net so no modal is left half-pastel,
half-dark. */
body[data-theme="dark"].bamis-role-secretary .modal-content {
background: #16233a !important;
}
body[data-theme="dark"].bamis-role-secretary .modal-body {
background: linear-gradient(180deg, #16233a 0%, #101c30 220px) !important;
color: #e8f0fc;
}
body[data-theme="dark"].bamis-role-secretary .modal-footer {
background: #101c30 !important;
border-top-color: #2a3f5c !important;
}
body[data-theme="dark"].bamis-role-secretary .modal .form-control,
body[data-theme="dark"].bamis-role-secretary .modal .form-select,
body[data-theme="dark"].bamis-role-secretary .modal textarea.form-control {
background-color: #101c30;
border-color: #2a3f5c;
color: #e8f0fc;
}
body[data-theme="dark"].bamis-role-secretary .modal label {
color: #cdddf2;
}
body[data-theme="dark"].bamis-role-secretary .modal .form-check {
background: #16233a;
border-color: #2a3f5c;
}
body[data-theme="dark"].bamis-role-secretary .modal .form-check:hover {
background: #1a2b44;
border-color: #7c3aed;
}