/* shell.css — next-shell layout + placeholder view styling. * * Universal reset and `[hidden]` rule live in ../css/00-reset.css under * `@layer reset`. We rely on that file being loaded BEFORE this one (see * app/next/index.html) so the reset doesn't outrank platform-layer rules * — TRK-410. */ html, body { height: 100vh; overflow: hidden; } body { font: var(--fs-base, 13px) -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; color: var(--fg); background: var(--bg); display: flex; flex-direction: column; } /* Finder-style layout: sidebar full-height, right column = topbar + main. */ #shell { flex: 1; display: flex; min-height: 0; overflow: hidden; } /* overflow:visible so the sidebar's right-edge drop shadow can render past the nav column into the splitter area (mac-light/-dark themes). position:relative anchors the collapsed sidebar's peek-on-hover overlay (position:absolute) to this host — otherwise it would pin to . */ #nav-mount { flex-shrink: 0; height: 100%; overflow: visible; padding: 7px; position: relative; } /* TRK-395 wave 7 — collapsed nav width via class + CSS !important. Splitter writes inline non-important width on the same element; CSS !important wins. Replaces TWO inline `setProperty('width','54px','important')` calls in shell.js (the C2 inline-!important gotcha pattern). 40px rail + 2 × 7px padding = 54px. */ #nav-mount.is-collapsed { width: 54px !important; } #nav-splitter-mount { flex-shrink: 0; } #right-column { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } #top-mount { flex-shrink: 0; } #main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: auto; } /* 50px top-inset inside the sidebar — keeps macOS traffic lights clear. */ #nav-mount .ui-sidebar.layout-list .ui-sidebar__rail { padding-top: 50px; } #nav-mount .ui-sidebar.layout-list.is-collapsed .ui-sidebar__rail { padding-top: 50px; } /* Topbar build tag (Sift brand title removed — Finder-style: only nav + view name) */ .toolbar-build-tag { font-size: var(--fs-xs); color: var(--muted); padding: 2px 6px; background: var(--code-bg); border-radius: var(--r-sm); letter-spacing: 0.04em; text-transform: uppercase; } /* Finder-style folder/view label sitting next to the back/forward buttons */ .crumb { font-size: var(--fs-base); font-weight: 600; color: #4D4D4D; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px 0 6px; -webkit-app-region: no-drag; user-select: none; } body.window-inactive .crumb { color: #B8B8B8; } /* Icon-button disabled state lives in platform CSS (app/css/05-icon-btn.css). */ /* Electron drag zone — topbar owns window drag, interactive bits override */ .electron #top-mount { -webkit-app-region: drag; } .electron .ui-topbar__btn, .electron .ui-topbar input, .electron .toolbar-build-tag { -webkit-app-region: no-drag; } /* ─── Placeholder views (Phase 0) ───────────────────────────────────────── */ .placeholder-view { padding: var(--sp-6, 32px) var(--sp-5, 24px); max-width: 800px; margin: 0 auto; width: 100%; } .placeholder-title { font-size: var(--fs-xl, 17px); font-weight: 600; margin-bottom: var(--sp-1, 4px); } .placeholder-sub { font-size: var(--fs-sm, 12px); color: var(--muted); margin-bottom: var(--sp-5, 24px); } .placeholder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3, 12px); } .placeholder-card { display: block; padding: var(--sp-4, 16px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg, 14px); cursor: pointer; text-decoration: none; color: inherit; transition: border-color 120ms, transform 120ms; } .placeholder-card:hover { border-color: var(--accent); transform: translateY(-1px); } .placeholder-card__title { font-size: var(--fs-base); font-weight: 600; margin-bottom: var(--sp-1, 4px); } .placeholder-card__sub { font-size: var(--fs-xs, 11px); color: var(--muted); } /* ─── Category picker popup ─────────────────────────────────────────────── */ .cat-picker { background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); z-index: 2000; max-height: 360px; display: flex; flex-direction: column; overflow: hidden; min-width: 260px; } .cat-picker__filter { font: inherit; font-size: var(--fs-sm); padding: 8px 12px; border: none; border-bottom: 1px solid var(--border); background: var(--surface); color: var(--fg); outline: none; } .cat-picker__filter:focus { border-bottom-color: var(--accent); } .cat-picker__list { flex: 1; overflow: auto; padding: 4px 0; } .cat-picker__row { display: flex; align-items: center; padding: 5px 12px; font-size: var(--fs-sm); cursor: pointer; gap: 6px; } .cat-picker__row.is-active { background: var(--ui-sidebar-btn-active, rgba(10,88,184,0.12)); } .cat-picker__row.is-selected .cat-picker__cat { font-weight: 500; } .cat-picker__cat { color: var(--fg); } .cat-picker__sep { color: var(--muted); } .cat-picker__sub { color: var(--muted); } .cat-picker__empty { padding: 12px; font-size: var(--fs-sm); color: var(--muted); text-align: center; } /* ─── Edit-txn category button ──────────────────────────────────────────── */ .edit-txn-cat-btn { font: inherit; font-size: var(--fs-sm); padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--fg); cursor: pointer; text-align: left; display: flex; align-items: center; justify-content: space-between; } .edit-txn-cat-btn:hover { border-color: var(--accent); } .edit-txn-cat-caret { color: var(--muted); font-size: var(--fs-xs); } /* ─── Bulk action bar ───────────────────────────────────────────────────── */ .bulk-bar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 6px 10px; display: flex; align-items: center; gap: var(--sp-2); z-index: 500; font-size: var(--fs-sm); max-width: calc(100% - 32px); } .bulk-bar[hidden] { display: none; } .bulk-bar__count { color: var(--muted); padding-right: var(--sp-2); border-right: 1px solid var(--border); } .bulk-bar__actions { display: flex; gap: 4px; } .bulk-bar__btn { font: inherit; font-size: var(--fs-sm); padding: 4px 10px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--fg); cursor: pointer; } .bulk-bar__btn:hover { background: var(--hover); } .bulk-bar__btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); } .bulk-bar__btn--primary:hover { filter: brightness(1.08); background: var(--accent); } .bulk-bar__btn--ghost { color: var(--muted); } .txn-table-host, .bills-table-host, .accounts-table-host, .review-table-host { position: relative; } /* ─── Import view (page) ────────────────────────────────────────────────── */ .import-view { padding: var(--sp-5, 24px) var(--sp-5, 24px) var(--sp-6, 32px); max-width: 960px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; } .import-view__body { display: flex; flex-direction: column; gap: var(--sp-4, 16px); } .import-status { font-size: var(--fs-sm, 12px); color: var(--muted); text-align: right; } .import-status:empty { display: none; } .import-status .import-error { color: var(--debit, #c33); } .import-actions { display: flex; gap: var(--sp-2, 8px); justify-content: flex-end; padding-top: var(--sp-2, 8px); } .import-btn { font: inherit; font-size: var(--fs-sm); padding: 6px 14px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--fg); cursor: pointer; } .import-btn:hover { background: var(--hover); } .import-btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); } .import-btn--primary:hover { filter: brightness(1.08); background: var(--accent); } .import-btn--primary:disabled { opacity: 0.6; cursor: default; } .import-btn--ghost { color: var(--muted); } .import-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-6); border: 2px dashed var(--border); border-radius: var(--r-md); background: var(--code-bg); cursor: pointer; text-align: center; transition: border-color 120ms, background 120ms; } .import-dropzone:hover { border-color: var(--accent); } .import-dropzone.is-dragover { border-color: var(--accent); background: var(--ui-sidebar-btn-active, rgba(10,88,184,0.08)); } .import-dropzone__title { font-size: var(--fs-base); font-weight: 500; margin-bottom: var(--sp-1); } .import-dropzone__sub { font-size: var(--fs-sm); color: var(--muted); } .import-demo { display: flex; align-items: center; justify-content: center; gap: var(--sp-2, 8px); } .import-demo__hint { font-size: var(--fs-sm); color: var(--muted); } .import-meta { display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; } .import-meta__field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 180px; } .import-meta__field input { font: inherit; font-size: var(--fs-sm); padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--fg); } .import-summary { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); padding-bottom: 6px; } .import-format { font-family: 'SF Mono', Menlo, monospace; font-size: var(--fs-xs); padding: 2px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg); } .import-count { color: var(--fg); font-weight: 500; } .import-dropped { color: #c4453b; } .import-error { color: #c4453b; } .import-preview { } .import-preview__title { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-2); text-transform: uppercase; letter-spacing: 0.04em; } .import-preview__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .import-preview__table th, .import-preview__table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); } .import-preview__table th { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } .import-preview__table .import-merchant { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .import-preview__table .import-amount { text-align: right; font-variant-numeric: tabular-nums; } /* ─── Import folders (Electron only) ────────────────────────────────────── */ .import-folders { margin-top: var(--sp-3, 12px); display: flex; flex-direction: column; gap: var(--sp-2, 8px); } .import-folders__header { display: flex; align-items: baseline; gap: var(--sp-2, 8px); margin-top: var(--sp-3, 12px); } .import-folders__title { font-size: var(--fs-base, 13px); font-weight: 600; } .import-folders__sub { font-size: var(--fs-xs, 11px); color: var(--muted); } .import-folders__loading, .import-folders__empty { padding: var(--sp-4, 16px); font-size: var(--fs-sm, 12px); color: var(--muted); text-align: center; background: var(--code-bg); border: 1px dashed var(--border); border-radius: var(--r-md); } .import-folders__hint { font-size: var(--fs-xs, 11px); } .import-folders__hint code { font-family: 'SF Mono', Menlo, monospace; font-size: var(--fs-xs, 11px); padding: 1px 5px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); } .import-folders__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .import-folders__table th, .import-folders__table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); } .import-folders__table tbody tr:last-child td { border-bottom: none; } .import-folders__table th { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; background: var(--code-bg); } .import-folders__table th.is-numeric, .import-folders__table td.is-numeric { text-align: right; font-variant-numeric: tabular-nums; } .import-folders__row { cursor: pointer; } .import-folders__row:hover { background: var(--hover); } .import-folders__row.is-open { background: var(--ui-sidebar-btn-active, rgba(10,88,184,0.08)); } .import-folders__acct { font-weight: 500; color: var(--fg); } .import-folders__folder, .import-folders__owner, .import-folders__root { color: var(--muted); } .import-folders__actions { text-align: right; width: 40px; } .import-folders__reveal { font: inherit; font-size: var(--fs-sm); padding: 2px 8px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; } .import-folders__reveal:hover { border-color: var(--accent); color: var(--fg); } .import-folders__files td { background: var(--code-bg); padding: var(--sp-2, 8px) var(--sp-3, 12px); } .import-folders__filelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .import-folders__filelist-loading, .import-folders__filelist-empty { font-size: var(--fs-sm); color: var(--muted); padding: 4px 2px; } .import-folders__file { display: grid; grid-template-columns: 1fr 80px 100px 80px; align-items: center; gap: var(--sp-2, 8px); padding: 4px 6px; border-radius: var(--r-sm); font-size: var(--fs-sm); } .import-folders__file:hover { background: var(--surface); } .import-folders__file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); } .import-folders__file-size, .import-folders__file-date { font-size: var(--fs-xs); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; } .import-folders__file-btn { font: inherit; font-size: var(--fs-xs); padding: 3px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--fg); cursor: pointer; } .import-folders__file-btn:hover { border-color: var(--accent); color: var(--accent); } /* ─── Command palette (⌘K) — Mac Spotlight style ────────────────────────── */ .cmd-palette { position: fixed; inset: 0; z-index: 2500; display: flex; align-items: flex-start; justify-content: center; padding-top: 120px; font-family: inherit; } .cmd-palette__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.18); backdrop-filter: blur(4px); } .cmd-palette__box { position: relative; flex: 0 0 auto; width: min(520px, calc(100vw - 32px)); max-height: min(420px, 70vh); background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06); display: flex; flex-direction: column; overflow: hidden; } .cmd-palette__input { flex-shrink: 0; font: inherit; font-size: 14px; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--fg); outline: none; padding: 10px 14px; width: 100%; box-sizing: border-box; } .cmd-palette__input::placeholder { color: var(--muted); opacity: 0.7; } .cmd-palette__list { flex: 1; overflow-y: auto; padding: 4px 0; } .cmd-palette__row { display: flex; align-items: center; gap: 10px; padding: 5px 14px; font-size: 13px; line-height: 1.3; cursor: pointer; transition: background 0.08s; } .cmd-palette__row:hover, .cmd-palette__row.is-active { background: var(--ui-sidebar-btn-active, rgba(10,88,184,0.12)); } .cmd-palette__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 16px; color: var(--muted); } .cmd-palette__icon svg { width: 16px; height: 16px; } .cmd-palette__row.is-active .cmd-palette__icon, .cmd-palette__row:hover .cmd-palette__icon { color: inherit; } .cmd-palette__group { flex-shrink: 0; width: 52px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .cmd-palette__row.is-active .cmd-palette__group, .cmd-palette__row:hover .cmd-palette__group { color: inherit; opacity: 0.7; } .cmd-palette__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmd-palette__label mark { background: rgba(255, 215, 0, 0.35); color: inherit; padding: 0 1px; border-radius: 2px; } .cmd-palette__kbd { font-size: 11px; color: var(--muted); padding: 1px 6px; background: var(--code-bg, rgba(0,0,0,0.05)); border: 1px solid var(--border); border-radius: 4px; flex-shrink: 0; } .cmd-palette__hint { display: flex; gap: 14px; padding: 6px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); flex-shrink: 0; } .cmd-palette__empty { padding: 20px 14px; text-align: center; color: var(--muted); font-size: 13px; } /* ─── Mobile responsive (≤ 768px) ──────────────────────────────────────── */ /* Sidebar collapses to a bottom tab bar; topbar shrinks; tables simplify. */ @media (max-width: 768px) { #shell { flex-direction: column-reverse; } #nav-mount { width: 100% !important; height: auto !important; flex-shrink: 0; border-top: 1px solid var(--border); overflow: visible; } #nav-splitter-mount { display: none; } #nav-mount .ui-sidebar { height: auto !important; border-radius: 0 !important; box-shadow: none !important; padding-top: 0 !important; } #nav-mount .ui-sidebar__rail { flex-direction: row !important; padding: 4px var(--sp-1) !important; justify-content: space-around; gap: 0 !important; overflow-x: auto; } #nav-mount .ui-sidebar.layout-list .ui-sidebar__rail { padding-top: 4px !important; } #nav-mount .ui-sidebar__btn { flex-direction: column !important; justify-content: center !important; height: auto !important; padding: 6px 10px !important; min-width: 56px; gap: 2px !important; border-radius: var(--r-sm) !important; } #nav-mount .ui-sidebar__btn-label { font-size: 10px !important; margin-top: 2px !important; } #nav-mount .ui-sidebar__btn > svg, #nav-mount .ui-sidebar__btn > i { width: 18px !important; height: 18px !important; } /* Footer (Settings) becomes another tab in the row */ #nav-mount .ui-sidebar__footer { border-top: none !important; padding: 0 !important; } /* Shrink topbar */ body { font-size: var(--fs-sm, 12px); } .crumb { font-size: var(--fs-sm, 12px); } .toolbar-build-tag { display: none; } /* Hide less-critical columns by default on narrow viewport */ .txn-view .tv-th:nth-child(n+4), .txn-view .tv-td:nth-child(n+4) { display: none; } .bills-view .tv-th:nth-child(n+4), .bills-view .tv-td:nth-child(n+4) { display: none; } .accounts-view .tv-th:nth-child(n+3), .accounts-view .tv-td:nth-child(n+3) { display: none; } /* Settings tab layout: stack vertically */ .settings-body { grid-template-columns: 1fr; } .settings-tabs { flex-direction: row !important; border-right: none !important; border-bottom: 1px solid var(--border); overflow-x: auto; padding: var(--sp-1) var(--sp-2); } .settings-tab { white-space: nowrap; } .settings-panel { padding: var(--sp-3); } /* Home tiles one-per-row on very narrow */ .home-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } /* Modal full-width with margin */ .modal-panel { max-width: calc(100vw - 16px) !important; } .edit-txn-grid { grid-template-columns: 1fr; } } /* ─── View header (shared across data views) ───────────────────────────── */ .view-error { padding: var(--sp-5, 24px); color: #c33; font-size: var(--fs-sm); text-align: center; } /* ─── Transactions view ─────────────────────────────────────────────────── */ .txn-view { flex: 1; display: flex; flex-direction: column; min-height: 0; } .txn-table-host { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } /* Stats row (hosts table_toolbar). Left-aligned stats, right-aligned filter island — positioning is owned by the table_toolbar component, this row just provides padding and a place to live above the table. */ .txn-stats-row { padding: var(--sp-1, 4px) var(--sp-4, 16px); flex-shrink: 0; } /* Stats — compact icon+number pairs inside .tv-toolbar__stats. Text-sized lucide glyph replaces the word label; full meaning is exposed via the platform tooltip on the .txn-stat wrapper (data-tip). */ .txn-stat { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm, 12px); white-space: nowrap; } .txn-stat__n { font-weight: 600; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .txn-stat__n--count { color: var(--fg); } .txn-stat__n--debit { color: #c4453b; } .txn-stat__n--credit { color: #2e8b57; } .txn-stat__lbl { color: var(--muted); text-transform: lowercase; letter-spacing: 0.01em; } /* lucide.createIcons() replaces the with an