/* Kgyoka Foundation Backend — Finance view stylesheet. * * The Finance modules render the class vocabulary of the module host they were * written against (.btn / .row / .stat / .rowcard / .chip …). This file is that * vocabulary re-expressed in this backend's OWN design tokens (tokens.css) — not a * ported theme. No colour, radius or type value is hardcoded here; everything * resolves through the semantic tokens, so the hub's three themes (field / * sand / night) re-skin Finance for free, exactly like every other view. * * Everything is scoped under #view-finance so it can never leak into the rest * of the hub — the hub already owns .chip, .empty, table and .btn globally and * those definitions must keep winning outside this view. The one exception is * the help drawer, which mounts on by design and is scoped by its own * .fin-drawer-veil wrapper instead. */ #view-finance { --fin-radius: 12px; --fin-gap: 14px; } /* ── layout shell ────────────────────────────────────────────────────────── */ /* The origin renders a phone-width column with its own topbar. Inside the hub that chrome is redundant: the sidebar is the navigation and the content area is already the frame, so the column goes full-width and the topbar collapses to a plain title strip. */ #view-finance .app-col { max-width: none; margin: 0; min-height: 0; display: block; background: none; } #view-finance .app-main { padding: 0; } #view-finance .screen { display: block; } #view-finance .topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 0 0 14px; border-bottom: 1px solid var(--border-subtle); background: none; color: var(--text-primary); } #view-finance .topbar .nm { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tight); } #view-finance .topbar .spacer { flex: 1; } /* Single-workspace deployment: there is nowhere to go "back" to and nothing to switch between, so those two controls are removed rather than left dead. */ #view-finance #fbBack, #view-finance #fbSwitch { display: none; } /* ── tab rail ────────────────────────────────────────────────────────────── */ /* The module writes `display:flex;flex-wrap:wrap;gap:0` as an INLINE style on this element, so the layout properties here have to out-rank it. Only those three carry !important — everything else wins on specificity alone. */ #view-finance #fbNav { display: flex; flex-wrap: wrap !important; gap: 4px !important; background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--fin-radius); padding: 6px; margin-bottom: 18px; } #view-finance .tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; /* The module writes `flex:1;min-width:88px` inline, which stretches 21 tabs across the row and clips the longest labels. Sized to content instead. */ flex: 0 1 auto !important; min-width: 0 !important; min-height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; font-family: var(--font-ui); font-size: .8rem; font-weight: var(--fw-semibold); color: var(--text-secondary); white-space: nowrap; transition: .15s; } #view-finance .tab:hover { background: var(--surface-hover); color: var(--text-primary); } #view-finance .tab.active { background: var(--accent); color: var(--text-on-accent); } #view-finance .tab .material-symbols-rounded { font-size: 18px; } /* Twenty-one tabs wrap to six rows on a phone and push the books off screen, so below 720px the rail becomes one horizontally-scrolling row of icons. */ @media (max-width: 720px) { #view-finance #fbNav { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; } #view-finance #fbNav::-webkit-scrollbar { display: none; } #view-finance .tab-lbl { display: none; } #view-finance .tab { min-width: 44px; flex: 0 0 auto; } } /* ── cards + sections ────────────────────────────────────────────────────── */ #view-finance .card, #view-finance .pcard, #view-finance .rowcard { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--fin-radius); padding: 18px 20px; margin-bottom: var(--fin-gap); } #view-finance .rowcard { padding: 6px 0; } #view-finance .sec { margin-bottom: 22px; } #view-finance .sec-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } #view-finance .sec-head h2, #view-finance .sec-head h3 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tight); flex: 1; } #view-finance .list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--fin-gap); } /* .row is the workhorse: one line of a list, label at the start, value/actions at the end. Rows inside a .rowcard get hairlines between them. */ #view-finance .row { display: flex; align-items: center; gap: 10px; padding: 11px 20px; font-size: .88rem; } #view-finance .rowcard .row + .row { border-top: 1px solid var(--border-subtle); } #view-finance .card .row, #view-finance .pcard .row { padding-inline: 0; } #view-finance .row:hover { background: transparent; } #view-finance .rowcard .row:hover { background: var(--surface-sunken); } /* ── type utilities ──────────────────────────────────────────────────────── */ #view-finance .muted { color: var(--text-muted); } #view-finance .accent { color: var(--accent); } #view-finance .k-overline { font-family: var(--font-ui); font-size: var(--fs-overline); font-weight: var(--fw-bold); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-muted); } /* Every figure in a set of books is a column of digits that must line up. */ #view-finance .k-num, #view-finance .num, #view-finance table td { font-variant-numeric: tabular-nums; } /* ── stats ───────────────────────────────────────────────────────────────── */ #view-finance .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: var(--fin-gap); } #view-finance .stat { background: var(--surface-card); border: 1px solid var(--border-subtle); border-inline-start: 3px solid var(--accent); border-radius: var(--fin-radius); padding: 15px 17px; } /* A stat is label-over-figure. The modules write the label as .k-overline and the figure as .k-num inside the card, so both are laid out here rather than relying on a .num/.lbl pair the markup never uses. */ #view-finance .stat > span { display: block; } #view-finance .stat .k-num, #view-finance .stat .num { font-family: var(--font-display); font-size: 1.7rem; font-weight: var(--fw-extrabold); line-height: var(--lh-tight); color: var(--text-primary); margin-top: 4px; } #view-finance .stat .k-overline, #view-finance .stat .lbl { font-family: var(--font-ui); font-size: var(--fs-overline); font-weight: var(--fw-bold); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-muted); } /* `neutral` marks the cases worth noticing — a ledger that does not tie out, or a negative net — so it reads as attention, not as a muted variant. */ #view-finance .stat.neutral { border-inline-start-color: var(--danger); } #view-finance .stat.neutral .k-num { color: var(--danger-text); } /* ── buttons (the hub's .btn-primary/.btn-ghost equivalents, modifier-style) ─ */ #view-finance .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 10px; font-family: var(--font-ui); font-size: .85rem; font-weight: var(--fw-bold); line-height: 1; white-space: nowrap; background: var(--accent); color: var(--text-on-accent); transition: .15s; } #view-finance .btn:hover:not(:disabled) { background: var(--accent-hover); } #view-finance .btn:active:not(:disabled) { transform: translateY(1px); } #view-finance .btn:disabled { opacity: .45; cursor: not-allowed; } #view-finance .btn.ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border-default); } #view-finance .btn.ghost:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--accent); color: var(--accent); } #view-finance .btn.green { background: var(--success); color: #fff; } /* The source app's accent was a coral red, so a filled danger button is nearly indistinguishable from the primary one — "Post" and "Delete" would read the same at a glance. Destructive actions are outlined instead. */ #view-finance .btn.danger { background: transparent; color: var(--danger-text); border: 1px solid var(--danger); } #view-finance .btn.danger:hover:not(:disabled) { background: var(--danger-soft); } #view-finance .btn.sm { min-height: 32px; padding: 0 12px; font-size: .78rem; border-radius: 8px; } #view-finance .btn.lg { min-height: 48px; padding: 0 22px; font-size: .95rem; } #view-finance .btn .material-symbols-rounded { font-size: 18px; } #view-finance .filter-chip { border: 1px solid var(--border-default); background: transparent; color: var(--text-secondary); border-radius: 999px; padding: 5px 13px; font-family: var(--font-ui); font-size: .76rem; font-weight: var(--fw-bold); } #view-finance .filter-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } /* ── chips (status tones are semantic, never brand) ──────────────────────── */ #view-finance .chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: .72rem; font-weight: var(--fw-bold); padding: 3px 11px; border-radius: 999px; white-space: nowrap; background: var(--msfr-n-150); color: var(--text-secondary); } #view-finance .chip.green { background: var(--success-soft); color: var(--success-text); } #view-finance .chip.gold, #view-finance .chip.warn { background: var(--warning-soft); color: var(--warning-text); } #view-finance .chip.red { background: var(--danger-soft); color: var(--danger-text); } #view-finance .chip.gray { background: var(--msfr-n-150); color: var(--text-secondary); } #view-finance .chip.accent { background: var(--accent-soft); color: var(--accent); } /* ── forms ───────────────────────────────────────────────────────────────── */ #view-finance input, #view-finance select, #view-finance textarea { font-family: var(--font-body); font-size: .9rem; color: var(--text-primary); padding: 9px 11px; border: 1px solid var(--border-default); border-radius: 9px; background: var(--surface-card); width: 100%; } #view-finance input:focus, #view-finance select:focus, #view-finance textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } #view-finance input:disabled, #view-finance select:disabled, #view-finance textarea:disabled { color: var(--text-muted); background: var(--surface-sunken); } #view-finance label { display: block; font-family: var(--font-ui); font-size: var(--fs-overline); font-weight: var(--fw-bold); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-secondary); margin: 12px 0 5px; } /* ── tables (the hub's own table skin, minus its 20px page gutters) ──────── */ #view-finance table { width: 100%; border-collapse: collapse; } #view-finance th { text-align: start; font-family: var(--font-ui); font-size: var(--fs-overline); font-weight: var(--fw-bold); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-muted); padding: 9px 10px; background: var(--surface-sunken); border-bottom: 1px solid var(--border-subtle); } #view-finance td { padding: 10px; font-size: .86rem; border-bottom: 1px solid var(--border-subtle); vertical-align: top; } #view-finance tr:last-child td { border-bottom: 0; } #view-finance tbody tr:hover td { background: var(--surface-sunken); } /* ── states ──────────────────────────────────────────────────────────────── */ #view-finance .empty { text-align: center; padding: 40px 16px; color: var(--text-muted); } /* The origin's .err is display:none until filled; here every .err node is created only to be shown, so it stays visible and reads as an alert. */ #view-finance .err { background: var(--danger-soft); color: var(--danger-text); border-radius: 10px; padding: 11px 14px; margin-bottom: 12px; font-size: .85rem; font-weight: var(--fw-semibold); } /* ── workspace profile (finance-profile.js) ──────────────────────────────── */ #view-finance .fp-sec { margin-bottom: 22px; } #view-finance .fp-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: .87rem; } #view-finance .fp-num { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); } #view-finance .fp-note { font-size: .8rem; color: var(--text-muted); } #view-finance .fp-empty { color: var(--text-muted); font-size: .85rem; padding: 8px 0; } #view-finance .fp-chip { display: inline-block; font-size: .72rem; padding: 2px 9px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-secondary); } #view-finance .fp-cover-list { display: grid; gap: 6px; } /* ── help drawer (mounts on , so it carries its own scope) ─────────── */ .drawer-veil { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: flex-end; background: rgba(23, 23, 23, .42); } .drawer-veil .drawer { width: min(460px, 100%); height: 100%; display: flex; flex-direction: column; background: var(--surface-card); border-inline-start: 1px solid var(--border-subtle); box-shadow: -24px 0 60px rgba(23, 23, 23, .16); } .drawer-veil .dr-head, .drawer-veil .dr-foot { display: flex; align-items: center; gap: 10px; padding: 16px 20px; } .drawer-veil .dr-head { border-bottom: 1px solid var(--border-subtle); } .drawer-veil .dr-foot { border-top: 1px solid var(--border-subtle); justify-content: flex-end; } .drawer-veil .dr-title { display: block; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tight); color: var(--text-primary); } .drawer-veil .dr-body { flex: 1; overflow-y: auto; padding: 18px 20px; font-size: .9rem; line-height: var(--lh-relaxed); color: var(--text-secondary); } .drawer-veil .dr-body h4 { font-family: var(--font-display); color: var(--text-primary); margin: 16px 0 6px; } .drawer-veil .dr-body p { margin-bottom: 10px; } .drawer-veil .dr-body ul { margin: 0 0 12px 18px; } .drawer-veil .muted { color: var(--text-muted); } .drawer-veil .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border: 0; border-radius: 10px; font-family: var(--font-ui); font-size: .85rem; font-weight: var(--fw-bold); background: var(--accent); color: var(--text-on-accent); } .drawer-veil .btn.ghost { background: transparent; border: 1px solid var(--border-default); color: var(--text-primary); } .drawer-veil .btn.sm { min-height: 32px; padding: 0 10px; font-size: .78rem; } @media (prefers-reduced-motion: reduce) { #view-finance *, .drawer-veil * { transition: none !important; animation: none !important; } }