/* ========================================================= BudgetOne – Dark mode overrides Applied when [data-bs-theme="dark"] is set on . Bootstrap 5.3 handles its own components automatically. This file covers custom components with hardcoded colours. Colours are hardcoded (not var(--bs-*)) so overrides work even when the browser serves a cached pre-5.3 Bootstrap that has no dark-mode CSS variable support. Bootstrap 5.3 dark-mode reference values used here: body bg: #212529 body text: #dee2e6 card bg: #343a40 tertiary bg: #2b3035 muted text: rgba(222,226,230,0.75) border: rgba(255,255,255,0.15) ========================================================= */ /* ── Safety net: body + Bootstrap .card for pre-5.3 cache ── */ [data-bs-theme="dark"] body { background-color: #212529; color: #dee2e6; } /* Card background — only the root card element; card-header retains its brand #060F14 via higher-specificity gadget CSS. */ [data-bs-theme="dark"] .card { background-color: #343a40; color: #dee2e6; border-color: rgba(255, 255, 255, 0.125); } /* ── Budget modal form chrome ───────────────────────────── */ [data-bs-theme="dark"] .budget-modal .form-label { color: #dee2e6; } [data-bs-theme="dark"] .budget-modal .form-text { color: rgba(222, 226, 230, 0.75); } [data-bs-theme="dark"] .budget-modal .input-group-text, [data-bs-theme="dark"] .budget-modal-body .input-group:focus-within .input-group-text { background: #2b3035; color: rgba(222, 226, 230, 0.75); } [data-bs-theme="dark"] .budget-modal .nav-tabs, [data-bs-theme="dark"] .budget-modal-body .nav-tabs { border-bottom-color: rgba(255, 255, 255, 0.15); } /* Active tab text was #060F14 (invisible on a dark body) */ [data-bs-theme="dark"] .budget-modal .nav-tabs .nav-link.active, [data-bs-theme="dark"] .budget-modal-body .nav-tabs .nav-link.active { color: #dee2e6; } /* ── Budget item history rows ────────────────────────────── */ [data-bs-theme="dark"] .history-gap-row { background: rgba(196, 168, 53, 0.12); } [data-bs-theme="dark"] .history-current-period { background: rgba(92, 108, 196, 0.12); } /* ── Overview gadget: surplus / deficit / tight cards ─────── */ [data-bs-theme="dark"] [data-role="surplusDeficitCard"].surplus { border-color: #3d7a5c !important; background-color: rgba(82, 148, 106, 0.18) !important; } [data-bs-theme="dark"] [data-role="surplusDeficitCard"].surplus .overview-sd-amount { color: #5CE8C0 !important; } [data-bs-theme="dark"] [data-role="surplusDeficitCard"].deficit { border-color: #8a4040 !important; background-color: rgba(176, 100, 100, 0.18) !important; } [data-bs-theme="dark"] [data-role="surplusDeficitCard"].deficit .overview-sd-amount { color: #ff8a8a !important; } [data-bs-theme="dark"] [data-role="surplusDeficitCard"].tight { border-color: #8a6a20 !important; background-color: rgba(200, 150, 42, 0.18) !important; } [data-bs-theme="dark"] [data-role="surplusDeficitCard"].tight .overview-sd-amount { color: #e6b84a !important; } /* ── Surplus / deficit text colours used on budget cards ─── */ [data-bs-theme="dark"] .bc-sd-surplus { color: #5CE8C0; } [data-bs-theme="dark"] .bc-sd-deficit { color: #ff8a8a; } /* ── Transactions grid row highlights ───────────────────── */ [data-bs-theme="dark"] .e-grid .row-income td { background-color: rgba(25, 135, 84, 0.2) !important; } [data-bs-theme="dark"] .e-grid .row-expense td { background-color: rgba(255, 193, 7, 0.15) !important; } /* ── Category breakdown items ────────────────────────────── */ [data-bs-theme="dark"] .category-item.income { background-color: rgba(25, 135, 84, 0.15); } [data-bs-theme="dark"] .category-item.expense { background-color: rgba(253, 126, 20, 0.15); } [data-bs-theme="dark"] .category-item.transfer { background-color: rgba(13, 202, 240, 0.12); } /* ── Budget card (custom component — not a Bootstrap .card) ─ */ [data-bs-theme="dark"] .bc-budget-card { background: var(--bs-card-bg, #2b2f32); border-color: rgba(255, 255, 255, 0.1); } [data-bs-theme="dark"] .bc-budget-card:hover { border-color: rgba(255, 255, 255, 0.22) !important; } [data-bs-theme="dark"] .bc-budget-card__name { color: #dee2e6; } [data-bs-theme="dark"] .bc-budget-card__footer { border-top-color: rgba(255, 255, 255, 0.08); } [data-bs-theme="dark"] .bc-budget-card__archived-stamp span { color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.15); } /* ── Budget carousel dot indicators ─────────────────────── */ [data-bs-theme="dark"] .bc-carousel-dot { background: rgba(255, 255, 255, 0.25); } [data-bs-theme="dark"] .bc-carousel-dot--active { background: #5CE8C0; } /* ── Icon picker in create/edit budget modals ────────────── */ [data-bs-theme="dark"] .bc-icon-option + label { background: #2b3035; color: #dee2e6; } [data-bs-theme="dark"] .bc-icon-option:checked + label { background: rgba(92, 232, 192, 0.15); color: #5CE8C0; } /* ── Q&A gadget breakdown toggle ─────────────────────────── */ [data-bs-theme="dark"] .gadget-budget-qa .qa-breakdown-toggle { color: #5CE8C0; } [data-bs-theme="dark"] .gadget-budget-qa .qa-breakdown-toggle:hover { color: #2EA882; } /* ── Accordion (Mission/Privacy/Terms pages) ─────────────── */ [data-bs-theme="dark"] .bc-accordion .accordion-button, [data-bs-theme="dark"] .bc-accordion .accordion-header button { color: #dee2e6; } /* ── Empty state headings ────────────────────────────────── */ [data-bs-theme="dark"] .bc-empty-state__heading { color: #dee2e6; } /* ── Gadget card border: keep the brand dark border ─────── */ [data-bs-theme="dark"] [class^="gadget-"] > .card { border-color: #0A2530; } /* ── Budget details page — budget items gadget section header backgrounds */ [data-bs-theme="dark"] .big-action-row td { background: rgba(82, 148, 106, 0.15) !important; } /* ── Period history in budget item modal ─────────────────── */ [data-bs-theme="dark"] .history-row-current > td { background-color: rgba(25, 135, 84, 0.15); border-left-color: #198754; } [data-bs-theme="dark"] .history-row-future > td { background-color: rgba(92, 108, 196, 0.1); } [data-bs-theme="dark"] .history-inline-form-row > td { background-color: #2b3035; }