/* ============================================================ FinTrackGo — Dark Glanceable Theme (Phase 0) Loaded AFTER bootstrap + app.css. Pairs with which flips default Bootstrap components automatically. This file: 1) re-tunes the --fm-* palette + Bootstrap vars for dark 2) re-skins hard-coded light utility classes (bg-white, text-dark, table-light, bg-light) that Bootstrap's dark mode does NOT auto-flip — so 187 templates go dark with zero template edits 3) ships the glanceable component library (metric tiles, cost strip, split bar, status pills, ring, glance rows) consumed by Phase 1+. Design rule: one color = one meaning. green=progress/positive · red=interest/cost/consumer-debt orange=due/warning · teal=productive leverage · purple=advanced ============================================================ */ :root, [data-bs-theme="dark"] { /* Surfaces */ --fm-bg: #0a0a0a; /* near-black app background */ --fm-surface: #161616; /* elevated card */ --fm-surface-2: #1f1f1f; /* tile / nested elevated */ --fm-border: #2a2a2a; /* hairline separators */ --fm-text: #e6e6e6; --fm-muted: #9aa0a6; /* Accents (brightened for dark) */ --fm-accent: #5aa9ff; --fm-accent-hover: #7cbcff; --fm-success: #3ddc84; /* progress / principal / positive */ --fm-warning: #ffa726; /* due / warning */ --fm-danger: #ff5a5f; /* interest / cost / consumer debt */ --fm-leverage: #4dd0e1; /* productive leverage (HELOC funding assets) */ --fm-purple: #b388ff; --fm-purple-light: #c9a8ff; --fm-card-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); --fm-card-radius: 16px; /* Bootstrap 5.3 dark var overrides — drive default components */ --bs-body-bg: var(--fm-bg); --bs-body-color: var(--fm-text); --bs-emphasis-color: #ffffff; --bs-secondary-color: var(--fm-muted); --bs-tertiary-color: var(--fm-muted); --bs-border-color: var(--fm-border); --bs-secondary-bg: var(--fm-surface); --bs-tertiary-bg: var(--fm-surface-2); --bs-link-color-rgb: 90, 169, 255; --bs-link-hover-color-rgb: 124, 188, 255; } html, body { background-color: var(--fm-bg); color-scheme: dark; } body { color: var(--fm-text); } /* --- Navbar: pure dark instead of blue gradient --- */ .navbar { background: #0d0d0d !important; border-bottom: 1px solid var(--fm-border); box-shadow: none; } /* --- Sidebar --- */ .sidebar, .offcanvas-sidebar, .offcanvas { background: #0d0d0d !important; } .sidebar .nav-link, .offcanvas-sidebar .nav-link { color: var(--fm-muted); } .sidebar .nav-link:hover, .sidebar .nav-link.active, .offcanvas-sidebar .nav-link:hover, .offcanvas-sidebar .nav-link.active { color: #fff; background: rgba(90, 169, 255, 0.10); border-left-color: var(--fm-accent); } /* --- Cards --- */ .card { background: var(--fm-surface); border: 1px solid var(--fm-border); box-shadow: var(--fm-card-shadow); } /* ============================================================ COMPATIBILITY LAYER — re-skin hard-coded light utilities (Bootstrap dark mode leaves these at their fixed light values) ============================================================ */ .bg-white, .card-header.bg-white, .bg-body, .bg-body-tertiary { background-color: var(--fm-surface) !important; } .bg-light, .bg-body-secondary { background-color: var(--fm-surface-2) !important; } .text-dark, .text-black, .text-body, .text-body-emphasis { color: var(--fm-text) !important; } .text-muted, .text-secondary { color: var(--fm-muted) !important; } /* But bright SOLID Bootstrap colors (amber/cyan) want DARK text — the global .text-dark override above would otherwise wash them out to near-white. Scope an exception to the explicit pairing (and solid badges); the .bg-*-opacity-10 tints use .text-warning/.text-info instead, so they're untouched. (payoff audit B1 — 206 occurrences app-wide) */ .bg-warning.text-dark, .bg-info.text-dark, .badge.bg-warning, .badge.bg-info { color: #1a1a1a !important; } /* Tables — including the very common .table-light header */ .table { --bs-table-bg: transparent; --bs-table-color: var(--fm-text); color: var(--fm-text); } .table-light, .table-light > th, .table-light > td, .table > thead.table-light th, thead.table-light th { background-color: var(--fm-surface-2) !important; color: var(--fm-muted) !important; border-color: var(--fm-border) !important; } .table th { color: var(--fm-muted); border-bottom-color: var(--fm-border); } .table td, .table th { border-color: var(--fm-border); } .table-hover > tbody > tr:hover > * { background-color: rgba(255,255,255,0.03); } /* Alerts — keep semantic color, but dark-tint so they don't glare on black */ .alert { border-width: 1px; } .alert-info { background: rgba(90,169,255,0.10); color: #bcd9ff; border-color: rgba(90,169,255,0.30); } .alert-primary { background: rgba(90,169,255,0.10); color: #bcd9ff; border-color: rgba(90,169,255,0.30); } .alert-success { background: rgba(61,220,132,0.10); color: #b6f0cf; border-color: rgba(61,220,132,0.30); } .alert-warning { background: rgba(255,167,38,0.10); color: #ffd699; border-color: rgba(255,167,38,0.30); } .alert-danger { background: rgba(255,90,95,0.10); color: #ffc2c4; border-color: rgba(255,90,95,0.30); } /* Form controls / inputs */ .form-control, .form-select, .input-group-text { background-color: var(--fm-surface-2); border-color: var(--fm-border); color: var(--fm-text); } .form-control::placeholder { color: #6b7177; } .form-control:focus, .form-select:focus { background-color: var(--fm-surface-2); color: var(--fm-text); border-color: var(--fm-accent); box-shadow: 0 0 0 0.2rem rgba(90,169,255,0.20); } /* Dropdowns / list groups / modals (belt-and-suspenders over Bootstrap dark) */ .dropdown-menu { background: var(--fm-surface); border-color: var(--fm-border); } .dropdown-item { color: var(--fm-text); } .dropdown-item:hover { background: var(--fm-surface-2); color: #fff; } .list-group-item { background: var(--fm-surface); border-color: var(--fm-border); color: var(--fm-text); } .modal-content { background: var(--fm-surface); border-color: var(--fm-border); } .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--fm-border) !important; } /* Buttons that assume light bg */ .btn-light { background: var(--fm-surface-2); border-color: var(--fm-border); color: var(--fm-text); } .btn-outline-secondary { color: var(--fm-muted); border-color: var(--fm-border); } .btn-outline-secondary:hover { background: var(--fm-surface-2); color: #fff; } /* Semantic text helpers (one color = one meaning) */ .text-leverage { color: var(--fm-leverage) !important; } .bg-leverage { background-color: var(--fm-leverage) !important; } /* ============================================================ GLANCEABLE COMPONENT LIBRARY (consumed by Phase 1+) ============================================================ */ /* 2×N stat grid of metric tiles */ .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 768px) { .stat-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } } .metric-tile { background: var(--fm-surface); border: 1px solid var(--fm-border); border-left: 3px solid var(--fm-muted); border-radius: 14px; padding: 16px 18px; } .metric-tile .mt-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fm-muted); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .metric-tile .mt-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--fm-text); } .metric-tile .mt-sub { font-size: 0.78rem; color: var(--fm-muted); margin-top: 2px; } .metric-tile.tile-green { border-left-color: var(--fm-success); } .metric-tile.tile-red { border-left-color: var(--fm-danger); } .metric-tile.tile-orange { border-left-color: var(--fm-warning); } .metric-tile.tile-blue { border-left-color: var(--fm-accent); } .metric-tile.tile-teal { border-left-color: var(--fm-leverage); } .metric-tile.tile-purple { border-left-color: var(--fm-purple); } .metric-tile.tile-red .mt-value { color: var(--fm-danger); } .metric-tile.tile-green .mt-value { color: var(--fm-success); } .metric-tile.tile-teal .mt-value { color: var(--fm-leverage); } /* Cost-of-debt strip — today / month / year columns */ .cost-strip { display: flex; gap: 0; border-radius: 14px; overflow: hidden; background: var(--fm-surface); border: 1px solid var(--fm-border); } .cost-strip .cs-col { flex: 1; padding: 14px 12px; text-align: center; } .cost-strip .cs-col + .cs-col { border-left: 1px solid var(--fm-border); } .cost-strip .cs-label { font-size: 0.7rem; text-transform: uppercase; color: var(--fm-muted); letter-spacing: 0.04em; } .cost-strip .cs-value { font-size: 1.2rem; font-weight: 700; margin-top: 2px; } .cost-strip .cs-today { color: var(--fm-warning); } .cost-strip .cs-month { color: var(--fm-danger); } .cost-strip .cs-year { color: var(--fm-purple); } /* Principal-vs-interest split bar */ .split-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--fm-surface-2); } .split-bar .sb-principal { background: var(--fm-success); } .split-bar .sb-interest { background: var(--fm-danger); } .split-legend { display: flex; justify-content: space-between; font-size: 0.78rem; margin-top: 6px; color: var(--fm-muted); } .split-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; } /* Status pills */ .status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; } .pill-due { background: rgba(255,167,38,0.15); color: var(--fm-warning); } .pill-focus { background: rgba(61,220,132,0.15); color: var(--fm-success); } .pill-lev { background: rgba(77,208,225,0.15); color: var(--fm-leverage); } .pill-cons { background: rgba(255,90,95,0.15); color: var(--fm-danger); } /* Progress ring (conic-gradient) */ .ring { --pct: 0; --ring-color: var(--fm-success); width: 96px; height: 96px; border-radius: 50%; background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--fm-surface-2) 0); display: flex; align-items: center; justify-content: center; } .ring .ring-inner { width: 76px; height: 76px; border-radius: 50%; background: var(--fm-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; } .ring .ring-pct { font-size: 1.1rem; font-weight: 700; color: var(--fm-text); } .ring .ring-cap { font-size: 0.6rem; text-transform: uppercase; color: var(--fm-muted); } /* Glance rows (debt/payment list rows) */ .glance-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--fm-border); } .glance-row:last-child { border-bottom: none; } .glance-row .gr-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--fm-surface-2); color: var(--fm-muted); flex: 0 0 auto; } .glance-row .gr-body { flex: 1; min-width: 0; } .glance-row .gr-name { font-weight: 600; color: var(--fm-text); } .glance-row .gr-sub { font-size: 0.76rem; color: var(--fm-muted); } .glance-row .gr-amount { font-weight: 700; text-align: right; white-space: nowrap; } /* Mobile bottom tab bar (Phase 4) */ .bottom-tab-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040; display: flex; background: #0d0d0d; border-top: 1px solid var(--fm-border); padding-bottom: env(safe-area-inset-bottom, 0); } .bottom-tab-bar .btab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 6px; font-size: 0.62rem; color: var(--fm-muted); text-decoration: none; background: none; border: none; } .bottom-tab-bar .btab i { font-size: 1.2rem; line-height: 1; } .bottom-tab-bar .btab.active { color: var(--fm-success); } .bottom-tab-bar .btab:active { opacity: 0.7; } @media (max-width: 767.98px) { body { padding-bottom: 60px; } /* lift the floating action buttons above the tab bar */ .fab-receipt { bottom: 76px !important; } .fab-chat { bottom: 148px !important; } }