/* 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, and one flat accent color PER FUNCTIONAL SECTION (the "lot of
   different colors") carried by data-olp-section. Accents print on taskbar
   chips (border-left) and in-window chrome — never on the window title band.
   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);
  --olp-acc: var(--rp-black);
  /* section accents — solid ink black everywhere (Ben 2026-08-24) */
  --olp-orders: var(--rp-black);
  --olp-dealers: var(--rp-black);
  --olp-catalogue: var(--rp-black);
  --olp-commercial: var(--rp-black);
  --olp-stock: var(--rp-black);
  --olp-settings: var(--rp-black);
  --olp-dealer-portal: var(--rp-black);
}

/* ------------------------------------------------------------------ */
/* 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);
}
.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%;
}

/* section accent routing: every window and every taskbar chip carries
   data-olp-section; the accent variable cascades */
.olp [data-olp-section="orders"] { --olp-acc: var(--olp-orders); }
.olp [data-olp-section="dealers"] { --olp-acc: var(--olp-dealers); }
.olp [data-olp-section="catalogue"] { --olp-acc: var(--olp-catalogue); }
.olp [data-olp-section="commercial"] { --olp-acc: var(--olp-commercial); }
.olp [data-olp-section="stock"] { --olp-acc: var(--olp-stock); }
.olp [data-olp-section="settings"] { --olp-acc: var(--olp-settings); }
.olp [data-olp-section="dealer-portal"] { --olp-acc: var(--olp-dealer-portal); }

/* ------------------------------------------------------------------ */
/* title bar: every window — ink black, paper-white type (MMDB-2348).
   Section accent does NOT live here; it stays on the taskbar chip.    */
.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 <a> 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: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-left: 4px solid var(--olp-acc);
  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);
  border-left-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);
  border-left-color: var(--olp-acc);
  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-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(--olp-acc); background: var(--olp-paper-2); }
.olp .gsp-node-id { color: var(--olp-acc); }
.olp .gsp-node-sub { color: var(--olp-ink-mute); }
.olp .gsp-node-open {
  border: 1px solid var(--olp-acc);
  background: var(--olp-paper);
  color: var(--olp-acc);
  box-shadow: none;
  border-radius: var(--ds-radius-sm);
}
.olp .gsp-node-open:hover { background: var(--olp-paper-3); }
.olp .gsp-link { color: var(--olp-acc); }
.olp .gsp-muted { color: var(--olp-ink-mute); }
.olp .gsp-edge { stroke: var(--olp-hairline-dark); }
.olp .gsp-edge[data-on="true"] { stroke: var(--olp-acc); }
.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(--olp-acc); color: var(--olp-acc); }
.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(--olp-acc); }
.olp .gsp-group-chevron { color: var(--olp-acc); }
.olp .gsp-group-hint { color: var(--olp-ink-mute); }
.olp .gsp-grid tr[data-click="true"] td:first-child::before { color: var(--olp-acc); }
.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); }
.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(--olp-acc); }
.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(--olp-acc); }

/* 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;
}

/* tab strip / steps */
.olp .gsp-step {
  border: 1px solid var(--olp-hairline-dark);
  background: var(--olp-paper);
  color: var(--olp-ink-mute);
  border-radius: var(--ds-radius-sm);
}
.olp .gsp-step[data-state="done"] {
  background: var(--olp-paper-2);
  border-color: var(--olp-hairline-dark);
  color: var(--olp-ink);
}
.olp .gsp-step[data-state="now"] {
  background: var(--olp-acc);
  border-color: var(--olp-acc);
  color: var(--rp-white);
}

/* 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(--olp-acc); }
.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 { background: var(--olp-acc); color: var(--rp-white); }
.olp .gsp-picker-option-meta { color: var(--olp-ink-mute); }
.olp .gsp-picker-option:hover .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(--olp-acc); 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-top: 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"] .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(--olp-acc); }
.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(--olp-acc); }
.olp .gsp-progress { border-color: var(--olp-acc); 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(--olp-acc); }
.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(--olp-acc); }
.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(--olp-acc); }
.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(--olp-acc); 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 `<th>` 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 <th> 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(--olp-acc);
  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(--olp-acc); }
.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: one text line per standard row */
.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 {
  width: min(430px, 100vw);
  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 <table> 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; }