/* Accounting — quiet, dense ERP aesthetic. Ayzer identity (ayzer.ca): deep navy #0c1a2e, sky #4fc3f7, mint #64ffda, pale #e3f2fd, border navy #1c3458. System fonts only (CSP: no external resources). All money uses tabular numerals. THEMING CONTRACT ---------------- Every colour in this stylesheet is a token declared on :root below. A theme is therefore a palette swap and nothing else — no rule is duplicated per theme, and a hardcoded hex anywhere else is a bug. Light is the signed-off default; :root[data-theme="dark"] redefines ONLY the tokens. /theme.js stamps data-theme on synchronously in , before the first paint: a stored choice under "ayzer.theme" wins, otherwise prefers-color-scheme decides. The topbar toggle writes that key. */ :root { /* ------------------------------------------------------------------ LIGHT — Ayzer's palette over Sage Intacct's structure and metrics. Their identity is deep navy with a sky-blue accent (#4FC3F7) and a mint highlight (#64FFDA), set on #0C1A2E. The navy carries the CHROME — top bar, brand, headings — and the blue family carries ACTION, which is the role Intacct gives its green. Contrast: their #4FC3F7 (3:1 with white) and #2196F3 (3.1:1) both fail AA for button text on white, so LIGHT actions use a darkened member of the same family, #1565C0 at 6.3:1. Their exact #E3F2FD becomes the selected state. (On navy the ratio inverts, which is why dark can use #4FC3F7 itself — see the dark block.) The amber focus ring is kept from Intacct in BOTH themes: it is functional rather than decorative, and it separates from blue better than from green. ------------------------------------------------------------------ */ color-scheme: light; /* --- action ------------------------------------------------------ */ --accent: #1565c0; /* action: primary buttons, links */ --accent-strong: #0d47a1; /* hover */ --accent-soft: #e3f2fd; /* selected nav — Ayzer's own pale blue */ --accent-ink: #ffffff; /* text ON an accent fill */ /* --- brand grounds ----------------------------------------------- */ --navy: #0c1a2e; /* Ayzer ground: top bar, brand mark */ --navy-2: #050d1a; --slate: #1c3458; /* their border navy: secondary action, icons*/ --slate-soft: #eef3f8; /* archive banner ground */ --mint: #64ffda; /* their highlight — positive emphasis */ /* --- surfaces & text --------------------------------------------- */ --bg: #f4f7fa; /* page ground, a cool tint of their blue */ --bg-0: rgba(244, 247, 250, 0); /* same, transparent, for fades */ --panel: #ffffff; /* A SEQUENTIAL ramp for ordered buckets: one hue, light to dark, so "further into the ramp" reads as "further past due" without anybody being told. */ --scrim: rgba(12, 26, 46, .42); /* dim behind a dialog */ /* One hue, light→dark, validated with the dataviz palette script on the white panel: the old first step (#bbdefb) sat at 1.37:1 against it, below the 2:1 floor, so "Current" was a bar you could barely see. */ --chart-seq-1: #64b5f6; --chart-seq-2: #1e88e5; --chart-seq-3: #1565c0; --chart-seq-4: #0d47a1; /* Categorical: five hues for five DIFFERENT things (programmes, functions, accounts), assigned in this fixed order and never cycled. Validated with the dataviz palette script on the white panel, 2026-09-03: lightness band, chroma, adjacent-pair CVD separation (worst 13.0), normal-vision floor (worst 19.7), contrast >= 3:1 — all pass. A sixth thing folds into "Other", drawn in the muted ink. */ --chart-cat-1: #1565c0; --chart-cat-2: #0f9d8a; --chart-cat-3: #b97a00; --chart-cat-4: #7b4fd0; --chart-cat-5: #d1436b; --chart-on-fill: #ffffff; /* a percentage printed ON a slice */ --panel-0: rgba(255, 255, 255, 0); --panel-2: #f8fbfd; --ink: #14213a; /* body text: navy-black, not pure black */ --ink-soft: #33507a; /* card headings */ /* #8aa0b6 measured 2.70:1 on the panel, 2.51:1 on the page ground — below AA for text at any size, and this token drives the KPI labels, the table counts, the empty states and the sidebar section headings, so it was the one light-theme failure that mattered. There is no lighter value that clears 4.5:1 against a white panel, so it takes the same colour the print block already assigns it. That makes it equal to --muted in light; the two stay distinct in dark, and the step can be restored by darkening --muted if the flatness reads wrong. */ --ink-faint: #5b7189; /* labels, counts, empty states; 5.04:1 on panel */ --ink-nav: #2c4257; /* sidebar links */ --heading: #0c1a2e; /* view titles, KPI figures, statement titles*/ --muted: #5b7189; --line: #d3dde7; --line-soft: #e6edf4; --hover: #eef3f8; --disabled: #a6b3c2; --focus: #ffb500; /* kept: 3px OUTLINE, never a border */ /* --- status ------------------------------------------------------- */ --danger: #c7384f; /* red as TEXT / border */ --danger-fill: #c7384f; /* red as a FILL */ --danger-fill-ink: #ffffff; /* text on that fill */ --danger-soft: #fbeaed; --danger-pill: #d60500; --warn-ink: #e96400; --warn-soft: #fdf0e6; --info-ink: #1c3458; --info-soft: #e3f2fd; --ok-ink: #0f7a5a; /* Money that is POSITIVE. Deliberately quieter than --ok-ink: on a ledger most figures are positive, so a loud green would paint the whole screen and the red would stop meaning anything. This reads as ink with a green cast, and only the sign carries it. */ --pos-ink: #1b6b52; --ok-soft: #e0f5ee; --neutral-ink: #5b7189; --neutral-soft:#eef3f8; --purple-ink: #6a4cd7; --purple-soft: #eee9fb; --rule: #d3dde7; /* statement rules */ --rule-strong: #5b7189; --ok: #0f7a5a; --bad: #c7384f; --warn: #e96400; /* --- chrome (top bar, brand block, avatar) ------------------------ */ --chrome-1: #16283f; --chrome-2: #0c1a2e; --chrome-edge: #050d1a; --chrome-glow: rgba(79, 195, 247, .18); --chrome-ink: #eaf3fc; --chrome-ink-2: #9db4cd; --chrome-btn-ink: #cfe3f7; --chrome-btn-border: #3d5a80; --chrome-btn-hover: rgba(227, 242, 253, .12); --chrome-btn-hover-ink: #ffffff; --chrome-badge-bg: rgba(227, 242, 253, .08); --chrome-badge-border: rgba(157, 180, 205, .45); --chrome-badge-ink: #bcd6f2; --avatar-1: #4fc3f7; --avatar-2: #1565c0; --avatar-ink: #ffffff; --avatar-ring: 0 0 0 2px rgba(227, 242, 253, .18); --logo-1: #1b74d0; --logo-2: #0d47a1; --logo-ring: inset 0 0 0 1px rgba(79, 195, 247, .35); /* --- sidebar ------------------------------------------------------ */ /* #fbfcfe was white-on-white: in the light theme the sidebar and the page were the same sheet of paper and the navigation had no edge of its own. It now carries a tint of the same navy the chrome is built from, so the rail reads as a rail at a glance, and the links get their own ink rather than borrowing body text colour. */ --sidebar-bg: #eef3f9; --sidebar-ink: #17324f; /* links; 8.9:1 on the tint */ --sidebar-head: #0c1a2e; /* the application name at the top */ --sidebar-section:#4a637e; /* TASKS / LISTS / SETUP; 4.6:1 */ --sidebar-line: #d3dfec; --sidebar-shadow: 1px 0 0 rgba(12, 26, 46, .02); --nav-ico: #7d93a9; --crumb-sep: #b6c5d4; /* --- buttons ------------------------------------------------------ */ --btn-face: #ffffff; /* outline/secondary button ground */ --btn-primary-1: #1b74d0; --btn-primary-2: #1565c0; --btn-primary-1h: #1565c0; --btn-primary-2h: #0d47a1; --btn-primary-border:#0d47a1; --btn-primary-ink: #ffffff; --btn-primary-shadow: 0 1px 2px rgba(13, 71, 161, .30); --btn-primary-inset: inset 0 1px 2px rgba(5, 13, 26, .25); --switcher-shadow: 0 1px 2px rgba(5, 13, 26, .4); /* --- grids -------------------------------------------------------- */ --th-bg: #e9f0f7; --th-ink: #44607c; --row-even: #fafcfe; --row-hover: #edf4fb; --stmt-total-bg: #f7fafd; --stmt-grand-bg: #f2f7fc; --stmt-total-hover: #eef5fb; --stmt-grand-hover: #e9f1fa; /* --- form controls ------------------------------------------------ */ --field-bg: #ffffff; --field-border: #b6c5d4; --field-bad-bg: #fff7f8; /* --- message boxes ------------------------------------------------ */ --error-ink: #9c2438; --error-border: #eec3cb; --ok-border: #b9e4d5; --warn-border: #f3d3b3; --fav: #e8a400; /* --- status pills (solid severity fills, Intacct's treatment) ------ */ --pill-ink: #ffffff; --pill-ink-dark: #1a1a1a; --pill-neutral: #5b7189; --pill-draft: #666666; --pill-pending: #f49c00; --pill-approved: #0071c3; --pill-posted: #006388; --pill-in-payment: #008c8a; --pill-paid: #007e45; --pill-partly: #008146; --pill-reversed: #d60500; --pill-declined: #c92214; --pill-locked: #666666; --pill-default: #335b70; /* Void is not an alarm and it is not a draft. Reversed is red because something WENT to the ledger and had to be undone; a voided bill never got there, so red would overstate it. Draft grey would understate it just as badly — a void is finished and a draft is not. A slate darker than either says "closed" without shouting, and holds white above 4.5:1. */ --pill-void: #37424e; /* --- login page --------------------------------------------------- */ --login-glow: #1c3458; --login-glow-0: rgba(28, 52, 88, 0); --login-card-border: rgba(227, 242, 253, .14); --login-shadow: 0 8px 20px rgba(2, 8, 18, .45), 0 24px 64px rgba(2, 8, 18, .45); --login-mark-ring: inset 0 0 0 1px rgba(79, 195, 247, .4); /* --- elevation & metrics ------------------------------------------ */ --shadow: 0 1px 2px rgba(12, 26, 46, .07), 0 2px 8px rgba(12, 26, 46, .06); --shadow-card: 0 1px 2px rgba(12, 26, 46, .06), 0 3px 12px rgba(12, 26, 46, .06); --shadow-pop: 0 4px 10px rgba(12, 26, 46, .10), 0 12px 32px rgba(12, 26, 46, .14); --shadow-menu: 0 6px 24px rgba(26, 26, 26, .14); --radius: 4px; --radius-card: 8px; --radius-pill: 32px; --sidebar-w: 216px; /* One module drives every wide-screen decision: how many panel columns the overview gets, and how wide a figure card is allowed to grow. Panel count is derived from it by the browser rather than declared at a breakpoint, which is what makes the layout proportional to the desk instead of stepping once and then never again. 34rem is the measure a five-column panel table reads well at. */ /* 40rem, arrived at by measuring rather than by taste. At 30rem the overview fitted four columns and then the memo column in Recent entries wrapped to three lines a row, so the page grew 680px TALLER than the desk it was supposed to fit. Narrower columns are not automatically better packing — past a point the text just reflows downward. 40rem is the width at which these tables stop wrapping. */ --panel-col: 40rem; --topbar-h: 50px; } /* ================================================================== DARK — the brand-native mode. ayzer.ca is itself dark: #0c1a2e ground, #e3f2fd text, #4fc3f7 accent, #64ffda highlight, #1c3458 borders. So this is not an inversion of the light theme, it is the site's own palette applied to the application: the page takes the navy ground, panels step up to #122238, and the chrome — which was already navy in light — barely moves. Two role changes make it work: * #4fc3f7 becomes the ACTION colour. It fails AA on white (3:1) and passes comfortably on navy (8.9:1 on a panel), so the darkened #1565c0 that light needs is not needed here, and a filled primary button carries navy ink on sky rather than white on blue. * #64ffda is reserved for POSITIVE emphasis — a reconciled difference, a statement that ties, an undistributed of zero. Money stays legible: negatives take #ff8f96, a red that holds 6:1 on the panel navy where #c7384f would sink into it. Statement rules move to #24405f — visible against #122238, not a glare. The amber focus ring is unchanged: it is the one signal that is never a status colour, and it reads on both grounds. ================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --accent: #4fc3f7; --accent-strong: #8ad8fb; --accent-soft: #17314f; --accent-ink: #04121f; --navy: #0c1a2e; --navy-2: #050d1a; --slate: #3d5f8c; --slate-soft: #16283f; --mint: #64ffda; --bg: #0c1a2e; --bg-0: rgba(12, 26, 46, 0); --panel: #122238; /* On a dark ground the ramp runs the other way — dark to light — because "more" has to mean "brighter" against this surface. Flipping the light ramp unchanged would have buried the worst bucket in the background. */ --scrim: rgba(2, 6, 14, .62); --chart-seq-1: #245fa0; /* was #1b4f88: 1.92:1 on the dark panel, under the 2:1 floor */ --chart-seq-2: #2e7fd4; --chart-seq-3: #64b5f6; --chart-seq-4: #b3e0ff; /* the same five, re-stepped for the dark panel (#122238) and validated there: band 0.48–0.67, CVD worst 11.2, normal worst 16.6, contrast >= 3:1 */ --chart-cat-1: #2f7fd0; --chart-cat-2: #1f9d84; --chart-cat-3: #b98a10; --chart-cat-4: #8f6adc; --chart-cat-5: #d6567c; --chart-on-fill: #ffffff; /* the dark slices are mid-lightness; white still reads on them */ --panel-0: rgba(18, 34, 56, 0); --panel-2: #0e1d31; --ink: #e3f2fd; --ink-soft: #c5daf0; --ink-faint: #8fa8c0; --ink-nav: #cddff2; --heading: #eaf4ff; --muted: #8fa8c0; --line: #1c3458; --line-soft: #182c49; --hover: #17304e; --disabled: #61798f; --focus: #ffb500; --danger: #ff8f96; --danger-fill: #ff8f96; --danger-fill-ink: #2a0b11; --danger-soft: #35161d; --danger-pill: #e5484d; --warn-ink: #ffb761; --warn-soft: #38270f; --info-ink: #9ecbff; --info-soft: #142c47; --ok-ink: #64ffda; /* Dark: #64ffda is the ACTION green and far too loud for a column of numbers. This is desaturated to sit beside --danger #ff8f96 at a similar weight, so neither sign shouts down the other. */ --pos-ink: #6fd3ac; --ok-soft: #0e332e; --neutral-ink: #a3b8cd; --neutral-soft:#1a2c45; --purple-ink: #c0aeff; --purple-soft: #241f42; --rule: #24405f; --rule-strong: #6d8bab; --ok: #64ffda; --bad: #ff8f96; --warn: #ffb761; --chrome-1: #14273e; --chrome-2: #0a1526; --chrome-edge: #060f1d; --chrome-glow: rgba(79, 195, 247, .22); --chrome-ink: #eaf3fc; --chrome-ink-2: #a6bdd4; --chrome-btn-ink: #cfe3f7; --chrome-btn-border: #3d5a80; --chrome-btn-hover: rgba(227, 242, 253, .14); --chrome-btn-hover-ink: #ffffff; --chrome-badge-bg: rgba(227, 242, 253, .10); --chrome-badge-border: rgba(157, 180, 205, .45); --chrome-badge-ink: #bcd6f2; /* both stops are bright, so the navy monogram holds its contrast wherever it lands on the sweep (mint -> sky, Ayzer's own pair) */ --avatar-1: #64ffda; --avatar-2: #4fc3f7; --avatar-ink: #04121f; --avatar-ring: 0 0 0 2px rgba(227, 242, 253, .16); --logo-1: #1b74d0; --logo-2: #0d47a1; --logo-ring: inset 0 0 0 1px rgba(79, 195, 247, .45); --sidebar-bg: #0e1d31; --sidebar-ink: #cfe3f7; --sidebar-head: #ffffff; --sidebar-section:#8fa8c0; --sidebar-line: #1d3350; --sidebar-shadow: 1px 0 0 rgba(0, 0, 0, .25); --nav-ico: #7e97b3; --crumb-sep: #6d8fb0; /* Matches --panel, exactly as the light theme's #fff does: a secondary button reads as an outline on a card and as a quiet fill on the page ground, rather than as a raised slab everywhere. */ --btn-face: #122238; --btn-primary-1: #5ecbf8; --btn-primary-2: #35b6ef; --btn-primary-1h: #86d9fb; --btn-primary-2h: #4fc3f7; --btn-primary-border:#2b9ed4; --btn-primary-ink: #04121f; --btn-primary-shadow: 0 1px 2px rgba(0, 0, 0, .45); --btn-primary-inset: inset 0 1px 2px rgba(0, 0, 0, .4); --switcher-shadow: 0 1px 2px rgba(0, 0, 0, .5); --th-bg: #16293f; --th-ink: #a8c2dc; --row-even: #14263e; --row-hover: #1b3453; --stmt-total-bg: #16293f; --stmt-grand-bg: #1a3149; --stmt-total-hover: #1b3453; --stmt-grand-hover: #1f3a58; --field-bg: #0d1c30; --field-border: #2c4a6e; --field-bad-bg: #2a1119; --error-ink: #ffb3b8; --error-border: #6b2b36; --ok-border: #1d5c4f; --warn-border: #6b4a1d; --fav: #ffc233; /* Severity fills stay the light theme's: they are already saturated mid-tones that read as chips on navy, and lightening them for the dark ground pushed white label text under 4.5:1 (#2b8fd8 measured 3.49). Only the two greys move — #666 went muddy against #122238. */ --pill-ink: #ffffff; --pill-ink-dark: #1a1a1a; --pill-neutral: #5b7189; --pill-draft: #5c6a78; --pill-pending: #f49c00; --pill-approved: #0071c3; --pill-posted: #006388; --pill-in-payment: #007b79; /* #008c8a puts white at 4.1:1 — see notes */ --pill-paid: #007e45; --pill-partly: #008146; --pill-reversed: #d60500; --pill-declined: #c92214; --pill-locked: #5c6a78; --pill-default: #335b70; /* Lifted off the light value the same way --pill-draft and --pill-locked are: #37424e goes muddy against the dark card ground. */ --pill-void: #414f5c; --login-glow: #1c3458; --login-glow-0: rgba(28, 52, 88, 0); --login-card-border: rgba(227, 242, 253, .16); --login-shadow: 0 8px 20px rgba(0, 0, 0, .55), 0 24px 64px rgba(0, 0, 0, .55); --login-mark-ring: inset 0 0 0 1px rgba(79, 195, 247, .5); --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .4); --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 3px 12px rgba(0, 0, 0, .32); --shadow-pop: 0 4px 10px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .55); --shadow-menu: 0 6px 24px rgba(0, 0, 0, .55); } /* ---------- base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--bg); color: var(--ink); font: 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; margin: 0 0 .6em; } h1 { font-size: 18px; } h2 { font-size: 15px; } h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code, .mono { font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; font-size: 12px; } hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; } [hidden] { display: none !important; } /* ---------- money & numerals ---------- */ .money, .num, table.grid td.money, input.money { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; text-align: right; white-space: nowrap; } .money.neg { color: var(--danger); } /* A positive figure is money, not good news: a payment out is positive too. Ink. (user, 2026-09-04) */ .money.pos { color: inherit; } /* Live undistributed / Dr-Cr indicator on the bill and journal forms. SPEC: red until zero, green at zero. The class names here MUST match what app.js emits — it writes `undist ok` / `undist bad`, and for a while this block was named .udf-zero/.udf-nonzero, which no script ever set, so an out-of-balance $900.00 rendered in exactly the same ink as a balanced $0.00 and the product's main data-entry safety cue said nothing. */ .undist { display: inline-block; padding: 3px 9px; font-size: 11.5px; letter-spacing: .02em; border: 1px solid transparent; border-radius: var(--radius); font-weight: 700; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; } .undist.neutral { color: var(--muted); background: transparent; border-color: var(--line); } .undist.ok { color: var(--ok-ink); background: var(--ok-soft); border-color: var(--ok-ink); } .undist.bad { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); } /* ---------- app shell layout ---------- */ .shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "sidebar topbar" "sidebar main"; height: 100vh; } .sidebar { grid-area: sidebar; background: var(--panel-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--ink); } .brand .logo { width: 22px; height: 22px; border-radius: 5px; background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; } .nav { padding: 6px 0 16px; } .nav .nav-section { margin: 12px 14px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); } .nav a { display: block; padding: 5px 14px 5px 13px; color: var(--ink); border-left: 3px solid transparent; font-size: 12.5px; white-space: nowrap; } .nav a:hover { background: var(--hover); text-decoration: none; } .nav a.active { background: var(--accent-soft); border-left-color: var(--accent); color: var(--accent); font-weight: 600; } .topbar { grid-area: topbar; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--line); } .topbar .org { font-weight: 600; font-size: 13px; } .topbar .spacer { flex: 1; } .topbar .user { color: var(--muted); font-size: 12.5px; } .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } main#view { grid-area: main; overflow-y: auto; padding: 16px 20px 40px; } /* ---------- cards ---------- */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px; } .card > h2:first-child, .card > h3:first-child { margin-top: 0; } .card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; } .card-row .card { margin-bottom: 0; } .stat .label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 4px; } .stat .value { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius); border: 1px solid var(--accent-strong); background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.4; cursor: pointer; user-select: none; } .btn:hover { background: var(--accent-strong); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } .btn.secondary { background: var(--panel); color: var(--ink); border-color: var(--line); } .btn.secondary:hover { background: var(--hover); } .btn.danger { background: var(--danger-fill); border-color: var(--danger-fill); color: var(--danger-fill-ink); } .btn.danger:hover { filter: brightness(1.1); } .btn.small { padding: 2px 8px; font-size: 11.5px; } .btn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; } /* ---------- status pills ---------- */ .pill { display: inline-block; padding: 1px 8px 2px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; background: var(--neutral-soft); color: var(--neutral-ink); border: 1px solid transparent; } .pill.open { background: var(--warn-soft); color: var(--warn-ink); } .pill.locked { background: var(--danger-soft); color: var(--danger); } .pill.unreconciled { background: var(--warn-soft); color: var(--warn-ink); } .pill.reconciled { background: var(--ok-soft); color: var(--ok-ink); } .pill.paid_off { background: var(--accent); color: var(--accent-ink); } /* ---------- tables ---------- */ .table-wrap { overflow-x: auto; } table.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--panel); } table.grid th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--panel-2); white-space: nowrap; position: sticky; top: 0; z-index: 1; } table.grid td { padding: 4px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } table.grid th.money, table.grid th.num { text-align: right; } table.grid tbody tr:hover { background: var(--hover); } table.grid tbody tr.clickable, table.grid tbody tr[data-href], table.grid tbody tr[data-id] { cursor: pointer; } table.grid tfoot td, table.grid tr.total td { border-top: 2px solid var(--line); border-bottom: none; font-weight: 700; background: var(--panel-2); } table.grid .empty td { text-align: center; color: var(--muted); padding: 18px 8px; font-style: italic; } table.grid input, table.grid select { width: 100%; min-width: 60px; } /* ---------- forms ---------- */ label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 3px; } input, select, textarea { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 5px 8px; width: 100%; } input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } input:disabled, select:disabled, textarea:disabled { background: var(--panel-2); color: var(--muted); } input[type="checkbox"], input[type="radio"] { width: auto; } input.money, input[data-money] { text-align: right; } .field { margin-bottom: 10px; min-width: 0; } .field .hint { font-size: 11px; color: var(--muted); margin-top: 2px; } /* The HST note is normally quiet prose under the field. When it is reporting a figure that cannot be right it stops being prose. */ .hst-preview.bad { color: var(--bad); font-weight: 500; } .field.error input, .field.error select { border-color: var(--danger); } .field .field-error { font-size: 11px; color: var(--danger); margin-top: 2px; } /* generic form grid — the invoice header uses .form-grid.cols-4 */ .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; } .form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .form-grid .span-2 { grid-column: span 2; } .form-grid .span-full { grid-column: 1 / -1; } fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 12px; } legend { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 0 6px; } /* invoice screen: sticky totals strip with the live undistributed figure */ .totals-bar { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); margin: 10px 0; position: sticky; bottom: 8px; box-shadow: var(--shadow); } .totals-bar .t-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-right: 4px; } .totals-bar .t-value { font-weight: 600; font-variant-numeric: tabular-nums; } /* HST rebate preview block */ .rebate-preview { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .rebate-preview b { color: var(--ink); } /* ---------- type-ahead (account search) ---------- */ .typeahead { position: relative; } /* Fixed, not absolute — see placeList() in accountTypeahead. An absolutely positioned menu is clipped by any scrolling ancestor, and on a distribution line there is one. left/top/width are written by the script. */ .typeahead-list, .suggestions { position: fixed; max-height: 240px; overflow-y: auto; margin: 0; padding: 2px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 50; } .typeahead-list li, .suggestions li { padding: 4px 8px; border-radius: 4px; cursor: pointer; display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; } .typeahead-list li .acct-no, .suggestions li .acct-no { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 42px; } .typeahead-list li:hover, .suggestions li:hover, .typeahead-list li.active, .suggestions li.active, .typeahead-list li[aria-selected="true"], .suggestions li[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); } .typeahead-list li.fav::after, .suggestions li.fav::after { content: "★"; margin-left: auto; color: var(--accent); font-size: 11px; } /* ---------- toolbar / filters above lists ---------- */ .toolbar { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin-bottom: 10px; } .toolbar .field { margin-bottom: 0; } .toolbar input, .toolbar select { width: auto; min-width: 120px; } /* A