/*
 * Motor Trade sales-operations UI - Market, Wholesale and Warehouse content.
 *
 * Built to the approved mockups design/reference/01-market-neutral.png and
 * 02-warehouse-preview.png. Every selector is scoped under .motor-ui so nothing
 * here can leak into the existing application stylesheet. The dark navy left
 * sidebar lives in styles/motor-shell.css with lib/ui-motor-shell.js; this file
 * styles CONTENT, plus the page's own fallback top bar for the case where a
 * page is rendered with no shell around it. Inside the shell the integrator
 * passes `showTopBar: false` and the fallback bar is not emitted at all.
 *
 * One accent colour (teal), white cards on a warm near-white page, large real
 * photographs, monochrome line icons drawn with currentColor. No emoji, no
 * gradients, no second accent.
 */

.motor-ui {
  --mui-ink: #16202c;
  --mui-ink-soft: #3c4753;
  --mui-ink-muted: #6b7783;
  --mui-surface: #ffffff;
  --mui-bg: #f8f8f6;
  --mui-inset: #f3f5f7;
  --mui-line: #ebedf0;
  --mui-line-strong: #d3d9e0;

  --mui-accent: #00858f;
  --mui-accent-strong: #006e78;
  --mui-accent-soft: #e2f1f2;

  --mui-slate: #7d8b9e;
  --mui-slate-strong: #697a8d;

  --mui-green-bg: #dcf3e8;
  --mui-green-ink: #0f6b4a;
  --mui-blue-bg: #dbeffe;
  --mui-blue-ink: #0a4d87;
  --mui-grey-bg: #eef0f3;
  --mui-grey-ink: #5a6673;
  --mui-bad-ink: #a12a22;

  --mui-radius: 14px;
  --mui-radius-sm: 10px;
  --mui-gap: 22px;
  --mui-shadow: 0 1px 2px rgba(16, 26, 40, 0.05);

  box-sizing: border-box;
  color: var(--mui-ink);
  background: var(--mui-bg);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.motor-ui *,
.motor-ui *::before,
.motor-ui *::after { box-sizing: inherit; }

.motor-ui p,
.motor-ui h1,
.motor-ui h2,
.motor-ui h3,
.motor-ui h4,
.motor-ui ul,
.motor-ui ol,
.motor-ui dl { margin: 0; }

.motor-ui ul,
.motor-ui ol { list-style: none; padding: 0; }

/* --- page ----------------------------------------------------------------- */

.motor-ui.mui-page { padding: 30px 34px 40px; }

/* --- page top bar --------------------------------------------------------- */

/*
 * Only drawn when the page is rendered WITHOUT the shell. When the shell in
 * lib/ui-motor-shell.js supplies the frame the integrator passes
 * `showTopBar: false` and none of this is emitted, so a composed screen can
 * never show two bars.
 *
 * Full-bleed: the negative margins cancel the page padding above, which keeps
 * the page root element identical with the bar and without it.
 */
.motor-ui .mui-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 66px;
  margin: -30px -34px 26px;
  padding: 12px 34px;
  background: var(--mui-surface);
  border-bottom: 1px solid var(--mui-line);
}

.motor-ui .mui-topbar-firm {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mui-ink);
}

.motor-ui .mui-topstats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.motor-ui .mui-topstat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 2px 20px;
  white-space: nowrap;
  color: var(--mui-ink-soft);
}

.motor-ui .mui-topstat + .mui-topstat { border-left: 1px solid var(--mui-line); }
.motor-ui .mui-topstat:last-child { padding-right: 0; }
.motor-ui .mui-topstat .mui-icon { width: 20px; height: 20px; color: var(--mui-accent); }
.motor-ui .mui-topstat-label { font-size: 15px; color: var(--mui-ink-soft); }
.motor-ui .mui-topstat-value { font-size: 16px; font-weight: 700; color: var(--mui-ink); }

.motor-ui .mui-page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

/* Emitted by renderMarketPage and previously unstyled. It holds the title and
   the subtitle, and must be allowed to shrink so a long title wraps inside the
   page rather than widening it. */
.motor-ui .mui-page-head-text { min-width: 0; flex: 1 1 320px; }

.motor-ui .mui-page-title {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.motor-ui .mui-page-sub {
  margin-top: 6px;
  color: var(--mui-ink-muted);
  font-size: 18px;
}

.motor-ui .mui-page-note {
  margin-top: 18px;
  color: var(--mui-ink-muted);
  font-size: 13px;
  text-align: right;
}

.motor-ui .mui-eyebrow {
  color: var(--mui-ink-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- small pieces --------------------------------------------------------- */

.motor-ui .mui-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--mui-ink-muted);
}

.motor-ui .mui-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--mui-slate);
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.motor-ui .mui-avatar-sm { width: 32px; height: 32px; font-size: 12px; }

.motor-ui .mui-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.motor-ui .mui-identity > div { min-width: 0; }
.motor-ui .mui-identity-name { font-weight: 700; font-size: 15px; }
.motor-ui .mui-identity-meta { color: var(--mui-ink-muted); font-size: 14px; line-height: 1.35; }

/* The compact identity the mockup puts top-right of the negotiation panel:
   "avatar circle plus three small lines". It was emitted with no rule at all,
   so at 390px the firm name ran past the card edge and was cut off. */
.motor-ui .mui-identity-sm { gap: 10px; }
.motor-ui .mui-identity-sm .mui-avatar { width: 38px; height: 38px; font-size: 15px; }
.motor-ui .mui-identity-sm .mui-identity-name,
.motor-ui .mui-identity-sm .mui-identity-meta { overflow-wrap: anywhere; }
.motor-ui .mui-identity-sm .mui-identity-meta { font-size: 13px; }

.motor-ui .mui-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.motor-ui .mui-card {
  background: var(--mui-surface);
  border: 1px solid var(--mui-line);
  border-radius: var(--mui-radius);
  box-shadow: var(--mui-shadow);
}

.motor-ui .mui-card-body { padding: 14px 20px 20px; }

.motor-ui .mui-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

.motor-ui .mui-card-title { font-size: 22px; font-weight: 700; }

.motor-ui .mui-photo-wrap {
  overflow: hidden;
  border-radius: var(--mui-radius-sm);
  background: var(--mui-inset);
}

.motor-ui .mui-photo {
  display: block;
  width: 100%;
  /* The catalogue photographs are 4:3 (800x600). A 16:10 box with cover
     cropped the top and bottom of every van and every tall vehicle; the whole
     vehicle must be visible, so the box is the photograph's own ratio and the
     fit is contain. Any letterbox is white, like the photographs' background. */
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
}

.motor-ui .mui-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--mui-line-strong);
  color: var(--mui-ink-muted);
}

.motor-ui .mui-photo-empty .mui-icon { width: 44px; height: 44px; }

/* --- text tones ----------------------------------------------------------- */

.motor-ui .mui-note,
.motor-ui .mui-helper {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--mui-ink-muted);
  font-size: 15px;
}

.motor-ui .mui-helper { margin-top: 10px; justify-content: center; }

.motor-ui .mui-done {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--mui-green-ink);
  font-size: 15px;
}

.motor-ui .mui-done .mui-icon { color: var(--mui-green-ink); }

.motor-ui .mui-waiting {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--mui-ink-soft);
}

.motor-ui .mui-stock-line {
  margin-top: 12px;
  font-size: 16px;
  color: var(--mui-ink-soft);
}

.motor-ui .mui-inline-info {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: var(--mui-radius);
  background: #edf1f6;
  color: var(--mui-ink-soft);
  font-size: 16px;
}

.motor-ui .mui-inline-info .mui-icon { width: 22px; height: 22px; color: var(--mui-slate); }

.motor-ui .mui-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--mui-grey-bg);
  color: var(--mui-grey-ink);
}

.motor-ui .mui-status-live { background: var(--mui-accent-soft); color: var(--mui-accent-strong); }
.motor-ui .mui-status-good,
.motor-ui .mui-status-done { background: var(--mui-green-bg); color: var(--mui-green-ink); }
.motor-ui .mui-status-wait { background: var(--mui-blue-bg); color: var(--mui-blue-ink); }

.motor-ui .mui-pill {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
}

.motor-ui .mui-pill-green { background: var(--mui-green-bg); color: var(--mui-green-ink); }
.motor-ui .mui-pill-blue { background: var(--mui-blue-bg); color: var(--mui-blue-ink); }
.motor-ui .mui-pill-grey { background: var(--mui-grey-bg); color: var(--mui-grey-ink); }

.motor-ui .mui-pill-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.motor-ui .mui-pill-note { color: var(--mui-ink-muted); font-size: 12px; align-self: center; }

.motor-ui .mui-turn {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  font-size: 14px;
  color: var(--mui-ink-muted);
}

.motor-ui .mui-turn .mui-icon { width: 17px; height: 17px; }
.motor-ui .mui-turn-who { font-weight: 600; color: var(--mui-ink-soft); }
.motor-ui .mui-turn-yours .mui-turn-who { color: var(--mui-accent-strong); }

.motor-ui .mui-turn-rev {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--mui-inset);
  font-size: 13px;
}

/* --- buttons -------------------------------------------------------------- */

.motor-ui .mui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--mui-radius-sm);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.motor-ui .mui-btn-block { width: 100%; }

.motor-ui .mui-btn-primary { background: var(--mui-accent); color: #ffffff; }
.motor-ui .mui-btn-primary:hover:not([disabled]) { background: var(--mui-accent-strong); }

.motor-ui .mui-btn-outline {
  background: var(--mui-surface);
  border-color: var(--mui-accent);
  color: var(--mui-accent);
}

.motor-ui .mui-btn-outline:hover:not([disabled]) { background: var(--mui-accent-soft); }

.motor-ui .mui-btn-secondary { background: var(--mui-slate); color: #ffffff; }
.motor-ui .mui-btn-secondary:hover:not([disabled]) { background: var(--mui-slate-strong); }

.motor-ui .mui-btn-quiet {
  background: var(--mui-grey-bg);
  border-color: var(--mui-grey-bg);
  color: var(--mui-grey-ink);
}

.motor-ui .mui-btn-quiet:hover:not([disabled]) { background: #e5e8ec; }

.motor-ui .mui-btn-icon {
  width: 48px;
  min-width: 48px;
  padding: 0;
  background: transparent;
  color: var(--mui-slate);
}

.motor-ui .mui-btn-icon .mui-icon { width: 24px; height: 24px; color: inherit; }
.motor-ui .mui-btn-icon:hover:not([disabled]) { background: var(--mui-accent-soft); color: var(--mui-accent); }

/* A disabled control is still a sentence the student has to read - "Deliver
   after purchase", "Set price" - so it is muted, not faint. #9aa4af on
   --mui-grey-bg measured 2.22:1 in Chromium, under the 3:1 floor; #6f7b88 is
   3.78:1 and still reads as clearly off. */
.motor-ui .mui-btn[disabled] {
  cursor: not-allowed;
  background: var(--mui-grey-bg);
  border-color: var(--mui-grey-bg);
  color: #6f7b88;
}

.motor-ui .mui-btn[disabled] .mui-icon { color: #6f7b88; }

.motor-ui .mui-btn:focus-visible,
.motor-ui .mui-input:focus-visible,
.motor-ui .mui-chip-btn:focus-visible {
  outline: 2px solid var(--mui-accent);
  outline-offset: 2px;
}

.motor-ui .mui-actions { margin-top: 14px; }

.motor-ui .mui-actions-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* --- fields --------------------------------------------------------------- */

.motor-ui .mui-field { display: block; }
.motor-ui .mui-field-grow { flex: 1 1 auto; }

.motor-ui .mui-field-label {
  display: block;
  margin-bottom: 8px;
  color: var(--mui-ink-muted);
  font-size: 15px;
  font-weight: 500;
}

.motor-ui .mui-field-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--mui-line-strong);
  border-radius: var(--mui-radius-sm);
  background: var(--mui-surface);
  overflow: hidden;
}

.motor-ui .mui-field-prefix {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--mui-inset);
  border-right: 1px solid var(--mui-line-strong);
  color: var(--mui-ink-soft);
  font-weight: 600;
}

.motor-ui .mui-input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--mui-line-strong);
  border-radius: var(--mui-radius-sm);
  font: inherit;
  font-size: 16px;
  color: var(--mui-ink);
  background: var(--mui-surface);
}

.motor-ui .mui-field-wrap .mui-input { border: 0; border-radius: 0; }

.motor-ui .mui-price-row { display: flex; gap: 12px; align-items: flex-end; }
.motor-ui .mui-price-row .mui-field { flex: 1 1 auto; }
.motor-ui .mui-price-row .mui-btn { flex: 0 0 auto; }

/* --- insets --------------------------------------------------------------- */

.motor-ui .mui-inset {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: var(--mui-radius-sm);
  background: var(--mui-inset);
}

.motor-ui .mui-inset-label {
  color: var(--mui-ink-muted);
  font-size: 16px;
  font-weight: 500;
}

.motor-ui .mui-inset-figure {
  margin-top: 4px;
  color: var(--mui-accent);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.motor-ui .mui-inset-figure-plain { color: var(--mui-ink); }
.motor-ui .mui-inset-figure-empty { color: var(--mui-ink-muted); }
.motor-ui .mui-inset-suffix { color: var(--mui-ink-muted); font-size: 17px; font-weight: 500; }
.motor-ui .mui-inset-sub { margin-top: 2px; color: var(--mui-ink-muted); font-size: 14px; }

.motor-ui .mui-inset-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.motor-ui .mui-inset-split .mui-inset-col + .mui-inset-col {
  padding-left: 20px;
  border-left: 1px solid var(--mui-line-strong);
}

.motor-ui .mui-inset-split .mui-inset-figure { font-size: 28px; }

.motor-ui .mui-inset-counter .mui-field-label { color: var(--mui-ink-muted); }
.motor-ui .mui-inset-counter .mui-field-wrap { background: var(--mui-surface); }

/* --- fact and detail lists ------------------------------------------------ */

.motor-ui .mui-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--mui-line);
}

.motor-ui .mui-fact dt { color: var(--mui-ink-muted); font-size: 14px; font-weight: 500; }
.motor-ui .mui-fact dd { margin: 2px 0 0; font-size: 17px; font-weight: 700; }
.motor-ui .mui-fact-sub { display: block; color: var(--mui-ink-muted); font-size: 13px; font-weight: 400; }
.motor-ui .mui-fact-accent { color: var(--mui-accent); }
.motor-ui .mui-fact-bad dd,
.motor-ui .mui-fact-bad .mui-fact-accent { color: var(--mui-bad-ink); }

.motor-ui .mui-detail-list { margin-top: 14px; display: grid; gap: 12px; }

.motor-ui .mui-detail {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 17px;
  color: var(--mui-ink-soft);
}

.motor-ui .mui-detail .mui-icon { width: 23px; height: 23px; color: var(--mui-ink); }
.motor-ui .mui-detail-label { color: var(--mui-ink-soft); }
.motor-ui .mui-detail-value { color: var(--mui-accent); font-weight: 700; }
.motor-ui .mui-detail-sub { margin-left: 8px; color: var(--mui-ink-muted); font-size: 14px; font-weight: 400; }

/* --- market --------------------------------------------------------------- */

.motor-ui .mui-deal-list { display: grid; gap: var(--mui-gap); }

.motor-ui .mui-market-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  gap: var(--mui-gap);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.motor-ui .mui-panel {
  display: flex;
  flex-direction: column;
  padding: 20px 24px 22px;
  background: var(--mui-surface);
  border: 1px solid var(--mui-line);
  border-radius: var(--mui-radius);
  box-shadow: var(--mui-shadow);
}

.motor-ui .mui-panel-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

/* Without this a flex child refuses to shrink below its content width, which is
   what pushed the counterparty's firm name past the right edge of the card. */
.motor-ui .mui-panel-head > * { min-width: 0; }

.motor-ui .mui-panel-head-stacked { flex-direction: column; gap: 0; }

.motor-ui .mui-panel-title {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 25px;
  font-weight: 700;
}

.motor-ui .mui-panel-title .mui-icon { width: 30px; height: 30px; color: var(--mui-ink); }

.motor-ui .mui-panel-sub {
  margin-top: 4px;
  color: var(--mui-ink-muted);
  font-size: 17px;
}

.motor-ui .mui-panel-head-stacked .mui-panel-sub { padding-left: 44px; }
.motor-ui .mui-panel-deal .mui-panel-sub { padding-left: 44px; }

.motor-ui .mui-panel-customer .mui-photo-wrap { margin-top: 14px; }

.motor-ui .mui-vehicle-line { margin-top: 14px; font-size: 25px; font-weight: 700; }
.motor-ui .mui-customer-name { margin-top: 2px; color: var(--mui-ink-muted); font-size: 15px; }

.motor-ui .mui-delivery { margin-top: auto; padding-top: 14px; }

/* --- deal chat ------------------------------------------------------------ */

.motor-ui .mui-chat { margin-top: 14px; }

.motor-ui .mui-chat-title {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--mui-ink-soft);
}

.motor-ui .mui-chat-box {
  padding: 12px;
  border: 1px solid var(--mui-line);
  border-radius: var(--mui-radius);
  background: var(--mui-surface);
}

.motor-ui .mui-chat-list { display: grid; gap: 14px; }

.motor-ui .mui-msg { display: flex; gap: 10px; align-items: flex-end; }
.motor-ui .mui-msg-mine { justify-content: flex-end; }
.motor-ui .mui-msg-empty { justify-content: flex-start; }

.motor-ui .mui-bubble-wrap { max-width: 78%; }
.motor-ui .mui-msg-mine .mui-bubble-wrap { text-align: right; }

.motor-ui .mui-bubble-meta {
  margin-bottom: 4px;
  color: var(--mui-ink-soft);
  font-size: 13px;
  font-weight: 600;
}

.motor-ui .mui-bubble-time { margin-left: 6px; color: var(--mui-ink-muted); font-weight: 400; }

.motor-ui .mui-bubble {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--mui-inset);
  color: var(--mui-ink);
  font-size: 16px;
  text-align: left;
}

.motor-ui .mui-msg-mine .mui-bubble { background: var(--mui-accent-soft); }

.motor-ui .mui-chat-composer { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.motor-ui .mui-chat-composer .mui-field { margin: 0; }

/* --- warehouse ------------------------------------------------------------ */

.motor-ui .mui-stat-card {
  display: flex;
  align-items: center;
  margin-bottom: var(--mui-gap);
  padding: 12px 10px;
}

.motor-ui .mui-stat {
  flex: 1 1 0;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

.motor-ui .mui-stat .mui-icon { width: 24px; height: 24px; color: var(--mui-accent); }
.motor-ui .mui-stat-value { color: var(--mui-accent); font-size: 28px; font-weight: 700; line-height: 1; }
.motor-ui .mui-stat-label { color: var(--mui-ink-soft); font-size: 13px; }
.motor-ui .mui-stat-rule { width: 1px; background: var(--mui-line); }

/* auto-FIT is deliberate and was re-measured before being left alone: with one
   batch on the page auto-fill puts the card in a 301px track, the four facts
   stack two-by-two and the card grows from 628px to 812px. Narrowing the track
   makes the page LONGER, so the track stays as it is and the height comes off
   the photograph instead (see the cap below). */
.motor-ui .mui-unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--mui-gap);
}

.motor-ui .mui-warehouse-unit,
.motor-ui .mui-wholesale-row { display: flex; flex-direction: column; }

.motor-ui .mui-warehouse-unit .mui-card-body,
.motor-ui .mui-wholesale-row .mui-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }

.motor-ui .mui-warehouse-unit .mui-actions,
.motor-ui .mui-wholesale-row .mui-actions { margin-top: auto; padding-top: 16px; }

.motor-ui .mui-card-head-stacked { flex-direction: column; align-items: stretch; gap: 6px; }

.motor-ui .mui-warehouse-unit .mui-photo-wrap,
.motor-ui .mui-wholesale-row .mui-photo-wrap { margin: 14px 14px 0; }

/* The grid collapses empty tracks, so a single batch or a single unit takes
   the whole row. Cap the photo there, or one card left on its own turns into
   a full-width poster with the facts pushed below the fold.
   240px was still a poster. round1-ops-wholesale.png from the 24-browser run is
   an Operations student's whole screen given over to one car photograph, with
   the page heading and the space figures scrolled off the top and the only
   button on the page below the fold. Measured in Chromium at a 1062px window,
   240 -> 180 takes 60px off every vehicle card in both pages and off nothing
   else: no fact, no price and no control moves or is cropped away, and the
   photograph is still plainly a car at every column width the grid produces
   (301px, 462px and full width). */
/* The cap is a WIDTH, not a height. A height cap on a 4:3 box squashed the
   box to 405x180 and letterboxed the vehicle between two white margins, small
   in a wide frame. A width cap keeps the box the photograph's own 4:3 (at most
   320x240), centred in the card, so the whole vehicle fills it. The poster
   problem above stays solved: 240px is the tallest a photo can now be. */
.motor-ui .mui-warehouse-unit .mui-photo,
.motor-ui .mui-wholesale-row .mui-photo { max-height: none; width: min(100%, 320px); margin: 0 auto; }
.motor-ui .mui-warehouse-unit .mui-photo-wrap,
.motor-ui .mui-wholesale-row .mui-photo-wrap { background: #fff; }

.motor-ui .mui-warehouse-unit .mui-card-body,
.motor-ui .mui-wholesale-row .mui-card-body { padding: 16px 20px 22px; }

.motor-ui .mui-capacity-strip { margin-top: var(--mui-gap); }

/* --- why a control is off -------------------------------------------------
   A control that is missing or greyed has to say why ON the card. This is the
   same pale strip the capacity and cash notes use, sized for the inside of a
   vehicle card and aligned to the top so a two-sentence reason does not push
   its icon to the middle of the paragraph. */

.motor-ui .mui-action-reason {
  align-items: flex-start;
  margin-top: 12px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.45;
}

.motor-ui .mui-action-reason .mui-icon { margin-top: 2px; flex: 0 0 auto; }

.motor-ui .mui-fallback-blocked { justify-content: flex-start; text-align: left; }

/* --- wholesale ------------------------------------------------------------ */

.motor-ui .mui-batch-row { display: flex; gap: 14px; align-items: center; margin-top: 16px; }
.motor-ui .mui-batch-row .mui-field-label { margin-bottom: 0; }
.motor-ui .mui-batch-choice { display: flex; gap: 8px; }

.motor-ui .mui-chip-btn {
  min-width: 42px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--mui-line-strong);
  border-radius: var(--mui-radius-sm);
  background: var(--mui-surface);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--mui-ink-soft);
  cursor: pointer;
}

.motor-ui .mui-chip-btn.is-selected {
  border-color: var(--mui-accent);
  background: var(--mui-accent-soft);
  color: var(--mui-accent-strong);
}

/* --- wholesale catalogue rows (Jäänajo 25.9.2026) ----------------------------
   One vehicle per full-width row: the photograph on the left, the vehicle and
   what one is worth in the middle, and the quantity ladder with the Buy under
   it on the right. The old vertical card put the price facts and the Buy below
   the photograph - under the fold at laptop height - and the quantity control
   was an unstyled select. The ladder shows every choice's own three figures
   (unit price, quantity discount, total), so the comparison is on screen
   without opening anything. Narrow screens stack the same three blocks. */
.motor-ui .mui-wholesale-page .mui-unit-grid,
.motor-ui.mui-wholesale-page .mui-unit-grid { grid-template-columns: 1fr; }

.motor-ui .mui-wholesale-row--catalogue { flex-direction: row; align-items: stretch; }

.motor-ui .mui-wholesale-row--catalogue .mui-photo-wrap {
  flex: 0 0 280px;
  min-width: 240px;
  margin: 14px 0 14px 14px;
  align-self: flex-start;
}

/* The width cap from the vertical card stays for the batch and warehouse
   cards; the catalogue row's photograph fills its own column instead. */
.motor-ui .mui-wholesale-row--catalogue .mui-photo { width: 100%; margin: 0; }

/* The vehicle's worth rides under its photograph in the wide left column -
   carrying the same facts in the squeezed middle column wrapped each into
   three lines and pushed the Buy under the fold at laptop height. */
.motor-ui .mui-wholesale-row--catalogue .mui-photo-wrap .mui-facts {
  margin-top: 12px;
}

.motor-ui .mui-wholesale-row--catalogue .mui-card-body {
  flex: 1 1 220px;
  min-width: 0;
  padding: 16px 14px;
  align-self: center;
}

.motor-ui .mui-buy-col {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-left: 1px solid var(--mui-line);
}

.motor-ui .mui-buy-col .mui-field-label { margin-bottom: 2px; }

.motor-ui .mui-wholesale-row--catalogue .mui-actions { margin-top: 6px; padding-top: 0; }

.motor-ui .mui-field-sub {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--mui-ink-muted);
  letter-spacing: 0;
  text-transform: none;
}

.motor-ui .mui-qty-ladder {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.motor-ui .mui-qty-choice {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 5px 10px;
  border: 1px solid var(--mui-line-strong);
  border-radius: var(--mui-radius-sm);
  background: var(--mui-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.motor-ui .mui-qty-choice:hover { border-color: var(--mui-accent-line, var(--mui-accent)); }

.motor-ui .mui-qty-choice:focus-visible {
  outline: 2px solid var(--mui-accent-strong);
  outline-offset: 2px;
}

.motor-ui .mui-qty-choice.is-selected {
  border-color: var(--mui-accent);
  background: var(--mui-accent-soft);
}

.motor-ui .mui-qty-choice__qty {
  min-width: 18px;
  font-size: 17px;
  font-weight: 700;
  color: var(--mui-ink);
}

.motor-ui .mui-qty-choice__unit {
  flex: 1 1 auto;
  font-size: 13.5px;
  color: var(--mui-ink-soft);
  font-variant-numeric: tabular-nums;
}

.motor-ui .mui-qty-choice__disc { color: var(--mui-accent-strong); font-weight: 700; }

.motor-ui .mui-qty-choice__total {
  font-size: 15px;
  font-weight: 700;
  color: var(--mui-ink);
  font-variant-numeric: tabular-nums;
}

/* Stack the row's three blocks when the content column gets narrow (tablets);
   the three named laptop widths (1280/1366/1440) all stay side by side. */
@media (max-width: 1230px) {
  .motor-ui .mui-wholesale-row--catalogue { flex-direction: column; }
  .motor-ui .mui-wholesale-row--catalogue .mui-photo-wrap { flex: none; min-width: 0; margin: 14px 14px 0; }
  .motor-ui .mui-wholesale-row--catalogue .mui-photo { width: min(100%, 320px); margin: 0 auto; }
  .motor-ui .mui-buy-col { flex: none; border-left: 0; border-top: 1px solid var(--mui-line); }
}

/* A 1280-wide laptop keeps the side-by-side row but the ladder folds to two
   columns: the five choices stay visible with their figures and the first
   row's Buy stays on screen at 720px height. */
@media (min-width: 1231px) and (max-width: 1340px) {
  .motor-ui .mui-buy-col .mui-qty-ladder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
  }
  .motor-ui .mui-buy-col .mui-qty-choice__qty { font-size: 15px; }
  .motor-ui .mui-buy-col .mui-qty-choice__unit { font-size: 12px; }
  .motor-ui .mui-buy-col .mui-qty-choice__total { font-size: 13px; }
}

/* --- empty state ---------------------------------------------------------- */

.motor-ui .mui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 20px;
  border: 1px dashed var(--mui-line-strong);
  border-radius: var(--mui-radius);
  background: var(--mui-surface);
  color: var(--mui-ink-muted);
  text-align: center;
}

.motor-ui .mui-empty .mui-icon { width: 30px; height: 30px; }

/* --- grouped request lists -------------------------------------------------
   The old sheet split its cards into "Incoming request", "Outgoing sourcing
   request" and "Customer enquiries" under small group heads. The Market page
   keeps those heads so a student can still tell whose move each card is. */

.motor-ui .mui-group + .mui-group { margin-top: 30px; }

.motor-ui .mui-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mui-line);
  font-size: 15px;
  font-weight: 700;
}

.motor-ui .mui-group-note {
  color: var(--mui-ink-muted);
  font-size: 14px;
  font-weight: 400;
}

/* --- the vehicle, repeated on the deal side -------------------------------
   The same line the customer panel prints, from the same view-model values,
   so a quote can never appear to be for a different vehicle. */

.motor-ui .mui-deal-vehicle {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
}

.motor-ui .mui-deal-vehicle .mui-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--mui-slate);
}

/* --- Operations Preparation page ----------------------------------------- */

.motor-ui .mui-prep-task {
  margin-bottom: var(--mui-gap);
  padding: 18px 20px;
}

.motor-ui .mui-prep-task-body {
  margin-top: 4px;
  font-size: 17px;
  font-weight: 700;
}

/* --- customer facts and our own stock ------------------------------------ */

/* "Walk-in customer on your forecourt" and the like: what kind of enquiry
   this is, said once, above the photo. */
.motor-ui .mui-kind {
  margin-top: 12px;
  color: var(--mui-ink-muted);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.motor-ui .mui-customer-facts,
.motor-ui .mui-our-stock { margin-top: 14px; }

/* --- payment timing ------------------------------------------------------- */

.motor-ui .mui-payment {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  color: var(--mui-ink-soft);
  font-size: 15px;
}

.motor-ui .mui-payment .mui-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--mui-slate);
}

/* Finance has not chosen the timing yet: the line has to be noticed, so it
   gets the inset surface rather than a second accent colour. */
.motor-ui .mui-payment-wait {
  padding: 12px 14px;
  border-radius: var(--mui-radius-sm);
  background: var(--mui-inset);
}

/* --- auction fallback ----------------------------------------------------- */

.motor-ui .mui-fallback {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--mui-line);
}

/* --- warehouse space on the buy card --------------------------------------
   The batch does not fit. The card says how much space it needs, how much is
   free and who can buy more room - inline, on the card, with the buy button
   simply inert. Nothing is charged and nothing covers the screen. */

.motor-ui .mui-space-block { align-items: flex-start; }

.motor-ui .mui-space-block .mui-icon { margin-top: 2px; }

.motor-ui .mui-space-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.motor-ui .mui-space-line { font-size: 15px; }

.motor-ui .mui-space-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.motor-ui .mui-space-figure {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.motor-ui .mui-space-figure span {
  color: var(--mui-ink-muted);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.motor-ui .mui-space-figure strong {
  color: var(--mui-ink);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

/* --- seasonal stock (a section of the Wholesale page) --------------------- */

.motor-ui .mui-seasonal-group { margin-top: 34px; }

.motor-ui .mui-seasonal-row.is-locked { opacity: 0.72; }

.motor-ui .mui-lock-pill {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  padding: 7px 14px;
  border: 1px solid var(--mui-line-strong);
  border-radius: 999px;
  color: var(--mui-ink-muted);
  font-size: 14px;
  font-weight: 600;
}

/* --- retail prices (a section of the Market page) --------------------------
   Sales locks one price per vehicle for the round. This is the control the old
   "Pricing & customers" sheet carried, with last round's market facts above
   it, so neither the decision nor the evidence behind it is lost. */

.motor-ui .mui-pricing-group { margin-top: 34px; }

.motor-ui .mui-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  margin-bottom: 18px;
  padding: 16px 20px;
}

.motor-ui .mui-summary-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.motor-ui .mui-summary-label {
  color: var(--mui-ink-muted);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.motor-ui .mui-summary-value {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.motor-ui .mui-price-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
}

.motor-ui .mui-price-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.motor-ui .mui-price-thumb {
  flex: 0 0 auto;
  width: 84px;
  overflow: hidden;
  border-radius: var(--mui-radius-sm);
}

.motor-ui .mui-price-thumb .mui-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.motor-ui .mui-price-thumb .mui-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mui-inset);
}

.motor-ui .mui-price-held,
.motor-ui .mui-price-reference,
.motor-ui .mui-price-rivals {
  margin-top: 4px;
  color: var(--mui-ink-muted);
  font-size: 14px;
}

.motor-ui .mui-price-outcome {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--mui-radius-sm);
  background: var(--mui-inset);
  color: var(--mui-ink-soft);
  font-size: 14px;
}

.motor-ui .mui-price-outcome .mui-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--mui-slate);
}

/* A price that is fixed for the round is a statement, not a disabled input. */
.motor-ui .mui-price-locked {
  padding: 11px 14px;
  border: 1px solid var(--mui-line-strong);
  border-radius: var(--mui-radius-sm);
  color: var(--mui-ink-soft);
  font-size: 15px;
  font-weight: 600;
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 1100px) {
  .motor-ui .mui-market-card { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .motor-ui.mui-page { padding: 22px 16px 32px; }
  .motor-ui .mui-page-title { font-size: 28px; }
  .motor-ui .mui-page-sub { font-size: 16px; }
  .motor-ui .mui-panel { padding: 18px 18px 20px; }
  .motor-ui .mui-actions-row { grid-template-columns: 1fr; }
  .motor-ui .mui-inset-split { grid-template-columns: 1fr; gap: 0; }
  .motor-ui .mui-inset-split .mui-inset-col + .mui-inset-col {
    margin-top: 14px;
    padding-left: 0;
    padding-top: 14px;
    border-left: 0;
    border-top: 1px solid var(--mui-line-strong);
  }
  .motor-ui .mui-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin: -22px -16px 20px;
    padding: 12px 16px;
  }
  .motor-ui .mui-topbar-firm { font-size: 19px; }
  .motor-ui .mui-topstats { margin-left: -12px; }
  .motor-ui .mui-topstat { padding: 2px 12px; }
  .motor-ui .mui-stat-card { flex-direction: column; gap: 18px; padding: 20px; }
  .motor-ui .mui-stat-rule { width: auto; height: 1px; }
  .motor-ui .mui-price-row { flex-direction: column; align-items: stretch; }
  .motor-ui .mui-unit-grid { grid-template-columns: 1fr; }
  .motor-ui .mui-vehicle-line { font-size: 22px; }
  .motor-ui .mui-panel-title { font-size: 21px; }
  /* At 390px the heading and the counterparty block cannot share a row: the
     heading squeezed to four words-per-line and the firm name was cut off at
     the card edge. Stack them; the heading keeps the full card width. */
  .motor-ui .mui-panel-deal .mui-panel-head { flex-direction: column; gap: 12px; }
  .motor-ui .mui-panel-deal .mui-panel-head > * { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .motor-ui .mui-btn { transition: none; }
}

/* ── The one open wholesale batch ──────────────────────────────────────────
   There is exactly one offer at a time, and as a row in the forecourt list it
   read as stock the firm already owned. It is the only thing on this sheet a
   pupil can spend money on, so it is a card: the vehicle's own photograph at a
   size you can judge a car from, and beside it the figures a buyer has to put
   together - what the batch costs, what it is worth at retail, how many spaces
   it needs and how many the yard has free.

   Two columns on a laptop, one on an iPad. The 1200px line puts 1366 and 1440
   in two columns and 1024 and 1180 in one, which is where the tablet sits. */
.motor-batch-card {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 18px;
  border: 1px solid var(--border, #dfe6ec);
  border-radius: 14px;
  background: var(--card, #fff);
}
.motor-batch-card__media {
  border-radius: 10px;
  overflow: hidden;
  background: #eef1f4;
  aspect-ratio: 4 / 3;
}
/* contain, never cover: a cropped car is a different car. */
.motor-batch-card__photo,
.motor-batch-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.motor-batch-card__body { min-width: 0; }
.motor-batch-card__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted2, #7a8590);
}
.motor-batch-card__name {
  margin: 6px 0 14px;
  font-size: 22px;
  line-height: 1.2;
}
.motor-batch-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0 0 16px;
}
.motor-batch-card__facts > div { min-width: 0; }
.motor-batch-card__facts dt {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted2, #7a8590);
}
.motor-batch-card__facts dd {
  margin: 3px 0 0;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* The yard cannot hold this batch: stated, never hidden. The Buy control is
   left exactly as it was - whether the purchase is allowed is the server's
   answer, not this stylesheet's. */
.motor-batch-card__facts dd.is-short { color: #b8471a; }
.motor-batch-card__buy {
  min-height: 46px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 800;
}
.motor-batch-card__wait {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--muted2, #7a8590);
}
.motor-batch-card.is-waiting { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1200px) {
  .motor-batch-card { grid-template-columns: minmax(0, 1fr); }
  .motor-batch-card__media { max-width: 420px; }
}
@media (max-width: 720px) {
  .motor-batch-card__facts { grid-template-columns: minmax(0, 1fr); }
  .motor-batch-card__name { font-size: 19px; }
}

/* --- wholesale: Solo-hierarchy list (25.9.2026) ---------------------------
   One calm row per vehicle: photograph, name, unit price, Select. Only the
   selected row opens with its stepper and figures; the page carries ONE Buy
   bar under the list. */
.motor-ui .mui-ws-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
}

.motor-ui .mui-ws-row--open {
  border-color: var(--mui-accent);
  box-shadow: 0 0 0 1px var(--mui-accent);
}

.motor-ui .mui-ws-row__img {
  flex: 0 0 70px;
  align-self: center;
}
.motor-ui .mui-ws-row__img .mui-photo { width: 100%; margin: 0; border-radius: 10px; display: block; }

.motor-ui .mui-ws-row__main { flex: 1 1 auto; min-width: 0; }
.motor-ui .mui-ws-row__name { font-size: 16px; font-weight: 700; color: var(--mui-ink); }
.motor-ui .mui-ws-row__meta { margin-top: 2px; font-size: 14px; color: var(--mui-ink-soft); font-variant-numeric: tabular-nums; }
.motor-ui .mui-ws-disc { color: var(--mui-accent-strong); font-weight: 700; }
/* A model a customer of the firm is waiting for (30.9.2026). */
.motor-ui .mui-ws-wanted { color: var(--mui-accent-strong); font-weight: 700; }

.motor-ui .mui-ws-select {
  flex: 0 0 auto;
  padding: 9px 22px;
  border: 1px solid var(--mui-accent-line, var(--mui-accent));
  border-radius: 9px;
  background: var(--mui-surface);
  color: var(--mui-accent-strong);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.motor-ui .mui-ws-select:hover { background: var(--mui-accent-soft); }

.motor-ui .mui-ws-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.motor-ui .mui-ws-step {
  width: 34px;
  height: 34px;
  border: 1px solid var(--mui-line-strong);
  border-radius: 10px;
  background: var(--mui-surface);
  color: var(--mui-ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.motor-ui .mui-ws-step:hover:not([disabled]) { border-color: var(--mui-accent); }
.motor-ui .mui-ws-step[disabled] { opacity: 0.35; cursor: default; }
.motor-ui .mui-ws-qty {
  min-width: 30px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--mui-ink);
  font-variant-numeric: tabular-nums;
}

.motor-ui .mui-ws-row__total {
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.motor-ui .mui-ws-row__total strong { display: block; font-size: 19px; color: var(--mui-ink); }
.motor-ui .mui-ws-row__total span { font-size: 13px; color: var(--mui-ink-soft); }

/* The one Buy bar, directly under the page head so the main action is on
   screen at laptop height whether or not the list scrolls below it. */
.motor-ui .mui-buy-bar {
  margin: 4px 0 10px;
  padding: 4px 0 2px;
  background: var(--mui-page-bg, var(--mui-bg, #f3f6f8));
}
.motor-ui .mui-buy-bar__btn {
  width: min(420px, 100%);
  padding: 14px 22px;
  font-size: 17px;
  font-weight: 700;
}
.motor-ui .mui-buy-bar__after {
  margin: 6px 2px 0;
  font-size: 14px;
  color: var(--mui-ink-soft);
  font-variant-numeric: tabular-nums;
}
.motor-ui .mui-buy-bar__reason {
  margin: 6px 2px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--mui-bad-ink, #8a3a1f);
}

@media (max-width: 700px) {
  .motor-ui .mui-ws-row { flex-wrap: wrap; }
  .motor-ui .mui-ws-row__total { text-align: left; flex: 1 1 100%; }
}

.motor-ui.mui-wholesale-page { padding: 10px 14px 0; }
.motor-ui.mui-wholesale-page .mui-page-head { margin-bottom: 8px; }
.motor-ui.mui-wholesale-page .mui-page-head .mui-page-title { margin: 0 0 4px; }
.motor-ui .mui-wholesale-page .mui-unit-grid { gap: 8px; }

.motor-ui .mui-wholesale-page .motor-stock-summary__head { margin-bottom: 10px; }

/* --- Do now landing view (25.9.2026) --------------------------------------
   ONE active task: the deal panel alone, no order list, no stock summary. */
#panel-motor-now .motor-trade__col--orders { display: none; }
#panel-motor-now .motor-trade__columns { grid-template-columns: minmax(0, 1fr); }
#panel-motor-now .motor-now-head h1 { margin: 0 0 4px; font-size: 24px; color: var(--mui-ink); }
#panel-motor-now .motor-now-head p { margin: 0 0 14px; font-size: 14px; color: var(--mui-ink-soft); }
#panel-motor-now .motor-now-empty { padding: 18px 4px; max-width: 640px; }
#panel-motor-now .motor-now-empty h1 { margin: 0 0 8px; font-size: 24px; color: var(--mui-ink); }
#panel-motor-now .motor-now-empty p { font-size: 15px; color: var(--mui-ink-soft); line-height: 1.45; }
#panel-motor-now .motor-now-empty__hint { margin-top: 10px; font-size: 13px; }
/* Operations' seasonal reminder: above the task, never in its place. */
#panel-motor-now .motor-now-note {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  max-width: 720px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid var(--mui-line);
  border-radius: 12px;
  background: var(--mui-surface);
}
#panel-motor-now .motor-now-note p { margin: 0; font-size: 14px; color: var(--mui-ink); }
/* The button keeps its one short line; the sentence beside it wraps instead (owner 7.10.2026). */
#panel-motor-now .motor-now-note .btn-buy { flex: none; white-space: nowrap; }
/* The customer-sale slot beside a deal: no box until a customer can be served. */
#panel-motor-now .motor-now-slot:empty { display: none; }

/* The Stock menu entry's live count. */
.nav-item .nav-count {
  float: right;
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* The Do now task card (compact; the deal itself is worked on Trade). */
#panel-motor-now .motor-now-card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  max-width: 720px;
  padding: 16px;
  border: 1px solid var(--mui-line);
  border-radius: 14px;
  background: var(--mui-surface);
  position: relative;
}
#panel-motor-now .motor-now-card__banner {
  position: absolute;
  top: -11px;
  left: 14px;
  padding: 2px 10px;
  border-radius: 7px;
  background: var(--mui-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
}
#panel-motor-now .motor-now-card .motor-product-hero img { width: 100%; border-radius: 10px; display: block; }
#panel-motor-now .motor-now-card__who strong { display: block; font-size: 17px; color: var(--mui-ink); }
#panel-motor-now .motor-now-card__who span { font-size: 14px; color: var(--mui-ink-soft); }
#panel-motor-now .motor-now-card__amount { margin-top: 10px; font-size: 17px; font-weight: 700; color: var(--mui-accent-strong); font-variant-numeric: tabular-nums; }
#panel-motor-now .motor-now-card__action { margin: 10px 0 14px; font-size: 14px; color: var(--mui-ink-soft); }

/* The Solo-shaped Do now card (26.9.2026): one headline that says who wants
   what, the three numbers the decision needs, one big action. */
#panel-motor-now .motor-now-card--solo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 20px;
  align-items: start;
  max-width: 780px;
  padding: 22px 22px 18px;
}
#panel-motor-now .motor-now-card--solo .motor-now-card__photo img { width: 100%; border-radius: 12px; display: block; }
#panel-motor-now .motor-now-card__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--mui-ink-soft); margin-bottom: 8px; }
#panel-motor-now .motor-now-card__headline { margin: 0 0 14px; font-size: 25px; line-height: 1.18; color: var(--mui-ink); font-weight: 700; }
#panel-motor-now .motor-now-card__numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--mui-line); border-bottom: 1px solid var(--mui-line); margin-bottom: 16px; }
#panel-motor-now .motor-now-card__cell { padding: 10px 12px; border-left: 1px solid var(--mui-line); }
#panel-motor-now .motor-now-card__cell:first-child { border-left: 0; padding-left: 0; }
#panel-motor-now .motor-now-card__cell span { display: block; font-size: 12px; color: var(--mui-ink-soft); margin-bottom: 3px; }
#panel-motor-now .motor-now-card__cell strong { font-size: 18px; color: var(--mui-ink); font-variant-numeric: tabular-nums; }
#panel-motor-now .motor-now-card__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#panel-motor-now .motor-now-card__actions .btn-buy { font-size: 16px; padding: 12px 22px; }
/* A real button (owner, 28.9.2026): the switch between the negotiation and
   the extra deal read as plain text, so nobody saw the way back. The Do now
   panel is not always inside .motor-ui, where these colours are set, so each
   carries its own value. */
#panel-motor-now .motor-now-card__skip { display: inline-flex; align-items: center; justify-content: center; margin-top: 12px; background: var(--mui-surface, #ffffff); border: 1.5px solid var(--mui-accent, #00858f); border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--mui-accent-strong, #006e78); cursor: pointer; }
#panel-motor-now .motor-now-card__skip:hover { background: var(--mui-accent-soft, #e2f1f2); color: var(--mui-accent-strong, #006e78); }
#panel-motor-now .motor-now-card__skip:focus-visible { outline: 2px solid var(--mui-accent, #00858f); outline-offset: 2px; }
#panel-motor-now .motor-now-card__guide { margin: 12px 0 0; font-size: 13px; color: var(--mui-ink-soft); }
@media (max-width: 760px) {
  #panel-motor-now .motor-now-card--solo { grid-template-columns: minmax(0, 1fr); }
}

/* The Fleet tender's only announcement in a V2 session: an orange count on
   the menu entry. Never a popup. */
.nav-item .nav-count--alert {
  background: #d97706;
  color: #fff;
  font-weight: 700;
}

/* The approved Do now deal card (26.9.2026 mockups, JAANAJO/mockups-roles):
   one column - who/what, the photo whole, the three numbers, the deal worked
   inline, the "then sell to" band, the chat. The calm firm/coming-up column
   rides on the right at laptop widths. */
#panel-motor-now .motor-now-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 22px;
  align-items: start;
}
@media (max-width: 1180px) {
  #panel-motor-now .motor-now-layout { grid-template-columns: minmax(0, 1fr); }
  #panel-motor-now .motor-now-aside { flex-direction: row; flex-wrap: wrap; }
}
#panel-motor-now .motor-now-card--v2 { display: block; max-width: none; padding: 24px 26px; }
#panel-motor-now .motor-now-card--v2 .motor-now-card__subhead { font-size: 14.5px; color: var(--mui-ink-soft); margin: -8px 0 4px; }
#panel-motor-now .motor-now-card--v2 .motor-now-card__photo { margin: 12px 0 16px; }
#panel-motor-now .motor-now-card--v2 .motor-now-card__photo img {
  width: 100%; max-height: 230px; object-fit: contain; background: #f3f5f7;
  border-radius: 14px; border: 1px solid var(--mui-line); display: block;
}
#panel-motor-now .motor-now-card--v2 .motor-now-card__numbers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--mui-line); border-bottom: 1px solid var(--mui-line); margin-bottom: 4px;
}
#panel-motor-now .motor-now-card--v2 .motor-now-card__cell { padding: 12px 14px 10px; border-left: 1px solid var(--mui-line); }
#panel-motor-now .motor-now-card--v2 .motor-now-card__cell:first-child { border-left: 0; padding-left: 0; }
#panel-motor-now .motor-now-card--v2 .motor-now-card__cell span { display: block; font-size: 12px; color: var(--mui-ink-soft); margin-bottom: 3px; }
#panel-motor-now .motor-now-card--v2 .motor-now-card__cell strong { font-size: 19px; font-variant-numeric: tabular-nums; color: var(--mui-ink); }
#panel-motor-now .motor-now-card--v2 .motor-now-deal-live { margin-top: 10px; }
#panel-motor-now .motor-now-card--v2 .motor-now-card__guide { font-size: 13px; color: var(--mui-ink-soft); margin: 12px 0 0; }

/* the "then sell to" band between the deal controls and the chat */
#panel-motor-now .motor-now-thensell {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #dcf3e8; border: 1.5px solid #b7e2cd; border-radius: 12px;
  padding: 12px 16px; margin: 14px 0 4px;
}
#panel-motor-now .motor-now-thensell img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
#panel-motor-now .motor-now-thensell__avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--mui-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; flex: none;
}
#panel-motor-now .motor-now-thensell__t { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #0f6b4a; text-transform: uppercase; }
#panel-motor-now .motor-now-thensell__n { font-size: 15px; font-weight: 700; color: var(--mui-ink); }
#panel-motor-now .motor-now-thensell__s { font-size: 11.5px; color: #0f6b4a; }
#panel-motor-now .motor-now-thensell > div:not([class]) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#panel-motor-now .motor-now-thensell__p { flex: 0 0 100%; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; text-align: right; }
#panel-motor-now .motor-now-thensell__p b { order: 2; white-space: nowrap; font-size: 19px; font-variant-numeric: tabular-nums; color: #0f6b4a; }
#panel-motor-now .motor-now-thensell__p span { display: block; font-size: 11px; color: var(--mui-ink-soft); }

/* the right-hand calm column */
#panel-motor-now .motor-now-aside { display: flex; flex-direction: column; gap: 14px; }
#panel-motor-now .motor-now-aside__box { background: var(--mui-surface); border: 1px solid var(--mui-line); border-radius: 14px; padding: 14px 16px; }
#panel-motor-now .motor-now-aside__box h3 { font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--mui-ink-soft); margin: 0 0 10px; }
#panel-motor-now .motor-now-aside__row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 5px 0; color: var(--mui-ink-soft); }
#panel-motor-now .motor-now-aside__row b { font-variant-numeric: tabular-nums; color: var(--mui-ink); }
#panel-motor-now .motor-now-aside .mini { font-size: 12.5px; color: var(--mui-ink-soft); line-height: 1.5; }
#panel-motor-now .motor-now-aside .mini b { color: var(--mui-ink); }


/* The approved Do now deal card (27.9.2026, the user's pick - the split
   layout, JAANAJO/mockups-roles/mockup4-buyer-split.png): the left column
   holds the identity (who/what, the whole photo, the numbers), the right
   column holds every control - the price box or Accept, the counter, Skip,
   the then-sell band and the folded chat. Nothing sits below the fold at
   1366x768. The facts strip repeats the aside's figures on this page, so it
   hides here (nav() shows it again on every other page). */
#panel-motor-now .msh-shell { display: none; }
#panel-motor-now .motor-now-card--v2 { padding: 18px 22px 16px; }
#panel-motor-now .motor-now-card--v2 .motor-now-card__eyebrow { margin-bottom: 6px; }
/* A lane deal's move clock, right of the eyebrow on the same row (30.9.2026):
   same font size and line, so the card keeps its height. */
#panel-motor-now .motor-now-card__clock { float: right; margin-left: 12px; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--mui-accent-strong, #006e78); }
#panel-motor-now .motor-now-card--v2 .motor-now-card__headline { margin-bottom: 2px; }
/* The base rule pulls the subhead up 8px into the headline's margin; with the v2 headline margin of 2px that put it on top of a headline that wraps to two lines. */
#panel-motor-now .motor-now-card--v2 .motor-now-card__subhead { margin-top: 2px; margin-bottom: 8px; }
#panel-motor-now .motor-now-card--v2 .motor-now-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 10px; }
#panel-motor-now .motor-now-card--v2 .motor-now-card__photo { margin: 0; }
#panel-motor-now .motor-now-card--v2 .motor-now-card__photo img { height: 150px; width: auto; max-width: 100%; object-fit: contain; background: #f3f5f7; border-radius: 12px; border: 1px solid var(--mui-line); display: block; margin: 0 auto; }
#panel-motor-now .motor-now-card--v2 .motor-now-card__numbers { display: block; border-top: 1px solid var(--mui-line); border-bottom: 0; margin: 12px 0 0; }
#panel-motor-now .motor-now-card--v2 .motor-now-card__cell { border-left: 0; padding: 7px 0; }
#panel-motor-now .motor-now-card--v2 .motor-now-card__cell span { display: block; font-size: 12px; color: var(--mui-ink-soft); margin-bottom: 2px; }
#panel-motor-now .motor-now-card--v2 .motor-now-card__cell strong { font-size: 19px; font-variant-numeric: tabular-nums; color: var(--mui-ink); }
#panel-motor-now .motor-now-card--v2 .motor-now-deal-live { margin-top: 0; }
#panel-motor-now .motor-now-card--v2 .motor-now-card__guide { margin: 0 0 10px; font-size: 12.5px; }
#panel-motor-now .motor-now-card--v2 .motor-trade__deal-stock { margin: 0 0 8px; }
#panel-motor-now .motor-now-card--v2 .motor-trade__counter { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
#panel-motor-now .motor-now-card--v2 .motor-trade__counter .motor-trade__field-label { width: 100%; margin-bottom: 0; }
#panel-motor-now .motor-now-card--v2 .motor-trade__counter-row { display: grid; grid-template-columns: auto minmax(0, 1fr); flex: 1 1 100%; min-width: 0; }
#panel-motor-now .motor-now-card--v2 .motor-trade__counter-row .motor-trade__input { min-width: 0; width: 100%; font-variant-numeric: tabular-nums; }
#panel-motor-now .motor-now-card--v2 .motor-trade__counter-row button { grid-column: 1 / -1; width: 100%; }
#panel-motor-now .motor-now-card--v2 .motor-trade__btn--quiet.motor-trade__btn--block { width: auto; margin-top: 0; }
#panel-motor-now .motor-now-card--v2 .motor-now-thensell { margin: 12px 0 2px; padding: 10px 14px; }
#panel-motor-now .motor-now-card--v2 .motor-now-thensell img,
#panel-motor-now .motor-now-card--v2 .motor-now-thensell__avatar { width: 40px; height: 40px; }
#panel-motor-now .motor-now-chat { margin-top: 10px; border-top: 1px solid var(--mui-line); padding-top: 8px; }
#panel-motor-now .motor-now-chat summary { font-size: 13px; font-weight: 700; color: var(--mui-ink-soft); cursor: pointer; list-style-position: inside; }
#panel-motor-now .motor-now-chat .motor-trade__chat { margin-top: 8px; }
@media (max-width: 900px) {
  #panel-motor-now .motor-now-card--v2 .motor-now-split { grid-template-columns: minmax(0, 1fr); }
}

/* The sidebar and tutorial consume space too. Fit the actual card, not just
   the outer browser width; never squeeze the price input to make a button fit. */
#panel-motor-now { container: motor-now-panel / inline-size; }
#panel-motor-now .motor-now-card--v2 { container: motor-now-card / inline-size; min-width: 0; }
#panel-motor-now .motor-now-split > div,
#panel-motor-now .motor-now-aside,
#panel-motor-now .motor-now-aside__box { min-width: 0; }
#panel-motor-now .motor-now-aside__row { flex-wrap: wrap; }
#panel-motor-now .motor-now-aside__row b { margin-left: auto; white-space: nowrap; }
@container motor-now-panel (max-width: 1000px) {
  #panel-motor-now .motor-now-layout { grid-template-columns: minmax(0, 1fr); }
  #panel-motor-now .motor-now-aside { flex-direction: row; flex-wrap: wrap; }
  #panel-motor-now .motor-now-aside__box { flex: 1 1 240px; }
}
@container motor-now-card (max-width: 560px) {
  #panel-motor-now .motor-now-card--v2 .motor-now-split { grid-template-columns: minmax(0, 1fr); }
}

/* Staff and campaign extras on a Do now deal (29.9.2026): one quiet line
   under the figures, only while a benefit applies to this deal. */
#panel-motor-now .motor-now-card__extras { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--mui-accent, #0e8a7c); font-variant-numeric: tabular-nums; }