/* Rate Test Tool styles — layout shell (Figma Global Header / Navigation Menu) and
   configuration page (Figma Configure Run frame, node 32:2005). CircularXX is a licensed
   brand font not bundled here; system sans-serif fallbacks are used until font files ship. */

/* ------------------------------------------------------------------ */
/* Design tokens                                                      */
/* ------------------------------------------------------------------ */
:root {
  --page-bg: #f5f2f0;
  --surface-default: #ffffff;
  --surface-interactive-active: #e4e0de;
  --surface-interactive-muted: #ccc7c4;
  --border-default: #ccc7c4;
  --input-border: #948e8a;
  --text-primary: #2c2b2a;
  --text-secondary: #625d5b;
  --text-inverse: #f5f2f0;
  --accent: #3f6ebf;
  /* Status / state colours (run status page) */
  --state-success: #1f7a3d;
  --state-success-surface: #e5f2e9;
  /* Positive green — AutoStore design system status-positive (#5b9b60) */
  --state-positive: #5b9b60;
  --state-danger: #b1140b;
  --state-danger-surface: #f7e4e3;
  /* Live badge — red matching Figma (#ef4444 / rgba(239,68,68,0.08)) */
  --state-live: #ef4444;
  --state-live-surface: rgba(239, 68, 68, 0.08);
  /* Held badge — amber, distinct from the live/danger palette (nothing is failing or executing) */
  --state-held: #b5810f;
  --state-held-surface: rgba(181, 129, 15, 0.1);
  /* Queued badge — neutral grey (matches --text-secondary); approximated, not from Figma. */
  --state-queued: #625d5b;
  --state-queued-surface: rgba(98, 93, 91, 0.08);
  --font-family: "CircularXX", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-md: 10px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --radius-pill: 999px;
}

/* ------------------------------------------------------------------ */
/* Base / reset                                                       */
/* ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* Only `.app-main` should ever scroll (see "App shell" below). Without `overflow: hidden` on `html`
     too, `.app-layout`'s `min-height: 100vh` can still trigger the browser's own document-level
     scrollbar, which sits just outside `.app-main`'s internal one — a double-scrollbar gap that keeps
     the visible scrollbar from reaching the true right edge of the window. */
  overflow: hidden;
}

body {
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: var(--font-family);
  line-height: 1.4;
}

/* ------------------------------------------------------------------ */
/* App shell — header, sidebar, main                                  */
/* ------------------------------------------------------------------ */
.app-layout {
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.app-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.global-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 8px 24px 8px 8px;
  background: var(--surface-default);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}

.global-header__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.global-header__app-name {
  display: flex;
  align-items: center;
  gap: 12px;
}

.global-header__icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  flex-shrink: 0;
}

.global-header__logo {
  width: 32px;
  height: 32px;
  display: block;
}

.global-header__title {
  margin: 0;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: #000000;
  white-space: nowrap;
}

.global-header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.global-header__avatar {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  /* Name this element as the anchor the user menu popover attaches to. */
  anchor-name: --user-menu-anchor;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.global-header__avatar-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.global-header__avatar-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary);
  text-align: center;
}

/* User menu popover — anchored to the header avatar via CSS anchor positioning. */
#user-menu {
  position: absolute;
  position-anchor: --user-menu-anchor;
  /* Clear the UA popover `inset: 0` so left/bottom aren't stuck at 0 —
     otherwise the box is over-constrained and pins to the left edge. */
  inset: auto;
  top: anchor(bottom);
  right: anchor(right);
  margin: 0;
  margin-top: 8px;
  min-width: 168px;
  padding: 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-default);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Entry/exit animation for the top layer (needs allow-discrete for display/overlay). */
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    overlay 0.15s ease allow-discrete,
    display 0.15s ease allow-discrete;
}

#user-menu:popover-open {
  opacity: 1;
  transform: translateY(0);
}

@starting-style {
  #user-menu:popover-open {
    opacity: 0;
    transform: translateY(-8px);
  }
}

#user-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  font-family: var(--font-family);
  font-size: 14px;
  color: var(--text-primary);
  text-decoration: none;
}

#user-menu a:hover {
  background: var(--surface-interactive-active);
}

#user-menu a.danger {
  color: #b3261e;
}

/* Save-as-Saved-Configuration popover (`/runs/new` only, WMPP-1875) — same native `popover` +
   CSS-anchor mechanism as `#user-menu` above, but anchored *above* its trigger instead of below:
   the trigger sits in the sticky bottom action bar, so there's no room underneath it. `display`
   only lives in the `:popover-open` rule (not here) so the UA's own
   `[popover]:not(:popover-open) { display: none; }` keeps hiding it while closed. */
#save-config-popover {
  position: absolute;
  position-anchor: --save-config-anchor;
  inset: auto;
  bottom: anchor(top);
  right: anchor(right);
  margin: 0;
  margin-bottom: 8px;
  width: 340px;
  padding: 20px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-default);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    overlay 0.15s ease allow-discrete,
    display 0.15s ease allow-discrete;
}

#save-config-popover:popover-open {
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 1;
  transform: translateY(0);
}

@starting-style {
  #save-config-popover:popover-open {
    opacity: 0;
    transform: translateY(8px);
  }
}

.side-nav {
  width: 228px;
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px;
  background: var(--surface-default);
}

.side-nav__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.side-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-xs);
  background: var(--surface-default);
  color: var(--text-secondary);
  text-decoration: none;
}

.side-nav__item--active {
  background: var(--surface-interactive-active);
  color: var(--text-primary);
}

.side-nav__item--active .side-nav__label {
  font-weight: 500;
}

.side-nav__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

.side-nav__label {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Configuration page (`/runs/new`)                                   */
/* ------------------------------------------------------------------ */
/* `.config-page` is the scroll container, spanning the full width of `.app-main` so its scrollbar
   sits at the true right edge of the window (not indented to a narrow centered column). The 68rem
   cap lives one level down, on `.config-page__content`, purely for centering the cards — it doesn't
   affect where the scrollbar renders. `.action-bar` is nested inside this scroll box (not a sibling)
   so cards and the Run Test button share the same width when a classic scrollbar consumes layout
   space; `position: sticky` keeps it pinned to the viewport bottom while scrolling (see
   `.run-submit-form`). */
.config-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.config-page__content {
  flex: 1;
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.config-header { margin-bottom: 0.5rem; }
.config-header h1 {
  margin: 0 0 0.5rem;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-primary);
}
.config-header p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

/* Fills `.app-main` without growing past it (`min-height: 0` lets the flex child shrink below its
   content size). `.config-page` scrolls internally; `.action-bar` is sticky inside it so it never
   leaves the viewport. */
.run-submit-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Cards ------------------------------------------------------------- */
.card {
  background: var(--surface-default);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.card-header { display: flex; flex-direction: column; gap: 12px; }
.card-title-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.card-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--text-primary);
  display: block;
}
.card-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary);
}
.card-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}
.card-divider {
  height: 1px;
  background: var(--border-default);
  width: 100%;
}
.card-fields { display: flex; flex-direction: column; gap: 24px; }
.card-footnote {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* Bottom row: Picking + Test Run side by side ----------------------- */
.card-row {
  display: flex;
  gap: 24px;
  align-items: stretch;
}
.card-row > .card { flex: 1 1 0; min-width: 0; }

/* Field rows -------------------------------------------------------- */
.field-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.field-row > .field { flex: 1 1 0; min-width: 0; }

/* Three equal columns — numeric fields stack vertically per column (Order Generation). */
.field-column-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 20px;
  align-items: start;
}
.field-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* Text / JSON fields: 14px secondary label above a full-width field - */
.field { display: flex; flex-direction: column; gap: 4px; }
.field > label {
  font-size: 14px;
  color: var(--text-secondary);
}
.field input[type="text"],
.field textarea {
  width: 100%;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-xs);
  background: var(--surface-default);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  padding: 6px 8px;
}
.field input[type="text"] { height: 32px; }
.field textarea { resize: vertical; min-height: 32px; }
.field-help {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Numeric config rows: 16px medium primary label + subtitle + small
   fixed-width numeric input with an optional unit suffix ----------- */
.field-numeric { gap: 2px; }
.field-numeric > label {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}
.field-numeric .field-numeric-input { margin-top: 6px; }
.field-numeric-input {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  width: 143px;
  max-width: 100%;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-xs);
  background: var(--surface-default);
  padding: 8px 10px 8px 14px;
}
.field-numeric-input input[type="number"] {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.field-numeric-input input[type="number"]::-webkit-inner-spin-button,
.field-numeric-input input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.field-numeric-input input[type="number"]:focus { outline: none; }
.field-unit {
  font-size: 14px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* Figma Numeric Input Arrow — 16px stacked chevrons (Icon Library arrow-small-*) */
.numeric-arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: -4px 0;
}
.numeric-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #afaba8;
  line-height: 0;
}
.numeric-arrow:hover,
.numeric-arrow:focus-visible { color: var(--text-primary); }
.numeric-arrow-icon {
  width: 16px;
  height: 16px;
  display: block;
}
.numeric-arrow-icon-down { transform: rotate(180deg); }

/* Action bar ---------------------------------------------------------
   Nested inside `.config-page` so it shares the scrollport's width (cards and button stay aligned
   when a classic scrollbar consumes layout space). `position: sticky` pins it to the viewport bottom
   while scrolling; its background still spans the full scroll-container width edge-to-edge.
   `.action-bar__inner` re-applies the 68rem cap to line the button up under the cards above it. */
.action-bar {
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 10px 1.5rem;
  background: var(--surface-default);
  border-top: 1px solid var(--border-default);
}
/* `align-items: center` (not `justify-content: flex-end`) because `#action-bar-result` now shares this
   row with the button — `.action-bar__actions`'s `margin-left: auto` pushes Cancel/Save (or just
   Run Test on `/runs/new`, which has no Cancel) to the right as one group, regardless of whether the
   result slot is empty (`:empty` collapses it, see below) or showing the success confirmation, so
   neither button's position ever shifts. */
.action-bar__inner {
  width: 100%;
  max-width: 68rem;
  display: flex;
  align-items: center;
  gap: 16px;
}
/* Groups Cancel + the submit button so they move together and stay adjacent (see `.action-bar__inner`
   comment above) — only `/configurations/{id}/edit` renders a Cancel link (`RunSubmitForm.cancelLink`). */
.action-bar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.btn-primary {
  background: var(--accent);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  padding: 13px 40px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-primary:hover { filter: brightness(0.95); }

/* Cancel-out-of-edit link (`/configurations/{id}/edit` only) — sized to match `.btn-primary`'s
   height so it lines up next to Save changes despite `.btn-tertiary`'s smaller row-button padding. */
.action-bar__cancel {
  padding: 13px 20px;
  font-size: 16px;
}

/* Save-as-Saved-Configuration trigger (`/runs/new` only, WMPP-1875) — a `<button>`, so it needs its
   own UA-chrome reset unlike `.action-bar__cancel`'s `<a>` (`font: inherit`, not just
   `font-family`, since browsers give buttons their own line-height/weight too). `anchor-name` makes
   this the anchor `#save-config-popover` positions itself against below. */
.action-bar__save {
  margin: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 16px;
  padding: 13px 20px;
  cursor: pointer;
  anchor-name: --save-config-anchor;
}

/* Action bar result (`#action-bar-result`) — both the success confirmation and enqueue-failure errors
   render here (see RunSubmitResult.fs); `--success`/`--error` set the icon + heading colour via
   `currentColor`, so `.action-bar-result__icon`'s `fill="currentColor"` paths need no colour rule of
   their own. ---------------------------------------------------------------------------------------- */
.action-bar-result:empty { display: none; }
.action-bar-result {
  display: flex;
  align-items: center;
  gap: 10px;
}
.action-bar-result--success { color: var(--state-success); }
.action-bar-result--error { color: var(--state-danger); }
.action-bar-result__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.action-bar-result__heading {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
}
.action-bar-result__detail {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
}
/* Multiple validation errors stack as a tight list instead of one detail line — the bar just grows
   taller to fit, no internal scroll needed. */
.action-bar-result__errors {
  margin: 0;
  padding: 0 0 0 1rem;
  font-size: 12px;
  color: var(--text-secondary);
}
.action-bar-result__errors li { line-height: 1.5; }

/* ------------------------------------------------------------------ */
/* Run status page (`/runs/{id}/status`)                              */
/* ------------------------------------------------------------------ */
.run-status-page {
  width: 100%;
  /* Wider than the other pages' 68rem cap: the end-of-run report's 4-column metric grid
     (`.report-section__grid`) gets cramped at that width. */
  max-width: 84rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1.5rem;
}

/* Header: left (title + meta) / right (actions) ------------------- */
.run-status-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.run-status-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.run-status-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.run-status-title {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-primary);
  text-transform: capitalize;
}
.run-status-meta {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}
.run-status-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding-top: 4px;
}

/* Status badge (LIVE / HELD / QUEUED / terminal) -------------------- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.status-badge-live {
  color: var(--state-live);
  background: var(--state-live-surface);
}
.status-badge-success {
  color: var(--state-success);
  background: var(--state-success-surface);
}
.status-badge-danger {
  color: var(--state-danger);
  background: var(--state-danger-surface);
}
.status-badge-held {
  color: var(--state-held);
  background: var(--state-held-surface);
}
/* No pulsing dot — nothing is executing while queued. */
.status-badge-queued {
  color: var(--state-queued);
  background: var(--state-queued-surface);
}
.status-badge-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--state-live);
  animation: run-status-pulse 1.4s ease-in-out infinite;
}
@keyframes run-status-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .status-badge-live::before { animation: none; }
}

/* Report-pending banner (terminal run still waiting on its report) --- */
.run-report-pending:empty {
  display: none;
}
.run-report-pending p {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  background: var(--surface-interactive-active);
  color: var(--text-secondary);
  font-size: 13px;
}

/* Buttons --------------------------------------------------------- */
.btn {
  border: none;
  border-radius: var(--radius-xs);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  padding: 6px 20px;
  cursor: pointer;
}
.btn-danger {
  background: var(--state-danger);
  color: var(--text-inverse);
}
.btn-danger:hover { filter: brightness(0.92); }
.btn-danger:focus-visible {
  outline: 2px solid var(--state-danger);
  outline-offset: 2px;
}

/* Neutral row-level action (Saved Configurations "Run"), per the Figma row buttons. */
.btn-secondary {
  background: var(--surface-interactive-muted);
  color: var(--text-primary);
}
.btn-secondary:hover { filter: brightness(0.95); }
.btn-secondary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Plain-link row action (Saved Configurations "Edit"), per the Figma row buttons — no fill,
   distinguishing it from Run's filled/muted `.btn-secondary`. */
.btn-tertiary {
  background: transparent;
  color: var(--text-primary);
  text-decoration: none;
}
.btn-tertiary:hover,
.btn-tertiary:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}
.btn-tertiary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Executing loader (shown while a run is active) ------------------- */
.run-executing {
  display: flex;
  align-items: center;
  gap: 10px;
}
.run-executing__dots {
  display: flex;
  align-items: center;
  gap: 2px;
}
.run-executing__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-secondary);
  animation: executing-bounce 1.2s ease-in-out infinite;
}
.run-executing__dot:nth-child(2) { animation-delay: 0.15s; }
.run-executing__dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes executing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .run-executing__dot { animation: none; }
}
.run-executing__label {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

/* Stage stepper ---------------------------------------------------- */
/* Matches AutoStore Design System stepper (node 14211:11278 in zdhfFjAIGP8jW6tibpOlHs).
   Label is BESIDE the circle (not below). Connector divs sit between items and grow to
   fill available space. Complete = green (#5b9b60), active = accent blue. */
.run-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--page-bg);
  border-radius: var(--radius-md);
  padding: 16px 24px;
}
.run-stepper__item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* Explicit connector element between items — grows to fill available width. */
.run-stepper__connector {
  flex: 1 0 0;
  height: 1px;
  min-width: 1px;
  background: var(--border-default);
}
.run-stepper__connector--complete {
  background: var(--state-positive);
}
.run-stepper__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-interactive-active); /* pending: #e4e0de */
  color: #afaba8;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
}
.run-stepper__label {
  font-size: 14px;
  font-weight: 400;
  color: #afaba8;
  white-space: nowrap;
}
.run-stepper__item--complete .run-stepper__marker {
  background: var(--state-positive);
  color: var(--text-inverse);
}
.run-stepper__item--complete .run-stepper__label {
  color: var(--text-primary);
}
.run-stepper__item--active .run-stepper__marker {
  background: var(--accent);
  color: var(--text-inverse);
}
.run-stepper__item--active .run-stepper__label {
  color: var(--text-primary);
  font-weight: 600;
}
.run-stepper__item--failed .run-stepper__marker {
  background: var(--state-danger);
  color: var(--text-inverse);
}
.run-stepper__item--failed .run-stepper__label {
  color: var(--state-danger);
  font-weight: 600;
}

/* Compact stepper variant — used in dashboard run rows ------------ */
.run-stepper--compact {
  padding: 8px 12px;
  gap: 4px;
  background: transparent;
  border-radius: 0;
}
.run-stepper--compact .run-stepper__marker {
  width: 16px;
  height: 16px;
  font-size: 10px;
}
.run-stepper--compact .run-stepper__label {
  font-size: 12px;
}

/* ------------------------------------------------------------------ */
/* Runs in Progress dashboard (`/runs/in-progress`)                  */
/* ------------------------------------------------------------------ */
.runs-in-progress-page {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dashboard-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Modifier, not a change to the base rule above — `RunsListPage.fs`/`RunsInProgressPage.fs`/
   `EditSavedConfigurationPage.fs`'s not-found body all still want the plain stacked title+subtitle,
   only `SavedConfigurationsPage.fs`'s "New" button (WMPP-1875) needs the title block and the button
   side by side. */
.dashboard-header--with-action {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.dashboard-title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-primary);
}
.dashboard-runner-count {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.dashboard-run-list {
  display: flex;
  flex-direction: column;
  background: var(--surface-default);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.dashboard-empty {
  margin: 0;
  padding: 24px;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
}

.dashboard-run-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border-default);
}
.dashboard-run-row:last-child {
  border-bottom: none;
}
.dashboard-run-row:hover {
  background: var(--surface-interactive-active);
}
.dashboard-run-row-link {
  color: inherit;
  text-decoration: none;
}
.dashboard-run-row-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.dashboard-run-row-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.dashboard-run-row__pass-through {
  pointer-events: none;
}

.dashboard-run-id {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  color: var(--text-secondary);
  flex-shrink: 0;
  width: 5.5rem;
}

/* Reserved on every row so the stepper gets the same width whether or not a badge is shown. */
.dashboard-run-row__badge-slot {
  flex-shrink: 0;
  width: 3.25rem;
  display: inline-flex;
  align-items: center;
}

.dashboard-run-elapsed {
  font-size: 12px;
  color: var(--text-secondary);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  width: 6rem;
}

.dashboard-run-row__stepper-wrap {
  flex: 1;
  min-width: 0;
}

/* Short id chip — truncated id with click-to-copy (shared by run lists) */
.short-id {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  padding: 0;
  cursor: copy;
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: inherit;
  color: inherit;
}
.short-id:hover:not(.short-id--copied) {
  text-decoration: underline;
}
.short-id--copied {
  color: var(--state-success);
  font-weight: 600;
  text-decoration: none;
}

/* Duration metric tile -------------------------------------------- */
.metric-tile {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.metric-tile__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.metric-label {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  color: var(--text-secondary);
}
.metric-value {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Recent Runs history (`/runs`)                                      */
/* ------------------------------------------------------------------ */
.runs-list-page {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dashboard-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.run-table {
  background: var(--surface-default);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.run-table__header,
.run-table__row {
  display: grid;
  grid-template-columns: 7rem 1fr 11rem 6.5rem 7rem 7rem;
  gap: 12px;
  align-items: center;
  padding: 12px 20px;
}

.run-table__header {
  border-bottom: 1px solid var(--border-default);
}

.run-table__header-cell {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.run-table__row {
  position: relative;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border-default);
}
.run-table__row:last-child {
  border-bottom: none;
}
.run-table__row:hover {
  background: var(--surface-interactive-active);
}
.run-table__row-link {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: inherit;
  text-decoration: none;
}
.run-table__row-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.run-table__cell--pass-through {
  pointer-events: none;
}

.run-table__cell {
  font-size: 14px;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-table__cell--id,
.run-table__cell--fc,
.run-table__cell--grid {
  position: relative;
  z-index: 1;
  font-size: 12px;
  color: var(--text-secondary);
}
.run-table__cell--created,
.run-table__cell--duration {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Combined status/outcome cell — coloured by the run's terminal status. */
.run-table__status--succeeded {
  color: var(--state-success);
}
.run-table__status--failed {
  color: var(--state-danger);
}
.run-table__status--cancelled {
  color: var(--text-secondary);
}

.run-table__empty {
  margin: 0;
  padding: 24px;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* Saved Configurations (`/configurations`)                           */
/* ------------------------------------------------------------------ */
.saved-configurations-page {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.saved-config-table {
  background: var(--surface-default);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.saved-config-table__header,
.saved-config-table__row {
  display: grid;
  grid-template-columns: 1fr 11rem 10rem 10rem;
  gap: 12px;
  align-items: center;
  padding: 12px 20px;
}

.saved-config-table__header {
  border-bottom: 1px solid var(--border-default);
}

.saved-config-table__header-cell {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.saved-config-table__row {
  border-bottom: 1px solid var(--border-default);
}
.saved-config-table__row:last-child {
  border-bottom: none;
}
.saved-config-table__row:hover {
  background: var(--surface-interactive-active);
}

.saved-config-table__cell {
  font-size: 14px;
  color: var(--text-primary);
  min-width: 0;
}
.saved-config-table__cell--muted {
  color: var(--text-secondary);
}
.saved-config-table__cell--actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* Name stacks over its description, matching the Figma row layout. */
.saved-config-table__cell--name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.saved-config-table__name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saved-config-table__description {
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-config-table__status--succeeded {
  color: var(--state-success);
}
.saved-config-table__status--failed {
  color: var(--state-danger);
}
.saved-config-table__status--cancelled,
.saved-config-table__status--queued,
.saved-config-table__status--held,
.saved-config-table__status--running {
  color: var(--text-secondary);
}

.saved-config-table__empty {
  margin: 0;
  padding: 24px;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
}

/* Run-error page (POST /configurations/{id}/run validation failure) ---------------------- */
.saved-config-run-error__list {
  margin: 0;
  padding: 16px 20px;
  background: var(--state-danger-surface);
  color: var(--state-danger);
  border-radius: var(--radius-md);
  font-size: 14px;
  list-style-position: inside;
}
.saved-config-run-error__list li {
  line-height: 1.6;
}
.saved-config-run-error__back-link {
  align-self: flex-start;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.saved-config-run-error__back-link:hover {
  text-decoration: underline;
}
.saved-config-run-error__back-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Run report (`/runs/{id}/status`, terminal state)                   */
/* ------------------------------------------------------------------ */
.run-report {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Metadata card header row: title+badge on the left, export links on the right ---- */
.report-metadata-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.report-metadata-header__title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.report-metadata-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Export controls: CSV/JSON toggle + single "Export {format}" link (WMPP-1735) ---- */
.export-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.export-toggle {
  display: flex;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.export-toggle__option {
  border: none;
  background: var(--surface-default);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 16px;
  cursor: pointer;
}
.export-toggle__option + .export-toggle__option {
  border-left: 1px solid var(--input-border);
}
/* No `__` in this name — Datastar's `data-class:` key form treats double-underscore as a
   modifier delimiter (like `data-on:click__debounce`), so a BEM `__option--active` name here
   silently fails to bind. */
.export-toggle-option--active {
  background: var(--accent);
  color: var(--text-inverse);
}
.export-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 140px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-inverse);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.export-btn:hover { filter: brightness(0.95); }
.export-btn__icon {
  width: 15px;
  height: 13px;
}
.report-metadata-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
}
.report-metadata-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.report-metadata-field__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.report-metadata-field__value {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

/* Grouped metric-card sections (Throughput / Performance / Error Metrics) ------------ */
.report-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.report-section__title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}
.report-section__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.report-section__grid--5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.report-section__grid--5 .report-metric-card {
  padding: 16px;
}
.report-section__grid--5 .report-metric-card__title {
  font-size: 14px;
}
@media (max-width: 1200px) {
  .report-section__grid--5 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 900px) {
  .report-section__grid,
  .report-section__grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .report-section__grid,
  .report-section__grid--5 {
    grid-template-columns: 1fr;
  }
}

/* Larger variant of `.metric-tile`, used for report cards that carry a title header and
   several lines of supporting text rather than a single label/value pair. */
.report-metric-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-default);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.report-metric-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.report-metric-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}
.report-metric-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.report-metric-card__value {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.report-metric-card__subtext {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.run-report-empty {
  margin: 0;
  padding: 24px 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
}

/* ------------------------------------------------------------------ */
/* Run configuration section (`/runs/{id}/status`, collapsible)      */
/* ------------------------------------------------------------------ */
/* `.run-config-section` is a `.card`, so its 24px gap already spaces the header from the body —
   and, once `data-show` removes the body from layout while collapsed, that gap collapses to zero
   along with it (flexbox `gap` only applies between boxes still in flow). No override needed here. */
.run-config-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  border: none;
  background: transparent;
  margin: 0;
  padding: 0;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.run-config-section__header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.run-config-section__title-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.run-config-section__title-row h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary);
}
/* Shares the `numeric-arrow-icon` base glyph (up-pointing, Icon Library `arrow-small-*` family)
   with `RunSubmitForm`'s numeric stepper. Rotated 180° to point down (collapsed), matching the
   Design System's `Accordion` component (down when collapsed, up when expanded); `.is-open`
   undoes the rotation to point up once expanded. Only the glyph direction matches `Accordion` —
   the click target is still the whole header, not just the chevron (see `RunConfigSection.fs`). */
.run-config-section__chevron {
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 0.15s ease;
  transform: rotate(180deg);
}
.run-config-section__chevron.is-open {
  transform: rotate(0deg);
}

/* Six labeled subsections (Connection/Product Mix/Induction/Order Generation/Picking/Test Run),
   stacked with the same 24px rhythm `.card` uses for its own top-level children. */
.run-config-section__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* Each group is itself `[title-row; divider; fields; footnote?]` (`CardPrimitives.cardSectionBody`)
   — same 24px gap as `.card` uses for that shape, just without the elevated shell around it. */
.run-config-section__group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.run-config-section__group .card-title-row h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary);
}
/* Read-only fields wrap into a responsive grid (matching `.report-metadata-grid`) rather than
   `.card-fields`'s default full-width stack, which is meant for editable inputs on `RunSubmitForm`. */
.run-config-section__group .card-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}
/* The raw distribution-profile JSON fields (interim until WMPP-1765) span the full row instead of
   one grid cell — the monospace array text doesn't wrap usefully at a narrow column width. */
.run-config-section__group .card-fields .report-metadata-field:has(.run-config-section__value--json) {
  grid-column: 1 / -1;
}
.run-config-section__value--json {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ------------------------------------------------------------------ */
/* Login page (`/account/login`)                                      */
/* ------------------------------------------------------------------ */
.app-body:has(.login-page) .side-nav {
  display: none;
}

.login-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none;
  padding: 2.5rem 1.5rem;
}

.login-card {
  width: 100%;
  max-width: 26rem;
  background: var(--surface-default);
  border-radius: var(--radius-md);
  padding: 2rem 2rem 1.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.login-card__brand {
  display: flex;
  justify-content: center;
}

.login-card__logo {
  width: 40px;
  height: 40px;
  display: block;
}

.login-card__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}

.login-card__title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-primary);
}

.login-card__subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary);
}

a.btn-primary.login-card__sign-in {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  padding: 13px 24px;
  box-sizing: border-box;
}

.login-card__dev {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--border-default);
}

.login-card__dev-label {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.login-card__dev-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}

.login-card__dev-link:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Home page (`/`)                                                    */
/* ------------------------------------------------------------------ */
.home-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
}

.home-page__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  max-width: 36rem;
}

.home-page__ascii {
  margin: 0;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  font-size: 8px;
  line-height: 1.15;
  white-space: pre;
  user-select: none;
}

.home-page__welcome {
  margin: 0.5rem 0 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-primary);
}

.home-page__motd {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  font-style: italic;
}