/* ============================================ NGO Management System - Dark Mode Styles Applied via data-bs-theme="dark" on ============================================ */ [data-bs-theme="dark"] { --bs-body-bg: #121212; --bs-body-color: #e0e0e0; --bs-light: #1e1e1e; --bs-dark: #000000; --glass-bg: rgba(30, 30, 30, 0.7); --glass-bg-light: rgba(40, 40, 40, 0.85); --glass-border: rgba(255, 255, 255, 0.1); --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); } /* ============================================ DARK MODE - BODY & BASE ============================================ */ [data-bs-theme="dark"] body { background-color: #121212; color: #e0e0e0; } [data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6 { color: #ffffff; } [data-bs-theme="dark"] p { color: #b0b0b0; } [data-bs-theme="dark"] a { color: #6ea8fe; } [data-bs-theme="dark"] a:hover { color: #9ec5fe; } /* ============================================ DARK MODE - NAVBAR ============================================ */ [data-bs-theme="dark"] .navbar { background-color: #1a1a1a !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } [data-bs-theme="dark"] .navbar.scrolled { background: rgba(26, 26, 26, 0.95) !important; backdrop-filter: blur(10px); } [data-bs-theme="dark"] .navbar-brand { color: #ffffff !important; } [data-bs-theme="dark"] .nav-link { color: #b0b0b0 !important; } [data-bs-theme="dark"] .nav-link:hover, [data-bs-theme="dark"] .nav-link.active { color: #6ea8fe !important; } [data-bs-theme="dark"] .navbar-toggler { color: #ffffff; border-color: rgba(255, 255, 255, 0.2); } [data-bs-theme="dark"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* ============================================ DARK MODE - DROPDOWNS ============================================ */ [data-bs-theme="dark"] .dropdown-menu { background-color: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } [data-bs-theme="dark"] .dropdown-item { color: #e0e0e0; } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background-color: #2d2d2d; color: #6ea8fe; } [data-bs-theme="dark"] .dropdown-divider { border-color: rgba(255, 255, 255, 0.1); } [data-bs-theme="dark"] .dropdown-header { color: #888; } /* ============================================ DARK MODE - CARDS ============================================ */ [data-bs-theme="dark"] .card { background-color: #1e1e1e; border-color: #2d2d2d; color: #e0e0e0; } [data-bs-theme="dark"] .card-title { color: #ffffff; } [data-bs-theme="dark"] .card-header { background-color: #252525; border-bottom-color: #2d2d2d; color: #ffffff; } [data-bs-theme="dark"] .card-footer { background-color: #252525; border-top-color: #2d2d2d; } /* ============================================ DARK MODE - GLASSMORPHISM ============================================ */ [data-bs-theme="dark"] .glass-card { background: rgba(30, 30, 30, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); } /* ============================================ DARK MODE - FORMS ============================================ */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #2d2d2d; border-color: #404040; color: #e0e0e0; } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: #2d2d2d; border-color: #0d6efd; color: #e0e0e0; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } [data-bs-theme="dark"] .form-control::placeholder { color: #888; } [data-bs-theme="dark"] .form-label { color: #e0e0e0; } [data-bs-theme="dark"] .form-text { color: #888; } [data-bs-theme="dark"] .form-check-label { color: #b0b0b0; } [data-bs-theme="dark"] .input-group-text { background-color: #2d2d2d; border-color: #404040; color: #e0e0e0; } /* ============================================ DARK MODE - BUTTONS ============================================ */ [data-bs-theme="dark"] .btn-outline-secondary { color: #e0e0e0; border-color: #404040; } [data-bs-theme="dark"] .btn-outline-secondary:hover { background-color: #404040; color: #ffffff; border-color: #505050; } [data-bs-theme="dark"] .btn-light { background-color: #2d2d2d; border-color: #404040; color: #e0e0e0; } [data-bs-theme="dark"] .btn-light:hover { background-color: #404040; color: #ffffff; } /* ============================================ DARK MODE - TABLES ============================================ */ [data-bs-theme="dark"] .table { color: #e0e0e0; } [data-bs-theme="dark"] .table thead th { background-color: #252525; color: #b0b0b0; border-bottom-color: #404040; } [data-bs-theme="dark"] .table tbody td { border-bottom-color: #2d2d2d; } [data-bs-theme="dark"] .table-hover tbody tr:hover { background-color: #252525; color: #ffffff; } [data-bs-theme="dark"] .table-light { background-color: #252525; color: #e0e0e0; } /* ============================================ DARK MODE - BACKGROUNDS ============================================ */ [data-bs-theme="dark"] .bg-light { background-color: #1a1a1a !important; } [data-bs-theme="dark"] .bg-white { background-color: #1e1e1e !important; } [data-bs-theme="dark"] .text-dark { color: #e0e0e0 !important; } [data-bs-theme="dark"] .text-muted { color: #888 !important; } [data-bs-theme="dark"] .text-secondary { color: #b0b0b0 !important; } /* ============================================ DARK MODE - MODALS ============================================ */ [data-bs-theme="dark"] .modal-content { background-color: #1e1e1e; border: 1px solid #2d2d2d; color: #e0e0e0; } [data-bs-theme="dark"] .modal-header { border-bottom-color: #2d2d2d; } [data-bs-theme="dark"] .modal-footer { border-top-color: #2d2d2d; } [data-bs-theme="dark"] .modal-title { color: #ffffff; } [data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ============================================ DARK MODE - ACCORDION ============================================ */ [data-bs-theme="dark"] .accordion-item { background-color: #1e1e1e; border-color: #2d2d2d !important; } [data-bs-theme="dark"] .accordion-button { background-color: #1e1e1e; color: #e0e0e0; } [data-bs-theme="dark"] .accordion-button:not(.collapsed) { background: var(--primary-gradient); color: white; } [data-bs-theme="dark"] .accordion-body { background-color: #1e1e1e; color: #b0b0b0; } /* ============================================ DARK MODE - ALERTS ============================================ */ [data-bs-theme="dark"] .alert { border: none; } [data-bs-theme="dark"] .alert-success { background: rgba(25, 135, 84, 0.2); color: #75b798; } [data-bs-theme="dark"] .alert-danger { background: rgba(220, 53, 69, 0.2); color: #ea868f; } [data-bs-theme="dark"] .alert-warning { background: rgba(255, 193, 7, 0.2); color: #ffda6a; } [data-bs-theme="dark"] .alert-info { background: rgba(13, 202, 240, 0.2); color: #6edff6; } /* ============================================ DARK MODE - PAGINATION ============================================ */ [data-bs-theme="dark"] .pagination .page-link { background-color: #1e1e1e; border-color: #2d2d2d; color: #e0e0e0; } [data-bs-theme="dark"] .pagination .page-link:hover { background-color: #2d2d2d; color: #6ea8fe; } [data-bs-theme="dark"] .pagination .page-item.disabled .page-link { background-color: #1a1a1a; color: #666; } /* ============================================ DARK MODE - BADGES ============================================ */ [data-bs-theme="dark"] .badge.bg-light { background-color: #2d2d2d !important; color: #e0e0e0 !important; } /* ============================================ DARK MODE - PROGRESS BAR ============================================ */ [data-bs-theme="dark"] .progress { background-color: #2d2d2d; } /* ============================================ DARK MODE - FOOTER ============================================ */ [data-bs-theme="dark"] footer { background: #0a0a0a; border-top: 1px solid rgba(255, 255, 255, 0.05); } [data-bs-theme="dark"] footer h5, [data-bs-theme="dark"] footer h6 { color: #ffffff; } [data-bs-theme="dark"] .border-secondary { border-color: rgba(255, 255, 255, 0.1) !important; } /* ============================================ DARK MODE - LOADING SCREEN ============================================ */ [data-bs-theme="dark"] .dz-loading-screen { background: #121212; } /* ============================================ DARK MODE - SCROLLBAR ============================================ */ [data-bs-theme="dark"] ::-webkit-scrollbar-track { background: #1a1a1a; } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: #0d6efd; } [data-bs-theme="dark"] * { scrollbar-color: #0d6efd #1a1a1a; } /* ============================================ DARK MODE - MISC COMPONENTS ============================================ */ [data-bs-theme="dark"] .amount-btn { background: #2d2d2d; border-color: #404040; color: #e0e0e0; } [data-bs-theme="dark"] .amount-btn:hover { border-color: #0d6efd; color: #6ea8fe; } [data-bs-theme="dark"] .amount-btn.active { background: #0d6efd; color: white; border-color: #0d6efd; } [data-bs-theme="dark"] hr { border-color: rgba(255, 255, 255, 0.1); } [data-bs-theme="dark"] .content-body { color: #b0b0b0; } [data-bs-theme="dark"] .content-body h2, [data-bs-theme="dark"] .content-body h3 { color: #ffffff; border-bottom-color: #2d2d2d; } [data-bs-theme="dark"] .content-body blockquote { background: #1e1e1e; border-left-color: #0d6efd; color: #b0b0b0; } [data-bs-theme="dark"] .page-header { background: linear-gradient(135deg, #0a3d91 0%, #062a66 100%); } [data-bs-theme="dark"] .hero-section::before { background: linear-gradient(135deg, rgba(10, 61, 145, 0.8) 0%, rgba(6, 42, 102, 0.9) 100%); } /* ============================================ DARK MODE - IMAGES ============================================ */ [data-bs-theme="dark"] img:not(.keep-color) { opacity: 0.9; } [data-bs-theme="dark"] img:hover { opacity: 1; } /* ============================================ DARK MODE - TOOLTIPS & POPOVERS ============================================ */ [data-bs-theme="dark"] .tooltip-inner { background-color: #2d2d2d; color: #e0e0e0; } [data-bs-theme="dark"] .tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: #2d2d2d; } [data-bs-theme="dark"] .popover { background-color: #1e1e1e; border-color: #2d2d2d; } [data-bs-theme="dark"] .popover-header { background-color: #252525; border-bottom-color: #2d2d2d; color: #ffffff; } [data-bs-theme="dark"] .popover-body { color: #b0b0b0; } /* ============================================ DARK MODE - POLISH PASS ============================================ */ [data-bs-theme="dark"] { --text-secondary: #c4ccd6; --text-muted: #9aa4b2; --loader-bg: #121212; --loader-text: #f1f3f5; } [data-bs-theme="dark"] .dz-loading-screen { background: radial-gradient(120% 120% at 50% 0%, rgba(var(--bs-primary-rgb, 13, 110, 253), 0.18) 0%, transparent 55%), #121212; } [data-bs-theme="dark"] .form-text, [data-bs-theme="dark"] small.text-muted, [data-bs-theme="dark"] .small.text-muted { color: var(--text-muted) !important; } [data-bs-theme="dark"] .icon-box, [data-bs-theme="dark"] .feature-icon, [data-bs-theme="dark"] .stat-icon, [data-bs-theme="dark"] .service-icon { background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.2); color: #8ab4ff; } [data-bs-theme="dark"] .settings-toggle-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); } [data-bs-theme="dark"] .amount-btn { background: #1e1e1e; border-color: #343a40; color: #e0e0e0; } [data-bs-theme="dark"] .amount-btn.active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; } [data-bs-theme="dark"] .navbar-collapse { background: #1a1a1a; }