/* App theme — light & dark via data-bs-theme on */ :root, [data-bs-theme="light"] { --app-body-bg: #f8f9fa; --app-surface: #ffffff; --app-surface-elevated: #fcfdfe; --app-surface-muted: #f8fafc; --app-surface-subtle: #fafbfc; --app-border: rgba(0, 0, 0, 0.06); --app-border-strong: rgba(0, 0, 0, 0.08); --app-border-chip: rgba(0, 0, 0, 0.1); --app-text-strong: #343a40; --app-text-body: #495057; --app-text-muted: #6c757d; --app-text-subtle: #8c98a4; --app-accent: #6ea8fe; --app-accent-text: #3d6db3; --app-accent-icon: #5a8fd6; --app-hover-bg: rgba(158, 197, 254, 0.14); --app-active-bg: rgba(158, 197, 254, 0.28); --app-chip-bg: #f8f9fa; --app-chip-active-border: rgba(110, 168, 254, 0.55); --app-chip-active-bg: rgba(158, 197, 254, 0.22); --app-chip-active-text: #5a8fd6; --app-range-active-border: rgba(117, 183, 152, 0.55); --app-range-active-bg: rgba(163, 207, 187, 0.28); --app-range-active-text: #5a9a78; --app-backdrop: rgba(15, 23, 42, 0.25); --app-shadow: rgba(15, 23, 42, 0.06); --app-shadow-mobile: rgba(15, 23, 42, 0.12); --app-gradient-start: #ffffff; --app-gradient-end: #f8fafc; --app-timeline-line: rgba(0, 0, 0, 0.08); --app-timeline-dot-border: #ffffff; --app-chart-grid: rgba(0, 0, 0, 0.04); --app-chart-label: #343a40; --app-chart-legend: #495057; } [data-bs-theme="dark"] { color-scheme: dark; --app-body-bg: #0f1419; --app-surface: #1a1f26; --app-surface-elevated: #1e242d; --app-surface-muted: #171c23; --app-surface-subtle: #151a20; --app-border: rgba(255, 255, 255, 0.08); --app-border-strong: rgba(255, 255, 255, 0.12); --app-border-chip: rgba(255, 255, 255, 0.14); --app-text-strong: #e8edf2; --app-text-body: #c8d0d9; --app-text-muted: #9aa5b1; --app-text-subtle: #7a8794; --app-accent: #6ea8fe; --app-accent-text: #9ec5fe; --app-accent-icon: #8bb9fe; --app-hover-bg: rgba(110, 168, 254, 0.12); --app-active-bg: rgba(110, 168, 254, 0.22); --app-chip-bg: #232a33; --app-chip-active-border: rgba(110, 168, 254, 0.45); --app-chip-active-bg: rgba(110, 168, 254, 0.18); --app-chip-active-text: #9ec5fe; --app-range-active-border: rgba(117, 183, 152, 0.45); --app-range-active-bg: rgba(117, 183, 152, 0.18); --app-range-active-text: #a3cfbb; --app-backdrop: rgba(0, 0, 0, 0.55); --app-shadow: rgba(0, 0, 0, 0.35); --app-shadow-mobile: rgba(0, 0, 0, 0.45); --app-gradient-start: #1e242d; --app-gradient-end: #171c23; --app-timeline-line: rgba(255, 255, 255, 0.1); --app-timeline-dot-border: #1a1f26; --app-chart-grid: rgba(255, 255, 255, 0.08); --app-chart-label: #e8edf2; --app-chart-legend: #c8d0d9; } body.app-body, body.guest-layout { background-color: var(--app-body-bg) !important; color: var(--bs-body-color); } .app-footer { background-color: var(--app-surface) !important; border-color: var(--app-border) !important; } /* Theme toggle */ .theme-toggle { display: flex; align-items: center; justify-content: center; gap: 0.35rem; width: 100%; font-size: 0.72rem; padding: 0.32rem 0.5rem; margin-bottom: 0.4rem; border: 1px solid var(--app-border); border-radius: 0.375rem; background: var(--app-surface); color: var(--app-text-body); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .theme-toggle:hover { background: var(--app-hover-bg); color: var(--app-text-strong); border-color: var(--app-border-strong); } .theme-toggle i { font-size: 0.85rem; color: var(--app-accent); } .theme-toggle-guest { position: fixed; top: 0.75rem; right: 0.75rem; width: auto; margin: 0; z-index: 1050; } .theme-toggle .theme-toggle-label-light, .theme-toggle .theme-toggle-label-dark { font-weight: 500; } [data-bs-theme="light"] .theme-toggle .theme-toggle-label-dark, [data-bs-theme="dark"] .theme-toggle .theme-toggle-label-light { display: none; } [data-bs-theme="light"] .theme-toggle .theme-toggle-icon-light, [data-bs-theme="dark"] .theme-toggle .theme-toggle-icon-dark { display: none !important; }