/* Bootstrap Dashboard Example - Exact Styling */

body {
  font-size: .875rem;
}

.feather {
  width: 16px;
  height: 16px;
}

/*
 * Sidebar
 */

@media (min-width: 768px) {
  .text-bg-dark {
    position: sticky;
    top: 48px;
    height: calc(100vh - 48px);
  }
}

/*
 * Navbar
 */

.navbar-brand {
  height: 100%;
  background-color: rgba(0, 0, 0, .25);
  
  padding: 1rem 1rem;
}

.navbar-brand a {
  height: 100%;
}


.navbar .form-control {
  padding: .5rem 1rem;
}

/* Search bar styling */
.search-form-container {
  width: 60%;
  margin: 0 0;
  padding: 5px 10px;
}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

@media (max-width: 767.98px) {
  .search-form-container {
    width: 100%;
  }
}

/*
 * Sidebar styling
 */

.sidebar {
  background-color: #2b3035 !important;
}

/* The collapsible Settings group. Bootstrap puts .collapsed on the trigger
   while the group is closed; the chevron is the only thing that changes. */
.nav-group-toggle .bi {
  transition: transform .15s ease;
}
.nav-group-toggle.collapsed .bi {
  transform: rotate(-90deg);
}



/*
 * Content
 */

[role="main"] {
  padding-top: 25px;
}

@media (min-width: 768px) {
  [role="main"] {
    padding-top: 25px;
  }
}

/*
 * Icon styling
 */

.bi {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

/*
 * Nav pills styling
 */

.nav-pills .nav-link {
  font-size: 1rem;
}

.nav-pills .nav-link svg {
  fill: white;
}

/* HTMX loading spinner indicator */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline-block;
}

.htmx-request .button-text {
  opacity: 0.6;
}

/* Status badge styling */
.status-badge {
  background-color: #d4edda;
  color: #155724;
  border: none;
  font-weight: bold;
}

/* Inventory list: deposit stock type — light orange, distinct from warning/yellow badges */
.badge.inventory-stock-type-deposit {
  background-color: #ffe8cc;
  color: #9a5b00;
  border: 1px solid #ffc978;
}

/* Country flag icon styling */
.country-flag {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
  display: inline-block;
}

/* Shipments table vertical alignment */
.table tbody td,
.table tbody th {
  vertical-align: middle;
}

/*
 * Hub app shell — grey main canvas, white cards (Shopify Admin–like)
 */
body.hub-app {
  --hub-page-bg: #f1f2f4;
  --hub-border: #e3e5e8;
  --hub-muted: #5c6165;
  --hub-surface: #fff;
}

body.hub-app main[role="main"] {
  background-color: var(--hub-page-bg);
}

body.hub-app main[role="main"] > footer.border-top {
  background-color: var(--hub-page-bg);
}

.hub-app .hub-card,
.hub-app .card.hub-card {
  background: var(--hub-surface);
  border: 1px solid var(--hub-border);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.hub-app .card.hub-card .card-header {
  background: var(--hub-surface);
  border-bottom-color: var(--hub-border);
}

.hub-app .card.hub-card.border-primary {
  border-color: var(--bs-primary) !important;
}

/* —— Global detail drawer (60% viewport width) —— */
.hub-drawer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
}

.hub-drawer.is-open {
  pointer-events: auto;
}

.hub-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(32, 34, 35, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.hub-drawer.is-open .hub-drawer-backdrop {
  opacity: 1;
}

.hub-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* Stacked layers: each one STEP (48px, hub-drawer.js) narrower than the one beneath, so the
     left edge of every lower layer peeks out. Never narrower than 36vw. */
  width: max(36vw, calc(60vw - var(--hub-drawer-depth, 0) * 48px));
  max-width: 100%;
  /* The panel is a query container so its contents respond to the PANEL's
     width, not the window's. Bootstrap's col-lg-* measures the viewport, so
     inside a 60vw drawer the lg split still fires and gets crammed: col-lg-4
     resolves to 296px at 1440 and 264px at 1280, against 380px+ for the same
     markup on the full page. */
  container-type: inline-size;
  container-name: drawer;
  background: #fff;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.hub-drawer-panel.is-open {
  transform: translateX(0);
}

/* One close control for every drawer: a slim bar above the scroll area, so it never sits on
   top of the page's own content. Pages do not render their own X. */
.hub-drawer-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 0.5rem;
  background: #fff;
  border-bottom: 1px solid #e3e5e8;
}

.hub-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: #202223;
  line-height: 1;
}

.hub-drawer-close:hover {
  background: #f1f2f4;
  color: #000;
}

.hub-drawer-body {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.25rem 1.25rem 1.25rem;
  /* Match resource detail <main> grey — injected HTML has no <body> classes */
  background-color: #f1f2f4;
}

/* A layer with another on top: its visible left strip is one click target that closes
   everything above it. */
.hub-drawer-peek {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: pointer;
  background: rgba(32, 34, 35, 0.18);
  transition: background 0.15s ease;
}

.hub-drawer-panel.is-under > .hub-drawer-peek {
  display: block;
}

.hub-drawer-panel.is-under .hub-drawer-close { visibility: hidden; }

.hub-drawer-panel.is-under > .hub-drawer-peek:hover {
  background: rgba(32, 34, 35, 0.06);
}

@media (max-width: 575.98px) {
  .hub-drawer-panel {
    width: calc(100% - var(--hub-drawer-depth, 0) * 48px);
  }
}

tr.hub-drawer-row {
  cursor: pointer;
}

/*
 * ERP resource detail pages (orders, inventory, future drawer targets).
 * Lives in styles.css (not <head> blocks) so HubDrawer can inject only body
 * markup and still match the full-page look — bootstrap + this file load on the host shell.
 */

/* Order detail — grey canvas on <main> */
body.order-detail-page {
  --resource-page-bg: #f1f2f4;
  --resource-main-padding-x: 1.25rem;
}

@media (min-width: 768px) {
  body.order-detail-page {
    --resource-main-padding-x: 2.25rem;
  }
}

body.order-detail-page main[role="main"] {
  background-color: var(--resource-page-bg);
  padding-left: var(--resource-main-padding-x) !important;
  padding-right: var(--resource-main-padding-x) !important;
}

body.order-detail-page main[role="main"] > footer.border-top {
  background-color: var(--resource-page-bg);
}

/* Inventory detail — same layout tokens + embed body (drawer has no <main>) */
body.inventory-detail-page {
  --resource-page-bg: #f1f2f4;
  --resource-main-padding-x: 1.25rem;
}

@media (min-width: 768px) {
  body.inventory-detail-page {
    --resource-main-padding-x: 2.25rem;
  }
}

body.inventory-detail-page main[role="main"] {
  background-color: var(--resource-page-bg);
  padding-left: var(--resource-main-padding-x) !important;
  padding-right: var(--resource-main-padding-x) !important;
}

body.inventory-detail-page main[role="main"] > footer.border-top {
  background-color: var(--resource-page-bg);
}

body.inventory-detail-page.hub-min-embed {
  margin: 0;
  min-height: 100%;
  background-color: var(--resource-page-bg);
}

/* Shopify Admin–style shared layout (order + inventory single) */
.order-resource-page {
  --order-border: #e3e5e8;
  /* #6d7175 was 4.39:1 on the #f1f2f4 canvas — under AA. #5c6165 clears it
     on every surface the app uses (4.76:1 worst case, on .hub-selbar). */
  --order-muted: #5c6165;
  --order-surface: #fff;
  width: 100%;
  max-width: 100%;
}

.order-resource-page .order-card {
  background: var(--order-surface);
  border: 1px solid var(--order-border);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.order-resource-page .order-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--order-border);
  background: var(--order-surface);
  border-radius: 0.5rem 0.5rem 0 0;
}

.order-resource-page .order-section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--order-muted);
  margin-bottom: 0.75rem;
}

.order-resource-page .order-field-label {
  font-size: 0.8125rem;
  color: var(--order-muted);
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.order-resource-page .order-field-value {
  font-size: 0.9375rem;
  color: #202223;
  line-height: 1.4;
  word-break: break-word;
}

.order-resource-page .order-field-value code {
  font-size: 0.875rem;
  background: #f1f2f4;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  color: #202223;
}

.order-resource-page .order-table-wrap {
  border: 1px solid var(--order-border);
  border-radius: 0.375rem;
  overflow: hidden;
}

.order-resource-page .order-table-wrap table thead th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--order-muted);
  background: #fafbfb;
  border-bottom: 1px solid var(--order-border);
  padding: 0.625rem 0.75rem;
  white-space: nowrap;
}

.order-resource-page .order-table-wrap table tbody td {
  padding: 0.625rem 0.75rem;
  vertical-align: middle;
  border-color: var(--order-border);
}

.order-resource-page .order-json-pre {
  font-size: 0.75rem;
  max-height: 420px;
  overflow: auto;
  background: #fafbfb;
  border: 1px solid var(--order-border);
  border-radius: 0.375rem;
  padding: 1rem;
  margin: 0;
}

.order-resource-page .order-header-flag {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.25rem;
  object-fit: cover;
  flex-shrink: 0;
  vertical-align: middle;
}

.order-resource-page .order-status-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}

.order-resource-page .order-status-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--order-muted);
  line-height: 1;
}

.order-resource-page .order-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  line-height: 1.3;
  border-radius: 0.5rem;
  border: 1px solid rgba(32, 34, 35, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.order-resource-page .order-status-badge-lg {
  font-size: 1.0625rem;
  padding: 0.5rem 0.875rem;
  min-height: 2.5rem;
}

.order-resource-page .order-expected-delivery-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 0.5rem 0.875rem;
  min-height: 2.5rem;
  border-radius: 0.5rem;
  color: #202223;
  background-color: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(32, 34, 35, 0.14);
  box-shadow: none;
}

.order-resource-page .order-badge-pill {
  font-weight: 500;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
}

.order-resource-page .order-header-main-row {
  column-gap: 6rem;
  row-gap: 1rem;
}

/* ── Inventory single-item page extras ─────────────────────────────── */





/* Header layout: identity (2fr) + operational state (3fr), collapsing to one
   stacked column on narrow viewports. */
.order-resource-page .inventory-header-grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 1rem;
  align-items: start;
}

@media (max-width: 991.98px) {
  .order-resource-page .inventory-header-grid {
    grid-template-columns: 1fr;
  }
}

/* Location / stock-type selects sized to their content rather than the row. */
.order-resource-page .inventory-inline-select {
  width: auto;
  min-width: 9rem;
}

/* Backdrop tint for the server-rendered (non-JS) modal open state. */
.inventory-modal-backdrop-tint {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Secondary identifier chip row under the page title — kvik_id, EAN, supplier.
   Visually de-emphasised vs. status pills so the eye lands on operational state first. */
.order-resource-page .inventory-secondary-ids {
  color: var(--order-muted);
}

.order-resource-page .inventory-secondary-id {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  background: #fafbfb;
  border: 1px solid var(--order-border);
  border-radius: 0.375rem;
  font-size: 0.8125rem;
}

.order-resource-page .inventory-secondary-id-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--order-muted);
}

.order-resource-page .inventory-secondary-id code {
  background: transparent;
  padding: 0;
}

/* Picking & Packing: highlight orders waiting 2+ supplier processing days */
.table-hover > tbody > tr.parts-ordered-attention-row > * {
  background-color: #fde8e8;
}

.table-hover > tbody > tr.parts-ordered-attention-row:hover > * {
  background-color: #f8d4d4;
}


/* ══════════════════════════════════════════════════════════════════════
   hub-* list-page contract
   The component vocabulary every list page implements. Full rationale in
   vorto/vortohub-design/DESIGN-SYSTEM.md.

   Rule 1: no <style> block in a list-page template.
   Rule 2: no layout in a style= attribute.
   If a rule is needed it goes here with a hub- prefix, or it does not exist.
   ══════════════════════════════════════════════════════════════════════ */

/* Bootstrap's .text-muted (#6c757d) measures 4.19:1 on the #f1f2f4 canvas —
   under AA — and it carries most of the secondary text on every list page. */
.hub-app .text-muted { color: var(--hub-muted) !important; }

/* Active tab. Bootstrap's default active tab is white on a white card, so the
   only cue is a hairline border. Three cues, none hue-dependent: a grey ground,
   semibold weight, and a 2px inset top rule. */
.hub-app .nav-tabs .nav-link { color: var(--hub-muted); border-color: transparent; }
.hub-app .nav-tabs .nav-link:hover { background: #f1f2f4; border-color: transparent; }
.hub-app .nav-tabs .nav-link.active {
  background: #e9ecef;
  color: #212529;
  font-weight: 600;
  border-color: var(--hub-border) var(--hub-border) #e9ecef;
  box-shadow: inset 0 2px 0 #495057;
}

/* ── Data table ────────────────────────────────────────────────────────── */
.hub-table { font-size: .8125rem; }
.hub-table > :not(caption) > * > * { padding: .5rem .375rem; }
.hub-table.hub-dense > :not(caption) > * > * { padding: .25rem .375rem; }
.hub-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f7f8f9;
  border-bottom: 1px solid var(--hub-border) !important;
  font-weight: 600;
  font-size: .75rem;
  color: var(--hub-muted);
  white-space: nowrap;
}

/* Numbers stay in the body typeface. Column alignment comes from tabular
   figures, not from swapping typeface — v1 mixed the two inside one card, so
   BRAND read sans and SUPPLIER SKU read mono a single field apart. Monospace
   survives only where it is a badge or a literal code reference. */
.hub-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* Secondary line inside a cell — supplier SKU, stock type, scan-job name. */
.hub-sub { font-size: .6875rem; color: var(--hub-muted); }

/* Shelf address is the thing people read across a row, so it gets its own size
   rather than inheriting the 13px body scale — and it is plain text, not a
   badge. The badge in this cell is the stock type, which is a category; the
   address is an identifier you read, so it carries weight instead of a chip. */
.hub-loc {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--bs-font-monospace);
  letter-spacing: .01em;
  line-height: 1.25;
}

/* Sortable header. Direction is stated by an arrow, never by colour alone. */
.hub-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; white-space: nowrap; }
.hub-sort:hover { color: var(--bs-primary); }
.hub-sort .bi { opacity: .3; font-size: .7rem; }
.hub-sort[aria-sort="ascending"] .bi,
.hub-sort[aria-sort="descending"] .bi { opacity: 1; color: var(--bs-primary); }

/* No unbounded value in a table cell: truncate, full value on title=. */
.hub-clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Active-filter chips — without these you cannot see what is filtering without
   opening each of six dropdowns one at a time. */
.hub-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  background: #e9ecef;
  border: 1px solid #dee2e6;
  border-radius: 1rem;
  padding: .1rem .25rem .1rem .6rem;
}
.hub-chip button,
.hub-chip a { border: 0; background: none; line-height: 1; padding: 0 .3rem; color: var(--hub-muted); border-radius: 50%; }
.hub-chip button:hover,
.hub-chip a:hover { background: #ced4da; color: #000; }

/* Selection bar, replacing "this silently applies to all 42 641 filtered rows". */
.hub-selbar { background: #cfe2ff; border: 1px solid #9ec5fe; border-radius: .375rem; }

/* ── Drawer-aware layout ───────────────────────────────────────────────── */
/* .hub-drawer-panel declares container-type/container-name above. 780px is
   chosen so a 1280px laptop (768px panel) stacks cleanly rather than squeezing,
   while 1440px (864px) splits. */
.inv-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@container drawer (min-width: 780px) { .inv-grid { grid-template-columns: 1.75fr 1fr; } }

/* Full page has no container ancestor, so it keys off the viewport — same rule,
   same proportions, same block order. Layout parity is the requirement. */
.inv-page .inv-grid { grid-template-columns: 1fr; }
@media (min-width: 992px) { .inv-page .inv-grid { grid-template-columns: 1.75fr 1fr; } }

/* Catalog card: image beside identity, both container-aware. */
.cat-split { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@container drawer (min-width: 560px) { .cat-split { grid-template-columns: 132px 1fr; } }
.inv-page .cat-split, .cat-page .cat-split { grid-template-columns: 132px 1fr; }
.cat-thumb {
  width: 132px;
  height: 132px;
  border: 1px solid var(--hub-border);
  border-radius: .5rem;
  background: var(--hub-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cat-thumb img { max-width: 100%; max-height: 100%; }

/* Product gallery: main image over a horizontally scrolling strip; the lightbox
   (a native <dialog>) shows the current image large with every image below it. */
@container drawer (min-width: 560px) { .cat-split.cat-split-gallery { grid-template-columns: 200px 1fr; } }
.cat-page .cat-split.cat-split-gallery { grid-template-columns: 200px 1fr; }
.cat-gallery { width: 200px; max-width: 100%; }
.cat-gallery-main { width: 100%; height: 200px; padding: 0; cursor: zoom-in; }
.cat-gallery-strip { display: flex; gap: .375rem; overflow-x: auto; margin-top: .5rem; padding-bottom: .25rem; }
.cat-gallery-thumb {
  flex: 0 0 44px; width: 44px; height: 44px; padding: 2px;
  border: 1px solid var(--hub-border); border-radius: .3rem; background: var(--hub-surface);
  display: flex; align-items: center; justify-content: center;
}
.cat-gallery-thumb img { max-width: 100%; max-height: 100%; }
.cat-gallery-thumb.active { border-color: var(--bs-primary); box-shadow: 0 0 0 1px var(--bs-primary); }
.cat-lightbox { width: min(1100px, 94vw); max-height: 94vh; padding: 0; border: 0; border-radius: .5rem; }
.cat-lightbox::backdrop { background: rgba(0, 0, 0, .7); }
.cat-lightbox-inner { padding: 1rem; display: flex; flex-direction: column; max-height: 94vh; }
.cat-lightbox-stage { position: relative; display: flex; align-items: center; justify-content: center; height: 64vh; background: #fafafa; border-radius: .3rem; }
.cat-lightbox-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cat-lightbox-step {
  position: absolute; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--hub-border); border-radius: 50%; background: rgba(255, 255, 255, .9); font-size: 1.25rem;
}
.cat-lightbox-step:first-child { left: .5rem; }
.cat-lightbox-step:last-child { right: .5rem; }
.cat-lightbox-grid { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .75rem; overflow-y: auto; min-height: 0; }
.cat-lightbox-grid .cat-gallery-thumb { flex-basis: 64px; width: 64px; height: 64px; }

/* Identifier chips — v1 stacked these as five labelled rows down a column. */
.idchip {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  font-size: .75rem;
  background: #f7f8f9;
  border: 1px solid var(--hub-border);
  border-radius: .3rem;
  padding: .1rem .45rem;
}
.idchip .k { color: var(--hub-muted); font-size: .6875rem; }
.idchip code { color: #a626a4; }

.order-card { background: var(--hub-surface); border: 1px solid var(--hub-border); border-radius: .5rem; }
.order-card-header { padding: .6rem .9rem; border-bottom: 1px solid var(--hub-border); font-weight: 600; font-size: .875rem; }
.order-field-label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--hub-muted); }

/* Empty state — an icon, a sentence, and an action. Never a rendered <thead>
   over zero rows, and never one grey line of text. */
.hub-empty { padding: 3rem 1rem; text-align: center; color: var(--hub-muted); }
.hub-empty .bi { font-size: 2rem; opacity: .45; display: block; margin-bottom: .75rem; }

/* Row → drawer. The rule that clicks on links inside a row do NOT open the
   drawer is invisible without a pointer cursor and a hover state. */
.hub-table tbody tr.hub-drawer-row { cursor: pointer; }


/* ── Inventory list ────────────────────────────────────────────────────────
   Column widths are the measured budget from
   app/services/inventory_list.py::INVENTORY_COLUMNS, which is the single
   declaration the table header, the Columns picker and URL state all read.
   test_hub_list_page_contract.py asserts these stay in step with it.

   The budget: 784px fixed + 220px minimum for Product = 1004px against the
   ~1090px available at 1440x900, so Product flexes into 86px of headroom and
   the table measures 0px of horizontal overflow with default columns. ── */
.hub-table .hub-w-select { width: 28px; }
.hub-table .hub-w-id { width: 56px; }
.hub-table .hub-w-product { min-width: 200px; }
.hub-table .hub-w-status { width: 96px; }
.hub-table .hub-w-location { width: 122px; }
.hub-table .hub-w-condition { width: 104px; }
.hub-table .hub-w-price { width: 84px; }
.hub-table .hub-w-supplier { width: 86px; }
.hub-table .hub-w-received { width: 90px; }
.hub-table .hub-w-source { width: 100px; }
.hub-table .hub-w-reserved { width: 86px; }
.hub-table .hub-w-actions { width: 32px; }

/* Wide tier. The team works at 1920x1200, where the table has ~1490px against
   ~1090px at 1440. Without this the flexing Product column absorbs the whole
   400px difference and every fixed column stays as cramped as it was on the
   smaller screen — measured at 1920, Product took 626px while Supplier sat at
   86px and cut off mid-name. */
@media (min-width: 1600px) {
  .hub-table .hub-w-select { width: 32px; }
  .hub-table .hub-w-id { width: 64px; }
  .hub-table .hub-w-product { min-width: 320px; }
  .hub-table .hub-w-status { width: 108px; }
  .hub-table .hub-w-location { width: 136px; }
  .hub-table .hub-w-condition { width: 116px; }
  .hub-table .hub-w-price { width: 100px; }
  .hub-table .hub-w-supplier { width: 132px; }
  .hub-table .hub-w-received { width: 104px; }
  .hub-table .hub-w-source { width: 112px; }
  .hub-table .hub-w-reserved { width: 108px; }
  .hub-table .hub-w-actions { width: 36px; }
}

/* Product is the only column allowed to flex; fixing the rest is what keeps
   the budget honest when a long value arrives. */
.hub-table { table-layout: fixed; }
.hub-table td { overflow: hidden; }

/* "+2 EAN" — the overflow marker for the multi-GTIN string that was one of the
   two unbounded values overflowing the v1 table. Full list on the title. */
.hub-ean-more { font-size: .6rem; font-weight: 500; }

/* Narrow enough to leave the filter row its space — the bar is a budget
   like the table is. */
.hub-search { width: 360px; max-width: 360px; }
/* Catalog: a "Search by" select ahead of the input, sized to its longest option. */
.hub-search.has-by { width: 460px; max-width: 100%; }
.hub-search .hub-search-by { flex: 0 0 auto; width: auto; }
.hub-colmenu { min-width: 220px; }
.hub-bulk-select { min-width: 11rem; }
.hub-perpage { width: auto; }

/* Filter picklist inside a dropdown — search box, scrolling checkbox list,
   "Clear selected", selected count. The picklist itself is deliberately
   unchanged from v1; only its sizing moved out of style= attributes. */
.hub-picklist { min-width: 320px; max-width: 420px; }
.hub-picklist-wide { min-width: 360px; max-width: 520px; }
.hub-picklist-narrow { min-width: 220px; max-width: none; }
.hub-picklist-scroll { max-height: 260px; overflow: auto; }

/* Filter overflow menu — filters that ran out of room in the bar. Each moved
   filter becomes a full-width row so its own dropdown opens downwards. */
.hub-more-menu { min-width: 260px; padding: .5rem; }
.hub-more-menu .dropdown-toggle { width: 100%; text-align: left; }

/* Stock type sits under the shelf address and is read at a glance — supplier
   stock vs owned vs deposit changes what you may do with the unit.
   Deliberately restrained: supplier stock is the common case and matches the
   location badge, owned stock is dark so it is the one that stands out, and
   only Deposit carries a hue. Colour is a second signal only; each badge
   carries its own word. Kept at the secondary text size — the shelf address
   above it is what gets the larger type. */
.hub-stock { font-size: .6875rem; font-weight: 500; padding: .1rem .35rem; border: 1px solid transparent; }
.hub-stock-supplier_stock { background: #f8f9fa; color: #212529; border-color: #dee2e6; }
.hub-stock-owned_stock { background: #495057; color: #fff; border-color: #495057; }
.hub-stock-deposit { background: #fff3cd; color: #664d03; border-color: #ffe69c; }

/* A condition that is not Good is what someone scanning this column is looking
   for, so it is the only thing in the cell that is not muted. */
.hub-bad { color: #b02a37; font-weight: 600; }

/* ── Inventory single view ─────────────────────────────────────────────── */
/* Save used to sit at the bottom of a card, below the fold in the drawer. */
.inv-savebar {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: var(--hub-surface);
  border: 1px solid var(--hub-border);
  border-radius: .5rem;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
}
.inv-savebar-dirty { border-color: #ffc107; }
.hub-hint { font-size: .75rem; }

/* The single view is a reading width, not a full-bleed table. Left full-width
   it sprawls across a 1920 screen and the eye has to travel for every field. */
.inv-page.inv-single { max-width: var(--hub-fixed-width, 1240px); }
.cat-thumb-empty { font-size: .625rem; font-weight: 600; letter-spacing: .08em; color: #9aa1a8; }
/* Keeps the vorto_sku / vorto_id / EAN labels in one column so the values align. */
.cat-key { min-width: 4.5rem; flex-shrink: 0; }
.cat-search { max-width: 520px; }

/* Drawer footer slot — a flex sibling of the scrolling body, so an action bar
   is pinned whether the content scrolls or not. position:sticky inside the body
   does nothing when the content happens to fit, which left the save bar
   floating mid-panel. */
.hub-drawer-foot {
  flex: 0 0 auto;
  background: var(--hub-surface);
  border-top: 1px solid var(--hub-border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
}
/* In the footer slot the bar IS the footer — no margin, no border of its own,
   no radius. It carried Bootstrap's .mt-3, whose !important beat a plain
   margin:0 here and left 17px of dead space above it. The utility class is gone
   and the full-page gap is applied below instead. */
.hub-drawer-foot .inv-savebar {
  position: static;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Only the full page needs to be pushed away from the content above it; in the
   drawer the footer slot provides that separation itself. */
.inv-single .inv-savebar { margin-top: 1rem; }
.cat-search-input { max-width: 20rem; }

/* ── Movements table ───────────────────────────────────────────────────────
   Four of the five columns are fixed-shape — a timestamp, a short badge, a
   signed single digit, an order id — so they get exactly what their widest
   real content needs and Note takes every remaining pixel. Sized against
   "2026-09-01 13:47" and a 9-digit order id at .8125rem plus .375rem padding.
   Type is 120px so the longest choice, "Return from supplier", keeps its badge
   on one line — the shortest width at which no movement type wraps. ── */
.inv-moves { table-layout: fixed; }
.inv-moves th.mv-when { width: 128px; }
.inv-moves th.mv-type { width: 120px; }
.inv-moves th.mv-qty { width: 56px; }
.inv-moves th.mv-order { width: 88px; }

/* ══ Supplier returns ══════════════════════════════════════════════════════
   Everything below serves the Supplier returns section (vorto/supplier-returns/
   ui-v3-mockups.html). Scan consoles are deliberately outside the list
   contract — "different job, different shape" — but they share these tokens.
   ══════════════════════════════════════════════════════════════════════════ */

/* One reading width for every step view and returns page, as a token so the
   pages cannot drift apart. Matches the Inventory single view. */
body.hub-app { --hub-fixed-width: 1240px; }
.hub-fixed { max-width: var(--hub-fixed-width); }

/* Warehouse badges: bright, bigger, icon-led. A deliberate divergence from the
   office-side subtle badges — this section is operated on a warehouse floor,
   often at arm's length, so state has to read as colour before it reads as
   text. Opt-in by class and used only inside the Supplier returns UI; the
   divergence is the section, not the component. */
.hub-app .hub-badge { font-size: .8125rem; font-weight: 600; padding: .4em .7em; }
.hub-app .hub-badge .bi { font-size: .95em; }
.hub-app .hub-badge-lg { font-size: .9375rem; padding: .45em .8em; }
/* The match-rung chip under a shelf address. Smaller than .hub-badge because it
   is a footnote to the location, not a state anyone reads across the room —
   the address above it is the thing carrying the weight in that cell. */
.hub-app .hub-badge-sm { font-size: .6875rem; font-weight: 600; padding: .25em .5em; }

/* KPI stat cards on the returns index. */
.hub-stat { display: block; text-decoration: none; color: inherit; }
.hub-stat .hub-stat-value { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.15; letter-spacing: -.01em; }
.hub-stat .hub-stat-label { font-size: .8125rem; color: var(--hub-muted); }
.hub-stat:hover .card { border-color: #adb5bd; }

/* ── Scan console ──────────────────────────────────────────────────────────
   Shared by the warehouse-return, customer-return and receive-back consoles so
   the three stop diverging. Input is large for arm's-length reading; counter is
   the one number the operator tracks across the room. */
.hub-scan-input { font-size: 1.15rem; font-family: var(--bs-font-monospace); letter-spacing: .05em; max-width: 360px; }
.hub-scan-counter { font-size: clamp(1.75rem, 4.5vw, 3.25rem); font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.hub-scan-feedback { min-height: 28px; }

/* A freshly scanned row announces itself, then settles. */
@keyframes hubRowIn { from { background: #e7f1ff; } to { background: transparent; } }
tr.hub-row-new > td:first-child { box-shadow: inset 3px 0 0 var(--bs-primary); }
tr.hub-row-new > td { animation: hubRowIn 1.6s ease-out 1; }
@media (prefers-reduced-motion: reduce) { tr.hub-row-new > td { animation: none; } }

/* Full-screen scan flash. The label sits on a dark plate (12.6:1) because v1
   rendered white 800-weight text directly on #ffc107 — 1.6:1, unreadable on
   the one screen read from across a warehouse. The word is always carried;
   colour is never the only signal. */
.hub-flash { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0;
  display: flex; align-items: center; justify-content: center; transition: opacity 0s linear; }
.hub-flash .hub-flash-label { color: #fff; background: rgba(0, 0, 0, .72); border-radius: 1rem;
  font-weight: 800; font-size: clamp(2.25rem, 10vw, 6.5rem); text-align: center; padding: .25em .5em; }
@media (prefers-reduced-motion: reduce) { .hub-flash { transition: none !important; } }

/* Radio cards for the disposition step — three equal-weight choices that state
   their consequence, instead of ranking peer outcomes by button colour. */
.hub-choice input { position: absolute; opacity: 0; }
.hub-choice label { display: block; height: 100%; cursor: pointer; border: 1px solid var(--hub-border);
  border-radius: .5rem; padding: .75rem .875rem; background: var(--hub-surface); }
.hub-choice input:checked + label { border-color: var(--bs-primary); box-shadow: 0 0 0 2px rgba(13, 110, 253, .2); }
.hub-choice input:focus-visible + label { outline: 2px solid var(--bs-primary); outline-offset: 2px; }

/* Scan views need taller rows — a CTA and stacked detail per line, read at
   arm's length. That is the ONLY difference: same .hub-table, same type scale,
   same header, more vertical room. */
.hub-table.hub-table-tall > :not(caption) > * > * { padding-top: .7rem; padding-bottom: .7rem; }

/* The scanned-product card reuses the Inventory single view's .cat-split, but
   this page has no `drawer` container to query, so — like .inv-page — it keys
   the image-beside-identity split off the viewport instead. */
@media (min-width: 576px) {
  .ret-catalog .cat-split { grid-template-columns: 132px 1fr; }
}

/* ── Customer-return pick rows ─────────────────────────────────────────────
   A choice card is: radio · flag · [heading line, then one labelled row per
   record] · verdict. The flag gets its own column so every heading line starts
   at the same x — read down the list and the order numbers line up. ── */
.cr-flag { width: 24px; }

/* One record inside a pick row: a fixed-width label, then its fields. The
   label column is what keeps ORDER and INVENTORY readable as two records
   rather than as one run-on sentence. */
.cr-rec { display: flex; align-items: baseline; gap: .5rem; }
.cr-rec > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-rec-key {
  flex: 0 0 4.5rem;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--hub-muted);
}

/* Catalog search results: a smaller thumbnail than the scanned-product card,
   because here it is one row of a list rather than the subject of the block. */
.cr-cat-thumb { width: 56px; height: 56px; }

/* ── Potential returns · single ────────────────────────────────────────────
   The window bar's fill is per-row data, so the template passes the number as
   a custom property and the layout stays here. A style="width:..." would be a
   layout rule inlined into a template, which is what the contract forbids and
   what test_hub_list_page_contract guards. */
.hub-window-bar { height: 8px; }
.hub-window-bar .progress-bar { width: var(--hub-window-used, 0%); }
.hub-table .hub-w-rung { width: 132px; }
.hub-table .hub-w-unit { width: 82px; }
.hub-table .hub-w-shelf { width: 124px; }
.hub-deflist { font-size: .8125rem; }

/* ── Potential returns column budget ───────────────────────────────────────
   Generated from POTENTIAL_RETURN_COLUMNS; test_potential_returns.py asserts
   the two stay in step. Same two-tier rule as everywhere else: a base width
   that fits the ~1090px the table gets at 1440, and a wide tier at 1600px+.

   `product` and `actions` are NOT redeclared here — the .hub-w-* classes are
   global to .hub-table, so a second rule with different numbers would resize
   Inventory depending on rule order. Those two columns carry Inventory's
   widths by declaring the same values in Python.

   The two location columns are wider than a shelf code strictly needs, because
   .hub-loc renders the address at 1rem/700 so the warehouse can read it off
   the row while walking rather than opening each line to find out where to go.
*/
.hub-table .hub-w-verdict { width: 130px; }
.hub-table .hub-w-po { width: 100px; }
.hub-table .hub-w-ordered { width: 80px; }
.hub-table .hub-w-sku { width: 96px; }
.hub-table .hub-w-qty { width: 40px; }
.hub-table .hub-w-cost { width: 80px; }
.hub-table .hub-w-cancelled { width: 116px; }
.hub-table .hub-w-onhand { width: 96px; }

@media (min-width: 1600px) {
  .hub-table .hub-w-verdict { width: 148px; }
  .hub-table .hub-w-po { width: 164px; }
  .hub-table .hub-w-ordered { width: 110px; }
  .hub-table .hub-w-sku { width: 140px; }
  .hub-table .hub-w-qty { width: 56px; }
  .hub-table .hub-w-cost { width: 104px; }
  .hub-table .hub-w-cancelled { width: 168px; }
  .hub-table .hub-w-onhand { width: 120px; }
}

/* ── Returns list column budget ────────────────────────────────────────────
   Declared in app/services/returns_list.py::RETURNS_COLUMNS; same two-tier
   rule as Inventory. Scoped under .ret-list because the shared hub-w-* names
   (select, supplier, actions) carry Inventory's widths — each list page owns
   its own budget. ── */
.ret-list .hub-table .hub-w-ref { width: 96px; }
.ret-list .hub-table .hub-w-supplier { width: 120px; }
.ret-list .hub-table .hub-w-lines { width: 64px; }
.ret-list .hub-table .hub-w-state { width: 156px; }
.ret-list .hub-table .hub-w-value { width: 96px; }
.ret-list .hub-table .hub-w-submitted { width: 96px; }
.ret-list .hub-table .hub-w-age { width: 80px; }
.ret-list .hub-table .hub-w-owner { width: 104px; }
.ret-list .hub-table .hub-w-note { min-width: 164px; }
.ret-list .hub-table .hub-w-actions { width: 32px; }
@media (min-width: 1600px) {
  .ret-list .hub-table .hub-w-ref { width: 112px; }
  .ret-list .hub-table .hub-w-supplier { width: 144px; }
  .ret-list .hub-table .hub-w-lines { width: 72px; }
  .ret-list .hub-table .hub-w-state { width: 172px; }
  .ret-list .hub-table .hub-w-value { width: 112px; }
  .ret-list .hub-table .hub-w-submitted { width: 112px; }
  .ret-list .hub-table .hub-w-age { width: 92px; }
  .ret-list .hub-table .hub-w-owner { width: 128px; }
  .ret-list .hub-table .hub-w-note { min-width: 244px; }
  .ret-list .hub-table .hub-w-actions { width: 36px; }
}

/* ══ Catalog ═══════════════════════════════════════════════════════════════
   Products and Brands, over catalog.dim_product_v2 / dim_brand.

   The Inventory list declares a width per column: 12 columns, 24 rules. That
   does not scale to dim_product_v2's 43, where the same approach is 86 rules
   kept in step with catalog_list.py by hand. Seven tokens cover any number of
   columns, and CssContractTests asserts this set equals SIZES in that module.
   ────────────────────────────────────────────────────────────────────────── */
.hub-table .hub-w-xxs  { width: 56px; }
.hub-table .hub-w-xs   { width: 76px; }
.hub-table .hub-w-sm   { width: 100px; }
.hub-table .hub-w-md   { width: 132px; }
.hub-table .hub-w-lg   { width: 180px; }
.hub-table .hub-w-xl   { width: 260px; }
.hub-table .hub-w-flex { width: 220px; min-width: 220px; }

/* Wide tier. A column may never be narrower here than in the base tier. */
@media (min-width: 1600px) {
  .hub-table .hub-w-xxs  { width: 64px; }
  .hub-table .hub-w-xs   { width: 88px; }
  .hub-table .hub-w-sm   { width: 116px; }
  .hub-table .hub-w-md   { width: 152px; }
  .hub-table .hub-w-lg   { width: 208px; }
  .hub-table .hub-w-xl   { width: 300px; }
  .hub-table .hub-w-flex { width: 320px; min-width: 320px; }
}

/* Horizontal overflow scoped to the table — the page body never scrolls
   sideways. The default preset fits the 1090px floor with no scrollbar. */
.hub-tablescroll { overflow-x: auto; }

/* Under table-layout:fixed a 100%-wide table divides the container between its
   columns, so once the declared widths exceed it every column is squeezed and
   the flexing one collapses to zero. hub-wide switches the table to its natural
   width so the declared widths hold and the scroller does its job. The view
   adds the class when the preset is over FIT_BUDGET — one number, one place. */
.hub-tablescroll .hub-table.hub-wide { width: max-content; }
/* Under the budget the table fills the card and the flexing column takes the
   slack, exactly as the Inventory table behaves today. */
.hub-table:not(.hub-wide) .hub-w-flex { width: auto; }

/* Identity stays on screen while the rest scrolls; without it, scrolling out to
   intercars_sku loses which product the row is.

   Applied ONLY in hub-wide mode. Sticky offsets assume the declared widths are
   the rendered widths, which is true at natural width and false when a
   100%-wide fixed-layout table redistributes its slack — there the pinned cell
   lands ~16px off and covers its neighbour. The pinned pair is always ID
   (hub-w-xs) then the identity column, so the offset is a constant. */
.hub-table .hub-stick { position: sticky; background: var(--hub-surface); }
.hub-table tbody tr:hover .hub-stick { background: #f4f6f7; }
.hub-table thead .hub-stick { background: #f7f8f9; z-index: 3; }
.hub-table .hub-stick-1 { left: 0; z-index: 1; }
.hub-table .hub-stick-2 { left: 76px; z-index: 1; }
@media (min-width: 1600px) { .hub-table .hub-stick-2 { left: 88px; } }
.hub-table .hub-stick-2::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0;
  width: 1px; background: var(--hub-border);
}
.hub-tablescroll.is-scrolled .hub-stick-2::after { box-shadow: 3px 0 8px rgba(0, 0, 0, .14); }

/* Fill meter in the Columns picker. This section exists to find what needs
   cleaning, so the picker states how populated a column is before you spend a
   slot on it. Figures come from pg_stats — counting nulls across 1.29M rows is
   ~3 s per column, pg_stats is free. */
.hub-fill { display: inline-block; width: 36px; height: 4px; border-radius: 2px;
  background: #dee2e6; vertical-align: middle; }
/* The width RULE lives here; only the value comes from the template, as a
   custom property. A style="width:" would put layout back in the markup. */
.hub-fill i { display: block; height: 100%; border-radius: 2px; background: #5c8a9e;
  width: var(--hub-fill, 0%); }
.hub-fill.is-low i { background: #c98a2e; }
.hub-fill.is-empty { background: #f1c7c4; }
.hub-fill-pct { display: inline-block; min-width: 38px; text-align: right; }
.hub-colgroup { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--hub-muted); font-weight: 600; padding: .5rem .25rem .15rem; }
/* A value the table does not hold. Distinct from an empty cell, which reads as
   "nothing to say" — this says "we should know this and do not". */
.hub-missing { color: #9aa1a8; }

/* Catalog single view. Same grid rules as .inv-grid: a container query inside
   the drawer, the matching media query on the page. */
.cat-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@container drawer (min-width: 780px) { .cat-grid { grid-template-columns: 1.75fr 1fr; } }
.cat-page .cat-grid { grid-template-columns: 1fr; }
@media (min-width: 992px) { .cat-page .cat-grid { grid-template-columns: 1.75fr 1fr; } }

/* A reading width, not a full-bleed table — the same rule and the same token as
   .inv-page.inv-single, so the two single views cannot drift apart. It needs
   BOTH classes: the drawer body carries .cat-single without .cat-page, so
   inside the panel the container query still governs and nothing caps twice. */
.cat-page.cat-single { max-width: var(--hub-fixed-width, 1240px); }

.cat-raw-scroll { max-height: 340px; overflow: auto; }
/* Product numbers: sized by content, not hub-table's equal fixed shares, so a
   number never wraps; the card scrolls sideways if it runs out of room. */
.hub-table.cat-numbers { table-layout: auto; }
/* Raw record: name/value pairs flowed into as many columns as fit, no scroll
   box. Long values (documents, image_hashes) clamp to three lines; the full
   value is in the title. */
.cat-raw { columns: 20rem; column-gap: 1.5rem; margin: 0; padding: .5rem 1rem; font-size: .8125rem; }
.cat-raw > div { display: flex; gap: .75rem; break-inside: avoid; padding: .1875rem 0;
  border-bottom: 1px solid var(--hub-border); }
.cat-raw dt { flex: 0 0 10.5rem; font-weight: 400; color: var(--hub-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-raw dd { margin: 0; min-width: 0; overflow-wrap: anywhere; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cat-alias-label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--hub-muted); font-weight: 600; }

/* ══ Catalog → Vehicles ═══════════════════════════════════════════════════
   The Inventory hub-table carrying a make → model → vehicle tree: child rows
   are inserted after their parent and indented by level; the chevron turns
   when open. Depth is also read by shade: make darker, model lighter, vehicle
   white — set through --bs-table-bg because Bootstrap paints cells, not rows.
   Name is fixed wide enough for TecDoc model names; Engine flexes and wraps, because
   engine-code lists are the one unbounded value. Years fits "1975-01–1977-07". */
.hub-table .hub-w-veh-name { width: 380px; }
.hub-table .hub-w-veh-years { width: 140px; }
.hub-table .hub-w-veh-power { width: 90px; }
.hub-table .hub-w-veh-cc { width: 70px; }
.hub-table .hub-w-veh-engine { min-width: 200px; }
.hub-table .hub-w-veh-shown { width: 110px; }
@media (min-width: 1600px) {
  .hub-table .hub-w-veh-name { width: 460px; }
  .hub-table .hub-w-veh-years { width: 150px; }
}
.hub-table tr.veh-row-make > * { --bs-table-bg: #e3e6ea; }
.hub-table tr.veh-row-model > * { --bs-table-bg: #f3f4f6; }
/* The vehicle page's jsonb block and long image URLs must wrap, or one line
   widens the whole .cat-grid past the viewport. */
.cat-json { white-space: pre-wrap; word-break: break-all; }
.cat-grid > * { min-width: 0; }
.veh-indent-1 { padding-left: 1.5rem !important; }
.veh-indent-2 { padding-left: 3rem !important; }
.veh-expand { font-size: inherit; }
.veh-expand .bi { display: inline-block; transition: transform .15s; }
.veh-expand[aria-expanded="true"] .bi { transform: rotate(90deg); }


/* ── Order page (moved out of order_single_db.html, 2026-10-03; shared with order_v2.html) ── */
  /* Grey canvas on <main>; extra horizontal padding on order page */
  body.order-detail-page {
    --order-page-bg: #f1f2f4;
    --order-main-padding-x: 1.25rem;
  }
  @media (min-width: 768px) {
    body.order-detail-page {
      --order-main-padding-x: 2.25rem;
    }
  }
  body.order-detail-page main[role="main"] {
    background-color: var(--order-page-bg);
    padding-left: var(--order-main-padding-x) !important;
    padding-right: var(--order-main-padding-x) !important;
  }
  body.order-detail-page main[role="main"] > footer.border-top {
    background-color: var(--order-page-bg);
  }

  /* Shopify Admin–style resource page */
  .order-resource-page {
    --order-border: #e3e5e8;
    --order-muted: #6d7175;
    --order-surface: #fff;
    width: 100%;
    max-width: 100%;
  }
  .order-resource-page .order-card {
    background: var(--order-surface);
    border: 1px solid var(--order-border);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }
  .order-resource-page .order-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--order-border);
    background: var(--order-surface);
    border-radius: 0.5rem 0.5rem 0 0;
  }
  .order-resource-page .order-section-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--order-muted);
    margin-bottom: 0.75rem;
  }
  .order-resource-page .order-field-label {
    font-size: 0.8125rem;
    color: var(--order-muted);
    margin-bottom: 0.25rem;
    line-height: 1.3;
  }
  .order-resource-page .order-field-value {
    font-size: 0.9375rem;
    color: #202223;
    line-height: 1.4;
    word-break: break-word;
  }
  .order-resource-page .order-field-value code {
    font-size: 0.875rem;
    background: #f1f2f4;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    color: #202223;
  }
  .order-resource-page .order-table-wrap {
    border: 1px solid var(--order-border);
    border-radius: 0.375rem;
    overflow: hidden;
  }
  .order-resource-page .order-table-wrap table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--order-muted);
    background: #fafbfb;
    border-bottom: 1px solid var(--order-border);
    padding: 0.625rem 0.75rem;
    white-space: nowrap;
  }
  .order-resource-page .order-table-wrap table tbody td {
    padding: 0.625rem 0.75rem;
    vertical-align: middle;
    border-color: var(--order-border);
  }
  .order-resource-page .order-json-pre {
    font-size: 0.75rem;
    max-height: 420px;
    overflow: auto;
    background: #fafbfb;
    border: 1px solid var(--order-border);
    border-radius: 0.375rem;
    padding: 1rem;
    margin: 0;
  }
  .order-resource-page .order-header-flag {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.25rem;
    object-fit: cover;
    flex-shrink: 0;
    vertical-align: middle;
  }
  .order-resource-page .order-status-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }
  .order-resource-page .order-status-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--order-muted);
    line-height: 1;
  }
  .order-resource-page .order-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    line-height: 1.3;
    border-radius: 0.5rem;
    border: 1px solid rgba(32, 34, 35, 0.12);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  }
  .order-resource-page .order-status-badge-lg {
    font-size: 1.0625rem;
    padding: 0.5rem 0.875rem;
    min-height: 2.5rem;
  }
  /* Muted “glass” badge for expected delivery (transparent feel on grey main bg) */
  .order-resource-page .order-expected-delivery-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    padding: 0.5rem 0.875rem;
    min-height: 2.5rem;
    border-radius: 0.5rem;
    color: #202223;
    background-color: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(32, 34, 35, 0.14);
    box-shadow: none;
  }
  .order-resource-page .order-badge-pill {
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
  }
  /* Extra space between order title cluster and status block */
  .order-resource-page .order-header-main-row {
    column-gap: 6rem;
    row-gap: 1rem;
  }
  /* Linked inventory column: chip list + manual unlink button */
  .order-resource-page .linked-inv-cell {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    min-width: 18rem;
    max-width: 26rem;
  }
  .order-resource-page .linked-inv-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem 0.1875rem 0.5rem;
    border-radius: 1rem;
    background: #f1f2f4;
    border: 1px solid #dfe2e6;
    color: #202223;
    font-size: 0.8125rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    max-width: 100%;
  }
  .order-resource-page .linked-inv-chip:hover {
    background: #e6e8eb;
    color: #202223;
    text-decoration: none;
  }
  .order-resource-page .linked-inv-chip-manual {
    background: #e7f1ff;
    border-color: #b3d4ff;
  }
  .order-resource-page .linked-inv-chip-shipped {
    background: #f6f6f7;
    border-color: #c9cccf;
    color: #5c5f62;
  }
  .order-resource-page .linked-inv-chip-status {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.0625rem 0.3125rem;
    border-radius: 0.25rem;
    line-height: 1.3;
    flex-shrink: 0;
  }
  .order-resource-page .linked-inv-chip-status-in-wh {
    background: #e3f1df;
    color: #2b5d20;
  }
  .order-resource-page .linked-inv-chip-status-shipped {
    background: #e4e5e7;
    color: #5c5f62;
  }
  .order-resource-page .linked-inv-chip-id {
    font-weight: 600;
  }
  .order-resource-page .linked-inv-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .order-resource-page .linked-inv-unlink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0 0 0 0.25rem;
    color: #6d7175;
    line-height: 1;
    cursor: pointer;
  }
  .order-resource-page .linked-inv-unlink:hover {
    color: #d72c0d;
  }
  .order-resource-page .linked-inv-link-btn {
    align-self: flex-start;
    font-size: 0.8125rem;
    padding: 0.1875rem 0.5rem;
  }

/* ── Order page v2 (order_v2.html) — Pencil S1 · Order · Office lane ─────── */
/* Measurements are the .pen frame at 1x: cards 8px radius, heads 10×14 padding, 14px gaps,
   titles 14/600, captions 10/600 uppercase, body 12.5, sub 11, pills 11/600 with 3×8 padding. */
.hub-order { --ho-ok-bg:#d1e7dd; --ho-ok-fg:#0a3622; --ho-warn-bg:#fff3cd; --ho-warn-fg:#664d03;
  --ho-bad-bg:#f8d7da; --ho-bad-fg:#58151c; --ho-info-bg:#cfe2ff; --ho-info-fg:#052c65;
  --ho-neutral-bg:#e2e3e5; --ho-neutral-fg:#2b2f32; --ho-line-ok:#198754; --ho-line-warn:#e0a800;
  --ho-line-bad:#dc3545; --ho-line-current:#0d6efd; --ho-line-pending:#e3e5e8; --ho-current-bg:#e8f1ff;
  --ho-code:#a626a4; --ho-thead:#f7f8f9; }
/* Width cap: the design system's target is 1920×1200, ~1490px of content after the sidebar. Past
   that, tables stretch without saying more, so stop there (same device as .inv-single's cap). */
.hub-order .order-resource-page { max-width:1500px; margin-inline:auto; }
/* Order total under the Line total rail */
.hub-order .ho-v5 tfoot td { border-top:2px solid var(--hub-border); padding:14px 12px; background:var(--hub-surface); vertical-align:middle; }
.hub-order .ho-v5 tfoot .ho-total-label { font-size:12.5px; font-weight:600; text-align:right; color:var(--hub-muted); }
.hub-order .ho-v5 tfoot .ho-total-label .sub { display:block; font-size:11px; font-weight:400; }
.hub-order .ho-v5 tfoot .ho-total { font-size:20px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
.hub-order .ho-v5 tfoot .ho-total .sub { font-size:11px; font-weight:400; color:var(--hub-muted); display:block; }
.hub-order .ho-card { background:var(--hub-surface); border:1px solid var(--hub-border); border-radius:8px; }
.hub-order .ho-card-head { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--hub-border); min-height:50px; }
.hub-order .ho-card-head h2 { font-size:14px; font-weight:600; margin:0; }
.hub-order .ho-card-head .ho-sub { font-size:11px; color:var(--hub-muted); display:inline; }
.hub-order .ho-card-body { padding:14px; }
.hub-order .ho-json { max-height:640px; overflow:auto; font-size:11.5px; line-height:1.45; white-space:pre; }
.hub-order .ho-card-foot { display:flex; gap:8px; align-items:center; padding:10px 14px; background:var(--ho-thead); border-top:1px solid var(--hub-border); border-radius:0 0 8px 8px; font-size:11.5px; color:var(--hub-muted); }
.hub-order .ho-card-foot strong { color:#202223; }
.hub-order .ho-col { display:flex; flex-direction:column; gap:14px; }
.hub-order .ho-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hub-order .ho-actions .btn-sm { font-size:13px; font-weight:500; padding:4px 12px; border-radius:6px; }
.hub-order .ho-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--hub-muted); }
.hub-order .ho-value { font-size:12.5px; line-height:1.45; }
.hub-order .ho-name { font-size:15px; font-weight:600; }
.hub-order .ho-sub { display:block; font-size:11px; color:var(--hub-muted); font-weight:400; }
.hub-order .ho-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 24px; }
.hub-order .ho-fields .ho-label { margin-bottom:2px; }
.hub-order .ho-chip { display:inline-block; font-size:11px; font-weight:500; color:var(--hub-muted); background:var(--ho-thead); border:1px solid var(--hub-border); border-radius:5px; padding:1px 7px; }
.hub-order .ho-code, .hub-order code { color:var(--ho-code); font-size:12px; }
/* Command bar */
.hub-order .ho-command { padding:12px 16px; }
.hub-order .ho-command-top { display:flex; align-items:center; }
.hub-order .ho-command-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; padding-bottom:10px; border-bottom:1px solid var(--hub-border); }
.hub-order .ho-command-flow { padding-top:10px; }
.hub-order .ho-attrs { display:flex; flex-wrap:wrap; align-items:center; gap:6px 28px; margin:12px 0 0; padding:10px 8px 0; border-top:1px solid var(--hub-border); min-height:42px; }
.hub-order .ho-attrs div { display:flex; align-items:center; gap:6px; line-height:22px; }
.hub-order .ho-attrs dt { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--hub-muted); }
.hub-order .ho-attrs dd { margin:0; font-size:12.5px; font-weight:500; }
.hub-order .ho-attrs .ho-attrs-end { margin-left:auto; }
.hub-order .ho-attrs dd { display:flex; align-items:center; }
.hub-order .ho-attrs dd .ho-badge { font-size:12px; padding:3px 10px; line-height:16px; }
.hub-order .ho-attrs dd .ho-badge.bad { background:#dc3545; color:#fff; border-color:#dc3545; }
.hub-order .ho-attrs dd .ho-badge.ok { background:#198754; color:#fff; border-color:#198754; }
.hub-order .ho-identity { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hub-order .ho-identity h1 { font-size:22px; font-weight:600; margin:0; }
/* Badge — Pencil Badge component: 11/600, 3×8, pill, hairline */
.hub-order .ho-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; line-height:13px;
  padding:3px 8px; border-radius:16px; white-space:nowrap; border:1px solid rgba(0,0,0,.12); }
.hub-order .ho-badge .bi { font-size:11px; }
.hub-order .ho-badge.ok { background:var(--ho-ok-bg); color:var(--ho-ok-fg); }
.hub-order .ho-badge.warn { background:var(--ho-warn-bg); color:var(--ho-warn-fg); }
.hub-order .ho-badge.bad { background:var(--ho-bad-bg); color:var(--ho-bad-fg); }
.hub-order .ho-badge.info { background:var(--ho-info-bg); color:var(--ho-info-fg); }
.hub-order .ho-badge.neutral { background:var(--ho-neutral-bg); color:var(--ho-neutral-fg); }
.hub-order .ho-badge.purple { background:#e2d9f3; color:#3d1f6e; }
.hub-order .ho-badge.hub { background:#202223; color:#fff; } /* on brand: black pill, white letters */
/* Progress Step — head 12/600 + icon, meta 10, 6px bar; equal columns, 6px gap */
.hub-order .ho-flow { display:flex; gap:6px; }
.hub-order .ho-step { flex:1 1 0; min-width:0; padding:5px 8px; border-radius:6px; display:flex; flex-direction:column; gap:7px; }
.hub-order .ho-step-head { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--hub-muted); line-height:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hub-order .ho-step-head .bi { font-size:12px; color:var(--ho-line-pending); flex:none; }
.hub-order .ho-step-meta { font-size:10px; color:var(--hub-muted); line-height:12px; min-height:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hub-order .ho-step-bar { height:6px; border-radius:3px; background:var(--ho-line-pending); }
.hub-order .ho-step.done .ho-step-head .bi { color:var(--ho-line-ok); }
.hub-order .ho-step.done .ho-step-bar { background:var(--ho-line-ok); }
.hub-order .ho-step.current { background:var(--ho-current-bg); }
.hub-order .ho-step.current .ho-step-head { color:#202223; font-weight:700; }
.hub-order .ho-step.current .ho-step-head .bi { color:var(--ho-line-current); }
.hub-order .ho-step.current .ho-step-bar { background:var(--ho-line-current); }
.hub-order .ho-step.warn .ho-step-head { color:var(--ho-warn-fg); font-weight:700; }
.hub-order .ho-step.warn .ho-step-head .bi { color:var(--ho-line-warn); }
.hub-order .ho-step.warn .ho-step-bar { background:var(--ho-line-warn); }
.hub-order .ho-step.skipped .ho-step-head span { text-decoration:line-through; }
.hub-order .ho-step.bad .ho-step-head { color:var(--ho-bad-fg); font-weight:700; }
.hub-order .ho-step.bad .ho-step-head .bi { color:var(--ho-line-bad); }
.hub-order .ho-step.bad .ho-step-bar { background:var(--ho-line-bad); }
/* Two-column rows: 726 | 420 of 1160 in the .pen, 14px gap */
.hub-order .ho-grid-2 { display:grid; grid-template-columns:minmax(0,726fr) minmax(0,420fr); gap:14px; align-items:start; }
@media (max-width: 1199.98px) { .hub-order .ho-grid-2 { grid-template-columns:1fr; } }
/* Comments | Internal notes | Attention: three equal blocks, all as tall as the tallest. */
.hub-order .ho-grid-3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
@media (max-width: 991.98px) { .hub-order .ho-grid-3 { grid-template-columns:1fr; } }
.hub-order .ho-notes-row { margin-top:50px; } /* set apart from the order cards above */
.hub-order .ho-slip-tag { margin-left:auto; display:inline-flex; align-items:center; gap:4px; text-transform:none; letter-spacing:0; font-weight:600; color:var(--hub-muted); white-space:nowrap; }
/* Order info: header-only when collapsed; expanded = summary strip, rule, two field groups */
.hub-order .ho-toggle { width:100%; text-align:left; background:transparent; border:0; border-bottom:0; border-radius:8px; cursor:pointer; min-height:38px; padding:10px 14px; }
.hub-order .ho-toggle[aria-expanded="true"] { border-bottom:1px solid var(--hub-border); border-radius:8px 8px 0 0; }
.hub-order .ho-toggle .ho-chev { transition:transform .15s; font-size:12px; color:var(--hub-muted); }
.hub-order .ho-toggle[aria-expanded="true"] .ho-chev { transform:rotate(90deg); }
.hub-order .ho-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px 22px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--hub-border); }
.hub-order .ho-summary .ho-label { margin-bottom:2px; }
.hub-order .ho-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.hub-order .ho-h3 { font-size:15px; font-weight:600; margin:0 0 8px; display:flex; align-items:center; gap:8px; }
.hub-order .ho-field { display:grid; grid-template-columns:140px minmax(0,1fr); gap:10px; align-items:center; padding:3px 0; font-size:13px; margin:0; }
.hub-order .ho-field-label { color:#202223; }
.hub-order .ho-field-value { display:block; width:100%; background:#f1f2f4; border:1px solid transparent; border-radius:6px; padding:6px 12px; font:inherit; font-size:13px; font-weight:500; color:#202223; min-height:32px; }
.hub-order input.ho-field-value:focus { outline:0; border-color:#0d6efd; background:#fff; box-shadow:0 0 0 3px rgba(13,110,253,.15); }
.hub-order .ho-field-value.readonly { color:var(--hub-muted); font-weight:400; }
.hub-order .ho-field-value.empty::before { content:"—"; color:var(--hub-muted); font-weight:400; }
.hub-order .ho-form-foot { display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:14px; border-top:1px solid var(--hub-border); }
.hub-order .ho-form-foot .ho-sub { display:inline; }
/* Notes */
.hub-order .ho-note { border-radius:6px; padding:9px 11px; font-size:12px; line-height:1.4; }
.hub-order .ho-note-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin-bottom:3px; }
.hub-order .ho-note.customer { background:var(--ho-warn-bg); color:#52400a; }
.hub-order .ho-note.internal { background:#f1f2f4; color:#202223; }
.hub-order .ho-note.att-open { background:var(--ho-bad-bg); color:var(--ho-bad-fg); }
.hub-order .ho-note.att-resolved { background:var(--ho-ok-bg); color:var(--ho-ok-fg); }
.hub-order .ho-note-input { font-size:12.5px; }
/* Sub-table inside a card body (Related shipments) */
.hub-order .ho-subtable { border:1px solid var(--hub-border); border-radius:6px; overflow:hidden; }
.hub-order .ho-subtable .hub-table thead th { font-size:10px; padding:7px 12px; }
.hub-order .ho-subtable .hub-table td { padding:8px 12px; font-size:12px; }
.hub-order .ho-iconbtn { padding:2px 6px; line-height:1; }
.hub-order .ho-subtable .ho-w-n { width:32px; } .hub-order .ho-subtable .ho-w-type { width:104px; } .hub-order .ho-subtable .ho-w-status { width:140px; } .hub-order .ho-subtable .ho-w-date { width:100px; } .hub-order .ho-subtable .ho-w-act { width:80px; }
@media (min-width:1600px) { .hub-order .ho-subtable .ho-w-status { width:170px; } .hub-order .ho-subtable .ho-w-date { width:130px; } }
.hub-order .ho-subtable td.ho-when { font-size:11.5px; line-height:1.35; }
.hub-order .ho-subtable .ho-badge + .ho-sub { margin-top:3px; }
.hub-order .ho-subtable code { white-space:nowrap; }
.hub-order .ho-costs-toggle { display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; background:var(--ho-thead); border:1px solid var(--hub-border); border-radius:6px; cursor:pointer; text-align:left; }
.hub-order .ho-costs-toggle .ho-chev { font-size:11px; color:var(--hub-muted); transition:transform .15s; }
.hub-order .ho-costs-toggle[aria-expanded="true"] .ho-chev { transform:rotate(90deg); }
.hub-order .ho-costs-total { margin-left:auto; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hub-order .ho-subtable tfoot td { background:var(--ho-thead); border-top:1px solid var(--hub-border); padding:7px 12px; font-size:12px; }
.hub-order .ho-w-n { width:28px; } .hub-order .ho-w-type { width:110px; } .hub-order .ho-w-date { width:120px; } .hub-order .ho-w-act { width:80px; }
.hub-order .ho-w-ref { width:120px; } .hub-order .ho-w-status { width:160px; } .hub-order .ho-w-amount { width:130px; } .hub-order .ho-w-provider { width:180px; }
/* Full-width tables (Returns, Payments): 14px side padding, 10px caption head, 14px row padding */
.hub-order .hub-table thead th { text-transform:uppercase; letter-spacing:.04em; }
.hub-order .ho-wide thead th { font-size:10px; padding:6px 14px; }
.hub-order .ho-wide td { padding:14px; font-size:12.5px; vertical-align:top; }
.hub-order .ho-wide td:first-child, .hub-order .ho-wide th:first-child { padding-left:14px; }
.hub-order .ho-money { font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.hub-order .ho-money .sub { display:block; font-size:11px; color:var(--hub-muted); font-weight:400; }
.hub-order .ho-margin-pos { color:var(--ho-line-ok); }
.hub-order .ho-margin-neg { color:var(--ho-bad-fg); }
/* P&L ledger rows: 28px, 12.5 label, 13 value */
.hub-order .ho-sum { display:flex; justify-content:space-between; gap:8px; padding:6px 0; font-size:12.5px; }
.hub-order .ho-sum .ho-money { font-size:13px; font-weight:500; }
.hub-order .ho-sum.total { font-weight:600; }
.hub-order .ho-sum.total .ho-money { font-weight:700; }
.hub-order .ho-sum.rule { border-top:1px solid var(--hub-border); }
.hub-order .ho-sum.muted > span:first-child { color:var(--hub-muted); }
/* P&L ledger: label | local | EUR, 28px rows, rules before the two totals */
.hub-order .ho-ledger { width:100%; border-collapse:collapse; font-size:12.5px; }
.hub-order .ho-ledger th { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--hub-muted); padding:10px 14px 2px; }
.hub-order .ho-ledger td { padding:6px 14px; }
.hub-order .ho-ledger td.ho-money { font-size:13px; font-weight:500; width:120px; }
.hub-order .ho-ledger tr.total td { font-weight:600; border-top:1px solid var(--hub-border); }
.hub-order .ho-ledger tr.total td.ho-money { font-weight:700; }
.hub-order .ho-ledger tr.muted td:first-child { color:var(--hub-muted); }
.hub-order .ho-ledger tbody.after tr:first-child td { border-top:1px dashed var(--hub-border); padding-top:10px; }
/* Event rail: 9px dot, 2px line, 48px rows */
.hub-order .ho-events { padding-bottom:0; }
.hub-order .ho-event { display:grid; grid-template-columns:11px 1fr; gap:10px; }
.hub-order .ho-event-rail { position:relative; }
.hub-order .ho-event-rail::after { content:""; position:absolute; left:4px; top:9px; bottom:0; width:2px; background:var(--hub-border); }
.hub-order .ho-event:last-child .ho-event-rail::after { display:none; }
.hub-order .ho-event-dot { display:block; width:9px; height:9px; border-radius:50%; background:#fff; border:2px solid #b5bcc4; position:relative; z-index:1; margin-top:1px; }
.hub-order .ho-event-dot.current { background:var(--ho-line-current); border-color:var(--ho-line-current); }
.hub-order .ho-event-dot.ok { background:var(--ho-line-ok); border-color:var(--ho-line-ok); }
.hub-order .ho-event-dot.bad { background:var(--ho-line-bad); border-color:var(--ho-line-bad); }
.hub-order .ho-event-body { padding-bottom:14px; }
.hub-order .ho-event-top { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.hub-order .ho-event-label { font-size:12.5px; font-weight:600; }
/* Products: vehicle strip + fitment flow */
.hub-order .ho-vehicle { display:flex; align-items:center; gap:10px; padding:9px 14px; background:var(--hub-page-bg); border-bottom:1px solid var(--hub-border); }
.hub-order .ho-vehicle .ho-label { font-size:10.5px; font-weight:700; }
.hub-order .ho-vehicle-name { font-size:12.5px; font-weight:600; }
.hub-order .ho-plate { display:inline-flex; align-items:stretch; height:28px; border:1.5px solid #101d33; border-radius:5px; overflow:hidden; background:#fff; }
.hub-order .ho-plate-band { width:20px; background:#003399; color:#fff; font-size:8px; font-weight:700; display:flex; align-items:flex-end; justify-content:center; padding-bottom:2px; }
.hub-order .ho-plate-no { padding:0 10px 0 9px; font-size:14px; font-weight:600; color:#111418; display:flex; align-items:center; letter-spacing:.02em; }
.hub-order .ho-fitment { padding:12px 14px 14px; border-bottom:1px solid var(--hub-border); }
.hub-order .ho-fitment .ho-label { font-weight:700; padding-left:8px; margin-bottom:6px; }
/* V5 · aligned two-tier head. Rails come from the colgroup (table-layout:fixed). */
/* No .table-responsive here: its overflow:auto clips the line menu dropdown under the next row. The
   table is table-layout:fixed at 100% and the page has a 1440 floor, so it never needs to scroll. */
.hub-order .ho-v5-wrap { overflow:visible; }
.hub-order .ho-v5 { width:100%; }
/* .hub-table td is overflow:hidden for fixed-layout truncation; the identity cell must let the line menu
   escape, and the positioned cell lifts the open menu above the rows that follow. */
.hub-order .ho-v5 tr.ho-line > td { overflow:visible; position:relative; }
.hub-order .ho-v5 tr.ho-line > td:has(.dropdown-menu.show) { z-index:2; }
.hub-order .ho-v5 .dropdown-menu { z-index:1030; }
.hub-order .ho-v5 .ho-cg-n { width:44px; }
/* Supplier takes the remaining width, so its supplier-order and live-check lines stay on one line. */
.hub-order .ho-v5 .ho-cg-dispatch { width:196px; } /* "Shipped PO #2776 · 10-06" on one line */
/* The check column also holds the stock line. */
.hub-order .ho-v5 .ho-cg-check { width:150px; }
.hub-order .ho-v5 .ho-cg-qty { width:104px; }
.hub-order .ho-v5 .ho-cg-money { width:122px; }
@media (min-width:1600px) { .hub-order .ho-v5 .ho-cg-dispatch { width:240px; } .hub-order .ho-v5 .ho-cg-check { width:190px; } .hub-order .ho-v5 .ho-cg-qty { width:130px; } .hub-order .ho-v5 .ho-cg-money { width:150px; } }
.hub-order .ho-v5 thead th { font-size:11px; letter-spacing:.04em; padding:10px 12px; }
.hub-order .ho-v5 thead .ho-head-fulfilment th { background:#eaecef; font-size:11px; font-weight:500; text-transform:none; letter-spacing:0; padding:7px 12px; color:var(--hub-muted); }
.hub-order .ho-v5 .ho-rail { border-left:1px solid var(--hub-border); }
.hub-order .ho-v5 td { padding:10px 12px; vertical-align:middle; }
.hub-order .ho-v5 tr.ho-line > td { border-top:1px solid var(--hub-border); padding:14px 12px; }
.hub-order .ho-v5 tbody.ho-product:first-of-type tr.ho-line > td { border-top:0; }
/* 10px breathing room between products: a page-coloured top border on each group after the first */
.hub-order .ho-v5 tbody.ho-product + tbody.ho-product > tr:first-child > td { border-top:10px solid var(--hub-page-bg); box-shadow:inset 0 1px 0 var(--hub-border); }
.hub-order .ho-v5 tr.ho-fulfilment > td { border-top:1px solid var(--hub-border); font-size:12.5px; }
.hub-order .ho-v5 .ho-n { color:var(--hub-muted); font-weight:600; white-space:nowrap; text-align:center; }
.hub-order .ho-v5 tr.ho-line > .ho-n { font-size:16px; color:#202223; }
.hub-order .ho-v5 .ho-n .bi { font-size:11px; }
.hub-order .ho-v5 tbody.ho-row-warn > tr > td { background:#fffbeb; }
.hub-order .ho-v5 tbody.ho-row-bad > tr > td { background:#fffbeb; }
.hub-order .ho-v5 tbody.ho-row-bad > tr > td:first-child { box-shadow:inset 3px 0 0 var(--ho-line-bad); }
.hub-order .ho-v5 .ho-money .sub { margin-top:1px; }
.hub-order .ho-line-id { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.hub-order .ho-line-menu { color:var(--hub-muted); padding:0 6px; line-height:1; font-size:16px; }
.hub-order .ho-line-menu:hover { color:#202223; }
/* Result of an in-place edit on the order page. */
.ho-toast { position:fixed; right:24px; bottom:24px; z-index:2100; max-width:420px; padding:10px 14px; border-radius:8px;
  background:#202223; color:#fff; font-size:13px; box-shadow:0 6px 24px rgba(0,0,0,.18); transition:opacity .4s ease; }
.ho-toast.bad { background:#b02a37; }
.ho-toast.out { opacity:0; }
/* Supply-line quantity: − n + on a queued supply line. */
.hub-order .ho-stepper { display:inline-flex; align-items:center; gap:6px; }
.hub-order .ho-qty-warn { color:var(--ho-line-bad); font-size:11px; font-weight:600; white-space:nowrap; margin-top:2px; }
.hub-order .ho-stepper form { display:inline; margin:0; }
.hub-order .ho-stepper .btn { padding:0 4px; line-height:1.2; font-size:13px; }
.hub-order .dropdown-menu { font-size:12.5px; }
.hub-order .dropdown-item { padding:6px 12px; }
.hub-order .ho-qty-form { display:flex; align-items:center; gap:8px; margin-top:8px; }
.hub-order .ho-qty-form.collapse:not(.show) { display:none; }
.hub-order .ho-qty-form input[type=number] { width:88px; }
.hub-order .ho-v5 tbody.ho-row-removed > tr > td { background:#f7f8f9; color:var(--hub-muted); }
.hub-order .ho-v5 tbody.ho-row-removed .ho-line-name { text-decoration:line-through; color:var(--hub-muted); }
.hub-order .ho-line-name { font-size:14px; font-weight:600; }
.hub-order .ho-line-brand { font-size:12.5px; color:var(--hub-muted); }
.hub-order .ho-line-main { display:flex; align-items:flex-start; gap:12px; }
.hub-order .ho-thumb { flex:none; width:52px; height:52px; border:1px solid var(--hub-border); border-radius:6px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hub-order .ho-thumb img { width:100%; height:100%; object-fit:contain; }
.hub-order .ho-thumb-empty { font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--hub-muted); text-align:center; line-height:1.2; }
.hub-order .ho-line-ids { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; }
.hub-order .ho-check .ho-sub { margin-top:3px; }
.hub-order .ho-supplier { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hub-order .ho-supplier-name { font-weight:600; color:#202223; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.hub-order a.ho-supplier-name:hover { color:#0d6efd; }
.hub-order .ho-supplier-name .bi { color:var(--hub-muted); }
.hub-order .ho-unit { display:inline-flex; align-items:center; gap:5px; text-decoration:none; color:#202223; }
.hub-order .ho-unit .bi { color:var(--hub-muted); }
.hub-order .ho-unit code { font-weight:500; }
.hub-order .ho-v5 .linked-inv-link-btn { font-size:12.5px; font-weight:500; border-radius:6px; }
/* Supplier options drawer — Pencil S1 · Supplier options popup: one card per offer */
.hub-order.ho-drawer { padding:14px 18px; }
.hub-order .ho-drawer-head { display:flex; align-items:baseline; gap:10px; padding-bottom:12px; margin-bottom:10px; border-bottom:1px solid var(--hub-border); }
.hub-order .ho-drawer-head h2 { font-size:17px; font-weight:600; margin:0; white-space:nowrap; }
.hub-order .ho-drawer-head .bi { color:var(--hub-muted); align-self:center; }
.hub-order .ho-drawer-sub { font-size:13px; color:var(--hub-muted); }
.hub-order .ho-opt-head, .hub-order .ho-opt { display:grid; grid-template-columns:56px minmax(0,1.4fr) minmax(0,1.5fr) minmax(0,1.5fr) 110px; gap:14px; align-items:start; }
.hub-order .ho-opt-head { padding:6px 10px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--hub-muted); }
.hub-order .ho-opt { padding:12px 10px; border:1px solid var(--hub-border); border-radius:8px; background:#f7f8f9; margin-bottom:8px; font-size:12.5px; line-height:1.45; }
.hub-order .ho-opt.chosen { background:#e9f6ee; border-color:#9fd3b2; }
.hub-order .ho-opt-name { font-size:14px; font-weight:600; }
.hub-order .ho-opt-sub { font-size:12px; color:var(--hub-muted); }
.hub-order .ho-opt-avail { font-weight:600; }
.hub-order .ho-live { margin-top:4px; }
/* The line's supplier order on the order page: green once sent, red while parked as a problem, link blue while queued. */
.hub-order .ho-so { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* a very long portal ref truncates; full text in the title */
.hub-order .ho-so.sent, .hub-order .ho-so.sent a { color:var(--ho-line-ok); font-weight:600; }
.hub-order .ho-so.problem, .hub-order .ho-so.problem a { color:var(--ho-line-bad); font-weight:600; }
/* Live supplier check (L5): order page, supplier orders. Not scoped to .hub-order, so the fallbacks carry the colours. */
.ho-live-row { display:flex; align-items:baseline; gap:5px; font-weight:600; white-space:nowrap; color:var(--ho-neutral-fg, #2b2f32); line-height:1.35; }
.ho-live-row .bi { flex:none; }
.ho-live-row.ok, .so-avail.ok .bi { color:var(--ho-line-ok, #198754); }
.ho-live-row.warn { color:#9a4a00; }
.ho-live-row.warn .bi, .so-avail.warn .bi { color:#fd7e14; }
.ho-live-row.bad, .so-avail.bad .bi { color:var(--ho-line-bad, #dc3545); }
.so-avail { display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap; }
.so-avail .bi { font-size:1.05rem; }
.so-avail-at { font-size:12px; color:#6c757d; }
.so-avail-label { font-weight:600; }
.so-avail.ok .so-avail-label { color:var(--ho-line-ok, #198754); }
.so-avail.warn .so-avail-label { color:#9a4a00; }
.so-avail.bad .so-avail-label { color:var(--ho-line-bad, #dc3545); }
.so-avail.neutral .so-avail-label { color:#6c757d; }
.hub-order .ho-opt-avail.ok { color:var(--ho-line-ok); }
.hub-order .ho-opt-avail.bad { color:var(--ho-line-bad); }
.hub-order .ho-opt-delivery { color:#0d6efd; }
.hub-order .ho-tiers { margin:2px 0 2px; display:grid; grid-template-columns:max-content max-content; column-gap:10px; row-gap:1px; font-size:12px; }
.hub-order .ho-tiers div { display:contents; }
.hub-order .ho-tiers dt { color:var(--hub-muted); font-weight:400; }
.hub-order .ho-tiers dd { margin:0; font-weight:600; font-variant-numeric:tabular-nums; }
.hub-order .ho-opt code { font-weight:600; }
.hub-order .ho-rank { display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:50%; background:var(--ho-neutral-bg); font-weight:600; font-size:14px; }
.hub-order .ho-rank.primary { background:#bfe3cc; color:var(--ho-ok-fg); }
.hub-order .ho-tag { display:inline-block; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 7px; border-radius:10px; background:var(--ho-neutral-bg); color:var(--ho-neutral-fg); }
.hub-order .ho-tag.ok { background:var(--ho-ok-bg); color:var(--ho-ok-fg); }
.hub-order .ho-btn-chosen { background:var(--ho-ok-bg); color:var(--ho-ok-fg); border:1px solid #9fd3b2; font-weight:600; }
.hub-order .ho-drawer .btn-sm { font-size:13px; padding:5px 12px; border-radius:6px; }
/* Add product drawer */
.hub-order .ho-add .hub-search { max-width:none; width:100%; }
.hub-order .ho-add-hit { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:14px; padding:12px 10px; border:1px solid var(--hub-border); border-radius:8px; background:#f7f8f9; margin-bottom:8px; font-size:12.5px; }
.hub-order .ho-add-offers { display:flex; flex-direction:column; gap:6px; }
.hub-order .ho-add-offer { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--hub-border); border-radius:6px; padding:6px 8px; margin:0; }
.hub-order .ho-add-offer .min-w-0 { flex:1 1 auto; }
.hub-order .ho-add-live { flex:0 0 auto; max-width:200px; }
.hub-order .ho-add-live:empty { display:none; }
.hub-order .ho-add-qty { width:64px; flex:none; }
.hub-order .ho-rank.sm { width:28px; height:28px; font-size:12px; flex:none; }

.hub-order .ho-v5 tfoot tr.ho-paid-diff > td { border-top:0; padding-top:0; font-weight:700; }
/* The diff is the one figure on the page that demands action, so it gets the full red / green,
   not the muted badge tones. #dc3545 and #198754 both clear 4.5:1 on white. */
.hub-order .ho-paid-diff .ho-margin-neg { color:var(--ho-line-bad); }
.hub-order .ho-paid-diff .ho-margin-neg .sub { color:var(--ho-line-bad); opacity:.85; }
.hub-order .ho-paid-diff .ho-margin-pos { color:var(--ho-line-ok); }
.hub-order .ho-paid-diff .ho-margin-pos .sub { color:var(--ho-line-ok); opacity:.85; }

/* A replaced product: the old identity sits under the new line's fulfilments, greyed out */
.hub-order .ho-v5 tr.ho-replaced > td { background:#fafbfc !important; color:var(--hub-muted); border-top:1px dashed var(--hub-border); padding:10px 12px; font-size:12.5px; }
.hub-order .ho-v5 tr.ho-replaced .ho-line-name { text-decoration:line-through; color:var(--hub-muted); font-size:13px; }
.hub-order .ho-v5 tr.ho-replaced .idchip { opacity:.75; }
.hub-order .ho-v5 tr.ho-replaced > .ho-n { color:var(--hub-muted); text-align:center; }

/* ── S3 fitment drawer (L6 part-check) ─────────────────────────────────────── */
.hub-order .ho-fit-steps { display:flex; background:var(--hub-surface); border:1px solid var(--hub-border); border-radius:8px; overflow:hidden; margin-bottom:10px; }
.hub-order .ho-fit-step { flex:1; display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:13px; font-weight:600; color:var(--hub-muted); text-decoration:none; border-bottom:2px solid transparent; }
.hub-order .ho-fit-step + .ho-fit-step { border-left:1px solid var(--hub-border); }
.hub-order .ho-fit-step.on { color:#0d6efd; border-bottom-color:#0d6efd; }
.hub-order .ho-fit-step.off { opacity:.55; pointer-events:none; }
.hub-order .ho-fit-step .n { width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; background:var(--ho-neutral-bg); color:var(--hub-muted); }
.hub-order .ho-fit-step.on .n { background:#0d6efd; color:#fff; }
.hub-order .ho-fit-note { display:flex; gap:10px; background:var(--ho-warn-bg); color:var(--ho-warn-fg); border:1px solid #f3dc8f; border-radius:8px; padding:10px 12px; font-size:13px; }
.hub-order .ho-fit-car { margin-bottom:36px; }
.hub-order .ho-fit-carcard { background:var(--hub-surface); border:1px solid var(--hub-border); border-radius:8px; overflow:hidden; }
.hub-order .ho-fit-car-head { display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--hub-page-bg); border-bottom:1px solid var(--hub-border); }
.hub-order .ho-fit-car.none .ho-fit-car-head { background:transparent; }
.hub-order .ho-fit-car-title { font-size:13.5px; font-weight:600; }
.hub-order .ho-fit-car-head .ho-plate, .hub-order .ho-fit-car-head .idchip { flex:none; white-space:nowrap; }
.hub-order .ho-fit-car.none .ho-fit-carcard { background:var(--ho-warn-bg); border-color:#f3dc8f; }
.hub-order .ho-fit-car-ids { margin-left:auto; display:flex; align-items:center; gap:8px; }
.hub-order .ho-fit-vin { display:flex; align-items:center; gap:8px; padding:8px 12px; border-top:1px solid var(--hub-border); flex-wrap:wrap; }
.hub-order .ho-fit-vin-input { width:220px; font-family:var(--bs-font-monospace); text-transform:uppercase; }
.hub-order .ho-fit-line { background:var(--hub-surface); border:1px solid var(--hub-border); border-radius:8px; margin-top:8px; }
.hub-order .ho-fit-line.saving { opacity:.6; pointer-events:none; }
.hub-order .ho-fit-line.active { background:var(--ho-current-bg); border-color:#9ec5fe; box-shadow:inset 3px 0 0 #0d6efd; }
.hub-order .ho-fit-row { display:grid; grid-template-columns:auto auto auto minmax(0,1fr) 230px 110px; align-items:center; gap:10px; padding:8px 12px; }
.hub-order .ho-fit-row .ok { color:#198754; }
.hub-order .ho-fit-row .bad { color:#dc3545; }
.hub-order .ho-fit-row .warn { color:#e0a800; }
.hub-order .ho-fit-row .pending { color:#0d6efd; }
.hub-order .ho-fit-vin-msg { font-size:12px; font-weight:600; }
.hub-order .ho-fit-vin-msg.ok { color:#198754; }
.hub-order .ho-fit-vin-msg.bad { color:#dc3545; }
.hub-order .ho-fit-line .js-fold .bi { transition:transform .15s; display:inline-block; transform:rotate(-90deg); }
.hub-order .ho-fit-line.open .js-fold .bi { transform:none; }
.hub-order .ho-fit-line .ho-fit-body { display:none; padding:4px 12px 12px 104px; }
.hub-order .ho-fit-row .ho-thumb { width:44px; height:44px; }
.hub-order .ho-fit-line.open .ho-fit-body { display:block; }
.hub-order .ho-fit-oe { position:relative; }
.hub-order .ho-fit-oe input { padding-right:76px; font-family:var(--bs-font-monospace); }
.hub-order .ho-fit-match { position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:11px; font-weight:600; }
.hub-order .ho-fit-match.ok { color:#198754; }
.hub-order .ho-fit-match.bad { color:#dc3545; }
.hub-order .ho-fit-verdict { justify-self:end; }
.hub-order .ho-fit-oe-table { display:grid; grid-template-columns:110px minmax(0,1fr); border:1px solid var(--hub-border); border-radius:6px; background:#fff; font-size:12px; }
.hub-order .ho-fit-oe-table .mk { padding:5px 8px; font-weight:700; font-size:11px; text-transform:uppercase; border-bottom:1px solid var(--hub-border); }
.hub-order .ho-fit-oe-table .nums { display:flex; flex-wrap:wrap; gap:2px 14px; padding:5px 8px; border-bottom:1px solid var(--hub-border); }
.hub-order .ho-fit-oe-table .nums code { color:#212529; font-size:12px; }
.hub-order .ho-fit-oe-table:not(.all-makes) .other:not(.has-hit) { display:none; }
.hub-order .ho-fit-oe-table .nums.long:not(.all) code.more:not(.hit) { display:none; }
.hub-order .ho-fit-oe-table .nums code.hit { background:var(--ho-ok-bg); color:var(--ho-ok-fg); font-weight:700; border-radius:3px; padding:0 3px; }
.hub-order .ho-fit-verdicts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.hub-order .ho-fit-vcard { display:flex; gap:8px; align-items:flex-start; border:1px solid var(--hub-border); border-radius:8px; background:#fff; padding:8px 10px; font-size:13px; cursor:pointer; margin:0; }
.hub-order .ho-fit-vcard:has(input:checked) { border-color:#0d6efd; box-shadow:0 0 0 1px #0d6efd; }
.hub-order .ho-fit-vcard.fits .fw-semibold { color:#146c43; }
.hub-order .ho-fit-vcard.doesnt_fit .fw-semibold, .hub-order .ho-fit-vcard.out_of_stock .fw-semibold { color:#b02a37; }
.hub-order .ho-fit-vcard.unclear .fw-semibold { color:#997404; }
.hub-order .ho-fit-vcard .ho-sub { display:block; }
.hub-order .ho-fit-alts { margin-top:12px; padding-top:10px; border-top:1px solid var(--hub-border); }
.hub-order .ho-fit-alt { display:grid; grid-template-columns:auto 44px minmax(0,1fr) 170px 128px auto; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--hub-border); border-radius:6px; background:#fff; margin-bottom:6px; font-size:13px; }
.hub-order .ho-fit-alt:has(input:checked) { background:#e7f0ff; border-color:#9ec5fe; }
.hub-order .ho-fit-alt.nock { grid-template-columns:44px minmax(0,1fr) 170px 128px auto; }
.hub-order .ho-fit-alt .ho-thumb { width:44px; height:44px; }
/* Price tier, 1:1 with the storefront badge (softautoparts.com), scaled to 18px */
.ho-tier { --tier:#3f9f47; display:inline-flex; align-items:stretch; flex:none; height:18px; margin-left:6px; overflow:hidden; background:#fff;
  box-shadow:0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); vertical-align:middle; }
.ho-tier-budget { --tier:#f5b301; }
.ho-line-ids .ho-tier { margin-left:0; align-self:center; }
.hub-order .ho-fit-tag .ho-tier { margin:0 6px 0 0; vertical-align:-4px; }
.ho-tier-optimal { --tier:#3f9f47; }
.ho-tier-premium { --tier:#c8372f; }
.ho-tier-icon { width:18px; display:grid; place-items:center; background:var(--tier); color:#fff; }
.ho-tier-icon svg { width:15px; height:15px; }
.ho-tier-label { display:flex; align-items:center; padding:0 6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; line-height:1; color:var(--tier); }
.hub-order .ho-fit-alt-name { display:flex; align-items:center; min-width:0; }
.hub-order .ho-fit-live { font-size:12px; min-width:0; }
.hub-order .ho-fit-alts > .d-flex { min-width:0; }
.hub-order .ho-fit-alts > .d-flex .btn { flex:none; white-space:nowrap; }
.hub-order .ho-fit-live .ho-live-row { white-space:normal; }
.hub-order .ho-fit-replaced { display:flex; align-items:center; gap:8px; padding:7px 12px 7px 104px; border-top:1px dashed var(--hub-border); background:#fafbfc; color:var(--hub-muted); font-size:12.5px; border-radius:0 0 8px 8px; }
.hub-order .ho-fit-replaced .name { text-decoration:line-through; font-size:13px; min-width:0; flex:0 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hub-order .ho-fit-replaced .ho-sub, .hub-order .ho-fit-replaced .ho-badge { flex:none; white-space:nowrap; }
.hub-order .ho-fit-line.open .ho-fit-replaced { border-radius:0; }
.hub-order .ho-fit-price .ho-margin-neg { color:#dc3545; }
.hub-order .ho-fit-pct { font-weight:400; font-size:11.5px; }
.hub-order .ho-fit-alts:not(.all) .ho-fit-alt.extra { display:none; }
.hub-order .ho-fit-alts:not(.all) .ho-fit-grp:not(:has(.ho-fit-alt:not(.extra))) { display:none; }
.hub-order .ho-fit-group { display:flex; align-items:baseline; gap:8px; margin:12px 0 5px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--hub-muted); }
.hub-order .ho-fit-group::after { content:""; flex:1; border-bottom:1px solid var(--hub-border); transform:translateY(-3px); }
.hub-order .ho-fit-group .ho-sub { text-transform:none; letter-spacing:0; font-weight:400; }
.hub-order .ho-fit-grp:first-of-type .ho-fit-group { margin-top:4px; }
.hub-order .ho-fit-price { font-size:13px; font-weight:600; }
.ho-fit-foot { display:flex; align-items:center; gap:8px; padding:10px 18px; }
.hub-order .ho-fit-req { font-size:13px; padding:3px 0; }
@media (max-width: 1199.98px) { .hub-order .ho-fit-verdicts { grid-template-columns:repeat(2,minmax(0,1fr)); } .hub-order .ho-fit-row { grid-template-columns:auto auto minmax(0,1fr) 200px; } .hub-order .ho-fit-verdict { grid-column:3 / -1; justify-self:start; } }