/* TLC Accounting -- utility styles, no framework. * * --------------------------------------------------------------------------- * ONE RULE: no colour is written anywhere below this token block. Every rule * in this file, in tree.css, in dnd.css and in the inline SVG the dashboard * draws reads a custom property, so the whole app re-themes from one place and * dark mode is a token swap rather than a second stylesheet. * * Themes are three-state, exactly as PMT does it: * :root light * @media (prefers-color-scheme: dark) dark, unless the user pinned light * :root[data-theme="dark"] dark, pinned by the user * A tiny inline script in stamps data-theme on before first * paint (see _base.html), so there is no flash; the media query is the no-JS * fallback. * * BRAND. --brand is the navy sampled from tlc-logo.png (#002860 family, * rounded to #17356B for 11.9:1 on white). --accent is the logo's red. The * red is an ACCENT, not a text colour: it draws the logo mark, thin rules, and * the DENIED / OVER-BUDGET state, and nothing else. Status colours stay * semantically green/amber/red and come from --ok / --warn / --bad. * ------------------------------------------------------------------------- */ :root { /* ---- TLC brand (sampled from app/static/img/tlc-logo.png) ---- */ --brand: #17356B; /* navy: links, primary buttons, header band */ --brand-deep: #0E2450; /* topbar, hover states */ --brand-ink: #0B1B3D; /* text on a pale navy fill */ --brand-soft: #DFE6F3; /* table headers, chips */ --brand-softer: #F1F4FA; /* zebra stripes, hovered rows */ --on-brand: #FFFFFF; --on-bad: #FFFFFF; --on-ok: #FFFFFF; --on-warn: #FFFFFF; --paper: #FFFFFF; /* NEVER themed: a printed form stays on white */ --accent: #C4161C; /* RULE + denied state only -- never body text */ --accent-soft: #FBE7E7; /* ---- Surfaces and ink ---- */ --bg: #F3F4F7; --panel: #FFFFFF; --panel-sunken: #F8F9FC; --ink: #171C26; --muted: #59617A; /* 6.0:1 on white -- AA body text */ --line: #D9DEE9; --line-strong: #BFC7D8; /* ---- Status families (text / fill / line) ---- */ --warn: #7A5300; --warn-bg: #FDF3DC; --warn-line: #E3BE68; --bad: #A11318; --bad-bg: #FBEAEA; --bad-line: #E8B3B4; --ok: #1C6B3E; --ok-bg: #E3F1E7; --ok-line: #A9D3B9; --info: #1B5B9A; --info-bg: #E5EFF9; --info-line: #B4CDE8; --neutral-bg: #EAEDF4; /* ---- Charts (the dashboard's inline SVG reads these) ---- */ --chart-bar: #17356B; --chart-bar-soft: #4F6BA6; --chart-grid: #D9DEE9; --chart-text: #59617A; /* ---- Topbar ---- */ --top-bg: #0E2450; --top-ink: #D7DFF0; --top-ink-strong: #FFFFFF; --top-hover: rgba(255, 255, 255, 0.14); --top-active: rgba(255, 255, 255, 0.20); --top-line: rgba(255, 255, 255, 0.16); /* ---- Focus / selection ---- */ --focus: #17356B; --focus-ring: rgba(23, 53, 107, 0.32); /* ---- Scales ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --r-sm: 4px; --r: 7px; --r-lg: 12px; --r-pill: 999px; --topbar-h: 56px; --sidenav-w: 224px; --shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 3px rgba(17, 24, 39, 0.05); --shadow-lg: 0 6px 18px rgba(17, 24, 39, 0.14); --shadow-up: 0 -1px 6px rgba(17, 24, 39, 0.10); /* the phone bottom bar */ } /* --------------------------------------------------------------- dark -- */ /* Navy-tinted darks, never pure black: pure black next to a navy brand reads * as a hole. Body text is >= 7:1 on the panel and each status text token was * checked against its own fill, not against the page background. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand: #8AA9E0; --brand-deep: #A9C0EC; --brand-ink: #CFDCF4; --brand-soft: #1E2942; --brand-softer: #182135; --on-brand: #0B1223; --on-bad: #2A0F10; --on-ok: #0C1A11; --on-warn: #2A2210; --accent: #E8767A; --accent-soft: #38191B; --bg: #0D1220; --panel: #151C2C; --panel-sunken: #111726; --ink: #E4E9F2; --muted: #9AA5BC; --line: #263049; --line-strong: #374361; --warn: #E8C267; --warn-bg: #2E2611; --warn-line: #5C4A1C; --bad: #F2A6A8; --bad-bg: #331718; --bad-line: #6C2E31; --ok: #8FD6A8; --ok-bg: #152A1D; --ok-line: #2E5A3D; --info: #8FC3F0; --info-bg: #12233A; --info-line: #2C4E77; --neutral-bg: #1D2436; --chart-bar: #8AA9E0; --chart-bar-soft: #4A5F8C; --chart-grid: #263049; --chart-text: #9AA5BC; --top-bg: #0A1020; --top-ink: #C6D2E8; --top-ink-strong: #F1F5FC; --top-hover: rgba(255, 255, 255, 0.09); --top-active: rgba(255, 255, 255, 0.14); --top-line: rgba(255, 255, 255, 0.10); --focus: #8AA9E0; --focus-ring: rgba(138, 169, 224, 0.35); --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 22px rgba(0, 0, 0, 0.55); --shadow-up: 0 -1px 6px rgba(0, 0, 0, 0.50); } } :root[data-theme="dark"] { --brand: #8AA9E0; --brand-deep: #A9C0EC; --brand-ink: #CFDCF4; --brand-soft: #1E2942; --brand-softer: #182135; --on-brand: #0B1223; --on-bad: #2A0F10; --on-ok: #0C1A11; --on-warn: #2A2210; --accent: #E8767A; --accent-soft: #38191B; --bg: #0D1220; --panel: #151C2C; --panel-sunken: #111726; --ink: #E4E9F2; --muted: #9AA5BC; --line: #263049; --line-strong: #374361; --warn: #E8C267; --warn-bg: #2E2611; --warn-line: #5C4A1C; --bad: #F2A6A8; --bad-bg: #331718; --bad-line: #6C2E31; --ok: #8FD6A8; --ok-bg: #152A1D; --ok-line: #2E5A3D; --info: #8FC3F0; --info-bg: #12233A; --info-line: #2C4E77; --neutral-bg: #1D2436; --chart-bar: #8AA9E0; --chart-bar-soft: #4A5F8C; --chart-grid: #263049; --chart-text: #9AA5BC; --top-bg: #0A1020; --top-ink: #C6D2E8; --top-ink-strong: #F1F5FC; --top-hover: rgba(255, 255, 255, 0.09); --top-active: rgba(255, 255, 255, 0.14); --top-line: rgba(255, 255, 255, 0.10); --focus: #8AA9E0; --focus-ring: rgba(138, 169, 224, 0.35); --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 22px rgba(0, 0, 0, 0.55); --shadow-up: 0 -1px 6px rgba(0, 0, 0, 0.50); } /* ============================================================ base ==== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; font-size: 14px; line-height: 1.45; color: var(--ink); background: var(--bg); -webkit-text-size-adjust: 100%; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0 0 var(--s-3); line-height: 1.25; font-weight: 650; } h1 { font-size: 20px; } h2 { font-size: 16px; } h3 { font-size: 14px; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); } .small { font-size: 12px; } .muted { color: var(--muted); } .num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .nowrap { white-space: nowrap; } .mb-0 { margin-bottom: 0; } .mt-3 { margin-top: var(--s-3); } .grow { flex: 1 1 auto; min-width: 0; } .row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; } .row-tight { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; } .spread { display: flex; gap: var(--s-3); align-items: center; justify-content: space-between; flex-wrap: wrap; } .stack { display: flex; flex-direction: column; gap: var(--s-3); } .hidden { display: none !important; } /* ========================================================== the shell == */ .topbar { position: sticky; top: 0; z-index: 40; height: var(--topbar-h); display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-4); background: var(--top-bg); color: var(--top-ink); border-bottom: 2px solid var(--accent); } .lockup { display: flex; align-items: center; gap: var(--s-2); color: var(--top-ink-strong); text-decoration: none; } .lockup:hover { text-decoration: none; } .lockup img { width: 32px; height: 32px; object-fit: contain; } .lockup .org { font-size: 13px; font-weight: 700; letter-spacing: .4px; line-height: 1.1; } .lockup .sub { font-size: 11px; color: var(--top-ink); line-height: 1.1; } .top-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--top-ink); font: inherit; font-size: 12px; padding: 6px 10px; cursor: pointer; text-decoration: none; } .top-btn:hover { background: var(--top-hover); color: var(--top-ink-strong); text-decoration: none; } .top-btn[aria-expanded="true"] { background: var(--top-active); } .bell-count { position: absolute; top: 0; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill); background: var(--accent); color: var(--paper); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .dropdown { position: relative; } .dropdown-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: min(340px, calc(100vw - 24px)); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: var(--s-2); } .dropdown-panel ul { list-style: none; margin: 0; padding: 0; } .dropdown-panel li a { display: block; padding: 6px var(--s-2); border-radius: var(--r-sm); color: var(--ink); } .dropdown-panel li a:hover { background: var(--brand-softer); text-decoration: none; } .dropdown-panel li.is-unread a { font-weight: 600; } .dropdown-foot { display: flex; justify-content: space-between; padding-top: var(--s-2); margin-top: var(--s-2); border-top: 1px solid var(--line); } .shell { display: flex; align-items: flex-start; } .sidenav { position: sticky; top: var(--topbar-h); width: var(--sidenav-w); flex: 0 0 var(--sidenav-w); height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: var(--s-3) var(--s-2); background: var(--panel); border-right: 1px solid var(--line); } .sidenav .group-title { font-size: 10.5px; font-weight: 700; letter-spacing: .8px; color: var(--muted); text-transform: uppercase; padding: var(--s-3) var(--s-2) var(--s-1); } .sidenav a { display: flex; align-items: center; gap: var(--s-2); padding: 7px var(--s-2); border-radius: var(--r-sm); color: var(--ink); font-size: 13px; } .sidenav a:hover { background: var(--brand-softer); text-decoration: none; } .sidenav a.is-active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; } .sidenav .ico { width: 16px; text-align: center; opacity: .8; } .main { flex: 1 1 auto; min-width: 0; padding: var(--s-4) var(--s-5) var(--s-6); } .page-head { display: flex; align-items: baseline; gap: var(--s-3); justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--s-4); } .page-head .titles h1 { margin: 0; } .page-head .titles p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; } /* ========================================================== surfaces == */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-4); box-shadow: var(--shadow); } .panel + .panel { margin-top: var(--s-4); } .panel > h2:first-child, .panel > h3:first-child { margin-top: 0; } .sunken { background: var(--panel-sunken); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-3); } .cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: start; } .cols-desk { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-4); align-items: start; } .cols-desk > * { min-width: 0; } /* The approvals board needs more room than a 380px aside leaves it, so the decision panel only sits BESIDE the board on a wide screen and drops below it otherwise. Four kanban columns squeezed under an aside is four columns nobody can read. */ .board-layout { display: grid; grid-template-columns: 1fr; gap: var(--s-4); align-items: start; } .board-layout > * { min-width: 0; } @media (min-width: 1280px) { .board-layout { grid-template-columns: minmax(0, 1fr) 340px; } } /* ============================================================ tiles ==== */ .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-bottom: var(--s-4); } .tile { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--r); padding: var(--s-3) var(--s-4); } .tile .label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } .tile .value { font-size: 22px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; } .tile .sub { font-size: 12px; color: var(--muted); } .tile.is-bad { border-left-color: var(--bad); } .tile.is-bad .value { color: var(--bad); } .tile.is-ok { border-left-color: var(--ok); } .tile.is-warn { border-left-color: var(--warn); } .tile.is-info { border-left-color: var(--brand); } /* =========================================================== tables ==== */ .table-wrap { overflow-x: auto; } table.grid { width: 100%; border-collapse: collapse; font-size: 13px; } table.grid th, table.grid td { padding: 7px var(--s-2); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } table.grid thead th { background: var(--brand-soft); color: var(--brand-ink); font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; white-space: nowrap; border-bottom: 1px solid var(--line-strong); } table.grid tbody tr:nth-child(even) { background: var(--brand-softer); } table.grid tbody tr:hover { background: var(--brand-soft); } table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } table.grid tfoot td { font-weight: 700; background: var(--panel-sunken); border-top: 2px solid var(--line-strong); } .empty { padding: var(--s-5); text-align: center; color: var(--muted); } /* ==================================================== chips & badges === */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--neutral-bg); color: var(--ink); border: 1px solid var(--line); font-size: 11px; font-weight: 600; white-space: nowrap; } .badge.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); } .badge.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); } .badge.bad { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); } .badge.info { background: var(--info-bg); color: var(--info); border-color: var(--info-line); } .badge.neutral { background: var(--neutral-bg); } .badge.brand { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--line-strong); } .money-strip { display: flex; flex-wrap: wrap; gap: var(--s-1); background: var(--panel-sunken); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-2); } .money-strip .cell { flex: 1 1 110px; padding: var(--s-1) var(--s-2); } .money-strip .cell + .cell { border-left: 1px solid var(--line); } .money-strip .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); } .money-strip .v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .money-strip .cell.is-bad .v { color: var(--bad); } .money-strip .cell.is-warn .v { color: var(--warn); } .money-strip .cell.is-ok .v { color: var(--ok); } /* ============================================================ forms ==== */ label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 3px; } input[type="text"], input[type="date"], input[type="number"], input[type="search"], select, textarea { width: 100%; font: inherit; font-size: 13px; padding: 6px var(--s-2); color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-sm); } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); } textarea { min-height: 64px; resize: vertical; } .field { margin-bottom: var(--s-3); } .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); } .check-row { display: flex; align-items: center; gap: var(--s-2); font-size: 13px; font-weight: 400; color: var(--ink); margin-bottom: 3px; } .check-row input { width: auto; } .hint { font-size: 11.5px; color: var(--muted); margin-top: 2px; } .err { font-size: 11.5px; color: var(--bad); margin-top: 2px; } .btn { display: inline-flex; align-items: center; gap: 6px; justify-content: center; font: inherit; font-size: 13px; font-weight: 600; padding: 7px var(--s-4); cursor: pointer; border: 1px solid var(--brand); border-radius: var(--r-sm); background: var(--brand); color: var(--on-brand); text-decoration: none; } .btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-brand); text-decoration: none; } .btn.secondary { background: var(--panel); color: var(--brand); border-color: var(--line-strong); } .btn.secondary:hover { background: var(--brand-softer); color: var(--brand); } .btn.danger { background: var(--bad); border-color: var(--bad); color: var(--on-bad); } .btn.danger:hover { filter: brightness(0.92); } .btn.small { font-size: 12px; padding: 4px 10px; } .btn.icon { padding: 4px 7px; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } details.more > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--brand); list-style: none; padding: var(--s-1) 0; } details.more > summary::-webkit-details-marker { display: none; } details.more > summary::before { content: "▸ "; } details.more[open] > summary::before { content: "▾ "; } .flash { padding: var(--s-2) var(--s-3); border-radius: var(--r); border: 1px solid var(--line); margin-bottom: var(--s-3); font-size: 13px; } .flash.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); } .flash.error { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); } .banner-deny { border: 1px solid var(--bad-line); border-left: 3px solid var(--accent); background: var(--bad-bg); color: var(--bad); padding: var(--s-3); border-radius: var(--r); margin-bottom: var(--s-4); } .filters { display: flex; gap: var(--s-2); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--s-3); } .filters .field { margin: 0; } .filters input[type="search"] { min-width: 200px; } /* ============================================== bars, chart, timeline == */ .bar { display: block; height: 6px; width: 100%; min-width: 60px; background: var(--neutral-bg); border-radius: var(--r-pill); overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--brand); } .bar > span.is-full { background: var(--ok); } .bar > span.is-over { background: var(--accent); } .chart { width: 100%; height: 190px; } .chart .bar-rect { fill: var(--chart-bar); } .chart .bar-label { fill: var(--chart-text); font-size: 10px; } .chart .bar-value { fill: var(--chart-text); font-size: 10px; font-variant-numeric: tabular-nums; } .chart .axis { stroke: var(--chart-grid); stroke-width: 1; } .timeline { list-style: none; margin: 0; padding: 0 0 0 var(--s-4); border-left: 2px solid var(--line); } .timeline li { position: relative; padding: 0 0 var(--s-3) var(--s-3); font-size: 12.5px; } .timeline li::before { content: ""; position: absolute; left: -21px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--panel); border: 2px solid var(--brand); } .action-list { list-style: none; margin: 0; padding: 0; } .action-list li { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); } .action-list li:last-child { border-bottom: 0; } .action-list .what { flex: 1 1 auto; min-width: 0; } .action-list .what strong { display: block; font-size: 13px; } .action-list .what span { font-size: 12px; color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================= login ====== */ .login-wrap { max-width: 900px; margin: 0 auto; padding: var(--s-6) var(--s-4); } .persona-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s-3); } .persona { display: block; width: 100%; text-align: left; cursor: pointer; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r); padding: var(--s-3); font: inherit; color: var(--ink); } .persona:hover { border-color: var(--brand); background: var(--brand-softer); } .persona .who { font-weight: 650; font-size: 13.5px; } .persona .role { font-size: 12px; color: var(--muted); } /* ========================================================= kanban ===== */ .kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); align-items: start; } .kan-col { background: var(--panel-sunken); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-2); min-height: 160px; } .kan-col > h3 { display: flex; justify-content: space-between; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: var(--s-2); } .kan-col.is-dropping { border-color: var(--ok); background: var(--ok-bg); } .kan-col.is-refusing { border-color: var(--bad); background: var(--bad-bg); } .kan-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-2); margin-bottom: var(--s-2); box-shadow: var(--shadow); } .kan-card .kan-no { font-weight: 700; font-size: 12.5px; } .kan-card .kan-meta { font-size: 11.5px; color: var(--muted); } .kan-card .kan-amt { font-weight: 700; font-variant-numeric: tabular-nums; } .kan-card.is-dragging { opacity: .4; } /* ========================================== funding desk / drop form == */ .fund-card { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r-sm); padding: var(--s-2); margin-bottom: var(--s-2); } .fund-card.is-dragging { opacity: .4; } .dropform { border: 2px dashed var(--line-strong); border-radius: var(--r); padding: var(--s-3); } .dropform.is-dropping { border-color: var(--ok); background: var(--ok-bg); } .dropform.is-refusing { border-color: var(--bad); background: var(--bad-bg); } /* ============================================== proof tray & uploads == */ .dropzone { border: 2px dashed var(--line-strong); border-radius: var(--r); padding: var(--s-4); text-align: center; color: var(--muted); background: var(--panel-sunken); font-size: 12.5px; } .dropzone.is-over { border-color: var(--brand); background: var(--brand-softer); color: var(--brand); } /* A receipt is a PORTRAIT document and the part that identifies it -- the * supplier's name -- is at the top. A 34x26 landscape crop of a white receipt * is a blank square, so every thumbnail in this app is 48x64 anchored to the * top of the image, and clicking one opens the full picture. */ .thumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); } .thumb { width: 62px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); padding: 3px; text-align: center; } .thumb img { width: 48px; height: 64px; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 3px; display: block; margin: 0 auto; } .thumb .cap { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thumb.is-dragging { opacity: .4; } /* A cheque is landscape and the whole face is the point, so the check page * shows it wide rather than cropped to the receipt shape. */ .thumb.is-wide { width: 200px; } .thumb.is-wide img { width: 100%; height: 88px; object-fit: cover; object-position: top; } .thumb-file { display: flex; align-items: center; justify-content: center; width: 48px; height: 64px; margin: 0 auto; background: var(--neutral-bg); border-radius: 3px; font-size: 11px; color: var(--muted); } /* ============================================ inventory location chips */ .loc-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); } .loc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--panel); font-size: 12px; color: var(--ink); } .loc-chip.is-dropping { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); } .loc-chip.is-refusing { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); } .chain { font-size: 11.5px; color: var(--muted); } .chain a { color: var(--brand); } .tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); margin-bottom: var(--s-3); } .tabs a { padding: 6px var(--s-3); font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; } .tabs a.is-active { color: var(--brand); border-bottom-color: var(--accent); } .tabs a:hover { text-decoration: none; color: var(--brand); } /* ============================================== the EVP Funds suite ==== */ .acct-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: var(--s-4); } .acct-card h2 { margin-bottom: 0; } .acct-avail { font-size: 26px; font-weight: 750; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; color: var(--brand); margin-top: var(--s-2); } .spark { display: block; width: 100%; height: 34px; margin: var(--s-2) 0; } .spark polyline { fill: none; stroke: var(--chart-bar-soft); stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round; } .mini-list { list-style: none; margin: var(--s-2) 0 var(--s-2); padding: 0; font-size: 12px; } .mini-list li { display: flex; gap: var(--s-2); align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--line); } .mini-list li:last-child { border-bottom: 0; } .mini-list .num { margin-left: auto; } .num.is-in { color: var(--ok); } .num.is-out { color: var(--muted); } .chart .bar-rect.is-soft { fill: var(--chart-bar-soft); } .adv-split { display: grid; gap: var(--s-4); grid-template-columns: minmax(220px, 1fr) 1.4fr; } .split-line .cell { flex-basis: 220px; } .acct-line { display: flex; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); } .acct-line:last-child { border-bottom: 0; } .cat-row { display: grid; gap: var(--s-2); align-items: center; grid-template-columns: 90px 1fr 110px; padding: 4px 0; font-size: 12.5px; } .cat-row .num { text-align: right; } td.over { color: var(--bad); font-weight: 650; } .gate-panel { max-width: 340px; } /* =============================================== the phone bottom bar == */ /* Hidden on the desktop; the rail is the navigation there. */ .botbar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--panel); border-top: 1px solid var(--line); box-shadow: var(--shadow-up); padding: var(--s-1) 0; } .botbar a, .botbar button { display: flex; flex-direction: column; align-items: center; gap: 1px; font: inherit; font-size: 10.5px; font-weight: 600; line-height: 1.2; padding: 5px 2px; border: 0; background: none; color: var(--muted); text-decoration: none; cursor: pointer; } .botbar a.is-active { color: var(--brand); } .botbar .ico { font-size: 16px; } .botbar a span:last-child, .botbar button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .more-sheet { position: fixed; left: 0; right: 0; bottom: 60px; z-index: 46; background: var(--panel); border-top: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: var(--s-3); } .more-sheet a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-2); font-size: 14px; border-bottom: 1px solid var(--line); color: var(--ink); } .more-sheet a:last-child { border-bottom: 0; } .more-sheet .ico { font-size: 17px; } /* ========================================================== responsive */ @media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, 1fr); } .kanban { grid-template-columns: repeat(2, minmax(160px, 1fr)); } .cols-desk { grid-template-columns: 1fr; } } @media (max-width: 768px) { .main { padding: var(--s-3); } .cols-2 { grid-template-columns: 1fr; } .kanban { grid-template-columns: 1fr; } .lockup .sub { display: none; } /* THE PHONE BAR. Five items and a "More" sheet, never a sideways scroll: * a bar that scrolls hides its last item, and the item nobody scrolls to is * the item nobody finds. The sheet holds the rest, role-gated exactly like * the rail because it is built from the same list. */ .sidenav { display: none; } .botbar { display: grid; } .shell { display: block; } .main { padding-bottom: 76px; } .adv-split { grid-template-columns: 1fr; } .cat-row { grid-template-columns: 80px 1fr 90px; } } @media (max-width: 420px) { .tiles { grid-template-columns: 1fr; } .fields { grid-template-columns: 1fr; } .money-strip .cell { flex-basis: 45%; } .money-strip .cell + .cell { border-left: 0; } } @media print { .topbar, .sidenav, .no-print, .filters { display: none !important; } .main { padding: 0; } .panel { border: 0; box-shadow: none; padding: 0; } body { background: var(--paper); } }