/* * CashMapr brand palette. The raw brand hexes (Green #28C76F, Teal #0FA58A) don't pass * WCAG AA as text-on-white — Green is ~2.2:1 and Teal ~3.1:1 against white, both short of * the 4.5:1 normal-text minimum. So: light mode uses deepened derivatives of the same hues * for anything text-critical (buttons, links, badges), and reserves the true vivid brand * colors for non-text surfaces (the logo itself, accent borders, gradients). Dark mode uses * the true brand hexes directly — light-on-dark contrast comfortably clears AA there * (~6:1 and ~8.5:1), and the dark background is the brand's own Navy (#0D1B2A). */ :root { --color-bg: #f1f5f9; --color-surface: #ffffff; --color-surface-alt: #e7ecf1; --color-border: #dce3ea; --color-text: #0d1b2a; --color-text-muted: #6b7280; --color-primary: #0a7864; --color-primary-hover: #086152; --color-primary-soft: #e1f3ef; --color-success: #147a46; --color-success-soft: #e2f5ea; --color-danger: #d1403a; --color-danger-soft: #fbe9e8; --color-warning: #b8730f; --color-warning-soft: #fdf1de; --color-info: #0a7864; --color-brand-navy: #0d1b2a; --color-brand-green: #28c76f; --color-brand-teal: #0fa58a; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(20, 22, 30, 0.06); --shadow-md: 0 4px 16px rgba(20, 22, 30, 0.08); --sidebar-width: 232px; } /* * Theme resolution order: an explicit choice (data-theme, set by ThemeToggle and persisted to * localStorage) always wins; absent that, the OS-level prefers-color-scheme applies. The * media-query block below is guarded with :not([data-theme="light"]) so it only fires when * there's no explicit override; the [data-theme="dark"] block below that forces dark even * when the system itself is in light mode. Same variable values in both — kept in sync * deliberately rather than deduplicated, since CSS custom properties can't be shared across * rule blocks without a preprocessor. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0d1b2a; --color-surface: #16283c; --color-surface-alt: #1c3247; --color-border: #2a4155; --color-text: #f3f6f9; --color-text-muted: #9aa7b5; --color-primary: #0fa58a; --color-primary-hover: #2cbfa3; --color-primary-soft: #123b33; --color-success: #28c76f; --color-success-soft: #123322; --color-danger: #f0716c; --color-danger-soft: #3a1f1e; --color-warning: #e2a542; --color-warning-soft: #3a2c11; --color-info: #0fa58a; } } :root[data-theme="dark"] { --color-bg: #0d1b2a; --color-surface: #16283c; --color-surface-alt: #1c3247; --color-border: #2a4155; --color-text: #f3f6f9; --color-text-muted: #9aa7b5; --color-primary: #0fa58a; --color-primary-hover: #2cbfa3; --color-primary-soft: #123b33; --color-success: #28c76f; --color-success-soft: #123322; --color-danger: #f0716c; --color-danger-soft: #3a1f1e; --color-warning: #e2a542; --color-warning-soft: #3a2c11; --color-info: #0fa58a; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-text); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.5; } h1, h2, h3, h4 { margin: 0 0 0.5rem 0; font-weight: 650; letter-spacing: -0.01em; } h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } p { margin: 0 0 0.75rem 0; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ---- Layout ---- */ .app-shell { display: flex; min-height: 100vh; } .app-sidebar { width: var(--sidebar-width); flex-shrink: 0; background: var(--color-surface); border-right: 1px solid var(--color-border); padding: 1.25rem 0.75rem; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .app-brand { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.5rem 1.25rem 0.5rem; font-weight: 700; font-size: 1.4rem; } .app-brand .brand-mark { width: 40px; height: 40px; display: block; /* Drives the route/waypoint currentColor in the inline SVG — same token as the "Cash" wordmark text, so the mark and the text go dark-navy/near-white together. */ color: var(--color-text); } .app-brand .brand-wordmark .cash { color: var(--color-text); } .app-brand .brand-wordmark .mapr { color: var(--color-success); } .nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .nav-list a { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.65rem; border-radius: var(--radius-sm); color: var(--color-text-muted); font-weight: 500; text-decoration: none; } .nav-list a:hover { background: var(--color-surface-alt); color: var(--color-text); } .nav-list a.active { background: var(--color-primary-soft); color: var(--color-primary); } .nav-list .nav-icon { width: 18px; text-align: center; } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .app-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.5rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); position: sticky; top: 0; z-index: 5; } /* Only meaningful on mobile (see the media query below) — hidden here because the sidebar already shows the full logo + wordmark on desktop, and showing both would be redundant. */ .topbar-brand { display: none; } /* Capped and centered so content stays readable on wide/ultrawide monitors — without this, a two-column breakdown table (e.g. "How Safe-to-Spend was calculated") stretches its label and value columns across the full viewport width, leaving a huge dead gap between them. */ .app-content { padding: 1.5rem; flex: 1; max-width: 1440px; width: 100%; margin: 0 auto; } .mobile-nav { display: none; } @media (max-width: 900px) { .app-sidebar { display: none; } .mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-surface); border-top: 1px solid var(--color-border); justify-content: space-around; padding: 0.4rem 0; z-index: 10; } .mobile-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.7rem; color: var(--color-text-muted); padding: 0.25rem 0.4rem; } .mobile-nav a.active { color: var(--color-primary); } .app-content { padding: 1rem; padding-bottom: 4.5rem; } /* "More" overflow tab — same :focus-within dismiss-on-outside-click pattern as .user-menu. */ .mobile-nav-more { position: relative; outline: none; } .mobile-nav-more-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.7rem; color: var(--color-text-muted); padding: 0.25rem 0.4rem; background: none; border: none; font-family: inherit; cursor: pointer; } .mobile-nav-more:focus-within .mobile-nav-more-btn { color: var(--color-primary); } .mobile-nav-more-panel { display: none; position: absolute; bottom: calc(100% + 10px); right: -0.5rem; min-width: 170px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 0.4rem; } .mobile-nav-more:focus-within .mobile-nav-more-panel { display: block; } .mobile-nav-more-panel a { display: flex; flex-direction: row; align-items: center; gap: 0.65rem; padding: 0.6rem 0.65rem; border-radius: var(--radius-sm); color: var(--color-text); font-size: 0.9rem; font-weight: 500; } .mobile-nav-more-panel a:hover { background: var(--color-surface-alt); } .mobile-nav-more-panel a.active { color: var(--color-primary); background: var(--color-primary-soft); } .app-topbar { padding: 0.85rem 1rem; gap: 0.5rem; } .topbar-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.2rem; flex-shrink: 0; } .topbar-brand .brand-mark { width: 30px; height: 30px; color: var(--color-text); } .topbar-brand .cash { color: var(--color-text); } .topbar-brand .mapr { color: var(--color-success); } } /* ---- Cards ---- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; } .stat-card { display: flex; flex-direction: column; gap: 0.35rem; } .stat-card .stat-label { font-size: 0.8rem; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .stat-card .stat-value { font-size: 1.5rem; font-weight: 700; } .stat-card .stat-sub { font-size: 0.8rem; color: var(--color-text-muted); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border-radius: var(--radius-sm); padding: 0.5rem 0.9rem; font-weight: 600; font-size: 0.9rem; border: 1px solid transparent; cursor: pointer; background: var(--color-surface-alt); color: var(--color-text); white-space: nowrap; } .btn:hover { filter: brightness(0.97); } .btn-primary { background: var(--color-primary); color: white; } .btn-primary:hover { background: var(--color-primary-hover); } .btn-outline { background: transparent; border-color: var(--color-border); } .btn-danger { background: var(--color-danger-soft); color: var(--color-danger); } .btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ---- Theme toggle ---- */ .theme-toggle { display: inline-flex; gap: 2px; padding: 2px; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 999px; } .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: 999px; background: transparent; color: var(--color-text-muted); cursor: pointer; } .theme-toggle-btn:hover { color: var(--color-text); } .theme-toggle-btn.active { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); } @media (max-width: 900px) { /* 26px (the desktop size) is below the ~44px minimum recommended touch target — comfortable to click with a mouse, too fiddly to reliably tap with a thumb. Placed here (right after the base rule, not inside the earlier layout media query) so it reliably wins the cascade — two rules with equal specificity resolve by source order, and this component's own override should live next to its own base styles. */ .theme-toggle { gap: 4px; padding: 3px; } .theme-toggle-btn { width: 36px; height: 36px; } } /* ---- Topbar search trigger ---- */ .topbar-search-btn { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface-alt); color: var(--color-text-muted); cursor: pointer; } .topbar-search-btn:hover { background: var(--color-border); color: var(--color-text); } .topbar-search-kbd { font-family: inherit; font-size: 0.7rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 4px; padding: 0.05rem 0.35rem; } @media (max-width: 900px) { .topbar-search-label, .topbar-search-kbd { display: none; } .topbar-search-btn { padding: 0.45rem; } } /* ---- User menu (avatar + dropdown) ---- :focus-within opens the dropdown without any JS — clicking anywhere outside the container moves focus off it (or onto nothing), closing the menu on its own. Clicking an item inside (Sign out, a theme button) keeps focus within the container until the click completes. */ /* margin-left: auto (not relying on .app-topbar's space-between) because .topbar-brand — the other flex child — is display:none on desktop; space-between with a single visible child just places it at flex-start, which put the avatar on the left instead of the right. */ .user-menu { position: relative; outline: none; margin-left: auto; } .user-menu-avatar { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; border: none; background: var(--color-primary); color: white; font-weight: 700; font-size: 0.9rem; cursor: pointer; } .user-menu-avatar:focus { outline: none; } .user-menu-avatar:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .user-menu-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 0.75rem; z-index: 20; } .user-menu:focus-within .user-menu-dropdown { display: block; } .user-menu-email { font-size: 0.8rem; color: var(--color-text-muted); word-break: break-all; margin-bottom: 0.6rem; } .user-menu-section-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); font-weight: 700; margin-bottom: 0.4rem; } .user-menu-dropdown hr { border: none; border-top: 1px solid var(--color-border); margin: 0.75rem 0; } .user-menu-dropdown form { margin: 0; } .user-menu-item { display: block; width: 100%; text-align: left; padding: 0.5rem 0.6rem; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-danger); font-weight: 600; font-size: 0.9rem; cursor: pointer; } .user-menu-item:hover { background: var(--color-danger-soft); } .user-menu-link { display: block; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); color: var(--color-text); font-weight: 600; font-size: 0.9rem; text-decoration: none; margin-bottom: 0.5rem; } .user-menu-link:hover { background: var(--color-surface-alt); text-decoration: none; } /* ---- Forms ---- */ .field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; } .field label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); } .field input, .field select, .field textarea { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.5rem 0.65rem; background: var(--color-surface); color: var(--color-text); font-size: 0.9rem; font-family: inherit; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-primary); } .form-row { display: flex; gap: 1rem; flex-wrap: wrap; } .form-row > .field { flex: 1; min-width: 180px; } .validation-message { color: var(--color-danger); font-size: 0.8rem; } /* ---- Collapsible modal sections (e.g. Edit Transaction's secondary panels) ---- */ .edit-modal-section { border-top: 1px solid var(--color-border); margin-top: 1rem; padding-top: 0.75rem; } .edit-modal-section summary { cursor: pointer; font-weight: 700; font-size: 1rem; list-style: none; } .edit-modal-section summary::-webkit-details-marker { display: none; } .edit-modal-section summary::before { content: '▸'; display: inline-block; margin-right: 0.4rem; color: var(--color-text-muted); transition: transform 0.15s ease; } .edit-modal-section[open] summary::before { transform: rotate(90deg); } .edit-modal-section > *:not(summary) { margin-top: 0.75rem; } /* Sticky action bar pinned to the bottom of a scrollable modal body (see Modal.razor). */ .edit-modal-footer { position: sticky; bottom: -1.1rem; display: flex; justify-content: flex-end; gap: 0.5rem; margin: 1.25rem -1.25rem -1.1rem; padding: 0.85rem 1.25rem; background: var(--color-surface); border-top: 1px solid var(--color-border); } .category-expand-toggle { background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: 0.75rem; width: 1.1rem; display: inline-block; text-align: center; padding: 0; margin-right: 0.15rem; } .category-subrow td { color: var(--color-text-muted); } /* ---- Tables ---- */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .data-table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--color-border); } .data-table td { padding: 0.6rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; } .data-table tr:hover td { background: var(--color-surface-alt); } .table-scroll { overflow-x: auto; } /* Below 900px (the same breakpoint the rest of the app switches to mobile chrome at — see the sidebar/.mobile-nav rules above), every data table stops being a scrollable table and becomes a stack of labeled cards instead — a horizontally-scrolling table doesn't read as "an app" on a phone, and cramming many columns into a narrow table just wraps every cell's text instead. Relies on each carrying a data-label attribute (empty for action-only columns, which right-aligns instead of showing a blank label). Excludes .data-table-plain — a handful of small 2-column tables (e.g. the Safe-to-Spend breakdown) are already a plain "label | value" layout with no header row, and would look broken (label text pushed to the right by the card layout's flex rules) if swept into this transform too. */ @media (max-width: 900px) { .data-table:not(.data-table-plain) thead { display: none; } .data-table:not(.data-table-plain), .data-table:not(.data-table-plain) tbody, .data-table:not(.data-table-plain) tr, .data-table:not(.data-table-plain) td { display: block; width: 100%; } .data-table:not(.data-table-plain) { border: none; } .data-table:not(.data-table-plain) tr { margin-bottom: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.6rem 0.75rem; } .data-table:not(.data-table-plain) tr:hover td { background: none; } .data-table:not(.data-table-plain) td { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--color-border); text-align: right; } .data-table:not(.data-table-plain) td:last-child { border-bottom: none; padding-top: 0.6rem; } .data-table:not(.data-table-plain) td::before { content: attr(data-label); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-text-muted); text-align: left; flex-shrink: 0; } .data-table:not(.data-table-plain) td[data-label=""]::before { display: none; } .data-table:not(.data-table-plain) td[data-label=""] { justify-content: flex-end; } } /* ---- Badges ---- */ .badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } .badge-success { background: var(--color-success-soft); color: var(--color-success); } .badge-danger { background: var(--color-danger-soft); color: var(--color-danger); } .badge-warning { background: var(--color-warning-soft); color: var(--color-warning); } .badge-info { background: var(--color-primary-soft); color: var(--color-primary); } .badge-muted { background: var(--color-surface-alt); color: var(--color-text-muted); } .amount-negative { color: var(--color-danger); } .amount-positive { color: var(--color-success); } /* ---- Calendar month grid ---- */ .calendar-nav { display: flex; gap: 0.5rem; align-items: center; } .calendar-nav-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 1.1rem; cursor: pointer; } .calendar-nav-btn:hover { background: var(--color-surface-alt); } .calendar-nav-month { font-weight: 700; min-width: 130px; text-align: center; } /* Full content width — a 7-column month grid is meant to read like a real calendar, not a narrow widget, so it uses all the room .app-content gives it (same as every other page). */ .calendar-card { padding: 1.1rem; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .calendar-grid-header { margin-bottom: 8px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); text-align: center; } .calendar-cell { min-height: 110px; min-width: 0; border-radius: var(--radius-md); border: 1px solid var(--color-border); padding: 0.4rem; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--color-surface); transition: background-color 0.12s ease, box-shadow 0.12s ease; overflow: hidden; } .calendar-cell:hover { background: var(--color-surface-alt); box-shadow: var(--shadow-sm); } .calendar-cell-empty { visibility: hidden; cursor: default; } .calendar-cell-weekend { background: color-mix(in srgb, var(--color-surface-alt) 55%, transparent); } .calendar-cell-daynum { font-size: 0.85rem; font-weight: 600; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 999px; flex-shrink: 0; } .calendar-cell-daynum-today { background: var(--color-primary); color: white; font-weight: 700; } .calendar-cell-chips { display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0; flex: 1; } .calendar-chip { display: block; font-size: 0.68rem; font-weight: 600; padding: 0.1rem 0.35rem; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; min-width: 0; box-sizing: border-box; } .calendar-chip-positive { background: var(--color-success-soft); color: var(--color-success); } .calendar-chip-negative { background: var(--color-danger-soft); color: var(--color-danger); } .calendar-chip-more { font-size: 0.65rem; color: var(--color-text-muted); font-weight: 600; } .calendar-cell-amount-pill { font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 999px; white-space: nowrap; align-self: flex-end; margin-top: auto; } .calendar-pill-positive { background: var(--color-success-soft); color: var(--color-success); } .calendar-pill-negative { background: var(--color-danger-soft); color: var(--color-danger); } .calendar-modal-total { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.75rem; } .calendar-entry-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0; border-bottom: 1px solid var(--color-border); } .calendar-entry-row:last-child { border-bottom: none; } .calendar-entry-name { flex: 1; } .calendar-entry-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; } .calendar-dot-positive { background: var(--color-success); } .calendar-dot-negative { background: var(--color-danger); } @media (max-width: 900px) { .calendar-card { padding: 0.6rem; } .calendar-grid { gap: 3px; } .calendar-cell { min-height: 64px; padding: 0.2rem; gap: 2px; } .calendar-cell-daynum { width: 20px; height: 20px; font-size: 0.75rem; } .calendar-chip { font-size: 0.58rem; padding: 0.05rem 0.25rem; } .calendar-chip-more { font-size: 0.55rem; } .calendar-cell-amount-pill { font-size: 0.56rem; padding: 0.05rem 0.3rem; } .calendar-nav-month { min-width: 110px; font-size: 0.9rem; } } .section { margin-bottom: 1.75rem; } /* flex-wrap here (and on its direct-child action group below) lets a header's title and button(s) drop to their own line instead of clipping off the edge of the screen — several pages pair an

with two or three buttons (e.g. Accounts: Net Worth / Debt Center / + Add Account) that never fit on one line at phone widths. */ .section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 0.5rem; margin-bottom: 0.75rem; } /* Only takes effect on the handful of section-headers whose action group is itself an inline display:flex div (Accounts, Transactions, Inbox) — a no-op everywhere else, since flex-wrap has no effect on a non-flex container. */ .section-header > div { flex-wrap: wrap; row-gap: 0.5rem; } .muted { color: var(--color-text-muted); } .empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--color-text-muted); } /* ---- Framework leftovers kept from template ---- */ h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--color-success); } .invalid { outline: 1px solid var(--color-danger); } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; border-radius: var(--radius-sm); } .blazor-error-boundary::after { content: "An error has occurred."; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--color-text-muted); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } #blazor-error-ui { background: var(--color-danger); color: white; bottom: 0; box-shadow: 0 -1px 6px rgba(0,0,0,.2); display: none; left: 0; padding: 0.9rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.8rem; } /* ---- Identity / Account pages ---- ASP.NET Core Identity's scaffolded Razor components (Login, Register, the Manage/* account settings pages) ship with Bootstrap-convention markup — form-floating, row/col-*, btn-lg, alert-*, nav-pills — from the framework's own template, predating this app's design system. This project never added Bootstrap, so those classes rendered as bare unstyled HTML. Rather than rewrite ~15 scaffolded files' form-binding/validation markup, this gives those specific class names real styling with this app's own tokens, so they render consistently with the rest of the app without touching the scaffold's structure. */ .account-page section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-sm); margin-bottom: 1.25rem; } .row { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; } [class^="col-"], [class*=" col-"] { flex: 1; min-width: 220px; } /* Real Bootstrap form-floating overlaps the label on the input via absolute positioning; this app doesn't need that effect, just the label reading above its field like everywhere else — the scaffold's DOM order is input-then-label, so `order: -1` flips it visually without touching the markup. */ .form-floating { display: flex; flex-direction: column; margin-bottom: 0.9rem; } .form-control { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; background: var(--color-surface); color: var(--color-text); font-size: 0.9rem; font-family: inherit; } .form-control:focus { outline: none; border-color: var(--color-primary); } .form-label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); display: block; margin: 0.3rem 0; } /* Not every scaffolded page puts class="form-label" on its