(CBSInvoices.aspx),
with .rr-tabs inside THAT. So the selector matched #cbsRailRoot - which is not
.rr-tabs - and display:none'd the whole rail content, icons included. The rail
element itself still got its 48px from the rule below, which is exactly what
the captures show: railWidth 48 with nothing in it. Restoring opacity and
transform, then visibility and pointer-events, could never have helped; those
rounds fixed real problems on the wrong element.
Second, smaller cause, which would have bitten as soon as the first was fixed:
#RightRailContent carries 24px of side padding (rightrail.css:84) and .rr-tabs
bleeds out of it with -24px margins. In a 48px strip that leaves no content
width at all, so the icons had to have their gutters removed too.
WIDTH RANGE, changed 2026-09-19 on the developer's request: the closed strip
now applies at EVERY width, not only below 1440. Closing the rail always
leaves the five icons reachable. The overlay behaviour for the OPEN rail stays
below a breakpoint - at and above it an open rail is still docked and still
takes its own column, exactly as before.
CBS-69 2026-09-28: THAT BREAKPOINT IS NOW 1765, NOT 1439. See the CBS-69 block
at the media query itself, and the CBS-69 section of the CBS-37 note further up
for the viewport floor that had to move with it.
========================================================= */
/* ---- closed: the strip, at every width -------------------------------- */
/* The closed rail keeps a strip instead of collapsing to 0. This overrides
body.rr-enabled.close-rail.rr-reclaim from layout.css. */
body.cbs-invoices.cbs-rail-strip.rr-enabled.close-rail.rr-reclaim,
body.cbs-invoices.cbs-rail-strip.rr-enabled.rr-reclaim.rr-closing {
--layout-rail-col: var(--rail-strip-width, 48px);
}
/* CBS-34 2026-09-19: and the same width for the appbar and the footer, in EVERY rail state.
Deliberately no state class - this page's closed column is the 48px strip whether the rail is
open, closed or mid-transition, and the appbar and footer are supposed to hold that value
throughout so opening the rail moves only the content track. It pairs with the three
state-independent rules in layout.css; without this one CBS Invoices would fall back to the
rr-reclaim rule there, take 0, and its appbar would sit 24px off the content at 1920. */
body.cbs-invoices.cbs-rail-strip.rr-enabled.rr-reclaim {
--layout-rail-col-static: var(--rail-strip-width, 48px);
}
/* rightrail.css:68 hides a closed rail with four properties - opacity, transform,
visibility and pointer-events. All four have to come back, or the strip is an
empty column that cannot be clicked. */
body.cbs-invoices.cbs-rail-strip.close-rail .right-rail {
display: flex;
flex-direction: column;
width: var(--rail-strip-width, 48px);
min-width: var(--rail-strip-width, 48px);
opacity: 1;
transform: none;
visibility: visible;
pointer-events: auto;
overflow: visible;
padding: 0;
}
/* The panel's own gutters do not fit in 48px. */
body.cbs-invoices.cbs-rail-strip.close-rail #RightRailContent {
padding: 0;
overflow: visible;
scrollbar-gutter: auto;
}
/* The page's rail wrapper: keep it, size it to the strip. Hiding it was the bug. */
body.cbs-invoices.cbs-rail-strip.close-rail #cbsRailRoot {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* CBS-20: the rail header is a 69px sticky toolbar (--rr-toolbar-h, cbs.css:7) painted in
--surface, sized for a 280px panel. In the strip it drew a white block behind the FIRST
icon - which is also the active one - while the other four overflowed below it, reading as
active-state styling when it was really the toolbar. In the strip the header IS the strip,
so it gets no height, no sticky and no background of its own; .right-rail already provides
the surface, the border and the radius. */
body.cbs-invoices.cbs-rail-strip.close-rail .cbs-rr-header {
display: block;
height: auto;
position: static;
background: transparent;
z-index: auto;
}
body.cbs-invoices.cbs-rail-strip.close-rail #cbsRailTitle {
display: none;
}
/* Hide the PANELS, never the wrapper that holds the tabs. */
body.cbs-invoices.cbs-rail-strip.close-rail .rr-state,
body.cbs-invoices.cbs-rail-strip.close-rail .right-rail-header,
body.cbs-invoices.cbs-rail-strip.close-rail .right-rail-close,
body.cbs-invoices.cbs-rail-strip.close-rail .right-rail-actions {
display: none;
}
body.cbs-invoices.cbs-rail-strip.close-rail .rr-tabs {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 100%;
margin: 0;
padding: 12px 0;
border-bottom: 0;
/* CBS-20: no background and no height of its own. Both belonged to the 280px panel and
both painted the block the developer saw. .right-rail supplies the surface. */
background: transparent;
border-left: 0;
height: auto;
box-sizing: border-box;
}
/* The icons keep their own focus ring, so keyboard users can tab into the
strip and open a panel from it exactly as they can when the rail is open. */
body.cbs-invoices.cbs-rail-strip.close-rail .rr-tabs > * {
flex: 0 0 auto;
}
/* ---- open: overlay, below 1766 ----------------------------------------
CBS-69 2026-09-28: WAS 1439. Raised to 1765 on the developer's design decision, and the
rationale is recorded at the CBS-69 block further up this file - read it before changing
this number, because a floating rail COVERING the grid is the intended behaviour and not a
compromise. 1765 is the width at which a docked rail first forces a horizontal scrollbar
on a CBS employee's grid, so from here down the grid keeps its full width instead.
---------------------------------------------------------------------- */
@media (max-width: 1765px) {
/* CBS-21: at overlay widths the rail contributes NO layout width, in any state -
open, closed, opening or closing. Deliberately no state class in the selector.
The old rule keyed on .show-rail, and .layout-body transitions
grid-template-columns, so any frame where the body carries none of show-rail /
close-rail / rr-closing fell back to the :root default (theme.css:118,
--rail-width 280px) and the grid started animating towards a docked rail before
snapping back. MT_OpenRightRail leaves exactly that gap: it removes close-rail and
adds show-rail one requestAnimationFrame later. Specificity (0,4,1) clears every
rail rule in layout.css, whose highest is (0,3,1). */
body.cbs-invoices.cbs-rail-strip.rr-enabled.rr-reclaim {
--layout-rail-col: var(--rail-strip-width, 48px);
}
/* Same reasoning for the element: :not(.close-rail) spans open, closing and the
in-between frames, so the rail can never fall back to the docked base - position
sticky at var(--rail-width) inside the 48px track - part way through a transition.
Only the fully closed state leaves this rule, and that is the strip. */
body.cbs-invoices.cbs-rail-strip:not(.close-rail) .right-rail {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: var(--rail-width);
z-index: 40;
background: var(--surface);
box-shadow: var(--shadow-2);
overflow: auto;
}
body.cbs-invoices.cbs-rail-strip .layout-body {
position: relative;
}
/* Header chip vs the floating card: nothing to do here. appbarAlign.js measures the card wherever it is
(docked, or this floating one anchored to the viewport edge) and the chip follows it. */
}
/* =========================================================
CBS-04 round six, 2026-09-18
========================================================= */
/* (5) The grid-wrapper draws its border and header band as ::before/::after overlays
pinned to the wrapper, which is the unscrolled box. When the table is wider than the
wrapper and the user scrolls sideways, the overlay stays put while the table moves, so
the right-hand edge lands inside the REQ column. On this page the table carries its own
edge instead, which scrolls with it. */
body.cbs-invoices .grid-wrapper::before,
body.cbs-invoices .grid-wrapper::after {
display: none;
}
/* CBS-33 2026-09-19: and that border never drew.
The rule below has been here since CBS-04 round six and has never rendered a frame.
It is not a specificity problem - it beats datagrid.css outright - and it is not the
collapsing border model either, which was the first guess and is wrong: measured
against the developer's captured DOM, the border stayed at 0px/none with
border-collapse forced to separate.
The GridView renders its own INLINE STYLE, and an inline style beats every author
rule that is not !important. From the capture:
which is ASP.NET emitting BorderWidth="0", BorderStyle="None", GridLines="None" and
CellSpacing="0" from CBSInvoices.aspx:263-274. That inline declaration sets the WIDTH
and the STYLE but not the COLOUR, which is why the computed border read
"0px none rgb(230,234,240)" - the colour below was applying, the other two were being
overruled - and why border-radius applied cleanly at 12px while the border itself
stayed invisible. It looks exactly like a rule that ought to be working.
So !important is not decoration here. It is the only way CSS can beat an inline style,
and the alternative - dropping the four attributes in the markup - cannot be verified
without re-rendering the page, and would still leave border-collapse inline because
CellSpacing="0" emits it on its own. Tidying the markup is left as a follow-up.
border-collapse: separate is TL-49's finding: border-radius has no effect on a table
in the collapsing border model. border-spacing: 0 keeps the cells flush, so nothing
moves except the corners. */
body.cbs-invoices #GridView1 {
border: var(--grid-border-width) solid var(--grid-border-color) !important;
border-radius: var(--grid-radius);
border-collapse: separate !important;
border-spacing: 0;
}
/* The corner CELLS have to be rounded too, or their own backgrounds paint square over
the curve.
TOP: already done - datagrid.css:85-91 rounds thead th:first-child and :last-child.
Those are .col-selector-head and .col-reqstate-head here, and they are the first and
last visible header cells in ALL THREE ROLES: the role filter hides Entity (column 2)
for franchisees and Entity plus Fleet # (columns 2 and 6) for fleet managers
(CBSInvoices.aspx.cs:110 and :114), both interior, and a GridView column with
Visible = false is not rendered at all rather than display:none'd - so the cells that
sit at the two ends never change.
BOTTOM: the last row of this table is in TFOOT, not TBODY - ShowFooter is on and the
totals, grand-total and pager rows all live there - so datagrid.css:43-49, which
rounds the last TBODY row, never reaches the bottom edge. The pager row is one
colspan cell, so first-child and last-child are the same cell and both corners land
on it; when there is no pager the totals row takes over and the two rules split. The
:has() pair is the fallback for a table rendered without a footer at all, matching the
empty-state handling that already uses :has() further down this file. */
body.cbs-invoices #GridView1 > tfoot > tr:last-child > td:first-child {
border-bottom-left-radius: var(--grid-radius);
}
body.cbs-invoices #GridView1 > tfoot > tr:last-child > td:last-child {
border-bottom-right-radius: var(--grid-radius);
}
body.cbs-invoices #GridView1:not(:has(> tfoot)) > tbody > tr:last-child > td:first-child {
border-bottom-left-radius: var(--grid-radius);
}
body.cbs-invoices #GridView1:not(:has(> tfoot)) > tbody > tr:last-child > td:last-child {
border-bottom-right-radius: var(--grid-radius);
}
/* (1) A single-page result has no pager and no grand-total row, so the one totals row must
not reserve space for either. Without this it pinned 42px above the bottom and left an
empty band under itself. The fallback is 0, not 44: if the script has not run yet, no
gap is better than a phantom pager. */
body.cbs-invoices #GridView1 > tfoot > tr.cbs-totals-row.cbs-totals-only > td {
--grid-tfoot-offset: var(--cbs-pager-h, 0px);
}
body.cbs-invoices #GridView1 > tfoot > tr.cbs-totals-row > td {
--grid-tfoot-offset: calc(var(--cbs-pager-h, 0px) + var(--cbs-totals-row-h));
}
body.cbs-invoices #GridView1 > tfoot > tr.cbs-grand-row > td {
--grid-tfoot-offset: var(--cbs-pager-h, 0px);
}
/* (2) VIN takes the slack before the spacer does. The spacer is still the only column
without a width, so it absorbs whatever is left - but VIN steps up from its 130px floor
to its natural 173px as soon as the grid is wide enough to hold the whole set at that
size. One rule per role, keyed on the role class the page puts on the body:
with VIN at 173, the full set is CBS staff 1341 franchisee 1201 fleet 1111
-------------------------------------------------------------------- */
body.cbs-invoices .card.card-scroll > .card-content {
container-type: inline-size;
container-name: cbsgrid;
}
/* TL-169: 190px, up from 173px. 173 was measured from one VIN and did not fit a wide-glyph one
- the reported "3GCNWAEF3MG387734" against "1N6BD0CT1JN749877". Tabular figures above make
every VIN the same width; this is the width they all now need, with a little headroom so a
font change does not silently reintroduce the ellipsis. The tier thresholds below move by the
same 17px for the same reason. */
@container cbsgrid (min-width: 1358px) {
body.cbs-cols-staff #GridView1 .col-vin-head,
body.cbs-cols-staff #GridView1 .col-vin {
width: 190px;
}
}
/* TL-169: 173 -> 190 and the threshold up by the same 17, as above. The three thresholds are
the full column set measured with VIN at its stepped-up width, so they have to move together
with it or the step-up would fire before the set fits. */
@container cbsgrid (min-width: 1218px) {
body.cbs-cols-franchisee #GridView1 .col-vin-head,
body.cbs-cols-franchisee #GridView1 .col-vin {
width: 190px;
}
}
@container cbsgrid (min-width: 1128px) {
body.cbs-cols-fleet #GridView1 .col-vin-head,
body.cbs-cols-fleet #GridView1 .col-vin {
width: 190px;
}
}
/* =========================================================
CBS-10(a)(b) empty result set, 2026-09-18
ShowHeaderWhenEmpty is on, so an empty result keeps its column headings and
puts EmptyDataText in one cell underneath. Two things were wrong with it.
========================================================= */
/* (a) The cell now spans the visible columns (GridView1_RowCreated), but the grid's own
rules put nowrap + overflow:hidden on every td, which would clip a sentence. Let this
one wrap, centre it, and give it room to read as a state rather than a stray value. */
body.cbs-invoices #GridView1 td.cbs-empty-cell {
white-space: normal;
overflow: visible;
text-overflow: clip;
text-align: center;
padding-block: 32px;
color: var(--muted);
font-size: 14px;
}
/* While the list is being fetched (the grid area is the content-area loader host, UI_STANDARDS 4.4.8; cbsinvoices.js sets aria-busy) the
"Loading invoices..." placeholder is hidden: loaders show only the mark (the hidden status line says it), and visibility keeps the row's
height so nothing jumps when the rows land. The table's own border is the grid's edge on this page (CBS-33), so while loading the empty table
is as tall as the loader region (12rem, the content-loader host's minimum): the mark sits INSIDE the bordered grid, not across its edge. */
body.cbs-invoices .grid-wrapper[aria-busy="true"] td.cbs-empty-cell {
visibility: hidden;
}
body.cbs-invoices .card.card-scroll.cbs-grid-card .grid-wrapper[aria-busy="true"] #GridView1 {
min-height: 12rem;
}
/* (b) With no rows the card still stretched, leaving a large empty area under the message.
:has() is evaluated live, so this follows the UpdatePanel without a server class or a
JS hook - and a browser without :has() simply keeps today's behaviour. The minimum
stops the card collapsing to a sliver. */
body.cbs-invoices .card.card-scroll.cbs-grid-card:has(.cbs-empty-row) {
flex: 0 0 auto;
height: auto;
min-height: 0;
max-height: none;
}
body.cbs-invoices .card.card-scroll.cbs-grid-card:has(.cbs-empty-row) > .card-content {
flex: 0 0 auto;
height: auto;
min-height: 0;
overflow: visible;
}
body.cbs-invoices .card.card-scroll.cbs-grid-card:has(.cbs-empty-row) #GridView1 {
min-height: 140px;
}
/* =========================================================
TL-39 store-picker validation in the Filters rail, 2026-09-19
The card, the .field-error highlight and the wording all come from the report
parameters pane. Only these three adjustments are new.
========================================================= */
/* 1. The summary card sits at the TOP of the panel, above the picker, so the message
is visible without scrolling - which was the whole complaint. */
body.cbs-invoices #RightRailContent .rr-state[data-rr-state="filters"] #validationSummary {
margin-bottom: 12px;
}
/* 2. MT_Validation.highlightFields puts .field-error on the picker's root container. The
shared rule carries font-size and margin-top as well as the colour, which would nudge
the tree; inside the rail only the colour is wanted. The node labels set no colour of
their own, so they inherit it and the tree turns red, which is the cue asked for. */
body.cbs-invoices #RightRailContent .rr-state[data-rr-state="filters"] .store-picker.field-error {
font-size: inherit;
margin-top: 0;
}
/* 3. The picker's own inline message is now redundant - the card says it, at the top. Left in
the control for every other page that uses it, hidden only here. */
body.cbs-invoices #RightRailContent .rr-state[data-rr-state="filters"] .store-picker-validation {
display: none !important;
}
/* =========================================================
CBS-23 / CBS-24 REMOVED 2026-09-19 (CBS-32).
This page used to put the five-column template back for .layout-body, and then
again for .appbar-inner and .footer-inner, below 1100 - because layout.css
collapsed all three to a single column there and the strip had no column to sit
in. layout.css no longer collapses them: the rail column is opt-in and resolves to
zero for a page that has not asked for one, so the template is correct at every
width for every page and the override is redundant.
Keeping it would have been a second mechanism doing the same job, which is how
this took three rounds in the first place.
========================================================= */
/* =========================================================
PAY-46 - the Pay button after a charged-but-not-recorded
payment. The card HAS been charged; pressing this again
would charge it twice, so it is dead for the rest of this
modal session and must look it. Close is the only action.
========================================================= */
.is-sealed .btn,
.is-sealed button,
.is-sealed input[type="button"],
.is-sealed input[type="submit"] {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
filter: grayscale(1);
}
.is-sealed .btn-overlay-text {
display: none;
}
/* Money field in the request rail (UI_STANDARDS 6.8): the $ sits inside the control. Same look as .rq-money in requests.css (not loaded on this page). */
body.cbs-invoices #RR_Request_New .rr-money { position: relative; }
body.cbs-invoices #RR_Request_New .rr-money-sign { position: absolute; left: 12px; top: 0; bottom: 0; display: flex; align-items: center; color: var(--muted); font-size: 16px; pointer-events: none; }
body.cbs-invoices #RightRailContent .rr-state[data-rr-state="request"] .cbs-rr-field .rr-money input.rr-money-input {
height: 40px;
min-height: 40px;
padding: 0 12px 0 28px;
font-size: 16px; /* no iOS zoom */
font-weight: 700;
text-align: left;
font-variant-numeric: tabular-nums;
}
/* CBS-89 NTV (lane N1): the small "Not our vehicle" box in the request form. A quiet checkbox line, not a heading. */
body.cbs-invoices #RR_Request_New .rr-ntv-check {
display: flex;
align-items: center;
gap: 8px;
font-weight: 400;
font-size: inherit; /* the rail's normal size, as the other field labels */
white-space: nowrap; /* one line at every rail width: "Not their vehicle (NTV)" */
opacity: .7; /* a tertiary option */
cursor: pointer;
}
body.cbs-invoices #RR_Request_New .rr-ntv-check:hover,
body.cbs-invoices #RR_Request_New .rr-ntv-check:focus-within {
opacity: 1;
}
body.cbs-invoices #RR_Request_New .rr-ntv-check input[type="checkbox"] {
width: auto;
margin: 0;
}
/* The "Include closed / Include snoozed" ticks on the NTV list (CBSNtvList.aspx) state their own look: 16px, brand colour, centred on the label.
They used to borrow it from a bare rightrail.css rule (checkbox-leaks_handoff.md). */
.ntv-filter-check input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0 4px 0 0;
vertical-align: middle;
accent-color: var(--brand-primary);
}
/* The helper line under the NTV box sits close to it */
body.cbs-invoices #RR_Request_NotRecognizedRow .microtext { margin: 2px 0 0 24px; }
/* Staff NTV status: one quiet chip line, only when a case exists (the script toggles hidden) */
body.cbs-invoices .rr-ntv-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
body.cbs-invoices .rr-ntv-line[hidden] { display: none; }
/* CBS-89 K3b: the note after the NTV box is sent; hidden until the script shows it */
body.cbs-invoices #RR_Request_NtvSent { display: none; margin: 0 0 8px; }
body.cbs-invoices #RR_Request_NtvSent.is-shown { display: block; }
/* Request panel header (rr-header, 2026-10-17): the title is "Request {id}" and a link to the full page (mouse and touch only, tabindex -1);
the explicit "View request details" link under the subtitle is the one tab stop. Both hidden or plain text until the script has a case id the
person may open. The icon is the Phosphor arrow-up-right (#ph-arrow-up-right in Images/Icons/notice-icons.svg; navigation arrow, UI_STANDARDS 9; same tab, so not an open-in-new-tab glyph). 44px tap row. */
body.cbs-invoices .rr-open-full { display: none; margin: 0; }
body.cbs-invoices .rr-open-full.is-shown { display: flex; align-items: center; min-height: 44px; }
body.cbs-invoices .rr-open-full-link { display: inline-flex; align-items: center; gap: 4px; min-width: 0; opacity: 1; }
body.cbs-invoices .rr-open-full-link .icon { flex: none; width: 14px; height: 14px; }
body.cbs-invoices .rr-title-link { color: inherit; font-weight: inherit; opacity: 1; }
body.cbs-invoices .rr-title-link:hover,
body.cbs-invoices .rr-title-link:focus-visible { font-weight: inherit; text-decoration: underline; }
/* Billing Contact: a 12-column field grid from 640 wide and a wider card from 768 (designer review 2026-10-15). A long single column of 11 fields
was four screens tall on a short laptop; related fields (city, state, zip; phone, mobile, fax) now share a row. Under 640 it is the single column. */
@media (min-width: 640px) {
.bc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 20px; align-content: start; }
.bc-grid > .form-row { margin-bottom: 0; }
.bc-grid > .bc-12 { grid-column: span 12; }
.bc-grid > .bc-6 { grid-column: span 6; }
.bc-grid > .bc-5 { grid-column: span 5; }
.bc-grid > .bc-4 { grid-column: span 4; }
.bc-grid > .bc-3 { grid-column: span 3; }
.bc-grid > :not(.form-row) { grid-column: span 12; }
}
@media (min-width: 768px) {
.bc-page.page-form { max-width: 880px; }
.bc-page .card.card-scroll { max-width: 880px; width: 100%; }
}
/* the State select shows "District of Columbia" in full (City 4, State 5, Zip 3), and the page gets bottom room so Cancel and Save are never flush with the edge */
.bc-page { padding-bottom: 24px; }
.bc-grid select.input { min-width: 0; text-overflow: clip; }
/* Billing Contact: the footer says why Save is off, a token input shows the standard error state, and the sticky footer is opaque across the card */
.bc-page .form-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; width: 100%; }
.bc-save-hint { margin-right: auto; color: var(--muted); }
.bc-grid .token-input.field-error { border-color: var(--danger); background: var(--surface-danger); }
.bc-grid .token-input.field-error .token-entry { background: transparent; }
.bc-grid .field-error-msg { min-height: 0; color: var(--danger); font-size: 13px; margin-top: 4px; }
.bc-grid .field-error-msg:empty { display: none; }
/* BILLING CONTACT FOOTER (2026-10-15): the sticky footer is the card's own width, no negative margins (they pushed it 16px past the card), opaque with a top line. */
/* CBS HEADER BAND CHIPS (Payment method, AutoPay): the chip grows with its content. A fixed height cut the Replace and Enable buttons by 2px at 1280x574. */
.cbs-topband-right .paymentmethod-card,
.cbs-topband-right .autopay-card { height: auto; min-height: var(--topband-chip-h); }
/* CBS INVOICES: on a short window the grid card no longer keeps a 560px floor (it left a blank area under three rows); it hugs its content with a
280px minimum for the grid and the page scrolls when it is taller. */
/* BILLING CONTACT, ROUND 3 (2026-10-15). The status band (BAID, payment method, AutoPay) is not needed here, so the page is one card that scrolls
INSIDE itself with its footer pinned, not a page that scrolls. The card sits inside an UpdatePanel div (display: contents), so the child selectors
of the shared rules never matched; these are written for that wrapper. */
.bc-page .cbs-topband { display: none; }
.bc-page.page-form > div[id] > .card.card-scroll {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
max-height: 100%;
}
.bc-page.page-form > div[id] > .card.card-scroll > .card-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.bc-page.page-form > div[id] > .card.card-scroll > .card-header,
.bc-page.page-form > div[id] > .card.card-scroll > .card-footer { flex: none; }
.bc-page.page-form > div[id] > .card.card-scroll > .card-footer { margin: 0; padding: 8px 0 0; border-top: 1px solid var(--border); }
/* CBS INVOICES: the grid card hugs its rows instead of filling the window with an empty area under three of them (the page scrolls when it is taller) */
/* CBS INVOICES, FLEET VIEW, narrow container (2026-10-15): the column set needs 1069px and a 1280 window gives the grid 1047, which drew a bare
horizontal scrollbar line under the totals. Below the VIN step-up threshold (1128) the VIN column is 23px narrower, so the set fits. */
.cbs-grid-card > .card-content { min-height: 0; }
/* CBS INVOICES, ROUND 4: the shared short-window rule (layout.css) gives a grid card height 100% and a 560px floor. This page is mostly three to ten
rows, so the card takes its content height instead and the page scrolls when it is taller. Written with the same body and page-body prefix so
it wins on specificity, not on order. */
@media (max-height: 700px) {
body.grid-wide.cbs-invoices .page-body:not(.page-scroll) > .card.card-scroll.cbs-grid-card { height: auto; min-height: 0; flex: 0 0 auto; }
}
/* the grid is 23px wider than the card at 1280 and showed a bare scrollbar line: a little less cell padding makes it fit up to the 1366 laptops */
@media (max-width: 1400px) {
.cbs-grid-card { --grid-cell-padding-x: 8px; }
}
@container cbsgrid (max-width: 1127.98px) {
body.cbs-cols-fleet.cbs-invoices #GridView1 .col-amount-head,
body.cbs-cols-fleet.cbs-invoices #GridView1 .col-amount,
body.cbs-cols-fleet.cbs-invoices #GridView1 .col-adjustment-head,
body.cbs-cols-fleet.cbs-invoices #GridView1 .col-adjustment,
body.cbs-cols-fleet.cbs-invoices #GridView1 .col-latefee-head,
body.cbs-cols-fleet.cbs-invoices #GridView1 .col-latefee,
body.cbs-cols-fleet.cbs-invoices #GridView1 .col-payment-head,
body.cbs-cols-fleet.cbs-invoices #GridView1 .col-payment,
body.cbs-cols-fleet.cbs-invoices #GridView1 .col-balance-head,
body.cbs-cols-fleet.cbs-invoices #GridView1 .col-balance { width: 92px; }
}
/* CBS INVOICES, short windows (page scrolls): (1) the sticky action bar covers a 2px strip above itself so no grid row shows over it;
(2) when the grid fits sideways the card content is released and the column headers pin just under the action bar. */
@media (max-height: 700px) {
body.cbs-invoices .cbs-grid-card > .card-header { box-shadow: 0 -2px 0 var(--surface); }
body.cbs-invoices .cbs-grid-card > .card-content.no-hscroll { overflow: visible; }
body.cbs-invoices .cbs-grid-card > .card-content.no-hscroll .grid-wrapper { overflow: visible; }
body.cbs-invoices .cbs-grid-card > .card-content.no-hscroll #GridView1 thead th { position: sticky; top: var(--cbs-head-h, 56px); z-index: 3; }
}
/* CBS INVOICES, 1px SEAM (2026-10-15): at a fractional scroll position (a 2x screen, an eased scroll) the sticky action bar and the sticky column
headers snap to different device pixels and a hairline of row text shows between them. The column headers tuck 1px under the bar (which is the
higher layer) and the bar paints a 1px skirt below itself, so there is no gap to leak through. */
@media (max-height: 700px) {
body.cbs-invoices .cbs-grid-card > .card-header { box-shadow: 0 -2px 0 var(--surface), 0 1px 0 var(--surface); }
body.cbs-invoices .cbs-grid-card > .card-content.no-hscroll #GridView1 thead th { top: calc(var(--cbs-head-h, 56px) - 1px); }
}
/* =========================================================
CBS Invoices right rail as a PHONE OVERLAY (2026-10-16, lane cbs-rail-phone)
WHAT WAS WRONG. The overlay rule above (max-width 1765) makes the open rail position: absolute with top:0 and
bottom:0 inside .layout-body, but the shared .right-rail rule in rightrail.css also sets align-self: start,
height: auto and a max-height. On a grid item, align-self: start wins over the two insets, so the overlay HUGS
its content: on a 393x852 phone the Request panel (just its description text) was 280x167 at x=113, with the
tabs and no form below. It is also anchored to the grid track edge, not the viewport, and its own overflow:auto
made a second scroller beside #RightRailContent's.
WHAT THIS DOES, ONLY under 641 wide or on a short landscape phone (up to 900 wide and 500 tall). At 1000x450,
1024 and wider nothing here applies: the rail behaves exactly as before.
The open rail is a full-height panel fixed to the right edge of the viewport; the rail itself does not scroll,
#RightRailContent is the single scroller; the tab row and each panel header stay sticky at the top, and the
panel's action footer (.right-rail-actions) stays at the bottom of the scrollport. Controls are 40px (small
form density rule) and 16px text so a phone browser does not zoom on focus.
========================================================= */
@media (max-width: 640px), (max-width: 900px) and (max-height: 500px) {
body.cbs-invoices .right-rail {
/* tab row: 8px + 40px buttons + 8px + 1px divider */
--rr-toolbar-h: 57px;
}
body.cbs-invoices.cbs-rail-strip:not(.close-rail) .right-rail {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: min(92vw, 360px);
min-width: 0;
height: auto;
max-height: none;
margin: 0;
align-self: auto;
overflow: hidden;
z-index: 1100;
border-radius: var(--radius) 0 0 var(--radius);
}
body.cbs-invoices.cbs-rail-strip:not(.close-rail) #RightRailContent {
overscroll-behavior: contain;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.cbs-invoices .rr-tabs {
gap: 8px;
padding-top: 8px;
padding-bottom: 8px;
box-sizing: border-box;
}
body.cbs-invoices .rr-tabs .rr-tab,
body.cbs-invoices .right-rail-close {
min-width: 40px;
min-height: 40px;
}
body.cbs-invoices #RightRailContent input[type="text"],
body.cbs-invoices #RightRailContent select,
body.cbs-invoices #RightRailContent textarea {
font-size: 16px;
}
body.cbs-invoices #RightRailContent input[type="text"],
body.cbs-invoices #RightRailContent select {
min-height: 40px;
}
body.cbs-invoices .right-rail .btn.btn-primary,
body.cbs-invoices .right-rail .btn.btn-secondary {
height: 40px;
}
body.cbs-invoices .right-rail-actions {
padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
}
/* Slide in from the right and out again, in the same time as the desktop rail's fly-out (--rails-collapse-expand-time).
Before this the overlay jumped in: the strip state is opacity 1 / no transform, the open frame resets it to a
20px fade, and the rail was already at its final place. Resting off-screen while open-but-not-shown makes the
close a slide (rightrail.css already transitions transform; MT_CloseRightRail waits for that transitionend); the
entry is a keyframe animation so it always starts from fully off-screen, whatever the one in-between frame did. */
body.cbs-invoices.cbs-rail-strip:not(.close-rail) .right-rail {
transform: translateX(100%);
}
body.cbs-invoices.cbs-rail-strip.show-rail:not(.close-rail) .right-rail {
transform: translateX(0);
animation: cbs-rail-phone-in var(--rails-collapse-expand-time) ease;
}
@keyframes cbs-rail-phone-in {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
/* A person who asks for less motion gets the fade only (the rail's opacity transition stays, so the close still ends). */
@media (prefers-reduced-motion: reduce) {
body.cbs-invoices.cbs-rail-strip:not(.close-rail) .right-rail,
body.cbs-invoices.cbs-rail-strip.show-rail:not(.close-rail) .right-rail {
transform: none;
animation: none;
}
}
/* The shared tooltip engine (#app-tooltip, site.core.js) never hides after a tap on touch and sat over the
rail icons. While the rail is an overlay on a phone nothing in it needs a hover tip: every tab and button
carries an aria-label. */
body.cbs-invoices.cbs-rail-strip.show-rail:not(.close-rail) #app-tooltip {
display: none;
}
}
/* =========================================================
CBS Invoices right rail on a TABLET (iPad, 2026-10-18): a touch screen 641 to 1765 wide.
WHAT THE DEVELOPER SAW (iPad Air, Safari, portrait and landscape): the icon strip closed but no rail opened, whichever of the row, the filter chip or a
strip icon was tapped. It opened on the iPhone, where the phone block above makes the rail a panel FIXED to the viewport.
WHAT THE EVIDENCE IS. In Chromium with an iPad profile the old rule opens and shows the rail, so the cause could not be reproduced there. The one real
difference between the phone and the iPad is how the open rail is placed: on the phone it is position: fixed, at the viewport edges, on the iPad band it was
position: absolute inside the clipped, grid-placed .layout-body, anchored to a grid line, with a height that hugs its content (align-self: start beats the
top and bottom insets on a grid item). That arrangement is the one thing WebKit could resolve differently, and the phone arrangement is the one that is
known to work on the device. So the tablet now uses the phone's arrangement: a panel fixed to the viewport, below the app bar, full height, 44px targets.
Only where the PRIMARY pointer is coarse (a touch screen); a desktop window at the same width keeps the floating card exactly as before.
========================================================= */
@media (min-width: 641px) and (max-width: 1765px) and (pointer: coarse) {
body.cbs-invoices .right-rail {
--rr-toolbar-h: 61px;
}
body.cbs-invoices.cbs-rail-strip:not(.close-rail) .right-rail {
position: fixed;
top: var(--appbar-height);
right: 0;
bottom: 0;
left: auto;
width: min(92vw, 360px);
min-width: 280px;
height: auto;
max-height: none;
margin: 0;
align-self: auto;
overflow: hidden;
z-index: 1100;
border-radius: var(--radius) 0 0 var(--radius);
}
body.cbs-invoices.cbs-rail-strip:not(.close-rail) #RightRailContent {
overscroll-behavior: contain;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.cbs-invoices .rr-tab,
body.cbs-invoices .right-rail-close {
min-width: 44px;
min-height: 44px;
}
body.cbs-invoices .right-rail .btn.btn-primary,
body.cbs-invoices .right-rail .btn.btn-secondary {
height: 44px;
}
body.cbs-invoices #RightRailContent input[type="text"],
body.cbs-invoices #RightRailContent select,
body.cbs-invoices #RightRailContent textarea {
font-size: 16px;
}
body.cbs-invoices.cbs-rail-strip.show-rail:not(.close-rail) #app-tooltip {
display: none;
}
}