/* =========================================================================== * CMW DESIGN SYSTEM — "PennMarc" * Light is the default theme (:root). Dark overrides on [data-theme="dark"]. * The topbar theme toggle flips data-theme on and sets the * cmw_theme cookie so the server can render the right theme on next load * with no flash. See templates/partials/_topbar.html. * * Ported from the Streamlit-era utils/ui_state.py CMW_CSS block. Streamlit * chrome selectors (.stApp, .stButton, [data-testid=...], etc.) have been * dropped; everything below targets plain HTML rendered by Jinja. * ======================================================================== */ :root{ /* surfaces & text (light default) */ --bg:#eef2f7; --surface-1:#f4f8fc; --surface-2:#ffffff; --border:#dde6f0; --text-primary:#1c2b3a; --text-secondary:#5d6e83; --text-muted:#8696aa; /* brand / accent */ --cmw-accent: #1773b8; --cmw-accent-bg: #eaf1f8; --cmw-accent-txt:#0f5a93; /* status */ --cmw-pos: #2e9e6b; --cmw-neg: #d2493e; --cmw-warn: #856404; --cmw-warn-bg:#faeeda; /* form */ --cmw-shadow:0 4px 16px rgba(28,43,61,.08); --cmw-radius:13px; --cmw-radius-sm:8px; --cmw-serif:Georgia,'Times New Roman',serif; --cmw-sans:'Segoe UI',Roboto,Helvetica,Arial,sans-serif; } :root[data-theme="dark"]{ --bg:#0f1620; --surface-1:#1e2c3d; --surface-2:#172230; --border:#2c3e54; --text-primary:#e7eef6; --text-secondary:#9fb1c6; --text-muted:#7e90a8; --cmw-accent: #3a98dd; --cmw-accent-bg: #22344a; --cmw-accent-txt:#7cc0f0; --cmw-pos: #2e9e6b; --cmw-neg: #d2493e; --cmw-warn: #d6a93e; --cmw-warn-bg:#3a3320; --cmw-shadow:0 6px 22px rgba(0,0,0,.40); } *{ box-sizing:border-box; } html, body{ margin:0; padding:0; } body{ background:var(--bg); color:var(--text-primary); font-family:var(--cmw-sans); -webkit-font-smoothing:antialiased; min-height:100vh; } p, span, label, li{ color:inherit; } a{ color:var(--cmw-accent); text-decoration:none; } a:hover{ text-decoration:underline; } /* Headings — serif brand voice */ h1, h2{ font-family:var(--cmw-serif); color:var(--cmw-accent-txt); letter-spacing:.3px; font-weight:700; margin:0 0 8px; } h3, h4{ font-family:var(--cmw-sans); color:var(--text-primary); font-weight:650; margin:0 0 6px; } /* Rounded cards w/ soft shadow */ .cmw-card{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--cmw-radius); padding:16px 17px; box-shadow:var(--cmw-shadow); margin-bottom:14px; } /* Buttons */ button, .cmw-btn{ background:var(--surface-2); border:1px solid var(--border); color:var(--text-secondary); border-radius:var(--cmw-radius-sm); padding:8px 12px; font-size:12.5px; font-weight:550; font-family:var(--cmw-sans); cursor:pointer; } button:hover, .cmw-btn:hover{ color:var(--cmw-accent); border-color:var(--cmw-accent); } button.primary, .cmw-btn.primary{ background:var(--cmw-accent); border-color:var(--cmw-accent); color:#fff; } button.primary:hover, .cmw-btn.primary:hover{ filter:brightness(1.08); } button:disabled{ opacity:.5; cursor:default; } /* Inputs / selects */ input[type="text"], input[type="password"], input[type="date"], input[type="number"], input[type="search"], select, textarea{ background:var(--surface-2); color:var(--text-primary); border:1px solid var(--border); border-radius:var(--cmw-radius-sm); font-family:var(--cmw-sans); font-size:13px; padding:7px 10px; } input:focus, select:focus, textarea:focus{ border-color:var(--cmw-accent); outline:none; } /* Flat-underline tabs */ .cmw-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px; } .cmw-tabs a{ color:var(--text-secondary); text-decoration:none; font-size:13.5px; font-weight:550; padding:10px 15px; border-bottom:2px solid transparent; } .cmw-tabs a:hover{ color:var(--cmw-accent); } .cmw-tabs a.active{ color:var(--cmw-accent); border-bottom-color:var(--cmw-accent); } /* Main top-level tab bar (Dashboard/Bills & Income/Planning/Investing/ * Property & Debt/Accounts) — sits below the sticky topbar as header * chrome, distinct from in-page .cmw-tabs sub-tab rows (Accounts' * Linked/Connect/Import, Cash Flow's Forecast/Scenarios, etc.) which keep * their own look. Reuses .cmw-tabs link styling via a combined class. */ .cmw-main-tabs{ margin:0 auto; max-width:none; padding:0 16px; background:var(--surface-2); border-bottom:1px solid var(--border); position:sticky; top:46px; z-index:90; overflow-x:auto; } /* Top nav bar */ .cmw-topbar{ display:flex; align-items:center; gap:10px; padding:0 16px; height:46px; background:var(--surface-2); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; } .cmw-logo{ font-size:15px; font-weight:600; color:var(--cmw-accent-txt); font-family:var(--cmw-serif); letter-spacing:.01em; white-space:nowrap; } .cmw-logo span{ font-size:11px; color:var(--text-muted); margin-left:4px; font-weight:400; font-family:var(--cmw-sans); } /* Hamburger menu */ .cmw-hamburger-btn{ width:32px; height:32px; border-radius:6px; border:1px solid var(--border); background:var(--surface-1); display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; padding:0; } .cmw-hamburger-btn:hover{ border-color:var(--cmw-accent); } .cmw-hamburger-btn span{ display:block; width:16px; height:2px; background:var(--text-secondary); border-radius:1px; } .cmw-hamburger-btn:hover span{ background:var(--cmw-accent); } .cmw-nav-dropdown{ position:absolute; top:46px; left:16px; z-index:200; display:none; flex-direction:column; min-width:190px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--cmw-radius-sm); box-shadow:var(--cmw-shadow); padding:6px; gap:1px; } .cmw-nav-dropdown.open{ display:flex; } .cmw-nav-dropdown a{ padding:9px 12px; border-radius:6px; font-size:13px; color:var(--text-secondary); text-decoration:none; white-space:nowrap; } .cmw-nav-dropdown a:hover{ background:var(--surface-1); color:var(--text-primary); } .cmw-nav-dropdown a.active{ background:var(--cmw-accent-bg); color:var(--cmw-accent-txt); font-weight:500; } .cmw-topbar-right{ margin-left:auto; display:flex; align-items:center; gap:6px; } .cmw-icon-btn{ width:30px; height:30px; border-radius:6px; border:1px solid var(--border); background:var(--surface-1); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-secondary); font-size:14px; text-decoration:none; } .cmw-icon-btn:hover{ color:var(--cmw-accent); border-color:var(--cmw-accent); } /* 2026-08-06: "show inactive accounts" toggle's on-state — same accent treatment as hover above, but persistent (not just while the pointer is over it) so the button visibly communicates the toggle is currently on. */ .cmw-icon-btn-active{ color:var(--cmw-accent); border-color:var(--cmw-accent); background:var(--cmw-accent-bg); } /* Logout's power icon reads as a distinct, slightly alarming action — colored with the neg/red accent instead of the standard gray, per the reference screenshot (2026-07-06). */ .cmw-icon-btn-danger{ color:var(--cmw-neg); } .cmw-icon-btn-danger:hover{ color:var(--cmw-neg); border-color:var(--cmw-neg); filter:brightness(1.15); } /* 2026-07-17 ("the action buttons can be a little bigger so I can see the icons") — Review Queue's Uncategorized action row (Sweep/Skip-Quicken/ Expand-all/Process) uses this size modifier instead of resizing the base .cmw-icon-btn, so the topbar's icon buttons (which share that base class) don't grow too. */ .cmw-icon-btn-lg{ width:38px; height:38px; } .cmw-icon-btn-lg .cmw-icon{ width:20px; height:20px; } /* Topbar icon set switched from emoji to inline outline SVGs (2026-07-06, per reference screenshot) — stroke="currentColor" in the markup means these automatically follow .cmw-icon-btn's color/hover states and both themes with no extra CSS. */ .cmw-icon{ width:17px; height:17px; display:block; } .cmw-notif-badge{ position:absolute; top:-3px; right:-3px; min-width:15px; height:15px; border-radius:999px; background:var(--cmw-neg); color:#fff; font-size:9px; font-weight:700; line-height:15px; text-align:center; padding:0 3px; display:none; align-items:center; justify-content:center; } /* Receipts button count chips (2026-07-08) — "pending" (actionable, needs a look) uses the same red as .cmw-notif-badge; "matched" (informational only, just a running total) uses a muted neutral chip instead so it doesn't visually compete with pending for attention. Inline pills next to the button label rather than .cmw-notif-badge's corner-dot positioning, since a plain-text button can carry two counts side by side more legibly than two overlapping absolute-positioned dots would. Hidden on "0" by the same JS pattern as the notif badge (see transactions.html). */ .cmw-rx-count-chip{ display:none; align-items:center; justify-content:center; min-width:16px; height:16px; margin-left:5px; padding:0 5px; border-radius:999px; font-size:9.5px; font-weight:700; line-height:16px; } .cmw-rx-count-chip.pending{ background:var(--cmw-neg); color:#fff; } .cmw-rx-count-chip.matched{ background:var(--surface-1); color:var(--text-muted); border:1px solid var(--border); } /* Username display (2026-07-06) — plain text per reference screenshot ("Daniel Clem (admin)"), replacing the earlier avatar-circle pill. */ .cmw-username-plain{ font-size:12.5px; font-weight:500; color:var(--text-primary); white-space:nowrap; } .cmw-username-plain .cmw-role-muted{ color:var(--text-muted); font-weight:400; } /* KPI strip */ .cmw-kpi-strip{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; padding:14px 16px 0; } .cmw-kpi{ background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--cmw-accent); border-radius:11px; padding:13px 15px; box-shadow:var(--cmw-shadow); } .cmw-kpi-label{ font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px; } .cmw-kpi-val{ font-size:23px; font-weight:700; line-height:1.05; color:var(--cmw-accent-txt); } .cmw-kpi-val.pos{ color:var(--cmw-pos); } .cmw-kpi-val.neg{ color:var(--cmw-neg); } .cmw-kpi.warn{ border-left-color:var(--cmw-neg); } .cmw-kpi.warn .cmw-kpi-val{ color:var(--cmw-neg); } /* 2026-08-13 ("the kpi cards on each accounts register... should fit in the account header row with the online balance") — compact inline version of the KPI strip above, used only in Account Detail's header now (partials/_account_kpi_compact.html) in place of that page's own full-width .cmw-kpi-strip band. No card chrome (background/border/ shadow/radius) since it sits inline in a page-header row alongside the title and balance rather than as its own block — thin vertical dividers between items stand in for the old cards' separation instead. Lives INSIDE #account-detail-header's own single sticky band on purpose — see that partial's comment and .cmw-acct-top's history below for why a SEPARATE band sharing the header's row broke this page's sticky math before. */ .cmw-kpi-compact{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .cmw-kpi-compact-item{ display:flex; flex-direction:column; align-items:center; gap:2px; padding-right:16px; border-right:1px solid var(--border); } .cmw-kpi-compact-item:last-child{ padding-right:0; border-right:none; } .cmw-kpi-compact-val{ font-size:15px; font-weight:700; line-height:1; color:var(--cmw-accent-txt); white-space:nowrap; } .cmw-kpi-compact-val.pos{ color:var(--cmw-pos); } .cmw-kpi-compact-val.neg{ color:var(--cmw-neg); } .cmw-kpi-compact-label{ font-size:9.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; } /* Dashboard "needs review" banner (2026-07-14, dashboard.html) — full-width, above the KPI strip, shown only when there's something to review. Uses --cmw-warn/--cmw-warn-bg (amber "needs your attention") rather than --cmw-neg (reserved for negative dollar amounts/over-budget) or --cmw-accent (reserved for neutral/informational) — this is neither, it's an outstanding task. */ .cmw-dash-review-banner{ display:flex; align-items:center; gap:10px; background:var(--cmw-warn-bg); color:var(--cmw-warn); border:1px solid var(--cmw-warn); border-radius:var(--cmw-radius-sm); padding:11px 16px; margin:14px 0 0; text-decoration:none; font-size:13px; font-weight:600; } .cmw-dash-review-banner:hover{ filter:brightness(1.04); } .cmw-dash-review-banner-icon{ font-size:15px; flex-shrink:0; } .cmw-dash-review-banner-text{ flex:1; } .cmw-dash-review-banner-text strong{ font-weight:700; } .cmw-dash-review-banner-cta{ flex-shrink:0; white-space:nowrap; text-decoration:underline; } /* Page wrapper */ .cmw-main{ padding:16px; } .cmw-page-header{ padding:14px 2px 10px; } .cmw-page-title{ font-size:22px; font-weight:700; font-family:var(--cmw-serif); color:var(--cmw-accent-txt); display:inline-block; } .cmw-page-subtitle{ font-size:13px; color:var(--text-muted); margin-top:2px; } /* 2026-07-17 ("it just takes up valuable space") — a subtitle that * immediately follows a page title (the standard .cmw-page-header pattern * every tab uses) now sits on the same line instead of stacking below it, * freeing a full row of vertical space on every page. Scoped with the * adjacent-sibling combinator so it ONLY affects a subtitle directly after * a title — the many OTHER .cmw-page-subtitle uses sprinkled through * individual pages (empty-state notes, secondary explainer lines further * down the page, etc.) are untouched, since none of those immediately * follow a .cmw-page-title element. */ .cmw-page-title + .cmw-page-subtitle{ display:inline-block; margin-top:0; margin-left:10px; } /* App shell — global left account panel + main content, both scroll under * the sticky topbar. The panel is loaded lazily via HTMX (see base.html: * hx-get="/app/accounts/panel") so no route needs to thread account data * through its own context. */ .cmw-app-shell{ display:flex; align-items:flex-start; max-width:none; margin:0 auto; } /* Narrow/wide topbar toggle (2026-07-06, base.html's #cmw-width-toggle) — the [data-width="narrow"] attribute lives on , set client-side from the cmw_width cookie before first paint (see base.html's head script). Feedback 2026-07-06: wide should mean edge-to-edge full width, and narrow should be what used to be the only (1600px-capped) option — so "wide" is now the uncapped default below, and [data-width="narrow"] is the 1600px cap. Narrows both the content column and the main tab bar above it together so the tabs stay aligned with the content instead of spanning wider than what's under them. */ [data-width="narrow"] .cmw-app-shell, [data-width="narrow"] .cmw-main-tabs{ max-width:1600px; } .cmw-shell-main{ flex:1; min-width:0; } .cmw-account-panel{ width:310px; flex-shrink:0; padding:14px 10px 14px 16px; /* Was hardcoded to top:46px (topbar height only) — but .cmw-main-tabs just above it in the DOM is ALSO sticky at top:46px, so once both were stuck the panel silently scrolled in underneath the (higher z-index) main tab bar for the first ~40px of its sticky region. --cmw-stack-2 (topbar + main tabs, computed in base.html) is the correct clearance regardless of main-tabs' actual rendered height. */ position:sticky; top:var(--cmw-stack-2, 90px); max-height:calc(100vh - var(--cmw-stack-2, 90px)); display:flex; flex-direction:column; } .cmw-account-panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; padding:0 4px; flex-shrink:0; } .cmw-account-panel-head-actions{ display:flex; align-items:center; gap:6px; } /* 2026-08-04/2026-08-06 ("collapse/expand accounts button icon needs to be larger", bumped again 08-06): in the expanded/default state this was still the base 30px/17px .cmw-icon-btn size and easy to miss next to the bolder Sync pill; now sized well above every other topbar icon on purpose. Scoped to this button's id (same precedent as the collapsed-state override below and .cmw-icon-btn-lg above) so Sync/ topbar icons aren't inflated too. */ #cmw-sidebar-toggle{ width:40px; height:40px; } #cmw-sidebar-toggle svg{ width:26px; height:26px; } .cmw-account-panel-title{ font-family:var(--cmw-serif); font-size:15px; font-weight:700; color:var(--cmw-accent-txt); } .cmw-account-panel-list{ flex:1; min-height:0; overflow-y:auto; } /* Collapsed sidebar (2026-07-14, #cmw-sidebar-toggle in base.html) — shrink to a thin rail showing only the collapse/expand button so the user can reclaim the width (e.g. for a wide transactions table) without losing the sidebar entirely or hunting for how to bring it back. Transition matches the panel's own width so the collapse reads as a slide, not a jump. */ .cmw-account-panel{ transition:width .15s ease; } [data-sidebar="collapsed"] .cmw-account-panel{ width:38px; padding:14px 4px; overflow:visible; } [data-sidebar="collapsed"] .cmw-account-panel-title, [data-sidebar="collapsed"] .cmw-sync-btn, [data-sidebar="collapsed"] .cmw-acct-subgroup-select, [data-sidebar="collapsed"] .cmw-account-panel-list{ display:none; } [data-sidebar="collapsed"] .cmw-account-panel-head{ justify-content:center; } [data-sidebar="collapsed"] #cmw-sidebar-toggle svg{ transform:rotate(180deg); } /* 2026-08-06 ("make the button the same for each condition: 40x40px and 26x26px arrow") — collapsed state now matches the expanded-state button above exactly (40px/40px box, 26px/26px arrow via the shared svg rule), rather than the taller/narrower 30x50px box used previously. No override needed here anymore; kept as an explicit rule (repeating the base value) so it's obvious this state was deliberately matched, not just inherited. */ [data-sidebar="collapsed"] #cmw-sidebar-toggle{ width:40px; height:40px; } .cmw-acct-panel-total{ display:flex; justify-content:space-between; align-items:center; font-family:var(--cmw-serif); font-size:15px; font-weight:700; padding:8px 10px; margin:0 2px 8px; border-radius:var(--cmw-radius-sm); background:var(--cmw-accent-bg); color:var(--cmw-accent-txt); } .cmw-acct-panel-total .neg{ color:var(--cmw-neg); } .cmw-sync-btn{ display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:20px; border:1px solid var(--border); background:var(--surface-1); color:var(--text-secondary); font-size:11px; font-weight:600; cursor:pointer; } .cmw-sync-btn:hover{ color:var(--cmw-accent); border-color:var(--cmw-accent); } /* 2026-07-11: sub-grouping selector for the account sidebar ("custom collapsible subgroups" — institution/owner, within each top-level Banking/Investing/etc. bucket). Styled like a slim version of the filter bar's , since "filter by selected accounts" means picking any subset at once (compare one brokerage against another) rather than one-at-a-time like Transactions' single account_id dropdown. */ .cmw-check-pills{ display:flex; flex-wrap:wrap; gap:6px; } .cmw-check-pill{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:400; padding:5px 10px; border:1px solid var(--border); border-radius:999px; background:var(--surface-2); color:var(--text-secondary); cursor:pointer; user-select:none; margin:0; } .cmw-check-pill input{ width:auto; accent-color:var(--cmw-accent); } .cmw-check-pill:has(input:checked){ border-color:var(--cmw-accent); color:var(--cmw-accent-txt); background:var(--surface-1); } /* 2026-08-07: Investments Sankey level pills — same pill as above, plus draggable (reorder Total>Institution>Owner>Account Type>Account>Holding) using the same handle/dragging look as the table Customize Columns list (.cmw-colcustom-handle/.cmw-colcustom-row.dragging above). */ .cmw-check-pill[draggable]{ cursor:grab; } .cmw-check-pill[draggable].dragging{ opacity:.4; } .cmw-drag-handle{ color:var(--text-muted); font-size:11px; user-select:none; line-height:1; letter-spacing:-2px; } .cmw-kpi-strip.cmw-sticky-band{ background:var(--bg); } /* Account Detail — history: 2026-07-11 first tried a narrow header+filter column running parallel to a sticky KPI/table column, sticky against a JS-computed offset that only ever measured the left column's height. Every layout bug this page had (rows rendering outside the table frame, misaligned sticky header, KPI cards the wrong size) traced back to that one structural choice: a parallel sticky column base.html's updateStickyStack() has no way to account for (it only sums bands that stack vertically, one after another). Replaced same day with a narrower grid — just the page header paired with the KPI strip on one row, filter bar and table full-width below — believed safe at the time because nothing on this page was sticky yet, so there was no offset for the grid's uneven row heights to throw off. 2026-07-20 ("the page header (yellow box) should be fixed" + tracing why the table's own sticky header, now page-level per var(--cmw-stack-top), rendered in the wrong place here specifically): that belief didn't survive making header/KPI/filter/table sticky, which is exactly what this page needed once .cmw-table-scroll stopped managing its own independent scroll (see that rule's history). base.html's updateStickyStack() sums each sticky band's height SEQUENTIALLY, assuming plain vertical stacking — it has no concept of "these two elements share a grid row," so pairing .cmw-page-header beside .cmw-kpi-strip in one row (while only the header was ever a recognized band) made the JS undercount that row's true height by however much taller the KPI strip was, throwing off every sticky offset below it — compounding, not just coincidental with, the .cmw-table-scroll bug this same investigation found. Simplest correct fix: stop pairing them. Plain vertical stack — header, KPI strip (full width, its own default .cmw-kpi-strip layout, same as every other page), filter bar, table — so every piece is a normal sequential band the existing generic mechanism already handles correctly, no special-casing needed. #acct- results-wrap (the filter's hx-swap target, bundling the KPI strip + table so both refresh together on a filter change) keeps display:contents so swapping it doesn't introduce an extra wrapper level into the stack. 2026-07-20 ("I can see ledger rows behind the fixed header cards") — this used to space the four bands (header/filter/KPI-strip/table — #acct- results-wrap's display:contents means its KPI-strip+table children count as direct flex items here too) with `gap:12px`. Looks identical at rest, but base.html's updateStickyStack()/bandHeight() only ever measured getBoundingClientRect().height + marginBottom for each band — flex `gap` isn't on either of those, so it's invisible to that math. Every band's computed `top` came out 12px short per gap already passed (short by 12px for the filter bar, 24px for the KPI strip), leaving an uncovered sliver the width of each missed gap where the scrolled table rows underneath showed through — worse the further down the stack. Switched the spacing to margin-bottom on each band instead (same convention the rest of the app's sticky bands already use — see .cmw-filter-bar's own margin-bottom:12px below, previously zeroed out here in favor of the gap) so bandHeight() measures the real spacing and every band's sticky background actually covers the seam above it. */ .cmw-acct-top{ display:flex; flex-direction:column; } .cmw-acct-top > .cmw-page-header{ padding:6px 2px 0; margin-bottom:12px; } .cmw-acct-top .cmw-acct-columns-row{ margin:0; } /* 2026-08-13: .cmw-kpi-strip no longer renders on this page at all — moved into .cmw-page-header itself as .cmw-kpi-compact (see that class's own comment above and partials/_account_kpi_compact.html), specifically BECAUSE pairing it as a second sticky band alongside the header is what the whole history comment above this block is about. Rule kept (matches nothing here now, harmless) rather than deleted, in case a plain .cmw-kpi-strip ever gets reintroduced on this page for something else. */ .cmw-acct-top .cmw-kpi-strip{ margin-bottom:12px; } #acct-results-wrap{ display:contents; } /* Dashboard (2026-07-12 rebuild) — two summary cards side by side, each a short read-only preview (top 5) of a list that has its own full page elsewhere (Bills, Budgets); no action buttons here on purpose, since _bill_card.html's Mark Paid button hx-targets #bills-list-wrap, which doesn't exist on this page — "View all" links to the real page instead of trying to make every action work from a preview card. */ .cmw-dash-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; } .cmw-dash-card-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; } .cmw-dash-card-head h3{ margin:0; } .cmw-dash-card-link{ font-size:11.5px; font-weight:600; color:var(--cmw-accent); text-decoration:none; white-space:nowrap; } .cmw-dash-card-link:hover{ text-decoration:underline; } .cmw-dash-mini-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); } .cmw-dash-mini-row:last-child{ border-bottom:none; padding-bottom:0; } /* Load more */ .cmw-load-more{ text-align:center; padding:14px; } /* Entity badge */ .cmw-entity-badge{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:500; background:var(--cmw-accent-bg); color:var(--cmw-accent-txt); cursor:pointer; border:1px solid var(--border); } /* Receipt-attached indicator (2026-07-07) — small icon shown in the Transactions/Account Detail row next to the payee name when a receipt has been matched to this transaction (receipts.transaction_id), so the receipt/matching relationship is visible from both directions instead of only from the Receipts flyout's Matched tab. */ .cmw-receipt-badge{ display:inline-flex; align-items:center; justify-content:center; font-size:11px; margin-left:5px; opacity:0.85; } /* Bills */ .cmw-bill-section{ margin-bottom:18px; } .cmw-bill-section-title{ font-size:13px; font-weight:650; color:var(--text-primary); margin:0 0 8px; } .cmw-bill-list{ display:flex; flex-direction:column; gap:6px; } .cmw-bill-card{ display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--text-muted); border-radius:var(--cmw-radius-sm); padding:10px 13px; } .cmw-bill-card.overdue{ border-left-color:var(--cmw-neg); } .cmw-bill-card.due_soon{ border-left-color:var(--cmw-warn); } .cmw-bill-card.paid{ border-left-color:var(--cmw-pos); } .cmw-bill-card.upcoming{ border-left-color:var(--cmw-accent); } .cmw-bill-main{ display:flex; flex-direction:column; gap:2px; min-width:0; } .cmw-bill-name{ font-size:13px; font-weight:600; color:var(--text-primary); display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .cmw-bill-date{ font-size:11px; color:var(--text-muted); } .cmw-bill-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; position:relative; } .cmw-bill-amt{ font-size:13px; font-weight:650; color:var(--text-primary); white-space:nowrap; } .cmw-bill-flag{ color:var(--cmw-neg); font-size:11px; font-weight:600; } /* 2026-07-19: the plain "SimpleFIN" source label on institution cards used to reuse .cmw-bill-flag (var(--cmw-neg), the same red as overdue-bill and sync-error flags), which read as an error/warning even though it's just naming the sync source -- same neutral accent pair already used for .tag-source-bank-sync below, so the two aggregator labels look consistent with each other instead of one looking alarmed. Actual "Sync error" / "Disconnected" badges on the same card still use .cmw-bill-flag on purpose -- those really are errors. */ .cmw-simplefin-badge{ background:var(--cmw-accent-bg); color:var(--cmw-accent-txt); font-size:11px; font-weight:600; padding:1px 7px; border-radius:999px; } .cmw-bill-empty{ padding:30px; text-align:center; color:var(--text-muted); font-size:13px; } /* details.cmw-bill-paid (Recently Paid collapse) removed 2026-07-14 — the status view is a Kanban board now (see .cmw-bill-board below), each bucket including Paid is its own always-visible column, so there's nothing left to collapse. .cmw-bill-section/-list/-card/-main/-name/ -right above stay — still used by partials/_paycheck_list.html and, for -card/-main/-name/-right, by the Payee/Date/Tag grouped Bills view (partials/_bill_group_card.html), which keeps the wider row layout on purpose (a Kanban lane doesn't make sense for those groupings). */ /* Bills & Income Kanban boards (2026-07-14, status view only — see partials/_bills_list.html/_paycheck_list.html + partials/_bill_card_kanban.html/_paycheck_card_kanban.html). 2026-07-18 ("the column widths of the income and bills tabs should be 4 equal column widths that fit"): was a flex row of fixed 250px columns that overflowed into horizontal scroll any time the 4 columns' combined width exceeded the container — never actually "4 equal columns that fit", just 4 fixed-width ones that may or may not add up to the available space. Switched to a 4-track grid so all four always divide the container width evenly with no scrollbar, down to tablet width; below that (four columns really don't fit no matter how they're sized on a phone) it falls back to the original horizontal-scroll-per-column behavior. min-width:0 on the column is required with grid — without it, a column containing something wide/unbreakable (a long merchant name, a row of tag badges) would force its grid track wider than its equal share, breaking the "equal width" part again. */ /* auto-fit + minmax(0, 1fr), not a hardcoded repeat(4, ...) — this same board scaffolding is also reused verbatim by the Receipts board (partials/_rx_board.html), which only has 3 columns, not 4; auto-fit sizes however many .cmw-bill-column children actually exist into that many equal tracks (Bills/Income: 4, Receipts: 3) rather than hardcoding one board's column count onto all of them. */ .cmw-bill-board{ display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); gap:14px; padding:2px 2px 10px; } .cmw-bill-column{ min-width:0; background:var(--surface-1); border-radius:var(--cmw-radius); padding:10px; display:flex; flex-direction:column; } .cmw-bill-column-head{ display:flex; align-items:center; justify-content:space-between; padding:2px 4px 10px; flex-shrink:0; } .cmw-bill-column-title{ font-family:var(--cmw-serif); font-weight:700; font-size:13px; color:var(--cmw-accent-txt); } .cmw-bill-column-badge{ font-size:11px; font-weight:700; padding:1px 7px; border-radius:999px; } .cmw-bill-column-badge.neg{ background:rgba(210,73,62,.14); color:var(--cmw-neg); } .cmw-bill-column-badge.warn{ background:var(--cmw-warn-bg); color:var(--cmw-warn); } .cmw-bill-column-badge.info{ background:var(--cmw-accent-bg); color:var(--cmw-accent-txt); } .cmw-bill-column-badge.pos{ background:rgba(46,158,107,.14); color:var(--cmw-pos); } /* 2026-07-18 ("a filter to the right of 'Upcoming' like 'Next # months'") — sits between the column title and its count badge (see _bills_list.html/_paycheck_list.html); kept small/borderless so it reads like a label, not a full form control, in the tight column head. */ .cmw-bill-upcoming-select{ width:auto; min-width:0; font-size:10px; font-weight:600; padding:1px 4px; color:var(--text-muted); border:1px solid var(--border); border-radius:999px; background:var(--surface-2); flex-shrink:0; } /* Each column scrolls its own contents independently instead of the whole page growing — same "cap it, don't let one bucket dominate" idea the old Recently Paid
collapse used to handle, just via scroll instead of collapse now that every bucket is always visible as its own column. */ .cmw-bill-column-body{ display:flex; flex-direction:column; gap:8px; max-height:560px; overflow-y:auto; padding-right:2px; } .cmw-bill-column-empty{ color:var(--text-muted); font-size:12px; padding:8px 2px; } @media (max-width: 900px){ .cmw-bill-board{ display:flex; overflow-x:auto; } .cmw-bill-column{ flex:0 0 82vw; } } .cmw-bill-kcard{ position:relative; background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--text-muted); border-radius:var(--cmw-radius-sm); padding:10px 11px; } .cmw-bill-kcard.overdue{ border-left-color:var(--cmw-neg); } .cmw-bill-kcard.due_soon{ border-left-color:var(--cmw-warn); } .cmw-bill-kcard.upcoming{ border-left-color:var(--cmw-accent); } .cmw-bill-kcard.paid{ border-left-color:var(--cmw-pos); opacity:.8; } .cmw-bill-kcard-name{ font-size:12.5px; font-weight:600; color:var(--text-primary); display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .cmw-bill-kcard-bottom{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; } .cmw-bill-kcard-actions{ display:flex; align-items:center; gap:4px; position:relative; } /* "..." row-action menu (2026-07-14) — first use of this pattern in the app; kept generic (cmw-bill- prefixed for now since Bills is the only caller) but styled plainly enough to lift into a shared component later if another dense list (Transactions, Vault) wants the same treatment. Toggled open/closed via event delegation in bills.html's extra_scripts block, NOT a direct listener — this markup lives inside #bills-list-wrap, which every bill action replaces wholesale (hx-swap="outerHTML"), so any listener bound directly to a menu button would be destroyed on the very next Enter/Mark Paid/Edit/Delete click. */ .cmw-bill-menu-btn{ background:none; border:1px solid var(--border); border-radius:6px; width:26px; height:26px; padding:0; color:var(--text-secondary); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .cmw-bill-menu-btn:hover{ color:var(--cmw-accent); border-color:var(--cmw-accent); } .cmw-bill-menu{ /* 2026-08-03 ("I don't even see the edit/delete window now"): was position:absolute (against .cmw-bill-kcard-actions, position:relative) with a static right:0/top:32px. base.html's positionBillMenu() now computes viewport-relative coordinates (getBoundingClientRect) and writes them to inline top/left specifically so the menu can escape .cmw-bill-column-body's overflow-y:auto clipping — but with the menu still position:absolute, those same px values were being placed relative to its offset parent instead of the viewport, landing the menu off-screen or in the wrong spot every time. position:fixed is what actually makes viewport-relative coordinates correct; z-index bumped above the sticky header (100) since a fixed element now renders in a different stacking context than before. */ display:none; position:fixed; z-index:150; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--cmw-radius-sm); box-shadow:var(--cmw-shadow); min-width:130px; overflow:hidden; } .cmw-bill-menu.open{ display:block; } .cmw-bill-menu-item{ display:block; width:100%; text-align:left; background:none; border:none; border-top:1px solid var(--border); border-radius:0; padding:8px 11px; font-size:12px; color:var(--text-primary); cursor:pointer; } .cmw-bill-menu-item:first-child{ border-top:none; } .cmw-bill-menu-item:hover{ background:var(--surface-1); color:var(--cmw-accent); } .cmw-bill-menu-item.danger{ color:var(--cmw-neg); } .cmw-bill-menu-item.danger:hover{ background:var(--surface-1); color:var(--cmw-neg); } /* Receipts Kanban board (2026-07-15, replaces the old always-editable Pending Receipts table + the separate Matched flyout tab — see templates/receipts_pending.html, partials/_rx_board.html). The board scaffolding itself (.cmw-bill-board/-column/-column-head/-title/-badge/ -body/-empty, above) is reused verbatim rather than duplicated — that CSS was already written generic on purpose ("kept cmw-bill- prefixed for now... styled plainly enough to lift into a shared component later if another dense list wants the same treatment", 2026-07-14) and there's nothing bill-specific about column layout/spacing. Only the card needs new rules — a receipt card's shape (source badge, match badge, a candidate/bank-transaction mini preview) doesn't map onto .cmw-bill-kcard's bucket-color-left-border idea, so no menu component either: these cards only ever have 1-2 actions, no need for Bills' "..." overflow menu. */ .cmw-rx-kcard{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--cmw-radius-sm); padding:10px 11px; } .cmw-rx-kcard-top{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:5px; } .cmw-rx-kcard-name{ font-size:12.5px; font-weight:600; color:var(--text-primary); } .cmw-rx-kcard-sub{ font-size:11px; color:var(--text-muted); margin-top:2px; } .cmw-rx-kcard-candidate{ margin-top:8px; padding:7px 8px; background:var(--surface-1); border-radius:var(--cmw-radius-sm); border:1px dashed var(--border); } .cmw-rx-kcard-candidate-name{ font-size:12px; font-weight:600; color:var(--text-primary); } .cmw-rx-kcard-bottom{ display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap; } .tag-rx-match{ background:rgba(46,158,107,.14); color:var(--cmw-pos); } /* Institution-first account cards (2026-07-06 feedback) — replaces the old one-card-per-account vertical stack on the Linked Financial Institutions tab. Grid defaults to 4 wide (user asked for "3 or 4"), steps down to 3 then 1, matching the review board's breakpoint convention. */ .cmw-institution-grid{ display:grid; grid-template-columns:repeat(4, minmax(260px, 1fr)); gap:14px; align-items:start; } @media (max-width: 1400px){ .cmw-institution-grid{ grid-template-columns:repeat(3, minmax(240px, 1fr)); } } @media (max-width: 960px){ .cmw-institution-grid{ grid-template-columns:1fr; } } /* 2026-07-19 ("I want all the review queue cards to be minimized but expandable, similar to the uncategorized") — generic collapse chrome for the per-card
now wrapping every Review Queue card (receipts no-match/with-match, manual entries no-match/with-match overlaps, bank-no-receipt), same "collapsed by default, click to expand the full edit form" shape _review_group_row.html's own "Handle individually" disclosure already established for Uncategorized's grouped cards. One shared class instead of repeating this per card template. */ .cmw-review-card-details{ margin-top:2px; } .cmw-review-card-details > summary{ cursor:pointer; list-style:none; } .cmw-review-card-details > summary::-webkit-details-marker{ display:none; } .cmw-review-card-details > summary .cmw-review-card-chevron{ color:var(--text-muted); font-size:10px; display:inline-block; transition:transform .15s ease; } .cmw-review-card-details[open] > summary .cmw-review-card-chevron{ transform:rotate(180deg); } .cmw-review-card-details > summary .cmw-review-card-summary-sub{ margin-top:2px; } /* 2026-07-19 ("I need action button visible without expanding... smaller with an icon when not expanded is fine") — compact one-click action buttons living inside a card's (or, for cards whose header already sits outside
entirely, right next to it) so the primary action (Confirm match, Same purchase, Save & Accept, etc.) never requires opening the card first. 2026-07-19 follow-up #1 ("the icons need to be the same size as the other buttons ('X', check, etc)") — first pass gave these their own fixed width:24px/height:24px box, visibly smaller than the plain "✕" delete buttons next to them. Tried matching manual_nomatch_row's compact padding:2px 7px convention instead — turned out that read as TOO small once every icon (not just that one delete button) used it (follow-up #2, "those are the ones that are too small"). 2026-07-19 follow-up #2 — simplest fix, no more guessing at a size: this is now just a flex-shrink guard, nothing else. Every icon button plain-inherits `button, .cmw-btn`'s own default padding:8px 12px / font-size:12.5px box — the SAME default sizing already used everywhere else in this app (including the receipt card's own "✕" delete button, which was never touched and was never flagged as wrong), so "same size as the other buttons" now holds by definition rather than by a hand- picked number. */ .cmw-review-card-icon-btn{ flex-shrink:0; } .cmw-institution-card{ padding:12px 14px; min-width:0; } .cmw-institution-card details summary{ cursor:pointer; list-style:none; } .cmw-institution-card details summary::-webkit-details-marker{ display:none; } .cmw-institution-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; min-width:0; } .cmw-institution-head > div:first-child{ min-width:0; } .cmw-institution-title{ font-family:var(--cmw-serif); font-weight:700; font-size:14px; color:var(--cmw-accent-txt); } /* 2026-07-19: institution-header link (Chase, Strata Trust, etc.) can be a long unbroken URL string. Grid/flex items default to min-width:auto, so without the min-width:0 rules above + this wrap rule, that string forces the card wider than its grid track and bleeds into the neighboring card. */ .cmw-institution-head a{ overflow-wrap:anywhere; word-break:break-word; } .cmw-institution-accounts{ margin-top:10px; padding-top:10px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; } .cmw-institution-account-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; } /* Generic data table (Cash Flow, Net Worth, Reports, ...) */ .cmw-data-table{ width:100%; border-collapse:collapse; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--cmw-radius); overflow:hidden; box-shadow:var(--cmw-shadow); font-size:12.5px; margin-bottom:14px; } .cmw-data-table th{ text-align:right; padding:8px 10px; font-size:10px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; background:var(--surface-1); border-bottom:1px solid var(--border); } .cmw-data-table th:first-child, .cmw-data-table td:first-child{ text-align:left; } .cmw-data-table td{ padding:7px 10px; text-align:right; border-bottom:1px solid var(--border); color:var(--text-secondary); } .cmw-data-table tr:last-child td{ border-bottom:none; } .cmw-data-table td.pos{ color:var(--cmw-pos); } .cmw-data-table td.neg{ color:var(--cmw-neg); } /* 2026-08-12 ("the payment schedule header should be fixed") — dedicated modifier for the Mortgage Payment Schedule table (up to 360 rows for a 30-year loan) rather than changing base .cmw-data-table, which several short, non-scrolling summary tables (Cash Flow, Net Worth, Reports) also use and don't want a sticky header on. Mirrors .cmw-ntable's own already- proven sticky approach (see that class's history comment above, ~line 599) instead of reinventing it: .cmw-data-table's overflow:hidden (there for its rounded corners) makes the itself a clipping/scrolling ancestor, which silently breaks position:sticky on descendants — same root cause .cmw-table-scroll/.cmw-ntable already hit and fixed by dropping overflow entirely and letting the header stick to the PAGE (var(--cmw-stack-top)) instead of a local scroll box. */ .cmw-sched-table{ overflow:visible; } .cmw-sched-table thead th{ position:sticky; top:var(--cmw-stack-top, 140px); z-index:5; background:var(--surface-1); } /* Vault cards (2026-07-06 redesign, roadmap #19) — replaces the original table layout per feedback: "I like the idea of cards layout similar to the review queue." One .cmw-vault-group per category (or one flat group for non-category sorts), each with a sticky header, holding a responsive grid of .cmw-vault-card. */ .cmw-vault-group{ margin-bottom:18px; } .cmw-vault-cat-head{ display:flex; align-items:center; gap:8px; border-left:3px solid var(--cmw-accent); padding:8px 0 8px 9px; margin-bottom:10px; /* Sticky — same --cmw-stack-top slot the Review Queue's column heads use (see .cmw-review-col-head), just one at a time since these stack vertically instead of side-by-side: each group's header takes over the same sticky spot as its cards scroll past, "iOS section list" style. */ position:sticky; top:var(--cmw-stack-top, 140px); z-index:55; background:var(--bg); } .cmw-vault-flat-head{ border-left-color:var(--text-muted); } .cmw-vault-cat-title{ font-family:var(--cmw-serif); font-size:14px; font-weight:700; color:var(--cmw-accent-txt); } .cmw-vault-cat-count{ font-size:10.5px; font-weight:700; color:var(--text-muted); background:var(--surface-1); border:1px solid var(--border); border-radius:999px; padding:1px 7px; } .cmw-vault-empty{ color:var(--text-muted); font-style:italic; font-size:12.5px; padding:2px 0 2px 12px; } .cmw-vault-card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px; } .cmw-vault-card{ background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--cmw-accent); border-radius:var(--cmw-radius-sm); padding:11px 13px; box-shadow:var(--cmw-shadow); } .cmw-vault-card.expiring{ border-left-color:var(--cmw-neg); background:var(--cmw-warn-bg); } .cmw-vault-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; } .cmw-vault-card-title{ font-weight:600; font-size:13px; line-height:1.35; } .cmw-vault-card-title a{ color:var(--text-primary); } .cmw-vault-card-title a:hover{ color:var(--cmw-accent); } .cmw-vault-card-actions{ display:flex; gap:4px; flex-shrink:0; } .cmw-vault-card-btn{ background:none; border:1px solid var(--border); border-radius:var(--cmw-radius-sm); color:var(--text-muted); font-size:11px; line-height:1; padding:3px 6px; cursor:pointer; } .cmw-vault-card-btn:hover{ color:var(--cmw-accent); border-color:var(--cmw-accent); } .cmw-vault-card-badges{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; } .cmw-vault-badge{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border-radius:999px; background:var(--surface-1); color:var(--text-muted); border:1px solid var(--border); } .cmw-vault-badge-cat{ color:var(--cmw-accent-txt); border-color:var(--cmw-accent); } .cmw-vault-badge-person{ background:var(--cmw-accent-bg); color:var(--cmw-accent-txt); border-color:var(--cmw-accent); } .cmw-vault-badge-date{ } .cmw-vault-badge-date.soon{ background:var(--cmw-neg); color:#fff; border-color:var(--cmw-neg); } .cmw-vault-card-notes{ color:var(--text-muted); font-size:11.5px; margin-top:7px; line-height:1.4; } .cmw-vault-card-fields{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; padding-top:8px; border-top:1px solid var(--border); } .cmw-vault-chip{ font-size:10.5px; color:var(--text-secondary); background:var(--surface-1); border:1px solid var(--border); border-radius:6px; padding:2px 7px; } .cmw-vault-chip strong{ color:var(--text-muted); font-weight:600; } /* Vault edit modal — repeatable custom-field Name/Value rows, same idea as .cmw-split-line's clone-a-row pattern in _split_modal.html. */ .cmw-vault-fields-section{ margin-top:12px; } .cmw-vault-fields-section > label{ display:block; margin-bottom:6px; font-size:11.5px; font-weight:600; } .cmw-vault-field-row{ display:flex; gap:6px; margin-bottom:6px; align-items:center; } .cmw-vault-field-row input{ flex:1; min-width:0; } .cmw-vault-field-remove{ flex-shrink:0; background:none; border:1px solid var(--border); border-radius:var(--cmw-radius-sm); color:var(--text-muted); font-size:11px; line-height:1; padding:5px 8px; cursor:pointer; } .cmw-vault-field-remove:hover{ color:var(--cmw-neg); border-color:var(--cmw-neg); } /* Chart container */ .cmw-chart-card{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--cmw-radius); box-shadow:var(--cmw-shadow); padding:14px; margin-bottom:14px; } /* Generic form grid (Cash Flow scenarios, future CRUD forms) */ .cmw-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; } .cmw-form-grid label{ display:block; font-size:11.5px; color:var(--text-secondary); margin-bottom:3px; } .cmw-form-grid input, .cmw-form-grid select{ width:100%; } .cmw-form-grid .full{ grid-column:1 / -1; } .cmw-form-actions{ margin-top:10px; } /* Auth / login screen */ .cmw-auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; } .cmw-auth-card{ width:100%; max-width:380px; padding:32px 28px; } .cmw-auth-logo{ text-align:center; margin-bottom:28px; } .cmw-auth-logo .glyph{ font-size:34px; margin-bottom:6px; } .cmw-auth-logo .name{ font-size:22px; font-weight:600; font-family:var(--cmw-serif); color:var(--cmw-accent-txt); } .cmw-auth-logo .tag{ font-size:13px; color:var(--text-muted); margin-top:2px; } .cmw-auth-field{ margin-bottom:14px; } .cmw-auth-field label{ display:block; font-size:12px; color:var(--text-secondary); margin-bottom:4px; } .cmw-auth-field input{ width:100%; } .cmw-auth-error{ background:var(--cmw-warn-bg); color:var(--cmw-warn); border-radius:var(--cmw-radius-sm); padding:8px 10px; font-size:12.5px; margin-bottom:14px; } .cmw-auth-hint{ text-align:center; font-size:12.5px; color:var(--text-muted); margin-bottom:16px; } .cmw-auth-card button.primary{ width:100%; padding:10px; font-size:13px; } .cmw-auth-back{ display:block; text-align:center; margin-top:14px; font-size:12.5px; } .cmw-auth-qr{ text-align:center; margin-bottom:16px; } .cmw-auth-qr img{ border-radius:8px; border:1px solid var(--border); } .cmw-auth-secret{ font-family:monospace; font-size:11px; background:var(--surface-1); border:1px solid var(--border); border-radius:6px; padding:6px 8px; text-align:center; margin-top:8px; word-break:break-all; } /* =========================================================================== * Global HTMX in-flight indicator (2026-07-16, "so i know something is * happening") — htmx automatically adds an .htmx-request class to whatever * element triggered a request (the field/button itself, unless hx-indicator * points elsewhere) for exactly as long as that request is in flight. * * 2026-07-16 follow-up ("the dashboard and category windows is perpetually * dimmer") — the original rule below was a blanket `.htmx-request{opacity}` * that matched ANY element carrying the class, not just buttons/inputs a * user just clicked. The account sidebar (#cmw-account-panel, present on * every non-hide_sidebar page — Dashboard and Categories included) is * reloaded via htmx.ajax() targeting that whole container on every page * load AND on every `accountsChanged` body event (base.html), so it was * picking up the class — and the opacity dim — constantly, with no spinner * to explain why, reading as a permanently duller page rather than a * momentary loading state. Scoped down to just the interactive controls * (buttons/inputs/selects a person actually clicked or typed into) so * background/container-level refreshes no longer dim large chunks of the * page; those still swap their label for a small spinner, inputs/selects * still dim+cursor:wait, so a slow request on an actual user action still * doesn't silently look identical to a frozen page. * ======================================================================== */ button.htmx-request, .cmw-btn.htmx-request, .primary.htmx-request, input.htmx-request, select.htmx-request, textarea.htmx-request{ opacity:.55; cursor:wait; transition:opacity .1s ease; } button.htmx-request, .cmw-btn.htmx-request, .primary.htmx-request{ position:relative; color:transparent !important; pointer-events:none; } button.htmx-request::after, .cmw-btn.htmx-request::after, .primary.htmx-request::after{ content:""; position:absolute; top:50%; left:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; border:2px solid var(--border); border-top-color:var(--cmw-accent); animation:cmw-spin .6s linear infinite; } @keyframes cmw-spin{ to{ transform:rotate(360deg); } }