/*
 * 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: stretch;
  margin-bottom: var(--mui-gap);
  padding: 26px 10px;
}

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

.motor-ui .mui-stat .mui-icon { width: 36px; height: 36px; color: var(--mui-accent); }
.motor-ui .mui-stat-value { color: var(--mui-accent); font-size: 44px; font-weight: 700; line-height: 1; }
.motor-ui .mui-stat-label { color: var(--mui-ink-soft); font-size: 20px; }
.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);
}

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