/* Dark mode only, deliberately not prefers-color-scheme-driven — the app used to follow OS theme, but the values below (formerly the dark-mode override block) are now the only theme there is. color-scheme: dark below is what makes browser-native chrome (scrollbars, form controls) render dark instead of defaulting to a white scrollbar against a dark page. */ :root { color-scheme: dark; /* 220px used to be the default, but at that width the widest of the sidebar's import/export/download button labels ("Import simplified budget (.csv)" / "Export simplified budget (.zip)") truncated with an ellipsis while shorter ones on the same list didn't — visually inconsistent (some buttons full text, some cut off) even though every one of them shares the same font-size/weight. Widened instead of shrinking that font size, so every label renders in full at the default width; still user-resizable down to SIDEBAR_MIN_WIDTH via the existing drag handle for anyone who wants it narrower. */ --sidebar-width: 300px; --bg: #16171c; --panel: #1e2028; --border: #2d2f3a; --text: #eaeaef; --text-dim: #9797a3; --accent: #2563eb; --positive: #4ade80; --negative: #f87171; --zero: #7d7d88; /* Net Worth chart's Assets bar only (buildNetWorthTrendChart's assetsColor) — a month whose net worth dropped from the previous month colors that month's Assets bar gold rather than reusing --negative red, which stays reserved for the Debts bar. A red Assets bar would read as "this is bad/wrong" the way an overspent category does, but one down month in a net worth trend is just a cautionary data point, not the same alert. */ --gold: #eab308; --sidebar-bg: #0f1017; --sidebar-text: #c7c9d6; --sidebar-active: #262a3b; } /* Alternate palettes, switchable live via the sidebar's Theme select (setTheme()/applyStoredTheme() in app.js set data-theme on and persist the choice in localStorage). Evaluation options alongside the base palette above, not a replacement for it — this is deliberately a same-dark-mode accent/hue swap, not the light/dark toggle CLAUDE.md already ruled out. Every value in every block below keeps roughly the same lightness as its base-palette counterpart (only the hue shifts), so existing text/background contrast ratios carry over rather than needing a fresh audit. Semantic colors that already mean something specific regardless of theme (--positive/--negative/--gold) are left unchanged in all of them. (An earlier version of "blue" blended toward teal/blue- green — replaced per user request with a purer blue, no green component. A "green" option and an "amber" option each existed for a time — both removed per user request ("did not like that one" / "not good"); don't reintroduce either without being asked again. "purple" was later removed too, per explicit request, and replaced with "sharepoint" below — same removal-is-safe mechanism, see THEME_OPTIONS's own comment in app.js.) */ :root[data-theme="blue"] { --bg: #0f1420; --panel: #172136; --border: #2a3b57; --text-dim: #93a3bd; --accent: #3b82f6; --zero: #7d8798; --sidebar-bg: #0a0f1c; --sidebar-text: #c2cbe0; --sidebar-active: #1b2c4a; } /* Deliberately neutral gray chrome (not a saturated navy tint the way "blue" above is) with the accent carrying all the color — matching Fluent UI/Microsoft 365's own dark-mode look (neutral surfaces, blue used only for accents/selection), and giving this theme a genuinely different feel from "blue" rather than just another shade of navy. --accent is #2564CF, Microsoft's current Fluent-era SharePoint blue (the older, more famous "Office blue" is #0078D4 — considered and not used here, per explicit request for the newer shade); --sidebar-active gets its own distinct blue-tinted highlight since Fluent's own selected- state treatment is a blue tint against otherwise-neutral chrome. */ :root[data-theme="sharepoint"] { --bg: #1b1b1f; --panel: #242429; --border: #38383f; --text-dim: #a0a0aa; --accent: #2564cf; --zero: #85858f; --sidebar-bg: #141417; --sidebar-text: #c9c9d2; --sidebar-active: #23324d; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); } .app-shell { display: flex; height: 100vh; } /* Full-page sign-in/sign-up gate — see js/auth-view.js. Sits alongside .app-shell as a sibling in budgetdork.html, not nested inside it, since exactly one of the two is ever shown at a time (toggled via .hidden). */ #auth-screen { height: 100vh; display: flex; align-items: center; justify-content: center; } /* #auth-screen (an ID selector) otherwise beats the plain .hidden class on specificity alone regardless of source order, the same trap CLAUDE.md already documents for .modal-panel label — .hidden's display: none was silently losing here, leaving #auth-screen rendered (and taking up a full extra 100vh) even after JS added the class, which is exactly what showed up as the auth screen sitting scrollable below the real app. */ #auth-screen.hidden { display: none; } .auth-card { width: 320px; max-width: calc(100vw - 40px); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 28px 24px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); } .auth-title { margin: 0 0 4px; font-size: 20px; } .auth-subtitle { margin: 0 0 20px; font-size: 13px; color: var(--text-dim); } .auth-form { display: flex; flex-direction: column; gap: 14px; } .auth-form label { display: block; font-size: 12px; color: var(--text-dim); } .auth-form input, .auth-form textarea { display: block; width: 100%; margin-top: 4px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 14px; font-family: inherit; resize: vertical; box-sizing: border-box; } .auth-submit { background: var(--accent); color: white; border: none; border-radius: 6px; padding: 9px 10px; font-size: 14px; cursor: pointer; } .auth-submit:disabled { opacity: 0.6; cursor: default; } .auth-error { margin: 14px 0 0; font-size: 13px; color: var(--negative); } .auth-consent { margin: 14px 0 0; font-size: 12px; color: var(--text-dim); text-align: center; } .auth-consent a { color: var(--accent); text-decoration: none; } .auth-consent a:hover { text-decoration: underline; } .auth-toggle { display: block; width: 100%; margin-top: 16px; background: none; border: none; color: var(--accent); font-size: 13px; cursor: pointer; text-align: center; padding: 0; text-decoration: none; } .auth-toggle:hover { text-decoration: underline; } /* Sidebar's own account row — see buildAccountFooter() in js/app.js. */ .sidebar-account { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 2px 0; } .sidebar-account-email { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-account-actions { display: flex; gap: 4px; flex-shrink: 0; } .sidebar-logout-btn { flex-shrink: 0; background: none; border: none; color: var(--text-dim); font-size: 12px; cursor: pointer; padding: 4px 6px; border-radius: 4px; } .sidebar-logout-btn:hover { background: var(--sidebar-active); color: var(--sidebar-text); } /* Two-pane split — .sidebar-fixed (non-scrolling) + .sidebar-scroll (its own overflow-y: auto) — same fixed-frame + scroll-pane shape the Budget/ Register/Reports views already use (see CLAUDE.md's conventions note), applied to the sidebar per user request so the Budget/Theme switchers and the Plan/Insights/Reports/Recurring-transactions nav stay visible instead of scrolling away once the account list below them grows long. .sidebar itself no longer scrolls directly (no overflow-y here) — it just lays out its two children top to bottom and lets .sidebar-scroll's own min-height: 0 let it shrink to whatever's left below .sidebar-fixed's natural height. */ .sidebar { width: var(--sidebar-width); flex-shrink: 0; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; padding: 16px 10px; } .sidebar-fixed { flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--border); } .sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } /* Draggable divider between .sidebar and .main — see wireSidebarResizer() in js/app.js. A few px wide (not 1px) so it's actually easy to grab, with the visible line centered inside via the pseudo-element rather than the whole hit area being colored, which would look like a fat, out-of-place bar. */ .sidebar-resizer { width: 6px; flex-shrink: 0; cursor: col-resize; background: transparent; position: relative; } .sidebar-resizer::after { content: ''; position: absolute; left: 2px; top: 0; bottom: 0; width: 2px; background: var(--border); } .sidebar-resizer:hover::after, .sidebar-resizer.dragging::after { background: var(--accent); } /* The top-left Budget switcher — visually separated from the Theme switcher right below it via margin-bottom (the sidebar's own flex `gap` alone reads as "one more nav item" otherwise). See buildBudgetSwitcher() in app.js. */ .budget-switcher { margin-bottom: 6px; padding: 0 2px; } /* Label sits inside .budget-switcher-row/.theme-switcher-row now (label and dropdown side by side in one row, per user request — not the label stacked above it) — shared min-width so the two rows' dropdowns line up into a clean two-row form despite "Budget"/"Theme" being different lengths. flex-shrink: 0 keeps it from being squeezed by the select next to it. */ .budget-switcher-label, .theme-switcher-label { flex-shrink: 0; min-width: 46px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); } .budget-switcher-row { position: relative; /* anchors .account-menu's position: absolute when the rename/delete menu is open */ display: flex; align-items: center; gap: 6px; } .budget-select { flex: 1; min-width: 0; background: var(--panel); color: var(--sidebar-text); border: 1px solid var(--border); border-radius: 6px; padding: 7px 8px; font-size: 13px; cursor: pointer; } /* Sits right under the Budget switcher in the sidebar's fixed top section now (see renderSidebar()'s own comment in app.js), not trailing at the very bottom of the sidebar — same "label and dropdown side by side" idiom as .budget-switcher-row above, reused here instead of duplicated from scratch. */ .theme-switcher { padding: 0 2px; display: flex; align-items: center; gap: 6px; } .theme-select { flex: 1; min-width: 0; background: var(--panel); color: var(--sidebar-text); border: 1px solid var(--border); border-radius: 6px; padding: 7px 8px; font-size: 13px; cursor: pointer; } .budget-menu-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 4px 8px; flex-shrink: 0; } .budget-menu-btn:hover { color: var(--sidebar-text); } .menu-item:disabled { opacity: 0.4; cursor: not-allowed; } .menu-item:disabled:hover { background: none; } /* Separates the Budget/Theme switchers above from the Plan/Insights/Reports/ Recurring-transactions nav below — .sidebar-fixed's own flex `gap` alone reads as "one more row" between them, same reasoning as .budget-switcher's margin-bottom above. Margin on both sides (not just one) so the line reads as its own breathing room rather than sitting flush against either group. */ .sidebar-nav-divider { border-top: 1px solid var(--border); margin: 8px 2px; } .nav-item { display: flex; justify-content: space-between; align-items: center; background: none; border: none; color: inherit; font-size: 14px; padding: 9px 12px; border-radius: 6px; cursor: pointer; text-align: left; width: 100%; } .nav-item:hover { background: var(--sidebar-active); } .nav-item.active { background: var(--sidebar-active); font-weight: 600; } /* Plan/Insights/Reports/Feedback/Recurring transactions — tiled per user request, mimicking .underfunded-btn's bordered-tile look (below) rather than the plain single-line .nav-item rows the rest of the sidebar still uses. grid-template-areas lays out the exact requested shape: Plan/ Insights/Reports across row 1, Feedback under Plan and Recurring transactions double-wide under Insights+Reports in row 2 — rather than relying on CSS Grid's auto-placement algorithm to land 5 items in that specific, asymmetric arrangement. */ .nav-tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: 'plan insights reports' 'feedback recurring recurring'; gap: 6px; } .nav-tile-plan { grid-area: plan; } .nav-tile-insights { grid-area: insights; } .nav-tile-reports { grid-area: reports; } .nav-tile-feedback { grid-area: feedback; } .nav-tile-recurring { grid-area: recurring; } /* Same bordered-tile look as .underfunded-btn, shrunk to fit three across a sidebar's width and center-aligned per user request (a plain