/* Jarvis theme — light-mode overrides. * * Pages declare their default (dark) CSS variables in :root. This file * overrides those variables when the user's preference resolves to light * mode (set via data-theme="light" on by theme.js). * * The variable names match what every page already uses: * --bg-primary, --bg-card, --bg-card-hover, --bg-input * --border, --border-hover * --text-primary, --text-secondary, --text-muted * --accent * * Pages with custom non-variable styling (home, login) handle light * mode with their own [data-theme="light"] rules in-page. */ html[data-theme="light"] { --bg-primary: #f8fafc; /* slate-50 — near-white page background */ --bg-card: #ffffff; /* pure white card */ --bg-card-hover: #f1f5f9; /* slate-100 hover */ --bg-input: #ffffff; /* white input bg */ --border: #e2e8f0; /* slate-200 */ --border-hover: #cbd5e1; /* slate-300 */ --text-primary: #0f172a; /* slate-900 — ~17:1 contrast on white */ --text-secondary:#334155; /* slate-700 — ~10:1 contrast (was 600, slightly bumped) */ --text-muted: #64748b; /* slate-500 — ~4.5:1 (slate-400 was 2.5:1, failed AA) */ --accent: rgba(180,30,20,0.85); --income: #059669; /* emerald-600 */ --good: #059669; --warn: #B45309; } /* Body background tracks the primary background regardless of which * page-specific rules might exist. Some pages set `background:` on * body directly with a hex color; the rule below uses the variable so * it follows theme changes. */ html[data-theme="light"] body { background: var(--bg-primary); color: var(--text-primary); } /* Toggle button styling — shared across every page. */ .theme-toggle { position: fixed; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-card, #0a0a12); border: 1px solid var(--border, #1e1e2a); color: var(--text-secondary, #a0a0b4); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1000; transition: background 0.15s, border-color 0.15s, color 0.15s; padding: 0; font-family: inherit; font-size: 0; /* hides any stray label text */ } .theme-toggle:hover { background: var(--bg-card-hover, #12121e); border-color: var(--border-hover, #2a2a3a); color: var(--text-primary, #e2e8f0); } .theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .icon-dark { display: none; } .theme-toggle .icon-light { display: block; } html[data-theme="light"] .theme-toggle .icon-dark { display: block; } html[data-theme="light"] .theme-toggle .icon-light { display: none; } /* Cross-page section nav — used at the top of every /expenses/* page. * Visually distinct from in-page tabs (.view-tabs / .tabs) which * switch panels within a single page. */ .page-nav { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border, #1e1e2a); } .page-nav a { color: var(--text-muted, #6a6a80); text-decoration: none; transition: color 0.15s; } .page-nav a:hover { color: var(--accent, rgba(200,40,30,0.7)); } .page-nav a.active { color: var(--text-primary, #e2e8f0); font-weight: 500; } .page-nav .home { margin-left: auto; } /* =========================================================================== * Consistent top navigation bar — injected on every page by theme.js. * Uses its own --jn-* colors (not the page :root vars, which drift slightly * between pages) so the bar looks identical everywhere, in both themes. * ======================================================================== */ .jarvis-nav { --jn-bg: #0a0a12; --jn-border: #1e1e2a; --jn-fg: #b8b8c8; --jn-fg-strong: #f0f0f5; --jn-accent: rgb(214, 64, 48); position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 9px 16px; background: var(--jn-bg); border-bottom: 1px solid var(--jn-border); font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 0.82rem; } html[data-theme="light"] .jarvis-nav { --jn-bg: #ffffff; --jn-border: #e2e8f0; --jn-fg: #475569; --jn-fg-strong: #0f172a; --jn-accent: rgb(180, 40, 30); box-shadow: 0 1px 0 rgba(0,0,0,0.02); } .jn-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--jn-fg-strong); font-weight: 600; letter-spacing: -0.2px; flex-shrink: 0; } .jn-orb { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,120,80,0.5) 0%, transparent 55%), radial-gradient(circle at 50% 50%, rgba(200,30,20,0.95) 0%, rgba(120,15,10,0.9) 55%, rgba(40,5,5,0.95) 100%); box-shadow: 0 0 8px rgba(200,40,30,0.4); flex-shrink: 0; } .jn-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .jn-links a { color: var(--jn-fg); text-decoration: none; padding: 5px 9px; border-radius: 7px; transition: color 0.15s, background 0.15s; white-space: nowrap; } .jn-links a:hover { color: var(--jn-fg-strong); background: rgba(127,127,140,0.12); } .jn-links a.active { color: #fff; background: var(--jn-accent); } html[data-theme="light"] .jn-links a.active { color: #fff; } .jn-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .jn-user { color: var(--jn-fg); font-size: 0.78rem; } .jn-auth { color: var(--jn-fg); text-decoration: none; font-size: 0.78rem; } .jn-auth:hover { color: var(--jn-fg-strong); } .jn-burger { display: none; background: none; border: none; cursor: pointer; color: var(--jn-fg-strong); font-size: 1.2rem; padding: 2px 6px; line-height: 1; margin-left: auto; } /* In the nav, the theme toggle sits inline instead of fixed top-right. */ .jarvis-nav .theme-toggle { position: static; top: auto; right: auto; width: 30px; height: 30px; z-index: auto; background: transparent; border-color: var(--jn-border); color: var(--jn-fg); } .jarvis-nav .theme-toggle svg { width: 15px; height: 15px; } /* Responsive — collapse links behind the hamburger. */ @media (max-width: 820px) { .jn-burger { display: block; } .jn-right { margin-left: 0; } .jn-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--jn-bg); border-bottom: 1px solid var(--jn-border); padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,0.3); } .jn-links.open { display: flex; } .jn-links a { padding: 11px 12px; border-radius: 8px; } } /* The per-page user bar is replaced by the nav bar's name/logout. */ .user-bar { display: none !important; } /* Light-mode header gradient — applies to every page with a .header (was * previously fixed only on a few pages inline). */ html[data-theme="light"] .header { background: linear-gradient(180deg, #eef2f7 0%, var(--bg-primary) 100%); } /* =========================================================================== * Shared mobile rules (~phones). Centralized here because .modal / .header / * .container are consistent classes across pages, so one block fixes them all. * Everything stays inside the query so desktop is untouched. * ======================================================================== */ @media (max-width: 600px) { /* Catch-all: no horizontal page scroll on phones. The decorative * `.header::before` glow (≈500–600px, absolutely positioned) is wider than * a phone and would otherwise extend the page; data tables scroll inside * their own overflow-x box, not the body, so this doesn't clip them. */ body { overflow-x: hidden; } /* Modals fit the phone — overrides the per-page 480–820px widths (more * specific .modal.wide rules need the !important). */ .modal { width: calc(100vw - 24px) !important; max-width: none !important; margin: 12px auto !important; } /* Reclaim side padding on the shared header + content container. */ .header { padding-left: 16px !important; padding-right: 16px !important; } .container { padding-left: 14px !important; padding-right: 14px !important; } /* The fixed nav: tighten padding so the brand + name + toggle fit. */ .jarvis-nav { padding: 8px 12px; gap: 10px; } }