/* ═══════════════════════════════════════════════════════════ Finance module — Monzo-inspired: coral brand accent, near-black navy for structure/text, soft cool-grey background, bold numerals, shadow-based elevation instead of borders. Isolated to #module-finance — zero shared selectors with Kitchen or the launcher/login ops theme. ═══════════════════════════════════════════════════════════ */ :root { --fin-bg: #F3F3F8; --fin-card: #FFFFFF; --fin-coral: #FF4F5A; --fin-coral-dark: #E23744; --fin-navy: #14152B; --fin-text: #14152B; --fin-text-dim: #74748A; --fin-shadow: 0 1px 2px rgba(20,21,43,0.04), 0 4px 16px rgba(20,21,43,0.06); --fin-dock-bg: rgba(243,243,248,0.92); --fin-dashed-border: rgba(20,21,43,0.18); } /* Dark mode — toggled via body.dark (shell-owned, shared with Kitchen's own dark palette; see shell.js). Scoped to body.dark rather than body.dark #module-finance because Finance's modals (card/category manager, settings menu) are appended directly to , not nested inside #module-finance, so custom properties wouldn't reach them otherwise. --fin-coral stays vivid on purpose — the accent, not the surface, is what should pop. */ body.dark { --fin-bg: #0B0C16; --fin-card: #1B1C2E; --fin-navy: #EDEDF4; --fin-text: #EDEDF4; --fin-text-dim: #8B8CA3; --fin-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.45); --fin-dock-bg: rgba(11,12,22,0.92); --fin-dashed-border: rgba(237,237,244,0.22); } #module-finance { background: var(--fin-bg); color: var(--fin-text); height: 100%; display: flex; flex-direction: column; overflow-y: auto; font-family: var(--font-ui); -webkit-font-smoothing: antialiased; } /* ── Header ───────────────────────────────────────────────── Structural layout (single row, title truncation, action cluster) comes from the shared .mod-header rules — this just supplies Finance's own colours, same pattern as .kitchen-header. ──────── */ .fin-header { background: var(--fin-coral); border-radius: var(--r-xl); flex-shrink: 0; --mod-header-accent: rgba(255,255,255,0.55); } .fin-header .mod-header-title { font-family: var(--font-ui); font-weight: 800; color: #ffffff; letter-spacing: -0.01em; } .fin-header .mod-header-status { color: rgba(255,255,255,0.5); font-weight: 600; } .fin-header .home-btn { color: #ffffff; opacity: 0.85; } /* ── Joint / Individual view toggle ──────────────────────── */ .fin-view-toggle { display: flex; gap: 4px; background: var(--fin-card); border-radius: 999px; padding: 4px; margin: 0 var(--s4) var(--s4); box-shadow: var(--fin-shadow); flex-shrink: 0; } .fin-view-btn { flex: 1; border: none; background: none; border-radius: 999px; padding: var(--s2) 0; font-size: 13px; font-weight: 700; color: var(--fin-text-dim); cursor: pointer; font-family: var(--font-ui); transition: background 0.15s var(--ease), color 0.15s var(--ease); } .fin-view-btn.active { background: var(--fin-coral); color: #ffffff; } /* ── Hero + share cards ───────────────────────────────────── */ .fin-summary-bar { display: grid; grid-template-columns: 1fr; gap: var(--s3); padding: 0 var(--s4); margin-bottom: var(--s5); flex-shrink: 0; } .fin-share-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } .fin-summary-tile { background: var(--fin-card); border-radius: var(--r-lg); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: 4px; box-shadow: var(--fin-shadow); } .fin-summary-label { font-size: 12px; color: var(--fin-text-dim); font-weight: 600; } .fin-summary-value { font-size: 19px; font-weight: 800; color: var(--fin-navy); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* Comes after .fin-summary-tile on purpose — these override its white/navy defaults back to coral/white for the hero card. */ .fin-summary-hero { background: var(--fin-coral); border-radius: var(--r-xl); padding: var(--s5) var(--s4); } .fin-summary-hero .fin-summary-label { color: rgba(255,255,255,0.8); } .fin-summary-hero .fin-summary-value { color: #ffffff; font-size: 34px; } /* ── Budget lines, grouped by category ───────────────────── */ #fin-lines-container { flex: 1; padding: 0 var(--s4); padding-bottom: 150px; /* clears the fixed form dock */ } .fin-category-group { margin-bottom: var(--s4); } .fin-category-label { display: flex; align-items: center; gap: var(--s2); font-size: 14px; font-weight: 700; color: var(--fin-navy); padding: 0 var(--s2) var(--s2); } .fin-cat-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .fin-category-total { margin-left: auto; font-weight: 600; color: var(--fin-text-dim); font-variant-numeric: tabular-nums; } .fin-line-row { background: var(--fin-card); border-radius: var(--r-lg); margin-bottom: var(--s2); box-shadow: var(--fin-shadow); overflow: hidden; } .fin-line-main { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); } .fin-line-icon { width: 40px; height: 40px; border-radius: 50%; border: none; padding: 0; text-align: center; font-size: 18px; font-family: inherit; flex-shrink: 0; cursor: pointer; } .fin-line-icon:focus { outline: 2px solid var(--fin-coral); outline-offset: 2px; } .fin-line-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .fin-line-name { border: none; background: transparent; font-size: 15px; font-weight: 700; color: var(--fin-text); font-family: var(--font-ui); padding: 0; width: 100%; } .fin-line-name:focus { outline: none; } /* Its own full-width row rather than squeezed into .fin-line-info alongside the amount column — a named breakdown ("Dan £1,645.00 · Sarah £705.00") needs real room, not a truncated sliver. */ .fin-line-sub { font-size: 12px; color: var(--fin-text-dim); font-weight: 500; padding: 0 var(--s3) var(--s3); margin-top: calc(-1 * var(--s2)); } .fin-line-amount-col { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .fin-currency { font-size: 15px; font-weight: 800; color: var(--fin-navy); } .fin-line-amount { width: 82px; border: none; background: transparent; font-size: 15px; font-weight: 800; color: var(--fin-navy); text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-ui); } .fin-line-amount:focus { outline: none; } .fin-line-toggle { background: none; border: none; color: var(--fin-text-dim); font-size: 16px; line-height: 1; cursor: pointer; padding: var(--s2); border-radius: 50%; flex-shrink: 0; } .fin-line-toggle:hover { background: var(--fin-bg); } /* Split % and delete live in a collapsed drawer — not shown by default, so the list reads as amounts, not a spreadsheet. */ .fin-line-editor { display: none; align-items: center; gap: var(--s3); padding: 0 var(--s3) var(--s3); border-top: 1px solid var(--fin-bg); margin-top: -1px; padding-top: var(--s3); } .fin-line-row.fin-expanded .fin-line-editor { display: flex; flex-wrap: wrap; } .fin-editor-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--fin-text-dim); font-weight: 600; } .fin-editor-field select { border: 1px solid var(--fin-bg); background: var(--fin-bg); border-radius: var(--r-sm); padding: 6px var(--s2); font-size: 13px; color: var(--fin-text); font-family: var(--font-ui); } .fin-split-inputs { display: flex; gap: var(--s3); } .fin-round-toggle { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--fin-text-dim); cursor: pointer; } .fin-round-toggle input { accent-color: var(--fin-coral); width: 15px; height: 15px; } .fin-pct-row { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--fin-text); } .fin-pct-row input { width: 68px; border: 1px solid var(--fin-bg); background: var(--fin-bg); border-radius: var(--r-sm); padding: 6px; font-size: 13px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } .fin-line-delete { margin-left: auto; align-self: flex-end; background: none; border: none; color: var(--fin-coral-dark); font-size: 13px; font-weight: 700; cursor: pointer; padding: var(--s2) 0; } #module-finance .no-items { text-align: center; padding: 48px var(--s5); color: var(--fin-text-dim); font-size: 14px; font-family: var(--font-ui); font-style: normal; } /* ── Add-line form dock ───────────────────────────────────── */ .fin-form-dock { flex-shrink: 0; position: sticky; bottom: 0; background: var(--fin-dock-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--s2); } .fin-form-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); } .fin-form-dock input, .fin-form-dock select { border: none; border-radius: 999px; padding: var(--s2) var(--s4); font-size: 14px; font-family: var(--font-ui); color: var(--fin-text); background: var(--fin-card); box-shadow: var(--fin-shadow); } .fin-amount-field { display: flex; align-items: center; gap: 4px; border-radius: 999px; padding: var(--s2) var(--s4); background: var(--fin-card); box-shadow: var(--fin-shadow); } .fin-amount-field input { border: none; border-radius: 0; padding: 0; box-shadow: none; background: none; width: 70px; } #fin-add-btn { background: var(--fin-coral); color: #ffffff; border: none; border-radius: 999px; padding: var(--s2) var(--s5); font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: var(--fin-shadow); } #fin-add-btn:active { transform: scale(0.97); } /* ── Finance settings — category manager modal ───────────── Reuses the generic .modal-backdrop/.modal-sheet mechanics (same bottom-sheet slide-up used by Kitchen's settings), recoloured for Finance the same way .fin-header recolours .mod-header. ─────── */ .fin-modal-sheet .modal-sheet-title { font-family: var(--font-ui); font-weight: 800; color: var(--fin-navy); } .fin-modal-sheet .modal-close-btn { background: var(--fin-bg); color: var(--fin-text-dim); } /* kitchen.css has a `body.dark .modal-confirm-btn { background: var(--green-900); }` rule (0,2,1 specificity) that outranks .fin-modal-sheet .modal-confirm-btn's own coral override below (0,2,0) once dark mode is on, so Finance's Save button would otherwise go Kitchen-green specifically in dark mode. Re-asserted here at matching specificity. */ body.dark .fin-modal-sheet .modal-confirm-btn { background: var(--fin-coral); } body.dark .fin-modal-sheet .modal-confirm-btn:active { background: var(--fin-coral-dark); } .fin-modal-sheet .modal-sheet-sub { color: var(--fin-text-dim); font-family: var(--font-ui); } .fin-modal-sheet .modal-confirm-btn { background: var(--fin-coral); color: #ffffff; font-family: var(--font-ui); font-weight: 800; border-radius: 999px; } .fin-cat-mgr-row { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--fin-bg); } .fin-cat-mgr-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .fin-cat-mgr-input { flex: 1; border: none; border-bottom: 1px solid var(--fin-bg); font-size: 15px; font-family: var(--font-ui); color: var(--fin-text); background: transparent; padding: 4px 0; outline: none; } .fin-cat-mgr-delete { background: none; border: none; color: var(--fin-text-dim); font-size: 18px; line-height: 1; cursor: pointer; padding: var(--s1) var(--s2); border-radius: var(--r-sm); flex-shrink: 0; } .fin-cat-mgr-delete:hover { background: var(--fin-bg); color: var(--fin-coral-dark); } .fin-cat-mgr-add-row { display: flex; gap: var(--s2); margin-top: var(--s2); } .fin-cat-mgr-add-row input { flex: 1; border: 1px solid var(--fin-bg); background: var(--fin-bg); border-radius: var(--r-sm); padding: var(--s2) var(--s3); font-size: 14px; font-family: var(--font-ui); color: var(--fin-text); outline: none; } .fin-cat-mgr-add-row button { background: var(--fin-navy); color: #ffffff; border: none; border-radius: var(--r-sm); width: 40px; font-size: 18px; font-weight: 700; cursor: pointer; } /* ── Settings menu ─────────────────────────────────────────── */ .fin-settings-nav-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--s3) 0; background: none; border: none; border-top: 1px solid var(--fin-bg); cursor: pointer; text-align: left; font-family: var(--font-ui); font-size: 15px; color: var(--fin-text); } .fin-settings-nav-row:first-of-type { border-top: none; } .fin-settings-nav-row:active { background: var(--fin-bg); } .fin-settings-nav-chevron { font-size: 20px; color: var(--fin-text-dim); line-height: 1; } #fin-reminder-time-input { border: 1px solid var(--fin-bg); background: var(--fin-bg); border-radius: var(--r-sm); padding: var(--s2) var(--s3); font-size: 16px; font-family: var(--font-ui); color: var(--fin-text); outline: none; margin-bottom: var(--s3); } /* ── Reconciliation card carousel ──────────────────────────── Real credit-card proportions (1.586:1), horizontal scroll-snap rather than a JS carousel — native swipe feel, no extra machinery. Sits directly above the budget summary bar, same set of cards (joint + your own individual ones) shown in both Joint/Individual views regardless of which tab is active. ─────────────────── */ .fin-cards-carousel { display: flex; flex-shrink: 0; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--s4) var(--s4); -webkit-overflow-scrolling: touch; } .fin-cards-carousel::-webkit-scrollbar { display: none; } .fin-card { position: relative; flex: 0 0 auto; width: min(78vw, 300px); height: calc(min(78vw, 300px) / 1.586); scroll-snap-align: center; border-radius: var(--r-lg); } .fin-card-face { width: 100%; height: 100%; border-radius: var(--r-lg); padding: var(--s4); display: flex; flex-direction: column; justify-content: space-between; color: #ffffff; cursor: pointer; box-shadow: var(--fin-shadow); -webkit-tap-highlight-color: transparent; } .fin-card-top { display: flex; justify-content: space-between; align-items: flex-start; padding-right: 38px; /* clears .fin-card-edit-date, which overlaps this row */ } .fin-card-name { font-size: 16px; font-weight: 700; } .fin-card-network { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; opacity: 0.7; } .fin-card-bottom { display: flex; flex-direction: column; gap: 2px; } .fin-card-recon-date { font-size: 14px; font-weight: 700; } .fin-card-tap-hint { font-size: 11px; opacity: 0.6; } .fin-card-edit-date { position: absolute; top: var(--s3); right: var(--s3); width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,0.18); color: #ffffff; font-size: 14px; cursor: pointer; } .fin-card-date-input { position: absolute; bottom: 0; right: var(--s3); width: 1px; height: 1px; opacity: 0; pointer-events: none; } .fin-card-add { flex: 0 0 auto; width: min(78vw, 300px); height: calc(min(78vw, 300px) / 1.586); scroll-snap-align: center; border-radius: var(--r-lg); border: 2px dashed var(--fin-dashed-border); background: none; color: var(--fin-text-dim); font-size: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* ── Card manager ─────────────────────────────────────────── */ .fin-card-mgr-row { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--fin-bg); flex-wrap: wrap; } .fin-card-mgr-input { flex: 1 1 120px; min-width: 0; border: none; border-bottom: 1px solid var(--fin-bg); font-size: 15px; font-family: var(--font-ui); color: var(--fin-text); background: transparent; padding: 4px 0; outline: none; } .fin-card-mgr-network, .fin-card-mgr-scope { border: 1px solid var(--fin-bg); background: var(--fin-bg); border-radius: var(--r-sm); padding: 4px var(--s2); font-size: 12px; color: var(--fin-text); font-family: var(--font-ui); } .fin-card-mgr-delete { background: none; border: none; color: var(--fin-text-dim); font-size: 18px; line-height: 1; cursor: pointer; padding: var(--s1) var(--s2); border-radius: var(--r-sm); flex-shrink: 0; } .fin-card-mgr-delete:hover { background: var(--fin-bg); color: var(--fin-coral-dark); } .fin-card-mgr-add-row { display: flex; gap: var(--s2); margin-top: var(--s2); } .fin-card-mgr-add-row input { flex: 1; border: 1px solid var(--fin-bg); background: var(--fin-bg); border-radius: var(--r-sm); padding: var(--s2) var(--s3); font-size: 14px; font-family: var(--font-ui); color: var(--fin-text); outline: none; } .fin-card-mgr-add-row button { background: var(--fin-navy); color: #ffffff; border: none; border-radius: var(--r-sm); width: 40px; font-size: 18px; font-weight: 700; cursor: pointer; }