/* TCC CRM Dark Mode * Activated via [data-theme="dark"] on * Uses warm dark grays (not pure black) per user preference * Created: March 18, 2026 */ /* =========================================== * DARK MODE CSS VARIABLE OVERRIDES * =========================================== */ [data-theme="dark"] { --color-text: #e0e0e0; --color-text-muted: #9e9e9e; --color-text-light: #757575; --color-bg-primary: #1e1e22; --color-bg-secondary: #252529; --color-bg-tertiary: #2c2c31; --color-border: #3a3a40; --color-border-light: #32323a; --color-off-white: #252529; /* Stat card dark backgrounds */ --stat-bg-primary: rgba(39, 53, 102, 0.25); --stat-bg-accent: rgba(227, 24, 55, 0.2); --stat-bg-neutral: #252529; --stat-bg-highlight: rgba(39, 53, 102, 0.15); --icon-bg-primary: rgba(39, 53, 102, 0.35); --icon-bg-accent: rgba(227, 24, 55, 0.3); --icon-bg-neutral: rgba(255, 255, 255, 0.08); /* TCC brand colors stay vibrant in dark mode */ --tcc-primary-light: rgba(39, 53, 102, 0.2); --tcc-primary-medium: rgba(39, 53, 102, 0.3); --tcc-accent-light: rgba(227, 24, 55, 0.15); --tcc-accent-medium: rgba(227, 24, 55, 0.25); /* Shadows get darker */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3); color-scheme: dark; } /* =========================================== * BASE ELEMENTS * =========================================== */ [data-theme="dark"] body { background-color: #1a1a1e; color: #e0e0e0; } /* =========================================== * NAVBAR * =========================================== */ [data-theme="dark"] .navbar { background-color: #22222a !important; border-bottom-color: #3a3a40 !important; } [data-theme="dark"] .navbar-light .navbar-nav .nav-link { color: #c8c8d0; } [data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover, [data-theme="dark"] .navbar-light .navbar-nav .nav-link:focus { color: #ffffff; } [data-theme="dark"] .navbar-light .navbar-nav .nav-link.active { color: #e31837 !important; } [data-theme="dark"] .navbar-brand { color: #b0b8d0 !important; } [data-theme="dark"] .navbar-toggler { border-color: rgba(255, 255, 255, 0.2); } [data-theme="dark"] .navbar-toggler-icon { filter: invert(1); } [data-theme="dark"] .dropdown-menu { background-color: #2a2a32; border-color: #3a3a40; } [data-theme="dark"] .dropdown-item { color: #d0d0d8; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: #353540; color: #ffffff; } [data-theme="dark"] .dropdown-divider { border-top-color: #3a3a40; } /* =========================================== * CARDS * =========================================== */ [data-theme="dark"] .card, [data-theme="dark"] .tcc-card { background-color: #252529 !important; border-color: #3a3a40 !important; color: #d0d0d8 !important; } [data-theme="dark"] .card-body { background-color: #252529 !important; color: #d0d0d8 !important; } [data-theme="dark"] .card-header { background-color: #2a2a32 !important; border-bottom-color: #3a3a40 !important; color: #d0d0d8 !important; } [data-theme="dark"] .card-footer { background-color: #2a2a32; border-top-color: #3a3a40; } /* Card headers with inline styles need overrides */ [data-theme="dark"] .card-header[style*="background: linear-gradient"] { border-bottom-color: #3a3a40; } /* Light card headers (navy tint) */ [data-theme="dark"] .card-header:not(.text-white) { background: rgba(39, 53, 102, 0.2) !important; color: #a0b0d0 !important; } /* =========================================== * TABLES * =========================================== */ [data-theme="dark"] .table { color: #d0d0d8; --bs-table-bg: transparent; } [data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; border-bottom-color: #3a3a40; color: #d0d0d8; } [data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(39, 53, 102, 0.15) !important; color: #e0e0e8; } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .table-borderless > :not(caption) > * > * { border-bottom-color: transparent; } [data-theme="dark"] .tcc-table__header { background: rgba(39, 53, 102, 0.2); } [data-theme="dark"] .tcc-table__header th { color: #a0b0d0; border-bottom-color: rgba(39, 53, 102, 0.3); } [data-theme="dark"] .tcc-table__body .tcc-table__row:nth-child(odd) { background-color: #252529; } [data-theme="dark"] .tcc-table__body .tcc-table__row:nth-child(even) { background-color: #2a2a2e; } [data-theme="dark"] .tcc-table__body .tcc-table__row:hover { background-color: rgba(39, 53, 102, 0.2) !important; } [data-theme="dark"] .tcc-table__body td { border-bottom-color: #3a3a40; } /* Bootstrap table color variants */ [data-theme="dark"] .table-success { background-color: rgba(39, 53, 102, 0.15) !important; } [data-theme="dark"] .table-danger { background-color: rgba(227, 24, 55, 0.15) !important; } [data-theme="dark"] .table-warning { background-color: rgba(227, 24, 55, 0.1) !important; } [data-theme="dark"] .table-info { background-color: rgba(39, 53, 102, 0.12) !important; } [data-theme="dark"] .table-secondary { background-color: rgba(108, 117, 125, 0.15) !important; } /* =========================================== * FORMS * =========================================== */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #2a2a32; border-color: #3a3a40; color: #e0e0e0; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #30303a; border-color: #4a5a8a; color: #e0e0e0; box-shadow: 0 0 0 0.25rem rgba(39, 53, 102, 0.3); } [data-theme="dark"] .form-control::placeholder { color: #6c6c78; } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly] { background-color: #222228; color: #888; } [data-theme="dark"] .form-check-input { background-color: #2a2a32; border-color: #4a4a52; } [data-theme="dark"] .form-check-input:checked { background-color: #273566; border-color: #273566; } [data-theme="dark"] .input-group-text { background-color: #2a2a32; border-color: #3a3a40; color: #c0c0c8; } [data-theme="dark"] .form-label { color: #c8c8d0; } /* =========================================== * ALERTS * =========================================== */ [data-theme="dark"] .alert-success { background-color: rgba(39, 53, 102, 0.2) !important; border-color: rgba(39, 53, 102, 0.35) !important; color: #a0b8e0 !important; } [data-theme="dark"] .alert-info { background-color: rgba(39, 53, 102, 0.2) !important; border-color: rgba(39, 53, 102, 0.35) !important; color: #a0b8e0 !important; } [data-theme="dark"] .alert-warning { background-color: rgba(227, 24, 55, 0.15) !important; border-color: rgba(227, 24, 55, 0.3) !important; color: #f0a0a8 !important; } [data-theme="dark"] .alert-danger { background-color: rgba(227, 24, 55, 0.15) !important; border-color: rgba(227, 24, 55, 0.3) !important; color: #f0a0a8 !important; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* =========================================== * LIST GROUPS * =========================================== */ [data-theme="dark"] .list-group-item { background-color: #252529; border-color: #3a3a40; color: #d0d0d8; } [data-theme="dark"] .list-group-item:hover { background-color: #2c2c34; } /* =========================================== * MODALS * =========================================== */ [data-theme="dark"] .modal-content { background-color: #252529; border-color: #3a3a40; } [data-theme="dark"] .modal-header { border-bottom-color: #3a3a40; } [data-theme="dark"] .modal-footer { border-top-color: #3a3a40; } /* =========================================== * BADGES - Keep brand colors vibrant * =========================================== */ [data-theme="dark"] .badge--navy-light { background-color: rgba(39, 53, 102, 0.3); color: #a0b8e0; border-color: rgba(39, 53, 102, 0.5); } [data-theme="dark"] .badge--red-light { background-color: rgba(227, 24, 55, 0.25); color: #f0a0a8; border-color: rgba(227, 24, 55, 0.4); } /* =========================================== * BUTTONS - Keep brand buttons, darken outlines * =========================================== */ [data-theme="dark"] .btn-outline-secondary { border-color: #5a5a65; color: #c0c0c8; } [data-theme="dark"] .btn-outline-secondary:hover { background-color: #3a3a45; border-color: #6a6a75; color: #ffffff; } [data-theme="dark"] .btn-light { background-color: #2c2c34; border-color: #3a3a42; color: #d0d0d8; } [data-theme="dark"] .btn-light:hover { background-color: #353540; border-color: #45454f; color: #ffffff; } /* =========================================== * FOOTER * =========================================== */ [data-theme="dark"] footer { background-color: #1a1a1e !important; border-top-color: #3a3a40 !important; color: #7a7a85; } [data-theme="dark"] footer a { color: #7a7a85 !important; } /* =========================================== * PAGINATION * =========================================== */ [data-theme="dark"] .page-link { background-color: #252529; border-color: #3a3a40; color: #c0c0c8; } [data-theme="dark"] .page-link:hover { background-color: #35354a; border-color: #4a4a55; color: #ffffff; } [data-theme="dark"] .page-item.active .page-link { background-color: #273566; border-color: #273566; } [data-theme="dark"] .page-item.disabled .page-link { background-color: #1e1e22; border-color: #3a3a40; color: #555; } /* =========================================== * BREADCRUMBS * =========================================== */ [data-theme="dark"] .breadcrumb { background-color: #252529; } [data-theme="dark"] .breadcrumb-item a { color: #8090b8; } [data-theme="dark"] .breadcrumb-item.active { color: #9e9e9e; } /* =========================================== * STAT CARDS (dark overrides) * =========================================== */ [data-theme="dark"] .stat-card-tcc--navy-light { background: rgba(39, 53, 102, 0.2); border-color: rgba(39, 53, 102, 0.35); color: #a0b8e0; } [data-theme="dark"] .stat-card-tcc--red-light { background: rgba(227, 24, 55, 0.15); border-color: rgba(227, 24, 55, 0.3); color: #f0a0a8; } [data-theme="dark"] .stat-card-tcc--white { background: #2a2a32; border-color: #3a3a40; color: #a0b8e0; } /* =========================================== * FILTER CARDS * =========================================== */ [data-theme="dark"] .filter-card-tcc { background: #252529; border-color: #3a3a40; } [data-theme="dark"] .filter-card-tcc__header { background: rgba(39, 53, 102, 0.15); border-bottom-color: rgba(39, 53, 102, 0.25); color: #a0b8e0; } /* =========================================== * INFO BOXES * =========================================== */ [data-theme="dark"] .info-box-tcc--navy { background: rgba(39, 53, 102, 0.2); border-color: rgba(39, 53, 102, 0.35); color: #a0b8e0; } [data-theme="dark"] .info-box-tcc--red { background: rgba(227, 24, 55, 0.15); border-color: rgba(227, 24, 55, 0.3); color: #f0a0a8; } /* =========================================== * SECTION HEADERS * =========================================== */ [data-theme="dark"] .section-header-tcc { background: linear-gradient(90deg, rgba(39, 53, 102, 0.2) 0%, transparent 100%); } [data-theme="dark"] .section-header-tcc__title { color: #a0b8e0; } [data-theme="dark"] .section-header-tcc__icon { color: #8098c8; } [data-theme="dark"] .section-header-tcc--red { background: linear-gradient(90deg, rgba(227, 24, 55, 0.15) 0%, transparent 100%); } [data-theme="dark"] .section-header-tcc--red .section-header-tcc__title { color: #f0a0a8; } [data-theme="dark"] .section-header-tcc--red .section-header-tcc__icon { color: #e85070; } /* =========================================== * LINKS — Navy blue is invisible on dark backgrounds * =========================================== */ /* !important needed to override inline style="color: #273566" on donor links etc. */ [data-theme="dark"] a { color: #c0c8d8 !important; } [data-theme="dark"] a:hover { color: #e0e4ec !important; } /* Keep white links white (e.g. navbar brand, card header links) */ [data-theme="dark"] .text-white a, [data-theme="dark"] a.text-white, [data-theme="dark"] .card-header.text-white a { color: #ffffff !important; } /* Solid buttons keep their own colors — don't inherit generic link gray */ [data-theme="dark"] a.btn-tcc-navy, [data-theme="dark"] a.btn-tcc-red, [data-theme="dark"] a.btn-primary, [data-theme="dark"] a.btn-danger, [data-theme="dark"] a.btn-success, [data-theme="dark"] a.btn-warning { color: white !important; } /* Override ALL inline color: #273566 in dark mode */ [data-theme="dark"] [style*="color: #273566"], [data-theme="dark"] [style*="color:#273566"] { color: #c0c8d8 !important; } [data-theme="dark"] [style*="color: #e31837"], [data-theme="dark"] [style*="color:#e31837"] { color: #f08898 !important; } [data-theme="dark"] [style*="color: #c4142f"], [data-theme="dark"] [style*="color:#c4142f"] { color: #f08898 !important; } /* Override inline white/light backgrounds */ [data-theme="dark"] [style*="background-color: white"], [data-theme="dark"] [style*="background-color:white"], [data-theme="dark"] [style*="background: white"], [data-theme="dark"] [style*="background:white"], [data-theme="dark"] [style*="background-color: #fff"], [data-theme="dark"] [style*="background-color:#fff"], [data-theme="dark"] [style*="background-color: #ffffff"], [data-theme="dark"] [style*="background-color:#ffffff"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background:#fff"] { background-color: #252529 !important; background: #252529 !important; } /* Override inline light gray backgrounds */ [data-theme="dark"] [style*="background-color: #f8f9fa"], [data-theme="dark"] [style*="background-color:#f8f9fa"], [data-theme="dark"] [style*="background: #f8f9fa"], [data-theme="dark"] [style*="background:#f8f9fa"] { background-color: #2a2a2e !important; background: #2a2a2e !important; } [data-theme="dark"] [style*="background-color: #f0f0f0"], [data-theme="dark"] [style*="background-color:#f0f0f0"] { background-color: #2c2c32 !important; } [data-theme="dark"] .text-tcc-navy { color: #80a8e0 !important; } [data-theme="dark"] .text-primary { color: #80a8e0 !important; } [data-theme="dark"] .text-success { color: #80a8e0 !important; } [data-theme="dark"] .text-info { color: #80a8e0 !important; } /* Outline navy buttons need lighter border/text in dark mode */ [data-theme="dark"] .btn-outline-tcc-navy { border-color: #8098c0 !important; color: #c0d0e8 !important; } [data-theme="dark"] .btn-outline-tcc-navy:hover { background-color: #3a5090 !important; border-color: #3a5090 !important; color: white !important; } [data-theme="dark"] .btn-outline-primary { border-color: #6080b8 !important; color: #80a8e0 !important; } [data-theme="dark"] .btn-outline-primary:hover { background-color: #273566 !important; color: white !important; } [data-theme="dark"] .btn-outline-success { border-color: #6080b8 !important; color: #80a8e0 !important; } [data-theme="dark"] .btn-outline-success:hover { background-color: #273566 !important; color: white !important; } [data-theme="dark"] .btn-outline-info { border-color: #6080b8 !important; color: #80a8e0 !important; } [data-theme="dark"] .btn-outline-info:hover { background-color: #273566 !important; color: white !important; } /* Small/link-style buttons */ [data-theme="dark"] .btn-link { color: #80a8e0; } [data-theme="dark"] .btn-link:hover { color: #a0c0f0; } /* =========================================== * MISC TEXT & UTILITY OVERRIDES * =========================================== */ [data-theme="dark"] .text-muted { color: #8a8a95 !important; } [data-theme="dark"] .text-dark { color: #d0d0d8 !important; } [data-theme="dark"] .text-body { color: #d0d0d8 !important; } [data-theme="dark"] .bg-light { background-color: #252529 !important; } [data-theme="dark"] .bg-white { background-color: #252529 !important; } [data-theme="dark"] .bg-body { background-color: #1a1a1e !important; } [data-theme="dark"] .border { border-color: #3a3a40 !important; } [data-theme="dark"] .border-bottom { border-bottom-color: #3a3a40 !important; } [data-theme="dark"] .border-top { border-top-color: #3a3a40 !important; } [data-theme="dark"] hr { border-color: #3a3a40; opacity: 0.5; } /* =========================================== * TABS & NAV * =========================================== */ [data-theme="dark"] .nav-tabs { border-bottom-color: #3a3a40; } [data-theme="dark"] .nav-tabs .nav-link { color: #9e9ea8; } [data-theme="dark"] .nav-tabs .nav-link:hover { border-color: #4a4a55 #4a4a55 #3a3a40; color: #d0d0d8; } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: #252529; border-color: #3a3a40 #3a3a40 #252529; color: #e0e0e8; } [data-theme="dark"] .nav-pills .nav-link { color: #9e9ea8; } [data-theme="dark"] .nav-pills .nav-link.active { background-color: #273566; color: #ffffff; } /* =========================================== * ACCORDION * =========================================== */ [data-theme="dark"] .accordion-item { background-color: #252529; border-color: #3a3a40; } [data-theme="dark"] .accordion-button { background-color: #2a2a32; color: #d0d0d8; } [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: rgba(39, 53, 102, 0.2); color: #a0b8e0; } [data-theme="dark"] .accordion-body { background-color: #252529; } /* =========================================== * PROGRESS BARS * =========================================== */ [data-theme="dark"] .progress { background-color: #2a2a32; } /* =========================================== * TOOLTIPS & POPOVERS * =========================================== */ [data-theme="dark"] .tooltip-inner { background-color: #35354a; } [data-theme="dark"] .popover { background-color: #2a2a32; border-color: #3a3a40; } /* =========================================== * DASHBOARD COMPONENTS * =========================================== */ [data-theme="dark"] .dashboard-header__greeting { color: #e0e0e8; } /* =========================================== * TABLE & ROW HOVER — text must be white in dark mode * =========================================== */ [data-theme="dark"] .tcc-table__body .tcc-table__row:hover td { color: #ffffff !important; } [data-theme="dark"] .donor-row:hover { background: rgba(39, 53, 102, 0.35) !important; } [data-theme="dark"] .donor-row:hover td, [data-theme="dark"] .donor-row:hover .donor-row__name, [data-theme="dark"] .donor-row:hover .donor-row__location, [data-theme="dark"] .donor-row:hover a, [data-theme="dark"] .donor-row:hover span, [data-theme="dark"] .donor-row:hover [style*="color"] { color: #ffffff !important; } [data-theme="dark"] .table-hover > tbody > tr:hover > * { color: #ffffff !important; } /* =========================================== * FLATPICKR DATE PICKER * =========================================== */ [data-theme="dark"] .flatpickr-calendar { background-color: #2a2a32; border-color: #3a3a40; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .flatpickr-day { color: #d0d0d8; } [data-theme="dark"] .flatpickr-day:hover { background-color: #3a3a48; border-color: #3a3a48; } [data-theme="dark"] .flatpickr-day.selected { background-color: #273566; border-color: #273566; } [data-theme="dark"] .flatpickr-months .flatpickr-month { background-color: #2a2a32; color: #d0d0d8; } [data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months { background-color: #2a2a32; color: #d0d0d8; } [data-theme="dark"] .flatpickr-weekdays { background-color: #2a2a32; } [data-theme="dark"] span.flatpickr-weekday { color: #8a8a95; background-color: #2a2a32; } [data-theme="dark"] .flatpickr-day.flatpickr-disabled { color: #555; } /* =========================================== * SCROLLBAR STYLING * =========================================== */ [data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #1e1e22; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #4a4a55; border-radius: 5px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #5a5a68; } /* =========================================== * TOAST NOTIFICATIONS * =========================================== */ [data-theme="dark"] .toast { background-color: #2a2a32; border-color: #3a3a40; color: #d0d0d8; } /* =========================================== * DARK MODE TOGGLE SWITCH * =========================================== */ .dark-mode-toggle { display: flex; align-items: center; gap: 0.75rem; } .dark-mode-switch { position: relative; width: 48px; height: 26px; display: inline-block; } .dark-mode-switch input { opacity: 0; width: 0; height: 0; } .dark-mode-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 26px; transition: 0.3s; } .dark-mode-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: 0.3s; } .dark-mode-switch input:checked + .dark-mode-slider { background-color: #273566; } .dark-mode-switch input:checked + .dark-mode-slider:before { transform: translateX(22px); } /* =========================================== * DASHBOARD STAT CARDS (dashboard.css) * =========================================== */ [data-theme="dark"] .stat-card { background: #252529; border-color: #3a3a40; } [data-theme="dark"] .stat-card__value { color: #80b4ff !important; } [data-theme="dark"] .stat-card__label { color: #9e9ea8; } [data-theme="dark"] .stat-card__trend--up { color: #80a8e0; } [data-theme="dark"] .stat-card__trend--down { color: #f08898; } /* =========================================== * ACTION CARDS (dashboard.css) * =========================================== */ [data-theme="dark"] .action-card { background: #252529; border-color: #3a3a40; } [data-theme="dark"] .action-card__title { color: #e0e0e8; } [data-theme="dark"] .action-card__description { color: #9e9ea8; } /* =========================================== * ALERT CARDS (dashboard.css) * =========================================== */ [data-theme="dark"] .alert-card { background: #252529; } [data-theme="dark"] .alert-card--accent, [data-theme="dark"] .alert-card--danger { background: linear-gradient(90deg, rgba(227, 24, 55, 0.15) 0%, #252529 50%); } [data-theme="dark"] .alert-card--primary { background: linear-gradient(90deg, rgba(39, 53, 102, 0.2) 0%, #252529 50%); } [data-theme="dark"] .alert-card__title { color: #e0e0e8; } [data-theme="dark"] .alert-card__text { color: #9e9ea8; } /* =========================================== * SECTION HEADERS (dashboard.css) * =========================================== */ [data-theme="dark"] .section-header { border-bottom-color: #3a3a40; } [data-theme="dark"] .section-header__title { color: #e0e0e8; } [data-theme="dark"] .section-header__subtitle { color: #9e9ea8; } /* =========================================== * HOME PAGE — Sidebar, Workspace, Main Panel * =========================================== */ [data-theme="dark"] .home-sidebar { background: #22222a !important; border-right-color: #3a3a40 !important; } [data-theme="dark"] .home-sidebar__heading { color: #80a8e0 !important; } [data-theme="dark"] .home-sidebar__link { color: #c0c8d8 !important; } [data-theme="dark"] .home-sidebar__link:hover { background: rgba(39, 53, 102, 0.25) !important; color: #e0e8f0 !important; border-left-color: #6080b8 !important; } [data-theme="dark"] .home-sidebar__link i { color: #6080b8 !important; } [data-theme="dark"] .home-sidebar__divider { border-top-color: #3a3a40 !important; } [data-theme="dark"] .home-sidebar__toggle { background: rgba(39, 53, 102, 0.3) !important; color: #a0b8e0 !important; } [data-theme="dark"] .workspace-wrapper { background: #252529 !important; border-color: #3a3a40 !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] .home-main { background: #1e1e22 !important; } /* =========================================== * PM STAT CARDS (projects.css) * =========================================== */ [data-theme="dark"] .pm-stat { background: #252529 !important; border-color: #3a3a40 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important; } [data-theme="dark"] .pm-stat__value { color: #e0e0e8 !important; } [data-theme="dark"] .pm-stat__label { color: #9e9ea8 !important; } [data-theme="dark"] .pm-stat--alert .pm-stat__value { color: #f08898 !important; } [data-theme="dark"] .pm-stat__icon--navy { background: rgba(39, 53, 102, 0.25) !important; color: #80a8e0 !important; } [data-theme="dark"] .pm-stat__icon--red { background: rgba(227, 24, 55, 0.2) !important; color: #f08898 !important; } /* =========================================== * PM SECTION HEADERS & BODIES (projects.css) * =========================================== */ [data-theme="dark"] .pm-section-body { background: #22222a !important; border-color: #3a3a40 !important; box-shadow: none !important; } [data-theme="dark"] .pm-section-body table thead th { background: rgba(39, 53, 102, 0.2) !important; color: #a0b8e0 !important; border-bottom-color: rgba(39, 53, 102, 0.3) !important; } [data-theme="dark"] .pm-section-body table tbody tr { border-bottom-color: #3a3a40; } [data-theme="dark"] .pm-section-body table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); } [data-theme="dark"] .pm-section-body table tbody tr:hover { background: rgba(39, 53, 102, 0.15); } /* =========================================== * PM TASK ROWS (projects.css) * =========================================== */ [data-theme="dark"] .pm-task { background: #252529 !important; border-bottom-color: #3a3a40 !important; } [data-theme="dark"] .pm-task:nth-child(even) { background: #2a2a2e !important; } [data-theme="dark"] .pm-task:hover { background: rgba(39, 53, 102, 0.2) !important; } [data-theme="dark"] .pm-task__title { color: #c0d0e8 !important; } [data-theme="dark"] .pm-task__meta { color: #8a8a95 !important; } [data-theme="dark"] .pm-task__due--upcoming { color: #80a8e0 !important; } [data-theme="dark"] .pm-task__due--today { color: #f0c060 !important; } [data-theme="dark"] .pm-task-wrapper { background: #252529 !important; border-bottom-color: #3a3a40 !important; } [data-theme="dark"] .pm-task-wrapper:nth-child(even) { background: #2a2a2e !important; } [data-theme="dark"] .pm-task-wrapper:hover { background: rgba(39, 53, 102, 0.2) !important; } [data-theme="dark"] .pm-task__copy-link { color: rgba(128, 168, 224, 0.4); } [data-theme="dark"] .pm-task__copy-link:hover { color: #80a8e0; } /* =========================================== * PM PROJECT CARDS (projects.css) * =========================================== */ [data-theme="dark"] .pm-project-card { background: #252529 !important; border-color: #3a3a40 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important; } [data-theme="dark"] .pm-project-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important; } [data-theme="dark"] .pm-project-card__title { color: #c0d0e8 !important; } [data-theme="dark"] .pm-project-card__footer { background: #22222a !important; border-top-color: #3a3a40 !important; color: #8a8a95 !important; } /* =========================================== * PM KANBAN BOARD (projects.css) * =========================================== */ [data-theme="dark"] .pm-kanban-col { background: #22222a !important; border-color: #3a3a40 !important; } [data-theme="dark"] .pm-kanban-card { background: #2a2a32 !important; border-color: #3a3a40 !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important; } [data-theme="dark"] .pm-kanban-card:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important; } /* =========================================== * PM EMPTY STATES (projects.css) * =========================================== */ [data-theme="dark"] .pm-empty { background: #22222a !important; } [data-theme="dark"] .pm-empty__icon { color: rgba(128, 168, 224, 0.3) !important; } [data-theme="dark"] .pm-empty__title { color: #9e9ea8 !important; } [data-theme="dark"] .pm-empty__text { color: #6c6c78 !important; } /* =========================================== * PM FILTER BAR (projects.css) * =========================================== */ [data-theme="dark"] .pm-filter-bar { background: #22222a !important; border-color: #3a3a40 !important; } /* =========================================== * PM PROGRESS BARS (projects.css) * =========================================== */ [data-theme="dark"] .pm-progress { background: #3a3a40 !important; } /* =========================================== * PM ACTIVITY TIMELINE (projects.css) * =========================================== */ [data-theme="dark"] .pm-activity::before { background: rgba(128, 168, 224, 0.2) !important; } [data-theme="dark"] .pm-activity__item { border-bottom-color: #3a3a40 !important; color: #c0c8d8; } [data-theme="dark"] .pm-activity__item::before { background: #3a5090 !important; border-color: #252529 !important; box-shadow: 0 0 0 2px rgba(39, 53, 102, 0.3) !important; } [data-theme="dark"] .pm-activity__time { color: #6c6c78 !important; } /* =========================================== * PM STATUS & PRIORITY BADGES (projects.css) * =========================================== */ [data-theme="dark"] .pm-status--todo { background: rgba(39, 53, 102, 0.2) !important; color: #80a8e0 !important; } [data-theme="dark"] .pm-status--on_hold { background: rgba(217, 119, 6, 0.2) !important; color: #f0c060 !important; border-color: rgba(217, 119, 6, 0.3) !important; } [data-theme="dark"] .pm-status--in_review { background: rgba(39, 53, 102, 0.25) !important; color: #a0b8e0 !important; border-color: rgba(39, 53, 102, 0.4) !important; } [data-theme="dark"] .pm-status--done { background: rgba(26, 92, 46, 0.2) !important; color: #60c080 !important; border-color: rgba(26, 92, 46, 0.35) !important; } [data-theme="dark"] .pm-priority--medium { background: rgba(39, 53, 102, 0.2) !important; color: #80a8e0 !important; border-color: rgba(39, 53, 102, 0.35) !important; } [data-theme="dark"] .pm-priority--low { background: rgba(108, 117, 125, 0.2) !important; color: #9e9ea8 !important; border-color: rgba(108, 117, 125, 0.3) !important; } /* =========================================== * PM CATEGORY BADGES (projects.css) * =========================================== */ [data-theme="dark"] .pm-category--media, [data-theme="dark"] .pm-category--social_media, [data-theme="dark"] .pm-category--web_content, [data-theme="dark"] .pm-category--field_ops, [data-theme="dark"] .pm-category--events, [data-theme="dark"] .pm-category--research { background: rgba(39, 53, 102, 0.2) !important; color: #80a8e0 !important; } [data-theme="dark"] .pm-category--legislative, [data-theme="dark"] .pm-category--fundraising { background: rgba(227, 24, 55, 0.15) !important; color: #f08898 !important; } [data-theme="dark"] .pm-category--internal { background: rgba(108, 117, 125, 0.2) !important; color: #9e9ea8 !important; } /* =========================================== * PM SAVED FILTERS & CHECKLIST (projects.css) * =========================================== */ [data-theme="dark"] .pm-saved-filter-btn { background: rgba(39, 53, 102, 0.2) !important; color: #80a8e0 !important; border-color: rgba(39, 53, 102, 0.3) !important; } [data-theme="dark"] .pm-saved-filter-btn:hover { background: rgba(39, 53, 102, 0.3) !important; } [data-theme="dark"] .pm-checklist-progress { color: #8a8a95 !important; } [data-theme="dark"] .pm-checklist-progress__bar { background: #3a3a40 !important; } /* =========================================== * PM BULK ACTION BAR (projects.css) * Already uses navy gradient — just darken for contrast * =========================================== */ [data-theme="dark"] .pm-bulk-bar { box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4) !important; } /* =========================================== * PM AVATAR (projects.css) — white border → dark * =========================================== */ [data-theme="dark"] .pm-avatar { border-color: #252529 !important; } [data-theme="dark"] .pm-avatar-img { border-color: #252529 !important; } /* =========================================== * PM DIVIDERS (projects.css) * =========================================== */ [data-theme="dark"] .pm-divider { border-top-color: #3a3a40 !important; } [data-theme="dark"] .pm-divider--bold { border-top-color: #4a5a8a !important; } /* =========================================== * TARGETING PAGE (targeting.css) * =========================================== */ [data-theme="dark"] .targeting-filters { background: #22222a !important; border-color: #3a3a40 !important; } [data-theme="dark"] .targeting-donors { background: #252529 !important; } [data-theme="dark"] .donor-row:nth-child(odd) { background: #252529 !important; } [data-theme="dark"] .donor-row:nth-child(even) { background: #2a2a2e !important; } [data-theme="dark"] .action-widget { background: #252529 !important; border-color: #3a3a40 !important; } /* =========================================== * CONTACTS PAGE (contacts.css) * =========================================== */ [data-theme="dark"] .cc-type-badge-sm { background-color: #2c2c32 !important; } [data-theme="dark"] .cc-timeline-content { background-color: #2a2a32 !important; } /* =========================================== * TABLES — thead/tfoot gradients (tables.css) * =========================================== */ [data-theme="dark"] .table > thead > tr > th { background: rgba(39, 53, 102, 0.2) !important; color: #a0b8e0 !important; } [data-theme="dark"] .table > tfoot > tr > td { background: rgba(39, 53, 102, 0.15) !important; color: #a0b8e0 !important; } [data-theme="dark"] .table-loading::after { background: rgba(30, 30, 34, 0.8) !important; } /* =========================================== * PAGE-STYLES — filter cards, stat-card-tcc base * =========================================== */ [data-theme="dark"] .stat-card-tcc { border-color: #3a3a40 !important; } [data-theme="dark"] .stat-card-tcc__value { color: #e0e0e8 !important; } [data-theme="dark"] .stat-card-tcc__label { color: #9e9ea8 !important; } [data-theme="dark"] .filter-card-tcc { background: #252529 !important; border-color: #3a3a40 !important; } /* =========================================== * PAGE-STYLES — TCC table header text * =========================================== */ [data-theme="dark"] .tcc-table__header th { color: #a0b8e0 !important; } /* =========================================== * BADGE — navy-light text color in dark mode * =========================================== */ [data-theme="dark"] .badge--navy-light { color: #80a8e0 !important; } [data-theme="dark"] .badge--red-light { color: #f08898 !important; } /* =========================================== * HOME PAGE — inline style overrides for * project names and meta text in PM dashboard * =========================================== */ [data-theme="dark"] .home-main [style*="color: #273566"] { color: #c0d0e8 !important; } [data-theme="dark"] .home-main [style*="color: #6c757d"] { color: #8a8a95 !important; } [data-theme="dark"] .home-main .progress { background: rgba(39, 53, 102, 0.15) !important; } /* =========================================== * PAGE HEADER BANNER — .btn-light inside banners * =========================================== */ [data-theme="dark"] .page-header-banner .btn-light { background: rgba(255, 255, 255, 0.15) !important; color: white !important; border-color: rgba(255, 255, 255, 0.25) !important; } [data-theme="dark"] .page-header-banner .btn-light:hover { background: rgba(255, 255, 255, 0.25) !important; } /* =========================================== * ADMIN SECTION (dashboard.css) * =========================================== */ [data-theme="dark"] .admin-section__header { color: #9e9ea8 !important; border-bottom-color: #3a3a40 !important; } /* =========================================== * TEMPLATE-LEVEL STYLES — Classes defined in * inline