/* ===================================================================== THEME.CSS — centralized fintech design-token system ===================================================================== One file, loaded on every page, that re-themes every Bootstrap component (card, table, btn, form-control, navbar, badge, modal, alert, pagination, dropdown) via CSS custom properties rather than duplicating colors across dozens of view files. Dark is the default theme (data-bs-theme="dark" on ); light mode is preserved and redesigned to stay visually consistent with the same palette. ===================================================================== */ /* ---- Design tokens ---- */ :root, [data-bs-theme="light"] { --fx-bg-primary: #FFFFFF; --fx-bg-secondary: #F7F7F8; --fx-surface: #FFFFFF; --fx-surface-hover: #F2F2F3; --fx-card: #FFFFFF; --fx-card-hover: #FAFAFA; --fx-border: #E3E3E5; --fx-input-bg: #FFFFFF; --fx-text-primary: #111111; --fx-text-secondary: #5B5B60; --fx-text-muted: #8A8A8F; --fx-accent: #2563EB; /* accent CTA — professional blue, the "one accent color" for important actions */ --fx-accent-hover: #1D4ED8; --fx-success: #16A34A; --fx-warning: #D97706; --fx-danger: #DC2626; --fx-info: #2563EB; } [data-bs-theme="dark"] { --fx-bg-primary: #000000; --fx-bg-secondary: #0A0A0A; --fx-surface: #111111; --fx-surface-hover: #1F1F1F; --fx-card: #171717; --fx-card-hover: #1F1F1F; --fx-border: #2A2A2A; --fx-input-bg: #0D0D0D; --fx-text-primary: #FFFFFF; --fx-text-secondary: #A3A3A3; --fx-text-muted: #737373; --fx-accent: #3B82F6; /* accent CTA — matches the Info token, doubles as the primary action color */ --fx-accent-hover: #60A5FA; --fx-success: #22C55E; --fx-warning: #F59E0B; --fx-danger: #EF4444; --fx-info: #3B82F6; } /* ---- Base ---- */ html, body { background-color: var(--fx-bg-secondary); color: var(--fx-text-primary); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* Financial figures: tabular numerals so amounts align column-to-column, and a touch of weight so totals read as totals. */ .fx-figure, .fw-bold, .fs-3, .fs-4, .fs-5, td.text-end, th.text-end { font-variant-numeric: tabular-nums; } a { color: var(--fx-accent); } a:hover { color: var(--fx-accent-hover); } /* Visible keyboard focus everywhere — accessibility requirement, not optional */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .form-control:focus-visible, .btn:focus-visible { outline: 2px solid var(--fx-accent); outline-offset: 2px; } /* ---- Bootstrap variable overrides (re-themes cards/tables/forms/etc. automatically) ---- */ [data-bs-theme="dark"] { --bs-body-bg: var(--fx-bg-secondary); --bs-body-color: var(--fx-text-primary); --bs-secondary-color: var(--fx-text-secondary); --bs-tertiary-color: var(--fx-text-muted); --bs-border-color: var(--fx-border); --bs-tertiary-bg: var(--fx-surface); --bs-secondary-bg: var(--fx-surface-hover); --bs-card-bg: var(--fx-card); --bs-card-border-color: var(--fx-border); --bs-card-cap-bg: var(--fx-surface); --bs-table-bg: transparent; --bs-table-color: var(--fx-text-primary); --bs-table-border-color: var(--fx-border); --bs-table-striped-bg: var(--fx-surface); --bs-table-hover-bg: var(--fx-card-hover); --bs-primary: var(--fx-accent); --bs-primary-rgb: 59, 130, 246; --bs-success: var(--fx-success); --bs-warning: var(--fx-warning); --bs-danger: var(--fx-danger); --bs-info: var(--fx-info); --bs-modal-bg: var(--fx-card); --bs-modal-border-color: var(--fx-border); --bs-dropdown-bg: var(--fx-card); --bs-dropdown-border-color: var(--fx-border); --bs-dropdown-link-color: var(--fx-text-primary); --bs-dropdown-link-hover-bg: var(--fx-surface-hover); --bs-form-control-bg: var(--fx-input-bg); --bs-emphasis-color: var(--fx-text-primary); } [data-bs-theme="light"] { --bs-body-bg: var(--fx-bg-secondary); --bs-body-color: var(--fx-text-primary); --bs-border-color: var(--fx-border); --bs-card-bg: var(--fx-card); --bs-card-border-color: var(--fx-border); --bs-primary: var(--fx-accent); --bs-primary-rgb: 37, 99, 235; --bs-success: var(--fx-success); --bs-warning: var(--fx-warning); --bs-danger: var(--fx-danger); --bs-info: var(--fx-info); } /* ---- Cards ---- */ .card { border-radius: 14px; border: 1px solid var(--bs-card-border-color); background-color: var(--bs-card-bg); box-shadow: none; transition: border-color .15s ease, background-color .15s ease; } .card:hover { border-color: var(--fx-text-muted); } [data-bs-theme="dark"] .card.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.4) !important; } /* ---- Inputs ---- */ .form-control, .form-select { background-color: var(--fx-input-bg); border: 1px solid var(--fx-border); color: var(--fx-text-primary); border-radius: 8px; } .form-control:focus, .form-select:focus { background-color: var(--fx-input-bg); color: var(--fx-text-primary); border-color: var(--fx-accent); box-shadow: 0 0 0 .2rem rgba(59,130,246,.25); } .form-control::placeholder { color: var(--fx-text-muted); opacity: 1; } .form-control:disabled, .form-select:disabled { opacity: .55; } .form-label { color: var(--fx-text-secondary); font-weight: 500; } /* ---- Buttons ---- */ .btn { border-radius: 8px; font-weight: 500; transition: background-color .15s ease, border-color .15s ease, transform .05s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background-color: var(--fx-accent); border-color: var(--fx-accent); } .btn-primary:hover { background-color: var(--fx-accent-hover); border-color: var(--fx-accent-hover); } .btn-outline-secondary { color: var(--fx-text-secondary); border-color: var(--fx-border); } .btn-outline-secondary:hover { background-color: var(--fx-surface-hover); color: var(--fx-text-primary); border-color: var(--fx-border); } .btn:disabled { opacity: .45; } /* ---- Tables ---- */ .table { --bs-table-color: var(--fx-text-primary); } .table thead th { background-color: var(--fx-surface); color: var(--fx-text-secondary); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; border-bottom: 1px solid var(--fx-border); } .table td, .table th { border-color: var(--fx-border); vertical-align: middle; } .table-hover tbody tr:hover { background-color: var(--fx-card-hover); } /* ---- Badges (status indicators — never color-only, text label always present) ---- */ .badge { font-weight: 600; letter-spacing: .01em; border-radius: 6px; } /* ---- Navbar / Sidebar ---- */ .navbar { background-color: var(--fx-bg-primary) !important; border-bottom: 1px solid var(--fx-border); } .navbar-brand, .nav-link { color: var(--fx-text-primary) !important; } .nav-link:hover { color: var(--fx-accent) !important; } .admin-sidebar { background-color: var(--fx-bg-primary) !important; border-color: var(--fx-border) !important; } .admin-sidebar .nav-link.active { background: var(--fx-accent); color: #fff !important; } /* ---- Alerts ---- */ .alert { border-radius: 10px; border-width: 1px; } /* ---- Modals ---- */ .modal-content { background-color: var(--fx-card); border: 1px solid var(--fx-border); border-radius: 14px; } /* ---- Pagination ---- */ .page-link { background-color: var(--fx-card); border-color: var(--fx-border); color: var(--fx-text-primary); } .page-item.active .page-link { background-color: var(--fx-accent); border-color: var(--fx-accent); } .page-link:hover { background-color: var(--fx-surface-hover); color: var(--fx-text-primary); } /* ---- Progress bars ---- */ .progress { background-color: var(--fx-surface); } /* ---- Motion: respect prefers-reduced-motion ---- */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* Subtle, deliberate transitions only — no large animated backgrounds, no glow */ .card, .btn, .nav-link, .form-control, .form-select { will-change: auto; } /* ---- Print: financial documents (quotations/receipts) always print as clean white documents, regardless of the app's active theme ---- */ @media print { html, body { background: #fff !important; color: #000 !important; } .navbar, .admin-sidebar, nav { display: none !important; } }