/* om-letterpress.css — the Order Management LETTERPRESS chrome.
Ben, 2026-08-23: "first please change the design to the letterpress design"
(OM3-R-001 / MMDB-2308). Same language as procurement2's proc-letterpress.css
(PR #764, fd53db93): "close but not exactly XP style, uses a lot of different
colors, runs inside the portal."
Loaded AFTER xp-gsp.css (order-mgmt/layout.tsx) and scoped under the .olp
class on the order-mgmt shell root, so every rule here outranks the XP skin
for Order Management only — the strategy app keeps its XP look untouched,
and xp-gsp.css keeps supplying the structural/density layer (grids, dialogs,
windows, taskbar) that both apps share.
Language: letterbox paper grounds and hairlines, ink text, serif display
titles. Per-section left-stripe accents were retired 2026-09-26
(RL-303 / RL-C3): the portal tab strip already carries the red top-edge
(.ds-tb-tab.active). Title bands are ink-black with paper-white type
(MMDB-2348). No XP gradients, no blue chrome, square letterpress edges. */
.olp {
--olp-paper: var(--rp-white);
--olp-paper-2: var(--rp-silver-2);
--olp-paper-3: var(--rp-silver);
--olp-hairline: var(--rp-line);
--olp-hairline-dark: var(--rp-border-strong);
--olp-ink: var(--rp-ink);
--olp-ink-mute: var(--rp-ink-mute);
}
/* ------------------------------------------------------------------ */
/* app ground + type: paper and ink, UI face from the portal tokens */
.olp.gsp-app,
.olp .gsp-app {
font-family: var(--font-ui, "PP Neue Machina", "Segoe UI", sans-serif);
font-size: 12px;
color: var(--olp-ink);
background: var(--olp-paper);
}
/* Fill the framed shell body at every width. gsp-structural gives .gsp-app
height:100%, which only resolves while .body has a definite height; at
phone width it does not, the app shrank to its title rows (~100px) and every
tab pane read back ~6px (blank Order Management tabs at 390px, 2026-09-28).
Growing as a flex child of .body does not depend on that. Desktop measured
identical before/after. */
.olp.gsp-app {
flex: 1 1 0;
min-height: 0;
}
.olp .gsp-window {
border: 1px solid var(--olp-hairline-dark);
background: var(--olp-paper);
border-radius: 0;
}
.olp [data-window-kind] > .gsp-window {
box-shadow: 0 2px 14px rgba(14, 14, 12, 0.22);
height: 100%;
}
/* ------------------------------------------------------------------ */
/* title bar: every window — ink black, paper-white type (MMDB-2348). */
.olp .gsp-titlebar,
.olp .gsp-window > .gsp-titlebar,
.olp [data-window-id] .gsp-titlebar {
background: var(--rp-black) !important;
color: var(--rp-white) !important;
font-family: var(--font-display, Fraunces, Georgia, serif);
font-weight: 600;
font-size: 12.5px;
letter-spacing: 0.01em;
padding: 4px 8px;
border-bottom: 1px solid var(--rp-ink);
}
.olp .gsp-titlebar-icon {
background: var(--rp-ink);
border: 0;
color: var(--rp-white);
font-family: var(--font-mono, "JetBrains Mono", monospace);
border-radius: 0;
}
.olp .gsp-titlebar .gsp-picker-change {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 0;
color: var(--rp-white);
box-shadow: none;
min-width: 18px;
height: 16px;
}
.olp .gsp-titlebar .gsp-picker-change:hover {
background: rgba(255, 255, 255, 0.2);
color: var(--rp-white);
border-color: var(--rp-white);
}
.olp .gsp-titlebar .gsp-picker-change:active {
background: rgba(255, 255, 255, 0.3);
color: var(--rp-white);
border-color: rgba(255, 255, 255, 0.6);
}
.olp .gsp-titlebar .gsp-headcell {
color: var(--rp-white);
background: var(--rp-ink);
border: 0;
border-radius: 0;
font-weight: 600;
}
/* ------------------------------------------------------------------ */
/* bars inside a window: paper strips, hairline rules, ink text */
.olp .gsp-menubar,
.olp .gsp-toolbar {
background: var(--olp-paper-2);
border-bottom: 1px solid var(--olp-hairline);
}
.olp .gsp-menu { color: var(--olp-ink); }
.olp .gsp-menubar-scope {
background: var(--olp-paper-3);
border: 1px solid var(--olp-ink);
box-shadow: none;
}
.olp .gsp-menubar-scope > .gsp-menu-drop + .gsp-menu-drop { border-left-color: var(--olp-hairline); }
/* 2026-09-03 regression fix: this used to also match [aria-current="page"]
and [data-active="true"] -- both set on the SAME as the transient
:hover state (windows.tsx sets aria-current/data-active together off one
"current" boolean), at specificity .olp .gsp-menu[x] (030), which beat
the ungated "module tab strip" rule in red-plate.css section 7
(.gsp-menu[data-active="true"], 020: white plate + 3px red top edge --
the approved current-screen indicator, confirmed live on main/portal-
test and round 9). That painted the ACTIVE tab as a permanent black
plate with white text, not just a transient hover. :hover alone stays
black (a real transient interaction state); the persistent active state
now has nothing at .olp specificity to beat the ungated rule with, so
the white-plate/red-top-edge definition applies unchanged. */
.olp .gsp-menu:hover { background: var(--rp-black); color: var(--rp-white); }
.olp .gsp-tool { border-color: transparent; border-radius: var(--ds-radius-sm); }
.olp .gsp-tool:hover { border-color: var(--rp-black); background: var(--olp-paper-3); }
.olp .gsp-tool[data-on="true"]:hover {
border-color: var(--rp-ink);
background: var(--rp-ink);
color: var(--rp-white);
}
.olp .gsp-tool:disabled { color: var(--olp-hairline-dark); cursor: default; }
.olp .gsp-tool:disabled:hover { border-color: transparent; background: transparent; }
/* MMDB-2431 QC fix (2026-09-02): this used to repaint the pressed/"on"
state's background near-white (--olp-paper-3, an alias for --rp-silver)
without touching text color, so red-plate.css's `.gsp-tool[data-on=
"true"]` white text (correct for its own dark-ink background) rendered
white-on-near-white and disappeared -- found live on Master Data's
Catalogue "Contains" mode toggle. No stated reason .olp's pressed state
should look different from every other module's; removed so the one
red-plate.css definition (dark ink fill, white type) applies everywhere. */
.olp .gsp-tool[data-primary="true"] {
border: 1px solid var(--rp-black);
background: var(--rp-black);
color: var(--rp-white);
box-shadow: none;
}
.olp .gsp-tool[data-primary="true"]:hover { background: var(--rp-ink); border-color: var(--rp-ink); }
.olp .gsp-toolbar-sep { background: var(--olp-hairline); }
.olp .gsp-toolbar-note { color: var(--olp-ink-mute); }
.olp .gsp-toolbar-label { color: var(--olp-ink-mute); }
.olp .gsp-statusbar {
background: var(--olp-paper-2);
border-top: 1px solid var(--olp-hairline);
color: var(--olp-ink-mute);
}
.olp .gsp-statusbar-cell {
border: 1px solid var(--olp-hairline);
background: var(--olp-paper);
font-family: var(--font-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
border-radius: 0;
}
.olp .gsp-statusbar-evidence { border: 1px solid var(--olp-hairline); background: var(--olp-paper); }
/* taskbar chips live as .gsp-tool children of the app statusbar */
.olp .gsp-statusbar > .gsp-tool {
color: var(--olp-ink);
background: var(--olp-paper);
border: 1px solid var(--olp-hairline-dark);
border-radius: var(--ds-radius-sm);
padding: 2px 10px;
}
.olp .gsp-statusbar > .gsp-tool:hover { background: var(--olp-paper-3); }
.olp .gsp-statusbar > .gsp-tool:disabled {
color: var(--olp-hairline-dark);
border-color: var(--olp-hairline);
background: var(--olp-paper-2);
}
.olp .gsp-statusbar > .gsp-tool:disabled:hover { background: var(--olp-paper-2); }
.olp .gsp-statusbar > .gsp-tool[data-on="true"] {
background: var(--olp-ink);
color: var(--rp-white);
border-color: var(--olp-ink);
box-shadow: none;
}
/* ------------------------------------------------------------------ */
/* shared structural objects re-inked from XP grey/blue to letterpress */
.olp .gsp-matrix { background: var(--olp-paper); }
.olp .gsp-mcol { border-color: var(--olp-hairline-dark); background: var(--olp-paper); }
.olp .gsp-mcol-head {
background: var(--rp-black) !important;
border-bottom: 1px solid var(--rp-ink) !important;
color: var(--rp-white) !important;
font-family: var(--font-display, Fraunces, Georgia, serif);
}
.olp .gsp-mcol-head-count { color: rgba(255, 255, 255, 0.7) !important; }
.olp .gsp-card { border-color: var(--olp-hairline-dark); background: var(--olp-paper); }
.olp .gsp-card-head {
background: var(--rp-black) !important;
border-bottom: 1px solid var(--rp-ink) !important;
color: var(--rp-white) !important;
font-family: var(--font-display, Fraunces, Georgia, serif);
}
.olp .gsp-card-head-note { color: rgba(255, 255, 255, 0.7) !important; }
.olp .gsp-thumb { border-color: var(--olp-hairline-dark); background: var(--olp-paper); }
.olp .gsp-thumb-fallback { background: var(--rp-silver); color: var(--rp-ink-mute); }
.olp .gsp-thumb-label { color: var(--rp-ink-mute); }
.olp .gsp-headcell {
border: 0;
border-bottom: 2px solid var(--olp-ink);
background: var(--olp-paper-2);
font-family: var(--font-mono, monospace);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 0;
}
.olp .gsp-node { border-color: var(--olp-hairline-dark); background: var(--olp-paper); }
.olp .gsp-node:hover { background: var(--olp-paper-2); }
.olp .gsp-node[data-selected="true"] { border-color: var(--rp-black); background: var(--olp-paper-2); }
.olp .gsp-node-id { color: var(--rp-black); }
.olp .gsp-node-sub { color: var(--olp-ink-mute); }
.olp .gsp-node-open {
border: 1px solid var(--rp-black);
background: var(--olp-paper);
color: var(--rp-black);
box-shadow: none;
border-radius: var(--ds-radius-sm);
}
.olp .gsp-node-open:hover { background: var(--olp-paper-3); }
.olp .gsp-link { color: var(--rp-black); }
.olp .gsp-muted { color: var(--olp-ink-mute); }
.olp .gsp-edge { stroke: var(--olp-hairline-dark); }
.olp .gsp-edge[data-on="true"] { stroke: var(--rp-black); }
.olp .gsp-pane-foot {
border-top: 1px solid var(--olp-hairline);
background: var(--olp-paper-2);
color: var(--olp-ink-mute);
}
.olp .gsp-pane-body { scrollbar-color: var(--olp-hairline-dark) var(--olp-paper); }
/* chips: paper, hairline, no XP fill */
.olp .gsp-chip {
border: 1px solid var(--olp-hairline-dark);
background: var(--olp-paper);
border-radius: var(--ds-radius-sm);
}
.olp .gsp-chip[data-tone="red"] { background: var(--ds-c-red-06); border-color: var(--ds-c-red-19); color: var(--ds-c-red-24); }
.olp .gsp-chip[data-tone="amber"] { background: var(--ds-c-amber-05); border-color: var(--ds-c-amber-26); color: var(--ds-c-yellow-26); }
.olp .gsp-chip[data-tone="green"] { background: var(--ds-c-green-03); border-color: var(--ds-c-green-11); color: var(--ds-c-green-12); }
.olp .gsp-chip[data-tone="blue"] { background: var(--olp-paper-3); border-color: var(--rp-black); color: var(--rp-black); }
.olp .gsp-chip[data-tone="stop"] {
background: var(--olp-paper-2);
border-color: var(--ds-c-red-19);
color: var(--ds-c-red-24);
font-weight: 700;
}
/* tables
MMDB-2431 QC fix (2026-09-02): this used to force every .olp table head
-- Order Management's own screens AND everything else that reuses .olp
(Master Data's OmAppFrame default wrapperClassName, Dealer Portal popup)
-- to a black band with white type, predating the Red Plate token
consolidation and never reconciled against it. Investigation (live
Camofox on home-preview) traced Master Data's GL-accounts Catalogue
black header + an unreadable white-on-near-white toggle button to
exactly this block: `.olp thead th` at 2-class specificity + !important
beat the new red-plate.css `.gsp-grid th` silver rule regardless of
cascade order. Design intent per the frozen Red Plate spec is silver
table heads portal-wide, no black bands, with no stated exception for
Order Management's own tables -- so this block is removed rather than
re-scoped; `.gsp-grid th` (red-plate.css) now supplies one consistent
silver head everywhere, including Order Management itself. The three
rules below it (sort-mark color, click-hover background, sort-arrow
color) existed only to keep white type legible against this now-removed
black fill and go with it -- `.olp .olp-sort-mark`'s own non-!important,
correctly-toned rule further down this file (near `.olp-th-row`) already
supplies the right ink-on-silver color once this !important stops
shadowing it. */
.olp .gsp-grid td { border-right: 1px solid var(--olp-hairline); border-bottom: 1px solid var(--olp-hairline); }
.olp .gsp-grid tr:nth-child(even) td { background: var(--olp-paper-2); }
.olp .gsp-grid tbody tr[data-click="true"]:hover td { background: var(--olp-paper-3); }
.olp .gsp-grid tr[data-group="true"] td {
background: var(--olp-paper-3);
color: var(--olp-ink);
border-bottom: 1px solid var(--olp-hairline-dark);
}
.olp .gsp-col-pin { background: var(--olp-paper); }
.olp .gsp-col-pin-id,
.olp .gsp-col-pin-title { border-right-color: var(--olp-hairline-dark); }
.olp .gsp-grid tr:nth-child(even) td.gsp-col-pin { background: var(--olp-paper-2); }
.olp .gsp-grid tbody tr[data-click="true"]:hover td.gsp-col-pin { background: var(--olp-paper-3); }
.olp .gsp-group-toggle { color: var(--olp-ink); }
.olp .gsp-group-toggle:hover .gsp-group-chevron { color: var(--rp-black); }
.olp .gsp-group-chevron { color: var(--rp-black); }
.olp .gsp-group-hint { color: var(--olp-ink-mute); }
.olp .gsp-grid tr[data-click="true"] td:first-child::before { color: var(--rp-black); }
.olp .gsp-grid tr[data-click="true"]:hover td:first-child::before { color: var(--olp-ink); }
/* MMDB-2431 QC fix (2026-09-02): the click-hover-to-black-background and
white sort-arrow-color rules that used to live here are removed with the
black-header block above -- a silver head hovering to near-black with no
matching text-color change would have been the same invisible-text bug
this fix corrects elsewhere, and the sort-arrow color was already dead
(this table's `::after` content is set to `none` further down this file,
in favour of the `.olp-sort-mark` span OmTable.tsx renders instead). */
.olp .gsp-grid tr[data-ref="true"] td { background: var(--olp-paper-2); border-bottom-color: var(--olp-hairline-dark); }
.olp .gsp-grid tr[data-ref="true"]:hover td { background: var(--olp-paper-2); }
.olp .gsp-cell-sub { color: var(--olp-ink-mute); }
/* sections / fieldsets / forms */
.olp .gsp-section { border-color: var(--olp-hairline-dark); background: var(--olp-paper); }
/* MMDB-2431 QC fix (2026-09-02): this used to force the section-head strip
(the Stage/Dealer/Product/Find filter row above the Orders table, and
every other .gsp-section-head in .olp scope) to a full-width black band
with white type -- same shape as the other three bugs already fixed in
this file today. Checked against design/approved/build.mjs/rollout-
preview.html: no black filter/section band appears anywhere in it, and
the base `.gsp-section-head` rule in red-plate.css is already silver
(`background: var(--rp-silver) !important; color: var(--rp-ink) !important`)
-- this .olp override was the only thing making it black, not a second
deliberate idiom. Removed the colour override; the display-serif
font-family choice is kept, it is a genuine typographic variant, not
part of the bug. */
.olp .gsp-section-head { font-family: var(--font-display, Fraunces, Georgia, serif); }
.olp .gsp-fieldset { border-color: var(--olp-hairline-dark); }
.olp .gsp-fieldset legend { color: var(--olp-ink); font-family: var(--font-display, Fraunces, Georgia, serif); }
.olp .gsp-form-row label { color: var(--olp-ink-mute); }
.olp .gsp-label { color: var(--olp-ink-mute); }
.olp .gsp-input,
.olp .gsp-select,
.olp .gsp-textarea {
border: 1px solid var(--olp-hairline-dark);
background: var(--olp-paper);
border-radius: var(--ds-radius-sm);
}
.olp .gsp-input:focus,
.olp .gsp-select:focus,
.olp .gsp-textarea:focus { outline: 2px solid var(--rp-black); outline-offset: -1px; }
.olp .gsp-input[data-attention="true"],
.olp .gsp-select[data-attention="true"] { border-color: var(--ds-c-red-19); background: var(--ds-c-amber-01); }
/* buttons — flat printed, square, no XP bevel */
.olp .gsp-btn {
border: 1px solid var(--olp-hairline-dark);
background: var(--olp-paper);
color: var(--olp-ink);
box-shadow: none;
border-radius: var(--ds-radius-sm);
}
.olp .gsp-btn:hover { background: var(--olp-paper-3); border-color: var(--rp-black); }
.olp .gsp-btn[data-default="true"] {
border-color: var(--rp-black);
background: var(--rp-black);
color: var(--rp-white);
outline: 0;
}
.olp .gsp-btn[data-default="true"]:hover { background: var(--rp-ink); border-color: var(--rp-ink); }
/* Destructive footer actions (2026-10-03): Decline to quote / Refuse / Reject /
Turn away sit far-left in the footer and must read as destructive, not as a
plain neutral gsp-btn. Same red triple the .olp skin already uses for its
stop/alert surfaces (.gsp-note[data-tone=stop], .gsp-chip[data-tone=red]):
CDS tokens only, no new colour. */
.olp .gsp-btn[data-tone="destructive"] {
background: var(--ds-c-red-06);
border-color: var(--ds-c-red-19);
color: var(--ds-c-red-24);
}
.olp .gsp-btn[data-tone="destructive"]:hover {
background: var(--ds-c-red-19);
border-color: var(--ds-c-red-19);
color: var(--rp-white);
}
.olp .gsp-btn:disabled { color: var(--olp-ink-mute); }
.olp .gsp-btnrow {
border-top: 1px solid var(--olp-hairline);
background: var(--olp-paper-2);
}
.olp .gsp-rowbtn {
border: 1px solid var(--olp-hairline-dark);
background: var(--olp-paper);
border-radius: var(--ds-radius-sm);
}
.olp .gsp-rowbtn:hover { background: var(--olp-paper-3); border-color: var(--rp-black); }
.olp .gsp-rowbtn:disabled { color: var(--olp-ink-mute); cursor: default; opacity: 0.6; }
.olp .gsp-rowbtn:disabled:hover { background: var(--olp-paper); border-color: var(--olp-hairline-dark); }
.olp .gsp-addrow {
border: 1px dashed var(--olp-hairline-dark);
background: var(--olp-paper);
border-radius: 0;
}
.olp .gsp-addrow:hover { background: var(--olp-paper-3); border-color: var(--rp-black); }
/* dialogs */
.olp .gsp-dialog {
background: var(--olp-paper);
border: 1px solid var(--olp-ink);
box-shadow: 0 4px 18px rgba(14, 14, 12, 0.3);
font-family: var(--font-ui, "PP Neue Machina", "Segoe UI", sans-serif);
border-radius: 0;
}
/* hover cards (picker list) */
.olp .gsp-picker-chosen { border: 1px solid var(--olp-hairline-dark); background: var(--olp-paper); }
.olp .gsp-picker-change {
border: 1px solid var(--olp-hairline-dark);
background: var(--olp-paper-2);
border-radius: 0;
}
.olp .gsp-picker-change:hover { background: var(--olp-paper-3); border-color: var(--rp-black); }
.olp .gsp-picker-list {
border: 1px solid var(--olp-ink);
background: var(--olp-paper);
box-shadow: 0 4px 18px rgba(14, 14, 12, 0.3);
border-radius: 0;
}
.olp .gsp-picker-option {
background: var(--olp-paper);
border-bottom: 1px dotted var(--olp-hairline);
color: var(--olp-ink);
}
.olp .gsp-picker-option:hover,.olp .gsp-picker-option[aria-selected="true"] { background: var(--rp-black); color: var(--rp-white); }
.olp .gsp-picker-option-meta { color: var(--olp-ink-mute); }
.olp .gsp-picker-option:hover .gsp-picker-option-meta,.olp .gsp-picker-option[aria-selected="true"] .gsp-picker-option-meta { color: rgba(255, 255, 255, 0.85); }
.olp .gsp-picker-note { color: var(--olp-ink-mute); }
/* notes, docs, totals, catalogue */
.olp .gsp-note { border: 1px solid var(--olp-hairline-dark); background: var(--olp-paper-2); color: var(--olp-ink); }
.olp .gsp-note[data-tone="stop"] { border-color: var(--ds-c-red-19); background: var(--ds-c-red-06); color: var(--ds-c-red-24); }
.olp .gsp-note[data-tone="info"] { border-color: var(--rp-black); background: var(--olp-paper-3); color: var(--olp-ink); }
.olp .gsp-doc-strip { border-color: var(--olp-hairline-dark); background: var(--olp-paper-2); }
.olp .gsp-doc-strip-l { color: var(--olp-ink-mute); }
.olp .gsp-doc-note { border-color: var(--olp-hairline); background: var(--olp-paper-2); color: var(--olp-ink); }
.olp .gsp-totals {
border: 1px solid var(--olp-hairline-dark);
background: var(--olp-paper-2);
}
.olp .gsp-totals-l { color: var(--olp-ink-mute); }
.olp .gsp-totals-item[data-strong="true"] { border-left-color: var(--olp-hairline-dark); }
.olp .gsp-totals-item[data-strong="true"] .gsp-totals-l { color: var(--olp-ink); }
.olp .gsp-totals-item[data-strong="true"] .gsp-totals-v { color: var(--olp-ink); }
.olp .gsp-ref-l { color: var(--olp-ink-mute); }
.olp .gsp-line-code { color: var(--olp-ink-mute); }
.olp .gsp-line-note { color: var(--olp-ink-mute); }
.olp .gsp-cat-item { border-color: var(--olp-hairline-dark); background: var(--olp-paper); }
.olp .gsp-cat-item:hover { background: var(--olp-paper-2); }
.olp .gsp-cat-meta { color: var(--olp-ink-mute); }
.olp .gsp-cat-price { color: var(--rp-black); }
.olp .gsp-terms { border-color: var(--olp-hairline-dark); background: var(--olp-paper); }
.olp .gsp-terms-title { color: var(--olp-ink); font-family: var(--font-display, Fraunces, Georgia, serif); }
.olp .gsp-terms-text { border: 1px solid var(--olp-hairline); background: var(--olp-paper-2); }
/* record layout */
.olp .gsp-record-field { border-bottom: 1px dotted var(--olp-hairline); }
.olp .gsp-record-field-l { color: var(--olp-ink-mute); }
.olp .gsp-record-lead { border-color: var(--olp-hairline-dark); background: var(--olp-paper-2); }
.olp .gsp-record-lead[data-tone="warn"] { background: var(--ds-c-amber-05); border-color: var(--ds-c-amber-26); }
.olp .gsp-record-lead[data-tone="alert"] { background: var(--ds-c-red-06); border-color: var(--ds-c-red-19); }
.olp .gsp-noplan { border-color: var(--ds-c-red-19); background: var(--ds-c-red-06); color: var(--ds-c-red-24); }
.olp .gsp-noplan .gsp-noplan-sub { color: var(--olp-ink); }
/* meters / progress / gantt — flatten XP stripes to printed fills */
.olp .gsp-meter-track { border-color: var(--olp-hairline-dark); background: var(--olp-paper); }
.olp .gsp-meter-fill { background: var(--rp-black); }
.olp .gsp-progress { border-color: var(--rp-black); background: var(--olp-paper-2); }
.olp .gsp-progress-step { color: var(--olp-ink); border-color: var(--olp-hairline-dark); background: var(--olp-paper); }
.olp .gsp-progress-bar { border-color: var(--olp-hairline-dark); background: var(--olp-paper); }
.olp .gsp-progress-fill { background: var(--rp-black); }
.olp .gsp-progress-pct { color: var(--olp-ink); }
.olp .gsp-progress-elapsed,
.olp .gsp-progress-note { color: var(--olp-ink-mute); }
.olp .gsp-gantt th,
.olp .gsp-gantt td { border-color: var(--olp-hairline); }
.olp .gsp-bar { background: var(--rp-black); }
.olp .gsp-bar[data-state="planned"] { background: var(--olp-hairline-dark); }
.olp .gsp-action-row { border-bottom: 1px dotted var(--olp-hairline); }
.olp .gsp-action-node { border-bottom: 1px dotted var(--olp-hairline); }
.olp .gsp-action-node:hover { background: var(--olp-paper-2); }
.olp .gsp-action-id { color: var(--rp-black); }
.olp .gsp-tree-toggle {
border: 1px solid var(--olp-hairline-dark);
background: var(--olp-paper);
color: var(--olp-ink);
border-radius: var(--ds-radius-sm);
}
.olp .gsp-tree-toggle:hover { background: var(--olp-paper-3); }
.olp .gsp-rollup { border-bottom: 1px solid var(--olp-hairline); background: var(--olp-paper-2); }
.olp .gsp-rollup-cell { border: 1px solid var(--olp-hairline); background: var(--olp-paper); }
.olp .gsp-hub-section { border-color: var(--olp-hairline-dark); background: var(--olp-paper); }
.olp .gsp-version { border-color: var(--olp-hairline-dark); background: var(--olp-paper-2); }
.olp .gsp-version[data-active="true"] { border-color: var(--rp-black); background: var(--olp-paper); }
.olp .gsp-version-meta { color: var(--olp-ink-mute); }
.olp .gsp-wiz-col { border-color: var(--olp-hairline-dark); background: var(--olp-paper); }
.olp .gsp-wiz-item { border-bottom: 1px dotted var(--olp-hairline); }
.olp .gsp-wiz-kind { border-color: var(--olp-hairline-dark); background: var(--olp-paper); }
.olp .gsp-leadfilter-label { color: var(--olp-ink-mute); }
.olp .gsp-traction { border-color: var(--olp-hairline-dark); background: var(--olp-paper); }
.olp .gsp-action-add { border-bottom: 1px solid var(--olp-hairline-dark); background: var(--olp-paper-2); }
.olp .gsp-wiz-section { border-bottom: 1px solid var(--olp-hairline); }
.olp .gsp-wiz-section-count { color: var(--olp-ink-mute); }
.olp .gsp-action-shared { border-color: var(--ds-c-amber-26); background: var(--ds-c-amber-05); color: var(--ds-c-yellow-26); }
/* ------------------------------------------------------------------ */
/* window resize handles (OM3-R-003): 8px hit-areas, 8 directions */
.olp .olp-resize {
position: absolute;
z-index: 2;
background: transparent;
touch-action: none;
user-select: none;
}
.olp .olp-resize-n {
top: 0;
left: 8px;
right: 8px;
height: 8px;
cursor: n-resize;
}
.olp .olp-resize-s {
bottom: 0;
left: 8px;
right: 8px;
height: 8px;
cursor: s-resize;
}
.olp .olp-resize-e {
top: 8px;
right: 0;
bottom: 8px;
width: 8px;
cursor: e-resize;
}
.olp .olp-resize-w {
top: 8px;
left: 0;
bottom: 8px;
width: 8px;
cursor: w-resize;
}
.olp .olp-resize-ne,
.olp .olp-resize-nw,
.olp .olp-resize-se,
.olp .olp-resize-sw {
z-index: 3;
width: 8px;
height: 8px;
}
.olp .olp-resize-ne { top: 0; right: 0; cursor: ne-resize; }
.olp .olp-resize-nw { top: 0; left: 0; cursor: nw-resize; }
.olp .olp-resize-se { bottom: 0; right: 0; cursor: se-resize; }
.olp .olp-resize-sw { bottom: 0; left: 0; cursor: sw-resize; }
.olp .olp-resize-se::after {
content: "";
position: absolute;
right: 1px;
bottom: 1px;
width: 6px;
height: 6px;
border-right: 1px solid var(--olp-hairline-dark);
border-bottom: 1px solid var(--olp-hairline-dark);
pointer-events: none;
}
/* ------------------------------------------------------------------ */
/* shared list table (OM3-R-017 / OM3-R-015): sort, filter, resize */
/* Ben, 2026-08-30 hand-annotation ("use proper columns" / "merge 3
filters into columns"): the header used to be TWO stacked rows — the
black label row, then a separate paper-2 "contains" row underneath. One
row now: each `| ` stacks its own label line over its own filter,
`.olp-th-row` / `.olp-th-filter` below. */
.olp .gsp-grid.olp-table[data-sized="true"] { table-layout: fixed; }
/* The | MUST stay a table cell. PR #859 set it to display:flex to stack
the label over its filter, which turns every header cell into a block
and collapses the whole header row into the first column (found live on
portal-test 2026-08-30 23:05 Dubai: REFERENCE/DEALER/WHAT... stacked
vertically at the left, data columns misaligned underneath). The two
inner spans are already block/flex themselves, so they stack in normal
flow without touching the cell's display. */
.olp .olp-table th {
position: sticky;
top: 0;
overflow: visible;
vertical-align: top;
padding: 2px 8px 3px 4px;
white-space: normal;
}
.olp .olp-th-row {
display: flex;
align-items: center;
min-height: 14px;
}
.olp .olp-table th[data-click="true"] .olp-th-row { cursor: pointer; }
.olp .olp-th-label { margin-right: auto; padding-right: 6px; }
.olp .olp-sort-mark {
font-family: var(--font-mono, monospace);
font-size: 9px;
text-transform: none;
letter-spacing: 0;
color: var(--rp-black);
margin-left: 3px;
flex: none;
}
.olp .olp-table th[data-sort="asc"]::after,
.olp .olp-table th[data-sort="desc"]::after { content: none; }
.olp .olp-col-resize {
position: absolute;
top: 0;
right: 0;
width: 6px;
height: 100%;
padding: 0;
border: 0;
background: transparent;
cursor: col-resize;
z-index: 4;
touch-action: none;
user-select: none;
}
.olp .olp-col-resize:hover,
.olp .olp-col-resize[data-active="true"] { background: var(--rp-black); }
.olp .olp-th-filter {
text-transform: none;
font-weight: 400;
letter-spacing: 0;
font-family: var(--font-ui, "PP Neue Machina", sans-serif);
display: block;
margin-top: 2px;
}
.olp .olp-filter-range {
display: flex;
gap: 2px;
}
.olp .olp-th-filter .gsp-input,
.olp .olp-th-filter .gsp-select {
width: 100%;
min-width: 0;
flex: 1;
font-size: 10px;
padding: 1px 3px;
}
/* OM3-R-015: table rows render on one line by default; secondary detail
moves to hover/expand, never a stacked/wrapped multi-line row. Every
OmTable-driven screen (Orders, Dealers, Catalogue, Stock, Exposure,
Settings) shares this one rule set — surfaces never re-implement it
per column. `white-space: nowrap` forces the single line; the fixed
`line-height`/`padding` pair on `.gsp-grid td` (red-plate.css, "rows sit
tight") then gives every row the same compact height regardless of cell
content, since no cell can grow taller by wrapping. `.olp-cell-clip`
(OmTable's default; a column opts out with `clip: false`) turns overflow
into an ellipsis, and OmTable pairs it with a native `title` attribute
carrying the column's full un-clipped value — the hover-reachable detail
this requirement asks for, without a popover per cell. */
.olp .olp-table tbody tr:not([data-group="true"]) td {
vertical-align: middle;
white-space: nowrap;
}
.olp .olp-table td.olp-cell-clip {
overflow: hidden;
text-overflow: ellipsis;
}
.olp .olp-table td.olp-cell-open { overflow: visible; }
.olp .olp-table .gsp-chips {
flex-wrap: nowrap;
max-width: 100%;
}
/* ---- dealer portal standalone: mobile-app frame (Ben 2026-08-24) --------
* The dealer portal opens in its own popup with no portal navigation, laid
* out as a phone app: one column, the app fills the popup, and on a big
* screen a direct visit stays phone-width, centred on the letterpress ground.
* Semantic wrapper only — every visual inside stays the letterpress skin. */
.om-mobile-app {
/* Tokens are scoped to .olp (the app frame inside); this wrapper sits one
* level above it, so it carries the ink ground itself — same value as
* .olp's --olp-ink, kept in step with the letterpress palette above. */
min-height: 100vh;
display: flex;
justify-content: center;
background: var(--ink);
}
.om-mobile-app .olp.gsp-app {
/* 2026-09-28 lane review (Aashish): the standalone dealer portal no longer
* pins a 430px phone column on desktop — the frame fills the browser width
* like every other order-mgmt app. Phones are unchanged: at tablet/phone
* widths min() collapses to the viewport and the phone rules below apply. */
width: 100%;
min-width: 0;
min-height: 100vh;
}
.om-mobile-app .gsp-window { min-height: 100vh; }
.om-mobile-app .gsp-toolbar,
.om-mobile-app .gsp-statusbar { flex-wrap: wrap; row-gap: 2px; }
.om-mobile-app [data-window-id] {
/* One phone column: every window fills the app frame instead of floating
* at a desktop position/size that pokes out of the column. */
left: 0 !important;
top: 0 !important;
width: 100% !important;
max-width: 100%;
}
.om-mobile-app [data-window-id] .gsp-window {
width: 100% !important;
max-width: 100%;
}
/* ---- dealer portal, loaded normal (Ben 2026-09-02) ----------------------
* /app/dealer-portal renders DealerSurface directly as an OmAppFrame screen
* now — no popup, no launch-notice float, so `.om-dealer-opener` (the old
* opener's own layout) is dead and removed with it. The surface reuses the
* base gsp/olp skin at any width (toolbar/statusbar/doc-strip already wrap);
* this pass only tightens the few places a full desktop layout would
* otherwise overflow a 390px phone viewport, scoped to this one screen so no
* other order-mgmt surface is touched. */
@media (max-width: 480px) {
[data-eid="om-dealer-surface"] > .gsp-toolbar { gap: 3px; padding: 3px; }
[data-eid="om-dealer-surface"] > .gsp-toolbar .gsp-field,
[data-eid="om-dealer-surface"] > .gsp-toolbar .gsp-picker { flex: 1 1 100%; }
[data-eid="om-dealer-surface"] > .gsp-toolbar .gsp-toolbar-sep { display: none; }
[data-eid="om-dealer-surface"] > .gsp-toolbar .gsp-toolbar-spring { flex-basis: 100%; height: 0; }
[data-eid="om-dealer-surface"] .gsp-section-head { gap: 4px; padding: 3px 4px; }
[data-eid="om-dealer-surface"] .gsp-doc-strip { gap: 4px; padding: 2px 4px; }
[data-eid="om-dealer-surface"] .gsp-grid { font-size: 10px; }
[data-eid="om-dealer-surface"] > .gsp-statusbar { gap: 2px 4px; padding: 2px 4px; }
}
/* The procurement workbench (Items & suppliers) is hosted inside the Master
Data app under .olp, where proc-letterpress's .plp status-bar rules never
apply — its footer ran together as "rows in totalRows" (independent-
verifier finding, 2026-08-26). Same layout contract as .plp. */
.olp .proc-table-footbar { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; font-size: 11px; }
.olp .proc-limit-label { font-size: 11px; color: var(--olp-ink-mute); }
.olp .proc-limit-select { flex: none; }
/* Embedded portal ds-* surfaces (Chart of accounts in Master Data) keep
their own letterbox inks — the OM grid-header repaint must not turn
their row-header cells or active chips black-on-black (MMDB-2416). */
.olp .ds-records-compact th,
.olp .ds-records-compact tbody th {
background: transparent !important;
color: var(--olp-ink) !important;
}
.olp .ds-filter-chip-active,
.olp .ds-filter-chip-active:hover,
.olp .ds-filter-chip-active:focus-visible {
color: var(--paper, var(--paper));
}
/* MMDB-1785 round 2 (2026-08-28) -- fix content clipping: .gsp-app carries
overflow:hidden (needed for the window's rounded-corner clip), and
OmTable.tsx used to render its as a bare root with no scroll
container, so any table wider than the window's default size (7 columns
at screen:orders' 480px minW, for example) silently lost its trailing
columns with no way to reach them. One shared wrapper in OmTable.tsx
fixes every order-mgmt screen at once. */
.olp-table-scroll { flex: 1 1 auto; min-height: 0; min-width: 0; max-width: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--ink-mute) transparent; }
.olp-table-scroll .olp-table { width: max-content; min-width: 100%; }
.olp-table-scroll::-webkit-scrollbar { height: 8px; }
.olp-table-scroll::-webkit-scrollbar-track { background: transparent; }
.olp-table-scroll::-webkit-scrollbar-thumb { background: var(--ink-mute); border-radius: 4px; }
/* Tax tab (redline 0923 p8, "make tighter as per actual space requirement"):
the operating-unit table uses short rows, scoped to that one table. */
.olp [data-eid="om-tax-units-wrap"] { max-width: 780px; }
.olp [data-eid="om-tax-units"] .gsp-grid td { padding: 1px 6px; line-height: 1.2; }
.olp [data-eid="om-settings-tax"] .gsp-doc-strip { padding-top: 2px; padding-bottom: 2px; }
/* ------------------------------------------------------------------ */
/* MMD-317 / QA F-042 (2026-09-29) — the Orders dashboard pass. */
/* */
/* QA F-042 read the Orders surface as "a dense legacy grid with tiny */
/* monospace labels, compact pill statuses, many column filters, and a */
/* large empty lower canvas; it does not match the portal homepage's */
/* spacious card-based dashboard". Round 1 of this ticket answered it */
/* with a disposition document arguing the density was deliberate; the */
/* owner overrode that and asked for the surface itself to be brought */
/* to the homepage's standard: real spacing, legible labels instead of */
/* tiny monospace, status pills with breathing room, the per-column */
/* filters collapsed into ONE toolbar, and no dead lower canvas. */
/* */
/* Scope. Every selector below hangs off the Orders window */
/* (`[data-eid="om-orders"]`) or the Orders grid */
/* (`[data-eid="om-orders-grid"]`), so Dealers, Catalogue, Commercial, */
/* Stock and Settings — which share `OmTable` and this sheet but have */
/* their own window eids — keep their exact present density. The one */
/* change in a shared component (OmTable's toolbar filter placement) is */
/* opt-in per surface and only Orders turns it on. */
/* */
/* No `!important` and no colour literal is introduced here: both are */
/* gated to zero by design-system-compliance.config.json. */
/* 1. The window's own ground. The pane becomes a column so its last */
/* child (the grid's scroll box) takes the leftover height instead */
/* of leaving a bare paper canvas under a short table. */
.olp .gsp-window[data-eid="om-orders"] .gsp-pane-body {
display: flex;
flex-direction: column;
gap: 0;
padding: 0 0 10px;
}
/* 2. One toolbar card, two rows: the window's Stage/Find row, and the */
/* grid's per-column filters directly beneath it. */
.olp .gsp-window[data-eid="om-orders"] .gsp-section-head {
margin: 10px 10px 0;
padding: 10px 12px;
gap: 10px;
border: 1px solid var(--olp-hairline-dark);
border-bottom: 0;
border-radius: var(--ds-radius-sm) var(--ds-radius-sm) 0 0;
font-size: 12px;
}
.olp .gsp-window[data-eid="om-orders"] .gsp-section-head-note {
font-family: var(--font-ui, "PP Neue Machina", "Segoe UI", sans-serif);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
}
.olp .gsp-window[data-eid="om-orders"] .gsp-section-head .gsp-select,
.olp .gsp-window[data-eid="om-orders"] .gsp-section-head .gsp-input {
font-size: 12px;
padding: 5px 9px;
}
.olp .gsp-window[data-eid="om-orders"] .gsp-section-head .gsp-tool {
font-size: 12px;
padding: 5px 11px;
}
/* The column filters, moved out of the | cells by OmTable's */
/* `filtersInToolbar` mode. Flush under the Stage/Find card when it is */
/* the pane's first child; a card of its own when something (the read- */
/* failure banner) sits above it. */
.olp .gsp-window[data-eid="om-orders"] .olp-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 10px 14px;
margin: 10px 10px 0;
padding: 10px 12px;
border: 1px solid var(--olp-hairline-dark);
border-radius: var(--ds-radius-sm);
background: var(--olp-paper-2);
/* The Orders grid and its filter fields share a finite pane. Without a
bound, the wrapped 13-field toolbar grows to its full content height and
leaves the grid with only a sliver at short window heights. Keep every
field reachable in the toolbar's own scroll region, while the grid's
flex item retains the remaining pane height. */
min-height: 0;
max-height: 50%;
overflow-y: auto;
/* ...but the toolbar must never be shrunk below its own content by the
grid's content. The default shrinkable flex basis made the flex
algorithm take height from the toolbar as the queue grew: round 7
measured 134px at 3 rows, 102px of its own 133px at 12 rows and 67px at
25 (the second row of filters clipped to 0px). `flex: 0 0 auto` pins it
to its content; the ceilings below only bite when the pane (or a short
window) genuinely cannot give it that much, and then `overflow-y: auto`
keeps every field scrollable rather than hidden. */
flex: 0 0 auto;
}
/* At laptop-height windows, reserve a real working area for the grid rather
than allowing the wrapped filter rows to consume most of the pane. A narrow
window wraps the 13 fields past the normal two rows, so the tight bound
applies there and the toolbar scrolls internally; a window wide enough for
the normal two rows gets the full content height instead of a clipped second
row. Wrapping is decided by the fields' 140px flex basis (not their 118px
minimum): seven per row need 7*140 + 6*14 = 1064px of toolbar width, i.e.
~1110px of viewport, so 1120px is the floor. Round 7 measured the two-row
content at 133px and the old 110px cap clipped it at the wide 1440x760. */
@media (max-height: 780px) {
.olp .gsp-window[data-eid="om-orders"] .olp-filter-bar {
max-height: 110px;
}
}
@media (max-height: 780px) and (min-width: 1120px) {
.olp .gsp-window[data-eid="om-orders"] .olp-filter-bar {
max-height: 150px;
}
}
.olp .gsp-window[data-eid="om-orders"] .gsp-pane-body > .olp-filter-bar:first-child {
margin-top: 0;
border-top: 0;
border-radius: 0 0 var(--ds-radius-sm) var(--ds-radius-sm);
}
.olp .gsp-window[data-eid="om-orders"] .olp-filter-field {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 140px;
min-width: 118px;
}
.olp .gsp-window[data-eid="om-orders"] .olp-filter-label {
font-family: var(--font-ui, "PP Neue Machina", "Segoe UI", sans-serif);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--olp-ink-mute);
}
.olp .gsp-window[data-eid="om-orders"] .olp-filter-field .gsp-input,
.olp .gsp-window[data-eid="om-orders"] .olp-filter-field .gsp-select {
font-size: 12px;
padding: 5px 9px;
width: 100%;
min-width: 0;
}
.olp .gsp-window[data-eid="om-orders"] .olp-filter-field .olp-filter-range { gap: 4px; }
/* 3. Legible labels. The applied head rule portal-wide is red-plate.css */
/* `.gsp-grid th` (mono / var(--rp-fs-th) = 10.5px / uppercase) — the */
/* round-1 verifier proved that, and proved the old guard was aiming */
/* at a `.olp .gsp-headcell` rule no Orders table even matches. This */
/* block names the grid's own eid, so it is the applied contract. */
.olp .gsp-grid.olp-table[data-eid="om-orders-grid"] th {
font-family: var(--font-ui, "PP Neue Machina", "Segoe UI", sans-serif);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--olp-ink);
padding: 12px 12px 10px;
background: var(--olp-paper-3);
border-bottom: 1px solid var(--olp-hairline-dark);
}
.olp .gsp-grid.olp-table[data-eid="om-orders-grid"] .olp-sort-mark { font-size: 10px; }
/* Real spacing in the body, too: the same 12px rhythm as the head. */
.olp .gsp-grid.olp-table[data-eid="om-orders-grid"] td {
padding: 10px 12px;
font-size: 12.5px;
line-height: 1.4;
}
.olp .gsp-grid.olp-table[data-eid="om-orders-grid"] tr[data-group="true"] td { padding: 9px 12px; }
/* 4. The grid's own scroll box: a bordered sheet that takes the height */
/* the pane has left, so a short (or empty) queue fills the canvas */
/* instead of floating on it. */
.olp .gsp-window[data-eid="om-orders"] .olp-table-scroll {
flex: 1 1 auto;
margin: 10px 10px 0;
border: 1px solid var(--olp-hairline);
border-radius: var(--ds-radius-sm);
background: var(--olp-paper);
}
/* With no rows the single body row takes the whole sheet and the message */
/* sits centred in it. `data-empty` is set by OmTable only for an empty */
/* body, so a populated grid is never stretched. */
.olp .gsp-grid.olp-table[data-eid="om-orders-grid"][data-empty="true"] { height: 100%; }
.olp .gsp-grid.olp-table[data-eid="om-orders-grid"] .olp-empty-cell {
height: 100%;
padding: 0;
border-right: 0;
}
/* MMD-317 / QA F-042 (fix r3): the panel is scoped to the Orders window */
/* like every other rule in this section. OmTable renders the wrapper for */
/* any consumer, so an unscoped `.olp .olp-empty-panel` would restyle the */
/* empty body of the five screens that share the component. The wrapper */
/* itself is now opt-in (`filtersInToolbar`), so those screens keep main's */
/* exact empty cell. */
.olp .gsp-window[data-eid="om-orders"] .olp-empty-panel {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 28px 24px;
}
.olp .gsp-window[data-eid="om-orders"] .olp-empty-card {
max-width: 540px;
text-align: center;
font-family: var(--font-ui, "PP Neue Machina", "Segoe UI", sans-serif);
font-size: 13px;
line-height: 1.55;
color: var(--olp-ink-mute);
}
/* 5. The read-failure banner and the retry row, same spacing rhythm. */
.olp .gsp-window[data-eid="om-orders"] .gsp-noplan {
margin: 10px 10px 0;
padding: 14px 16px;
font-size: 13px;
line-height: 1.5;
text-align: left;
border-radius: var(--ds-radius-sm);
}
.olp .gsp-window[data-eid="om-orders"] .gsp-noplan .gsp-noplan-sub { margin-top: 4px; font-size: 12.5px; }
.olp .gsp-window[data-eid="om-orders"] .gsp-pane-body > .gsp-muted { margin: 10px 12px 0; }
.olp .gsp-window[data-eid="om-orders"] .gsp-pane-body > .gsp-btnrow {
margin: 10px 10px 0;
padding: 10px 12px;
border: 1px solid var(--olp-hairline);
border-radius: var(--ds-radius-sm);
}
/* 6. Status pills with breathing room. The base pill is 8.5px mono */
/* uppercase in a 2px/7px box; here they are UI-face, readable, and */
/* round with room around the words. The red tone (a failed last read) */
/* is restated at this specificity so it still reads as red. */
.olp .gsp-window[data-eid="om-orders"] .gsp-statusbar {
padding: 9px 12px;
gap: 8px;
}
.olp .gsp-window[data-eid="om-orders"] .gsp-statusbar-cell,
.olp .gsp-window[data-eid="om-orders"] .gsp-statusbar-evidence {
font-family: var(--font-ui, "PP Neue Machina", "Segoe UI", sans-serif);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.01em;
text-transform: none;
padding: 5px 12px;
border-radius: 999px;
background: var(--olp-paper);
color: var(--olp-ink);
border: 1px solid var(--olp-hairline-dark);
}
.olp .gsp-window[data-eid="om-orders"] .gsp-statusbar-cell[data-tone="red"] {
color: var(--ds-c-red-22);
font-weight: 700;
}
/* 7. A genuinely empty queue (no orders yet / still reading / nothing in */
/* this unit) is a message, not a paragraph lost at the top of a big */
/* white pane: it becomes the panel that fills the canvas. */
.olp .gsp-window[data-eid="om-orders"] .gsp-pane-body > .gsp-muted:only-child {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 auto;
margin: 10px;
padding: 32px 24px;
border: 1px solid var(--olp-hairline);
border-radius: var(--ds-radius-sm);
background: var(--olp-paper);
text-align: center;
font-family: var(--font-ui, "PP Neue Machina", "Segoe UI", sans-serif);
font-size: 13px;
line-height: 1.55;
}
/* 8. The status pills a person actually reads, in the grid's own body. */
/* F-042 names "compact pill statuses", and the pill that renders in an */
/* Orders row is `OmChip` (`_lib/xp.tsx`): `.gsp-chip`. The rule applied */
/* to it is red-plate.css `.olp .gsp-chip` (mono, 8px, padding 1px 6px, */
/* max-width 128px with an ellipsis). Round 4 of this ticket styled only */
/* the bottom status bar (`.gsp-statusbar-cell`) and left this pill */
/* exactly as main had it — the FAIL the verifier recorded. The selector */
/* below names the grid's own eid and its body, so it wins the cascade */
/* over `.olp .gsp-chip` without `!important`. It sets no colour: the */
/* `[data-tone]` rules stay in charge of the red/amber/green/blue fills, */
/* so a failed read still reads red. */
.olp .gsp-grid.olp-table[data-eid="om-orders-grid"] tbody .gsp-chip {
font-family: var(--font-ui, "PP Neue Machina", "Segoe UI", sans-serif);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.01em;
text-transform: none;
padding: 5px 12px;
border-radius: 999px;
/* No clipping: the full word, not an ellipsis, is the point of the row. */
max-width: none;
overflow: visible;
text-overflow: clip;
line-height: 1.3;
vertical-align: middle;
}
| |