/* Theme tokens.  <html data-theme="light|dark|system"> is set by _Layout from dbo.Settings.Theme. */
:root { color-scheme:light; --ink:#1f2933; --muted:#6b7280; --line:#e5e7eb; --accent:#1d4ed8; --brand:#1b1f6b; --bg:#f8fafc; --surface:#fff; --surface-alt:#f1f5f9; --field-line:#cbd5e1; --nav:#475569; --bad:#b91c1c; --bad-bg:#fef2f2; --ok:#047857; --series-1:#2a78d6; --series-2:#eb6834; --track:#e2ebf7; }
:root[data-theme="dark"] { color-scheme:dark; --ink:#e5e7eb; --muted:#94a3b8; --line:#334155; --accent:#3b82f6; --brand:#fff; --bg:#0f172a; --surface:#1e293b; --surface-alt:#273449; --field-line:#475569; --nav:#cbd5e1; --bad:#fca5a5; --bad-bg:#450a0a; --ok:#6ee7b7; --series-1:#3987e5; --series-2:#d95926; --track:#243a57; }
@media (prefers-color-scheme: dark) {
	:root[data-theme="system"] { color-scheme:dark; --ink:#e5e7eb; --muted:#94a3b8; --line:#334155; --accent:#3b82f6; --brand:#fff; --bg:#0f172a; --surface:#1e293b; --surface-alt:#273449; --field-line:#475569; --nav:#cbd5e1; --bad:#fca5a5; --bad-bg:#450a0a; --ok:#6ee7b7; --series-1:#3987e5; --series-2:#d95926; --track:#243a57; }
	:root[data-theme="system"] .logo-light { display:none; }
	:root[data-theme="system"] .logo-dark { display:block; }
}
* { box-sizing:border-box; }
body { margin:0; font:14px/1.45 "Segoe UI", system-ui, sans-serif; color:var(--ink); background:var(--bg); }
.topbar { display:flex; align-items:center; gap:24px; padding:11px 20px; background:var(--surface); color:var(--ink); border-bottom:1px solid var(--line); }
.topbar a { color:var(--nav); text-decoration:none; }
.topbar a:hover { color:var(--brand); }
.brand { display:flex; align-items:center; gap:8px; font-size:23px; letter-spacing:.04em; text-transform:uppercase; color:var(--brand) !important; }
.brand img { display:block; }
.brand .logo-dark { display:none; }
:root[data-theme="dark"] .logo-light { display:none; }
:root[data-theme="dark"] .logo-dark { display:block; }
.topbar nav { display:flex; gap:6px; flex:1; flex-wrap:wrap; white-space:nowrap; }
.navmenu { position:relative; }
.navmenu > button { display:flex; align-items:center; gap:4px; background:none; border:none; border-radius:4px; padding:6px 10px; color:var(--nav); font-size:14px; cursor:pointer; }
.navmenu:hover > button, .navmenu:focus-within > button { color:var(--brand); background:var(--surface-alt); }
.navmenu.current > button { color:var(--brand); font-weight:600; }
/* the padding bridges the gap to the button, so the pointer can travel into the menu without it closing */
.navmenu .menu { display:none; position:absolute; left:0; top:100%; padding-top:6px; z-index:20; }
.navmenu:hover .menu, .navmenu:focus-within .menu { display:block; }
.navmenu .menu::before { content:""; position:absolute; inset:6px 0 0 0; background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.18); z-index:-1; }
/* a vertical list; each group of related pages is a block, separated from the next by a rule.
   A block is a two-column grid: the list page on the left, and to its right the actions that create its records
   ("Invoices" | "New invoice", "New credit memo").  A page with no actions spans both columns. */
.navmenu .menu .row { position:relative; display:grid; grid-template-columns:max-content auto; align-items:baseline; column-gap:14px; row-gap:2px; padding:4px; min-width:200px; }
.navmenu .menu .row + .row { border-top:1px solid var(--line); }
.navmenu .menu a { display:block; position:relative; padding:7px 10px; border-radius:4px; color:var(--ink); white-space:nowrap; }
.navmenu .menu .row > a:not(:has(+ .actions)) { grid-column:1 / -1; }
/* baseline, not centre: the actions are a smaller font, so centring left their text sitting lower than the page name's.
   margin-top:0 undoes the page-wide .actions rule further down */
.navmenu .menu .actions { display:flex; align-items:baseline; gap:2px; padding-right:4px; margin-top:0; }
.navmenu .menu .actions a { padding:5px 8px; font-size:13px; color:var(--muted); }
.navmenu .menu .actions a::before { content:"+ "; }
/* page links carry the launcher strip's icon at 16px; the create actions beside them do not */
.navmenu .menu .row > a { display:flex; align-items:center; gap:8px; }
.navmenu .menu .row > a svg { flex:none; color:var(--muted); }
.navmenu .menu .row > a:hover svg { color:var(--ink); }
.navmenu .menu a:hover { background:var(--surface-alt); color:var(--ink); }
.usermenu { position:relative; }
.usermenu summary { list-style:none; display:flex; cursor:pointer; color:var(--nav); border-radius:50%; }
.usermenu summary::-webkit-details-marker { display:none; }
.usermenu summary:hover, .usermenu[open] summary { color:var(--brand); }
.usermenu .menu { position:absolute; right:0; top:calc(100% + 8px); min-width:200px; padding:4px; background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.18); z-index:10; width:max-content; }
.usermenu .menu-user { display:flex; align-items:baseline; gap:6px; padding:8px 10px; margin-bottom:4px; border-bottom:1px solid var(--line); font-size:13px; white-space:nowrap; }
.usermenu .menu a { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:4px; color:var(--ink); }
.usermenu .menu a:hover { background:var(--surface-alt); color:var(--ink); }
/* company picker: same drop-down as the user menu, the summary looks like the old select */
.companymenu summary { align-items:center; gap:6px; padding:5px 8px 5px 10px; border:1px solid var(--field-line); border-radius:4px; color:var(--ink); }
.companymenu .menu button { display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px; background:none; border:none; border-radius:4px; color:var(--ink); font:inherit; text-align:left; white-space:nowrap; cursor:pointer; }
.companymenu .menu button:hover { background:var(--surface-alt); }
.companymenu .menu button[aria-current] { font-weight:600; }
main { padding:20px; max-width:1200px; }
main:has(.ag-grid) { max-width:none; }   /* grid pages use the whole window, so wrapped columns unwrap as it widens */
h1 { font-size:22px; font-weight:600; display:flex; align-items:center; gap:16px; }
h2 { font-size:16px; font-weight:600; margin:20px 0 6px; }
.grid { border-collapse:collapse; background:var(--surface); margin:12px 0; min-width:600px; }
.grid th, .grid td { padding:6px 10px; border-bottom:1px solid var(--line); text-align:left; }
.grid thead th { background:var(--surface-alt); font-weight:600; }
/* plain tables keep their column headings in view like the Appogee grid's stickyHeader; the shadow stands in for the
   bottom border, which border-collapse leaves behind when the cell sticks */
.grid thead th { position:sticky; top:0; z-index:2; box-shadow:0 1px 0 var(--field-line); }
.grid tfoot th { border-top:2px solid var(--ink); }
.grid tr.group th { background:var(--surface-alt); font-weight:600; padding-top:10px; }
.grid input, .grid select { width:100%; }
.grid input[type="checkbox"] { width:auto; }
/* The Appogee web grid renders <table class="table grid"> inside its host, so the .grid rules above style it.
   The host shrinks to the table so a narrow grid does not stretch across the page. */
.ag-grid { display:inline-block; max-width:100%; }
.ag-grid table.grid { width:auto; min-width:600px; }
.ag-grid table.grid th, .ag-grid table.grid td { padding:6px 10px; }
.ag-grid table.grid td form { margin:0; }
.grid-search { margin:12px 0 0; }
.grid-search input { width:320px; }
.ag-grid .ag-filter-btn { color:var(--muted); }
.ag-grid .ag-filter-btn:hover, .ag-grid .ag-filter-btn.active, .ag-grid .ag-sort { color:var(--accent); }
.ag-grid.ag-sticky thead th { box-shadow:0 1px 0 var(--field-line); }
/* the grid's popup is white by default; follow the theme */
.ag-popup, .ag-popup .ag-submenu { background:var(--surface); color:var(--ink); border-color:var(--field-line); }
.ag-popup .ag-menu-item:hover { background:var(--surface-alt); }
.ag-popup .ag-menu-item.disabled { color:var(--muted); }
.ag-popup .ag-menu-item.disabled:hover { background:none; }
.ag-popup .ag-menu-sep { border-top-color:var(--line); }
.ag-popup .ag-list { border-color:var(--line); }
.ag-popup .ag-search { background:var(--surface); color:var(--ink); border-color:var(--field-line); }
.ag-popup .ag-count, .ag-popup .ag-has-sub .ag-sub-arrow, .ag-popup .ag-node > .ag-toggle { color:var(--muted); }
.ag-popup .ag-ok { background:var(--accent); border-color:var(--accent); }
.ag-popup .ag-cancel { border-color:var(--field-line); color:var(--ink); }
.ag-popup .ag-cancel:hover { background:var(--surface-alt); color:var(--ink); }
.num { text-align:right !important; font-variant-numeric:tabular-nums; }
.inactive td { color:var(--muted); }
/* a row waiting on the user (due recurring invoice, unprocessed payroll file): accent bar on the left */
.grid tr.due > td:first-child { box-shadow:inset 3px 0 0 var(--accent); }
.row-actions { white-space:nowrap; display:inline-flex; align-items:center; gap:10px; }
.nowrap { white-space:nowrap; }
.unchanged td { color:var(--muted); opacity:.7; }
td.nowrap { white-space:nowrap; }
.fields { display:grid; grid-template-columns:repeat(3, minmax(180px, 260px)); gap:12px 16px; margin:12px 0 4px; }
.fields label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
.fields label.span { grid-column:1 / -1; max-width:812px; }
.fields input, .fields select, .fields textarea { font-size:14px; color:var(--ink); font-family:inherit; }
.fields label.check { flex-direction:row; align-items:center; gap:6px; align-self:end; padding-bottom:6px; font-size:14px; color:var(--ink); }
.fields label.check input { width:auto; }
/* ---- customer detail: the customer and each location are cards, each its own form ---- */
h1 .crumb { font-weight:400; color:var(--muted); }
/* "Deposits / Deposit 881": the slash is its own element, not part of the link; h1's 16px gap pulled in to 10px either side */
h1 .crumb-sep { font-weight:400; color:var(--muted); margin:0 -6px; }
form.card { margin:12px 0; }
form.card .fields { margin-top:4px; }
form.card .actions { display:flex; align-items:center; gap:14px; margin-top:6px; }
form.card .actions button { white-space:nowrap; }
form.card.inactive { border-style:dashed; }
form.card.inactive .fields input:not([type=checkbox]), form.card.inactive select { color:var(--muted); }
.rate-tag { color:var(--muted); font-size:13px; }
.rate-tag b { color:var(--ink); }
.add-location summary { cursor:pointer; color:var(--accent); margin:8px 0; }
.notice { padding:8px 0; }
.grid.narrow { min-width:0; }
.grid td.status { font-size:12px; white-space:nowrap; }
#technicians input.rate { width:110px; }
input.num { text-align:right; }
input.bad { border-color:var(--bad); }
button:disabled { opacity:.5; cursor:default; }
.inline { display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin:10px 0; }
/* a boxed row of list filters that apply on change (Bills, Bill payments) */
.filters { display:inline-flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0; padding:8px 12px; background:var(--surface); border:1px solid var(--line); border-radius:6px; }
.filters label { display:flex; align-items:center; gap:6px; }
.filters .gap { margin-left:14px; padding-left:14px; border-left:1px solid var(--line); }
/* Export to Excel button (AscentExcel / statement pages); a page's .excel-slot hugs the right end of its filter row */
button.excel, a.button.excel { display:inline-flex; align-items:center; gap:6px; }
.excel svg { flex:none; }
.filters .excel-slot, .inline .excel-slot { margin-left:auto; }
/* a date-range choice on one line (with Show), the any-date choice on the next */
form.range-filter { flex-direction:column; align-items:flex-start; gap:6px; }
.filter-line { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
input, select, button { font:inherit; padding:5px 8px; border:1px solid var(--field-line); border-radius:4px; }
input, select { background:var(--surface); color:var(--ink); }
/* the padding above is for text boxes; on a checkbox it stretched the grid filter's drawn 13px box and pushed the tick off-center */
input[type="checkbox"], input[type="radio"] { padding:0; }
input.wide { width:320px; }
button, .button { background:var(--accent); color:#fff; border:none; cursor:pointer; padding:6px 14px; border-radius:4px; font-size:14px; text-decoration:none; }
button.link { background:none; color:var(--accent); padding:0; }
.error { background:var(--bad-bg); color:var(--bad); padding:8px 12px; border-left:3px solid var(--bad); margin:10px 0; }
.notice { background:var(--surface-alt); padding:8px 12px; border-left:3px solid var(--ok); margin:10px 0; }
.notice ul { margin:4px 0 0; padding-left:20px; }
.choice select { margin-left:4px; }
.bad { color:var(--bad); }
.ok { color:var(--ok); }
.muted { color:var(--muted); }
.pre { white-space:pre-wrap; }
.clip { max-width:420px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.facts { display:grid; grid-template-columns:max-content 1fr; gap:4px 16px; }
.facts dt { color:var(--muted); }
.choices { display:flex; gap:12px; flex-wrap:wrap; margin:8px 0 16px; }
/* Settings: each section's controls and notes sit indented under its header, so the headers stand out */
.settings > :not(h2) { margin-left:24px; }
.settings > h2 { margin-top:24px; }
.choice { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--surface); border:1px solid var(--field-line); border-radius:6px; cursor:pointer; }
.choice:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.choice input { padding:0; }
/* ---- home page ---- */
h1 .asof { font-size:13px; font-weight:400; }
h1 .nav-toggle { margin-left:auto; font-size:14px; font-weight:normal; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; margin:14px 0 6px; }
.tile { display:flex; flex-direction:column; gap:2px; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:6px; color:var(--ink); text-decoration:none; }
.tile:hover { border-color:var(--field-line); }
.tile .label { font-size:12px; color:var(--muted); }
.tile .value { font-size:22px; font-weight:600; }
.tile .note { font-size:12px; color:var(--muted); }
/* A card never gets narrower than its content: when a grid can't fit, the card (and so the page) grows and scrolls
   sideways, instead of the grid spilling out past the card's edge.  The tiles above keep fitting the window. */
.cards { display:grid; grid-template-columns:repeat(2, minmax(min-content, 1fr)); gap:12px; margin:12px 0; }
.cards > .card { min-width:min-content; }
.card { padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:6px; min-width:0; }
.card.wide { grid-column:1 / -1; }
.card h2 { margin:0 0 8px; font-size:14px; }
.card .ag-grid table.grid { min-width:0; margin:0; }
@media (max-width: 900px) { .cards { grid-template-columns:minmax(min-content, 1fr); } }

/* ---- aging columns (AscentCharts.aging): bucket name on top like a grid header, the open invoices in the middle,
   a rule, then the bucket total (a link that narrows the grid); the picked column stays bright, the rest dim ---- */
.aging { display:flex; align-items:stretch; gap:4px; margin:8px 0 10px; max-width:860px; }
.aging .bucket { flex:1; min-width:0; display:flex; flex-direction:column; border-radius:6px; transition:opacity .12s; }
.aging .head { padding:6px 10px; background:var(--surface-alt); border-bottom:1px solid var(--line); font-weight:600; font-size:13px; white-space:nowrap; text-align:center; border-radius:6px 6px 0 0; }
.aging .lines { flex:1; padding:4px 10px; display:flex; flex-direction:column; gap:2px; font-size:13px; font-variant-numeric:tabular-nums; }
.aging .line { display:flex; justify-content:flex-end; white-space:nowrap; }
.aging .line .name { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.aging .line .amt, .aging .line .of { flex:none; white-space:pre; }
.aging.full { max-width:none; }   /* the company-wide report: five columns of customer names need the width */
.aging .line a { color:var(--accent); text-decoration:none; }
.aging .line a:hover { text-decoration:underline; }
.aging .line .of { color:var(--muted); font-size:12px; }
.aging .line.none { color:var(--muted); font-style:italic; }
.aging .sum { display:block; margin:0 10px; padding:5px 0 2px; border-top:1px solid var(--field-line); text-align:right; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); text-decoration:none; }
.aging a.sum { color:var(--accent); }
.aging a.sum:hover, .aging a.sum:focus-visible { text-decoration:underline; outline:none; }
.aging .empty .sum { color:var(--muted); font-weight:400; }
.aging .dim { opacity:.4; }
.aging .picked .head { color:var(--accent); }
.grid-filter-note { margin:0 0 4px; font-size:13px; }
.recent-toggle { margin-left:12px; font-size:13px; font-weight:normal; color:var(--muted, #666); cursor:pointer; }
.recent-toggle input { vertical-align:middle; margin:0 3px 0 0; }
.grid-filter-note a { color:var(--accent); }

/* ---- charts (ascent-charts.js) ---- */
.chart svg { display:block; width:100%; height:auto; }
.chart-grid { stroke:var(--line); stroke-width:1; }
.chart-axis { stroke:var(--field-line); stroke-width:1; }
.chart-tick { fill:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
/* dual-line chart: each value axis in its line's colour */
.chart-tick-1 { fill:var(--series-1); }
.chart-tick-2 { fill:var(--series-2); }
.chart-hit { fill:transparent; outline:none; }
.chart-hit:hover, .chart-hit:focus { fill:var(--ink); fill-opacity:.06; }
.chart-legend { display:flex; gap:16px; font-size:12px; color:var(--muted); margin-bottom:4px; }
.chart-legend-item { display:inline-flex; align-items:center; gap:6px; }
.chart-key { display:inline-block; width:10px; height:10px; border-radius:2px; flex:none; }
.chart-table { margin-top:6px; font-size:12px; color:var(--muted); }
.chart-table summary { cursor:pointer; }
.chart-table table.grid { min-width:0; color:var(--ink); }
.chart-tip { position:absolute; z-index:30; pointer-events:none; padding:6px 10px; background:var(--surface); color:var(--ink); border:1px solid var(--field-line); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.18); font-size:12px; white-space:nowrap; }
.chart-tip-title { color:var(--muted); margin-bottom:2px; }
.chart-tip-row { display:flex; align-items:center; gap:6px; }
.chart-tip-row .chart-key { width:10px; height:3px; border-radius:0; }
.chart-tip-row span:last-child { color:var(--muted); }
.chart-bar-row { display:grid; grid-template-columns:96px minmax(40px, 1fr) 92px 84px; align-items:center; gap:10px; padding:4px 0; border-radius:4px; }
.chart-bar-row:hover, .chart-bar-row:focus { background:var(--surface-alt); outline:none; }
.chart-bar-label { font-size:13px; }
.chart-bar-track { display:block; height:14px; border-radius:0 4px 4px 0; background:var(--track); }
.chart-bar-fill { display:block; height:100%; border-radius:0 4px 4px 0; background:var(--series-1); }
.chart-bar-value { text-align:right; font-variant-numeric:tabular-nums; }
.chart-bar-note { font-size:12px; color:var(--muted); }
/* ---- purchases: vendor card, bill entry, pay bills (20260930) ---- */
.notice { padding:8px 0; }
.fields label.check { flex-direction:row; align-items:center; gap:6px; align-self:end; padding-bottom:6px; font-size:14px; color:var(--ink); }
.fields label.check input { width:auto; }
.fields textarea { font-size:14px; color:var(--ink); font-family:inherit; }
form.card { margin:12px 0; }
form.card .fields { margin-top:4px; }
form.card .actions, .actions { display:flex; align-items:center; gap:14px; margin-top:10px; }
#lines select.account { min-width:260px; max-width:420px; }
#lines select.side { min-width:90px; }   /* Payroll mapping: Debit/Credit was clipped to "Det" */
#lines select.per { min-width:140px; }
#mapping #lines input.memo { min-width:160px; }
#lines input.descr { width:100%; min-width:220px; }
.grid td.past-due, .past-due { color:var(--bad); }

/* ---- customer / contact pages: history tiles, contacts table, jump links, the new-customer hint ---- */
h3 { font-size:14px; font-weight:600; margin:16px 0 2px; }
/* what sits under a heading steps in a little, so it reads as the heading's child; the headings themselves stay flush */
.under { margin-left:18px; }
h2 .muted { font-weight:400; font-size:13px; margin-left:16px; }   /* the same gap h1 puts before its .asof */
.jump { display:flex; gap:14px; font-size:13px; margin:-4px 0 8px; }
.jump a { color:var(--accent); text-decoration:none; }
.grid td.center { text-align:center; }
#contact-table input.role, #customer-table input.role { width:160px; }
#contact-pick, #customer-pick { max-width:360px; }
.notice.similar { background:var(--surface); border:1px solid var(--field-line); border-left:3px solid var(--accent); padding:8px 12px; margin:10px 0; max-width:812px; }
.notice.similar ul { margin:4px 0 0; padding-left:18px; }
.fields textarea { font:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--field-line); border-radius:4px; padding:5px 8px; resize:vertical; }
/* ---- accounting periods (20260930) ---- */
.yearpick { margin:0; align-items:center; font-size:14px; font-weight:400; }
.yearpick .button { padding:4px 10px; }
.notice.year-notice { background:var(--surface-alt); color:var(--ink); padding:8px 12px; border-left:3px solid var(--ok); margin:10px 0; }
.card.year { margin:12px 0; max-width:820px; }
.year-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.year-head h2 { margin:0; }
.year-head h2 .muted { font-weight:400; margin-left:8px; }
.year-facts { margin:12px 0; grid-template-columns:max-content max-content; column-gap:24px; }
.year-facts dd { margin:0; }
.badge { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; font-weight:600; }
.badge.open { background:var(--track); color:var(--accent); }
.badge.closed { background:var(--surface-alt); color:var(--muted); border:1px solid var(--line); }
.card.year .actions { flex-wrap:wrap; }
.card.year .actions form { margin:0; }
.periods tr.closed td { color:var(--muted); }
.periods td form { margin:0; }
.help { margin:16px 0; max-width:820px; }
.help summary { cursor:pointer; color:var(--muted); }
.help ul { margin:8px 0 0 18px; padding:0; }
.help li { margin:4px 0; }
/* the wrapper shrinks to the grid's width, so the right-aligned totals land under the Amount column, not at the page edge */
.grid-with-totals { width:fit-content; max-width:100%; }
.invoice-totals { width:auto; margin:8px 0 0 auto; }
.page-delete { margin-top:32px; }

/* Home page quick navigation: Sales / Purchases / Accounting steps in order, joined by chevrons.  A step is a tile (icon over label)
   with a count line under it that links to the list it counts; .ghost steps are modules not built yet. */
.flow { display:flex; flex-direction:column; align-items:stretch; margin:12px 0 4px; padding:4px 14px; background:var(--surface); border:1px solid var(--line); border-radius:6px; overflow-x:auto; }
.flow-row { display:flex; align-items:flex-start; gap:4px; padding:4px 0; min-width:max-content; }
.flow-row + .flow-row { border-top:1px solid var(--line); }
.flow-title { font-size:12px; color:var(--muted); min-width:72px; padding-top:18px; }
.flow .step { display:flex; flex-direction:column; align-items:center; min-width:96px; padding:8px 10px 6px; border-radius:6px; white-space:nowrap; }
.flow .step:hover { background:var(--surface-alt); }
/* the tile link (not the count link beneath it) */
.flow .step > a:not(.cnt), .flow .step > .face { display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--ink); text-decoration:none; }
.flow .step > a:not(.cnt):focus-visible { outline:none; } .flow .step > a:not(.cnt):focus-visible .lbl { text-decoration:underline; }
.flow .step svg { color:var(--accent); flex:none; }
.flow .lbl { font-size:13px; line-height:1.2; }
/* the count line: muted so the label above it stands out */
.flow .cnt { margin-top:3px; font-size:11px; line-height:1.2; color:var(--muted); font-variant-numeric:tabular-nums; text-decoration:none; }
.flow a.cnt:hover, .flow a.cnt:focus-visible { color:var(--accent); text-decoration:underline; outline:none; }
.flow .cnt.due { color:var(--bad); }
.flow .ghost { opacity:.55; cursor:default; }
.flow .ghost:hover { background:none; }
.flow .ghost svg { color:var(--muted); }
.flow .ghost .lbl { font-style:italic; }
.flow-arrow { color:var(--muted); flex:none; margin-top:12px; }
.flow-arrow.branch { margin-left:8px; }
.warn { background:var(--surface-alt); color:var(--ink); padding:8px 12px; border-left:3px solid var(--bad); margin:10px 0; }
.grid textarea { width:100%; min-width:240px; font:inherit; padding:5px 8px; border:1px solid var(--field-line); border-radius:4px; background:var(--surface); color:var(--ink); resize:vertical; field-sizing:content; }

/* ---- Reports > Aging: the reminder checklist (10/1/2026) ---- */
.remind td.check, .remind th.check { width:1%; text-align:center; }
.remind td.none { color:var(--muted); font-style:italic; }
.remind td.to { max-width:320px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.remind-actions { display:flex; align-items:center; gap:14px; margin:10px 0; flex-wrap:wrap; }
.draft-list { margin:4px 0 0; padding-left:20px; }
.draft-list .bad { font-weight:600; }
/* ---- financial statements (Balance Sheet, Profit & Loss): a plain indented table, see Pages/Shared/_Statement ---- */
.statement-title { margin:14px 0 8px; }
.statement-title .company { font-weight:600; }
.statement-title .name { font-size:18px; font-weight:600; }
/* report pages: the heading line is as wide as the filter box under it, with Export to Excel at its right end */
.statement-head { display:inline-flex; flex-direction:column; max-width:100%; }
.statement-head.wide { display:flex; }   /* pages whose content spans the window (Aging) */
.statement-head h1 { display:flex; align-items:center; gap:16px; }
.statement-head h1 > .excel, .statement-head h1 > .excel-slot { margin-left:auto; font-size:14px; font-weight:normal; }
.statement-title .period { color:var(--muted); }
.statement { border-collapse:collapse; background:var(--surface); min-width:520px; margin:6px 0 20px; }
.statement th, .statement td { padding:4px 10px; white-space:nowrap; }
.statement thead th { background:var(--surface-alt); font-weight:600; border-bottom:1px solid var(--line); }
.statement td.num { min-width:110px; }
.statement td a { color:inherit; text-decoration:none; }
.statement td a:hover { color:var(--accent); text-decoration:underline; }
.statement tr.heading td { font-weight:700; padding-top:14px; letter-spacing:.03em; }
.statement tr.subheading td { font-weight:600; padding-top:8px; }
.statement tr.subtotal td, .statement tr.total td { font-weight:600; }
.statement tr.subtotal td.num, .statement tr.total td.num { border-top:1px solid var(--line); }
.statement tr.grand td { font-weight:700; border-top:1px solid var(--ink); border-bottom:3px double var(--ink); }
.statement tr.note td { color:var(--muted); font-style:italic; }
.statement td.loss { color:var(--bad); }
/* General Ledger: one <tbody> per account (Beginning → postings with running balance → Ending) */
.ledger tr.account td { font-weight:700; padding-top:14px; }
.ledger tr.account td.muted { font-weight:400; text-align:right; }
.ledger tr.balance td { color:var(--muted); }
.ledger tr.balance td:first-child, .ledger tr.posting td:first-child { padding-left:28px; }
.ledger tr.reversal td { font-style:italic; }
.ledger td.memo { white-space:normal; min-width:160px; max-width:320px; }
.ledger td.num { min-width:90px; }
.ledger thead th { text-align:left; }
.ledger thead th.num { text-align:right; }
.statement-filters label.choice { padding:4px 10px; }
/* ---- Reports > Sales tax returns (10/2/2026): the CDTFA-401-A lines beside the collected-vs-owed box ---- */
.statement-head h1 > .head-actions { margin-left:auto; font-size:14px; font-weight:normal; }
tr.clickable { cursor:pointer; }
.inline[hidden], .fields[hidden], .fields label[hidden] { display:none; }   /* their display:flex / grid would otherwise beat the hidden attribute */
.tax-return { display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.statement td.line-no { color:var(--muted); width:3em; text-align:right; padding-right:4px; }
.statement input.adjust { width:110px; text-align:right; font:inherit; }
.collected { max-width:340px; margin-top:14px; }
.collected h3 { margin:0 0 8px; font-size:15px; }
.collected .pair { display:flex; justify-content:space-between; gap:16px; margin:4px 0; }
.collected .pair b { font-variant-numeric:tabular-nums; }
.collected.differs { border-left:3px solid var(--bad); }
.grid tr.manual td:first-child { box-shadow:inset 3px 0 0 var(--accent); }   /* a line whose kind Heather changed (Refresh leaves it alone) */
.grid select.kind { font:inherit; }
.grid input.note { font:inherit; width:140px; }
.tax-lines .clip { max-width:260px; }
@media print {
	header.topbar, .flow, form[data-instant], .no-print { display:none !important; }
	main { padding:0; max-width:none; }
	body, .statement { background:#fff; color:#000; }
	.statement thead th { background:none; }
	.statement td.loss, .error { color:#000; }
	.statement td a { color:#000; }
	.ledger thead { display:table-header-group; }
	.ledger tbody { break-inside:avoid; }
}

/* ---- Receive customer payments: a check banner per check, its linked invoices tabbed in under it ---- */
.checks .add-check { padding:0 8px; font-weight:600; line-height:1.4; margin-right:14px; }
.checks .another-check { margin-left:16px; font-size:13px; font-weight:normal; }
.checks tr.spacer td { height:10px; padding:0; border-bottom:none; }
.checks tr.invoice-head th { font-size:12px; color:var(--muted); font-weight:600; }
.checks tr.invoice-head th:first-child { padding-left:34px; }
/* the check sits indented under its customer: the blue edge belongs to the banner itself, not the row */
.checks tr.check-banner td { padding:6px 10px 6px 34px; }
.checks tr.check-banner td > div { display:flex; flex-wrap:wrap; align-items:center; gap:14px; background:var(--surface-alt); border-left:3px solid var(--accent); border-radius:3px; padding:6px 10px; }
.checks tr.check-banner label { display:inline-flex; align-items:center; gap:6px; font-size:13px; }
.checks tr.check-banner input { width:auto; }
.checks .check-end { margin-left:auto; display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.checks .check-status { font-size:13px; }
.checks tr.linked td:nth-child(2), .checks tr.unlinked td:nth-child(2) { padding-left:6px; }
.checks tr.linked input.num { width:110px; }
.checks tr.linked td:nth-child(6) { text-align:right; }
/* the cell stays a table cell (so its bottom line meets the row's); the buttons flex inside it */
.checks td.link-to > div { display:flex; gap:12px; white-space:nowrap; }
.checks td.link-to button { padding:3px 10px; font-size:13px; }
.checks tr.check-gap td { height:22px; padding:0; border-bottom:none; }
/* no line under a check's last invoice: the check ends there, and the gap below separates it from the next */
.checks tr.linked.last td { border-bottom:none; }
.checks tr.linked-head th { padding-top:10px; padding-bottom:10px; }
.checks td.grip-cell { width:24px; padding-left:34px; }
/* invoices linked to a check sit a step further in than the waiting ones: they belong to the check above */
.checks tr.linked td.grip-cell, .checks tr.linked-head th:first-child { padding-left:64px; }
.checks tr.check-banner b { margin-right:10px; }
.checks .check-status { white-space:nowrap; }
.checks .grip { display:inline-flex; color:var(--muted); cursor:grab; }
.checks tr.dragging { opacity:.45; }
.checks tr.check-banner.drop td > div { outline:2px dashed var(--accent); outline-offset:-2px; }
.checks tr.linked.drop td { background:var(--track); }
#batch .deposit-total { font-weight:600; margin:12px 0 10px; }
/* the Open invoices bar matches a check's banner, so the page reads as titled groups */
.checks tr.open-title td { padding:6px 10px 6px 34px; }
.checks tr.open-title td > div { background:var(--surface-alt); border-left:3px solid var(--accent); border-radius:3px; padding:10px 10px; }
.checks .open-hint { margin-left:24px; font-size:13px; }
.checks .open-hint .grip { vertical-align:-3px; cursor:default; }

/* Edit / delete (10/6/2026): a destructive button, and the banner on a deleted document */
button.danger, .button.danger { background:#b91c1c; color:#fff; }
.notice.deleted { border-left-color:var(--bad); }
.delete-check { margin:12px 0; padding:10px 14px; background:var(--surface); border:1px solid var(--line); border-radius:6px; max-width:812px; }
.delete-check h2 { margin-top:4px; }
.delete-check ul { margin:4px 0 8px; padding-left:20px; }

/* Account Register (10/6/2026): the sub-type line under the h1 with its links on the right; reversals in italics like the General Ledger */
.register-meta { display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; margin:0 0 4px; }
.register-links { font-size:14px; }
.ag-grid tr.reversal td { font-style:italic; }

/* Customer / contact delete (10/6/2026): the panel's button row, and the small link that opens the customer panel */
.delete-check .delete-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:12px; }
.delete-check .delete-actions form { margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.delete-check .delete-actions input { margin-left:6px; min-width:220px; }
.delete-check ul button { padding:2px 10px; font-size:13px; margin-left:6px; }
.delete-link { margin-top:32px; font-size:13px; }
.delete-link a { color:var(--bad); }

/* Vendor delete (10/6/2026): the small "Delete vendor..." link at the right of a form's actions row */
.actions .delete-link { margin-left:auto; color:var(--bad); font-size:13px; }
.delete-check .nowrap { white-space:nowrap; }

/* Passkey sign-in (10/29/2026): the pages seen before sign-in (_PublicLayout) and Settings > Users */
body.public { display:flex; justify-content:center; }
body.public main.public-card { max-width:460px; width:100%; margin:48px 16px; padding:24px 28px; background:var(--surface); border:1px solid var(--line); border-radius:8px; }
.public-card .brand { margin-bottom:8px; }
.public-card .actions { display:flex; align-items:center; gap:14px; margin-top:14px; }
.license-banner { margin:0 0 12px; }
.user-card { margin:12px 0; max-width:960px; }
.user-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.user-head .user-buttons { margin-left:auto; }
.tag { font-size:12px; padding:0 7px; border:1px solid var(--field-line); border-radius:10px; color:var(--muted); }
.user-card .grid { margin:8px 0; }
.user-card .fields .actions { display:flex; align-items:center; gap:14px; grid-column:1 / -1; }
.add-location .fields .actions { display:flex; align-items:center; gap:14px; grid-column:1 / -1; }
.invite-url { width:520px; max-width:100%; }
.usermenu .menu form { margin:0; }
.usermenu .menu button.menu-link { display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px; background:none; border:none; border-radius:4px; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.usermenu .menu button.menu-link:hover { background:var(--surface-alt); }

/* ---- Phones (10/30/2026).  Everything phone-only sits in the max-width block below, so a laptop or desktop window keeps
   the layout above.  Done for the pages someone would use away from a desk: Home, Invoices, Customers, Receive payment,
   Aging; reports, the journal and sales tax are left for a laptop. ---- */
.menu-toggle, .company-short { display:none; }
@media (max-width: 700px) {
	/* top bar: logo, company, user, menu button on one line; the menus open as a list under it */
	.topbar { flex-wrap:wrap; gap:8px 10px; padding:10px 16px; }
	.brand { font-size:17px; gap:6px; }
	.brand img { width:auto; height:13px; }
	.companymenu { margin-left:auto; min-width:0; }
	.companymenu summary { max-width:100%; }
	.company-name { display:none; }
	.company-short { display:inline; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
	.menu-toggle { display:flex; padding:4px; background:none; color:var(--nav); }
	.topbar.nav-open .menu-toggle { color:var(--brand); }
	.topbar nav { display:none; order:5; flex-basis:100%; flex-direction:column; gap:0; white-space:normal; border-top:1px solid var(--line); }
	.topbar.nav-open nav { display:flex; }
	.navmenu + .navmenu { border-top:1px solid var(--line); }
	.navmenu > button { width:100%; justify-content:space-between; padding:12px 4px; font-size:16px; }
	.navmenu > button svg { transition:transform .15s; }
	.navmenu.open > button svg { transform:rotate(180deg); }
	.navmenu:hover > button, .navmenu:focus-within > button { background:none; }
	/* a tap opens a menu (the .open class from _Layout), not hover: a phone's "hover" sticks after the tap */
	.navmenu:hover .menu, .navmenu:focus-within .menu { display:none; }
	.navmenu.open .menu { display:block; position:static; padding:0 0 8px; }
	.navmenu .menu::before { display:none; }
	.navmenu .menu .row { grid-template-columns:minmax(0, 1fr); min-width:0; padding:0; }
	.navmenu .menu .row > a { grid-column:auto; padding:10px 8px; font-size:15px; }
	.navmenu .menu .actions { flex-wrap:wrap; padding:0 0 4px 32px; }
	.navmenu .menu .actions a { padding:8px; font-size:14px; }

	main { padding:16px; }
	h1 { flex-wrap:wrap; gap:8px 12px; font-size:20px; }
	h1 > .button, h1 > button, h1 > form { white-space:nowrap; }
	h1 .nav-toggle { margin-left:0; }

	/* iPhones zoom into any field whose text is under 16px when it is tapped */
	input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size:16px !important; }
	button, .button { padding:9px 14px; }
	.fields { grid-template-columns:minmax(0, 1fr); }
	.fields label.span { max-width:none; }
	.grid-search input, input.wide { width:100%; }
	#lines select.account { min-width:200px; }
	#lines select.item { min-width:120px; }
	.inline > label { min-width:0; max-width:100%; }
	#contact-pick, #customer-pick { max-width:100%; }
	/* a range filter stacks as a two-column grid under its radio: words ("to", "from") right-aligned in the first column, the
	   date boxes lined up in the second, Show under them; so each choice reads as its radio's children.  The labels around
	   the date boxes drop out (display:contents) so their word and box land in separate columns.  A radio label's own
	   wrapped text also starts under its words.  25px = radio margin 5 + 13 + 3, plus the space. */
	.filter-line { display:grid; grid-template-columns:auto auto; justify-content:start; justify-items:end; align-items:center; gap:8px 10px; padding-left:25px; }
	.filter-line > * { justify-self:start; }
	.filter-line > label:first-child { display:block; margin-left:-25px; padding-left:25px; text-indent:-25px; }
	.filter-line > label:first-child + label, .filter-line > label:not(:first-child) { display:contents; }
	.filter-line > label:first-child:has(+ label) { grid-column:1 / -1; }
	.filter-line > button { grid-column:2; }

	/* a table wider than the phone scrolls sideways inside its own box, not the whole page */
	.ag-grid { display:block; overflow-x:auto; }
	.ag-grid table.grid { min-width:0; }
	main table.grid:not(.ag-grid table), main table.statement { display:block; width:max-content; max-width:100%; min-width:0; overflow-x:auto; }

	/* home: two tiles a row, cards one under the other and no wider than the phone */
	.tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
	.tile .value { font-size:19px; }
	.cards { grid-template-columns:minmax(0, 1fr); }
	.cards > .card { min-width:0; overflow-x:auto; }
	.chart-bar-row { grid-template-columns:84px minmax(24px, 1fr) auto auto; gap:8px; }
	/* aging columns: three a row instead of five squeezed into one */
	.aging { flex-wrap:wrap; row-gap:10px; }
	.aging .bucket { flex:1 1 30%; }
}