/* ============================================================================ FundFlow — design system (ported from the Claude Design "FundFlow app design") Vanilla CSS, no build step. Tokens drive a dark (default) + light theme, switched via the `data-theme` attribute on . ========================================================================== */ /* ---- Fonts (bundled locally — no CDN) ---- */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; /* variable font */ font-display: swap; src: url("/fonts/archivo-latin.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibmplexmono-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibmplexmono-500.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibmplexmono-600.woff2") format("woff2"); } /* ---- Theme tokens ---- */ :root, :root[data-theme="dark"] { --bg: #0c0f14; --surface: #151a21; --surface2: #1b212a; --line: #262d38; --text: #e7ebf0; --muted: #8a95a3; --accent: #4f86ff; --accent-weak: rgba(79, 134, 255, 0.16); --in: #3fb950; --out: #f0594f; --in-weak: rgba(63, 185, 80, 0.16); --out-weak: rgba(240, 89, 79, 0.15); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px -14px rgba(0, 0, 0, 0.65); } :root[data-theme="light"] { --bg: #eef0f4; --surface: #ffffff; --surface2: #f6f8fa; --line: #e3e6ec; --text: #0d1320; --muted: #5f6b7a; --accent: #2f6bff; --accent-weak: rgba(47, 107, 255, 0.1); --in: #15a34a; --out: #dc2626; --in-weak: rgba(21, 163, 74, 0.11); --out-weak: rgba(220, 38, 38, 0.09); --shadow: 0 1px 2px rgba(15, 20, 30, 0.05), 0 12px 28px -16px rgba(15, 20, 30, 0.18); } /* ---- Base ---- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; min-height: 100vh; } .mono { font-family: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.32); border-radius: 8px; } input, select, button, textarea { font-family: inherit; } input:focus, select:focus { outline: none; border-color: var(--accent); } @keyframes ffpop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes fftoast { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ============================================================================ Shell: left rail + main with sticky topbar ========================================================================== */ .shell { display: flex; min-height: 100vh; } .rail { width: 236px; flex: none; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 18px 14px; gap: 18px; position: sticky; top: 0; height: 100vh; } .rail-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px; text-decoration: none; color: var(--text); } .brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 16px; } .rail-brand .brand-name { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; } .rail-nav { display: flex; flex-direction: column; gap: 3px; } .nav-group-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 700; padding: 12px 11px 4px; } .nav-group-label:first-child { padding-top: 2px; } .rail-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--muted); } .rail-nav a:hover { background: var(--surface2); color: var(--text); } .rail-nav a.active { background: var(--accent-weak); color: var(--accent); } .rail-nav .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--muted); opacity: 0.5; } .rail-nav a.active .dot { background: var(--accent); opacity: 1; } .rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; } .rail-user { font-size: 11.5px; color: var(--muted); padding: 0 4px; word-break: break-all; } .rail-foot button { height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface2); color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer; } .rail-foot button:hover { border-color: var(--accent); } .rail-foot .signout { background: transparent; color: var(--muted); } .rail-foot .signout:hover { color: var(--text); } .main { flex: 1; min-width: 0; background: var(--bg); } .topbar { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); padding: 15px 26px; display: flex; align-items: center; gap: 16px; } .topbar .titles { min-width: 0; } .topbar .screen-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; } .topbar .screen-subtitle { font-size: 12.5px; color: var(--muted); } .topbar .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .currency-chip { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-weak); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; } .content { padding: 24px 26px 60px; display: flex; flex-direction: column; gap: 20px; max-width: 1180px; margin: 0; /* left-aligned on desktop (not centred) */ } /* ============================================================================ Cards & generic components ========================================================================== */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 18px 20px; } .card-pad-lg { padding: 22px; } .card-flush { padding: 0; overflow: hidden; } .card-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .card-title { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; } .card-sub { font-size: 12px; color: var(--muted); } .spacer { margin-left: auto; } /* KPI / hero cards (dashboard layout B) */ .hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .hero { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 22px; } .hero.accent { border: none; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #101b4d)); } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 14px 16px; } .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 700; } .hero.accent .eyebrow { color: inherit; opacity: 0.82; letter-spacing: 0.08em; } .hero-value { font-variant-numeric: tabular-nums; font-size: 46px; font-weight: 800; letter-spacing: -0.035em; margin-top: 6px; line-height: 1; } .hero-note { font-size: 12.5px; color: var(--muted); margin-top: 8px; } .hero.accent .hero-note { color: inherit; opacity: 0.85; } .stat-value { font-variant-numeric: tabular-nums; font-size: 21px; font-weight: 700; margin-top: 6px; } /* Generic inputs */ .fld { display: flex; flex-direction: column; gap: 6px; } .fld > label { font-size: 11.5px; font-weight: 600; color: var(--muted); } .input { height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface2); color: var(--text); padding: 0 11px; font-size: 13.5px; outline: none; } textarea.input { height: auto; padding: 10px 11px; } .btn { height: 40px; padding: 0 20px; border: none; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 700; font-size: 13.5px; cursor: pointer; } .btn:hover { filter: brightness(1.06); } .btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); } .btn.ghost:hover { color: var(--text); filter: none; } .btn.block { width: 100%; } /* Segmented toggle */ .segmented { display: flex; height: 40px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .segmented button { flex: 1; border: none; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; } .segmented button.on { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); } .segmented button.on-accent { background: var(--accent-weak); color: var(--accent); box-shadow: none; } /* Pills / badges / tags */ .pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .pill.in { background: var(--in-weak); color: var(--in); } .pill.out { background: var(--out-weak); color: var(--out); } .status-chip { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; } .status-chip.actual { background: var(--surface2); color: var(--muted); border: 1px solid var(--line); } .status-chip.expected { background: var(--accent-weak); color: var(--accent); border: 1px dashed var(--accent); } .cat-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 7px; } .cat-tag .tag-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .cat-tag-code { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--muted); font-weight: 500; } .loan-badge { font-size: 10px; font-weight: 700; color: var(--accent); background: var(--accent-weak); padding: 2px 6px; border-radius: 5px; } .archived-chip { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; } .swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } /* Tables */ table { width: 100%; border-collapse: collapse; font-size: 13px; } .table-scroll { overflow-x: auto; } thead tr { text-align: left; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; } th { padding: 10px 16px; font-weight: 700; } td { padding: 11px 16px; } tbody tr { border-top: 1px solid var(--line); } .num { text-align: right; } td.num, th.num { text-align: right; } .mono-cell { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--muted); white-space: nowrap; } .amount-cell { text-align: right; font-family: "IBM Plex Mono", monospace; font-weight: 600; white-space: nowrap; } .row-btn { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 8px; padding: 5px 9px; font-size: 12px; font-weight: 600; cursor: pointer; margin-left: 6px; } .row-btn:hover { color: var(--text); } .row-btn.danger:hover { color: var(--out); border-color: var(--out); } .icon-btn { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 8px; width: 28px; height: 28px; cursor: pointer; font-size: 15px; line-height: 1; } .icon-btn:hover { color: var(--out); border-color: var(--out); } .mini-select { height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface2); color: var(--text); padding: 0 9px; font-size: 12.5px; outline: none; cursor: pointer; } .empty-state { padding: 34px; text-align: center; color: var(--muted); font-size: 13px; } .hint { color: var(--muted); font-size: 12.5px; margin: 0; } .hint a, .panel a { color: var(--accent); } .error-text { color: var(--out); font-size: 12.5px; margin: 4px 0 0; } /* ============================================================================ Dashboard quick-add ========================================================================== */ .qa-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .qa-amount-wrap { position: relative; } .qa-amount-wrap .cur { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 13px; } .qa-amount-wrap .input { padding-left: 26px; font-family: "IBM Plex Mono", monospace; } /* ============================================================================ Category picker (button + popover) — used on the dashboard quick-add ========================================================================== */ .cat-select { position: relative; } .cat-trigger { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface2); color: var(--text); padding: 0 11px; font-size: 13.5px; display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left; } .cat-trigger .caret { margin-left: auto; color: var(--muted); } .cat-trigger .placeholder { color: var(--muted); } .cat-trigger .picked-name { font-weight: 600; } .cat-trigger .picked-code { color: var(--muted); font-family: "IBM Plex Mono", monospace; font-size: 11.5px; } .cat-pop { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; } .cat-pop[hidden] { display: none; } .cat-pop .cat-search { width: 100%; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface2); color: var(--text); padding: 0 10px; font-size: 13px; outline: none; margin-bottom: 6px; } .cat-list { max-height: 230px; overflow: auto; display: flex; flex-direction: column; gap: 2px; } .cat-opt { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: var(--text); text-align: left; width: 100%; } .cat-opt:hover { background: var(--surface2); } .cat-opt .opt-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; } .cat-opt .opt-name { font-size: 13px; font-weight: 500; } .cat-opt .opt-code { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--muted); } .cat-opt .opt-dir { margin-left: auto; } .cat-none { padding: 10px; color: var(--muted); font-size: 12.5px; } /* ============================================================================ Categories page ========================================================================== */ .two-col { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .col-form { width: 340px; flex: none; } .col-main { flex: 1; min-width: 330px; } .code-label { display: flex; justify-content: space-between; } .code-label .counter { font-family: "IBM Plex Mono", monospace; } .code-input { font-family: "IBM Plex Mono", monospace; text-transform: uppercase; } .colour-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .colour-swatch { width: 24px; height: 24px; border-radius: 7px; cursor: pointer; border: 2px solid transparent; } .colour-swatch.on { border-color: var(--text); } input[type="color"] { width: 34px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface2); padding: 2px; cursor: pointer; } .checkbox-row { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; cursor: pointer; } .checkbox-row input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } /* ============================================================================ Director's loans page ========================================================================== */ .dir-list { display: flex; flex-direction: column; } .dir-row { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; margin-bottom: 6px; border: 1px solid var(--line); background: transparent; color: var(--text); } .dir-row.selected { border-color: var(--accent); background: var(--accent-weak); color: var(--accent); } .dir-row .dir-name { flex: 1; min-width: 0; text-align: left; border: none; background: transparent; color: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .dir-row .dir-edit { flex: 1; min-width: 0; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); padding: 0 9px; font-size: 13px; outline: none; } .dir-mini { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 7px; padding: 4px 8px; font-size: 11.5px; font-weight: 600; cursor: pointer; } .dir-mini:hover { color: var(--text); } .dir-mini.danger:hover { color: var(--out); border-color: var(--out); } .dir-mini.save { border: none; background: var(--accent); color: #fff; font-weight: 700; } .loan-hero { position: relative; overflow: hidden; } .loan-hero .glow { position: absolute; inset: 0; background: radial-gradient(560px 200px at 92% -50%, var(--accent-weak), transparent 70%); pointer-events: none; } .loan-hero .inner { position: relative; } .loan-owed { font-size: 17px; font-weight: 700; margin-top: 6px; } .loan-balance { font-variant-numeric: tabular-nums; font-size: 42px; font-weight: 800; letter-spacing: -0.035em; margin-top: 6px; line-height: 1; } .loan-hint { font-size: 12.5px; color: var(--muted); margin-top: 8px; max-width: 440px; } .add-row { display: flex; gap: 8px; margin-bottom: 14px; } .add-row .input { flex: 1; min-width: 0; } /* ============================================================================ Toast ========================================================================== */ .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 50; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); box-shadow: var(--shadow); border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; animation: fftoast 0.25s ease; max-width: 440px; font-size: 13.5px; font-weight: 500; } .toast.in { border-left-color: var(--in); } .toast.out { border-left-color: var(--out); } .toast.error { border-left-color: var(--out); } /* ============================================================================ Inline confirm bubble (anchored next to a button) ========================================================================== */ .confirm-bubble { position: fixed; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 12px; width: max-content; max-width: 240px; animation: ffpop 0.14s ease; } .confirm-bubble .cb-msg { font-size: 12.5px; font-weight: 600; margin-bottom: 9px; } .confirm-bubble .cb-actions { display: flex; gap: 6px; justify-content: flex-end; } .confirm-bubble button { height: 30px; padding: 0 12px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); } .confirm-bubble .cb-cancel { background: transparent; color: var(--muted); } .confirm-bubble .cb-cancel:hover { color: var(--text); } .confirm-bubble .cb-confirm { border: none; color: #fff; background: var(--accent); } .confirm-bubble.kind-out .cb-confirm { background: var(--out); } .confirm-bubble.kind-in .cb-confirm { background: var(--in); } .confirm-bubble .cb-arrow { position: absolute; width: 10px; height: 10px; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); } /* Future (expected) entry rows read as faded; actions stay fully legible. */ tr.future td:not(:last-child) { opacity: 0.5; } .icon-btn.ok:hover { color: var(--in); border-color: var(--in); } /* ============================================================================ Modal / dialog ========================================================================== */ .modal-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; padding: 24px; } .modal-backdrop[hidden] { display: none; } .modal { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 24px; width: 100%; max-width: 420px; animation: ffpop 0.18s ease; } .modal h2 { margin: 0 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; } .modal .modal-sub { margin: 0 0 18px; color: var(--muted); font-size: 13px; } .modal label { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; } .modal .input, .modal select.input { width: 100%; margin-bottom: 14px; } .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; } /* ============================================================================ Accounts ========================================================================== */ .account-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .account-card { cursor: pointer; display: flex; flex-direction: column; gap: 8px; } .account-card:hover { border-color: var(--accent); } .account-card .ac-top { display: flex; align-items: center; gap: 8px; } .account-card .ac-name { font-size: 15px; font-weight: 700; } .account-card .ac-balance { font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; } .account-card .ac-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); flex-wrap: wrap; } .account-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .rec-toggle { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; } .rec-toggle.cleared { border: none; background: var(--in-weak); color: var(--in); cursor: default; } .diff-row { display: flex; align-items: center; gap: 10px; font-size: 13px; margin: 6px 0; } .diff-row .diff-val { font-family: "IBM Plex Mono", monospace; font-weight: 700; margin-left: auto; } /* ============================================================================ Login (standalone, no shell) ========================================================================== */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(1100px 560px at 72% -12%, var(--accent-weak), transparent 60%), var(--bg); } .login-wrap { width: 100%; max-width: 404px; animation: ffpop 0.4s ease; } .login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; justify-content: center; } .login-brand .brand-name { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; } .login-box { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 28px; } .login-box h1 { margin: 0 0 4px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; } .login-box .lede { margin: 0 0 22px; color: var(--muted); font-size: 13.5px; } .login-box label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; } .login-box .input { width: 100%; height: 42px; margin-bottom: 14px; } .login-box .btn { width: 100%; height: 44px; margin-top: 4px; } .login-box .error-text { margin: 4px 0 0; } .login-foot { margin: 16px 0 0; text-align: center; color: var(--muted); font-size: 12px; } /* ============================================================================ Accessibility (applies everywhere; visible only to keyboard / reduced-motion) ========================================================================== */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* Rail head + hamburger button (button hidden on desktop — no visual change). */ .rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .rail-toggle { display: none; background: transparent; border: 1px solid var(--line); color: var(--text); width: 40px; height: 40px; border-radius: 10px; font-size: 18px; cursor: pointer; } /* ============================================================================ Responsive — tablet/mobile (≤820px): rail becomes a hamburger bar ========================================================================== */ @media (max-width: 820px) { .shell { flex-direction: column; min-height: 100dvh; } .rail { width: 100%; height: auto; position: sticky; top: 0; z-index: 40; flex-direction: column; gap: 10px; border-right: none; border-bottom: 1px solid var(--line); padding: 12px 14px; } .rail-toggle { display: inline-flex; align-items: center; justify-content: center; } /* Nav + footer controls collapse behind the hamburger. */ .rail-nav, .rail-foot { display: none; } .rail.open .rail-nav { display: flex; } .rail.open .rail-foot { display: flex; margin-top: 4px; } /* !important so any inline width on a column (e.g. the directors card) can't keep it narrow on mobile — both columns go full-width and stack. */ .col-form { width: 100% !important; } .two-col { gap: 16px; } .two-col > * { min-width: 0; width: 100%; flex: 1 1 100%; } } /* ============================================================================ Responsive — phones (≤560px) ========================================================================== */ @media (max-width: 560px) { .content { padding: 16px 14px 48px; } .topbar { padding: 13px 16px; } /* Stop iOS Safari zooming form fields on focus. */ input, select, textarea, .input, .cat-search, .mini-select, .cat-trigger { font-size: 16px; } /* Quick-add / add-user forms stack full-width (beats inline px widths). */ .qa-row { flex-direction: column; align-items: stretch; } .qa-row .fld { width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; } .qa-row .input, .qa-row #amount, .qa-row .btn, .qa-row .segmented { width: 100% !important; } .qa-amount-wrap, .qa-amount-wrap .input { width: 100% !important; } /* Bigger touch targets. */ .icon-btn { width: 40px; height: 40px; font-size: 17px; } .row-btn, .dir-mini, .rec-toggle { padding: 9px 12px; } .mini-select { height: 40px; } /* Modals fit the viewport. */ .modal-backdrop { padding: 16px; } .modal { max-height: calc(100dvh - 32px); overflow-y: auto; } /* Stacked-card tables — each row becomes a labelled card; no sideways scroll. */ .table-scroll { overflow: visible; -webkit-overflow-scrolling: touch; } .table-scroll table { min-width: 0 !important; } .table-scroll thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .table-scroll tbody tr { display: block; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; padding: 4px 2px; background: var(--surface); } .table-scroll td { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 8px 14px; text-align: right; border: none; white-space: normal; } .table-scroll td::before { content: attr(data-label); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; text-align: left; flex: none; } .table-scroll td.actions-cell { justify-content: flex-end; flex-wrap: wrap; gap: 8px; } .table-scroll td.actions-cell::before { display: none; } .table-scroll td:empty { display: none; } .table-scroll .row-btn { margin-left: 0; } .empty-state { padding: 22px 12px; } /* Dashboard entries: a condensed card instead of the generic label:value stack. Row 1: category + amount. Row 2: date · future-badge · director · actions. Row 3: description. Redundant/empty bits (in/out pill, "Actual", empty director/description) are hidden to keep it tight. */ table.table-entries tbody tr { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "cat cat cat amt" "date status dir act" "desc desc desc desc"; column-gap: 8px; row-gap: 3px; align-items: center; padding: 11px 14px; } table.table-entries td { display: block; padding: 0; border: none; text-align: left; white-space: normal; } table.table-entries td::before { display: none; } table.table-entries .e-cat { grid-area: cat; min-width: 0; } table.table-entries .e-amt { grid-area: amt; text-align: right; font-size: 15px; } table.table-entries .e-date { grid-area: date; font-size: 11px; color: var(--muted); } table.table-entries .e-status { grid-area: status; } table.table-entries .e-dir { grid-area: dir; font-size: 11px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.table-entries .e-act { grid-area: act; text-align: right; } table.table-entries .e-act .icon-btn { width: 34px; height: 34px; font-size: 16px; } table.table-entries .e-desc { grid-area: desc; font-size: 12.5px; color: var(--muted); } table.table-entries .e-type, table.table-entries .e-status.is-actual, table.table-entries .e-dir.is-empty, table.table-entries .e-desc.is-empty { display: none; } /* Categories — compact card: name + direction, code + state, then actions. */ table.table-categories tbody tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name dir" "code state" "act act"; column-gap: 8px; row-gap: 4px; align-items: center; padding: 11px 14px; } table.table-categories td { display: block; padding: 0; border: none; text-align: left; white-space: normal; } table.table-categories td::before { display: none; } table.table-categories .c-name { grid-area: name; min-width: 0; } table.table-categories .c-dir { grid-area: dir; text-align: right; } table.table-categories .c-code { grid-area: code; } table.table-categories .c-state { grid-area: state; text-align: right; } table.table-categories .c-state.is-empty { display: none; } table.table-categories .c-act { grid-area: act; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } table.table-categories .c-act .row-btn { margin-left: 0; } /* Director-loan transactions — compact card. */ table.table-loan tbody tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "cat amt" "date date" "desc desc"; column-gap: 8px; row-gap: 3px; align-items: center; padding: 11px 14px; } table.table-loan td { display: block; padding: 0; border: none; text-align: left; white-space: normal; } table.table-loan td::before { display: none; } table.table-loan .l-cat { grid-area: cat; min-width: 0; } table.table-loan .l-amt { grid-area: amt; text-align: right; font-size: 15px; } table.table-loan .l-date { grid-area: date; font-size: 11px; color: var(--muted); } table.table-loan .l-desc { grid-area: desc; font-size: 12.5px; color: var(--muted); } table.table-loan .l-type, table.table-loan .l-desc.is-empty { display: none; } /* Account ledger — compact card with a labelled running balance + cleared toggle. */ table.table-ledger tbody tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "cat amt" "date bal" "desc desc" "rec rec"; column-gap: 8px; row-gap: 3px; align-items: center; padding: 11px 14px; } table.table-ledger td { display: block; padding: 0; border: none; text-align: left; white-space: normal; } table.table-ledger td::before { display: none; } table.table-ledger .a-cat { grid-area: cat; min-width: 0; } table.table-ledger .a-amt { grid-area: amt; text-align: right; font-size: 15px; } table.table-ledger .a-date { grid-area: date; font-size: 11px; color: var(--muted); } table.table-ledger .a-bal { grid-area: bal; text-align: right; font-size: 11px; color: var(--muted); } table.table-ledger .a-bal::before { content: "Balance "; } table.table-ledger .a-desc { grid-area: desc; font-size: 12.5px; color: var(--muted); } table.table-ledger .a-desc.is-empty { display: none; } table.table-ledger .a-rec { grid-area: rec; margin-top: 2px; } /* Users — compact card. */ table.table-users tbody tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "email email" "state last" "act act"; column-gap: 8px; row-gap: 4px; align-items: center; padding: 11px 14px; } table.table-users td { display: block; padding: 0; border: none; text-align: left; white-space: normal; } table.table-users td::before { display: none; } table.table-users .u-email { grid-area: email; font-weight: 600; } table.table-users .u-state { grid-area: state; } table.table-users .u-last { grid-area: last; text-align: right; font-size: 11px; color: var(--muted); } table.table-users .u-last::before { content: "Last login "; } table.table-users .u-act { grid-area: act; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } table.table-users .u-act .row-btn { margin-left: 0; } /* Directors list rows wrap their actions on narrow screens. */ .dir-row { flex-wrap: wrap; } } /* Very small phones */ @media (max-width: 400px) { .hero-value { font-size: 34px; } .currency-chip { display: none; } }