s with the zebra painted per-| --
`background: inherit` does not transfer (guide §7), and §8.1 is why every
state is restated rather than one bare rule added.
A17 (red team 2): `tfoot` is enumerated with `tbody`. The 60-day supply
table foots its division and group totals in SQL and prints them in a
| -- so with the pin scoped to tbody alone, the totals were the ONE
set of rows that lost their label when the table scrolled: "36.5 / 65.1 /
51.4 / 44.0" under an empty store-name column. */
.table-wrap > table.data > thead > tr > th:first-child,
.table-wrap > table.data > tbody > tr > th[scope="row"]:first-child,
.table-wrap > table.data > tfoot > tr > th[scope="row"]:first-child {
position: sticky; left: 0; z-index: 2;
box-shadow: 1px 0 0 var(--mg-border);
}
.table-wrap > table.data > thead > tr > th:first-child {
background: var(--mg-table-head); z-index: 3;
}
/* A20 (red team 2): NO TRUNCATION. This cap used to be
`max-width: 116px; text-overflow: ellipsis`, which printed "Toyota
Cleveland H..." on the home balance band -- a bare truncation of an
identity, which the house rule forbids everywhere else on the site. The
replacement is the policy widget's treatment: nowrap plus a font-size
step down to the 11px floor, and the column takes the width the NAME
needs. The table is inside a scroller, so a wider identity column costs
sideways travel in the numbers, not a clipped name -- and the pin means
the name is on screen for all of it. The longest roster name, "Martin
Dodge Jeep Chrysler Ram" at 11px, measures ~140px of a 366px viewport. */
.table-wrap > table.data > tbody > tr > th[scope="row"]:first-child,
.table-wrap > table.data > tfoot > tr > th[scope="row"]:first-child {
background: #FFFFFF;
max-width: none; overflow: visible; text-overflow: clip;
white-space: nowrap; font-size: 12px; letter-spacing: -.1px;
}
.table-wrap > table.data > tbody > tr:nth-child(even) > th[scope="row"]:first-child {
background: var(--mg-zebra);
}
.table-wrap > table.data > tbody > tr.r-division_total > th[scope="row"]:first-child,
.table-wrap > table.data > tbody > tr.k-division_total > th[scope="row"]:first-child,
.table-wrap > table.data > tfoot > tr.r-division_total > th[scope="row"]:first-child,
.table-wrap > table.data > tfoot > tr.k-division_total > th[scope="row"]:first-child {
background: #FAFBFA;
}
.table-wrap > table.data > tbody > tr.r-group_total > th[scope="row"]:first-child,
.table-wrap > table.data > tbody > tr.k-group_total > th[scope="row"]:first-child,
.table-wrap > table.data > tfoot > tr.r-group_total > th[scope="row"]:first-child,
.table-wrap > table.data > tfoot > tr.k-group_total > th[scope="row"]:first-child {
background: var(--mg-table-head);
}
.table-wrap > table.data > tbody > tr.is-acked > th[scope="row"]:first-child {
background: #FAFBFA;
}
/* A `table.data` that is NOT inside a scroll wrapper poisons the whole page
(guide §3.2) -- the CarCutter "what it means" table is 397px in a 364px
card and took /merchandising to 426px. It scrolls itself here rather than
the page. The template that emits it belongs to another lane; a
`.table-wrap` around it is the right permanent fix. */
.card > table.data,
.content > table.data { display: block; overflow-x: auto; max-width: 100%; }
/* ---- A17: the record card -----------------------------------------------
A shared list-of-records card, used by the hygiene queue and the users
table. Both emit it from the SAME fragment as the table (one template,
two renderings) so the two cannot drift -- the house rule. */
.rec-cards { display: block; }
.rec-card {
border: 1px solid var(--mg-border); border-radius: var(--radius);
padding: 10px 12px; margin-bottom: 8px; background: #FFFFFF;
}
.rec-card:nth-of-type(even) { background: var(--mg-zebra); }
.rec-card.is-quiet { background: #FAFBFA; }
.rec-card-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 8px; flex-wrap: wrap; margin-bottom: 4px;
}
.rec-card-id { font-weight: 600; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.rec-card-sub { font-size: 12px; color: var(--mg-text-2); margin: 0 0 4px; }
.rec-card-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px 10px; margin: 4px 0;
}
.rec-cell { display: flex; flex-direction: column; min-width: 0; }
.rec-cell-label {
font-size: 11px; letter-spacing: .6px; text-transform: uppercase;
color: var(--mg-text-muted); font-weight: 600;
}
.rec-cell-value { font-size: 13px; overflow-wrap: anywhere; }
/* The summary card's pills cell (see `_summary_table.html`): full card row,
and the badge inside it may wrap -- a card has no sideways scroll to put
an unbreakable 192px pill into. */
.sum-cell-wide { grid-column: 1 / -1; }
.sum-card .cell-pills { flex-wrap: wrap; }
.sum-card .cell-pills .mg-badge { white-space: normal; }
/* Actions sit on their own rule at the foot of the card, full width, 44px:
the defect the reviewer hit was an Acknowledge button at x=823 on a 390px
screen, and a card whose action is still off to one side has not fixed it. */
.rec-card-actions {
display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
border-top: 1px solid var(--mg-border); padding-top: 8px; margin-top: 6px;
}
.rec-card-actions > * { flex: 1 1 100%; }
.rec-card-actions .btn { min-height: 44px; width: 100%; font-size: 14px; }
.rec-card-actions input[type=text],
.rec-card-actions select { min-height: 44px; font-size: 16px; width: 100%; }
.rec-card-actions form { display: flex; flex-direction: column; gap: 6px; }
/* ====== round 5, lane G7 (red team 2: A19, B12) ======================== */
/* ---- A19: the page title is not an abbreviation -------------------------
`.topbar h1` is `nowrap + ellipsis` so a long title cannot push the
nine-dot switcher off the bar. On a 390px phone the bar also carries the
hamburger (44px) and the logo, and the report titles are the long ones:
"Martin Management Group -- Used Car Board" rendered as "Marti...".
Truncating a HEADING is the same defect as truncating an identity, so the
title drops to a SECOND ROW instead: `flex-wrap` on the bar, `order` puts
the switcher up beside the hamburger, and the title takes the full width
underneath and wraps to as many lines as it needs. The bar grows from
52px to about 76px; nothing is sticky against `--topbar-h`, so nothing
else moves. */
.topbar { flex-wrap: wrap; align-items: center; padding-top: 6px; padding-bottom: 6px; row-gap: 2px; }
.topbar h1 {
order: 1; flex: 1 1 100%; min-width: 100%;
white-space: normal; overflow: visible; text-overflow: clip;
font-size: 15px; line-height: 1.25; padding-right: 0;
}
.topbar .switcher--head { order: 0; margin-left: auto; }
/* Same defect one row down, and the same answer. `.page-head` is a
space-between flex row: title on the left, Print / Download PDF / Export
CSV on the right. At 390 the three buttons take 300px of the 366 and the
heading is left with a 66px column -- "Over / Age / Used / Vehicle /
Inventory", one word per line, which is how the report pages actually
rendered. The heading takes its own full-width line and the buttons wrap
underneath it. `.page-head` is the admin pages' version of the same row
and gets the same treatment. */
.page-header .page-title { flex: 1 1 100%; min-width: 100%; }
.page-head { flex-direction: column; align-items: stretch; gap: 8px; }
/* ---- ROUND 6 / B5: no Print, Download PDF or Export CSV on a phone ------
All three are desktop-only acts. Printing and "save a PDF I will mail to
the GM" happen at a desk; a downloaded CSV on a phone lands somewhere the
reader cannot open it. They were also the 300px of buttons that pushed the
page heading onto its own line above -- that rule stays, because the row
still carries the snapshot picker on the report pages.
ONE rule covers 22 pages: both header macros emit `.page-actions`
(`_page_header.html`, `reports/_report_header.html`). The header does not
collapse to nothing -- it keeps the title and the snapshot picker.
NOT hidden: the inline "Export days supply (CSV)" prose link on Over-Age
New, which is a sentence in the page body and not a `.page-actions`
button. Print CSS hides the same buttons under `@media print` already. */
.page-actions { display: none; }
/* ---- B12: the jump strip on a long page ---------------------------------
Data Hygiene is 13,500px on a phone, Pricing 14,000, Over-Age New 12,000,
and a reader who wants the third card scrolls past two. The strip is
PHONE ONLY (`display: none` above, base rule before this block): at 1440
every one of these pages is two or three screens and a second navigation
control would be chrome for nothing. It is plain anchors -- no JS, works
with the browser's own back button, and `scroll-margin-top` keeps the
sticky topbar off the heading it lands on. */
.jump-links { display: flex; }
.jump-anchor > .card, .card[id], .jump-anchor { scroll-margin-top: 96px; }
.jump-foot { display: block; }
}
/* ---------------------------------------------------------------------------
Pagination (templates/_pagination.html) -- SHARED by every paged list, so it
lives here and not in a page stylesheet. Until 2026-09-30 it sat in
pages/admin.css, and every non-admin page rendered the pager as a bare
bulleted list. One row: page size, "Showing a-b of N", then the page
numbers pushed right; it wraps (numbers onto their own line) when narrow.
Scorecard values (HANDOFF §5/§6): controls 30px, 12px text, #C9CFCC
borders, radius 4, current page teal.
--------------------------------------------------------------------------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
margin: 14px 0 6px; font-size: 12px; }
.pager-size { display: flex; align-items: center; margin: 0; }
.pager-size .pill { display: inline-flex; align-items: center; gap: 8px;
margin: 0; padding: 0; background: none; border: 0; }
.pager-size .pill > span { font-size: 10px; font-weight: 700; letter-spacing: 1px; white-space: nowrap;
text-transform: uppercase; color: #6B7370; }
.pager-size select { height: 30px; padding: 0 26px 0 8px; font: inherit;
font-size: 12px; color: #222927; background-color: #FFFFFF;
border: 1px solid #C9CFCC; border-radius: 4px; }
.pager-showing { margin: 0; font-size: 12px; color: #5A6461;
font-variant-numeric: tabular-nums; }
.pager-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
list-style: none; margin: 0 0 0 auto; padding: 0; }
.pager-pages li { display: inline-flex; margin: 0; padding: 0; }
.pager-pages li::marker { content: none; }
.pager-page, .pager-step {
display: inline-flex; align-items: center; justify-content: center;
min-width: 30px; height: 30px; padding: 0 10px; box-sizing: border-box;
font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1;
color: #0E7C6B; text-decoration: none; background: #FFFFFF;
border: 1px solid #C9CFCC; border-radius: 4px; }
a.pager-page:hover, a.pager-step:hover { background: #F6FAF9; color: #128A76;
border-color: #17A38C; }
.pager-page.is-current { background: #17A38C; border-color: #17A38C;
color: #FFFFFF; font-weight: 700; }
.pager-step.is-off { color: #98A09D; background: #F7F8F7; border-color: #E6E9E7; }
.pager-gap { padding: 0 2px; color: #98A09D; font-size: 12px; }
@media (max-width: 640px) {
.pager { gap: 10px 12px; }
.pager-size select { height: 44px; font-size: 16px; }
.pager-pages { margin-left: 0; width: 100%; }
}