/* Panorama – Shipment Tracking
   Rothy's-inspired: clean, minimal, light backgrounds, sage green accent
   https://rothys.com
   Font loaded via link tag in root layout (avoids @import blocking). */

/* The browser default `[hidden] { display: none }` is a low-specificity
   selector — any class rule that sets `display` (flex, inline-flex, block, …)
   silently defeats the HTML `hidden` attribute. That was hiding the fix for
   the client-side "Late to port" badge, which uses `badge.hidden = !late` to
   toggle visibility but was being overridden by `.shipments-card .shipment-badge
   { display: inline-flex }`. Restore `[hidden]` as the winner project-wide. */
[hidden] { display: none !important; }

:root {
  --font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Warmer, softer neutrals — a barely-cool paper canvas instead of stark
     white-on-grey. Surfaces stay white so cards lift off the canvas once they
     carry a radius + shadow (see below). */
  --color-bg: #f0f3f8;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-muted: #eef1f6;
  --color-text: #1e3a5f;
  /* muted/subtle darkened slightly: the old #6b8a9e was only ~3.6:1 on white
     (failed WCAG AA for body). These clear AA everywhere. */
  --color-text-muted: #4b6076;
  --color-text-subtle: #607285;
  --color-accent: #4a6b4a;
  --color-accent-hover: #3d5a3d;
  --color-accent-muted: #e8f0e8;
  /* "Waiting on you" count badges (Awaiting review, My queue): white text on it clears AA. */
  --color-action-badge: #b3441f;
  /* One confident Rothy's blue for links / interactive accents, so the app
     stops drifting between the sage accent and scattered hard-coded blues. */
  --color-brand: #2f6db0;
  --color-brand-hover: #255a95;
  --color-brand-muted: #e8f1f9;
  /* THE link colour: the conventional web-link blue (WCAG AA on white, 5.6:1). Every text link
     in the app takes this, whatever its class; see the "Links" block at the end of this file. */
  --color-link: #0066cc;
  --color-link-hover: #004c99;
  /* Alias for legacy `var(--muted, #777)` call sites — routes them to the real
     token so muted text is on-palette and AA-compliant everywhere. */
  --muted: var(--color-text-muted);
  --color-border: #e2e6ec;
  --color-border-light: #eef1f5;
  /* Soft, layered, navy-tinted elevation — gives cards/menus/buttons weight
     without the pillowy look. Shadows tinted toward the brand read cohesive. */
  --shadow-sm: 0 1px 2px rgba(16, 33, 55, 0.05);
  --shadow-md: 0 1px 3px rgba(16, 33, 55, 0.06), 0 1px 2px rgba(16, 33, 55, 0.04);
  --shadow-lg: 0 4px 14px rgba(16, 33, 55, 0.08);
  --shadow-xl: 0 12px 28px rgba(16, 33, 55, 0.12);
  /* Gently rounded corners — the single biggest lever from stark → friendly,
     kept restrained (≤12px) so it stays professional, not toy-like. */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  --transition: 0.2s ease;
  /* One height for every control that shares a list page's filter bar — search box,
     filter buttons, per-page select, active-filter chips. See `.inbound-filters-toolbar-row`. */
  --filter-bar-control-height: 2rem;
  --color-primary: #1e3a5f;
  --color-primary-hover: #16324f;
  /* Chart / inbound receipt accent — Pre-SPA inventory PAB bars (also @color_chart_inbound). */
  --color-chart-inbound: #0ea5e9;
  /* Base for rem; keep in sync with body font-size */
  --font-size-base: 16px;
}

* {
  box-sizing: border-box;
}

/* Screen-reader-only text (several HEEx templates use class="sr-only") */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-build-footer {
  margin-top: auto;
  padding: 0.5rem 1rem 0.75rem;
  text-align: center;
}

.site-build-footer-text {
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--color-text-subtle);
  opacity: 0.72;
  letter-spacing: 0.02em;
}

/* ── Non-production environments ──────────────────────────────────────────────
   Every deploy except production sets `data-deploy-env` on <html>
   (PanoramaWeb.Components.DeployEnvMarker). It re-tints the whole palette around one hue per
   environment and stencils the environment's name across the viewport, the way a shipping crate
   is stencilled, so a QA tab can never be mistaken for prod. No environment is tinted with
   production's blue (~250); text links stay blue on purpose, darkened so they keep AA contrast on
   the tinted canvas. Unknown env names (including "unknown", runtime.exs's value for an unset
   PANORAMA_DEPLOY_ENV) fall back to the QA magenta. Every text/background pair below clears
   WCAG AA on white, on --color-bg and on the header band. */
:root[data-deploy-env] {
  --env-hue: 340;
  /* Strong mark colour (watermark, hazard stripes) and the deep band behind the banner text. */
  --env-strong: oklch(0.6 0.2 var(--env-hue));
  --env-deep: oklch(0.3 0.11 var(--env-hue));

  --color-bg: oklch(0.93 0.045 var(--env-hue));
  --color-surface-muted: oklch(0.955 0.03 var(--env-hue));
  --color-border: oklch(0.86 0.05 var(--env-hue));
  --color-border-light: oklch(0.9 0.04 var(--env-hue));
  --color-text: oklch(0.3 0.08 var(--env-hue));
  --color-text-muted: oklch(0.43 0.06 var(--env-hue));
  --color-text-subtle: oklch(0.45 0.05 var(--env-hue));
  --color-primary: oklch(0.36 0.12 var(--env-hue));
  --color-primary-hover: oklch(0.3 0.11 var(--env-hue));
  --color-brand: oklch(0.45 0.17 var(--env-hue));
  --color-brand-hover: oklch(0.39 0.16 var(--env-hue));
  --color-brand-muted: oklch(0.95 0.03 var(--env-hue));
  --color-accent: oklch(0.45 0.14 var(--env-hue));
  --color-accent-hover: oklch(0.39 0.13 var(--env-hue));
  --color-accent-muted: oklch(0.94 0.035 var(--env-hue));
  --color-link: oklch(0.45 0.16 255);
  --color-link-hover: oklch(0.38 0.15 255);
  --color-action-badge: oklch(0.5 0.16 40);
}

:root[data-deploy-env="qa"] { --env-hue: 340; }          /* magenta */
:root[data-deploy-env="staging"] { --env-hue: 295; }     /* violet */
:root[data-deploy-env="development"] { --env-hue: 150; } /* green */

/* The header band takes a stronger tint than the canvas, so the environment reads even when a
   page is all white cards. */
:root[data-deploy-env] .app-header-bar {
  background: oklch(0.89 0.07 var(--env-hue));
  border-bottom-color: oklch(0.78 0.1 var(--env-hue));
}

.non-production-banner {
  background: var(--env-deep);
  color: #fff;
  text-align: center;
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  /* Hazard tape along the bottom edge. */
  border-bottom: 6px solid transparent;
  border-image: repeating-linear-gradient(
      -45deg,
      var(--env-strong) 0 10px,
      var(--env-deep) 10px 20px
    )
    1;
}

.non-production-banner strong {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* The environment's name, stencilled diagonally across the viewport on every page. Fixed and
   click-through, above every z-indexed overlay. Native top-layer elements (showModal dialogs,
   popovers) still paint over it; no z-index can reach the top layer, and the canvas tint and
   banner around them still say which environment this is. Sized from
   the name's length (`--env-chars`, set inline) so "staging" fits the diagonal as well as "qa".
   The transparent band through the middle of the line cuts each glyph like a stencil bridge. */
.env-watermark {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2147483000;
  transform: translate(-50%, -50%) rotate(-28deg);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: min(calc(120vmax / var(--env-chars, 4)), 40vmin);
  line-height: 1;
  letter-spacing: 0.08em;
  /* Trailing letter-spacing would push the word off-centre. */
  margin-right: -0.08em;
  color: var(--env-strong);
  opacity: 0.09;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 47%, transparent 47% 55%, #000 55%);
  mask-image: linear-gradient(to bottom, #000 0 47%, transparent 47% 55%, #000 55%);
}

@media print {
  .env-watermark {
    opacity: 0.12;
  }

  /* Browsers drop backgrounds when printing, which would leave white text on white paper. */
  .non-production-banner {
    color: #000;
  }
}

.sscc-capacity-banner {
  background: #b91c1c;
  color: #fff;
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

.sscc-capacity-banner strong {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0.5rem 1rem 1.25rem;
}

/* App header – logo row + tabbed main nav */
.app-header {
  background: var(--color-bg);
  border-bottom: none;
  padding: 0;
  margin-bottom: 0;
}

.app-header-bar {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg);
}

.app-header-inner {
  width: 100%;
  margin: 0;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Phone-only chrome. Hidden ≥641px so desktop stays pixel-identical. */
.app-header-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.app-header-domain {
  display: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
}

.app-header-menu-btn:hover {
  background: var(--color-surface-muted);
}

.app-header-menu-btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.app-header-menu-btn-icon {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.app-phone-menu {
  /* Popover defaults; phone sheet overrides live in the ≤640px block. */
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 0;
  max-width: min(22rem, calc(100vw - 1.5rem));
  box-shadow: var(--shadow-lg);
}

.app-logo {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.app-logo:hover {
  color: var(--color-accent);
}

.app-nav-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.2rem;
  padding: 0.35rem 1.5rem 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-light);
}

.app-nav-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1rem;
  margin-bottom: -1px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 0.375rem 0.375rem 0 0;
  white-space: nowrap;
  background: transparent;
}

.app-nav-tab:hover {
  color: var(--color-text);
  background: var(--color-surface-muted, #f1f5f9);
  border-color: var(--color-border-light);
}

.app-nav-tab--active {
  color: #fff;
  font-weight: 600;
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 1px 0 var(--color-primary);
}

.app-nav-tab--active:hover {
  color: #fff;
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.app-nav-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.app-nav-tab--alpha {
  position: relative;
  gap: 0.35rem;
  overflow: hidden;
}

.app-nav-tab--alpha::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.14) 0%,
    rgba(245, 158, 11, 0.1) 100%
  );
}

.app-nav-tab--alpha:not(.app-nav-tab--active):hover::before {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.2) 0%,
    rgba(245, 158, 11, 0.14) 100%
  );
}

.app-nav-tab--alpha.app-nav-tab--active::before {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.06) 100%
  );
}

.app-nav-tab-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.08rem 0.35rem;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 3px;
}

.app-nav-tab-badge--alpha {
  color: #6d28d9;
  background: rgba(139, 92, 246, 0.18);
  border: 1px solid rgba(139, 92, 246, 0.35);
}

.app-nav-tab--active .app-nav-tab-badge--alpha {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.38);
}

.app-header-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.locale-toggle,
.locale-toggle-global {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
}

.locale-toggle-global {
  position: fixed;
  top: 0.5rem;
  right: 1rem;
  z-index: 1100;
}

.locale-option {
  color: var(--color-text-muted, #64748b);
  text-decoration: none;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
}

.locale-option:hover {
  color: var(--color-link);
}

.locale-option.locale-active {
  color: var(--color-link);
  font-weight: 600;
}

.locale-sep {
  color: var(--color-text-muted, #94a3b8);
  user-select: none;
}

/* "Improve this translation", shown beside the switcher to non-English readers. Set off from the
   language links by a rule rather than a separator: it is an action, not a fourth language. */
.translation-invite {
  margin-left: 0.5rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--color-border, #e2e8f0);
  font-size: 0.8125rem;
  color: var(--color-text-muted, #64748b);
  text-decoration: none;
}

.translation-invite:hover {
  color: var(--color-link);
  text-decoration: underline;
}

.app-header-user {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.header-feedback-link {
  font-size: 0.875rem;
  color: var(--color-link);
  text-decoration: none;
  margin-right: 0.5rem;
}

.header-feedback-link:hover {
  text-decoration: underline;
}

.feedback-page {
  max-width: min(56rem, 100%);
  margin: 0 auto;
}

.feedback-page__header h1 {
  margin-bottom: 0.25rem;
}

.feedback-page__subtitle {
  color: var(--color-text-muted, #64748b);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.feedback-context-hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #64748b);
  margin: 0 0 1rem;
}

.feedback-form .feedback-message-input {
  min-height: 9rem;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

/* Error pages (404 / 500) */
.error-layout-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.error-layout__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border-light, #f2f2f2);
  background: var(--color-surface, #fff);
}

.error-layout__main {
  flex: 1;
  padding: 2rem 1.5rem 3rem;
}

.locale-toggle-global--error {
  position: static;
}

.error-page {
  max-width: min(40rem, 100%);
  margin: 0 auto;
}

.error-page__hero {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border-light, #f2f2f2);
}

.error-page__code {
  margin: 0 0 0.5rem;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-accent, #4a6b4a);
  opacity: 0.35;
}

.error-page__title {
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.error-page__subtitle {
  margin: 0 0 1.5rem;
  color: var(--color-text-muted, #4a6b8a);
  font-size: 1rem;
  line-height: 1.5;
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.error-page__feedback-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.error-page__feedback-lead {
  margin: 0 0 1.25rem;
  color: var(--color-text-muted, #4a6b8a);
  font-size: 0.95rem;
}

.error-page__feedback .feedback-form .feedback-message-input {
  min-height: 7rem;
}

/* SAML roles popover */
.roles-popover {
  position: relative;
}

.roles-summary {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
}

.roles-summary::-webkit-details-marker {
  display: none;
}

.roles-summary:hover {
  color: var(--color-accent);
  background: var(--color-accent-muted);
}

.roles-popover-content {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  min-width: 12rem;
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 100;
}

.roles-popover-content strong {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-subtle);
  margin-bottom: 0.5rem;
}

.roles-popover-content ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.roles-popover-content li {
  padding: 0.25rem 0;
  font-size: 0.875rem;
}

/* Login */
.login {
  min-height: calc(100vh - 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.login-card {
  background: var(--color-surface);
  padding: 3rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
  max-width: 420px;
  width: 100%;
  border: 1px solid var(--color-border-light);
}

.login-title {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.login-subtitle {
  margin: 0 0 2.25rem;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.5;
}

.login-or {
  margin: 1.75rem 0 1rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.login-password-form {
  text-align: left;
  margin-bottom: 0.5rem;
}

.login-password-form .form-group {
  margin-bottom: 1rem;
}

.login-password-form label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.login-password-form .form-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: 1rem;
  background: var(--color-surface);
  color: var(--color-text);
}

.login-password-form .login-submit {
  width: 100%;
  margin-top: 0.25rem;
  border: none;
  cursor: pointer;
}

.login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  background: var(--color-primary);
  color: white;
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 1rem;
  transition: background var(--transition), transform var(--transition);
  box-shadow: var(--shadow-sm);
}

.login-button:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.login-button:active {
  transform: translateY(0);
}

.login-dev-links {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.login-dev-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  color: var(--color-text-subtle);
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}

.login-dev-link:hover {
  color: var(--color-text-muted);
  background: var(--color-border-light);
}

/* Dashboard */
.dashboard {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dashboard-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
}

.dashboard-header h1 {
  margin: 0;
  flex: 1;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.user-email {
  color: var(--color-accent-hover);
  font-size: 0.9rem;
  padding: 0.375rem 0.75rem;
  background: var(--color-accent-muted);
  border-radius: var(--radius-full);
  font-weight: 500;
}

.logout-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--transition), color var(--transition);
}

.logout-link:hover {
  background: var(--color-accent-muted);
  color: var(--color-accent-hover);
}

/* Shipment Tracker */
.tracker-section {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
}

.tracker-title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
}

.tracker-desc {
  margin: 0 0 1.5rem;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.tracker-form {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tracker-input {
  flex: 1;
  min-width: 200px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: var(--font-sans);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.tracker-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(74, 107, 74, 0.12);
}

.tracker-button {
  padding: 0.75rem 1.5rem;
  background: var(--color-primary);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-sans);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.tracker-button:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

/* Shipment Result */
.track-result {
  margin-top: 2rem;
}

.shipment-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-md);
}

.shipment-card h3 {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.shipment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.shipment-number {
  font-weight: 600;
  font-family: ui-monospace, monospace;
  color: var(--color-text);
}

.shipment-carrier {
  padding: 0.25rem 0.5rem;
  background: var(--color-border-light);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
}

.shipment-status {
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
}

.status-in_transit { background: #dbeafe; color: #1d4ed8; }
.status-delivered { background: #d1fae5; color: #047857; }
.status-empty_returned { background: #ccfbf1; color: #0d9488; }
.status-out_for_delivery { background: #fef3c7; color: #b45309; }
.status-pending { background: #f3f4f6; color: #4b5563; }
.status-exception { background: #fee2e2; color: #b91c1c; }
.status-unknown { background: #f3f4f6; color: #6b7280; }

.shipment-eta {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.shipment-route {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}

.route-point {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.route-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-subtle);
}

.route-address {
  font-size: 0.9375rem;
  color: var(--color-text);
}

.shipment-events h4 {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}

.events-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.875rem;
}

.event-item:last-child {
  border-bottom: none;
}

.event-date {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.event-desc {
  color: var(--color-text);
  font-weight: 500;
}

.event-location {
  color: var(--color-text-subtle);
  font-size: 0.8125rem;
}

.shipment-error {
  border-left: 4px solid #dc2626;
}

.shipment-error p {
  margin: 0;
  color: #991b1b;
}

/* Inbound Shipments – RoRo-style card */
.inbound-page {
  animation: fadeIn 0.3s ease;
}

/* Shipment detail: map next to fields, compact layout */
.inbound-shipment-detail .details-with-map {
  grid-column: 1 / -1;
}

.inbound-shipment-detail .details-and-map {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(320px, 420px);
  gap: 1rem;
  align-items: start;
}

.inbound-shipment-detail .details-list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.35rem 1.5rem;
}

.inbound-shipment-detail .detail-map-inline {
  position: sticky;
  top: 0.5rem;
}

.inbound-shipment-detail .detail-map-inline .shipment-map-container {
  min-height: 280px;
  height: 320px;
}

.inbound-shipment-detail .admin-carrier-api-raw {
  margin-top: 1rem;
  width: 100%;
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg-muted, #f1f5f9);
}

.inbound-shipment-detail .admin-carrier-api-raw__summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text, #0f172a);
  list-style-position: outside;
}

.inbound-shipment-detail .admin-carrier-api-raw__hint {
  display: block;
  margin-top: 0.25rem;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.inbound-shipment-detail .admin-carrier-api-raw__pre {
  margin: 0.75rem 0 0;
  padding: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  font-size: 0.75rem;
  line-height: 1.45;
  overflow: auto;
  max-height: 28rem;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 4px;
  white-space: pre;
  word-break: break-word;
}

/* Remove top spacing on shipment detail page */
main.container:has(.inbound-shipment-detail) {
  padding-top: 0;
}

.inbound-shipment-detail .page-header {
  margin-bottom: 0.5rem;
}

.inbound-shipment-detail .page-header-detail {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.inbound-shipment-detail .page-header-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.inbound-shipment-detail .page-header-detail .back-link {
  margin-bottom: 0;
  font-size: 0.9rem;
}

.inbound-shipment-detail .page-header h1 {
  font-size: 1.35rem;
  margin: 0;
}

.inbound-shipment-detail .shipment-badges {
  margin-top: 0;
  gap: 0.35rem;
}

.inbound-shipment-detail .shipment-badges .shipment-badge {
  font-size: 0.8rem;
  padding: 0.15rem 0.4rem;
}

.inbound-shipment-detail .shipment-badges .lifecycle-badge {
  font-size: 0.8rem;
  padding: 0.15rem 0.4rem;
}

.inbound-shipment-detail .shipment-badges .lifecycle-badge .lifecycle-icon {
  width: 11px;
  height: 11px;
  min-width: 11px;
  min-height: 11px;
  max-width: 11px;
  max-height: 11px;
  flex: 0 0 11px;
}

.inbound-shipment-detail .page-header-actions {
  gap: 0.5rem;
  margin-left: auto;
}

.inbound-shipment-detail .page-header-actions .btn {
  padding: 0.35rem 0.6rem;
  font-size: 0.9rem;
}

/* Inline forms were `display: inline`, which misaligns submit buttons vs anchor `.btn` in a flex row */
.inbound-shipment-detail .page-header-actions .page-header-action-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.inbound-shipment-detail .change-history-reveal {
  margin-bottom: 0.5rem;
}

.inbound-shipment-detail .change-history-summary {
  font-size: 0.9rem;
  padding: 0.25rem 0;
}

/* Single column: avoids row-1 gap where line items sat in col 1 and col 2 was empty
   (details card uses grid-column: 1 / -1 on the next row). */
.inbound-shipment-detail .detail-grid {
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.inbound-shipment-detail .detail-card {
  padding: 0.5rem 0.75rem;
}

.inbound-shipment-detail .detail-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.inbound-shipment-detail .detail-row {
  padding: 0.2rem 0;
  grid-template-columns: 110px 1fr;
  gap: 0.5rem;
  align-items: baseline;
}

.inbound-shipment-detail .detail-row dt {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #64748b);
}

.inbound-shipment-detail .detail-row dd {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text, #1e293b);
}

.inbound-shipment-detail .details-list .detail-section-title {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #64748b);
  margin: 0.75rem 0 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border-light, #e2e8f0);
}

.inbound-shipment-detail .details-list .detail-section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.inbound-shipment-detail .milestone-item {
  padding: 0.4rem 0;
  font-size: 0.9375rem;
}

.inbound-shipment-detail .form-group-block {
  padding: 0.5rem 0;
}

.inbound-shipment-detail .form-group-block h3 {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
}

.inbound-shipment-detail .form-group {
  margin-bottom: 0.5rem;
}

.inbound-shipment-detail .form-group label {
  font-size: 0.8rem;
}

.inbound-shipment-detail .form-input,
.inbound-shipment-detail .form-select {
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
}

.inbound-shipment-detail .shipment-map-container {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.inbound-shipment-detail .detail-card h3 {
  font-size: 0.875rem;
  margin: 0 0 0.35rem;
}

.inbound-shipment-detail .packing-list-section {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border-light, #e2e8f0);
}

.inbound-shipment-detail .packing-list-section:first-child {
  margin-top: 0.75rem;
  padding-top: 0;
  border-top: none;
}

.inbound-shipment-detail .packing-list-section-title {
  margin: 0 0 0.4rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text, #1e293b);
}

.inbound-shipment-detail .packing-list-section-meta {
  margin: 0 0 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text-muted, #64748b);
}

.inbound-shipment-detail .packing-list-section h4 {
  margin: 0.65rem 0 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #64748b);
}

.inbound-shipment-detail .empty-packing-list-lines {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted, #64748b);
}

.inbound-shipment-detail .container-items-block {
  margin-bottom: 1rem;
}

.inbound-shipment-detail .container-items-block:last-child {
  margin-bottom: 0;
}

.inbound-shipment-detail .container-items-block h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.inbound-shipment-detail .container-size-suffix {
  color: var(--color-text-muted);
  font-size: 0.9em;
  white-space: nowrap;
}

.inbound-shipment-detail .empty-container-items {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
}

.inbound-shipment-detail .shipment-table th,
.inbound-shipment-detail .shipment-table td {
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
}

.inbound-shipment-detail .shipment-table th {
  font-size: 0.8rem;
}

@media (max-width: 900px) {
  .inbound-shipment-detail .details-and-map {
    grid-template-columns: 1fr;
  }

  .inbound-shipment-detail .details-list {
    grid-template-columns: 1fr;
  }

  .inbound-shipment-detail .detail-map-inline {
    position: static;
  }

  .inbound-shipment-detail .detail-map-inline .shipment-map-container {
    min-height: 220px;
    height: 260px;
  }
}

/* Card container: rounded corners, light background */
.shipments-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-light);
}

/*
 * A card that holds a table cannot clip: `overflow: hidden` is a scroll
 * container and would stop the table's header pinning to the viewport. Only
 * such cards are changed, and they take their content's width so a table wider
 * than the screen stays wrapped by the card rather than bursting out of it —
 * the page scrolls sideways to reach the rest.
 *
 * Include `.po-items-table-wrap`: the PO show LINE ITEMS table uses that class,
 * not `.table-wrap`. Without it the card stayed `overflow: hidden` at page
 * width and the lines wrap became a nested H-scroll beside empty viewport.
 */
.shipments-card:has(.table-wrap),
.shipments-card:has(.plt-table-wrap),
.shipments-card:has(.unattributed-table-wrap),
.shipments-card:has(.po-items-table-wrap) {
  overflow: visible;
  width: max-content;
  min-width: 100%;
}

/*
 * Page chrome inside such a card stays page-width.
 *
 * The card being as wide as its table means everything the card lays out
 * against its right edge — the header's action buttons, the per-page control —
 * lands at the TABLE's right edge, which on inbound is ~1.3k px past the
 * window: you had to scroll sideways to reach "Add Shipment". Pin those ends
 * to the viewport instead. Sticky never moves a box outside its own container,
 * so a card no wider than the page is left exactly as it was, and a wider one
 * keeps its chrome on screen at every horizontal scroll position while the
 * bar's background still spans the table.
 *
 * The inset is the page gutter (`.container`'s 1rem) plus the pinned box's own
 * padding — 1.5rem on both the header and the section — so a pinned box sits
 * where it already sits when nothing is scrolled.
 */
.shipments-card:is(:has(.table-wrap), :has(.plt-table-wrap), :has(.unattributed-table-wrap), :has(.po-items-table-wrap)) .shipments-card-header-content {
  position: sticky;
  left: 2.5rem;
}

.shipments-card:is(:has(.table-wrap), :has(.plt-table-wrap), :has(.unattributed-table-wrap), :has(.po-items-table-wrap)) .shipments-card-header-actions,
.shipments-card:is(:has(.table-wrap), :has(.plt-table-wrap), :has(.unattributed-table-wrap), :has(.po-items-table-wrap)) .inbound-list-footer .inbound-per-page-form {
  position: sticky;
  right: 2.5rem;
}

/* Card title row — light bar, matches page (replaces former navy header) */
.shipments-card-header {
  background: var(--color-surface-muted, #f4f4f5);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--color-border-light);
}

.shipments-card-header-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-left: 0;
  min-width: 0;
}

.shipments-card-header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.shipments-card-header-count {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

.page-synced-at {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.page-synced-at--dual {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.35rem;
  row-gap: 0.15rem;
}

.page-synced-at--dual .page-synced-at__segment {
  display: inline;
  white-space: nowrap;
}

.page-synced-at__sep {
  color: var(--color-text-muted);
  font-weight: 400;
  user-select: none;
}

.page-synced-at__label {
  font-weight: 500;
  margin-right: 0.35rem;
}

.page-synced-at__value {
  font-variant-numeric: tabular-nums;
}

.shipments-card-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.shipments-card-header .btn {
  flex-shrink: 0;
}

/* Bell/notification button placeholder */
.shipments-card-header .btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-border-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
}

.shipments-card-header .btn-icon:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.shipments-card .shipments-section {
  padding: 1rem 1.5rem;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.page-header h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
}

.page-header-detail {
  flex-direction: column;
  align-items: stretch;
}

/* ASN (SAP inbound delivery) detail: keep the left column stacked but float the Sync button right. */
.inbound-delivery-doc-page .page-header-detail {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.inbound-delivery-doc-page .page-header-right {
  flex-shrink: 0;
}

.page-header-detail .back-link {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  text-decoration: none;
}

.page-header-detail .back-link:hover {
  color: var(--color-accent);
}

.page-header-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.shipment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: var(--font-sans);
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-primary);
  color: white;
}

.btn-primary:hover:not(:disabled):not([disabled]) {
  background: var(--color-primary-hover);
}

.btn-outline {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.btn-outline:hover:not(:disabled):not([disabled]) {
  background: var(--color-border-light);
  color: var(--color-text);
}

.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8125rem;
}

.actions-cell {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.actions-cell-form {
  display: inline;
}

.btn-danger,
.btn-outline.btn-danger {
  color: #dc2626;
  border: 1px solid #dc2626;
  background: transparent;
}

.btn-danger:hover,
.btn-outline.btn-danger:hover {
  background: #fef2f2;
  color: #b91c1c;
}

.table-link-danger {
  color: #dc2626;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.table-link-danger:hover {
  color: #b91c1c;
}

.delay-alerts {
  margin-bottom: 2.5rem;
}

.section-title {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
}

/* Shipment table – RoRo-style */
.shipments-card .table-wrap {
  /* No overflow here: sideways scrolling belongs to the page so the header
     can pin to the viewport. See the locked-header block. */
  border-radius: 0;
  border: none;
  background: #f8fafc;
  box-shadow: none;
}

.shipments-card .shipment-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: #f8fafc;
}

.shipments-card .shipment-table th,
.shipments-card .shipment-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.shipments-card .shipment-table th {
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: none;
  letter-spacing: 0;
}

.shipments-card .shipment-table tbody tr {
  background: white;
}

.shipments-card .shipment-table tbody tr:nth-child(even) {
  background: #fafbfc;
}

.shipments-card .shipment-table tbody tr:hover {
  background: #f1f5f9;
}

/* Tracking/Shipment ID badge (BOL, AWB) — top-align with dense inbound rows (td uses vertical-align: top) */
.tracking-id-cell {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.tracking-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 4px;
  background: #e9d5ff;
  color: #6b21a8;
  flex-shrink: 0;
}

.tracking-id-value {
  font-weight: 600;
  color: var(--color-text);
}

/* Status badges with icons – light blue style */
.shipments-card .shipment-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  background: #dbeafe;
  color: #1d4ed8;
}

.shipments-card .shipment-badge .status-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.9;
}

.shipments-card .shipment-badge.status-pending { background: #f1f5f9; color: #475569; }
.shipments-card .shipment-badge.status-in_transit { background: #dbeafe; color: #1d4ed8; }
.shipments-card .shipment-badge.status-out_for_delivery { background: #e0e7ff; color: #4338ca; }
.shipments-card .shipment-badge.status-delivered { background: #d1fae5; color: #047857; }
.shipments-card .shipment-badge.status-empty_returned { background: #ccfbf1; color: #0d9488; }
.shipments-card .shipment-badge.status-exception { background: #fee2e2; color: #b91c1c; }

.shipments-card .shipment-row-late-to-port {
  background: #fffbeb !important;
}

/* Background carrier sync: left-edge pulse on row + amber highlight on changed cells (cleared after ~3s) */
@keyframes inbound-row-left-pulse {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 rgba(59, 130, 246, 0);
  }
  40% {
    box-shadow: inset 5px 0 0 0 rgba(59, 130, 246, 0.45);
  }
}

.shipments-card .shipment-table tbody tr.shipment-row--bg-updated td:first-child {
  animation: inbound-row-left-pulse 1.05s ease-in-out 2;
}

.shipments-card .shipment-table td.inbound-cell--updated {
  box-shadow: inset 0 0 0 2px rgba(234, 179, 8, 0.85);
  background-color: rgba(254, 243, 199, 0.55);
  transition:
    box-shadow 2.4s ease-out,
    background-color 2.4s ease-out;
}

/* End inbound sync flash */

/* Compact inbound shipments listing */
.inbound-page .shipments-card-header {
  padding: 0.6rem 1rem;
}

/* The header's action bar is sticky, so it is its own stacking context: the Columns menu's
   z-index counts only inside it, and the list's sticky header cells (z-index 3) would paint over
   the open menu. Lift the bar while a menu in it is open. */
.inbound-page .shipments-card-header-actions:has(.wholesale-actions-menu.is-open) {
  z-index: 40;
}

.inbound-page .shipments-card-header h1 {
  font-size: 1.1rem;
}

.inbound-page .shipments-card-header-count {
  font-size: 0.8rem;
}

.inbound-page .shipments-card-header .btn {
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
}

.inbound-page .shipments-section {
  padding: 0.5rem 1rem;
}

.inbound-page .inbound-load-error {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fef2f2;
  color: #991b1b;
}

.inbound-page .inbound-list-table-wrap {
  position: relative;
}

.inbound-page .inbound-list-table-wrap--loading {
  pointer-events: none;
}

.inbound-page .inbound-list-table-wrap--loading .shipment-table {
  opacity: 0.45;
}

.inbound-page .inbound-list-table-loading-overlay {
  position: absolute;
  inset: 0;
  /* Above the locked header (z-index 4) so the veil covers the whole table. */
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
}

.inbound-page .inbound-list-table-loading-spinner {
  width: 1.35rem;
  height: 1.35rem;
}

/*
 * Inbound list: intrinsic column widths (auto layout + max-content width).
 * Wrapper scrolls horizontally when the table is wider than the viewport.
 * (Table lives inside .inbound-shipments-table-wrap, not as direct child of .shipments-section.)
 */
.inbound-page .shipments-card .shipments-section .table-wrap {
  /* No overflow here: sideways scrolling belongs to the page so the header
     can pin to the viewport. See the locked-header block. */
}

.inbound-page .shipments-card .shipments-section .table-wrap > table.shipment-table {
  table-layout: auto;
  width: max-content;
  max-width: none;
}

/*
 * Inbound list: pin the star and tracking columns while the table scrolls
 * sideways. No --lock-budget on purpose — the table takes its full height and
 * the page scrolls.
 *
 * 2.75rem is measured, not guessed: .col-star asks for 2.25rem but its button
 * plus padding needs 41.2px, so the column renders wider than the offset and
 * column 2 overlaps it. 44px clears min-content, so declared and rendered agree.
 */
.inbound-list-table-wrap {
  --lock-1: 2.75rem;
}

.inbound-list-table-wrap > table > thead th.col-lock-1,
.inbound-list-table-wrap > table > tbody td.col-lock-1,
.inbound-list-table-wrap > * > table > thead th.col-lock-1,
.inbound-list-table-wrap > * > table > tbody td.col-lock-1 {
  width: var(--lock-1);
  min-width: var(--lock-1);
}

.inbound-page .section-toolbar {
  margin-bottom: 0.5rem;
}

.inbound-page .section-toolbar .filter-select,
.inbound-page .section-toolbar .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}

/* Inbound index: filters + top pagination share one row */
.inbound-page .inbound-list-top-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.inbound-page .inbound-list-top-toolbar .inbound-filters-toolbar-row {
  flex: 0 0 auto;
}

.inbound-page .inbound-list-top-toolbar .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}

.inbound-page .inbound-list-top-toolbar .inbound-list-footer.inbound-list-footer--above {
  margin-top: 0;
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.inbound-page .shipments-card .shipment-table {
  font-size: 0.75rem;
}

.inbound-page .shipments-card .shipment-table th,
.inbound-page .shipments-card .shipment-table td {
  padding: 0.35rem 0.5rem;
  vertical-align: top;
  /* Override global .shipment-table min-widths so columns size to content */
  min-width: 0;
  max-width: none;
}

.inbound-page .shipments-card .shipment-table th {
  font-size: 0.7rem;
}

/* Tracking # — single line; column grows with content */
.inbound-page .shipments-card .shipment-table th.col-tracking,
.inbound-page .shipments-card .shipment-table td.col-tracking {
  white-space: nowrap;
}

.inbound-page .shipments-card .shipment-badge {
  padding: 0.2rem 0.4rem;
  font-size: 0.7rem;
}

.inbound-page .shipments-card .lifecycle-badge {
  padding: 0.2rem 0.4rem;
  font-size: 0.7rem;
}

/* Inbound list: dense table — keep phase icon slightly smaller than detail */
.inbound-page .shipments-card .lifecycle-badge .lifecycle-icon {
  width: 9px;
  height: 9px;
  min-width: 9px;
  min-height: 9px;
  max-width: 9px;
  max-height: 9px;
  flex-basis: 9px;
}

/* --- Inbound list column widths (table uses width:max-content; cap wide PO/collective, give origin/destination room) --- */

.inbound-page .shipments-card .shipment-table th.col-carrier,
.inbound-page .shipments-card .shipment-table td.col-carrier {
  max-width: 9.5rem;
  width: 9.5rem;
}

.inbound-page .shipments-card .shipment-table th.col-phase,
.inbound-page .shipments-card .shipment-table td.col-phase {
  /* Wide enough for icon + "Exception"/long phase + SlimSelect badge; avoids bleeding into ETA */
  min-width: 11rem;
  max-width: 14rem;
  width: 13rem;
  box-sizing: border-box;
}

.inbound-page .shipments-card .shipment-table td.col-phase .lifecycle-cell {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.inbound-page .shipments-card .shipment-table td.col-phase .status-form.status-form--lifecycle-badge {
  max-width: 100%;
}

.inbound-page .shipments-card .shipment-table th.col-origin,
.inbound-page .shipments-card .shipment-table td.col-origin,
.inbound-page .shipments-card .shipment-table th.col-destination,
.inbound-page .shipments-card .shipment-table td.col-destination {
  min-width: 7.5rem;
  max-width: 15rem;
  overflow-wrap: break-word;
  word-break: normal;
}

.inbound-page .shipments-card .shipment-table th.col-transport-mode,
.inbound-page .shipments-card .shipment-table td.col-transport-mode {
  max-width: 6.75rem;
  width: 6.75rem;
}

.inbound-page .shipments-card .shipment-table th.col-cartons,
.inbound-page .shipments-card .shipment-table td.col-cartons,
.inbound-page .shipments-card .shipment-table th.col-total-units,
.inbound-page .shipments-card .shipment-table td.col-total-units {
  text-align: right;
  white-space: nowrap;
}

.inbound-page .shipments-card .shipment-table th.col-eta,
.inbound-page .shipments-card .shipment-table td.col-eta,
.inbound-page .shipments-card .shipment-table th.col-delivery-eta,
.inbound-page .shipments-card .shipment-table td.col-delivery-eta,
.inbound-page .shipments-card .shipment-table th.col-on-time-target,
.inbound-page .shipments-card .shipment-table td.col-on-time-target {
  min-width: 10rem;
  width: 10rem;
  max-width: 12rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

.inbound-page .shipments-card .shipment-table td.col-on-time-target {
  overflow: hidden;
}

/* Manual delivery ETA badge: on its own line under the date, wrapping within its column. The
   Delivery ETA column is `nowrap` and at most 12rem, so an inline badge spilled into the next
   column once the reason was longer than a couple of words. */
.shipment-badge.manual-delivery-eta-badge,
.shipments-card .shipment-badge.manual-delivery-eta-badge {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.25rem;
  white-space: normal;
  line-height: 1.25;
}

.inbound-page .shipments-card .shipment-table td.col-delivery-eta .manual-delivery-eta-badge {
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
}

.on-time-target-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  min-width: 0;
}

.on-time-target-datetime {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.on-time-target-source,
.shipment-overlay-stat__source {
  display: inline-block;
  flex: 0 0 auto;
  padding: 0.05rem 0.3rem;
  border-radius: 0.2rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--color-text-secondary, #374151);
  background: var(--color-surface-muted, #f3f4f6);
  vertical-align: middle;
}

.delivery-eta-overdue {
  color: #c5221f;
}

.date-superseded {
  color: var(--color-text-muted, #6b7280);
}

.inbound-eta-ata-stack {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  line-height: 1.25;
}

.inbound-eta-ata-stack__row {
  display: block;
}

/* ETA row when ATA is recorded: clearly secondary (neutral gray, smaller, lighter weight). */
.inbound-eta-ata-stack__eta.date-superseded {
  color: #9ca3af;
  font-size: 0.8125rem;
  font-weight: 400;
  opacity: 0.9;
}

.inbound-eta-ata-stack--has-ata .inbound-eta-ata-stack__ata {
  color: var(--color-text);
  font-weight: 500;
}

.delivery-ata-from-carrier {
  color: var(--color-text-secondary, #374151);
}

.inbound-page .shipments-card .shipment-table th.col-on-time,
.inbound-page .shipments-card .shipment-table td.col-on-time {
  max-width: 7rem;
  width: 7rem;
}

.inbound-page .shipments-card .shipment-table th.col-po-asn-group,
.inbound-page .shipments-card .shipment-table td.col-po-asn-group {
  min-width: 28rem;
  max-width: 36rem;
  width: 32rem;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: normal;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.inbound-page .shipments-card .shipment-table td.col-po-asn-group .table-link {
  word-break: normal;
  white-space: nowrap;
}

/* PO | Collective | ASN aligned like spreadsheet rows (inbound index). */
.shipment-po-asn-matrix {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
  font-size: inherit;
  line-height: 1.35;
}

.shipment-po-asn-matrix__head-cell {
  padding: 0.15rem 0.35rem;
  border-right: 1px solid rgba(148, 163, 184, 0.45);
  text-align: left;
  min-width: 0;
}

.shipment-po-asn-matrix__head-cell:last-child {
  border-right: none;
}

.shipment-po-asn-matrix__head-cell .sortable-header {
  white-space: nowrap;
}

.shipment-po-asn-matrix--header {
  display: grid;
  grid-template-columns: minmax(5.5rem, 1fr) minmax(5.5rem, 1fr) minmax(6rem, 1.25fr);
  align-items: end;
  font-weight: 600;
  color: inherit;
}

.shipment-po-asn-matrix__line {
  display: grid;
  grid-template-columns: minmax(5.5rem, 1fr) minmax(5.5rem, 1fr) minmax(6rem, 1.25fr);
  border-top: 1px solid rgba(148, 163, 184, 0.35);
}

.shipment-po-asn-stacked-col {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  font-size: inherit;
  line-height: 1.35;
}

.shipment-po-asn-stacked-col__line {
  padding: 0.28rem 0.35rem;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  min-height: 1.35em;
}

.shipment-po-asn-stacked-col__line:first-child {
  border-top: none;
}

.shipment-po-asn-stacked-col--center .shipment-po-asn-stacked-col__line {
  text-align: center;
}

.inbound-page .shipments-card .shipment-table th.col-nri-received-doc,
.inbound-page .shipments-card .shipment-table td.col-nri-received-doc {
  min-width: 6.5rem;
  max-width: 9rem;
  vertical-align: top;
}

.inbound-page .shipments-card .shipment-table th.col-nri-asn-present,
.inbound-page .shipments-card .shipment-table td.col-nri-asn-present {
  min-width: 3.5rem;
  max-width: 5rem;
  vertical-align: top;
  text-align: center;
}

.inbound-page .shipments-card .shipment-table th.col-container-returned,
.inbound-page .shipments-card .shipment-table td.col-container-returned {
  min-width: 3.5rem;
  max-width: 5.5rem;
  vertical-align: top;
  text-align: center;
}

.inbound-page .shipments-card .shipment-table td.col-container-returned .container-returned-yes {
  color: #0f766e;
  font-weight: 600;
}

.shipment-po-asn-matrix__line:first-child {
  border-top: none;
}

.shipment-po-asn-matrix__cell {
  padding: 0.28rem 0.35rem;
  border-right: 1px solid rgba(148, 163, 184, 0.35);
  text-align: left;
  min-width: 0;
}

.shipment-po-asn-matrix__cell:last-child {
  border-right: none;
}

.spo-pending-sap-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 0.2rem;
  vertical-align: middle;
  white-space: nowrap;
}

/* Carrier Status: bound the column and ellipsize — max-width alone is ignored by
   auto table layout, so long "Services Completed: …" strings used to paint over Notes. */
.inbound-page .shipments-card .shipment-table th.col-carrier-status,
.inbound-page .shipments-card .shipment-table td.col-carrier-status {
  min-width: 9rem;
  width: 14rem;
  max-width: 14rem;
}

.inbound-page .shipments-card .shipment-table td.col-carrier-status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbound-page .shipments-card .shipment-table .origin-secondary,
.inbound-page .shipments-card .shipment-table .destination-secondary {
  font-size: 0.7rem;
}

.inbound-page .status-select {
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
}

@media (max-width: 640px) {
  .inbound-page .shipments-card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .inbound-page .shipments-card-header-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  /* No per-button floor, in every inbound header on a phone (wide card or not): at 10rem two
     never shared a 390px row, so /inbound stacked its five header buttons one per row. Short
     labels now pack and each row still fills the width. */
  .inbound-page .shipments-card-header-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }

  /*
   * Page chrome inside a card as wide as its table stays in the viewport.
   *
   * The column header above stretches its rows, and every row below is a block, so each takes
   * the CARD's width — the table's, 2–3k px — and lays its controls out across it: at 390px the
   * slot plan's export buttons measured 1043px wide at x=33, 1088 and 2144. The desktop rules pin
   * one end of each row; a phone needs both. Opt in with `.shipments-card-chrome` (a role-class
   * allowlist left new toolbars stretching silently). Bound the row to the viewport and pin it at
   * its *natural* inset — container gutter plus the padding of the header / section / card that
   * owns it — so it does not jump on the first pixel of sideways scroll while the table — and only
   * the table — scrolls with the page, keeping its header able to pin. Never blanket-select
   * non-table children: overlays and dialogs inside the card must stay `absolute`/`fixed`.
   */
  :is(.inbound-page, .purchase-orders-page) {
    /* PO (and any non-inbound page): container 1rem + card pad 1.5rem */
    --shipments-card-chrome-inset: 2.5rem;
  }

  .inbound-page {
    /* container 1rem + inbound header pad 1rem */
    --shipments-card-chrome-inset: 2rem;
  }

  .inbound-page .shipments-section {
    /* container 1rem + phone section pad 0.65rem */
    --shipments-card-chrome-inset: 1.65rem;
  }

  /* Report titles/filters/hints that sit as direct children of the card (no section pad). */
  .inbound-page .shipments-card > .shipments-card-chrome {
    --shipments-card-chrome-inset: 1rem;
  }

  /* PO show section pad is 1.25rem, not the list section's 1.5rem. */
  .po-show-page .po-show-section {
    --shipments-card-chrome-inset: 2.25rem;
  }

  :is(.inbound-page, .purchase-orders-page) .shipments-card:is(:has(.table-wrap), :has(.plt-table-wrap), :has(.unattributed-table-wrap), :has(.po-items-table-wrap)) .shipments-card-chrome {
    box-sizing: border-box;
    max-width: calc(100vw - (2 * var(--shipments-card-chrome-inset)));
    position: sticky;
    left: var(--shipments-card-chrome-inset);
  }

  /* Desktop keeps the filter row one line wide (`flex: 0 0 auto`); inside the bounded toolbar
     that pushed "+ Add filter" past the window. Give it the toolbar's width and let it wrap. */
  :is(.inbound-page, .purchase-orders-page) .inbound-list-top-toolbar .inbound-filters-toolbar-row {
    flex: 1 1 100%;
    min-width: 0;
  }

  .inbound-page .shipments-section {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }

  .inbound-page .section-toolbar .filter-form {
    flex-direction: column;
    align-items: stretch;
  }

  .inbound-page .section-toolbar .filter-form .filter-select,
  .inbound-page .section-toolbar .filter-form .btn {
    width: 100%;
    max-width: none;
  }
}

.shipments-card .shipment-row-late-to-port:hover {
  background: #fef3c7 !important;
}

/* Origin / Destination columns: primary + secondary lines */
.shipment-table .col-origin,
.shipment-table .col-destination {
  min-width: 11rem;
}

.shipment-table .col-eta {
  min-width: 10rem;
}

.carrier-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.carrier-cell .carrier-sync-form,
.carrier-cell .carrier-sync-btn {
  display: inline;
}

.origin-cell,
.destination-cell {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.origin-primary,
.destination-primary {
  font-weight: 600;
  color: var(--color-text);
}

.origin-secondary,
.destination-secondary {
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

/* Soft marker when carrier stub matching linked via city/country (not name/shipper). */
.facility-match-fuzzy {
  margin-left: 0.2em;
  font-weight: 500;
  color: var(--color-text-subtle);
  cursor: help;
}

/* ⚠️ next to a tracking number the carrier reported invalid / not found. */
.tracking-invalid-warning {
  margin-left: 0.25em;
  font-size: 0.875em;
  cursor: help;
}

/* Legacy table (non-card) */
.table-wrap {
  /* No overflow here: sideways scrolling belongs to the page so the header
     can pin to the viewport. See the locked-header block. */
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

/*
 * Locked table headers - shared plumbing for every table wrapper.
 *
 * Page-level table views are NOT height-capped. A full-page table grows to
 * its content and the page itself scrolls; there is deliberately no default
 * --lock-budget. (An earlier pass capped every wrapper at a viewport
 * fraction, which turned the list pages into short framed scrollboxes with
 * their own vertical scrollbars — reverted by request. Do not reintroduce a
 * default budget.)
 *
 * A wrapper inside a height-constrained panel — the PO overlay's line items,
 * the PIM mini table, the campaign detail table, the PO show page's line
 * items — sets --lock-budget, becomes its own scrollport, and pins its thead
 * against it. Without a budget the sticky rules below are inert (a wrapper
 * that never scrolls vertically never moves its header), which is the
 * intended behaviour, not an oversight.
 *
 * The five classes below are the app's table wrappers (.table-wrap is the
 * canonical one; the other four predate it and are not being renamed today).
 * A wrapper that genuinely must not take any of this uses .table-wrap--unlocked.
 *
 * A table that scrolls sideways can pin up to two identity columns by
 * marking them .col-lock-1 / .col-lock-2 on BOTH the th and the td. That part
 * stays per-table: which columns carry a row's identity is a judgement call,
 * and two is the ceiling on purpose - past that the frozen block eats the
 * screen it was meant to save. (Pre-SPA's `.plt-pre-spa-wrap` is the one
 * deliberate exception: it adds a table-scoped .col-lock-3 for SKU / Style
 * Name / Color.)
 *
 * Five things make it work, and all five are easy to lose:
 *   - border-collapse is deliberately NOT touched. Forcing `separate` (so a
 *     header hairline travels with the sticky th rather than being painted by
 *     the table) was insurance against a Chromium bug fixed in 99, and it
 *     doubles every internal rule on the five tables whose cells paint a full
 *     `border:` — the footwear size grids, delivery plan, the PLT sub-tables.
 *     Sticky headers verified working under `collapse`, so each table keeps
 *     whatever it already declares.
 *   - every sticky cell needs an opaque background. Header cells mostly have
 *     one; locked body cells take `background: inherit`, which resolves to the
 *     <tr>'s computed colour and so tracks zebra / hover / late-to-port /
 *     row-flash states for free.
 *   - the table is matched at `> table` AND `> * > table`, because some
 *     wrappers (container line items) put a div in between. Stopping at two
 *     levels is deliberate: a table nested inside a row is at least three deep
 *     and must not pin its header against the outer scrollport.
 *   - --lock-1 is column 1's width AND column 2's left offset. Under auto table
 *     layout a declared width is only a floor, so --lock-1 has to be at least
 *     column 1's min-content width or column 2 pins short and overlaps it. If
 *     that column already has a width rule of its own (.col-star does), the
 *     page has to restate it from --lock-1 to outweigh it.
 *   - a sticky header needs a scrollport to stick against, and only
 *     --lock-budget creates one. Set it exclusively on wrappers inside
 *     height-constrained panels (overlays, detail sub-tables), never on a
 *     page-level table view.
 */
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) {
  --lock-shadow: 0 6px 10px -8px rgba(16, 33, 55, 0.35);
  --lock-edge: 8px 0 10px -10px rgba(16, 33, 55, 0.45);
  max-height: var(--lock-budget, none);
  /*
   * `visible`, not `auto`. A sticky thead pins against the nearest scroll
   * container, and BOTH `auto` and `hidden` create one — so any overflow here
   * would make the header pin against a box that never scrolls, i.e. do
   * nothing. With `visible` the nearest scrollport is the page, so the header
   * pins to the viewport and rows scroll past under it.
   *
   * The cost is that sideways scrolling belongs to the page now. That is
   * forced, not chosen: `overflow-x: auto` computes `overflow-y` to `auto`,
   * and `overflow-y: clip` computes to `hidden` — there is no way to scroll
   * one axis here and still pin to the viewport.
   *
   * Wrappers inside a height-constrained panel want the opposite and set both
   * --lock-budget and `overflow: auto` for themselves; they pin against their
   * own scrollport.
   */
  overflow: visible;
}

/* Zero specificity so a page's own --lock-1 always wins. */
:where(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap) {
  --lock-1: 2.25rem;
}

:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > table > thead th,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > * > table > thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: var(--lock-shadow);
}

/* Zero-specificity, so any table that dresses its own header still wins; this
   only catches the ones that would otherwise pin a transparent header. */
:where(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap) > table > thead th,
:where(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap) > * > table > thead th {
  background: var(--color-border-light);
}

/* Sideways lock - per table, and scoped the same way. */
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > table > thead .col-lock-1,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > * > table > thead .col-lock-1,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > table > thead .col-lock-2,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > * > table > thead .col-lock-2,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > table > tbody .col-lock-1,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > * > table > tbody .col-lock-1,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > table > tbody .col-lock-2,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > * > table > tbody .col-lock-2 {
  position: sticky;
  z-index: 1;
}

:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > table > thead .col-lock-1,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > * > table > thead .col-lock-1,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > table > thead .col-lock-2,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > * > table > thead .col-lock-2 {
  z-index: 4;
}

:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > table > thead .col-lock-1,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > * > table > thead .col-lock-1,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > table > tbody .col-lock-1,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > * > table > tbody .col-lock-1 {
  left: 0;
  width: var(--lock-1);
  min-width: var(--lock-1);
}

:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > table > thead .col-lock-2,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > * > table > thead .col-lock-2,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > table > tbody .col-lock-2,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > * > table > tbody .col-lock-2 {
  left: var(--lock-1);
}

:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > table > tbody .col-lock-1,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > * > table > tbody .col-lock-1,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > table > tbody .col-lock-2,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > * > table > tbody .col-lock-2 {
  background: inherit;
}

:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > table > tbody .col-lock-2,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > * > table > tbody .col-lock-2 {
  box-shadow: var(--lock-edge);
}

:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > table > thead .col-lock-2,
:is(.table-wrap, .plt-table-wrap, .po-items-table-wrap, .pim-mini-table-wrap, .unattributed-table-wrap):not(.table-wrap--unlocked) > * > table > thead .col-lock-2 {
  box-shadow: var(--lock-shadow), var(--lock-edge);
}

.shipment-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.shipment-table th,
.shipment-table td {
  padding: 0.35rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
}

/* Number columns in a plain shipment-table (shipment report, taxonomy coverage, PO list). The
   class was used for years with no rule behind it, so those numbers sat left-aligned. Tables that
   are a `.data-grid` use `num` instead (see the data-grid block). */
.shipment-table th.col-numeric,
.shipment-table td.col-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.shipment-table th.sortable {
  white-space: nowrap;
}

.shipment-table .sortable-header {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.shipment-table .sortable-header:hover {
  text-decoration: underline;
}

.shipment-table .sortable-header.sort-asc::after {
  content: " ↑";
  font-size: 0.75em;
  opacity: 0.8;
}

.shipment-table .sortable-header.sort-desc::after {
  content: " ↓";
  font-size: 0.75em;
  opacity: 0.8;
}

/* LiveView adds `phx-*-loading` on the triggering control until the server reply is handled. */
.shipment-table button.sortable-header.phx-click-loading {
  opacity: 0.65;
  pointer-events: none;
  cursor: wait;
}

.shipment-table button.sortable-header.phx-click-loading::before {
  content: "";
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  margin-right: 0.35rem;
  border: 2px solid var(--color-border-light, #e2e8f0);
  border-top-color: var(--color-text-muted, #64748b);
  border-radius: 50%;
  vertical-align: -0.1em;
  animation: catalog-inline-spin 0.65s linear infinite;
}

.btn.phx-click-loading {
  opacity: 0.75;
  cursor: wait;
  pointer-events: none;
}

.btn.phx-click-loading::after {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.4rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  vertical-align: -0.12em;
  animation: catalog-inline-spin 0.65s linear infinite;
}

.btn.btn-outline.phx-click-loading::after {
  border: 2px solid var(--color-border-light, #e2e8f0);
  border-top-color: var(--color-text-muted, #64748b);
}

.catalog-row-clickable.phx-click-loading {
  opacity: 0.7;
  cursor: wait;
}

.catalog-open-overlay.phx-click-loading {
  opacity: 0.7;
  cursor: wait;
}

@keyframes catalog-inline-spin {
  to {
    transform: rotate(360deg);
  }
}

.catalog-inline-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border: 2px solid var(--color-border-light, #e2e8f0);
  border-top-color: var(--color-text-muted, #64748b);
  border-radius: 50%;
  vertical-align: -0.12em;
  animation: catalog-inline-spin 0.65s linear infinite;
}

p.catalog-loading-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.shipment-table th {
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-border-light);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Do not apply to nested footwear grids (.shipment-table--footwear-sizes) */
.shipment-table:not(.shipment-table--footwear-sizes) tbody tr:last-child td {
  border-bottom: none;
}

.shipment-row:hover {
  background: var(--color-border-light);
}

.shipment-row-late-to-port {
  background: #fffbeb;
}

.shipment-row-late-to-port:hover {
  background: #fef3c7;
}

.table-link {
  font-weight: 500;
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.table-link:hover {
  text-decoration: underline;
}

/* Native <button> defaults look like a grey pill; strip chrome so .table-link reads as text. */
button.table-link {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  text-align: inherit;
}

.table-link-external,
.tracking-link-external {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sap-external-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 0.12em;
  white-space: nowrap;
}

.sap-external-link:hover {
  color: #1d4ed8;
}

.sap-external-link--header {
  margin-left: 0.5rem;
}

.sap-external-link--overlay-title {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.sap-external-link--compact {
  font-size: 0.8125rem;
}

.status-form {
  display: inline-block;
  padding: 0;
  margin: 0;
  line-height: 1;
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

.status-form .status-select {
  font-size: 0.75rem;
  padding: 0.05rem 0.2rem;
  min-height: 1.5em;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: transparent;
  color: inherit;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: menulist;
  appearance: menulist;
}

/* Colored options in dropdown - limited browser support but improves where available */
.status-form .status-select option[value="pending"] { background: #f3f4f6; color: #4b5563; }
.status-form .status-select option[value="in_transit"] { background: #dbeafe; color: #1d4ed8; }
.status-form .status-select option[value="out_for_delivery"] { background: #fef3c7; color: #b45309; }
.status-form .status-select option[value="delivered"] { background: #d1fae5; color: #047857; }
.status-form .status-select option[value="empty_returned"] { background: #ccfbf1; color: #0d9488; }
.status-form .status-select option[value="exception"] { background: #fee2e2; color: #b91c1c; }

/* Inbound list: one control — lifecycle-colored badge wraps the carrier status <select> */
.status-form.status-form--lifecycle-badge {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  line-height: 1;
}

.lifecycle-badge.lifecycle-badge--select {
  margin: 0;
  cursor: pointer;
}

.lifecycle-badge.lifecycle-badge--select:focus-within {
  outline: 2px solid rgba(59, 130, 246, 0.55);
  outline-offset: 1px;
}

.lifecycle-badge.lifecycle-badge--select .lifecycle-badge__select {
  display: inline-block;
  font-size: inherit;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  border: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
  padding: 0 0.15rem 0 0;
  margin: 0;
  min-height: 0;
  cursor: pointer;
  max-width: 12rem;
  min-width: 0;
  vertical-align: middle;
  -webkit-appearance: menulist;
  appearance: menulist;
}

.lifecycle-badge.lifecycle-badge--select .lifecycle-badge__select:focus {
  outline: none;
}

.lifecycle-badge.lifecycle-badge--select .lifecycle-badge__select option[value="pending"] { background: #f3f4f6; color: #4b5563; }
.lifecycle-badge.lifecycle-badge--select .lifecycle-badge__select option[value="in_transit"] { background: #dbeafe; color: #1d4ed8; }
.lifecycle-badge.lifecycle-badge--select .lifecycle-badge__select option[value="out_for_delivery"] { background: #fef3c7; color: #b45309; }
.lifecycle-badge.lifecycle-badge--select .lifecycle-badge__select option[value="delivered"] { background: #d1fae5; color: #047857; }
.lifecycle-badge.lifecycle-badge--select .lifecycle-badge__select option[value="empty_returned"] { background: #ccfbf1; color: #0d9488; }
.lifecycle-badge.lifecycle-badge--select .lifecycle-badge__select option[value="exception"] { background: #fee2e2; color: #b91c1c; }
.lifecycle-badge.lifecycle-badge--select .lifecycle-badge__select option[value="cancelled"] { background: #f3f4f6; color: #4b5563; }

.inbound-page .shipments-card .lifecycle-badge.lifecycle-badge--select {
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
}

.inbound-page .shipments-card .lifecycle-badge.lifecycle-badge--select .lifecycle-badge__select {
  font-size: 0.7rem;
  /* Global rule allows 12rem — wider than the phase column, so content painted into the next cell */
  max-width: 100%;
  box-sizing: border-box;
}

.ext-link-icon {
  flex-shrink: 0;
  opacity: 0.7;
  vertical-align: middle;
}

.table-link-external:hover .ext-link-icon,
.tracking-link-external:hover .ext-link-icon {
  opacity: 1;
}

.shipment-table td {
  color: var(--color-text);
}

.shipment-table .empty-cell {
  color: var(--color-text-subtle);
}

.shipment-table .notes-cell {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shipment-badge {
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-late-to-port {
  background: #fef3c7;
  color: #b45309;
}

.shipment-badge.carrier {
  background: var(--color-border-light);
  color: var(--color-text-muted);
}

/* Computed shipment lifecycle (derived from dates + carrier status; not a DB column) */
.lifecycle-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.lifecycle-badge {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.lifecycle-badge__label {
  white-space: nowrap;
}

/* Wholesale fulfillability RAG badge (green = fulfillable now, yellow = covered by inbound, red = short). */
.wholesale-rag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}
.wholesale-rag::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: currentColor;
}
.wholesale-rag--green { background: #d1fae5; color: #047857; }
.wholesale-rag--yellow { background: #fef3c7; color: #b45309; }
.wholesale-rag--red { background: #fee2e2; color: #b91c1c; }
/* No verdict: the line's SAP material resolves to no catalog variant. Muted on purpose — not red. */
.wholesale-rag--unresolved { background: #f3f4f6; color: #6b7280; }
.wholesale-unresolved-notice { margin: 0.5rem 0 0; }

/* Ready-to-ship badge (confirmed + available now; China drop-ship skips the stock check). */
.wholesale-rts {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  background: #e0e7ff;
  color: #3730a3;
}

/* Tight fixed box — prevents flex/grid from stretching SVG to column width (table cells + max-width:100% on svg) */
.lifecycle-badge .lifecycle-icon {
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  max-width: 10px;
  max-height: 10px;
  flex: 0 0 10px;
  display: block;
}

.lifecycle-booked,
.lifecycle-ordered {
  background: #f3f4f6;
  color: #374151;
}

.lifecycle-in_transit {
  background: #dbeafe;
  color: #1d4ed8;
}

.lifecycle-arrived {
  background: #e0f2fe;
  color: #0369a1;
}

.lifecycle-pending_delivery_appointment {
  background: #fef3c7;
  color: #b45309;
}

.lifecycle-delivery_scheduled {
  background: #fde68a;
  color: #92400e;
}

/* Delivered is green and Received is orange so the two read apart from In Transit (blue)
   and from each other at a glance in the inbound list. */
.lifecycle-delivered {
  background: #d1fae5;
  color: #047857;
}

.lifecycle-received {
  background: #fed7aa;
  color: #9a3412;
}

.lifecycle-partially_received {
  background: #fef9c3;
  color: #854d0e;
}

.lifecycle-over_received {
  background: #fee2e2;
  color: #b91c1c;
}

.lifecycle-empty_return {
  background: #ccfbf1;
  color: #0f766e;
}

.shipment-badge.shipment-badge--container-return {
  background: #ccfbf1;
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 600;
}

.shipment-container-return-block {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
}

.shipment-container-return__title {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--color-text);
}

.shipment-container-return__cards {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lifecycle-exception {
  background: #fee2e2;
  color: #b91c1c;
}

.lifecycle-cancelled {
  background: #f3f4f6;
  color: #4b5563;
}

.lifecycle-unknown {
  background: #f3f4f6;
  color: #6b7280;
}

.transport-mode-cell {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

.transport-mode-cell .transport-mode-badge {
  margin-left: 0;
}

.transport-mode-cell__label {
  font-size: 0.85rem;
  color: var(--color-text);
}

.transport-mode-cell__empty {
  color: var(--color-text-muted);
}

.transport-mode-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 0.25rem;
}

.transport-mode-icon,
.drayage-required-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.transport-mode-icon--air {
  color: #0ea5e9;
}

.transport-mode-icon--air-express {
  color: #d97706;
}

.transport-mode-icon--ocean {
  color: #0369a1;
}

.transport-mode-badge--drayage .drayage-required-icon {
  color: #b45309;
}

.section-toolbar {
  margin-bottom: 1rem;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.filter-select {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  font-family: var(--font-sans);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.filter-search {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  font-family: var(--font-sans);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  min-width: 12rem;
}

.text-muted {
  color: var(--color-text-muted);
}

/* Catalog area: inverted subnav + toolbars (no duplicate page title under main nav) */
.catalog-inline-count {
  display: inline;
  font-weight: 600;
  color: var(--color-text);
  margin-right: 0.35rem;
}

.catalog-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.15rem;
  margin: 0 0 0.75rem;
  padding: 0.35rem 0.4rem;
  list-style: none;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  border: none;
}
.catalog-subnav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: none;
  margin-bottom: 0;
  transition: color var(--transition), background var(--transition);
}
.catalog-subnav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}
.catalog-subnav-link--active {
  color: var(--color-primary);
  font-weight: 600;
  background: #fff;
}
.catalog-subnav-link--active:hover {
  color: var(--color-primary);
  background: #fff;
}
.catalog-subnav-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.catalog-page .section-toolbar--catalog {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem 1rem;
}
.catalog-page .section-toolbar--catalog .filter-form {
  flex: 1 1 18rem;
  min-width: 0;
}
.catalog-page .catalog-pagination {
  margin: 0.75rem 0 1rem;
}

.catalog-page .section-toolbar--catalog .catalog-upload-btn {
  flex-shrink: 0;
}

.catalog-page .section-toolbar--fo .filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.catalog-page .section-toolbar--fo .fo-filter-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.catalog-page .section-toolbar--fo .fo-date-filter {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.catalog-page .section-toolbar--fo .fo-date-filter__field {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
}

.catalog-page .section-toolbar--fo .fo-date-filter__input {
  padding: 0.25rem 0.4rem;
  font-size: 0.875rem;
}

.catalog-actions-row,
.admin-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.5rem 0 0.75rem;
}
.catalog-actions-row__subtitle,
.admin-actions-row__subtitle {
  margin: 0 !important;
  flex: 1 1 16rem;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  font-weight: 400;
}
.catalog-actions-row__primary,
.admin-actions-row__back {
  flex-shrink: 0;
}

.catalog-taxonomy-filters {
  align-items: flex-end;
  gap: 0.75rem 1rem;
}
.catalog-taxonomy-leaf {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  color: var(--color-text);
}
.catalog-taxonomy-leaf input {
  width: 1rem;
  height: 1rem;
}
.catalog-filter-label-text {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 0.15rem;
}
.catalog-taxonomy-table .catalog-taxonomy-full-name {
  max-width: 28rem;
}
.catalog-taxonomy-gid {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog-page .filter-field-label {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
}
.catalog-page .filter-select--taxonomy {
  min-width: 12rem;
  max-width: min(22rem, 100%);
}
.catalog-page .page-subtitle {
  margin: 0.5rem 0 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

.catalog-page .fo-report-help {
  margin: 0 0 1rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 8px);
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(30, 58, 95, 0.08);
}

.catalog-page .fo-report-help__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--color-text);
  letter-spacing: 0.01em;
}

.catalog-page .fo-report-help__list {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(5.5rem, max-content) 1fr;
  column-gap: 1rem;
  row-gap: 0.55rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

@media (max-width: 520px) {
  .catalog-page .fo-report-help__list {
    grid-template-columns: 1fr;
    row-gap: 0.35rem;
  }

  .catalog-page .fo-report-help__list dt:not(:first-child) {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
  }
}

.catalog-page .fo-report-help__list dt {
  margin: 0;
  font-weight: 600;
  color: var(--color-text);
}

.catalog-page .fo-report-help__list dd {
  margin: 0;
}

.catalog-table .quantity-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Product thumbnail column (catalog + Products On Order footwear) */
.col-product-thumb {
  width: 3.25rem;
  max-width: 3.25rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  vertical-align: middle;
  text-align: center;
}

.product-thumb-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.25rem;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

.product-thumb-img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  display: block;
}

.product-thumb-placeholder {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.25rem;
  background: rgba(0, 0, 0, 0.04);
  border: 1px dashed var(--color-border, rgba(0, 0, 0, 0.12));
  box-sizing: border-box;
  vertical-align: middle;
}

.shipment-table--line-items-grid .col-product-thumb {
  width: 3rem;
  max-width: 3rem;
}

.fo-links-cell {
  vertical-align: top;
  line-height: 1.35;
}

.fo-links-cell__line + .fo-links-cell__line {
  margin-top: 0.25rem;
}

.catalog-row-discrepancy {
  background: rgba(180, 60, 60, 0.06);
}

.catalog-row-clickable {
  cursor: pointer;
}
.catalog-row-clickable:hover {
  background: rgba(0, 0, 0, 0.02);
}
.catalog-row-clickable.catalog-row-discrepancy:hover {
  background: rgba(180, 60, 60, 0.1);
}

.catalog-table--style-tree .catalog-style-tbody + .catalog-style-tbody .catalog-style-row {
  border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

.catalog-style-row {
  background: rgba(0, 0, 0, 0.03);
  font-weight: 500;
}

.catalog-style-row td {
  vertical-align: middle;
}

.catalog-color-row td {
  vertical-align: middle;
}

/* Hover without row-level phx-click (Safari-friendly overlay targets on cells). */
.catalog-table--style-tree tr.catalog-color-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* Safari / iOS: real click targets need explicit pointer + manipulation to avoid ghost taps. */
.catalog-open-overlay {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.catalog-color-sku-wrap {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.catalog-sku-cell-inner {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* Product (colorway) disclosure + SKU sit one step right of the style row in the same column */
.catalog-color-row .catalog-sku-cell-inner {
  padding-left: 2.7rem;
}

/* Variants nest another step under products */
.catalog-variant-row .catalog-sku-cell-inner {
  padding-left: 5.4rem;
}

.catalog-disclosure-slot {
  flex: 0 0 3rem;
  width: 3rem;
  min-width: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.catalog-disclosure-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  vertical-align: middle;
  box-sizing: border-box;
}

.catalog-disclosure-btn--boxed {
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  border: none;
  background: transparent;
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1;
  font-family: ui-sans-serif, system-ui, "Segoe UI Symbol", "Apple Symbols", sans-serif;
}

.catalog-disclosure-btn--boxed:hover {
  background: rgba(0, 0, 0, 0.06);
}

/*
 * Disclosure ⊞/⊟ via ::before only (no text-node children). WebKit often reports the Text node as
 * click target; Phoenix LiveView walks event.target with el.matches('[data-phx-click]'), which
 * throws on Text nodes — first tap looks dead until the user hits padding or uses another row.
 */
.catalog-disclosure-btn--glyph-toggle::before {
  content: "⊞";
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Boolean aria-expanded={true} is minimized (no ="true"); collapsed omits the attribute */
.catalog-disclosure-btn--glyph-toggle[aria-expanded]::before {
  content: "⊟";
}

.catalog-disclosure-placeholder {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  flex-shrink: 0;
  box-sizing: border-box;
  visibility: hidden;
}

.catalog-style-sku,
.catalog-color-sku {
  font-weight: 600;
}

.catalog-variant-row td {
  border-top: none;
  vertical-align: middle;
  padding-top: 0.2rem;
  padding-bottom: 0.35rem;
}

.catalog-table--style-tree tr.catalog-variant-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

.catalog-variant-sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
}

.catalog-variant-size {
  margin-left: 0.35rem;
  font-weight: 400;
  font-family: inherit;
  color: var(--color-text-muted, #555);
}

.catalog-merge-backdrop {
  z-index: 920;
}
.catalog-merge-dialog {
  max-width: min(56rem, 96vw);
  max-height: 90vh;
  overflow: auto;
}
.catalog-merge-keep-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}
.catalog-merge-lead,
.catalog-merge-note {
  font-size: 0.9375rem;
  margin: 0.35rem 0;
}
.catalog-merge-table .catalog-merge-cell-value {
  margin-bottom: 0.35rem;
  word-break: break-word;
}
.catalog-merge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.col-merge-check {
  width: 2.5rem;
  text-align: center;
}

.catalog-sku-alias-hint {
  font-size: 0.875rem;
  margin: 0 0 0.35rem;
  color: var(--color-text-muted);
}
.catalog-sku-alias-list {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}
.catalog-sku-alias-code {
  font-size: 0.9375rem;
}

/* Admin: inverted subnav (matches .catalog-subnav) */
.admin-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.15rem;
  margin: 0 0 0.75rem;
  padding: 0.35rem 0.4rem;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  border: none;
}
.admin-subnav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: none;
  margin-bottom: 0;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.admin-subnav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}
.admin-subnav-link--active {
  color: var(--color-primary);
  font-weight: 600;
  background: #fff;
}
.admin-subnav-link--active:hover {
  color: var(--color-primary);
  background: #fff;
}
.admin-subnav-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Admin: Configuration */
.config-page {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
}
.config-legend {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 0.5rem 0 1.5rem;
  padding: 0.6rem 0.85rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}
.config-layout {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: 1.5rem 2rem;
  align-items: start;
}
@media (max-width: 52rem) {
  .config-layout {
    grid-template-columns: 1fr;
  }
}
.config-sidebar {
  position: sticky;
  top: 0.75rem;
  padding: 0.25rem 0;
}
@media (max-width: 52rem) {
  .config-sidebar {
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--color-border, #e2e2e2);
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
  }
}
.config-sidebar__heading {
  margin: 0 0 0.5rem;
  padding: 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted, #888);
}
.config-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
@media (max-width: 52rem) {
  .config-sidebar__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.35rem;
  }
}
.config-sidebar__link {
  display: block;
  padding: 0.4rem 0.65rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
.config-sidebar__link:hover {
  background: var(--color-surface-muted);
  color: var(--color-primary);
}
.config-sidebar__link:focus-visible {
  outline: 2px solid var(--color-primary, #1e3a5f);
  outline-offset: 1px;
}
/* Scroll-spy active state (JS ConfigScrollSpy hook): the Slack-style solid pill. */
.config-sidebar__link--active,
.config-sidebar__link--active:hover {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
}
.config-main {
  min-width: 0;
}
.config-section {
  scroll-margin-top: 0.75rem;
  margin-bottom: 2rem;
}
.config-section__title.admin-section-title {
  margin: 0 0 0.85rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.config-section__rows {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.config-row {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(16rem, 58%);
  gap: 1rem 1.5rem;
  padding: 1.1rem 1.25rem;
  align-items: start;
}
.config-row + .config-row {
  border-top: 1px solid var(--color-border, #e2e2e2);
}
@media (max-width: 40rem) {
  .config-row {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
}
.config-row__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.config-row__restart-only {
  font-size: 0.75em;
  color: var(--color-text-muted, #888);
}
.config-row__doc {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text-muted, #888);
}
.config-row__panel {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}
.config-row__status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: flex-start;
}
.config-row__field {
  min-width: 0;
}
.config-row__field--source {
  flex: 0 0 auto;
}
.config-row__label {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted, #888);
}
.config-row__value {
  display: block;
  overflow-wrap: anywhere;
}
.config-row__value--muted {
  color: var(--color-text-muted, #999);
  font-style: italic;
}
.config-row__value--override {
  font-weight: 600;
}
.config-row__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.config-row__form {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.config-row__form .input {
  width: 16rem;
  max-width: 100%;
}
.config-row__readonly {
  font-size: 0.75rem;
  color: var(--color-text-muted, #aaa);
}

/* Reusable settings panel (Slack-style): an elevated white card on the muted
   canvas. Compose with --scroll for wide/tabular content, or --pad for prose. */
.settings-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.settings-panel + .settings-panel {
  margin-top: 1.25rem;
}
.settings-panel--scroll {
  overflow-x: auto;
}
.settings-panel--pad {
  padding: 1.1rem 1.25rem;
}
.settings-panel__title {
  margin: 0 0 0.85rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* Admin: Facilities & Collections */
.admin-section {
  margin-bottom: 2rem;
}
.admin-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  color: var(--color-text);
}

/* Admin tables read as elevated settings panels (scoped — app-wide tables keep
   their dense, flat treatment). */
.admin-section .table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.admin-section-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}

.admin-section--jobs {
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface-elevated, rgba(0, 0, 0, 0.02));
  box-shadow: var(--shadow-md);
}
.admin-job-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}
.admin-job-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.admin-job-group-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 0;
}
.admin-job-group-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  width: 100%;
}
.admin-job-group-row > .admin-job-buttons {
  flex: 1 1 auto;
  min-width: 0;
}
.admin-job-group-row > .admin-job-buttons.admin-job-buttons--tight {
  flex: 0 1 auto;
}
.admin-job-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.admin-job-buttons--tight {
  flex: 0 1 auto;
}

/* Block job controls while a long-running job is active (replaces per-control disabled on <a>) */
.admin-job-toolbar[aria-busy] {
  pointer-events: none;
  opacity: 0.85;
}

.admin-job-buttons a.admin-job-phx {
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
}

.admin-lv-diagnostics {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--color-border-light, rgba(0, 0, 0, 0.1));
}
.admin-lv-diagnostics > .admin-job-mix-task-form {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.admin-lv-diagnostics .admin-lv-diagnostics-desc {
  margin: 0.35rem 0 0.5rem;
  max-width: 40rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-text-muted, #64748b);
}
.admin-lv-diagnostics-toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.admin-lv-diagnostics-state {
  font-size: 0.875rem;
  font-weight: 500;
  min-width: 2.5rem;
}

.admin-job-output-wrap {
  margin-top: 0.5rem;
}
.admin-job-output-label {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}
.admin-job-output {
  margin: 0;
  padding: 0.75rem 1rem;
  max-height: 22rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-sm, 4px);
  line-height: 1.45;
}
.admin-poller-diagnose-output {
  margin: 0.5rem 0 0;
  padding: 0.75rem 1rem;
  max-height: 16rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--color-surface-muted, #f8fafc);
  border: 1px solid var(--color-border-light, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-sm, 4px);
  font-size: 0.75rem;
  line-height: 1.45;
}
.admin-poller-diagnose-card .admin-job-mix-task-form__toolbar {
  margin-top: 0.5rem;
}

.admin-sap-po-since-form {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--color-border, rgba(0, 0, 0, 0.12));
}
.admin-sap-po-since-form--inline {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  flex: 1 1 18rem;
  min-width: min(100%, 14rem);
}
.admin-job-group-row > .admin-job-buttons + .admin-sap-po-since-form--inline {
  padding-left: 0.75rem;
  margin-left: 0.15rem;
  border-left: 1px dashed var(--color-border, rgba(0, 0, 0, 0.12));
}
.admin-job-group-row > .admin-sap-po-since-form--inline + .admin-job-buttons {
  padding-left: 0.75rem;
  margin-left: 0.15rem;
  border-left: 1px dashed var(--color-border, rgba(0, 0, 0, 0.12));
}
@media (max-width: 36rem) {
  .admin-job-group-row > .admin-job-buttons + .admin-sap-po-since-form--inline,
  .admin-job-group-row > .admin-sap-po-since-form--inline + .admin-job-buttons {
    width: 100%;
    padding-left: 0;
    margin-left: 0;
    border-left: none;
    border-top: 1px dashed var(--color-border, rgba(0, 0, 0, 0.12));
    padding-top: 0.65rem;
    margin-top: 0.35rem;
  }
}

.admin-job-mix-forms {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--color-border, rgba(0, 0, 0, 0.12));
  width: 100%;
}
.admin-job-mix-task-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  min-width: 0;
}
.admin-job-mix-task-form__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
}
.admin-job-mix-task-form .admin-job-mix-task-form__doc {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
}
.admin-job-mix-task-form__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.45rem 0.65rem;
  width: 100%;
}
.admin-job-mix-task-form .admin-job-inline-form-fields {
  max-width: none;
  width: auto;
}
.admin-job-mix-task-form .admin-job-inline-form-fields--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}
.admin-job-mix-task-form .admin-job-inline-field-stack {
  max-width: 16rem;
  width: auto;
  flex: 0 1 auto;
}
.admin-job-mix-task-form .admin-job-inline-checkbox {
  max-width: none;
}
.admin-job-mix-task-grid > .admin-job-mix-task-form {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
/* Destructive Mix tasks: strong cue (was easy to miss with faint tint only). */
.admin-sap-po-since-form--danger.admin-job-mix-task-form {
  border: 1px solid rgba(185, 28, 28, 0.55);
  border-radius: var(--radius-sm, 4px);
  background: rgba(254, 202, 202, 0.55);
  box-shadow: inset 5px 0 0 rgb(185, 28, 28);
  padding: 0.5rem 0.6rem 0.55rem 0.65rem;
}
.admin-sap-po-since-form--danger.admin-job-mix-task-form .admin-sap-po-since-label {
  color: rgb(127, 29, 29);
}
.admin-sap-po-since-form--danger.admin-job-mix-task-form .admin-sap-po-since-hint {
  color: rgb(153, 27, 27);
}
.admin-job-inline-form-fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0;
  max-width: 42rem;
}
.admin-job-inline-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.875rem;
  line-height: 1.45;
  max-width: 42rem;
}
.admin-job-inline-checkbox input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.admin-job-inline-field-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
  max-width: 28rem;
}
.admin-job-inline-field-stack > .admin-sap-po-since-label {
  margin-bottom: 0;
}
.admin-job-inline-input-narrow {
  min-width: 6rem;
  max-width: 10rem;
}
.admin-job-inline-select {
  min-width: 10rem;
}
.admin-sap-po-since-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}
.admin-sap-po-since-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.admin-sap-po-since-input {
  min-width: 12rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.875rem;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
  border-radius: var(--radius-sm, 4px);
  background: var(--color-surface, #fff);
}
.admin-sap-po-since-hint {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  max-width: 42rem;
}

.admin-job-mix-task-grid {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: stretch;
}

/* ============================================================
   Operations & Sync redesign (Admin → /admin/operations)
   ============================================================ */
.ops-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 60rem) {
  .ops-layout {
    grid-template-columns: 1fr;
  }
}
.ops-main {
  min-width: 0;
}
.ops-main--busy {
  pointer-events: none;
  opacity: 0.7;
}

/* Sticky control bar: search + intent chips + match count */
.ops-controls {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.6rem 0;
  margin-bottom: 1rem;
  background: var(--color-bg, #fafaf9);
  border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
}
.ops-search {
  flex: 1 1 16rem;
  min-width: 0;
}
.ops-search__input {
  width: 100%;
  padding: 0.45rem 0.65rem;
  font-size: 0.9rem;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.18));
  background: var(--color-surface, #fff);
  color: var(--color-text);
}
.ops-search__input:focus-visible {
  outline: 2px solid var(--color-primary, #1e3a5f);
  outline-offset: 1px;
}
.ops-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.ops-chip {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--color-text-muted);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.18));
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.ops-chip:hover {
  background: var(--color-border-light, #f2f2f2);
}
.ops-chip[aria-pressed="true"] {
  color: #fff;
  background: var(--color-primary, #1e3a5f);
  border-color: var(--color-primary, #1e3a5f);
}
.ops-chip--destructive[aria-pressed="true"] {
  background: rgb(185, 28, 28);
  border-color: rgb(185, 28, 28);
}
.ops-count {
  font-size: 0.8rem;
  color: var(--color-text-subtle);
  margin-left: auto;
  white-space: nowrap;
}
.ops-empty {
  margin: 1rem 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Sections (Common operations / All tasks) */
.ops-section {
  margin-bottom: 1.75rem;
}
.ops-section__title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
  color: var(--color-text);
}
.ops-section__desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}
.ops-band {
  margin-bottom: 1.1rem;
}
.ops-band__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 0.45rem;
}

/* Responsive card grid */
.ops-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.6rem;
  align-items: start;
}
.ops-card-grid--catalog {
  margin-top: 0.75rem;
}

/* Job/task card */
.admin-op-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.8rem 0.9rem;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.14));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.admin-op-card--common {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.admin-op-card--common.admin-op-card--form {
  flex-direction: column;
  align-items: stretch;
}
.admin-op-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.admin-op-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.admin-op-card__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}
.admin-op-card__code {
  font-size: 0.72rem;
  color: var(--color-text-subtle);
  word-break: break-all;
}
.admin-op-card__verify {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.admin-op-card__complete {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.14));
}
.admin-op-card__complete textarea {
  width: 100%;
  resize: vertical;
}
.admin-op-card__status {
  font-size: 0.78rem;
  color: var(--color-text-subtle);
}
/* Release-task run output and errors are Mix stdout: unbounded in both directions, so the card
   caps the height and scrolls rather than stretching the grid row it sits in. */
.admin-op-card__output,
.admin-op-card__error {
  margin: 0;
  max-height: 12rem;
  overflow: auto;
  padding: 0.5rem 0.6rem;
  font-size: 0.7rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--color-surface-muted, rgba(0, 0, 0, 0.04));
  border-radius: var(--radius-sm, 4px);
}
.admin-op-card__error {
  color: var(--color-danger-text, #8a1c1c);
  background: var(--color-danger-surface, rgba(180, 35, 35, 0.08));
}
.admin-op-card__doc {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}
.admin-op-card__domain {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-subtle);
}
.admin-op-card__actions {
  flex-shrink: 0;
}
/* Destructive cards keep a strong red cue */
.admin-op-card--danger {
  border-color: rgba(185, 28, 28, 0.55);
  background: rgba(254, 202, 202, 0.4);
  box-shadow: inset 4px 0 0 rgb(185, 28, 28);
}
.admin-op-card--danger .admin-op-card__title {
  color: rgb(127, 29, 29);
}
.admin-op-card--danger .admin-op-card__doc {
  color: rgb(153, 27, 27);
}

/* Intent badge */
/* Run-history status badges. The other .op-badge modifiers are task *kinds* (sync, maintenance,
   …); these are outcomes, so they read on the same base with their own colours. */
.op-badge--running {
  color: var(--color-text-subtle);
  border-color: var(--color-border, rgba(0, 0, 0, 0.14));
}
.op-badge--succeeded {
  color: var(--color-success-text, #1c6b3a);
  border-color: var(--color-success-border, rgba(28, 107, 58, 0.35));
}
.op-badge--failed {
  color: var(--color-danger-text, #8a1c1c);
  border-color: var(--color-danger-border, rgba(138, 28, 28, 0.35));
}

/* One row per run: status, what ran, who ran it, when. Collapses to a stack on narrow screens
   rather than truncating the label, which is the part an operator is scanning for. */
.admin-run-history {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-run-history__row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.78rem;
  border-bottom: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
}
.admin-run-history__label {
  font-family: var(--font-mono, monospace);
  overflow-wrap: anywhere;
}
.admin-run-history__who,
.admin-run-history__when {
  color: var(--color-text-subtle);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .admin-run-history__row {
    grid-template-columns: auto 1fr;
  }
  .admin-run-history__when {
    grid-column: 2;
  }
}

.op-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.op-badge--sync {
  color: var(--color-accent, #4a6b4a);
  background: var(--color-accent-muted, #e8f0e8);
  border-color: var(--color-accent, #4a6b4a);
}
.op-badge--maintenance {
  color: var(--color-primary, #1e3a5f);
  background: #e6edf5;
  border-color: var(--color-primary, #1e3a5f);
}
.op-badge--diagnostics {
  color: var(--color-text-muted, #4a6b8a);
  background: var(--color-border-light, #f2f2f2);
  border-color: var(--color-border, #d6d6d6);
}
.op-badge--destructive {
  color: rgb(127, 29, 29);
  background: rgba(254, 202, 202, 0.6);
  border-color: rgb(185, 28, 28);
}

/* Collapsible intent accordion (All tasks) */
.ops-accordion {
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
  margin-bottom: 0.6rem;
  background: var(--color-surface, #fff);
}
.ops-accordion__summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ops-accordion__summary::-webkit-details-marker {
  display: none;
}
.ops-accordion__summary:hover {
  background: var(--color-border-light, #f2f2f2);
}
.ops-accordion__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}
.ops-accordion__count {
  margin-left: auto;
  min-width: 1.6rem;
  padding: 0.05rem 0.4rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-border-light, #f2f2f2);
  border: 1px solid var(--color-border, #d6d6d6);
}
.ops-accordion[open] > .ops-accordion__summary {
  border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
}
.ops-accordion > .ops-card-grid {
  padding: 0.75rem 0.8rem 0.85rem;
}

/* Sticky output console */
.ops-console {
  position: sticky;
  top: 0.5rem;
}
.ops-console__inner {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ops-console__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  /* The status text grows with a runner's email, and the copy button sits beside it: on a phone
     the row has to wrap rather than push the console's edge. */
  flex-wrap: wrap;
}
.ops-console__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}
.ops-console__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ops-console__status {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-subtle);
}
.ops-console__status--running {
  color: var(--color-accent, #4a6b4a);
}
.ops-console__status--running::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.35rem;
  border-radius: var(--radius-full, 9999px);
  background: currentColor;
  animation: ops-pulse 1s ease-in-out infinite;
}
@keyframes ops-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
.ops-console__output {
  max-height: calc(100vh - 6rem);
}
@media (max-width: 60rem) {
  .ops-console {
    position: sticky;
    top: auto;
    bottom: 0;
    z-index: 4;
    background: var(--color-bg, #fafaf9);
    padding-top: 0.4rem;
    border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
  }
  .ops-console__output {
    max-height: 12rem;
  }
}

.admin-user-form-panel {
  max-width: 34rem;
  width: 100%;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface-elevated, rgba(0, 0, 0, 0.02));
  box-shadow: var(--shadow-md);
}
.admin-user-form {
  margin-bottom: 0;
}
.admin-user-form--create {
  padding: 0;
}
.admin-user-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
}
@media (max-width: 520px) {
  .admin-user-form-grid {
    grid-template-columns: 1fr;
  }
}
.admin-user-field {
  display: flex;
  flex-direction: column;
}
.admin-user-field label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 0.2rem;
}
.admin-user-field-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
  display: block;
}
.admin-user-roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.35rem 0.75rem;
}
.admin-user-role-check {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: var(--color-text);
  cursor: pointer;
}
.admin-user-role-check input {
  margin: 0;
}
.admin-field-hint {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}
.admin-user-field-wide {
  grid-column: 1 / -1;
}
.admin-user-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.text-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
}
.role-pill {
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--color-border-light);
}
.admin-users-table td {
  vertical-align: middle;
}

.admin-user-activity-dialog {
  max-width: 52rem;
}

.admin-user-activity-subtitle {
  margin: -0.25rem 0 1rem;
  font-size: 0.875rem;
}

.admin-user-activity-item {
  grid-template-columns: auto minmax(8rem, 11rem) 1fr;
}

.journal-context {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.journal-context-kind {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.journal-context-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.facility-edit-form {
  padding: 1rem 0;
}
.facility-edit-row {
  margin-bottom: 1rem;
}
.facility-edit-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}
.facility-edit-section {
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.facility-edit-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--color-text);
}
.facility-edit-address-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.75rem 1rem;
}
.facility-edit-field {
  display: flex;
  flex-direction: column;
}
.facility-edit-field label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 0.2rem;
}
.facility-edit-field-wide {
  grid-column: 1 / -1;
}
.facility-edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Inventory comparison blocks */
.comparison-block {
  margin-bottom: 2.5rem;
}
.comparison-block:last-child {
  margin-bottom: 0;
}
.comparison-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  color: var(--color-text);
}
.comparison-block-count {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-text-muted);
}
.comparison-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}

.discrepancy-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.discrepancy-mismatch {
  background: #fef3cd;
  color: #856404;
}

.discrepancy-missing_in_system {
  background: #f8d7da;
  color: #721c24;
}

.discrepancy-zero_vs_nonzero {
  background: #fff3cd;
  color: #856404;
}

.empty-state {
  color: var(--color-text-muted);
  padding: 1.5rem;
  text-align: center;
}

.empty-state a {
  color: var(--color-accent);
  font-weight: 500;
}

.form-section {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--color-border-light);
  max-width: 720px;
}

/* Add shipment: two columns — identity/route left, ocean/NRI right */
.form-section.form-section--inbound-new {
  width: 100%;
  max-width: min(1760px, 100%);
}

/* Add shipment: product line items section first, then main two-column fields */
.inbound-page--new-shipment form.inbound-form--inbound-new-split,
.inbound-page--edit-shipment form.inbound-form--inbound-new-split {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: min(1760px, 100%);
}

.inbound-page--new-shipment .form-section--inbound-line-items-top .product-line-items-wrap,
.inbound-page--edit-shipment .form-section--inbound-line-items-top .product-line-items-wrap {
  margin-top: 0.35rem;
}

/* Line items table grows to natural width (no inner horizontal scroll). */
.inbound-form--inbound-new-split .form-section--inbound-line-items-top {
  max-width: none;
  width: max-content;
}

.product-line-items-qty-input--computed {
  cursor: default;
  background: var(--color-surface-muted, rgba(0, 0, 0, 0.04));
}

.inbound-form--two-col .inbound-form__grid {
  display: grid;
  /* Ocean (SSL) column 40% wider than identity/route: ratio 5 : 7 */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.5rem 2rem;
  align-items: start;
}

.inbound-form--two-col .inbound-form__primary,
.inbound-form--two-col .inbound-form__ocean {
  min-width: 0;
}

.inbound-form--two-col .inbound-form__ocean .form-fieldset {
  margin-top: 0;
}

.inbound-form--two-col .inbound-form__primary {
  container-type: inline-size;
  container-name: inbound-new-split;
}

.inbound-form--two-col .inbound-form__ocean {
  container-type: inline-size;
  container-name: inbound-new-split;
}

.inbound-form__full-span {
  margin-bottom: 1rem;
}

/* Shipment identity: constrain inputs to typical data width (not full column) */
.inbound-form .form-field--tracking {
  max-width: 14rem;
}

.inbound-form .form-field--factory {
  max-width: 18rem;
}

/* The select only: its hint reads across the column instead of wrapping in a narrow box. */
.inbound-form .form-field--lifecycle-phase .form-select {
  max-width: 18rem;
}

.inbound-form .form-row--identity-primary {
  grid-template-columns: minmax(0, 14rem) minmax(0, 16rem);
  width: fit-content;
  max-width: 100%;
}

.inbound-form .form-row--identity-secondary {
  grid-template-columns: minmax(0, 14rem) minmax(0, 18rem);
  width: fit-content;
  max-width: 100%;
}

.inbound-form .form-field--description {
  max-width: 28rem;
}

.inbound-form .form-field--notes {
  max-width: 36rem;
}

.form-row--po-matrix-head {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted, #64748b);
}

.form-row--po-matrix-head .form-group,
.form-row--po-matrix .form-group {
  margin-bottom: 0;
}

.form-row--po-matrix {
  margin-top: 0.5rem;
}

.inbound-po-matrix .form-row--po-matrix-head,
.inbound-po-matrix .form-row--po-matrix {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
}

@container inbound-new-split (max-width: 560px) {
  .inbound-form--two-col .form-row--3:not(.form-row--po-matrix):not(.form-row--po-matrix-head),
  .inbound-form--two-col .form-row--4,
  .inbound-form--two-col .form-row--footwear,
  .inbound-form--two-col .form-row--containers-line {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .inbound-form--two-col .inbound-form__grid {
    grid-template-columns: 1fr;
  }
}

/* Add shipment — product line items table (item #, catalog autofill, per-size qty) */
.product-line-items-wrap {
  margin-top: 0.5rem;
  width: max-content;
  max-width: none;
}

.product-line-items-table {
  border-collapse: collapse;
  width: max-content;
  table-layout: auto;
  font-size: 0.8125rem;
}

.product-line-items-table th,
.product-line-items-table td {
  padding: 0.35rem 0.4rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border-light);
}

.product-line-items-th--sku,
.product-line-items-table tbody td:first-child {
  min-width: 5.5rem;
  max-width: 6.5rem;
}

.product-line-items-th--product,
.product-line-items-td--product {
  min-width: 10rem;
  width: 10rem;
  max-width: 10rem;
}

.product-line-items-th--color,
.product-line-items-td--color {
  min-width: 8rem;
  width: 8rem;
  max-width: 8rem;
}

/* PO + collective hold 10-digit SAP numbers. `.form-input` is 1rem with 0.875rem side padding,
   so a 6.5rem cell left ~7 characters visible and clipped the rest. Fixed width like the
   --product/--color siblings rather than a min/max range, so the pair stays aligned. */
.product-line-items-th--po,
.product-line-items-td--po,
.product-line-items-th--collective,
.product-line-items-td--collective {
  min-width: 8.5rem;
  width: 8.5rem;
  max-width: 8.5rem;
}

/* Table-scale padding, matching .product-line-items-logistics-input in the same row. The
   form-wide 0.875rem side padding spent ~30px of a ~123px cell on whitespace, which is half of
   why a 10-digit PO did not fit. */
.product-line-items-td--po .form-input,
.product-line-items-td--collective .form-input {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.4rem;
}

.product-line-items-table tbody td:first-child .form-input,
.product-line-items-td--product .form-input,
.product-line-items-td--color .form-input {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.product-line-items-th--sizes {
  padding: 0;
  vertical-align: bottom;
}

.product-line-items-td-sizes {
  padding: 0;
  vertical-align: middle;
}

/* Single contiguous grid for all size columns (no number spinners; typeable cells) */
.product-line-items-size-grid {
  --size-cols: 27;
  --size-col-width: 2.35rem;
  display: grid;
  grid-template-columns: repeat(var(--size-cols), var(--size-col-width));
  width: max-content;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  overflow: hidden;
  background: var(--color-bg);
}

.product-line-items-size-cell {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  border-right: 1px solid var(--color-border);
  min-width: var(--size-col-width);
}

.product-line-items-size-cell:last-child {
  border-right: none;
}

.product-line-items-size-cell--head {
  justify-content: center;
  align-items: center;
  padding: 0.2rem 0.05rem;
  font-weight: 600;
  font-size: 0.65rem;
  line-height: 1.1;
  text-align: center;
  background: var(--color-border-light);
  color: var(--color-text-muted);
}

.product-line-items-size-input {
  width: 100%;
  min-width: var(--size-col-width, 3rem);
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0.4rem 0.3rem;
  text-align: center;
  font-size: 0.8125rem;
  font-family: var(--font-sans);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}

.product-line-items-size-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  position: relative;
  z-index: 1;
  background: var(--color-surface);
}

.product-line-items-size-input::-webkit-outer-spin-button,
.product-line-items-size-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.product-line-items-th--qty,
.product-line-items-td--qty {
  min-width: 4.25rem;
  width: 4.25rem;
  text-align: center;
  white-space: nowrap;
}

.product-line-items-th--logistics,
.product-line-items-td--logistics {
  min-width: 4rem;
  max-width: 5.5rem;
}

/* Values are short and read better on one line; headers are not. Under `nowrap` a header wider
   than the cell painted across the columns beside it, which is how two untranslated keys turned
   into an unreadable smear. Wrapping contains a multi-word label, and `anywhere` also breaks an
   unbroken string (an i18n key has no spaces to wrap at) instead of letting it overlap. */
.product-line-items-th--logistics {
  white-space: normal;
  overflow-wrap: anywhere;
}

.product-line-items-td--logistics {
  white-space: nowrap;
}

.product-line-items-logistics-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.4rem;
}

.shipment-table--footwear-sizes .logistics-col {
  white-space: nowrap;
  font-size: 0.8125rem;
}

.product-line-items-qty-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.4rem;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.product-line-items-qty-input::-webkit-outer-spin-button,
.product-line-items-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-fieldset {
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.form-fieldset legend {
  padding: 0 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text);
}

.detail-card-legend {
  font-size: 1.125rem !important;
  margin-bottom: 1rem;
}

.upload-desc {
  margin: 0 0 1.5rem;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.upload-template {
  margin-bottom: 2rem;
  padding: 1.25rem;
  background: var(--color-border-light);
  border-radius: var(--radius-md);
}

.upload-template h3 {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Sample-file downloads beside an upload (UploadTemplatesController). */
.upload-samples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.column-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.upload-form-feedback {
  margin-bottom: 1rem;
}

/* Detection detail can list offending spreadsheet rows on their own lines. */
.upload-detection-detail {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  white-space: pre-line;
}

.upload-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  color: var(--color-text-muted, #666);
  font-size: 0.9375rem;
}

.upload-form .form-group {
  margin-bottom: 1.25rem;
}

.upload-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 9rem;
  padding: 1.5rem;
  border: 2px dashed var(--color-border, #cbd5e1);
  border-radius: var(--radius-md);
  background: var(--color-border-light, #f8fafc);
  transition: border-color 0.15s ease, background 0.15s ease;
  cursor: pointer;
}

.upload-dropzone-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.upload-dropzone:hover,
.upload-dropzone:focus-within,
.upload-dropzone.phx-drop-target-active {
  border-color: var(--color-primary, #2563eb);
  background: #eff6ff;
}

.upload-dropzone--busy {
  opacity: 0.85;
}

.upload-dropzone--ready {
  border-style: solid;
  border-color: var(--color-primary, #2563eb);
}

.upload-dropzone-input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-dropzone-body {
  position: relative;
  z-index: 1;
  pointer-events: none;
  text-align: center;
}

.upload-dropzone-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

.upload-dropzone-filename {
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  word-break: break-all;
}

.upload-dropzone-hint {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.upload-dropzone-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.upload-clear-file {
  margin-top: 0.5rem;
}

.vendor-detect-panel {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border, #cbd5e1);
  border-radius: var(--radius-md);
  background: #fff;
}

.vendor-detect-panel--mismatch {
  border-color: #f87171;
  background: #fef2f2;
}

.vendor-detect-title {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.vendor-detect-vendor {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
}

.vendor-detect-factory {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.vendor-detect-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
}

.vendor-detect-confirm-text {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.vendor-detect-mismatch {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #b91c1c;
}

.inbound-form .form-group {
  margin-bottom: 1.25rem;
}

.inbound-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.375rem;
}

.form-input,
.form-select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 1rem;
  font-family: var(--font-sans);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(74, 107, 74, 0.12);
}

.form-error {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: #dc2626;
}

.form-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-row .form-group {
  min-width: 0;
}

.form-datetime-combo__inputs {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 0.5rem 0.75rem;
  margin-top: 0.35rem;
}

.form-datetime-combo__sub-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted, #64748b);
  margin-bottom: 0.25rem;
}

.form-datetime-combo .form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0;
}

.form-row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-row--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Footwear line items on add shipment: product/color wider, qty narrow */
.form-row--footwear {
  grid-template-columns: minmax(0, 2fr) minmax(0, 2.5fr) minmax(0, 2fr) minmax(5rem, 6.5rem);
  gap: 0.5rem;
}

.form-row--footwear .form-group {
  margin-bottom: 0;
}

/* Two container # + size pairs per row on add shipment */
.form-row--containers-line {
  grid-template-columns: minmax(0, 1.5fr) minmax(3.5rem, 5.5rem) minmax(0, 1.5fr) minmax(3.5rem, 5.5rem);
  gap: 0.5rem;
}

.form-row--containers-line .form-group {
  margin-bottom: 0;
}

.form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Container contents page: footwear + packaging + small packages read better in one column */
.detail-grid.detail-grid--stacked {
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
}

@media (max-width: 768px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .form-row,
  .form-row--3:not(.form-row--po-matrix):not(.form-row--po-matrix-head),
  .form-row--4,
  .form-row--footwear,
  .form-row--containers-line {
    grid-template-columns: 1fr;
  }

  .form-row--po-matrix,
  .form-row--po-matrix-head {
    grid-template-columns: 1fr;
  }

  .inbound-form .form-row--identity-primary,
  .inbound-form .form-row--identity-secondary {
    width: 100%;
  }

  .inbound-form .form-field--tracking,
  .inbound-form .form-field--factory,
  .inbound-form .form-field--lifecycle-phase .form-select,
  .inbound-form .form-field--description,
  .inbound-form .form-field--notes {
    max-width: 100%;
  }
}

.detail-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-md);
}

.detail-card h2 {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
}

.form-group-block {
  padding: 1rem 0;
  border-top: 1px solid var(--color-border-light);
}

.form-group-block:first-child {
  padding-top: 0;
  border-top: none;
}

.form-group-block h3 {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.detail-list {
  margin: 0;
}

.detail-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--color-border-light);
}

.detail-row:last-of-type {
  border-bottom: none;
}

.detail-row dt {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.detail-row dd {
  margin: 0;
  font-size: 0.9375rem;
}

.milestone-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.milestone-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.milestone-item:last-child {
  border-bottom: none;
}

.milestone-key {
  font-weight: 600;
  color: var(--color-text);
}

.milestone-time {
  color: var(--color-text-muted);
}

.milestone-location,
.milestone-desc {
  color: var(--color-text-subtle);
  font-size: 0.8125rem;
}

.empty-carrier-events {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

/* Detail page: same carrier timeline as list disclosure (no extra bottom rule inside card) */
.carrier-events-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}

.carrier-events-card__header .carrier-events-card__heading {
  margin: 0;
}

.carrier-events-card .shipment-carrier-timeline--detail {
  border-bottom: none;
  padding-bottom: 0;
}

.shipment-phase-timeline__explainer {
  margin: 0 0 0.65rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #64748b);
  line-height: 1.4;
}

.shipment-phase-timeline {
  font-size: initial;
  line-height: initial;
}

.shipment-phase-timeline__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
  margin-bottom: 0.35rem;
  min-height: 2.5rem;
}

.shipment-phase-timeline__phase-name {
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.15;
  color: #475569;
  hyphens: auto;
  word-break: break-word;
}

.shipment-phase-timeline__phase-name--current {
  color: #0f172a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.shipment-phase-timeline__col--current {
  outline: 2px solid var(--color-brand);
  outline-offset: 1px;
  border-radius: 4px;
  padding: 0.25rem;
}

.shipment-phase-timeline__col--empty .shipment-phase-timeline__placeholder {
  color: #cbd5e1;
}

.shipment-phase-timeline__stack {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.shipment-phase-timeline__placeholder {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  color: #cbd5e1;
  padding: 0.25rem 0;
}

.shipment-carrier-timeline__card--synthetic .shipment-carrier-timeline__card-bar {
  background: #0d9488;
}

.shipment-carrier-timeline__card--synthetic .shipment-carrier-timeline__card-body {
  background: #ecfdf5;
}

.shipment-carrier-timeline__card--synthetic .shipment-carrier-timeline__label {
  color: #115e59;
  font-weight: 600;
}

.change-history-reveal {
  margin-bottom: 1.5rem;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.change-history-summary {
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.change-history-summary::-webkit-details-marker {
  display: none;
}

.change-history-summary::before {
  content: "▸";
  font-size: 0.75rem;
  transition: transform 0.2s;
}

.change-history-reveal[open] .change-history-summary::before {
  transform: rotate(90deg);
}

.change-history-content {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--color-border-light);
}

.change-history-content .journal-list {
  margin-top: 0.75rem;
}

.journal-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.journal-item {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.875rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: start;
}

.journal-item:last-child {
  border-bottom: none;
}

.journal-item.journal-status {
  background: rgba(74, 107, 74, 0.08);
  margin: 0 -1rem;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-md);
}

.journal-time {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.journal-action {
  color: var(--color-text);
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
}

.journal-source {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: lowercase;
}

.empty-journal {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.timeline-section {
  margin-bottom: 2.5rem;
}

.timeline-section .section-title {
  margin-top: 0;
}

.timeline-desc {
  color: var(--color-text-muted);
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline-item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border-light);
  align-items: start;
}

.timeline-item-delayed {
  border-left: 3px solid #dc2626;
  padding-left: 0.75rem;
  margin-left: -0.75rem;
}

.timeline-date {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text);
}

.timeline-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.timeline-number {
  font-family: ui-monospace, monospace;
  font-weight: 600;
}

.timeline-carrier {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  padding: 0.15rem 0.4rem;
  background: var(--color-border-light);
  border-radius: var(--radius-sm);
}

.timeline-status {
  font-size: 0.75rem;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.timeline-po {
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

.timeline-link {
  margin-left: auto;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
}

.timeline-link:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .timeline-item {
    grid-template-columns: 1fr;
  }
}

.welcome {
  color: var(--color-text-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 48ch;
}

/* Flash messages */
.flash {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1rem;
  max-width: 32rem;
  width: 100%;
  pointer-events: none;
}

.alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: slideDown 0.3s ease;
  pointer-events: auto;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alert-info {
  background: var(--color-accent-muted);
  color: var(--color-accent-hover);
  border: 1px solid rgba(74, 107, 74, 0.25);
}

.alert-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.alert-warning {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* Responsive */
@media (max-width: 768px) {
  .app-header-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .app-nav-tabs {
    gap: 0;
    padding: 0 1rem;
  }

  .app-nav-tab {
    padding: 0.5rem 0.65rem;
    font-size: 0.875rem;
  }

  .app-header-actions {
    flex-wrap: wrap;
  }

  .page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .page-header-actions {
    flex-direction: column;
  }

  .filter-form {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-form .filter-select {
    width: 100%;
  }
}

.table-wrap {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .container {
    padding: 1.25rem 1rem;
  }

  .login-card {
    padding: 2rem 1.5rem;
  }

  .dashboard-header {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .dashboard-header h1 {
    text-align: center;
  }

  /* Phone header: one 56px bar + native popover menu. Desktop ≥641px is unchanged. */
  .app-header-bar {
    height: 56px;
    padding: 0;
    box-sizing: border-box;
  }

  .app-header-inner {
    height: 56px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0 0.75rem 0 1rem;
    gap: 0.5rem;
  }

  .app-header-actions {
    display: none;
  }

  .app-nav-tabs {
    display: none;
  }

  .app-header-domain {
    display: inline;
  }

  .app-header-menu-btn {
    display: inline-flex;
    width: 44px;
    height: 44px;
  }

  .app-phone-menu {
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
    margin: 0.5rem;
    inset: unset;
    top: 3.5rem;
    left: 0;
    right: 0;
    border-radius: var(--radius-lg);
  }

  .app-phone-menu-section {
    padding: 0.75rem 0.75rem 0.25rem;
    border-bottom: 1px solid var(--color-border-light);
  }

  .app-phone-menu-section h2 {
    margin: 0 0 0.35rem;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .app-phone-menu-nav {
    display: flex;
    flex-direction: column;
  }

  .app-phone-menu-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
  }

  .app-phone-menu-link:hover {
    background: var(--color-surface-muted);
  }

  .app-phone-menu-link--current {
    background: var(--color-brand-muted);
    color: var(--color-brand);
    font-weight: 600;
  }

  .app-phone-menu-locale {
    display: flex;
    width: 100%;
    gap: 0;
    margin: 0.25rem 0 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .app-phone-menu-locale .locale-sep,
  .app-phone-menu-locale .translation-invite {
    display: none;
  }

  .app-phone-menu-locale a {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border-radius: 0;
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 500;
  }

  .app-phone-menu-locale a.locale-active {
    background: var(--color-brand);
    color: #fff;
    font-weight: 600;
  }

  .app-phone-menu-row {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
  }

  .app-phone-menu-row:hover {
    background: var(--color-surface-muted);
  }

  .app-phone-menu-row--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    min-height: 44px;
  }

  .app-phone-menu-row-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
  }

  .app-phone-menu-date-options,
  .app-phone-menu-roles {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .app-phone-menu-date-options a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
  }

  .app-phone-menu-account {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .app-phone-menu-email {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    word-break: break-all;
    padding: 0 0.25rem;
  }

  .app-phone-menu-sign-out {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    background: var(--color-surface-muted);
  }

  .app-phone-menu-sign-out:hover {
    background: var(--color-brand-muted);
    color: var(--color-brand);
  }

  /* Section tabs: one 48px horizontally scrolling strip with a right-edge fade. */
  .po-area-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    height: 48px;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.5rem;
    padding: 0 1rem 0 0;
    border-bottom: 1px solid var(--color-border);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 2rem), transparent 100%);
  }

  .po-area-tabs::-webkit-scrollbar {
    display: none;
  }

  a.po-area-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.5rem 0.15rem;
    margin-bottom: 0;
  }

  .shipment-table th,
  .shipment-table td {
    padding: 0.4rem 0.6rem;
    font-size: 0.8125rem;
  }

  .page-header h1 {
    font-size: 1.25rem;
  }
}

/* Shipment overlay detail card */
.tracking-id-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-primary);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
}

.tracking-id-btn:hover {
  color: var(--color-accent);
}

.on-time-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.on-time-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.on-time-dot-red {
  background: #c5221f;
}

.on-time-dot-green {
  background: #137333;
}

.on-time-dot-gray {
  background: #9aa0a6;
}

.on-time-status-late {
  color: #c5221f;
}

.on-time-status-early {
  color: #137333;
}

.on-time-status-na {
  color: var(--color-text-muted);
}

.on-time-status-on-time {
  color: #137333;
}

.tracking-id-cell .tracking-id-value {
  min-width: 0;
  word-break: break-all;
}

.disclosure-icon {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  position: relative;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.disclosure-icon::before {
  content: "▶";
  display: block;
  font-size: 0.65rem;
  line-height: 1;
  transition: transform 0.2s ease;
  transform-origin: center center;
}

/* Container line footwear: chevron rotation when size columns are shown */
.container-line-items-page thead tr.cl-footwear-sizes-head-row-expanded .disclosure-icon::before {
  transform: rotate(90deg);
}

/* Inbound list + detail: horizontal carrier milestone cards */
.shipment-carrier-timeline {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border-light, #e2e8f0);
}

.shipment-carrier-timeline__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.shipment-carrier-timeline__title {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted, #64748b);
}

.shipment-carrier-timeline__ellipsis {
  color: var(--color-text-muted, #64748b);
  font-size: 1rem;
  line-height: 1;
  opacity: 0.7;
  user-select: none;
}

.shipment-carrier-timeline__empty {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #64748b);
}

/* Grid (not flex): flex inside table colspan cells is buggy in some browsers — forces one horizontal row */
.shipment-carrier-timeline__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(4.5rem, 1fr);
  align-items: stretch;
  gap: 3px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
  /* Collapse whitespace-only text nodes between loop iterations (they become extra grid columns) */
  font-size: 0;
  line-height: 0;
}

.shipment-carrier-timeline__card {
  font-size: initial;
  line-height: normal;
  min-width: 0;
  width: 100%;
  max-width: none;
  border: 1px solid #cbd5e1;
  border-radius: 2px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.shipment-carrier-timeline__card-bar {
  background: #94a3b8;
  color: #fff;
  text-align: center;
  padding: 0.15rem 0;
  font-size: 0.75rem;
  line-height: 1;
}

.shipment-carrier-timeline__card--exception .shipment-carrier-timeline__card-bar {
  background: #dc2626;
}

/* Upcoming / not-yet-reached pipeline slots */
.shipment-carrier-timeline__card--pending .shipment-carrier-timeline__card-bar {
  background: #f1f5f9;
  color: #cbd5e1;
}

.shipment-carrier-timeline__card--pending .shipment-carrier-timeline__card-body {
  background: #fff;
}

.shipment-carrier-timeline__card--pending .shipment-carrier-timeline__label {
  font-weight: 500;
  color: #94a3b8;
}

.shipment-carrier-timeline__hint {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
}

.shipment-carrier-timeline__detail-head {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--color-border-light, #e2e8f0);
}

.shipment-carrier-timeline__detail-title {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #64748b);
}

.shipment-carrier-timeline__detail-card {
  min-width: 0;
  width: 100%;
  border: 1px solid #94a3b8;
  border-radius: 2px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.shipment-carrier-timeline__detail-card .shipment-carrier-timeline__card-bar {
  background: #64748b;
}

.shipment-carrier-timeline__detail-card .shipment-carrier-timeline__card-body {
  background: #f1f5f9;
}

.shipment-carrier-timeline__chev {
  opacity: 0.95;
}

.shipment-carrier-timeline__card-body {
  padding: 0.35rem 0.35rem 0.45rem;
  background: #f8fafc;
  flex: 1;
  min-height: 0;
  text-align: center;
}

.shipment-carrier-timeline__card--exception .shipment-carrier-timeline__label {
  color: #991b1b;
}

.shipment-carrier-timeline__label {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25;
  color: #0f172a;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-align: center;
}

.shipment-carrier-timeline__meta {
  margin-top: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: center;
  text-align: center;
}

.shipment-carrier-timeline__when {
  font-size: 0.65rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.2;
}

.shipment-carrier-timeline__where {
  font-size: 0.6rem;
  color: #64748b;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .shipment-carrier-timeline__track {
    grid-auto-columns: minmax(3.75rem, 1fr);
  }
}

/*
 * Footwear per-size tables: fill parent width (detail cards and line-item tables).
 * min-width:0 on the chain fixes nested tables shrinking inside table-layout:auto parents.
 */
.table-wrap--footwear-sizes {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: block;
  /* No overflow here: sideways scrolling belongs to the page so the header
     can pin to the viewport. See the locked-header block. */
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid #94a3b8;
  border-radius: 0;
}

.shipment-table--footwear-sizes {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  background: #fff;
  table-layout: fixed;
  border: 1px solid #64748b;
  box-sizing: border-box;
}

.shipment-table--footwear-sizes th,
.shipment-table--footwear-sizes td {
  border: 1px solid #94a3b8;
  vertical-align: middle;
  padding: 0.3rem 0.4rem;
  text-align: left;
  box-sizing: border-box;
}

.shipment-table--footwear-sizes thead th {
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
}

.shipment-table--footwear-sizes tbody tr:nth-child(even) {
  background: #fafbfc;
}

.shipment-table--footwear-sizes th.size-col,
.shipment-table--footwear-sizes td.size-col {
  padding: 0.2rem 0.1rem;
  text-align: center;
  white-space: nowrap;
}

/* Weight key columns; remaining width goes to size grid */
.shipment-table--footwear-sizes th:nth-child(1),
.shipment-table--footwear-sizes td:nth-child(1) {
  width: 18%;
}

.shipment-table--footwear-sizes th:nth-child(2),
.shipment-table--footwear-sizes td:nth-child(2) {
  width: 8%;
}

.shipment-table--footwear-sizes th:nth-child(3),
.shipment-table--footwear-sizes td:nth-child(3) {
  width: 8%;
}

.shipment-table--footwear-sizes th:last-child,
.shipment-table--footwear-sizes td:last-child {
  width: 4%;
}

/*
 * Container line items — footwear grid: content-based column widths.
 * Must override .inbound-page .shipments-card .table-wrap--footwear-sizes .shipment-table…
 * which uses table-layout:fixed and width:100% !important (same classes as disclosure grids).
 */
.inbound-page .shipments-card .container-lines-table-wrap.table-wrap--footwear-sizes .shipment-table.shipment-table--footwear-sizes {
  table-layout: auto !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Exclude SlimSelect filter headers: product / color / item columns stay narrow */
.container-line-items-page .shipment-table--line-items-grid th:nth-child(-n + 4):not(.cl-supply-th),
.container-line-items-page .shipment-table--line-items-grid td:nth-child(-n + 4) {
  width: auto;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

.container-line-items-page .cl-supply-th {
  min-width: 28rem;
  text-align: left;
  vertical-align: top;
}

.container-line-items-page .cl-supply-th-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.container-line-items-page .cl-supply-th-title {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--color-text, #0f172a);
}

.container-line-items-page .cl-supply-th-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: flex-start;
}

.container-line-items-page .cl-supply-th-filters .cl-filter-th {
  min-width: 10rem;
}

.container-line-items-page .cl-supply-summary-cell {
  vertical-align: top;
  text-align: left;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface-muted, #f8fafc);
}

.container-line-items-page .cl-supply-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}

.container-line-items-page .cl-supply-block {
  flex: 1 1 10rem;
  min-width: 9rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.375rem;
  padding: 0.35rem 0.5rem;
  background: #fff;
}

.container-line-items-page .cl-supply-block-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-muted, #64748b);
}

.container-line-items-page .cl-supply-block-value {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
}

.container-line-items-page .cl-supply-channels,
.container-line-items-page .cl-supply-etas {
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
  margin-top: 0.15rem;
}

.container-line-items-page .cl-supply-eta-label {
  display: inline-block;
  min-width: 5.5rem;
  font-weight: 500;
  color: var(--color-text, #334155);
}

.container-line-items-page .cl-supply-pipeline {
  display: flex;
  width: 100%;
  height: 0.65rem;
  border-radius: 0.25rem;
  overflow: hidden;
  background: var(--color-border, #e2e8f0);
  margin: 0.25rem 0 0.35rem;
}

.container-line-items-page .cl-supply-pipeline-empty {
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
  padding: 0.15rem 0;
}

.container-line-items-page .cl-supply-pipeline-seg {
  display: inline-block;
  height: 100%;
  min-width: 2px;
  box-sizing: border-box;
}

.container-line-items-page .cl-supply-pipeline-seg--on_hand {
  background: #0ea5e9;
}

.container-line-items-page .cl-supply-pipeline-seg--in_transit {
  background: #8b5cf6;
}

.container-line-items-page .cl-supply-pipeline-seg--remaining {
  background: #f97316;
}

.container-line-items-page .cl-supply-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
}

.container-line-items-page .cl-supply-sap-split {
  display: inline;
  font-size: 0.7rem;
  color: var(--color-text-muted, #64748b);
  margin-left: 0.25rem;
}

.container-line-items-page .cl-supply-eta-retail {
  margin-top: 0.1rem;
}

.container-line-items-page .cl-supply-eta-planning {
  font-style: italic;
  opacity: 0.92;
}

.container-line-items-page .cl-supply-eta-note {
  display: block;
  font-size: 0.65rem;
  color: var(--color-text-muted, #64748b);
  margin-top: 0.1rem;
  line-height: 1.2;
}

/* Column labels when PO / shipment lines are expanded under a footwear group */
.container-line-items-page .cl-footwear-po-line-head th,
.container-line-items-page .cl-footwear-po-line-head td[aria-hidden="true"] {
  background: #e2e8f0;
}

.container-line-items-page .cl-footwear-po-line-head th {
  color: var(--color-text-muted, #475569);
  font-size: 0.6875rem;
  font-weight: 600;
  text-align: left;
  vertical-align: bottom;
  line-height: 1.2;
  padding: 0.25rem 0.35rem;
}

.container-line-items-page .cl-size-rollup-h {
  text-align: left;
  font-size: 0.6875rem;
  white-space: nowrap;
  padding-right: 0.35rem;
}

.container-line-items-page .cl-filter-hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #64748b);
  margin: 0 0 0.5rem;
}

.container-line-items-page .cl-supply-scope-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0.35rem;
}

.container-line-items-page .cl-supply-scope-nav .cpsp-bucket {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-md, 0.375rem);
  border: 1px solid var(--color-border, #e2e8f0);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text, #0f172a);
  background: #fff;
}

.container-line-items-page .cl-supply-scope-nav .cpsp-bucket:visited {
  color: var(--color-text, #0f172a);
}

.container-line-items-page .cl-supply-scope-nav .cpsp-bucket:hover {
  border-color: var(--color-border-strong, #cbd5e1);
  background: var(--color-surface-muted, #f8fafc);
}

.container-line-items-page .cl-supply-scope-nav .cpsp-bucket--active {
  border-color: var(--color-primary, #2563eb);
  background: rgba(37, 99, 235, 0.06);
  font-weight: 600;
}

.container-line-items-page .cl-supply-scope-nav .cpsp-bucket--active:hover {
  background: rgba(37, 99, 235, 0.1);
}

.container-line-items-page .container-lines-supply-hint {
  font-size: 0.8125rem;
  margin: 0 0 0.75rem;
}

/* Catalog supply phases (SAP open vs inbound footwear vs uncommitted) */
.catalog-product-supply-page .cpsp-lead {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--color-text-muted, #475569);
  max-width: 52rem;
}

.catalog-product-supply-page .cpsp-buckets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0.75rem;
}

.catalog-product-supply-page .cpsp-bucket {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-md, 0.375rem);
  border: 1px solid var(--color-border, #e2e8f0);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text, #0f172a);
  background: #fff;
}

.catalog-product-supply-page .cpsp-bucket--active {
  border-color: var(--color-primary, #2563eb);
  background: rgba(37, 99, 235, 0.06);
  font-weight: 600;
}

.catalog-product-supply-page .cpsp-section {
  margin-top: 0.5rem;
}

.catalog-product-supply-page .cpsp-hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #64748b);
  margin: 0.5rem 0;
  max-width: 56rem;
}

.catalog-product-supply-page .cpsp-phase-form {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 0.375rem);
  background: var(--color-surface-muted, #f8fafc);
}

.catalog-product-supply-page .cpsp-phase-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.catalog-product-supply-page .cpsp-phase-legend {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.catalog-product-supply-page .cpsp-phase-hint {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
}

.catalog-product-supply-page .cpsp-phase-list {
  margin: 0.25rem 0 0;
}

.catalog-product-supply-page .cpsp-table {
  font-size: 0.8125rem;
}

.container-line-items-page .cl-filter-th {
  vertical-align: top;
  min-width: 7.5rem;
  max-width: 16rem;
  width: 16rem;
  overflow: hidden;
  box-sizing: border-box;
}

/* Column title on top, SlimSelect below — both centered */
.container-line-items-page .cl-filter-th-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
}

.container-line-items-page .cl-filter-th-label {
  display: block;
  width: 100%;
  max-width: 100%;
  font-weight: 600;
  margin-bottom: 0;
  line-height: 1.25;
  text-align: center;
}

.container-line-items-page .cl-filter-th-control {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/*
 * Column-header facet trigger: opens the facet's popover (see FilterComponents
 * .filter_popover / the ContainerLineFootwear hook). Sized to sit inside a table
 * header without stretching the column.
 */
.cl-facet-trigger {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  max-width: 100%;
  min-height: 2rem;
  padding: 0.25rem 0.45rem;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text, #0f172a);
  text-align: left;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #cbd5e1);
  border-radius: var(--radius-sm, 0.375rem);
  cursor: pointer;
}

.cl-facet-trigger:hover {
  border-color: var(--color-primary, #1e3a5f);
}

.cl-facet-trigger:focus-visible {
  outline: 2px solid var(--color-primary, #1e3a5f);
  outline-offset: 1px;
}

.cl-facet-trigger__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-facet-trigger__count {
  flex: none;
  min-width: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--color-primary, #1e3a5f);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.15rem;
  text-align: center;
}

.cl-facet-trigger__arrow {
  flex: none;
  font-size: 0.6rem;
  color: var(--color-text-muted, #64748b);
}

.cl-facet-search {
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
}

/* Option lists run long; scroll them inside the panel rather than growing it. */
.cl-facet-list {
  grid-template-columns: minmax(0, 1fr);
  max-height: 18rem;
  overflow-y: auto;
}

.container-line-items-page .size-expand-th {
  width: auto;
  min-width: 4.5rem;
  max-width: 6rem;
  text-align: center;
  /* thead uses top + center via .shipment-table--line-items-grid thead th */
  vertical-align: top;
}

.container-line-items-page .size-expand-th .cl-footwear-sizes-label {
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Disclosure control in header (same pattern as inbound shipments tracking cell) */
.container-line-items-page .size-expand-th .disclosure-toggle-form {
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.25rem;
  justify-content: center;
  margin: 0 auto;
}

.container-line-items-page .size-expand-spacer {
  width: 2.5rem;
  padding: 0.25rem;
}

.container-line-items-page .shipment-table--line-items-grid th:last-child,
.container-line-items-page .shipment-table--line-items-grid td:last-child {
  width: auto;
}

.container-line-items-page .container-lines-sections {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.container-line-items-page .container-lines-section-title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--color-text, #0f172a);
}

.container-line-items-page .empty-state--section {
  margin: 0;
  font-size: 0.875rem;
}

/* Packaging / small package: intrinsic table width (no min-width:100% — that spreads columns equally) */
.container-line-items-page .shipments-card .container-lines-table-wrap .shipment-table.shipment-table--line-items-packaging,
.container-line-items-page .shipments-card .container-lines-table-wrap .shipment-table.shipment-table--line-items-small-package {
  table-layout: auto;
  width: max-content;
  min-width: 0;
}

.container-line-items-page .shipment-table--line-items-packaging th:nth-child(-n + 10),
.container-line-items-page .shipment-table--line-items-packaging td:nth-child(-n + 10) {
  width: auto;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

.container-line-items-page .shipment-table--line-items-small-package th:nth-child(-n + 7),
.container-line-items-page .shipment-table--line-items-small-package td:nth-child(-n + 7) {
  width: auto;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

.container-line-items-page .shipment-table--line-items-small-package th:nth-child(8),
.container-line-items-page .shipment-table--line-items-small-package td:nth-child(8) {
  width: 6.75rem;
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.container-line-items-page .shipment-table--line-items-small-package th:nth-child(9),
.container-line-items-page .shipment-table--line-items-small-package td:nth-child(9) {
  width: 4.25rem;
  max-width: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.container-line-items-page .shipment-table--line-items-small-package th:nth-child(10),
.container-line-items-page .shipment-table--line-items-small-package td:nth-child(10) {
  width: 4.5rem;
  max-width: 5.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.container-line-items-page .shipment-table--line-items-small-package th:nth-child(11),
.container-line-items-page .shipment-table--line-items-small-package td:nth-child(11) {
  min-width: 6rem;
  width: 7rem;
  white-space: nowrap;
}

.container-line-items-page .shipment-table--line-items-small-package th:nth-child(12),
.container-line-items-page .shipment-table--line-items-small-package td:nth-child(12) {
  min-width: 5rem;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.container-line-items-page .shipment-table--line-items-small-package th:nth-child(13),
.container-line-items-page .shipment-table--line-items-small-package td:nth-child(13) {
  min-width: 5rem;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.container-line-items-page .shipment-table--line-items-small-package th:nth-child(14),
.container-line-items-page .shipment-table--line-items-small-package td:nth-child(14) {
  min-width: 5.5rem;
  white-space: nowrap;
}

.inbound-shipment-detail .table-wrap--footwear-sizes .shipment-table.shipment-table--footwear-sizes th,
.inbound-shipment-detail .table-wrap--footwear-sizes .shipment-table.shipment-table--footwear-sizes td {
  font-size: 0.8rem;
  border: 1px solid #94a3b8 !important;
  box-sizing: border-box;
  vertical-align: middle;
}

/* Products grid: horizontal scroll when size columns exceed card width. */
.inbound-shipment-detail .table-wrap--footwear-sizes {
  max-width: none;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
}

.inbound-shipment-detail .table-wrap--footwear-sizes .shipment-table.shipment-table--footwear-sizes {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
  max-width: none;
}

.inbound-shipment-detail .table-wrap--footwear-sizes .shipment-table.shipment-table--footwear-sizes th:nth-child(1),
.inbound-shipment-detail .table-wrap--footwear-sizes .shipment-table.shipment-table--footwear-sizes td:nth-child(1),
.inbound-shipment-detail .table-wrap--footwear-sizes .shipment-table.shipment-table--footwear-sizes th:nth-child(2),
.inbound-shipment-detail .table-wrap--footwear-sizes .shipment-table.shipment-table--footwear-sizes td:nth-child(2),
.inbound-shipment-detail .table-wrap--footwear-sizes .shipment-table.shipment-table--footwear-sizes th:nth-child(3),
.inbound-shipment-detail .table-wrap--footwear-sizes .shipment-table.shipment-table--footwear-sizes td:nth-child(3),
.inbound-shipment-detail .table-wrap--footwear-sizes .shipment-table.shipment-table--footwear-sizes th:last-child,
.inbound-shipment-detail .table-wrap--footwear-sizes .shipment-table.shipment-table--footwear-sizes td:last-child {
  width: auto;
}

.shipment-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
  overflow: hidden;
}

/* Shipment detail: 90vw panel + 5vw side inset = 100vw (no horizontal page scroll). */
.shipment-overlay-backdrop.panorama-url-overlay--shipment {
  padding: max(1rem, 2vh) 5vw;
}

/* Inbound list: all filters in a modal (SlimSelects stay mounted; do not use display:none). */
.shipment-overlay-backdrop.inbound-filters-overlay.inbound-filters-overlay--dismissed,
.shipment-overlay-backdrop.panorama-url-overlay--dismissed,
.shipment-overlay-backdrop.catalog-merge-backdrop.panorama-url-overlay--dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s;
}

.shipment-overlay.inbound-filters-dialog {
  /* Extra-wide panel: carrier | phase, dense checkbox columns. */
  max-width: min(92rem, 98.5vw);
  width: 100%;
  max-height: none;
  position: relative;
  isolation: isolate;
}

.inbound-filters-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

/* ---- The filter bar --------------------------------------------------------------------
   Two containers render the same bar: `.inbound-filters-toolbar-row` (inbound, PLT,
   wholesale, receiving, slot plan …) and `.po-section-toolbar` (purchase orders, NRI lists,
   shipment report). Both hold the same mix — a search form, filter/clear buttons, sometimes
   a select — and both centre their items, so the rules below apply to the pair. Keep them
   in step; a control styled for one bar and not the other is how this got ragged. */

/* A `<form>` carries the user agent's `margin-block-end: 1em`, and the search box in each
   bar is one. Under `align-items: center` that margin lifts the whole box half a margin
   above the buttons beside it, whatever heights the controls themselves take. Block axis
   only: the `margin` shorthand would also reset the `margin-left: auto` that pushes the
   per-page form to the right end of the bar on /wholesale/bulk-orders. */
.inbound-filters-toolbar-row form,
.po-section-toolbar form {
  margin-block: 0;
}

/* One band of controls, so one control height. Left to size themselves each control lands
   somewhere different — the search input off its own font and padding, "+ Add filter" off
   the 1.25rem count badge inside it, the plain buttons off the smaller toolbar font, the
   chips off theirs — and the band reads ragged even though every item is centred. Pin them
   to the shared token instead. */
.inbound-filters-toolbar-row .btn,
.inbound-filters-toolbar-row .filter-search,
.inbound-filters-toolbar-row .filter-select,
.inbound-filters-toolbar-row .form-select,
.inbound-filters-toolbar-row .form-control,
.po-section-toolbar .btn,
.po-section-toolbar .filter-search,
.po-section-toolbar .filter-select,
.po-section-toolbar .form-select,
.po-section-toolbar .form-control,
.inbound-filters-chip {
  height: var(--filter-bar-control-height);
}

/* The free-text search box shares the bar, so it needs room for its long placeholder and
   has to keep the Search button beside it. The old per-page `min-width: min(100%, 20rem)`
   resolved the percentage against the form's own width, so the input claimed all of it and
   the button wrapped to a second line — the bar's worst misalignment. Desktop only: below
   768px `.filter-form` is deliberately a stretched column (see the breakpoint above), and
   the box stacking over its button there is the intended narrow layout. */
.inbound-filters-toolbar-row .filter-form,
.po-section-toolbar .filter-form {
  flex-wrap: nowrap;
  min-width: 0;
}

.inbound-filters-toolbar-row .filter-search,
.po-section-toolbar .filter-search {
  width: 20rem;
  max-width: 100%;
  min-width: 0;
}

.inbound-export-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-left: auto;
}

@media (max-width: 640px) {
  .inbound-export-group {
    margin-left: 0;
  }
}

.inbound-export-label {
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
}

/* Inbound/receiving export: choose shipments-only vs packing-list rows, or Cancel.
   Custom dialog so Cancel aborts (unlike a Yes/No that always downloads). */
.export-pl-prompt-dialog {
  width: min(36rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 0.5rem);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.export-pl-prompt-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.export-pl-prompt-dialog__form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.25rem 1.5rem 1.5rem;
}

.export-pl-prompt-dialog__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text, #0f172a);
}

.export-pl-prompt-dialog__body {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-muted, #475569);
  white-space: pre-line;
}

.export-pl-prompt-dialog__figure {
  margin: 0.125rem 0 0;
  overflow: hidden;
  border-radius: 0.375rem;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  /* Extra wash beyond the SVG's own edge fade — soft vignette into the dialog. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}

.export-pl-prompt-dialog__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.export-pl-prompt-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.export-pl-prompt-dialog__cancel {
  margin-right: auto;
}

.inbound-filters-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.inbound-filters-open-btn.inbound-filters-open-btn--filtered,
.inbound-filters-open-btn--filtered {
  background: var(--color-primary-strong, #1e3a5f);
  box-shadow: 0 0 0 2px var(--color-primary-strong, #1e3a5f) inset,
    0 0 0 3px rgba(30, 58, 95, 0.15);
}

.inbound-filters-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--color-primary-strong, #1e3a5f);
  border-radius: 999px;
}

.inbound-filters-open-btn--filtered .inbound-filters-badge {
  color: var(--color-primary-strong, #1e3a5f);
  background: #fff;
}

.inbound-filters-add-btn.inbound-filters-add-btn--filtered,
.inbound-filters-add-btn--filtered {
  background: var(--color-primary-strong, #1e3a5f);
  box-shadow: 0 0 0 2px var(--color-primary-strong, #1e3a5f) inset,
    0 0 0 3px rgba(30, 58, 95, 0.15);
}

.inbound-filters-add-btn--filtered .inbound-filters-badge {
  color: var(--color-primary-strong, #1e3a5f);
  background: #fff;
}

/* "+ Add filter" menu button (inbound + PLT + other chip-bar pages). The shared
   `.inbound-filters-open-btn` still drives sibling filter modals that have not migrated. */
.inbound-filters-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.inbound-filters-add-btn__plus {
  font-size: 1.05em;
  font-weight: 600;
  line-height: 1;
}

/* Per-facet + menu popovers use the native `[popover]` attribute (top-layer + Esc + light-dismiss).
   The AnchoredPopover hook sets `position:fixed` + top/left against the trigger; the default
   centered UA position only shows for the instant before its beforetoggle handler runs. */
.inbound-facet-popover {
  box-sizing: border-box;
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border-light, #d6dde5);
  border-radius: var(--radius-md, 0.5rem);
  background: var(--color-surface, #fff);
  box-shadow: var(--shadow-xl);
  width: max-content;
  max-width: min(24rem, calc(100vw - 2rem));
  max-height: min(70vh, 32rem);
  overflow: auto;
}

/* Each facet control already carries its own label, so drop the field's own bottom margin. */
.inbound-facet-popover .inbound-filters-field {
  margin-bottom: 0;
}

/* Long facets (e.g. Sub-department) get a single column + internal scroll inside the narrow panel. */
.inbound-facet-popover .inbound-filters-checkbox-list {
  grid-template-columns: 1fr;
  max-height: 18rem;
  overflow: auto;
}

.inbound-facet-popover .inbound-filter-product-sku-input {
  width: 100%;
}

.inbound-filter-menu {
  min-width: 16rem;
}

.inbound-filter-menu__facets {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.inbound-filter-menu__item {
  display: block;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: none;
  border-radius: var(--radius-sm, 0.375rem);
  background: none;
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-text, #0f172a);
  text-align: left;
  cursor: pointer;
}

.inbound-filter-menu__item:hover,
.inbound-filter-menu__item:focus-visible {
  background: var(--color-surface-muted, #f1f5f9);
  outline: none;
}

/* Narrow viewports: the hook bails out of manual positioning; CSS pins the panel to a full-width
   sheet under the toolbar. */
@media (max-width: 640px) {
  .inbound-facet-popover:popover-open {
    position: fixed;
    inset: 0.5rem 0.5rem auto 0.5rem;
    margin: 0;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 1rem);
  }
}

.inbound-filters-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  /* Symmetric block margins: the chip row is a flex *sibling* of the toolbar row under
     `align-items: center`, so an uneven block margin offsets the chips from the buttons'
     centre line by half the difference. */
  margin: 0.375rem 0;
  font-size: 0.85rem;
}

.inbound-filters-chip-list-label {
  color: var(--color-text-muted, #64748b);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  margin-right: 0.25rem;
}

.inbound-filters-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem 0.15rem 0.6rem;
  background: var(--color-surface-alt, #eef2f7);
  color: var(--color-text, #0f172a);
  border: 1px solid var(--color-border-light, #d6dde5);
  border-radius: 999px;
  text-decoration: none;
  line-height: 1.35;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.inbound-filters-chip:hover,
.inbound-filters-chip:focus-visible {
  background: var(--color-surface-elevated, #dfe6ee);
  border-color: var(--color-border, #b7c1cc);
  outline: none;
}

.inbound-filters-chip-label {
  white-space: nowrap;
}

.inbound-filters-chip-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-text-muted, #64748b);
  border-radius: 999px;
}

.inbound-filters-chip:hover .inbound-filters-chip-close,
.inbound-filters-chip:focus-visible .inbound-filters-chip-close {
  color: var(--color-text, #0f172a);
  background: rgba(0, 0, 0, 0.06);
}

.shipments-card-header-filters-applied {
  color: var(--color-text-muted, #64748b);
  margin-left: 0.35rem;
}

.inbound-filters-overlay-content {
  text-align: left;
}

.inbound-filters-overlay-header {
  padding: 1.25rem 1.25rem 0;
  border-bottom: 1px solid var(--color-border-light);
}

.inbound-filters-overlay-header .shipment-overlay-title {
  margin: 0;
  font-size: 1.2rem;
}

.inbound-filters-overlay-body {
  padding: 1rem 1.25rem 1.25rem;
  overflow: visible;
  max-height: none;
}

.inbound-filters-section-label {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #64748b);
}

.inbound-filters-preset-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  align-items: stretch;
}

.inbound-filters-preset-link {
  flex: 1 1 9.5rem;
  min-width: 0;
  text-align: center;
  box-sizing: border-box;
}

.inbound-filters-field {
  margin-bottom: 0.9rem;
}

.inbound-filters-field:last-of-type {
  margin-bottom: 0;
}

.inbound-filters-field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--color-text, #0f172a);
}

.inbound-filters-date-range {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  /* Right-side whitespace is deliberate — the date range is intrinsically ~22rem
     of controls; letting it fill the whole filter column made it read as a huge
     unbalanced element next to the compact checkbox groups. */
}

.inbound-filters-date-range .inbound-filter-date-input {
  flex: 0 0 auto;
  width: 9.5rem;
  min-width: 0;
}

.inbound-filters-date-range-sep {
  color: var(--color-text-muted, #64748b);
  font-size: 0.9rem;
  padding: 0 0.15rem;
}

/* Search inputs inside the filter overlay — cap width so the placeholder isn't
   truncated at ~14 chars ("Footwear & accessorie…") in the narrower column. */
.inbound-filters-overlay-body .inbound-filter-product-sku-input {
  max-width: 22rem;
  width: 100%;
}

.shipment-overlay.inbound-filters-dialog .shipment-overlay-content.inbound-filters-overlay-content {
  position: relative;
  z-index: 0;
  max-height: none;
  overflow: visible;
}

.inbound-filters-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  align-items: start;
}

.inbound-filters-cols .inbound-filters-field {
  margin-bottom: 0;
}

@media (max-width: 52rem) {
  .inbound-filters-cols {
    grid-template-columns: 1fr;
  }
}

.shipment-overlay.inbound-filters-dialog .inbound-filters-overlay-close,
.shipment-overlay.inbound-filters-dialog .shipment-overlay-close.inbound-filters-overlay-close {
  z-index: 3;
  pointer-events: auto;
}

/* Checkbox lists: three columns on wide overlays, two on mid, one on narrow.
   `minmax(0, 1fr)` lets long labels (e.g. "Pending delivery appointment") share
   a track without pushing the grid to a single column. */
.inbound-filters-checkbox-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: none;
  overflow: visible;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm, 0.375rem);
  background: var(--color-surface, #fff);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-content: start;
}

@media (max-width: 72rem) {
  .inbound-filters-checkbox-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 28rem) {
  .inbound-filters-checkbox-list {
    grid-template-columns: 1fr;
  }
}

.inbound-filters-checkbox-list li {
  border-bottom: 1px solid var(--color-border-light, #e2e8f0);
}

.inbound-filters-checkbox-list li:last-child {
  border-bottom: none;
}

/* Phase-filter hint, shared by the drayage and receiving portals' filter panels */
.drayage-portal-phase-filter__hint {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
}

/* Drayage + receiving portal shipment tables */
.drayage-portal-page .table-wrap > table.shipment-table {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
}

.drayage-portal-page .shipment-table th {
  font-size: 0.7rem;
  line-height: 1.25;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.drayage-portal-page .shipment-table th.col-date {
  width: 6.75rem;
  min-width: 6.5rem;
  max-width: 7.25rem;
  box-sizing: border-box;
}

.drayage-portal-page .shipment-table td.col-date {
  width: 6.75rem;
  min-width: 6.5rem;
  max-width: 7.25rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

.drayage-portal-page .shipment-table th.col-actions,
.drayage-portal-page .shipment-table td.col-actions {
  white-space: nowrap;
}

.drayage-portal-page .shipment-table th.col-drayage-priority,
.drayage-portal-page .shipment-table td.col-drayage-priority {
  width: 6.25rem;
  min-width: 6.25rem;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

/*
 * In-row editing, after the Launch Tracker's note cells: a cell shows its value as a button;
 * clicking opens that one cell's editor, which may outgrow the 7.25rem date-cell cap.
 */
.drayage-portal-page .shipment-table td.col-date:has(.drayage-cell-form),
.drayage-portal-page .shipment-table td.col-notes:has(.drayage-cell-form) {
  width: auto;
  max-width: none;
}

.drayage-cell-btn {
  display: block;
  width: 100%;
  min-height: 1.5rem;
  text-align: left;
  background: none;
  border: 1px dashed transparent;
  border-radius: 4px;
  padding: 0.15rem 0.3rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.drayage-cell-btn:hover,
.drayage-cell-btn:focus-visible {
  border-color: #94a3b8;
  background: #f8fafc;
  outline: none;
}

.drayage-cell-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}

.drayage-cell-datetime {
  display: flex;
  gap: 0.25rem;
}

.drayage-cell-input {
  padding: 0.2rem 0.35rem;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.drayage-cell-input--notes {
  min-width: 14rem;
}

.drayage-cell-actions {
  display: flex;
  gap: 0.35rem;
}

.drayage-cell-actions .btn {
  padding: 0.15rem 0.6rem;
  font-size: 0.8rem;
}

.drayage-inline-hint {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
}

.drayage-portal-page .drayage-portal-edit-btn {
  min-width: 3.25rem;
}

.drayage-priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(185, 28, 28, 0.45);
}

.drayage-priority-badge__icon {
  flex-shrink: 0;
  display: block;
  color: #fff;
}

.drayage-priority-badge__label {
  white-space: nowrap;
}

.drayage-priority-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.drayage-priority-btn--on:hover .drayage-priority-badge {
  background: #b91c1c;
  box-shadow: 0 2px 6px rgba(185, 28, 28, 0.5);
}

.drayage-priority-set-slot {
  display: block;
  width: 100%;
  min-height: 1.75rem;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.drayage-priority-set-slot:hover,
.drayage-priority-set-slot:focus-visible {
  background: rgba(220, 38, 38, 0.06);
  outline: none;
}

.drayage-portal-page .shipment-table tr.drayage-portal-row--priority {
  background: linear-gradient(90deg, rgba(254, 226, 226, 0.55) 0%, rgba(255, 247, 237, 0.35) 100%);
  box-shadow: inset 3px 0 0 #dc2626;
}

.receiving-portal-page .shipment-table th.col-receiving-priority,
.receiving-portal-page .shipment-table td.col-receiving-priority {
  width: 6.25rem;
  min-width: 6.25rem;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.receiving-portal-page .receiving-priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(185, 28, 28, 0.45);
}

.receiving-portal-page .receiving-priority-badge__icon {
  flex-shrink: 0;
  display: block;
  color: #fff;
}

.receiving-portal-page .receiving-priority-badge__label {
  white-space: nowrap;
}

.receiving-portal-page .receiving-priority-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.receiving-portal-page .receiving-priority-btn--on:hover .receiving-priority-badge {
  background: #b91c1c;
  box-shadow: 0 2px 6px rgba(185, 28, 28, 0.5);
}

.receiving-portal-page .receiving-priority-set-slot {
  display: block;
  width: 100%;
  min-height: 1.75rem;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.receiving-portal-page .receiving-priority-set-slot:hover,
.receiving-portal-page .receiving-priority-set-slot:focus-visible {
  background: rgba(220, 38, 38, 0.06);
  outline: none;
}

.receiving-portal-page .shipment-table tr.receiving-portal-row--priority {
  background: linear-gradient(90deg, rgba(254, 226, 226, 0.55) 0%, rgba(255, 247, 237, 0.35) 100%);
  box-shadow: inset 3px 0 0 #dc2626;
}

/* Receiving portal: column widths to reduce wrapping in the shipment table */
.receiving-portal-page .shipment-table th.col-tracking,
.receiving-portal-page .shipment-table td.col-tracking {
  white-space: nowrap;
  min-width: 9rem;
}

.receiving-portal-page .tracking-id-cell .tracking-id-value {
  word-break: normal;
  white-space: nowrap;
}

.receiving-portal-page .shipment-table th.col-po-collective-group,
.receiving-portal-page .shipment-table td.col-po-collective-group {
  min-width: 14rem;
  max-width: 22rem;
  width: 18rem;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: normal;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.receiving-portal-page .shipment-po-asn-matrix--po-collective.shipment-po-asn-matrix--header,
.receiving-portal-page .shipment-po-asn-matrix--po-collective .shipment-po-asn-matrix__line {
  grid-template-columns: minmax(6.5rem, 1fr) minmax(6.5rem, 1fr);
}

.receiving-portal-page .shipment-po-asn-matrix--po-collective.shipment-po-asn-matrix--header {
  align-items: start;
}

.receiving-portal-page .shipment-table th.col-nri-received-doc,
.receiving-portal-page .shipment-table td.col-nri-received-doc {
  min-width: 6.5rem;
  max-width: 9rem;
  vertical-align: top;
}

.receiving-portal-page .shipment-table th.col-carrier,
.receiving-portal-page .shipment-table td.col-carrier {
  max-width: 7.5rem;
  width: 7.5rem;
}

.receiving-portal-page .shipment-table th.col-origin,
.receiving-portal-page .shipment-table td.col-origin,
.receiving-portal-page .shipment-table th.col-destination,
.receiving-portal-page .shipment-table td.col-destination {
  min-width: 4.5rem;
  max-width: 8.5rem;
}

.receiving-portal-page .shipment-table th.col-transport-mode,
.receiving-portal-page .shipment-table td.col-transport-mode {
  max-width: 6.75rem;
  width: 6.75rem;
}

.receiving-portal-page .shipment-table th.col-phase,
.receiving-portal-page .shipment-table td.col-phase {
  min-width: 10rem;
  max-width: 12rem;
  width: 11rem;
}

.receiving-portal-page .shipment-table th.col-cartons,
.receiving-portal-page .shipment-table td.col-cartons,
.receiving-portal-page .shipment-table th.col-total-units,
.receiving-portal-page .shipment-table td.col-total-units {
  text-align: right;
}

.receiving-portal-page .shipment-table td.col-cartons,
.receiving-portal-page .shipment-table td.col-total-units {
  white-space: nowrap;
}

.inbound-filters-check-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.45rem 0.55rem;
  font-size: 0.9rem;
  line-height: 1.2;
  cursor: pointer;
}

.inbound-filters-check-label:hover {
  background: var(--color-surface-muted, #f1f5f9);
}

.inbound-filters-check-text {
  flex: 1;
  min-width: 0;
}

.inbound-filters-overlay-footer {
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border-light);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
}

/* Clear-filters link hugs the left; Apply sits at the right. */
.inbound-filters-overlay-footer__clear {
  margin-right: auto;
}

/* Dimmed area behind the modal; `phx-click` lives here so panel clicks are not ancestors of close. */
.shipment-overlay-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.shipment-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
}

.shipment-overlay-content {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

/* Full inbound shipment detail (former `/inbound/:id` page) inside overlay */
.shipment-detail-overlay-panel.shipment-overlay {
  width: 90vw;
  max-width: 90vw;
  min-width: 0;
  flex-shrink: 1;
  box-sizing: border-box;
}

.shipment-detail-overlay-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: min(90vh, 920px);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.shipment-detail-overlay-header {
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
  padding: 1.25rem 3rem 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  box-sizing: border-box;
}

.shipment-detail-overlay-body {
  flex: 1;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.shipment-detail-overlay-stack {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.shipment-detail-overlay-body .inbound-shipment-detail--overlay {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: clip;
}

.shipment-detail-overlay-body .inbound-shipment-detail--overlay .detail-card,
.shipment-detail-overlay-body .inbound-shipment-detail--overlay .packing-list-section,
.shipment-detail-overlay-body .inbound-shipment-detail--overlay .shipment-overlay-section--lines {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.shipment-detail-overlay-body .shipment-overlay-section--timeline {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

/* Override .inbound-shipment-detail { max-width: none } — table-wrap must stay panel-width and scroll. */
.shipment-detail-overlay-body .inbound-shipment-detail--overlay .table-wrap,
.shipment-detail-overlay-body .inbound-shipment-detail--overlay .table-wrap--footwear-sizes {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.shipment-detail-overlay-body
  .inbound-shipment-detail--overlay
  .table-wrap--footwear-sizes
  .shipment-table.shipment-table--footwear-sizes {
  width: max-content;
  min-width: 100%;
  max-width: none;
  table-layout: auto;
}

.shipment-detail-header--overlay {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.shipment-detail-header-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  min-width: 0;
}

.shipment-detail-header-main--overlay {
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
}

.shipment-detail-header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  min-width: 0;
}

.shipment-detail-header-top .shipment-overlay-title-row {
  flex: 1 1 auto;
  min-width: 0;
}

.shipment-overlay-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.shipment-overlay-title-row .shipment-overlay-title {
  flex: 1 1 auto;
  min-width: 0;
}

.shipment-overlay-star-btn {
  flex-shrink: 0;
}

.shipment-detail-header-top .shipment-overlay-title {
  flex: 1 1 auto;
  min-width: 0;
}

.shipment-detail-header-text {
  flex: 1;
  min-width: 0;
}

.shipment-detail-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.shipment-detail-header-actions .page-header-action-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.shipment-detail-header-actions .btn {
  min-height: 2rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.25;
  white-space: nowrap;
}

.shipment-overlay-title-link {
  color: inherit;
  text-decoration: none;
}

.shipment-overlay-title-link:hover {
  text-decoration: underline;
}

.shipment-overlay-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0;
  width: 100%;
}

.shipment-overlay-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted, #f3f4f6);
  font-size: 0.8125rem;
  line-height: 1.25;
  min-height: 1.625rem;
  box-sizing: border-box;
}

.shipment-overlay-meta-chip.lifecycle-badge {
  padding: 0.2rem 0.5rem;
}

.shipment-overlay-meta-chip.lifecycle-badge .lifecycle-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.shipment-overlay-meta-chip--muted {
  opacity: 0.85;
}

.shipment-overlay-meta-chip--warn {
  background: #fef3c7;
  color: #92400e;
}

.shipment-overlay-meta-chip__label {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.shipment-overlay-meta-chip__value {
  font-weight: 500;
}

.shipment-detail-body.inbound-shipment-detail--overlay {
  padding: 0.75rem 1rem 1.25rem;
}

.shipment-overlay-section {
  margin-bottom: 1.25rem;
}

.shipment-overlay-section-title {
  margin: 0 0 0.65rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}

.shipment-overlay-summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
}

.shipment-overlay-stat {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-width: 0;
  box-sizing: border-box;
}

.shipment-overlay-stat--emphasis {
  border-color: var(--color-primary, #2563eb);
  background: color-mix(in srgb, var(--color-primary, #2563eb) 6%, white);
}

.shipment-overlay-stat--warn .shipment-overlay-stat__value {
  color: #b45309;
}

.shipment-overlay-stat__value {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.shipment-overlay-stat__label {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.shipment-overlay-related-dl {
  margin: 0;
}

.shipment-overlay-related-dl--schedule {
  margin-top: 0.35rem;
}

.shipment-overlay-related-label {
  margin: 1rem 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.shipment-overlay-related-label:first-of-type {
  margin-top: 0.85rem;
}

.shipment-overlay-related-row {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) 1fr;
  gap: 0.35rem 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--color-border-subtle, #eee);
}

.shipment-overlay-related-row--full:last-child,
.shipment-overlay-related-pair:last-child {
  border-bottom: none;
}

.shipment-overlay-related-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.25rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--color-border-subtle, #eee);
}

.shipment-overlay-related-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.shipment-overlay-related-row dt,
.shipment-overlay-related-field dt {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.shipment-overlay-related-field dt {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.25;
}

.shipment-overlay-related-row dd,
.shipment-overlay-related-field dd {
  margin: 0;
  font-size: 0.875rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.shipment-overlay-route-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.shipment-overlay-aliases {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.shipment-overlay-alias-chip {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
  background: var(--color-surface);
  font-size: 0.8125rem;
  font-family: var(--font-mono, ui-monospace, monospace);
}

.shipment-overlay-alias-chip--warn {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}

.shipment-overlay-disclosure {
  margin-bottom: 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.shipment-overlay-disclosure-summary {
  cursor: pointer;
  padding: 0.65rem 0.85rem;
  font-weight: 600;
  font-size: 0.875rem;
  list-style-position: inside;
}

.shipment-overlay-disclosure-content {
  padding: 0 0.85rem 0.85rem;
  border-top: 1px solid var(--color-border-subtle, #eee);
}

.shipment-overlay-section--alerts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.shipment-overlay-section--alerts .dhl-push-inline-banner {
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
  box-sizing: border-box;
}

.shipment-overlay-section--alerts .dhl-push-inline-banner .text-muted {
  flex: 1 1 12rem;
  min-width: 0;
}

.shipment-map-container--overlay {
  min-height: 220px;
  border-radius: var(--radius-md);
}

.shipment-detail-overlay-panel > .shipment-overlay-close {
  top: calc(1.25rem + 1.1rem);
  transform: translateY(-50%);
  right: 1rem;
  z-index: 11;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.inbound-shipment-detail--overlay .detail-card {
  min-width: 0;
}

.inbound-shipment-detail--vendor-size-chart {
  padding: 0.75rem 1rem 1.25rem;
}

.shipment-detail-header--vendor-size-chart {
  padding: 0;
}

@media (max-width: 640px) {
  .shipment-overlay-backdrop.panorama-url-overlay--shipment {
    padding: 0;
  }

  .shipment-detail-overlay-panel.shipment-overlay {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .shipment-detail-overlay-content {
    max-height: 100vh;
  }

  .shipment-detail-overlay-header {
    padding: 1rem 2.75rem 0.65rem 0.85rem;
  }

  .shipment-detail-body.inbound-shipment-detail--overlay {
    padding: 0.65rem 0.85rem 1rem;
  }

  .shipment-overlay-summary-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shipment-overlay-related-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .shipment-overlay-related-pair {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .shipment-detail-header-main {
    flex-direction: column;
    align-items: stretch;
  }

  .shipment-detail-header-top {
    flex-direction: column;
    align-items: stretch;
  }

  .shipment-detail-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

button.table-link.table-link--overlay,
button.table-link.po-overlay-shipment-link {
  color: inherit;
  text-decoration: underline;
}

/* Inbound shipments list: text-style links read as classic hyperlinks (blue + underlined). */
.inbound-page .shipment-table thead a.sortable-header {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.inbound-page .shipment-table thead a.sortable-header:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.inbound-page a.table-link,
.inbound-page button.table-link,
.inbound-page button.table-link.table-link--overlay {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.inbound-page a.table-link:hover,
.inbound-page button.table-link:hover,
.inbound-page button.table-link.table-link--overlay:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.inbound-page .page-header-detail .back-link {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.inbound-page .page-header-detail .back-link:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.inbound-page .tracking-link-external {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.inbound-page .tracking-link-external:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* Shipment detail overlay uses the same detail markup without `.inbound-page`. */
.inbound-shipment-detail--overlay a.table-link,
.inbound-shipment-detail--overlay button.table-link,
.inbound-shipment-detail--overlay button.table-link.table-link--overlay {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.inbound-shipment-detail--overlay a.table-link:hover,
.inbound-shipment-detail--overlay button.table-link:hover,
.inbound-shipment-detail--overlay button.table-link.table-link--overlay:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.inbound-shipment-detail--overlay .tracking-link-external {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.inbound-shipment-detail--overlay .tracking-link-external:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.shipment-overlay-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border-light);
}

.shipment-overlay-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.shipment-overlay-status {
  font-size: 0.8125rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-accent-muted);
  color: var(--color-accent);
}

.shipment-overlay-status.status-delivered,
.shipment-overlay-status.status-empty_returned {
  background: #e6f4ea;
  color: #137333;
}

.shipment-overlay-status.status-in_transit {
  background: #e8f0fe;
  color: #1967d2;
}

.shipment-overlay-status.status-exception {
  background: #fce8e6;
  color: #c5221f;
}

.shipment-overlay-edit-link {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  text-decoration: none;
}

.shipment-overlay-edit-link:hover {
  color: var(--color-accent);
}

.shipment-overlay-track-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  margin-left: auto;
  margin-right: 20px;
}

.shipment-overlay-track-link:hover {
  color: var(--color-accent-hover);
}

.shipment-overlay-track-link .ext-link-icon {
  flex-shrink: 0;
}

.shipment-overlay-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.25rem;
}

.shipment-overlay-close:hover {
  color: var(--color-text);
}

.shipment-overlay-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.shipment-overlay-details {
  flex: 0 0 50%;
  overflow-y: auto;
  padding: 1.25rem;
  border-right: 1px solid var(--color-border-light);
}

.shipment-overlay-map {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 280px;
  height: 320px;
  background: var(--color-border-light);
}

.shipment-detail-group {
  margin-bottom: 1.25rem;
}

.shipment-detail-group:last-child {
  margin-bottom: 0;
}

.detail-group-title {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-subtle);
}

.detail-row {
  display: flex;
  gap: 0.75rem;
  padding: 0.25rem 0;
  font-size: 0.9375rem;
}

.detail-label {
  flex: 0 0 7rem;
  color: var(--color-text-muted);
}

.detail-value {
  flex: 1;
}

.shipment-map-container {
  position: relative;
  min-height: 280px;
  height: 320px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Route vertices: small squares (see assets/js/app.js SHIPMENT_ROUTE_LINE_WEIGHT) */
.leaflet-div-icon.shipment-map-route-point {
  background: transparent !important;
  border: none !important;
}

.shipment-map-route-point .shipment-map-route-point__square {
  width: 100%;
  height: 100%;
  background: var(--color-brand);
  opacity: 0.95;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.shipment-map-route-point--destination .shipment-map-route-point__square {
  border-width: 2px;
}

.shipment-map-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.shipment-map-placeholder p {
  margin: 0;
}

.shipment-map-debug {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.25rem 0.5rem;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.7rem;
  z-index: 1000;
  word-break: break-all;
  max-height: 40%;
  overflow-y: auto;
}

.shipment-map-debug .shipment-map-debug__line {
  display: block;
  line-height: 1.35;
}

.inbound-shipments-map-container {
  min-height: 520px;
  height: min(72vh, 720px);
}

.shipment-report-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.25rem;
}

.shipment-report-view-btn--active {
  background: var(--color-accent, #1967d2);
  border-color: var(--color-accent, #1967d2);
  color: #fff;
}

.plt-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.25rem;
}

.plt-view-toggle-btn--active {
  background: var(--color-accent, #1967d2);
  border-color: var(--color-accent, #1967d2);
  color: #fff;
}

.leaflet-div-icon.inbound-shipments-map-marker {
  background: transparent !important;
  border: none !important;
}

.inbound-shipments-map-marker__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 2rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  background: var(--color-brand);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.shipment-map-status {
  position: absolute;
  top: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--color-border-light, #ddd);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.shipment-report-map-summary {
  margin: 0.75rem 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted, #f8f9fb);
}

.shipment-report-map-summary__lead {
  margin: 0 0 0.65rem;
  font-size: 0.875rem;
}

.shipment-report-map-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 1.5rem;
}

.shipment-report-map-summary__heading {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.shipment-report-map-summary__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.shipment-report-map-summary__list li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.2rem 0;
  font-size: 0.8125rem;
}

.shipment-report-map-summary__count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.shipment-report-map-summary__empty {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.inbound-shipments-map-marker--received .inbound-shipments-map-marker__pill {
  background: #0d904f;
}

.inbound-shipments-map-marker__pill--dense {
  font-size: 0.5625rem;
  padding: 0 0.25rem;
}

.inbound-shipments-map-popup__list {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  max-height: 12rem;
  overflow-y: auto;
}

.inbound-shipments-map-popup__list li + li {
  margin-top: 0.35rem;
}

.inbound-shipments-map-popup__link {
  color: var(--color-link, #1967d2);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8125rem;
}

.inbound-shipments-map-popup__status {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}

@media (max-width: 768px) {
  .shipment-overlay-body {
    flex-direction: column;
  }

  .shipment-overlay-details {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid var(--color-border-light);
  }

  .shipment-overlay-map {
    min-height: 220px;
  }
}

/* Purchase Orders page */
.purchase-orders-page {
  animation: fadeIn 0.3s ease;
}

.po-area-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0.5rem 0 0.25rem;
  padding: 0;
  border-bottom: 1px solid var(--color-border-light);
  width: 100%;
  max-width: 100%;
}

a.po-area-tab {
  display: inline-block;
  padding: 0.35rem 0.15rem 0.5rem;
  margin-bottom: -1px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  border-radius: 2px 2px 0 0;
}

a.po-area-tab:hover {
  color: var(--color-text);
}

a.po-area-tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

a.po-area-tab--active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

.po-area-tab-badge {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 9px;
  /* #d85a30 gave white 11px text 3.9:1; this clears AA (about 5.6:1). Shared with My queue. */
  background: var(--color-action-badge);
  color: #fff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.inbound-hub-tabs {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.po-delivery-docs-table {
  font-size: 0.875rem;
}

.po-delivery-docs-table td {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.po-delivery-docs-table td:first-child {
  max-width: 10rem;
}

.po-delivery-docs-col-raw {
  vertical-align: top;
  white-space: normal;
  max-width: none;
}

.po-delivery-docs-raw-details pre.po-raw-payload {
  margin-top: 0.5rem;
  max-height: 24rem;
  overflow: auto;
}

.purchase-orders-page .po-list-fl-col {
  white-space: nowrap;
  font-size: 0.8125rem;
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.po-first-line-filters {
  margin-bottom: 0.75rem;
}

.po-first-line-filters-fieldset {
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  padding: 0.65rem 0.85rem 0.75rem;
  margin: 0;
}

.po-first-line-filters-legend {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0 0.35rem;
}

.po-first-line-filters-hint {
  margin: 0 0 0.5rem;
  max-width: 52rem;
}

.po-first-line-filters-grid {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.po-first-line-filters-row {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) auto auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.po-first-line-filters-label {
  color: var(--color-text-muted);
}

.po-first-line-filters-check {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  white-space: nowrap;
}

.po-number-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: none;
}

.po-number-btn:hover {
  text-decoration: underline;
  color: var(--color-accent-hover);
}

.po-hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
}

.po-inbound-shipments-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.po-inbound-shipments-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.po-overlay-inbound-shipments {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.po-overlay-inbound-shipment-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.po-overlay-associated-asns {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.po-overlay-associated-asn-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0.15rem;
}

.po-overlay-associated-asn-dd {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.po-overlay-associated-asn-bol {
  font-size: 0.875rem;
  opacity: 0.85;
}

.po-section-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

/* Hint sits below the toolbar row so it never shares a flex line with controls (avoids flex-end misalignment). */
.purchase-orders-page .po-toolbar-hint {
  margin: 0 0 0.75rem;
}

.purchase-orders-page .po-overlay-search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.purchase-orders-page .po-overlay-search-form .filter-search {
  flex: 1 1 min(100%, 18rem);
  min-width: 0;
}

.po-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.po-pagination-meta {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.po-pagination-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.po-pagination-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.inbound-list-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 0.75rem;
}

.inbound-list-footer--above {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.inbound-list-footer .po-pagination {
  margin-bottom: 0;
  flex: 1 1 auto;
}

.inbound-per-page-form {
  display: flex;
  /* "Per page" belongs beside its select, not above it: wrapping turned the control into a
     two-line block next to the 32px buttons it shares a bar (and a list footer) with. */
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-left: auto;
}

.inbound-per-page-label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
  /* `flex-wrap: nowrap` on the form only stops the items wrapping — without this the label's
     own text breaks ("Per" over "page") wherever the bar is squeezed. */
  white-space: nowrap;
}

.inbound-per-page-select {
  min-width: 4.5rem;
  max-width: 6rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.po-fulfillment-filter-root {
  min-width: 0;
}

.po-filter-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

/* Keep SlimSelect from stretching across the full card width (matches inbound phase filter scale). */
.purchase-orders-page .po-filter-status-control {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 18rem;
  width: min(18rem, 100%);
}

.po-filter-preset-incomplete {
  flex-shrink: 0;
  white-space: nowrap;
}

.po-filter-status-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.po-filtered-empty {
  margin-top: 0.5rem;
}

.po-inbound-shipments-wrap {
  min-width: 0;
}

.po-fulfillment-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
  max-width: 100%;
  word-break: break-word;
}

.po-fulfillment-no_shipments {
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
}

/* Cancelled outranks every other fulfillment status, so it reads as struck-through and inert
   rather than as another state of an order still in progress. */
.po-fulfillment-cancelled {
  background: #eceff1;
  color: #37474f;
  text-decoration: line-through;
}

.po-fulfillment-asn_pending_no_inbound {
  background: #ede7f6;
  color: #4527a0;
}

.po-fulfillment-sap_marked_complete {
  background: #e0f2f1;
  color: #00695c;
}

.po-fulfillment-sap_complete_active_inbound {
  background: #fff3e0;
  color: #e65100;
}

.po-fulfillment-split_collective {
  background: #fce4ec;
  color: #880e4f;
}

.po-fulfillment-collective_mismatch {
  background: #fff3e0;
  color: #e65100;
}

.po-fulfillment-exception {
  background: #fde8e8;
  color: #8a1f1f;
}

.po-fulfillment-delayed {
  background: #fff4e5;
  color: #8a5a00;
}

.po-fulfillment-mixed_inbound {
  background: #e8f0fe;
  color: #174ea6;
}

.po-fulfillment-in_transit {
  background: #e8f4fd;
  color: #1557a0;
}

.po-fulfillment-at_dc_pending_receipt {
  background: #e6f4ea;
  color: #137333;
}

.po-fulfillment-received_qty_short {
  background: #fce8e6;
  color: #7a1f0a;
}

.po-fulfillment-received_qty_over {
  background: #e8eaf6;
  color: #283593;
}

.po-fulfillment-received_qty_complete {
  background: #e6f4ea;
  color: #0d652d;
}

.po-fulfillment-fully_received {
  background: #e8f5e9;
  color: #1b5e20;
}

.po-overlay-body .shipment-overlay-details {
  flex: 1;
}

.shipment-overlay.po-overlay {
  width: min(1160px, 90vw);
  max-width: min(1160px, 90vw);
  min-width: 0;
  box-sizing: border-box;
}

.po-overlay-content {
  max-height: min(92vh, 960px);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.po-overlay-body {
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.po-overlay-body .shipment-overlay-details,
.po-overlay-details {
  flex: 1 1 auto;
  border-right: none;
  width: 100%;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.25rem;
}

.po-overlay-header {
  align-items: flex-start;
  gap: 0.75rem;
}

.wholesale-order-overlay-sync {
  margin: 0.25rem 0 0.5rem;
}

.po-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  width: 100%;
}

.po-detail-header-text {
  flex: 1;
  min-width: 0;
}

.po-detail-header--page {
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-border-light);
}

.po-overlay-open-full-btn {
  flex-shrink: 0;
  white-space: nowrap;
  margin-top: 0.15rem;
}

.po-show-page .po-show-section {
  padding: 0 1.25rem 1.5rem;
}

.po-show-card-header .po-card-header-content {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
}

.po-show-back-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent, #1967d2);
  text-decoration: none;
}

.po-show-back-link:hover {
  text-decoration: underline;
}

.po-show-panel {
  /* Full page width: a 1160px cap forced the LINE ITEMS wrap into a nested H-scroll
     once Material/Description needed room, while empty viewport sat beside the panel. */
  max-width: 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.po-show-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* PO line-items export: a single `<details>` button that drops a format menu. The trigger carries
   `.btn.btn-outline.btn-sm` so it *is* one of the toolbar buttons; only the list marker and the
   caret are added here.

   Deliberately not built from `.filter-form` / `.filter-select`: both are defined twice in this
   file and the winning pair is not the one you find first — `.filter-form`'s later definition adds
   `flex-wrap: wrap`, which broke this control onto two rows when it was a select + button. */
.po-export-menu {
  position: relative;
  display: inline-block;
}

.po-export-menu__trigger {
  list-style: none;
  cursor: pointer;
}

.po-export-menu__trigger::-webkit-details-marker {
  display: none;
}

.po-export-menu__trigger::after {
  content: "▾";
  margin-left: 0.35rem;
  font-size: 0.9em;
  line-height: 1;
}

.po-export-menu[open] .po-export-menu__trigger {
  background: var(--color-border-light);
  color: var(--color-text);
}

/* Setting `display` on a non-summary child overrides the UA rule that hides a closed <details>,
   so the open state has to be spelled out explicitly — otherwise the menu renders while shut. */
.po-export-menu__list {
  display: none;
}

.po-export-menu[open] .po-export-menu__list {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 30;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.po-export-menu__item {
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 500;
  font-family: var(--font-sans);
  line-height: 1.4;
  white-space: nowrap;
  text-align: left;
  text-decoration: none;
  color: var(--color-text-muted);
  transition: background var(--transition), color var(--transition);
}

.po-export-menu__item:hover,
.po-export-menu__item:focus {
  background: var(--color-border-light);
  color: var(--color-text);
}

/* Wholesale actions menu ("···"). Follows the order-log design: a bare dots trigger, a
   fixed-width panel on `--radius-md` with the large shadow, and two-line items — a medium label
   over a subtle note. Distinct from `.po-export-menu`, which is a chevron trigger sizing to its
   content; the two are not interchangeable.

   Opening is a client-side class toggle, so it costs no round trip. The panel stays in the DOM
   and is revealed by `.is-open`, which keeps its contents patchable — unlike a
   `phx-update="ignore"` disclosure, where nothing inside can re-render. A full-viewport overlay
   catches the outside click. */
.wholesale-actions-menu {
  position: relative;
  display: inline-block;
}

.wholesale-actions-menu__trigger {
  line-height: 1;
  letter-spacing: 0.08em;
}

.wholesale-actions-menu__overlay {
  position: fixed;
  inset: 0;
  z-index: 39;
  display: none;
}

.wholesale-actions-menu.is-open .wholesale-actions-menu__overlay {
  display: block;
}

.wholesale-actions-menu__list {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  width: 15rem;
  overflow: hidden;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.wholesale-actions-menu.is-open .wholesale-actions-menu__list {
  display: flex;
}

.wholesale-actions-menu__item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 100%;
  padding: 0.55rem 0.8rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background var(--transition);
}

.wholesale-actions-menu__item:hover,
.wholesale-actions-menu__item:focus {
  background: var(--color-border-light);
}

.wholesale-actions-menu__item[disabled] {
  cursor: progress;
  opacity: 0.6;
}

.wholesale-actions-menu__label {
  font-weight: 500;
  color: var(--color-text);
}

.wholesale-actions-menu__note {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--color-text-subtle);
}

.po-show-sync-btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.po-show-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

.po-show-page .po-overlay-items-table-wrap,
.po-show-page .po-items-table-wrap {
  --lock-budget: min(70vh, calc(100dvh - 12rem));
  overflow: auto;
}

/* PO line items: compact grid. Overlay keeps a nested scrollport (height-capped panel).
   The show page lets the table use the page width — a nested H-scroll beside empty
   viewport was the wrong trade. */
.po-overlay-section--lines .po-items-table-wrap,
.po-overlay-section--lines .po-overlay-items-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.po-show-page .po-overlay-section--lines .po-items-table-wrap,
.po-show-page .po-overlay-section--lines .po-overlay-items-table-wrap {
  /* Page-level: pin thead to the viewport; sideways growth is the page's job. */
  --lock-budget: none;
  overflow: visible;
  scrollbar-gutter: auto;
}

.po-overlay-body .po-overlay-section--lines .po-items-table-wrap,
.po-overlay-body .po-overlay-section--lines .po-overlay-items-table-wrap {
  --lock-budget: min(42vh, 440px);
  overflow: auto;
}

.po-overlay-section--lines .po-items-table,
.po-overlay-section--lines .po-overlay-items-table {
  width: 100%;
  /* Floor for the compact schedule grid; Material/Description min-widths expand past this. */
  min-width: 68rem;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
}

.po-overlay-items-table .po-overlay-col-material {
  min-width: 10rem;
  max-width: 14rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.po-overlay-items-table .po-overlay-col-plant {
  /* Wide enough for a plant code + the inline <select> chevron; clip so a long
     option label ("9000 · NRI Warehouse") cannot paint over Description. */
  width: 5.5rem;
  max-width: 5.5rem;
  white-space: nowrap;
  overflow: hidden;
}

.po-overlay-items-table .po-overlay-schedule-col {
  width: 4.75rem;
  max-width: 5rem;
  white-space: nowrap;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}

.po-overlay-items-table th.po-overlay-schedule-col {
  white-space: normal;
  font-size: 0.625rem;
  line-height: 1.2;
  font-weight: 600;
  vertical-align: bottom;
}

.po-overlay-items-table .po-overlay-num-col,
.po-overlay-items-table .po-overlay-item-num,
.po-overlay-items-table .po-overlay-select-col,
.po-overlay-items-table .po-overlay-actions-col {
  white-space: nowrap;
}

/* --- Destination grouping in the PO lines table ---------------------------
   A PO can ship its lines to more than one warehouse, so the lines are grouped
   into one tbody per destination, each headed by a band. The band is a `th`
   scoped to the rowgroup; it must NOT inherit the nowrap/white background the
   shared `.po-items-table th` rule gives column headers, and it must not be
   mistaken for the sticky thead (that rule targets `thead th` only). */
.po-items-table .po-destination-band__cell {
  padding: 0.55rem 0.75rem;
  white-space: normal;
  background: var(--color-brand-muted);
  border-top: 1px solid #cfe1f2;
  border-bottom: 1px solid #cfe1f2;
  border-left: 3px solid var(--color-brand);
  text-align: left;
  font-weight: 400;
  color: var(--color-text);
}

.po-destination-group:first-of-type .po-destination-band__cell {
  border-top: none;
}

.po-destination-band__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.35rem 1rem;
}

.po-destination-band__id {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  min-width: 0;
}

.po-destination-band__counter {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-brand);
}

.po-destination-band__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}

.po-destination-band__plant {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

/* The mode this section ships by. A section is one destination AND one mode, so this sits
   with the plant rather than in the row grid. */
.po-destination-band__mode {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-brand);
}

/* The destination-grouping toggle in the PO page toolbar. Reads as pressed while the by-mode
   cut is on, so the current view is legible without reading the URL. */
.po-grouping-toggle--on {
  background: var(--color-brand-muted);
  border-color: var(--color-brand);
  color: var(--color-brand);
}

/* Full width on its own line: an address is the longest thing in the band and
   wrapping it mid-street beside the name reads as two destinations. */
.po-destination-band__address {
  flex-basis: 100%;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.po-destination-band__counts {
  display: flex;
  gap: 1.25rem;
  flex-shrink: 0;
}

.po-destination-band__count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.po-destination-band__count-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-subtle);
}

.po-destination-band__count-value {
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.po-items-table .po-destination-subtotal > td {
  background: var(--color-surface-muted);
  font-weight: 600;
  font-size: 0.75rem;
}

.po-items-table .po-destination-subtotal__label {
  border-left: 3px solid var(--color-brand);
}

.po-items-table .po-line-grand-total > td {
  background: #dbe6f2;
  font-weight: 700;
  font-size: 0.8125rem;
  border-top: 2px solid var(--color-brand);
  border-bottom: none;
}

.po-show-split-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border-light);
}

.po-show-split-intro {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
  max-width: 42rem;
  line-height: 1.45;
}

.po-show-split-preview-wrap {
  max-height: none;
  overflow-y: visible;
}

.po-items-row--split-open td {
  background: var(--color-surface-muted, #f8fafc);
}

.po-items-row--split-new td {
  background: #f0fdf4;
}

.po-split-inline-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  background: #dcfce7;
  color: #166534;
  white-space: nowrap;
}

.po-split-legend--inline {
  margin: 0.5rem 0 0;
}

/* Pending OEM proposal whose SAP writes partially landed before the accept was
   interrupted — warns that the Accept button now retries/finishes, not re-writes. */
.po-split-proposal__partial-write {
  margin: 0.5rem 0 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-md);
  background: #fef3cd;
  color: #7a5b00;
  border: 1px solid #f5d97e;
  font-size: 0.9rem;
}

.po-split-actions--all {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border-light);
}

/* Status notice sits below the Save CTA so a tall post-write message cannot
   displace / read as covering the primary split action. */
.po-split-banner--after-actions {
  margin-top: 0.75rem;
}

/* Admin-only recorder for the SAP $batch payload of a split save. */
.po-split-capture-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  cursor: pointer;
}

.po-split-capture-panel {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
}

.po-split-capture-panel__title {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
}

.po-split-capture + .po-split-capture {
  margin-top: 0.75rem;
}

.po-split-capture__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

.po-split-capture__url {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.po-split-capture__body summary {
  cursor: pointer;
  font-size: 0.8125rem;
  margin: 0.35rem 0;
}

.po-line-split-expand-row td {
  padding: 0;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-surface-muted, #f8fafc);
}

.po-line-split-panel {
  padding: 1rem 1.25rem 1.25rem;
}

.po-line-split-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.po-line-split-panel-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.po-line-split-panel-material {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.po-line-split-form-grid {
  display: grid;
  grid-template-columns: minmax(14rem, 22rem) minmax(16rem, 1fr);
  gap: 1rem 1.5rem;
  margin-bottom: 1rem;
}

@media (max-width: 900px) {
  .po-line-split-form-grid {
    grid-template-columns: 1fr;
  }
}

.po-line-split-preview {
  margin-top: 0.5rem;
}

.po-line-split-preview-hint {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
}

.po-line-split-preview-wrap {
  max-height: none;
  overflow: visible;
}

.po-overlay-split-btn--active {
  background: var(--color-primary-soft, rgba(0, 128, 128, 0.08));
  border-color: var(--color-primary, #008080);
  color: var(--color-primary, #008080);
  font-weight: 600;
}

.po-overlay-header-text {
  flex: 1;
  min-width: 0;
  padding-right: 2rem;
}

.po-overlay-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
}

.po-overlay-meta-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--color-surface-muted, #f1f5f9);
  color: var(--color-text);
}

.po-overlay-meta-chip--muted {
  color: var(--color-text-muted);
}

.po-overlay-meta-chip--status {
  background: #e8f0fe;
  color: #1967d2;
  font-weight: 600;
}

.po-overlay-meta-chip--in-approval {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
  font-weight: 600;
}

.po-overlay-meta-chip--cancelled {
  background: #eceff1;
  border: 1px solid #b0bec5;
  color: #37474f;
  font-weight: 600;
}

.po-overlay-meta-chip__label {
  color: var(--color-text-muted);
  font-weight: 500;
}

.po-overlay-meta-chip__value {
  font-weight: 600;
}

.po-overlay-section {
  margin-bottom: 1.25rem;
}

.po-overlay-section-title {
  margin: 0 0 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-subtle);
}

.po-overlay-summary-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.po-overlay-stat {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md, 0.375rem);
  background: var(--color-surface-muted, #f8fafc);
}

.po-overlay-stat--emphasis {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.po-overlay-stat__value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.po-overlay-stat__label {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.po-overlay-related-block + .po-overlay-related-block {
  margin-top: 0.75rem;
}

.po-overlay-related-label {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Related flows inline, on the PO page and in the overlay alike: both already scroll (the
   page itself; `.po-overlay-details` in the overlay), and a scroll box inside a scrolling
   region is a scroll trap. Collapsing is how a reader gets it out of the way — the
   disclosure below — not a height cap. The wrap carries `.po-overlay-items-table-wrap`, which
   both contexts clamp and scroll (`.po-show-page …`, `.po-overlay-body …`, two classes each),
   so this rule sits later in the file at the same specificity and wins on order;
   `PoRelatedDisclosureAssetsTest` holds it and keeps the context rules from re-clamping.
   The header cells lose their sticky pin too, or they would stick to the scrollport as the
   rows scroll past; the line table is the one region that earns a sticky header. */
.po-related-disclosure .po-overlay-asn-shipment-table-wrap {
  --lock-budget: none;
  overflow: visible;
}

.po-related-disclosure .po-overlay-asn-shipment-table-wrap > table > thead th {
  position: static;
  box-shadow: none;
}

/* ── PO Related disclosure ─────────────────────────────────────────────────
   Native <details>. The whole summary row is the control; its one visible affordance is the
   Hide/Show button leading the row, dressed as a button because a bare text triangle is too
   small to invite a click (a second boxed chevron was tried and read as clutter). The row
   also carries what a collapsed section would hide (document and shipment counts, phase
   chips, BOL ↔ tracking mismatch). Open/closed is remembered per browser by the
   `PoRelatedDisclosure` hook. */
.po-related-disclosure {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.po-related-disclosure__summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-md);
}

.po-related-disclosure__summary::-webkit-details-marker {
  display: none;
}

.po-related-disclosure__summary:hover {
  background: var(--color-surface-muted);
}

.po-related-disclosure[open] > .po-related-disclosure__summary {
  border-bottom: 1px solid var(--color-border-light);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.po-related-disclosure__toggle svg {
  flex: none;
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

.po-related-disclosure[open] .po-related-disclosure__toggle svg {
  transform: rotate(180deg);
}

.po-related-disclosure__summary:hover .po-related-disclosure__toggle {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

/* The section-title class brings a bottom margin meant for a title on its own line. */
.po-related-disclosure__title {
  margin: 0;
}

.po-related-disclosure__counts {
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.po-related-disclosure__sep {
  margin: 0 0.3rem;
  color: var(--color-text-subtle);
}

.po-related-disclosure__facts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* Phase chips reuse .lifecycle-badge for colour and type; pill-shaped so they read as
   counts, not as the row badges in the table below. */
.po-related-disclosure__fact {
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* Same palette as .po-overlay-bol-tracking-mismatch-badge on the rows it counts. */
.po-related-disclosure__fact--warn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: #7a5b00;
  background: #fff8e6;
  border: 1px solid #e6c200;
}

.po-related-disclosure__toggle {
  flex: none;
  gap: 0.35rem;
  white-space: nowrap;
}

.po-related-disclosure[open] .po-related-disclosure__when-closed,
.po-related-disclosure:not([open]) .po-related-disclosure__when-open {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .po-related-disclosure__toggle svg {
    transition: none;
  }
}

/* PO Related: ASN|BOL|tracking matrix (Source PO omitted — header already shows the PO). */
.po-overlay-asn-shipment-table th.po-overlay-asn-bol-tracking-group,
.po-overlay-asn-shipment-table td.po-overlay-asn-bol-tracking-group {
  vertical-align: top;
  padding: 0;
}

.po-overlay-asn-bol-tracking-matrix--header,
.po-overlay-asn-bol-tracking-matrix .shipment-po-asn-matrix__line {
  grid-template-columns: minmax(6.5rem, 1.1fr) minmax(6rem, 1fr) minmax(8rem, 1.4fr);
}

.po-overlay-asn-bol-tracking-matrix .po-overlay-inbound-shipment-row {
  flex-wrap: wrap;
  gap: 0.25rem 0.4rem;
}

.po-overlay-asn-bol-tracking-matrix__line--mismatch {
  background: #fff8e6;
}

.po-overlay-bol-tracking-mismatch-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #7a5b00;
  background: #fff8e6;
  border: 1px solid #e6c200;
  border-radius: 0.2rem;
  vertical-align: middle;
  white-space: nowrap;
}

/* Proposed BillOfLading for a delivery SAP left blank — advisory, typed into SAP by hand. */
.po-overlay-bol-suggestion {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  font-size: 0.65rem;
  border-radius: 0.2rem;
  vertical-align: middle;
  white-space: nowrap;
  color: var(--color-text-muted, #4a5568);
  background: var(--color-surface-subtle, #f4f6f8);
  border: 1px dashed var(--color-border, #cbd5e0);
}

.po-overlay-bol-suggestion__label {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.po-overlay-bol-suggestion__value {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--color-text, #1a202c);
}

.po-overlay-bol-suggestion__tier {
  opacity: 0.75;
}

.po-overlay-bol-suggestion--certain,
.po-overlay-bol-suggestion--cohort,
.po-overlay-bol-suggestion--strong {
  border-style: solid;
}

.po-overlay-items-table .po-overlay-num-col {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.po-overlay-open-qty {
  font-weight: 600;
}

/* Clip with ellipsis so unbroken descriptions cannot paint over Qty. Full text is in `title`
   and in the cell DOM (no server truncate) so wider budgets actually show more characters.
   Same budget on the show page and in the overlay — identifiers must stay readable in both. */
.po-overlay-desc-col {
  min-width: 12rem;
  max-width: 18rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.po-overlay-item-num {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.po-overlay-actions-col {
  width: 1%;
}

.po-overlay-split-btn {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
  background: var(--color-surface);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-accent, #1967d2);
}

.po-overlay-split-btn:hover {
  background: var(--color-accent-muted, #e8f0fe);
}

.po-overlay-table-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.po-overlay-dl {
  margin: 0;
}

.po-overlay-dl-row {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 0.5rem 0.75rem;
  padding: 0.3rem 0;
  font-size: 0.9375rem;
}

.po-overlay-dl-row dt {
  margin: 0;
  color: var(--color-text-muted);
  font-weight: 500;
}

.po-overlay-dl-row dd {
  margin: 0;
}

.po-overlay-details-disclosure {
  margin-top: 0.5rem;
  border-top: 1px solid var(--color-border-light);
  padding-top: 0.75rem;
}

.po-overlay-details-summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  list-style: none;
}

.po-overlay-details-summary::-webkit-details-marker {
  display: none;
}

.po-overlay-details-summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.35rem;
  transition: transform 0.15s ease;
}

.po-overlay-details-disclosure[open] .po-overlay-details-summary::before {
  transform: rotate(90deg);
}

.po-overlay-dl--metadata {
  margin-top: 0.65rem;
}

@media (max-width: 640px) {
  .po-overlay-summary-stats {
    grid-template-columns: 1fr;
  }
}

/* ── PO line-item date change-history (◆ marker + modal) ───────────────────
   Presentation for Journal.po_item_date_history/1 on PurchaseOrdersLive.Show.
   Cobalt marker uses --color-primary (navy); deltas stay neutral (no green/red). */

.po-date-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  white-space: nowrap;
  line-height: inherit;
}

.po-date-cell__value {
  font-variant-numeric: tabular-nums;
}

.po-date-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 0.1rem;
  border: 0;
  background: transparent;
  color: var(--color-primary, #1e3a5f);
  font-size: 0.65rem;
  line-height: 1;
  vertical-align: baseline;
  cursor: pointer;
  border-radius: 2px;
}

.po-date-marker:hover {
  color: var(--color-primary-hover, #162e4d);
}

.po-date-marker:focus-visible {
  outline: 2px solid var(--color-primary, #1e3a5f);
  outline-offset: 1px;
}

.po-date-item-trigger {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.12em;
  cursor: pointer;
  border-radius: 2px;
}

.po-date-item-trigger:hover {
  color: var(--color-primary, #1e3a5f);
  text-decoration-color: currentColor;
}

.po-date-item-trigger:focus-visible {
  outline: 2px solid var(--color-primary, #1e3a5f);
  outline-offset: 2px;
}

.po-date-history-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.po-date-history-scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.po-date-history-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: min(88vh, 720px);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.po-date-history-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.15rem 0.85rem;
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink: 0;
}

.po-date-history-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.po-date-history-eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.po-date-history-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 650;
  color: var(--color-text);
  line-height: 1.3;
}

.po-date-history-subtext {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.po-date-history-close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin: -0.15rem -0.25rem 0 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.po-date-history-close:hover {
  color: var(--color-text);
  background: var(--color-border-light);
}

.po-date-history-close:focus-visible {
  outline: 2px solid var(--color-primary, #1e3a5f);
  outline-offset: 1px;
}

.po-date-history-summary {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.75rem 1.15rem;
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink: 0;
  font-size: 0.875rem;
}

.po-date-history-summary--revised {
  background: #f0f4f8;
}

.po-date-history-summary--initial {
  background: var(--color-bg, #fafaf9);
}

.po-date-history-summary--none {
  background: var(--color-bg, #fafaf9);
}

.po-date-history-summary__icon {
  flex-shrink: 0;
  color: var(--color-primary, #1e3a5f);
  font-size: 0.9rem;
  line-height: 1.4;
}

.po-date-history-summary__text {
  margin: 0;
  color: var(--color-text);
  line-height: 1.45;
}

.po-date-history-summary__sep {
  color: var(--color-text-subtle);
}

.po-date-history-summary__field {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.po-date-history-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.65rem 1.15rem;
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink: 0;
}

.po-date-history-pill {
  margin: 0;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface, #fff);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 2px;
}

.po-date-history-pill:hover {
  border-color: var(--color-primary, #1e3a5f);
  color: var(--color-primary, #1e3a5f);
}

.po-date-history-pill--active {
  border-color: var(--color-primary, #1e3a5f);
  background: var(--color-primary, #1e3a5f);
  color: #fff;
}

.po-date-history-pill:focus-visible {
  outline: 2px solid var(--color-primary, #1e3a5f);
  outline-offset: 1px;
}

.po-date-history-timeline {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.35rem 0;
  -webkit-overflow-scrolling: touch;
}

.po-date-history-entry {
  padding: 0.7rem 1.15rem;
  border-bottom: 1px solid var(--color-border-light);
}

.po-date-history-entry:last-child {
  border-bottom: none;
}

.po-date-history-entry__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.3rem;
}

.po-date-history-entry__field {
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--color-text);
}

.po-date-history-entry__time {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.po-date-history-entry__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.po-date-history-old {
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--color-border);
}

.po-date-history-arrow {
  color: var(--color-text-subtle);
}

.po-date-history-new {
  color: var(--color-text);
  font-weight: 600;
}

.po-date-history-set {
  color: var(--color-text);
  font-weight: 600;
}

.po-date-history-tag {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg, #fafaf9);
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.po-date-history-delta {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg, #fafaf9);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.po-date-history-entry__source {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.po-date-history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  gap: 0.35rem;
}

.po-date-history-empty__icon {
  color: var(--color-accent, #4a6b4a);
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.po-date-history-empty__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--color-text);
}

.po-date-history-empty__subtext {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  max-width: 22rem;
}

@media (max-width: 640px) {
  .po-date-history-backdrop {
    padding: 0.75rem;
    align-items: flex-end;
  }

  .po-date-history-dialog {
    width: 100%;
    max-height: min(92vh, 780px);
  }
}

/* Product catalog overlay */
.product-overlay.product-overlay--pim {
  max-width: min(1180px, 96vw);
}

.product-overlay-pim-header {
  align-items: flex-start;
  flex-direction: column;
  gap: 0;
  padding-bottom: 0.85rem;
}

.product-overlay-pim-header-text {
  flex: 1;
  min-width: 0;
  padding-right: 2.5rem;
}

.product-overlay-pim-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.35rem;
}

.pim-readonly-pill {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
}

.product-overlay-pim-meta {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.product-overlay-pim-meta-sep {
  margin: 0 0.35rem;
  color: var(--color-text-subtle);
}

.pim-inline-code {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Monaco, monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
}

.product-overlay-pim-title {
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.product-overlay-pim-title--name {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
}

.product-overlay-pim-sku-subtitle {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
}

.product-overlay-pim-sku-label {
  font-weight: 600;
  color: var(--color-text-muted);
}

/* PIM overlay: use grid on the body itself so layout does not depend on flex item
   sizing (a nested grid inside a row flex child was not getting full width in production). */
.shipment-overlay-body.product-overlay-pim-body {
  display: block;
  padding: 1.25rem;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.product-overlay-pim-main {
  min-width: 0;
}

/* Identifiers (left) + storefront photo (right). Grid keeps the photo card from stretching
   full-width when stacked (flex-wrap was leaving a full-line grey bar beside a narrow image).
   Photo column max is 16.5vw (50% of prior 33vw cap). */
.pim-ident-photo-layout--with-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(16.5vw, 100%));
  grid-template-areas: "identifiers photo";
  gap: 1rem 1.25rem;
  align-items: start;
  margin-bottom: 0.35rem;
}

.pim-ident-photo-layout--with-photo > .pim-card--identifiers {
  grid-area: identifiers;
  min-width: 0;
}

.pim-ident-photo-layout--with-photo > .pim-card--rothys-photo {
  grid-area: photo;
  /* Shrink-wrap the bordered card to the image; column caps at min(16.5vw, 100%) — half of former 33vw. */
  width: fit-content;
  max-width: 100%;
  justify-self: end;
  box-sizing: border-box;
}

.pim-ident-photo-layout--with-photo .pim-field-grid--identifiers {
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}

@media (max-width: 720px) {
  .pim-ident-photo-layout--with-photo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "identifiers"
      "photo";
  }

  .pim-ident-photo-layout--with-photo > .pim-card--rothys-photo {
    justify-self: start;
    width: fit-content;
    max-width: min(16.5vw, 100%);
  }
}

.pim-rothys-photo {
  margin: 0;
  max-width: 100%;
}

.pim-rothys-photo-link {
  display: block;
  max-width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  background: var(--color-surface);
}

.pim-rothys-photo-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.pim-rothys-photo-caption {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
}

.pim-rothys-photo-caption-link {
  color: var(--color-link, var(--color-accent));
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* Nested blocks inside a pim-card (variants / inventory moved from sidebar) */
.pim-card > section.pim-aside-block:first-of-type {
  border-top: none;
  padding-top: 0;
}

.pim-aside-block {
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-border-light);
}

.pim-aside-block:first-of-type {
  border-top: none;
  padding-top: 0;
}

.pim-aside-block-title {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
}

.pim-aside-hint {
  margin-top: 0;
}

.pim-aside-empty {
  margin: 0;
  font-size: 0.875rem;
}

.pim-alias-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}

.pim-alias-chip-list li {
  margin: 0;
}

.pim-alias-chip {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
  background: var(--color-surface);
}

.pim-mini-table-wrap {
  overflow-x: auto;
  --lock-budget: min(40vh, 320px);
  overflow: auto;
  overflow-y: auto;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.pim-mini-table {
  width: 100%;
  font-size: 0.8125rem;
}

.pim-mini-table th,
.pim-mini-table td {
  padding: 0.35rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: top;
}

.pim-mini-table th {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pim-mini-table tr:last-child td {
  border-bottom: none;
}

.pim-table-mono {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Monaco, monospace;
  font-size: 0.78rem;
}

.pim-inv-dl {
  margin: 0;
}

.pim-inv-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--color-border-light);
}

.pim-inv-row:last-child {
  border-bottom: none;
}

.pim-inv-row dt {
  margin: 0;
  font-weight: 500;
  color: var(--color-text-muted);
}

.pim-inv-row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.pim-card {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 1rem 1.125rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-md);
}

.pim-card:last-child {
  margin-bottom: 0;
}

.pim-card-title {
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
}

.pim-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem 1rem;
}

.pim-field-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* PIM product overlay: Long SKU, Short SKU, Centric id, Shopify id on one row when space allows */
.pim-field-grid--identifiers {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pim-field {
  min-width: 0;
}

.pim-field--full {
  grid-column: 1 / -1;
}

.pim-field-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 0.3rem;
}

.pim-field-control {
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
  min-height: 2.35rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-text);
}

.pim-field-control--mono {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Monaco, monospace;
  font-size: 0.8125rem;
}

.pim-field-control--textarea {
  min-height: 5.5rem;
  align-items: flex-start;
}

.pim-field-control--external-row {
  justify-content: space-between;
}

.pim-external-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
}

.pim-external-row--compact {
  gap: 0.15rem 0.3rem;
}

.pim-mini-table .pim-table-centric-cell {
  vertical-align: middle;
  font-size: 0.8125rem;
}

.pim-external-row-id {
  flex: 1;
  min-width: 0;
  word-break: break-all;
}

/* Product overlay → Source systems: one row per system of record (name · status · detail),
   then Centric's per-season records in a collapsed table. Tones pair colour with text. */
.pim-sources {
  --pim-src-ok-bg: #e6f2ea;
  --pim-src-ok-fg: #1f6b3a;
  --pim-src-partial-bg: #fdf1dc;
  --pim-src-partial-fg: #8a5300;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) minmax(6.5rem, auto) 1fr;
  border-top: 1px solid var(--color-border-light);
}

.pim-source-row {
  display: contents;
}

.pim-source-row > * {
  padding: 0.6rem 0.5rem 0.6rem 0;
  border-bottom: 1px solid var(--color-border-light);
  margin: 0;
}

.pim-source-name {
  font-weight: 600;
  color: var(--color-text);
}

.pim-source-detail {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  color: var(--color-text-muted);
}

.pim-source-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}

.pim-source-key {
  min-width: 4.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-subtle);
}

.pim-source-season {
  color: var(--color-text);
}

.pim-source-sync {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.pim-source-note {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.pim-source-chip {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pim-source-chip--ok { background: var(--pim-src-ok-bg); color: var(--pim-src-ok-fg); }
.pim-source-chip--partial { background: var(--pim-src-partial-bg); color: var(--pim-src-partial-fg); }
.pim-source-chip--none { background: var(--color-surface-muted); color: var(--color-text-muted); }

.pim-source-notice {
  margin: 0.15rem 0 0;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  line-height: 1.4;
  max-width: 70ch;
}

.pim-source-notice--upcoming,
.pim-source-notice--behind { background: var(--color-brand-muted); color: var(--color-text); }
.pim-source-notice--started { background: #fdf1dc; color: #6b4100; }

.pim-source-history {
  margin-top: 0.75rem;
}

/* A system row's own drill-in (SAP sizes, Canto assets): the history table's look, tucked under
   the row's detail line. */
.pim-source-drill > summary {
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--color-link);
}

.pim-source-drill[open] > summary {
  margin-bottom: 0.35rem;
}

.pim-source-drill-row--missing,
.pim-source-drill-row--deleting {
  background: #fdf1dc;
}

.pim-source-history > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
}

.pim-source-history-hint {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  max-width: 70ch;
}

.pim-source-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.pim-source-history-table th,
.pim-source-history-table td {
  text-align: left;
  padding: 0.35rem 0.5rem 0.35rem 0;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

.pim-source-history-table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-subtle);
}

.pim-source-history-table tbody th {
  font-weight: 500;
  white-space: nowrap;
}

.pim-source-history-table .pim-external-row {
  flex-wrap: nowrap;
}

.pim-source-history-table .pim-external-row-id {
  flex: none;
  word-break: normal;
  white-space: nowrap;
}

.pim-source-nowrap {
  white-space: nowrap;
}

.pim-source-history-row--this {
  background: var(--color-brand-muted);
}

.pim-source-tag {
  margin-left: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-brand);
}

.pim-source-tag--muted {
  color: var(--color-text-subtle);
}

@media (max-width: 640px) {
  .pim-sources { grid-template-columns: 1fr auto; }
  .pim-source-detail { grid-column: 1 / -1; padding-top: 0; }
  .pim-source-name, .pim-source-status { border-bottom: 0; }
  .pim-source-history-table { display: block; overflow-x: auto; }
  .pim-source-history-table tbody th { white-space: normal; }
  .pim-source-tag { display: block; margin-left: 0; }
}

.detail-row--stack {
  align-items: flex-start;
}

.detail-row--stack .detail-value {
  flex: 1;
  min-width: 0;
}

.catalog-centric-mirror-kind-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.catalog-centric-mirror-kind-link {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-bg-subtle, rgba(0, 0, 0, 0.04));
  text-decoration: none;
}

.catalog-centric-mirror-kind-link:hover {
  color: var(--color-text);
  background: var(--color-bg-hover, rgba(0, 0, 0, 0.06));
}

.catalog-centric-mirror-kind-link--active {
  color: var(--color-link, #2563eb);
  background: rgba(37, 99, 235, 0.1);
}

.centric-mirror-status {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
}

.centric-mirror-status--linked {
  color: #166534;
  background: rgba(22, 101, 52, 0.1);
}

.centric-mirror-status--mirror {
  color: var(--color-text-muted);
  background: var(--color-bg-subtle, rgba(0, 0, 0, 0.05));
}

.filter-search--season {
  max-width: 11rem;
}

.pim-external-icon-link {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0.1rem;
  margin-left: 0.35rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}

.pim-external-icon-link:hover {
  color: var(--color-link, #2563eb);
  background: var(--color-bg-hover, rgba(0, 0, 0, 0.06));
}

.detail-value--external {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.pim-field-value {
  flex: 1;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.pim-field-stack .pim-field--stacked .pim-field-control {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .pim-field-grid--identifiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .pim-field-grid--2 {
    grid-template-columns: 1fr;
  }

  .pim-field-grid--identifiers {
    grid-template-columns: 1fr;
  }
}

.product-overlay .product-overlay-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

.product-overlay .product-overlay-name.product-overlay-pim-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.35;
}

/* PIM overlay header uses product-overlay-pim-title--name + product-overlay-pim-sku-subtitle instead */

.catalog-field-source {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

.product-overlay-body .shipment-overlay-details {
  flex: 1;
}

.po-raw-payload {
  font-size: 0.75rem;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Monaco, monospace;
  background: var(--color-bg-subtle);
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

.raw-json-disclosure-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.35rem 0 0.5rem;
}

.copy-text-btn:disabled {
  opacity: 0.85;
  cursor: default;
}

.po-items-table-wrap {
  overflow-x: auto;
  --lock-budget: 200px;
  overflow: auto;
  overflow-y: auto;
  margin-top: 0.5rem;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
}

.po-items-table {
  font-size: 0.8125rem;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.po-items-table th,
.po-items-table td {
  padding: 0.35rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
}

/* Sticky comes from the shared .table-wrap rule; the white header is its own. */
.po-items-table th {
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  background: var(--color-surface, #fff);
}

.po-items-table td {
  vertical-align: top;
}

.po-split-page .po-split-section {
  padding: 1rem 1.25rem 1.5rem;
}

.po-split-intro {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
  max-width: 42rem;
  line-height: 1.45;
}

.po-split-banner {
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.4;
}

.po-split-banner--info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
}

.po-split-banner--warn {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
}

.po-split-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.po-split-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 20rem;
}

.po-split-form-row--readonly .form-label {
  margin-bottom: 0;
}

.po-split-schedule-readonly-value {
  font-size: 0.9375rem;
  color: var(--color-text, #1a1a1a);
}

.po-split-qty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.po-split-qty-grid > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
}

.po-split-qty-grid .detail-label {
  flex: 0 0 auto;
}

.po-split-qty-grid .detail-value {
  flex: 0 0 auto;
}

.po-split-max-qty {
  font-weight: 600;
}

.po-split-schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.75rem 1rem;
}

.po-split-schedule-hint {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
}

.po-split-preview-table .po-split-row--new {
  background: #f0fdf4;
}

.po-split-diff--changed {
  background: #fef9c3;
  font-weight: 600;
}

.po-overlay-items-table td.po-split-diff--changed,
.po-items-table td.po-split-diff--changed {
  background: #fef9c3;
  font-weight: 600;
}

.po-overlay-items-table td.po-split-diff--new,
.po-items-table td.po-split-diff--new {
  background: #dcfce7;
  font-weight: 600;
}

.po-split-diff--new {
  background: #dcfce7;
  font-weight: 600;
}

.po-split-diff--unchanged {
  color: var(--color-text-muted);
}

.po-split-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
}

.po-split-legend .po-split-diff {
  padding: 0.15rem 0.45rem;
  border-radius: 0.25rem;
}

.po-split-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.po-split-submitted {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--color-border-light);
  border-radius: 0.375rem;
  background: var(--color-surface-muted, #f8fafc);
}

.po-split-approval-note {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.po-overlay-lines-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.po-overlay-lines-header .po-overlay-section-title {
  margin-bottom: 0;
}

.po-bulk-split-toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* What a save will actually write, next to the bulk-open button that counts the
   (unrelated) checkbox selection. */
.po-split-staged-count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-brand);
  background: var(--color-brand-muted);
  border-radius: var(--radius-sm, 0.25rem);
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}

.po-split-select-hint {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

/* Row-level counterpart: this line carries a staged plan and is written on save
   regardless of its checkbox. */
.po-split-staged-badge {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.po-overlay-select-col {
  width: 2.5rem;
  text-align: center;
  vertical-align: middle;
}

.po-line-split-select,
.po-line-split-select-all {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.po-split-save-progress-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.po-split-save-progress-scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.po-split-save-progress-dialog {
  position: relative;
  z-index: 1;
  width: min(28rem, 100%);
  padding: 1.25rem 1.5rem 1.5rem;
  background: #fff;
  border-radius: var(--radius-md, 0.5rem);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.po-split-save-progress-header {
  margin-bottom: 0.75rem;
}

.po-split-save-progress-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

.po-split-save-progress-detail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  font-size: 0.875rem;
  color: var(--color-text-muted, #64748b);
}

.po-split-save-progress-bar {
  height: 0.5rem;
  overflow: hidden;
  background: var(--color-surface-muted, #e2e8f0);
  border-radius: 999px;
}

.po-split-save-progress-bar__fill {
  height: 100%;
  background: var(--color-primary, #008080);
  border-radius: inherit;
  transition: width 0.2s ease-out;
}

.po-bulk-split-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.po-bulk-split-scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.po-bulk-split-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(960px, 100%);
  max-height: min(90vh, 900px);
  background: #fff;
  border-radius: var(--radius-md, 0.5rem);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  overflow: hidden;
}

.po-bulk-split-dialog-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border-light);
}

.po-bulk-split-dialog-title {
  margin: 0;
  font-size: 1.125rem;
  flex: 1 1 auto;
}

.po-bulk-split-dialog-subtitle {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.po-bulk-split-dialog-close {
  margin-left: auto;
}

.po-bulk-split-form {
  flex: 1 1 auto;
  overflow: auto;
  padding: 1rem 1.25rem;
}

.po-bulk-split-lines {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.po-bulk-split-selected {
  margin-bottom: 1.25rem;
}

.po-bulk-split-selected-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.po-bulk-split-selected-item {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md, 0.5rem);
  background: #fff;
}

.po-bulk-split-selected-item__label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.po-bulk-split-selected-item__meta {
  display: block;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.po-bulk-split-selected-item__error {
  display: block;
  margin-top: 0.35rem;
  margin-bottom: 0;
}

.po-bulk-split-shared-fields {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Ship mode / confirmed XF edit dialog (OAA-69) ──────────────────────────
   Reuses the bulk-split dialog's chrome (backdrop, header, footer) so the two
   dialogs on this screen read as one family; only the body differs. */

.po-schedule-edit-dialog {
  width: min(720px, 100%);
}

.po-schedule-edit-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* The banners inside the body stack with the body's own gap; drop their own
   bottom margin so the rhythm stays even. */
.po-schedule-edit-body > .po-split-banner {
  margin-bottom: 0;
}

.po-schedule-edit-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem 1rem;
  max-width: 32rem;
}

.po-schedule-edit-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
}

.po-schedule-edit-empty {
  margin: 0;
  font-size: 0.875rem;
}

.po-schedule-edit-table {
  width: 100%;
  font-size: 0.8125rem;
  border-collapse: separate;
  border-spacing: 0;
}

.po-schedule-edit-table th,
.po-schedule-edit-table td {
  padding: 0.35rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

.po-schedule-edit-table th {
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.po-schedule-edit-val {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.po-schedule-edit-was {
  color: var(--color-text-subtle);
}

.po-schedule-edit-arrow {
  padding: 0 0.25rem;
  color: var(--color-text-subtle);
}

/* The "changed" chip is a table cell rule elsewhere; inside the review table it
   wraps a span, so give it the padding a chip needs. */
.po-schedule-edit-val .po-split-diff--changed {
  padding: 0.05rem 0.3rem;
  border-radius: 0.2rem;
}

.po-schedule-edit-same {
  margin-left: 0.35rem;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--color-text-subtle);
}

.po-schedule-edit-excluded {
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* The footer counts what a save writes on the left, actions on the right — the
   count is the honest answer to "what is this button about to do". */
.po-schedule-edit-footer {
  justify-content: space-between;
  align-items: center;
}

.po-schedule-edit-count {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.po-schedule-edit-footer-actions {
  display: flex;
  gap: 0.75rem;
}

/* Row action: same chip as "Split" beside it, but neutral rather than accent —
   splitting stays the emphasized action in that cell. */
.po-overlay-schedule-edit-btn {
  margin-right: 0.3rem;
  color: var(--color-text-muted);
}

.po-overlay-schedule-edit-btn:hover:not(:disabled) {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.po-overlay-schedule-edit-btn:disabled {
  color: var(--color-text-subtle);
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── One line, edited in place in the table (OAA-95) ─────────────────────────
   The editing row keeps the table's own column widths: the inputs are sized to
   the cells they replace, not the other way round, so opening a row does not
   reflow every row below it. */
.po-line-inline-edit-cell {
  padding: 0.25rem 0.4rem;
}

.po-line-inline-edit-form {
  margin: 0;
}

.po-line-inline-edit-input {
  width: 100%;
  min-width: 6.5rem;
  padding: 0.2rem 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.3;
}

/* The quantity sits in a numeric column, so it stays narrow and right-aligned
   like the figure it replaces. */
.po-overlay-num-col .po-line-inline-edit-input {
  min-width: 4.5rem;
  text-align: right;
}

/* Plant is sized for a code, not the shared 6.5rem input floor — without this
   the destination select overflows into Description on the open edit row. */
.po-overlay-col-plant .po-line-inline-edit-input {
  min-width: 0;
  max-width: 100%;
}

/* Schedule columns are ~5rem; same floor would spill into the next date cell.
   Clip only while editing — a revised ◆ marker on a read-only date cell must
   stay visible. */
.po-overlay-schedule-col.po-line-inline-edit-cell {
  overflow: hidden;
}

.po-overlay-schedule-col .po-line-inline-edit-input {
  min-width: 0;
  max-width: 100%;
}

.po-overlay-line-edit-save-btn {
  color: var(--color-accent);
  font-weight: 600;
}

.po-overlay-line-edit-save-btn:hover:not(:disabled) {
  background: var(--color-surface-muted);
}

.po-overlay-line-edit-save-btn:disabled {
  color: var(--color-text-subtle);
  opacity: 0.5;
  cursor: not-allowed;
}

/* The strip under the editing row: what the save would write, or why it cannot.
   It carries the row's only explanation, so it is never merely decorative. */
.po-line-inline-edit-status-row > .po-line-inline-edit-status {
  padding: 0.3rem 0.6rem 0.6rem;
  background: var(--color-surface-muted);
  font-size: 0.8125rem;
}

.po-line-inline-edit-status--error {
  color: var(--color-danger-text, #8a1c1c);
  font-weight: 600;
}

.po-line-inline-edit-status--pending {
  color: var(--color-text);
  font-weight: 600;
}

.po-line-inline-edit-status--idle {
  color: var(--color-text-muted);
}

/* A year-sized confirmed XF jump: a warning on its own line, with Save left enabled. */
.po-line-inline-edit-status--xf-jump {
  display: block;
  margin-top: 0.2rem;
  color: #92400e; /* the .po-split-banner--warn text colour */
  font-weight: 600;
}

.po-line-inline-edit-status--locked {
  display: block;
  margin-top: 0.2rem;
  color: var(--color-text-muted);
}

/* ── Every line's quantity at once ───────────────────────────────────────────
   The toolbar note beside Save says what the mode would write, or why it cannot;
   a line whose figure is refused is outlined and named in a strip below it. */
.po-qty-edit-status {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.po-line-qty-edit-input.is-invalid {
  border-color: var(--color-danger-text, #8a1c1c);
}

.po-bulk-split-percent-hint {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
}

.po-bulk-split-line {
  padding: 1rem;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md, 0.5rem);
  background: var(--color-surface-muted, #f8fafc);
}

.po-bulk-split-line-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.po-bulk-split-line-title {
  margin: 0;
  font-size: 1rem;
}

.po-bulk-split-line-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.po-bulk-split-line-grid {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) 1fr;
  gap: 1rem 1.5rem;
  align-items: start;
}

@media (max-width: 768px) {
  .po-bulk-split-line-grid {
    grid-template-columns: 1fr;
  }
}

.po-bulk-split-percent-field {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 8rem;
}

.po-bulk-split-percent-input {
  max-width: 5rem;
}

.po-bulk-split-percent-suffix {
  font-weight: 600;
  color: var(--color-text-muted);
}

.po-bulk-split-computed-qty {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
}

.po-bulk-split-line-error {
  margin: 0.5rem 0 0;
}

.po-bulk-split-dialog-footer {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--color-border-light);
  background: #fff;
}

.po-overlay-split-line-link {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Reports */
.reports-page .reports-page-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.reports-page .reports-section-title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
}

.reports-page .reports-section-hint {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
  max-width: 42rem;
  line-height: 1.45;
}

.reports-page .reports-th-count,
.reports-page .reports-td-count {
  text-align: right;
  white-space: nowrap;
  width: 9rem;
}

.reports-page .reports-total {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Chart.js runs with maintainAspectRatio:false, so the wrapper must set the
   height the canvas fills. Sits above the OEM capacity pivot table. */
.reports-page .oem-capacity-chart-wrap {
  position: relative;
  height: 24rem;
  margin: 1rem 0 1.5rem;
}

/* Production Plan tab → the same year's Production Dashboard, beside the year it follows. */
.plt-production-plan-controls .plt-production-dashboard-link {
  align-self: center;
  white-space: nowrap;
}

/* Production Dashboard: headline tiles, chart grid and the deck's table shading. */
.production-dashboard-page .pd-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}
.production-dashboard-page .pd-kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
}
.production-dashboard-page .pd-kpi-value {
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.production-dashboard-page .pd-kpi-value--blue { color: #1f3fd1; }
.production-dashboard-page .pd-kpi-value--amber { color: #c98a00; }
.production-dashboard-page .pd-kpi-value--red { color: #d63a2d; }
.production-dashboard-page .pd-kpi-label {
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.85rem;
}
.production-dashboard-page .pd-kpi-sub {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}
.production-dashboard-page .pd-section { margin: 2rem 0 1rem; }
.production-dashboard-page .pd-subtitle { margin: 1.5rem 0 0.5rem; font-size: 1rem; }
.production-dashboard-page .pd-chart-wrap {
  position: relative;
  height: 20rem;
  margin: 1rem 0;
  min-width: 0;
}
.production-dashboard-page .pd-chart-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.5rem;
}
.production-dashboard-page .pd-chart-pair--wide-left { grid-template-columns: 2fr 1fr; }
@media (max-width: 760px) {
  .production-dashboard-page .pd-chart-pair--wide-left { grid-template-columns: 1fr; }
}
.production-dashboard-page .pd-table th[scope="row"] { text-align: left; white-space: nowrap; }
.production-dashboard-page .pd-table tfoot th,
.production-dashboard-page .pd-table tfoot td {
  font-weight: 600;
  background: var(--color-surface-muted);
}
.production-dashboard-page .pd-band--good { color: #1f3fd1; font-weight: 600; }
.production-dashboard-page .pd-band--watch { color: #c98a00; font-weight: 600; }
.production-dashboard-page .pd-band--bad { color: #d63a2d; font-weight: 600; }
.production-dashboard-page .pd-code { color: var(--color-text-subtle); font-size: 0.85em; }
.production-dashboard-page .pd-capacity-table { max-width: 36rem; }
.production-dashboard-page .pd-capacity-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.production-dashboard-page .pd-error { color: #d63a2d; margin: 0; flex-basis: 100%; }
.production-dashboard-page .pd-definitions ul {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  padding-left: 1.2rem;
}

/* Same wrapper contract for the two MOT usage charts (share % + units). */
.reports-page .mot-usage-chart-wrap {
  position: relative;
  height: 20rem;
  margin: 1rem 0 1.5rem;
}

/* MOT usage Air vs Ocean doughnut — narrower than the bar charts so it stays round. */
.reports-page .mot-usage-split-chart-wrap {
  position: relative;
  height: 18rem;
  max-width: 32rem;
  margin: 1rem 0 1.5rem;
}

/* Lane volume stacked bars + lead-time lines (Chart.js maintainAspectRatio:false). */
.reports-page .lane-volume-chart-wrap {
  position: relative;
  height: 20rem;
  margin: 1rem 0 1.5rem;
}

/* `type="month"` inputs render a spelled-out month ("December 2020"), which
   does not fit the 5rem `.reports-filter-input` sized for `type="date"`. */
.reports-page.mot-usage-page .reports-filter-input {
  width: 10rem;
}

/* Air-by-colorway forecast months (open PO lines): set apart from the shipped months, as the
   charts hatch their forecast bars. */
.reports-page .mot-usage-air-colorways-month.is-forecast > summary {
  font-style: italic;
  color: var(--color-text-muted);
}

/* Goal notes can be long — let them wrap instead of stretching the table. */
.reports-page .mot-usage-annual-table .mot-usage-goal {
  max-width: 32rem;
  white-space: normal;
}

/* Emphasize the per-OEM total column and the totals footer row of the pivot. */
.reports-page .oem-capacity-table .oem-capacity-total-col {
  font-weight: 600;
}

.reports-page .oem-capacity-table tfoot .oem-capacity-totals-row {
  border-top: 2px solid var(--border, #e2e2dd);
  font-weight: 600;
}

.reports-page .oem-performance-summary tfoot .oem-performance-totals-row {
  border-top: 2px solid var(--border, #e2e2dd);
  font-weight: 600;
}

.reports-page .oem-perf-slip--late,
.reports-page .oem-perf-status--late {
  color: #b42318;
}

.reports-page .oem-perf-slip--early,
.reports-page .oem-perf-status--early {
  color: #027a48;
}

.reports-page .oem-perf-status {
  font-weight: 500;
}

/* XF-to-ETA timeline: only out-of-band gaps are marked. A normal value stays plain, because
   marking every cell would bury the handful the workbook exists to surface. `title` carries the
   reason, so colour is never the only signal. */
.reports-page .air-timeline-gap {
  font-weight: 600;
}

.reports-page .air-timeline-gap--watch {
  color: #b54708;
}

.reports-page .air-timeline-gap--late {
  color: #b42318;
}

.reports-page .air-timeline-gap--impossible {
  color: #6941c6;
}

.reports-page .open-sap-orders-filters {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 0.5rem;
  background: var(--color-surface-muted, #f8fafc);
}

.reports-page .reports-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
}

.reports-page .reports-filter {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
}

/* The timeline's "+ Add filter" / "Clear filters" buttons share a row with label-over-input
   filter columns; sit them on the inputs' baseline rather than centred against the column. */
.reports-page .air-timeline-filters-add-btn,
.reports-page .air-timeline-filters-clear-btn {
  align-self: flex-end;
}

.reports-page .reports-filter-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.reports-page .reports-filter-label {
  font-weight: 500;
  color: var(--color-text-muted);
}

.reports-page .reports-filter-input {
  width: 5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.875rem;
}

.reports-page .open-sap-orders-stats {
  margin-top: -0.25rem;
}

.reports-page tr.open-sap-row-unmatched td {
  color: var(--color-text-muted);
  font-style: italic;
}

.reports-page .open-sap-orders-raw-json {
  margin: 0 0 1rem;
}

.reports-page .open-sap-orders-raw-json .po-raw-payload {
  max-height: 28rem;
  overflow: auto;
}

.reports-page .catalog-loading-hint {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.reports-page .accounting-report-loading-detail {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Favorites (star) — SVG via .star-btn__icon so size & fill are reliable (Unicode stars ignore color in many UAs) */
.star-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  padding: 0.125rem;
  border-radius: var(--radius-sm);
  color: #94a3b8;
}

.star-btn__icon {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

.star-btn:hover {
  color: #64748b;
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(241, 245, 249, 0.9);
}

.star-btn--on {
  color: #eab308;
  border-color: rgba(234, 179, 8, 0.55);
  background: rgba(254, 249, 195, 0.95);
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.45);
}

.star-btn--on:hover {
  color: #ca8a04;
  background: rgba(254, 240, 138, 0.95);
}

.shipment-table th.col-star,
.shipment-table td.col-star {
  width: 2.25rem;
  min-width: 2.25rem;
  text-align: center;
  vertical-align: middle;
}

/* =============================================================
   McMaster-style density pass
   Goal: tighter lines, thin hairline borders, flatter surfaces.
   Colors are intentionally preserved from the variables above.
   ============================================================= */

/* Slightly tighter global rhythm */
body {
  line-height: 1.4;
}

/* App-level chrome: thinner, tighter, squared-off */
.app-header-bar {
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--color-border);
}

.app-nav-tabs {
  padding: 0.15rem 1.5rem 0;
  gap: 0.1rem;
  border-bottom: 1px solid var(--color-border);
}

.app-nav-tab {
  padding: 0.375rem 0.8rem;
  font-size: 0.875rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* Cards / panels: hairline border, flat surface */
.shipments-card,
.tracker-section,
.shipment-card,
.dashboard-header,
.login-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.shipments-card {
  /* Override hard-coded 12px radius so it matches tighter system */
  border-radius: var(--radius-md);
}

.shipments-card-header {
  padding: 0.625rem 0.875rem;
}

.shipments-card-header h1 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.shipments-card-header-count {
  font-size: 0.8125rem;
}

.shipments-card-header .btn-icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.shipments-card .shipments-section {
  padding: 0.5rem 0.875rem;
}

/* Tracker / dashboard padding */
.tracker-section,
.dashboard-header,
.shipment-card {
  padding: 1rem 1.25rem;
}

/* Page header: tighter vertical rhythm */
.page-header {
  margin-bottom: 0.75rem;
  gap: 0.5rem;
}

.page-header h1 {
  font-size: 1.125rem;
  font-weight: 600;
}

/* Buttons: flat, sharper, no bounce */
.btn {
  padding: 0.4rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.btn-primary,
.login-button,
.tracker-button {
  box-shadow: none;
}

.btn-primary:hover,
.login-button:hover,
.tracker-button:hover {
  transform: none;
  box-shadow: none;
}

.btn-outline {
  border: 1px solid var(--color-border);
}

.btn-sm {
  padding: 0.22rem 0.55rem;
  font-size: 0.78rem;
}

.login-button {
  padding: 0.625rem 1.5rem;
  font-size: 0.9375rem;
  border-radius: var(--radius-sm);
}

.tracker-button {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

/* Form controls: tighter, thinner borders, sharper corners */
.form-input,
.form-select,
.filter-select,
.filter-search,
.tracker-input,
.login-password-form .form-input {
  padding: 0.375rem 0.55rem;
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.filter-form {
  gap: 0.35rem;
}

/* Tables: hairline dividers, tight rows (McMaster-like density) */
.table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.shipment-table {
  font-size: 0.8125rem;
}

.shipment-table th,
.shipment-table td {
  padding: 0.3rem 0.65rem;
  border-bottom: 1px solid var(--color-border-light);
}

.shipment-table th {
  border-bottom: 1px solid var(--color-border);
}

/* Main shipments table (dashboard) — tighten from 0.75rem down */
.shipments-card .table-wrap {
  border: none;
}

.shipments-card .shipment-table {
  font-size: 0.8125rem;
}

.shipments-card .shipment-table th,
.shipments-card .shipment-table td {
  padding: 0.3rem 0.55rem;
  border-bottom: 1px solid var(--color-border-light);
}

.shipments-card .shipment-table th {
  background: var(--color-border-light);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-border);
}

/* Catalog subnav: squared + tighter */
.catalog-subnav {
  padding: 0.2rem 0.25rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.6rem;
}

.catalog-subnav-link {
  padding: 0.3rem 0.75rem;
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
}

/* Roles popover / menu surfaces: hairline, minimal shadow */
.roles-popover-content {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* Section title spacing */
.section-title {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}

.section-toolbar {
  margin-bottom: 0.6rem;
}

/* Detail pages: tighten outer padding */
.container {
  padding: 0.5rem 1rem 1rem;
}

/* DHL Unified Push status row (inbound shipment overlay / detail) */
.dhl-push-inline-banner {
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  background: var(--color-accent-muted);
  border: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
}

.dhl-push-inline-banner__title {
  font-weight: 600;
}

.dhl-push-inline-banner__err {
  max-width: 28rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The shipment's PO lines, one row per line; shares the banner's chrome. For an NRI editor each
   row is its own <form> (receipt attach), so the columns are held by a shared grid template rather
   than by table markup a form cannot span. */
.po-lines-panel__grid {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.po-lines-panel__head,
.po-lines-panel__row {
  display: grid;
  grid-template-columns:
    minmax(6rem, 0.9fr) minmax(5rem, 0.8fr) minmax(5rem, 0.8fr)
    minmax(6rem, 0.9fr) minmax(12rem, 1.4fr);
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin: 0;
  padding: 0;
}

.po-lines-panel--plain .po-lines-panel__head,
.po-lines-panel--plain .po-lines-panel__row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.po-lines-panel__head {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.po-lines-panel__row {
  padding: 0.15rem 0;
  border-top: 1px solid var(--color-border);
}

.po-lines-panel__cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
}

.po-lines-panel__cell--doc {
  font-variant-numeric: tabular-nums;
}

.po-lines-panel__cell--attach {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  overflow: visible;
}

.po-lines-panel__input {
  min-width: 0;
  flex: 1 1 6rem;
  padding: 0.2rem 0.35rem;
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  /* Only the attach rows re-flow to two columns and drop the header; the plain table keeps its
     three labelled columns, which fit a phone. */
  .po-lines-panel:not(.po-lines-panel--plain) .po-lines-panel__head {
    display: none;
  }

  .po-lines-panel:not(.po-lines-panel--plain) .po-lines-panel__row {
    grid-template-columns: 1fr 1fr;
  }

  .po-lines-panel__cell--attach {
    grid-column: 1 / -1;
  }
}

.footwear-qty-mismatch-notice {
  background: #fff8e6;
  border-color: #e6c200;
}

.footwear-qty-mismatch-badge {
  background: #fff8e6;
  border-color: #e6c200;
  color: #7a5b00;
}

.footwear-qty-mismatch-cell {
  background: #fff8e6;
}

.total-units-mismatch-notice,
.total-units-mismatch-badge,
.total-units-mismatch-cell,
.total-units-mismatch-input {
  background: #fff8e6;
}

.total-units-mismatch-badge {
  border-color: #e6c200;
  color: #7a5b00;
}

.total-units-mismatch-hint,
.form-hint--warning {
  color: #7a5b00;
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
}

/* Product Launch Tracking (experimental dashboard) */
.product-launch-tracking-page .shipments-section {
  font-size: var(--plt-font-dashboard);
}

.product-launch-tracking-page.inbound-page .shipments-card .plt-dashboard-table th,
.product-launch-tracking-page.inbound-page .shipments-card .plt-dashboard-table td {
  font-size: inherit;
}

.product-launch-tracking-page .plt-filters-form {
  margin: 0 0 1rem;
}

.product-launch-tracking-page .plt-filters-form.phx-change-loading,
.product-launch-tracking-page .plt-filters-form.phx-submit-loading {
  opacity: 0.85;
}

.product-launch-tracking-page .plt-loading-hint {
  margin: 0 0 0.65rem;
}

.product-launch-tracking-page .plt-load-error {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fef2f2;
  color: #991b1b;
}

.product-launch-tracking-page .plt-complete-po-alert {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #ffcc80;
  border-radius: 6px;
  background: #fff8e1;
  color: #5d4037;
}

.product-launch-tracking-page .plt-complete-po-alert-list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.product-launch-tracking-page .plt-complete-po-alert-status {
  color: #795548;
  font-size: 0.9em;
}

.product-launch-tracking-page .plt-complete-po-alert-more {
  margin: 0.5rem 0 0;
  font-size: 0.92em;
}

.product-launch-tracking-page .plt-backorder-sold-through--true,
.product-launch-tracking-page .plt-backorder-issue-reason,
.product-launch-tracking-page .plt-backorder-issue-eta {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: #fdecea;
  color: #b71c1c;
  font-weight: 600;
}

/* Active SKU + In-DC ETA open the inbound overlay. Inherits colour and weight so the ETA keeps
   the issue badge's red when it sits inside one; the underline is what says it is clickable. */
.product-launch-tracking-page .plt-backorder-inbound-trigger {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

/* A row a Disable left on the page: Shopify no longer counts it as Active, so it is shown muted
   until the next Refresh drops it. */
.product-launch-tracking-page tr.plt-backorder-row--disabled > td {
  opacity: 0.55;
  font-style: italic;
}

.product-launch-tracking-page .plt-table-wrap {
  position: relative;
}

.product-launch-tracking-page .plt-table-wrap--loading {
  pointer-events: none;
}

.product-launch-tracking-page .plt-table-wrap--loading .plt-dashboard-table,
.product-launch-tracking-page .plt-table-wrap--loading .plt-spreadsheet-table {
  opacity: 0.45;
}

.product-launch-tracking-page .plt-table-loading-overlay {
  position: absolute;
  inset: 0;
  /* Above the locked header (z-index 4) so the veil covers the whole table. */
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
}

.product-launch-tracking-page .plt-table-loading-spinner {
  width: 1.35rem;
  height: 1.35rem;
}

.product-launch-tracking-page .plt-disclosure-spinner {
  width: 0.95rem;
  height: 0.95rem;
}

.product-launch-tracking-page .plt-nested-loading-hint {
  margin: 0.35rem 0;
  padding: 0.35rem 0.25rem;
}

.product-launch-tracking-page .catalog-disclosure-btn.phx-click-loading {
  opacity: 0.55;
  pointer-events: none;
  cursor: wait;
}

.product-launch-tracking-page .catalog-disclosure-btn.phx-click-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--color-border-light, #e2e8f0);
  border-top-color: var(--color-text-muted, #64748b);
  border-radius: 50%;
  animation: catalog-inline-spin 0.65s linear infinite;
}

.product-launch-tracking-page .catalog-disclosure-btn {
  position: relative;
}

.product-launch-tracking-page .plt-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.25rem;
}

.product-launch-tracking-page .plt-filters-select {
  width: 100%;
  min-width: 0;
  font-size: 0.85rem;
}

.product-launch-tracking-page .plt-filters-date-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.95fr) minmax(0, 1.35fr);
  gap: 0.35rem 0.5rem;
  align-items: start;
  min-width: 0;
}

.product-launch-tracking-page .plt-filters-date-row--omni {
  grid-template-columns: minmax(6.5rem, 0.55fr) minmax(0, 1fr);
}

.product-launch-tracking-page .plt-filters-date-row-label {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text, #0f172a);
  padding-top: 0.35rem;
}

.product-launch-tracking-page .plt-filters-date-row-controls {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.product-launch-tracking-page .plt-filters-date-range {
  gap: 0.25rem 0.35rem;
}

.product-launch-tracking-page .plt-filters-date-range .inbound-filter-date-input {
  flex: 1 1 5.75rem;
  min-width: 0;
  font-size: 0.82rem;
  padding: 0.28rem 0.35rem;
}

.product-launch-tracking-page .plt-filters-date-extra {
  padding: 0.15rem 0;
  font-size: 0.82rem;
}

.product-launch-tracking-page .plt-filters-date-extra.inbound-filters-check-label {
  padding: 0.15rem 0;
}

.product-launch-tracking-page .plt-filter-search {
  min-width: 14rem;
}

.product-launch-tracking-page .plt-filter-search-input {
  min-width: 14rem;
}

.product-launch-tracking-page .plt-filter-date-input {
  min-width: 10rem;
}

.product-launch-tracking-page .plt-filter-any {
  padding-bottom: 0.35rem;
}

.product-launch-tracking-page .plt-table-wrap {
  /* No overflow here: sideways scrolling belongs to the page so the header
     can pin to the viewport. See the locked-header block. */
  width: 100%;
}

/* Full-width product grid: scroll horizontally when schedule columns exceed viewport */
.product-launch-tracking-page.inbound-page
  .shipments-card
  .shipments-section
  .plt-table-wrap
  > table.plt-dashboard-table {
  width: max-content;
  min-width: 100%;
  max-width: none;
  table-layout: fixed;
}

.product-launch-tracking-page.inbound-page
  .shipments-card
  .shipments-section
  .plt-table-wrap
  > table.plt-spreadsheet-table {
  width: max-content;
  min-width: 100%;
  max-width: none;
}

.product-launch-tracking-page .plt-spreadsheet-table th,
.product-launch-tracking-page .plt-spreadsheet-table td {
  white-space: nowrap;
}

.product-launch-tracking-page.inbound-page .shipments-card .plt-dashboard-table.shipment-table,
.product-launch-tracking-page .plt-dashboard-table {
  width: max-content;
  min-width: 100%;
  max-width: none;
  table-layout: fixed;
  font-size: var(--plt-font-dashboard);
}

.product-launch-tracking-page .plt-eta-late {
  color: #b91c1c;
  font-weight: 700;
}

/* Inline tag on ETA-at-DC cells whose date fell back to a SAP tier of the
   canonical ETA hierarchy (no linked shipment ETA). */
.product-launch-tracking-page .plt-eta-source-tag {
  color: var(--color-text-muted, #6b7280);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* "?" variant: the ETA comes from an item-less, PO-level-linked shipment
   (no packing list), so the product's presence on board is unconfirmed. */
.product-launch-tracking-page .plt-eta-source-tag--unconfirmed {
  cursor: help;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 9999px;
  padding: 0 0.3em;
}

/* Badge on shipment rows whose PO linkage is reference-only (no packing
   list uploaded) — contents unconfirmed for the product in view. */
.plt-unconfirmed-badge {
  color: var(--color-text-muted, #6b7280);
  background: var(--color-surface-muted, #f3f4f6);
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 9999px;
  cursor: help;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.05rem 0.45rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.product-launch-tracking-page .plt-po-qty-overlay {
  max-width: min(96vw, 56rem);
}

.product-launch-tracking-page .plt-po-qty-overlay-body {
  overflow-x: auto;
}

/* Pre-SPA product inventory overlay — host-agnostic (Launch Tracker + Inbound).
   Do not re-scope under `.product-launch-tracking-page`: inbound mounts the same
   component and would lose column flex / tab hiding. */
.pre-spa-inv-overlay {
  max-width: min(96vw, 72rem);
  margin-left: auto;
  margin-right: 0;
  align-self: stretch;
  max-height: 100vh;
}

.panorama-url-overlay--pre-spa-inv {
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
}

.pre-spa-inv-overlay-content {
  font-family: var(--font-sans);
  background: var(--color-surface);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-height: 100vh;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.pre-spa-inv-header {
  padding: 1.25rem 2.75rem 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.pre-spa-inv-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.pre-spa-inv-open-pim {
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.pre-spa-inv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.pre-spa-inv-tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pre-spa-inv-tab-label {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
}

.pre-spa-inv-tab-input:nth-child(1):checked
  + .pre-spa-inv-tab-label,
.pre-spa-inv-tab-input:nth-child(3):checked
  + .pre-spa-inv-tab-label {
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

.pre-spa-inv-tab-panel {
  display: none;
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
  margin-top: 0.75rem;
}

.pre-spa-inv-tab-input:nth-child(1):checked
  ~ .pre-spa-inv-tab-panel[data-panel="size"],
.pre-spa-inv-tab-input:nth-child(3):checked
  ~ .pre-spa-inv-tab-panel[data-panel="projection"] {
  display: block;
}

.pre-spa-inv-size-run-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.pre-spa-inv-size-run-table .plt-size-run-sticky {
  position: sticky;
  z-index: 1;
  background: var(--color-surface);
  text-align: left;
  white-space: nowrap;
}

.pre-spa-inv-size-run-table th.plt-size-run-sticky:nth-child(1),
.pre-spa-inv-size-run-table td.plt-size-run-sticky:nth-child(1),
.pre-spa-inv-size-run-table tfoot th.plt-size-run-sticky {
  left: 0;
  min-width: 7.5rem;
}

.pre-spa-inv-size-run-table th.plt-size-run-sticky:nth-child(2),
.pre-spa-inv-size-run-table td.plt-size-run-sticky:nth-child(2) {
  left: 7.5rem;
  min-width: 5.5rem;
}

.pre-spa-inv-size-run-table th.plt-size-run-sticky:nth-child(3),
.pre-spa-inv-size-run-table td.plt-size-run-sticky:nth-child(3) {
  left: 13rem;
  min-width: 5.5rem;
}

/* PO line beside the pinned shipment block; scrolls with the sizes. */
.pre-spa-inv-size-run-table .pre-spa-inv-size-run-po {
  text-align: left;
  white-space: nowrap;
}

/* Size matrix chrome mirrors PLT `.plt-po-size-table` (still page-scoped there).
   The overlay reuses that class and must look the same on /inbound. */
.pre-spa-inv-overlay .plt-po-size-table {
  border-collapse: collapse;
  table-layout: auto;
  width: max-content;
  min-width: 100%;
  font-size: var(--plt-font-shipment);
}

.pre-spa-inv-overlay .plt-po-size-table th,
.pre-spa-inv-overlay .plt-po-size-table td {
  border: 1px solid #cbd5e1;
  padding: 0.25rem 0.45rem;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}

.pre-spa-inv-overlay .plt-po-size-table thead th {
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
}

.pre-spa-inv-size-row--received {
  background: color-mix(in srgb, var(--color-success, #16a34a) 8%, transparent);
}

.pre-spa-inv-size-row--in_transit {
  background: color-mix(in srgb, var(--color-chart-inbound, #0ea5e9) 8%, transparent);
}

.pre-spa-inv-size-row--scheduled {
  background: color-mix(in srgb, var(--color-warning, #d97706) 8%, transparent);
}

.pre-spa-inv-size-footer th,
.pre-spa-inv-size-footer td {
  font-weight: 600;
  border-top: 1px solid var(--color-border);
}

/* PTD-95 core size coverage: an offered core size with no supply. */
.pre-spa-inv-size-gap {
  color: var(--color-danger-text, #8a1c1c);
  background: var(--color-danger-surface, rgba(180, 35, 35, 0.08));
}

.pre-spa-inv-size-gap-summary {
  margin: 0 0 0.5rem;
  color: var(--color-danger-text, #8a1c1c);
  font-weight: 600;
}

.pre-spa-inv-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pre-spa-inv-meta {
  margin: 0.35rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.pre-spa-inv-body {
  /* Override .shipment-overlay-body { display: flex } (row) — that layout is for
     the shipment-detail panel (details | map). This overlay stacks KPIs → chart →
     timeline → legs as a single column. */
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 1rem 1.25rem 1.5rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.pre-spa-inv-kpis {
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.pre-spa-inv-chart-section,
.pre-spa-inv-timeline-section,
.pre-spa-inv-legs-section {
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
}

.pre-spa-inv-chart-sub {
  margin: 0 0 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.pre-spa-inv-chart-wrap {
  position: relative;
  width: 100%;
  height: 14rem;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  box-sizing: border-box;
}

.pre-spa-inv-chart-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.pre-spa-inv-lanes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}

.pre-spa-inv-lane {
  display: grid;
  grid-template-columns: minmax(4.5rem, 7rem) minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.pre-spa-inv-lane-label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.pre-spa-inv-track {
  position: relative;
  height: 1.75rem;
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-width: 0;
}

.pre-spa-inv-bar {
  position: absolute;
  top: 0.2rem;
  bottom: 0.2rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  padding: 0 0.4rem;
  font-size: 0.7rem;
  color: var(--color-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pre-spa-inv-bar--air {
  background: var(--color-chart-inbound);
}

.pre-spa-inv-bar--ocean {
  background: var(--color-primary);
}

.pre-spa-inv-bar--other {
  background: var(--color-text-muted);
}

.pre-spa-inv-axis-row {
  display: grid;
  grid-template-columns: minmax(4.5rem, 7rem) minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  width: 100%;
  min-width: 0;
  margin-top: 0.35rem;
}

.pre-spa-inv-axis {
  position: relative;
  height: 1.35rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  min-width: 0;
}

.pre-spa-inv-axis-mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pre-spa-inv-axis-mark--today {
  transform: translateX(0);
}

.pre-spa-inv-axis-mark--end {
  transform: translateX(-100%);
}

.pre-spa-inv-legs-wrap {
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Beat page-level `.plt-dashboard-table { width: max-content }` so the legs
   table stays inside the overlay instead of stretching it sideways. */
.pre-spa-inv-legs-table.plt-dashboard-table,
.pre-spa-inv-legs-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  table-layout: auto;
}

.pre-spa-inv-legs-table th,
.pre-spa-inv-legs-table td,
.pre-spa-inv-legs-table .plt-ship-status {
  white-space: normal;
  overflow-wrap: anywhere;
}

.product-launch-tracking-page .plt-dashboard-table th,
.product-launch-tracking-page .plt-dashboard-table td {
  white-space: nowrap;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-launch-tracking-page .plt-dashboard-table col.plt-col-star {
  width: 2.25rem;
}

.product-launch-tracking-page .plt-dashboard-table col.plt-col-disclosure {
  width: 2.25rem;
}

.product-launch-tracking-page .plt-dashboard-table col.plt-col-thumb {
  width: 2.75rem;
}

.product-launch-tracking-page .plt-dashboard-table col.plt-col-style-num {
  width: 5.5rem;
}

.product-launch-tracking-page .plt-dashboard-table col.plt-col-color {
  width: 7rem;
}

.product-launch-tracking-page .plt-dashboard-table col.plt-col-marketing-tier {
  width: 7rem;
}

.product-launch-tracking-page .plt-dashboard-table col.plt-col-product-name {
  width: 14rem;
}

.product-launch-tracking-page .plt-dashboard-table col.plt-col-date {
  width: var(--plt-dashboard-col-date, 5.625rem);
}

.product-launch-tracking-page .plt-dashboard-table col.plt-col-qty {
  width: 3.5rem;
}

.product-launch-tracking-page .plt-dashboard-table col.plt-col-status {
  width: var(--plt-status-col-width);
}

.product-launch-tracking-page .plt-dashboard-table thead th.plt-col-wrap,
.product-launch-tracking-page .plt-dashboard-table thead th.plt-col-w-date {
  white-space: normal;
  vertical-align: bottom;
  padding: 0.2rem 0.35rem;
}

.product-launch-tracking-page .plt-dashboard-table th.plt-col-w-date,
.product-launch-tracking-page .plt-dashboard-table td.plt-col-date {
  width: var(--plt-dashboard-col-date, 5.625rem);
  min-width: var(--plt-dashboard-col-date, 5.625rem);
  max-width: var(--plt-dashboard-col-date, 5.625rem);
  box-sizing: border-box;
}

.product-launch-tracking-page .plt-dashboard-table th.plt-col-w-date .plt-col-wrap-label {
  max-width: calc(var(--plt-dashboard-col-date, 5.625rem) - 0.35rem);
  font-size: var(--plt-font-header);
  line-height: 1.15;
}

.product-launch-tracking-page.inbound-page .shipments-card .plt-dashboard-table td.plt-col-date {
  text-align: left;
  /* Dates were rendering with the larger dashboard body font (0.9375rem)
     and hitting the 5.625rem column cap — every date came out ellipsed.
     Bump specificity to beat the earlier `font-size: inherit` rule on
     .plt-dashboard-table td (line ~10611), which was winning against
     the previous simpler selector. Bring date cells down to the same
     tabular-numeric size the rest of the app uses so "MM/DD/YYYY" fits.
     A SAP / ? source tag or ◆ revision marker after the date wraps below it
     rather than ellipsizing the date. */
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: normal;
}

.product-launch-tracking-page.inbound-page .shipments-card .plt-dashboard-table td.plt-col-date time {
  white-space: nowrap;
}

.product-launch-tracking-page.inbound-page .shipments-card .plt-dashboard-table td.plt-col-date .po-date-cell {
  flex-wrap: wrap;
}

.product-launch-tracking-page .plt-dashboard-table td.plt-rollup-status-cell {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.product-launch-tracking-page .plt-dashboard-table .col-product-name,
.product-launch-tracking-page .plt-dashboard-table td:nth-child(5) {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-launch-tracking-page .plt-source-row th {
  font-weight: 400;
  padding-top: 0;
  border-top: none;
}

.product-launch-tracking-page .plt-source-heading {
  color: var(--color-text-muted, #6b7280);
  font-size: var(--plt-font-meta);
  font-weight: 600;
  font-style: normal;
  text-align: left;
  white-space: nowrap;
}

.product-launch-tracking-page .plt-nested-table .plt-source-row th,
.product-launch-tracking-page .plt-shipment-table .plt-source-row th,
.product-launch-tracking-page .plt-po-size-table .plt-source-row th,
.product-launch-tracking-page .plt-po-lines-table .plt-source-row th {
  font-size: var(--plt-font-small);
  padding-top: 0.15rem;
  padding-bottom: 0.35rem;
}

.product-launch-tracking-page .plt-source-label {
  color: var(--color-text-muted, #6b7280);
  font-size: var(--plt-font-small);
  font-style: italic;
}

.product-launch-tracking-page .plt-placeholder-cell {
  color: var(--color-text-muted, #6b7280);
}

.product-launch-tracking-page .plt-disclosure-col {
  width: 2.25rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  vertical-align: middle;
}

.product-launch-tracking-page .plt-parent-row td {
  vertical-align: middle;
}

.product-launch-tracking-page .plt-parent-row--attention td {
  background: color-mix(in srgb, var(--color-warning-bg, #fffbeb) 55%, transparent);
}

/* Shared status column width across summary, PO, and shipment tables */
.product-launch-tracking-page {
  --plt-font-dashboard: 0.9375rem;
  --plt-font-nested: 0.875rem;
  --plt-font-shipment: 0.8125rem;
  --plt-font-header: 0.7rem;
  --plt-font-meta: 0.8125rem;
  --plt-font-small: 0.75rem;
  --plt-font-badge: 0.75rem;
  --plt-status-col-width: 21rem;
  --plt-ship-col-shipped: 3.5rem;
  --plt-ship-col-balance: 3.5rem;
  --plt-ship-col-date: 3.35rem;
  --plt-dashboard-col-date: 5.625rem;
  --plt-ship-col-days-off: 3rem;
  --plt-ship-col-mot: 5.5rem;
  --plt-ship-col-tracking: 6.75rem;
  --plt-ship-col-phase: 4.75rem;
  --plt-shipment-schedule-width: calc(
    var(--plt-ship-col-shipped) + var(--plt-ship-col-balance) + 4 * var(--plt-ship-col-date) +
      var(--plt-ship-col-days-off) + var(--plt-ship-col-mot) + var(--plt-ship-col-tracking) +
      var(--plt-ship-col-phase) + var(--plt-status-col-width)
  );
  /* Proportional column share when schedule table spans full PO disclosure width */
  --plt-ship-pct-shipped: 5.7%;
  --plt-ship-pct-balance: 5.7%;
  --plt-ship-pct-date: 5.46%;
  --plt-ship-pct-days-off: 4.89%;
  --plt-ship-pct-mot: 8.96%;
  --plt-ship-pct-tracking: 10.99%;
  --plt-ship-pct-phase: 7.74%;
  --plt-ship-pct-status: 34.18%;
}

.product-launch-tracking-page .plt-dashboard-table .col-status,
.product-launch-tracking-page .plt-rollup-status-cell,
.product-launch-tracking-page .plt-po-rollup-status-cell,
.product-launch-tracking-page .plt-nested-table thead th.plt-col-w-status,
.product-launch-tracking-page .plt-shipment-table:not(.plt-shipment-schedule-table) thead th.plt-col-w-status,
.product-launch-tracking-page .plt-shipment-table:not(.plt-shipment-schedule-table) tbody td.plt-shipment-col-status {
  min-width: var(--plt-status-col-width);
  box-sizing: border-box;
}

.product-launch-tracking-page .plt-nested-table thead th.plt-col-w-status,
.product-launch-tracking-page .plt-shipment-table:not(.plt-shipment-schedule-table) thead th.plt-col-w-status,
.product-launch-tracking-page .plt-shipment-table:not(.plt-shipment-schedule-table) tbody td.plt-shipment-col-status {
  width: var(--plt-status-col-width);
}

.product-launch-tracking-page .plt-shipment-schedule-table thead th.plt-col-w-status,
.product-launch-tracking-page .plt-shipment-schedule-table tbody td.plt-shipment-col-status {
  width: auto;
  min-width: 0;
  max-width: none;
}

.product-launch-tracking-page .plt-rollup-status-cell,
.product-launch-tracking-page .plt-po-rollup-status-cell {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  width: auto;
  max-width: var(--plt-status-col-width);
  min-width: 0;
  white-space: nowrap;
}

.product-launch-tracking-page .plt-rollup-status-cell .plt-ship-status,
.product-launch-tracking-page .plt-po-rollup-status-cell .plt-ship-status {
  flex-shrink: 0;
}

.product-launch-tracking-page .plt-rollup-subtitle,
.product-launch-tracking-page .plt-po-rollup-subtitle {
  display: inline;
  flex-shrink: 1;
  min-width: 0;
  margin-top: 0;
  color: var(--color-text-muted, #6b7280);
  font-size: var(--plt-font-meta);
  line-height: 1.3;
  white-space: nowrap;
}

.product-launch-tracking-page .plt-rollup-flags {
  display: inline;
  flex-shrink: 0;
  margin-top: 0;
  color: var(--color-text-muted, #6b7280);
  font-size: var(--plt-font-small);
  font-style: italic;
  line-height: 1.25;
  white-space: nowrap;
}

/* Missed ex-factory (overdue or shipped late) — the one flag shown in red. Same red as
   `.plt-ship-status--delayed` so it reads as the same severity. */
.product-launch-tracking-page .plt-rollup-flag--xf-miss {
  color: #b91c1c;
  font-style: normal;
  font-weight: 700;
}

.product-launch-tracking-page td.plt-col-date--xf-miss {
  background: #fee2e2;
  color: #991b1b;
  font-weight: 600;
}

.product-launch-tracking-page .plt-shipment-empty-hint,
.product-launch-tracking-page .plt-po-empty-hint {
  margin: 0.5rem 0;
  color: var(--color-text-muted, #6b7280);
  font-size: var(--plt-font-dashboard);
}

.product-launch-tracking-page .plt-nested-block-cell {
  padding: 0.35rem 0.5rem 0.75rem 2rem;
  background: var(--color-surface-muted, #f8fafc);
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  vertical-align: top;
}

.product-launch-tracking-page .plt-shipment-block-cell {
  overflow-x: auto;
  padding: 0;
  background: #fff;
  vertical-align: top;
}

.product-launch-tracking-page .plt-disclosure-panel-wrap {
  min-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.product-launch-tracking-page .plt-nested-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

.product-launch-tracking-page .plt-nested-table {
  width: max-content;
  min-width: 100%;
  max-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: var(--plt-font-nested);
}

.product-launch-tracking-page .plt-nested-table col.plt-col-disclosure {
  width: 1.75rem;
}

.product-launch-tracking-page .plt-nested-table col.plt-col-po-status {
  width: var(--plt-status-col-width);
}

.product-launch-tracking-page .plt-shipment-schedule-panel {
  contain: inline-size;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.35rem 0 0.65rem;
  background: #fff;
  overflow-x: auto;
}

.product-launch-tracking-page .plt-shipment-schedule-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
}

.product-launch-tracking-page .plt-shipment-schedule-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--plt-font-shipment);
}

.product-launch-tracking-page .plt-shipment-schedule-table thead th.plt-col-wrap,
.product-launch-tracking-page .plt-shipment-schedule-table thead th.plt-col-w-status {
  white-space: normal;
  vertical-align: bottom;
  padding: 0.2rem 0.3rem;
}

.product-launch-tracking-page .plt-shipment-schedule-table tbody td {
  white-space: nowrap;
  vertical-align: middle;
  padding: 0.25rem 0.35rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
}

.product-launch-tracking-page .plt-shipment-schedule-table .plt-shipment-col-shipped,
.product-launch-tracking-page .plt-shipment-schedule-table .plt-shipment-col-balance {
  text-align: right;
}

.product-launch-tracking-page .plt-shipment-schedule-table col.plt-col-shipped-qty {
  width: 3.5rem;
}

.product-launch-tracking-page .plt-shipment-schedule-table col.plt-col-balance-qty {
  width: 3.25rem;
}

/* Fixed layout takes column widths from the <col>, never the content: size it
   for a ten-character date (ISO, US or numeric locale) with room for wider
   digit fonts, rather than inheriting the dashboard's 5.625rem by descent. */
.product-launch-tracking-page .plt-shipment-schedule-table col.plt-col-date {
  width: 6.25rem;
}

.product-launch-tracking-page .plt-shipment-schedule-table th.plt-col-w-date,
.product-launch-tracking-page .plt-shipment-schedule-table td.plt-col-date {
  width: auto;
  min-width: 0;
  max-width: none;
}

.product-launch-tracking-page .plt-shipment-schedule-table thead th.plt-col-w-shipped-qty,
.product-launch-tracking-page .plt-shipment-schedule-table thead th.plt-col-w-balance-qty,
.product-launch-tracking-page .plt-shipment-schedule-table tbody td.plt-shipment-col-shipped,
.product-launch-tracking-page .plt-shipment-schedule-table tbody td.plt-shipment-col-balance {
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-launch-tracking-page .plt-shipment-schedule-table thead th.plt-col-w-shipped-qty .plt-col-wrap-label,
.product-launch-tracking-page .plt-shipment-schedule-table thead th.plt-col-w-balance-qty .plt-col-wrap-label {
  max-width: 100%;
}

.product-launch-tracking-page .plt-shipment-schedule-grid {
  display: grid;
  grid-template-columns:
    var(--plt-ship-col-shipped) var(--plt-ship-col-balance) repeat(4, var(--plt-ship-col-date))
    var(--plt-ship-col-days-off) var(--plt-ship-col-mot) var(--plt-ship-col-tracking) var(--plt-ship-col-phase)
    minmax(12rem, 1fr);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: 0.75rem;
}

.product-launch-tracking-page .plt-shipment-schedule-grid__row {
  display: contents;
}

.product-launch-tracking-page .plt-shipment-schedule-grid__cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid #cbd5e1;
  padding: 0.3rem 0.35rem;
  text-align: left;
  vertical-align: middle;
  box-sizing: border-box;
}

.product-launch-tracking-page .plt-shipment-schedule-grid__cell--head {
  white-space: normal;
  vertical-align: bottom;
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
  padding: 0.2rem 0.3rem;
}

.product-launch-tracking-page .plt-shipment-schedule-grid__cell--source {
  font-size: 0.7rem;
  padding-top: 0.15rem;
  padding-bottom: 0.35rem;
  border-top: none;
  white-space: nowrap;
}

.product-launch-tracking-page .plt-shipment-schedule-grid .plt-col-wrap-label {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.15;
  font-size: 0.65rem;
  font-weight: 600;
  hyphens: auto;
}

.product-launch-tracking-page .plt-shipment-schedule-grid .plt-shipment-col-qty,
.product-launch-tracking-page .plt-shipment-schedule-grid .plt-shipment-col-shipped,
.product-launch-tracking-page .plt-shipment-schedule-grid .plt-shipment-col-balance {
  text-align: right;
}

.product-launch-tracking-page .plt-shipment-schedule-grid .plt-col-date {
  font-size: 0.72rem;
}

.product-launch-tracking-page .plt-shipment-schedule-grid .plt-shipment-col-status {
  white-space: nowrap;
}

.product-launch-tracking-page .plt-col-wrap-label {
  display: block;
  max-width: 3.25rem;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.15;
  font-size: var(--plt-font-header);
  font-weight: 600;
  hyphens: auto;
}

.product-launch-tracking-page .plt-col-wrap-label--po {
  max-width: 4.5rem;
}

.product-launch-tracking-page .plt-col-wrap-label--status {
  max-width: calc(var(--plt-status-col-width) - 0.5rem);
}

.product-launch-tracking-page .plt-nested-table thead th.plt-col-wrap,
.product-launch-tracking-page .plt-nested-table thead th.plt-col-w-status,
.product-launch-tracking-page .plt-shipment-table thead th.plt-col-wrap {
  white-space: normal;
  vertical-align: bottom;
  padding: 0.2rem 0.3rem;
}

.product-launch-tracking-page .plt-nested-table thead th.plt-col-w-po {
  max-width: 5.5rem;
}

.product-launch-tracking-page .plt-nested-table thead th.plt-col-w-qty,
.product-launch-tracking-page .plt-shipment-table:not(.plt-shipment-schedule-table) thead th.plt-col-w-qty {
  max-width: 3rem;
}

.product-launch-tracking-page .plt-nested-table thead th.plt-col-w-date,
.product-launch-tracking-page .plt-shipment-table:not(.plt-shipment-schedule-table) thead th.plt-col-w-date {
  max-width: 3.35rem;
}

.product-launch-tracking-page .plt-nested-table thead th.plt-col-w-text,
.product-launch-tracking-page .plt-shipment-table:not(.plt-shipment-schedule-table) thead th.plt-col-w-text {
  max-width: 3.35rem;
}

.product-launch-tracking-page .plt-nested-table thead th.plt-col-w-lines {
  max-width: 3rem;
}

.product-launch-tracking-page .plt-shipment-table:not(.plt-shipment-schedule-table) thead th.plt-col-w-tracking {
  max-width: 5.5rem;
}

.product-launch-tracking-page .plt-shipment-table:not(.plt-shipment-schedule-table) thead th.plt-col-w-phase {
  max-width: 4.5rem;
}

.product-launch-tracking-page .plt-shipment-table tbody td.plt-shipment-col-status {
  white-space: nowrap;
}

.product-launch-tracking-page .plt-nested-table .plt-source-row th:nth-child(2),
.product-launch-tracking-page .plt-shipment-table:not(.plt-shipment-schedule-table) .plt-source-row th:last-child {
  min-width: var(--plt-status-col-width);
}

.product-launch-tracking-page .plt-shipment-schedule-table .plt-source-row th:last-child {
  min-width: 0;
}

.product-launch-tracking-page .plt-nested-table .plt-source-row th:not(.plt-source-heading):not(:nth-child(2)),
.product-launch-tracking-page .plt-shipment-table:not(.plt-shipment-schedule-table) .plt-source-row th:not(:last-child) {
  max-width: 3.35rem;
  white-space: normal;
}

.product-launch-tracking-page .plt-shipment-schedule-table .plt-source-row th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-launch-tracking-page .plt-nested-table tbody td,
.product-launch-tracking-page .plt-shipment-table tbody td {
  white-space: nowrap;
  vertical-align: middle;
}

.product-launch-tracking-page .plt-nested-table td.plt-col-date,
.product-launch-tracking-page .plt-shipment-table td.plt-col-date {
  font-size: var(--plt-font-shipment);
}

.product-launch-tracking-page .plt-po-rollup-subtitle {
  font-size: var(--plt-font-small);
}

.product-launch-tracking-page .plt-nested-table th,
.product-launch-tracking-page .plt-nested-table td {
  padding: 0.25rem 0.35rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
  vertical-align: middle;
}

.product-launch-tracking-page .plt-nested-table .catalog-disclosure-btn--boxed,
.product-launch-tracking-page .plt-nested-table .catalog-disclosure-placeholder {
  width: 1.375rem;
  height: 1.375rem;
  min-width: 1.375rem;
  min-height: 1.375rem;
  font-size: 1rem;
}

.product-launch-tracking-page .plt-nested-table .plt-disclosure-col {
  width: 1.75rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.product-launch-tracking-page .plt-nested-table .plt-disclosure-spinner {
  width: 1rem;
  height: 1rem;
}

.product-launch-tracking-page .plt-po-group-row td {
  background: #fff;
}

.product-launch-tracking-page .plt-qty-disclosure-col {
  white-space: nowrap;
}

.product-launch-tracking-page .disclosure-pill {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  font-size: var(--plt-font-badge);
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  cursor: pointer;
}

.product-launch-tracking-page .disclosure-pill:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.product-launch-tracking-page .plt-po-detail-cell {
  padding: 0.35rem 0.5rem 0.65rem;
  background: #fff;
  vertical-align: top;
}

.product-launch-tracking-page .plt-po-size-wrap {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid #94a3b8;
  background: #fff;
}

.product-launch-tracking-page .plt-po-size-table {
  border-collapse: collapse;
  table-layout: auto;
  width: max-content;
  min-width: 100%;
  font-size: var(--plt-font-shipment);
}

.product-launch-tracking-page .plt-po-size-table th,
.product-launch-tracking-page .plt-po-size-table td {
  border: 1px solid #cbd5e1;
  padding: 0.25rem 0.45rem;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}

.product-launch-tracking-page .plt-po-size-table thead th {
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
}

.product-launch-tracking-page .plt-po-size-table .plt-size-rollup-h {
  text-align: left;
  font-weight: 600;
  background: #f8fafc;
  color: #334155;
  min-width: 5.5rem;
}

.product-launch-tracking-page .plt-po-size-table .plt-size-col {
  min-width: 1.75rem;
}

.product-launch-tracking-page .plt-po-lines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--plt-font-shipment);
  margin-top: 0;
}

.product-launch-tracking-page .plt-po-lines-table--after-sizes {
  margin-top: 0.5rem;
}

.product-launch-tracking-page .plt-po-lines-table th,
.product-launch-tracking-page .plt-po-lines-table td {
  border: 1px solid #cbd5e1;
  padding: 0.3rem 0.5rem;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}

.product-launch-tracking-page .plt-po-lines-table thead th {
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
}

.product-launch-tracking-page .plt-shipment-table:not(.plt-shipment-schedule-table) {
  width: max-content;
  max-width: 100%;
  border-collapse: collapse;
  font-size: var(--plt-font-shipment);
}

.product-launch-tracking-page .plt-shipment-schedule-table.plt-shipment-table {
  border-collapse: collapse;
}

.product-launch-tracking-page .plt-shipment-table tbody td {
  border: 1px solid #cbd5e1;
  padding: 0.3rem 0.35rem;
  text-align: left;
  vertical-align: middle;
}

.product-launch-tracking-page .plt-shipment-table thead th {
  border: 1px solid #cbd5e1;
  text-align: left;
}

.product-launch-tracking-page .plt-shipment-table td.plt-shipment-col-qty {
  text-align: right;
}

.product-launch-tracking-page .plt-shipment-schedule-table td.plt-shipment-col-balance {
  text-align: right;
}

.product-launch-tracking-page .plt-shipment-schedule-table tbody td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-launch-tracking-page .plt-shipment-schedule-table .plt-col-wrap-label {
  max-width: 100%;
  line-height: 1.15;
}

.product-launch-tracking-page .plt-shipment-schedule-table .plt-col-wrap-label--status {
  max-width: 100%;
}

.product-launch-tracking-page .plt-shipment-table .plt-shipment-col-carrier,
.product-launch-tracking-page .plt-shipment-table .plt-shipment-col-origin {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-launch-tracking-page .plt-shipment-table thead th {
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
}

.product-launch-tracking-page .plt-shipment-head-row th {
  font-weight: 500;
  color: var(--color-text-muted, #6b7280);
  background: var(--color-surface-muted, #f8fafc);
}

.product-launch-tracking-page .plt-days-off--good {
  color: #15803d;
  font-weight: 600;
}

.product-launch-tracking-page .plt-days-off--warn {
  color: #b45309;
  font-weight: 600;
}

.product-launch-tracking-page .plt-days-off--bad {
  color: #b91c1c;
  font-weight: 600;
}

.product-launch-tracking-page .plt-ship-status {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: var(--plt-font-badge);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.product-launch-tracking-page .plt-ship-status--on-time {
  background: #dcfce7;
  color: #166534;
}

/* Received at the DC and on time — the most certain On time there is, so a deeper, solid green
   than the forecast badge above it. */
.product-launch-tracking-page .plt-ship-status--received-on-time {
  background: #166534;
  color: #ffffff;
}

/* A product or PO fully received but landed late: in the DC, without claiming on time. */
.product-launch-tracking-page .plt-ship-status--received {
  background: #ffffff;
  border: 1px solid #166534;
  color: #166534;
}

/* Beside a late or at-risk badge on a received leg: it is in the DC, just not in time. */
.product-launch-tracking-page .plt-received-tag {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid #166534;
  border-radius: 999px;
  color: #166534;
  font-size: var(--plt-font-badge);
  font-weight: 600;
}

.product-launch-tracking-page .plt-ship-status--delayed {
  background: #fee2e2;
  color: #991b1b;
}

.product-launch-tracking-page .plt-ship-status--mixed {
  background: #e0e7ff;
  color: #3730a3;
}

.product-launch-tracking-page .plt-ship-status--ordered {
  background: #f3f4f6;
  color: #374151;
}

.product-launch-tracking-page .plt-ship-status--unknown {
  background: #e2e8f0;
  color: #475569;
}

.product-launch-tracking-page .plt-ship-status--ecomm-ready {
  background: #ffedd5;
  color: #9a3412;
}

.product-launch-tracking-page .plt-ship-status--on-time-covered {
  background: #ecfccb;
  color: #3f6212;
}

.product-launch-tracking-page .plt-ship-status--missing-launch {
  background: #fae8ff;
  color: #86198f;
}

/* Same weight as --missing-launch on purpose: both say "no date to measure
   against", neither is an escalation. They read as one family and differ only
   in which date is absent. */
.product-launch-tracking-page .plt-ship-status--missing-in-dc-date {
  background: #fae8ff;
  color: #86198f;
}

.product-launch-tracking-page .plt-ship-status--pre-departure {
  background: #cffafe;
  color: #155e75;
}

/* Pre-SPA view (Launch Tracker third view) */
.product-launch-tracking-page .plt-pre-spa-truncated,
.product-launch-tracking-page .plt-table-truncated {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.85rem;
}

.product-launch-tracking-page .plt-pre-spa-table td,
.product-launch-tracking-page .plt-pre-spa-table th {
  white-space: nowrap;
}

.product-launch-tracking-page .plt-pre-spa-launch-row th {
  background: #e2e8f0;
  color: #1e293b;
  font-weight: 700;
  text-align: left;
  padding: 0.5rem 0.75rem;
}

.product-launch-tracking-page .plt-pre-spa-potype-row th {
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
  text-align: left;
  padding: 0.35rem 0.75rem 0.35rem 1.5rem;
}

/* A launch-date / PO-type heading spans every column, so a sideways scroll carried its text
   off-screen. Its content pins to the left edge instead; `max-content` keeps the box narrower
   than the cell so it has room to slide. */
.product-launch-tracking-page .plt-pre-spa-heading-pin {
  position: sticky;
  left: 0.75rem;
  width: max-content;
}

/* Its cell indents deeper than the launch heading's; pin at that indent to keep the hierarchy. */
.product-launch-tracking-page .plt-pre-spa-potype-row .plt-pre-spa-heading-pin {
  left: 1.5rem;
}

.product-launch-tracking-page .plt-pre-spa-summary {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin-left: 1rem;
  font-weight: 500;
  color: #334155;
  text-transform: none;
  letter-spacing: normal;
}

.product-launch-tracking-page .plt-pre-spa-summary__flagged {
  color: #b45309;
  font-weight: 600;
}

.product-launch-tracking-page .plt-pre-spa-target-note {
  margin-left: 0.5rem;
  font-weight: 500;
  color: #b45309;
  text-transform: none;
}

.product-launch-tracking-page .plt-pre-spa-qty {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/*
 * Pre-SPA rows were tall because `.plt-pre-spa-note-btn` used `white-space:
 * pre-line`, so newline-rich PD notes wrapped and stretched every cell. The
 * table already nowraps body cells; logistics wrap on `.plt-pre-spa-notes` was
 * a dead declaration (lower specificity than `.plt-pre-spa-table td`).
 *
 * Clamp width too: `.inbound-page .shipments-card .shipment-table td` sets
 * `max-width: none`, so a bare `.plt-pre-spa-notes { max-width: 14rem }` loses
 * and the notes column grows with the full string. Beat that rule here with
 * both `width` and `max-width` (auto table layout ignores max-width alone on
 * td), then ellipsize; full text stays on `title` / click-to-edit. The open
 * editor may wrap again via `:has(.plt-pre-spa-note-form)`.
 */
.product-launch-tracking-page.inbound-page
  .shipments-card
  .plt-pre-spa-table
  td.plt-pre-spa-notes {
  /* `width` + `max-width`: max-width alone is ignored by auto table layout, so
     the column still grew with the full note string. */
  width: 14rem;
  max-width: 14rem;
  min-width: 8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-launch-tracking-page.inbound-page
  .shipments-card
  .plt-pre-spa-table
  td.plt-pre-spa-notes:has(.plt-pre-spa-note-form) {
  white-space: normal;
  overflow: visible;
  width: 22rem;
  max-width: 22rem;
}

/*
 * Pre-SPA freezes three identity columns — SKU, Style Name, Color — one past the shared
 * two-column lock (see the locked-header block), so this table adds its own `.col-lock-3` and
 * moves the edge shadow from column 2 to column 3. Each pinned column's left offset is the sum of
 * the widths before it, so SKU and Style Name are fixed widths (border-box, so padding is inside
 * them) and ellipsize; the full name stays on the cell's `title`. Color pins last, so nothing
 * depends on its width. None of the three can be hidden (see `@pre_spa_hideable_cols`): a
 * hidden column collapses to a strip and would leave a gap in the frozen block.
 *
 * The selectors carry `.inbound-page .shipments-card` to outrank that card's `max-width: none`
 * on every cell, which would otherwise let a long name widen the column under its offset.
 */
.product-launch-tracking-page .plt-pre-spa-wrap {
  --lock-1: 8rem;
  --lock-2: 13rem;
}

.product-launch-tracking-page.inbound-page .shipments-card .plt-pre-spa-wrap > table .col-lock-1,
.product-launch-tracking-page.inbound-page .shipments-card .plt-pre-spa-wrap > table .col-lock-2 {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-launch-tracking-page.inbound-page .shipments-card .plt-pre-spa-wrap > table .col-lock-1 {
  max-width: var(--lock-1);
}

.product-launch-tracking-page.inbound-page .shipments-card .plt-pre-spa-wrap > table .col-lock-2 {
  width: var(--lock-2);
  min-width: var(--lock-2);
  max-width: var(--lock-2);
}

/* The name is a link <button>, an atomic inline box the cell's text-overflow never reaches, so
   the button clips and ellipsizes its own text. */
.product-launch-tracking-page.inbound-page .shipments-card .plt-pre-spa-wrap > table .col-lock-2 .table-link {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-launch-tracking-page.inbound-page .shipments-card .plt-pre-spa-wrap > table .col-lock-3 {
  position: sticky;
  left: calc(var(--lock-1) + var(--lock-2));
  z-index: 1;
}

.product-launch-tracking-page.inbound-page .shipments-card .plt-pre-spa-wrap > table > thead .col-lock-3 {
  z-index: 4;
  box-shadow: var(--lock-shadow), var(--lock-edge);
}

.product-launch-tracking-page.inbound-page .shipments-card .plt-pre-spa-wrap > table > tbody .col-lock-3 {
  background: inherit;
  box-shadow: var(--lock-edge);
}

.product-launch-tracking-page.inbound-page .shipments-card .plt-pre-spa-wrap > table > thead .col-lock-2 {
  box-shadow: var(--lock-shadow);
}

.product-launch-tracking-page.inbound-page .shipments-card .plt-pre-spa-wrap > table > tbody .col-lock-2 {
  box-shadow: none;
}

/* ——— Production Plan tab (the FW Production Plan sheet) ——— */
/* Filters about shipment legs stay visible on Production Plan (they still apply on the other
   tabs) but are inert there: muted chip, disabled menu item, each with a title explaining why. */
.product-launch-tracking-page .inbound-filters-chip--inactive {
  opacity: 0.55;
  text-decoration: line-through;
}

.product-launch-tracking-page .inbound-filters-preset-link--disabled,
.product-launch-tracking-page .inbound-filter-menu__item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.product-launch-tracking-page .plt-filters-form label:has(input[type="checkbox"]:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

.product-launch-tracking-page .plt-production-plan-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.product-launch-tracking-page .plt-production-plan-table td,
.product-launch-tracking-page .plt-production-plan-table th {
  white-space: nowrap;
}

/* The pinned key column is the SKU (Model #), seventh in the sheet's order rather than first, so
   it scrolls in place until it reaches the left edge and pins there. --lock-1 is its width floor
   (see the locked-header block); nothing pins after it, so no column-2 offset depends on it. */
.product-launch-tracking-page .plt-production-plan-wrap {
  --lock-1: 9rem;
}

.product-launch-tracking-page .plt-production-plan-table .plt-pp-group-row th {
  background: #e2e8f0;
  color: #1e293b;
  font-weight: 700;
  text-align: center;
}

/* Both header rows are sticky (the shared table rule pins every thead th at top: 0), so the
   label row sits below the group row's fixed height instead of on top of it. */
.product-launch-tracking-page .plt-production-plan-table .plt-pp-group-row th {
  height: 2rem;
  box-sizing: border-box;
}

.product-launch-tracking-page .plt-production-plan-table .plt-pp-label-row th {
  top: 2rem;
}

/* A finished PO stays listed for the OTD record but should not compete with open work. */
.product-launch-tracking-page .plt-production-plan-table tr.plt-pp-row--finished td {
  color: #64748b;
}

.product-launch-tracking-page .plt-production-plan-table .plt-pp-late {
  color: #b91c1c;
  font-weight: 600;
}

.product-launch-tracking-page .plt-pp-pickup,
.product-launch-tracking-page .plt-pp-otd {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.product-launch-tracking-page .plt-pp-pickup--normal,
.product-launch-tracking-page .plt-pp-otd--on_time {
  background: #dcfce7;
  color: #166534;
}

.product-launch-tracking-page .plt-pp-pickup--delayed {
  background: #ffedd5;
  color: #9a3412;
}

.product-launch-tracking-page .plt-pp-pickup--critical,
.product-launch-tracking-page .plt-pp-otd--late {
  background: #fee2e2;
  color: #991b1b;
}

/* Same clamp as Pre-SPA's PD notes (see above): ellipsize, widen while editing. */
.product-launch-tracking-page.inbound-page .shipments-card .plt-production-plan-table td.plt-pp-note {
  width: 14rem;
  max-width: 14rem;
  min-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-launch-tracking-page.inbound-page
  .shipments-card
  .plt-production-plan-table
  td.plt-pp-note:has(.plt-pre-spa-note-form) {
  white-space: normal;
  overflow: visible;
  width: 22rem;
  max-width: 22rem;
}

.product-launch-tracking-page .plt-pre-spa-note-btn {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: left;
  background: none;
  border: 1px dashed transparent;
  border-radius: 4px;
  padding: 0.15rem 0.3rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-launch-tracking-page .plt-pre-spa-note-btn:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.product-launch-tracking-page .plt-pre-spa-note-empty {
  color: var(--color-text-muted, #94a3b8);
  font-style: italic;
}

.product-launch-tracking-page .plt-pre-spa-note-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.product-launch-tracking-page .plt-pre-spa-note-input {
  width: 100%;
  min-width: 14rem;
  font-size: 0.85rem;
}

.product-launch-tracking-page .plt-pre-spa-note-actions {
  display: flex;
  gap: 0.35rem;
}

.product-launch-tracking-page .plt-pre-spa-note-actions .btn {
  padding: 0.15rem 0.6rem;
  font-size: 0.8rem;
}

/* Campaign View (Launch Tracking tab) */
.campaign-view-page .campaign-view-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: #5f6368;
}

.campaign-view-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.campaign-status-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.campaign-status-dot--green,
.campaign-status--green .campaign-status-dot {
  background: #137333;
}

.campaign-status-dot--yellow,
.campaign-status--yellow .campaign-status-dot {
  background: #f9ab00;
}

.campaign-status-dot--red,
.campaign-status--red .campaign-status-dot {
  background: #c5221f;
}

.campaign-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.campaign-view-toolbar {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.campaign-view-sheet-link {
  text-decoration: none;
}

.campaign-view-unmatched {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #f9ab00;
  border-radius: 8px;
  background: #fffdf5;
  font-size: 0.875rem;
}

.campaign-view-unmatched summary {
  cursor: pointer;
  font-weight: 600;
}

.campaign-view-unmatched ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.campaign-view-import-result {
  margin: 0 0 1rem;
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  background: #e8f5e9;
  border: 1px solid #137333;
  font-size: 0.875rem;
}

.campaign-view-workbook-sync {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}

.campaign-view-workbook-sync label {
  flex: 1 1 16rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
}

.campaign-view-workbook-sync input {
  width: 100%;
}

.campaign-view-import-warning {
  margin: 0 0 1rem;
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  background: #fef7e0;
  border: 1px solid #f9ab00;
  font-size: 0.875rem;
}

.campaign-view-sheet-tabs {
  margin-bottom: 1.5rem;
}

.campaign-view-sheet-tabs-help {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: #5f6368;
}

.campaign-view-sheet-tabs-table td,
.campaign-view-sheet-tabs-table th {
  vertical-align: middle;
}

.campaign-view-sheet-tab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.campaign-view-form-actions {
  margin-top: 0.75rem;
}

.campaign-view-create-panel {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #f8f9fa;
}

.campaign-view-panel-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.campaign-view-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.campaign-view-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
}

.campaign-view-form input,
.campaign-view-form select,
.campaign-view-form textarea {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid #dadce0;
  border-radius: 4px;
}

.campaign-view-notes-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
}

.campaign-view-empty {
  color: #5f6368;
  padding: 1rem 0;
}

.campaign-cal {
  margin-top: 0.5rem;
}

.campaign-cal-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.campaign-cal-view-toggle {
  display: inline-flex;
  border: 1px solid #dadce0;
  border-radius: 6px;
  overflow: hidden;
}

.campaign-cal-view-toggle .btn {
  border: none;
  border-radius: 0;
  margin: 0;
}

.campaign-cal-view-toggle .btn + .btn {
  border-left: 1px solid #dadce0;
}

.campaign-cal--week .campaign-cal-cell {
  min-height: 12rem;
}

.campaign-cal--week .campaign-cal-events {
  max-height: none;
}

.campaign-cal-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.campaign-cal-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.campaign-cal-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  min-width: 10rem;
  text-align: center;
}

.campaign-cal-grid {
  border: 1px solid #dadce0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.campaign-cal-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.campaign-cal-row--head {
  background: #f8f9fa;
  border-bottom: 1px solid #dadce0;
}

.campaign-cal-head-cell {
  padding: 0.45rem 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  color: #5f6368;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.campaign-cal-row:not(.campaign-cal-row--head) {
  border-bottom: 1px solid #e8eaed;
}

.campaign-cal-row:not(.campaign-cal-row--head):last-child {
  border-bottom: none;
}

.campaign-cal-cell {
  min-height: 6.5rem;
  padding: 0.35rem;
  border-right: 1px solid #e8eaed;
  vertical-align: top;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.campaign-cal-cell:last-child {
  border-right: none;
}

.campaign-cal-cell--outside {
  background: #fafafa;
}

.campaign-cal-cell--outside .campaign-cal-day {
  color: #9aa0a6;
}

.campaign-cal-cell--today {
  background: #f6fbff;
  box-shadow: inset 0 0 0 2px var(--color-brand);
}

.campaign-cal-day {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #3c4043;
  line-height: 1.2;
}

.campaign-cal-events {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-height: 0;
}

.campaign-cal-event {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.2rem 0.35rem;
  border-radius: 4px;
  font-size: 0.6875rem;
  line-height: 1.25;
  text-decoration: none;
  color: #202124;
  border-left: 3px solid #9aa0a6;
  background: #f1f3f4;
  overflow: hidden;
}

.campaign-cal-event:hover {
  background: #e8eaed;
}

.campaign-cal-event--green {
  border-left-color: #137333;
  background: #e6f4ea;
}

.campaign-cal-event--yellow {
  border-left-color: #f9ab00;
  background: #fef7e0;
}

.campaign-cal-event--red {
  border-left-color: #c5221f;
  background: #fce8e6;
}

.campaign-cal-event-label {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.campaign-plan-wrap {
  overflow-x: auto;
  border: 1px solid #d9d9d9;
  background: #fff;
}

.campaign-plan-table {
  width: 100%;
  min-width: 56rem;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.8125rem;
}

.campaign-plan-table th,
.campaign-plan-table td {
  border: 1px solid #d9d9d9;
  vertical-align: top;
}

.campaign-plan-month {
  width: 9.5rem;
  padding: 0.65rem 0.75rem;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #e07a3a;
  background: #f4dcc4;
}

.campaign-plan-week {
  padding: 0.5rem 0.4rem 0.55rem;
  text-align: center;
  background: #f4dcc4;
  font-weight: 700;
  color: #3c4043;
}

.campaign-plan-week--current {
  box-shadow: inset 0 -3px 0 #e07a3a;
}

.campaign-plan-week-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.campaign-plan-week-range {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #5f6368;
}

.campaign-plan-row-label {
  padding: 0.7rem 0.75rem;
  text-align: left;
  font-weight: 700;
  color: #202124;
  background: #fff;
}

.campaign-plan-row--ly .campaign-plan-row-label,
.campaign-plan-row--metric .campaign-plan-row-label {
  font-weight: 600;
  font-style: italic;
  color: #3c4043;
}

.campaign-plan-row-meta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.6875rem;
  font-weight: 500;
  font-style: italic;
  color: #5f6368;
}

.campaign-plan-row--ly td,
.campaign-plan-row--metric td,
.campaign-plan-row--ly th,
.campaign-plan-row--metric th {
  background: #ececec;
}

.campaign-plan-cell {
  padding: 0.7rem 0.55rem;
  text-align: center;
  min-height: 4.5rem;
}

.campaign-plan-event {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem 0.25rem;
  text-decoration: none;
  color: #202124;
  border-left: 3px solid transparent;
}

.campaign-plan-event + .campaign-plan-event {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid #eee;
}

.campaign-plan-event:hover {
  background: #faf7f2;
}

.campaign-plan-event--green {
  border-left-color: #137333;
}

.campaign-plan-event--yellow {
  border-left-color: #f9ab00;
}

.campaign-plan-event--red {
  border-left-color: #c5221f;
}

.campaign-plan-event-title {
  font-weight: 700;
  line-height: 1.3;
}

.campaign-plan-event-note {
  font-style: italic;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #3c4043;
}

.campaign-view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
}

.campaign-card {
  display: block;
  padding: 1rem 1.1rem;
  border-radius: 8px;
  border: 1px solid #dadce0;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.campaign-card:hover {
  box-shadow: 0 1px 4px rgba(60, 64, 67, 0.2);
}

.campaign-card--green {
  border-left: 4px solid #137333;
}

.campaign-card--yellow {
  border-left: 4px solid #f9ab00;
}

.campaign-card--red {
  border-left: 4px solid #c5221f;
}

.campaign-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.campaign-card-dates {
  font-size: 0.8125rem;
  color: #5f6368;
  white-space: nowrap;
}

.campaign-card-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.campaign-card-channel {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: #5f6368;
}

.campaign-card-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
  font-size: 0.8125rem;
}

.campaign-card-stats dt {
  margin: 0;
  color: #5f6368;
}

.campaign-card-stats dd {
  margin: 0;
  font-weight: 600;
}

.campaign-detail-overlay .campaign-detail-dialog {
  max-width: min(960px, 96vw);
}

.campaign-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.campaign-detail-dates,
.campaign-detail-notes {
  margin: 0.25rem 0 0;
  color: #5f6368;
  font-size: 0.875rem;
}

.campaign-detail-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}

.campaign-detail-summary strong {
  margin-left: 0.35rem;
}

.campaign-detail-supply-note {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: #5f6368;
}

.campaign-detail-add-product {
  margin-bottom: 1rem;
}

.campaign-detail-add-product h3 {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
}

.campaign-view-add-product-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.campaign-product-search-results {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.8125rem;
  color: #5f6368;
}

.campaign-detail-table-wrap {
  --lock-budget: 50vh;
  overflow: auto;
  overflow: auto;
}

.campaign-detail-table .campaign-row--green {
  background: #f6fff8;
}

.campaign-detail-table .campaign-row--yellow {
  background: #fffdf5;
}

.campaign-detail-table .campaign-row--red {
  background: #fff8f7;
}

/* Carton handling-unit actions (carton labels + SAP ASN) on packing-list sections */
.packing-list-carton-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.5rem 0 0.75rem;
}
.packing-list-carton-actions .packing-list-asn-form {
  margin: 0;
  display: inline;
}

/* Pack → confirm final → ASN workflow strip, one per packing list (plan 20260918165028) */
.packing-list-workflow {
  list-style: none;
  margin: 0.5rem 0 0.75rem;
  padding: 0;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  background: #fff;
}
.packing-list-workflow__step {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0 0.6rem;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #e2e2e2;
}
.packing-list-workflow__step:last-child { border-bottom: 0; }
.packing-list-workflow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid #999;
  color: #555;
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.05rem;
}
.packing-list-workflow__step.is-current .packing-list-workflow__num { border-color: #222; background: #222; color: #fff; }
.packing-list-workflow__step.is-done .packing-list-workflow__num { border-color: #2b6b3f; background: #2b6b3f; color: #fff; }
.packing-list-workflow__step.is-next { color: #666; }
.packing-list-workflow__title { display: block; font-size: 0.95rem; }
.packing-list-workflow__hint { margin: 0.15rem 0 0.4rem; color: #666; font-size: 0.85rem; max-width: 60ch; }
.packing-list-workflow__done { margin: 0.15rem 0 0.4rem; color: #2b6b3f; font-size: 0.9em; }
.packing-list-workflow__form { display: inline; margin: 0; }
.packing-list-workflow .packing-list-carton-actions { margin: 0; }

/* Minimal OEM carton-actions panel (vendor shipment overlay) */
.oem-carton-panel { padding: 0.5rem 0; }
.oem-carton-panel__title { margin: 0 0 0.5rem; }
.oem-carton-panel__meta { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0 0 0.75rem; color: #333; }
.oem-carton-panel__summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.5rem 1.25rem; margin: 0 0 0.9rem; }
.oem-carton-panel__summary-row dt { color: #666; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; margin: 0; }
.oem-carton-panel__summary-row dd { margin: 0.1rem 0 0; color: #222; }
.oem-carton-panel__pl { border-top: 1px solid #e2e2e2; padding: 0.6rem 0; }
.oem-carton-panel__pl-head { display: flex; gap: 0.75rem; align-items: baseline; margin-bottom: 0.4rem; }
.oem-carton-panel__pl-meta { color: #666; font-size: 0.9em; margin: 0 0 0.35rem; }
.oem-carton-panel__pl-progress { color: #2b6b3f; font-size: 0.9em; margin: 0 0 0.5rem; }
.oem-carton-panel__pl-asn { margin: 0 0 0.5rem; }
.oem-carton-panel__pl-asn .oem-carton-panel__pl-progress { margin-bottom: 0.35rem; }
.oem-carton-panel__asn-matrix-header,
.oem-carton-panel__asn-matrix .shipment-po-asn-matrix__line {
  font-size: 0.9em;
  color: #2b6b3f;
}
.oem-carton-panel__asn-matrix {
  margin-bottom: 0;
}
.oem-carton-panel__count { color: #666; font-size: 0.9em; }
.oem-carton-panel__pending { color: #666; font-style: italic; margin: 0.2rem 0 0; }

/* OEM factory dates — the one editable block in the otherwise read-only OEM panel. */
.oem-factory-dates { border-top: 1px solid #e2e2e2; margin-top: 0.6rem; padding-top: 0.7rem; }
.oem-factory-dates__title { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; color: #444; margin: 0 0 0.2rem; }
.oem-factory-dates__title + .oem-factory-dates__hint { margin-top: 0; }
.oem-factory-dates__hint { color: #666; font-size: 0.9em; margin: 0 0 0.6rem; max-width: 60ch; }
.oem-factory-dates__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem 0.9rem; margin-bottom: 0.8rem; }
.oem-factory-dates__field { display: flex; flex-direction: column; gap: 0.2rem; }
.oem-factory-dates__field label { color: #444; font-size: 0.85rem; }
.oem-factory-dates__field input[type="date"] { padding: 0.3rem 0.4rem; border: 1px solid #ccc; border-radius: 3px; font: inherit; }
.oem-factory-dates__po { color: #666; font-size: 0.85em; margin-left: 0.35rem; }
.oem-factory-dates__empty { color: #666; font-style: italic; margin: 0 0 0.8rem; }
.oem-factory-dates__forwarder { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; align-items: baseline; margin-bottom: 0.8rem; color: #666; font-size: 0.9em; }
.oem-factory-dates__forwarder-label { text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.03em; }
.oem-factory-dates__save { align-self: flex-start; }

.wholesale-orders-filter-form { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; }
.wholesale-orders-filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.wholesale-orders-filter-row--secondary { align-items: flex-start; }
.wholesale-orders-phase-filters { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; border: 0; margin: 0; padding: 0; }
.wholesale-orders-phase-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; white-space: nowrap; }
.wholesale-orders-ship-window-filters { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.wholesale-orders-filter-label { font-size: 0.875rem; font-weight: 600; margin-right: 0.25rem; }
.wholesale-orders-date-input { width: auto; min-width: 9.5rem; }
.wholesale-order-ship-window { white-space: nowrap; font-size: 0.875rem; }
/* Use the shared inbound-table layout (table-layout: auto; width: max-content) so columns
   size to content and the table scrolls horizontally. A fixed/100% layout crammed all
   columns into the viewport and overflowed the nowrap Ship Window into the Phase column. */
.wholesale-orders-page .shipments-card .shipment-table th.wholesale-order-sold-to,
.wholesale-orders-page .shipments-card .shipment-table td.wholesale-order-sold-to {
  max-width: 16rem;
}
.wholesale-order-sold-to-cell {
  display: flex;
  align-items: baseline;
  gap: 0;
  width: 100%;
  min-width: 0;
}
.wholesale-order-sold-to-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wholesale-order-sold-to-code {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* --- PO-primary nested grid --- */
.wholesale-po-table th.wholesale-po-caret-col { width: 1.5rem; }
.wholesale-po-row { cursor: pointer; }
.wholesale-po-caret {
  color: var(--text-muted, #6b7280);
  font-size: 0.7rem;
  text-align: center;
  user-select: none;
}
.wholesale-po-number { font-weight: 600; white-space: nowrap; }
/* Child sales-order rows share the parent table grid so their columns line up with the PO row. */
.wholesale-po-child-head td {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  background: var(--surface-subtle, #f9fafb);
  border-top: 1px solid var(--border, #e5e7eb);
}
.wholesale-po-child-row td { background: var(--surface-subtle, #f9fafb); }
.wholesale-orders-page .shipments-card .shipment-table td.wholesale-po-child-so {
  padding-left: 1.5rem;
  border-left: 2px solid var(--border, #e5e7eb);
}

/* ── Single-style detail view (CatalogLive.Style) ─────────────────────────── */
.catalog-back-link { color: var(--color-text-muted); text-decoration: none; }
.catalog-back-link:hover { color: var(--color-text); text-decoration: underline; }

.style-detail-header {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 16px 24px; padding: 4px 0 18px; border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
}
.style-detail-headline { display: flex; flex-direction: column; gap: 4px; }
.style-detail-code {
  font-size: 13px; letter-spacing: .04em; color: var(--color-text-subtle); font-weight: 600;
}
.style-detail-name { font-size: 1.7rem; line-height: 1.15; margin: 0; color: var(--color-text); font-weight: 650; }
.style-detail-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: flex-start; }
.style-detail-meta-item { display: flex; flex-direction: column; gap: 2px; }
.style-detail-meta-label {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-subtle);
}
.style-detail-meta-value { font-size: 14px; color: var(--color-text); font-weight: 600; }

.style-detail-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; background: var(--color-border-light);
  border: 1px solid var(--color-border); margin-bottom: 22px;
}
.style-stat { background: var(--color-surface); padding: 14px 18px; display: flex; flex-direction: column; gap: 3px; }
.style-stat-num { font-size: 1.5rem; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; line-height: 1; }
.style-stat-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-subtle); }

/* ── Product record page (/pim/products/:id) ─────────────────────────────────
   Dedicated single-product view: breadcrumb, header card, detail body (the same
   tab component the /pim overlay hosts) plus a status rail. */
.product-record-topbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; margin: 4px 0 14px;
}
.product-record-topbar .product-record-breadcrumb { margin: 0; }
.product-record-pager { display: flex; align-items: center; gap: 6px; }
.product-record-pager-position { font-size: 0.8125rem; color: var(--color-text-subtle); margin-right: 4px; }
.product-record-pager-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface);
  color: var(--color-text-muted); text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.product-record-pager-btn:hover { background: var(--color-border-light); color: var(--color-text); }
.product-record-pager-btn--disabled { opacity: 0.4; pointer-events: none; }

.product-record-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 4px 0 14px; font-size: 0.875rem; color: var(--color-text-muted);
}
.product-record-breadcrumb-sep { color: var(--color-text-subtle); }
.product-record-breadcrumb-current { color: var(--color-text); font-weight: 500; }

.product-record-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  background: var(--color-surface); border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg); padding: 18px 22px; box-shadow: var(--shadow-md);
  margin-bottom: 18px;
}
.product-record-header-main { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.product-record-thumb {
  width: 72px; height: 72px; object-fit: cover; flex-shrink: 0;
  border-radius: var(--radius-md); border: 1px solid var(--color-border-light);
  background: var(--color-surface-muted);
}
.product-record-thumb--empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-subtle);
}
.product-record-headline { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.product-record-name {
  margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.25;
  letter-spacing: -0.01em; color: var(--color-text);
}
.product-record-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  font-size: 0.875rem; color: var(--color-text-muted);
}
.product-record-meta-sep { color: var(--color-border); }
.product-record-meta-subtle { color: var(--color-text-subtle); font-size: 0.8125rem; }
.product-record-style-link { color: var(--color-link); text-decoration: none; }
.product-record-style-link:hover { text-decoration: underline; }
.product-record-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-record-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.product-record-header-actions .btn { gap: 6px; }

.product-record-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
  border-radius: var(--radius-full); font-size: 11px; font-weight: 600;
  background: var(--color-surface-muted); color: var(--color-text-muted);
}
.product-record-pill-dot { width: 8px; height: 8px; border-radius: 50%; }
.product-record-pill--channels { background: var(--color-brand-muted); color: var(--color-brand); }
.product-record-pill--ready { background: #e1f5ee; color: #0f6e56; }
.product-record-pill--blocked { background: #faeeda; color: #633806; }

.product-record-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px; align-items: flex-start;
}
.product-record-main { min-width: 0; }

/* The detail body was authored for the ~1100px overlay, where one field per row read
   fine. On the record page, flow the field grids into columns so cards stay compact,
   and drop the storefront-photo card — the header thumb and the rail's storefront
   link already carry it. Scoped so the overlay hosts are untouched. */
.product-record-main .pim-field-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.product-record-main .pim-card--rothys-photo { display: none; }
.product-record-main .pim-ident-photo-layout--with-photo {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "identifiers";
}
.product-record-rail { display: flex; flex-direction: column; gap: 0; min-width: 0; }

.product-record-completeness-pct {
  font-size: 1.75rem; font-weight: 700; color: var(--color-text);
  font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 8px;
}
.product-record-completeness-bar {
  height: 6px; border-radius: var(--radius-full);
  background: var(--color-border-light); margin-bottom: 8px; overflow: hidden;
}
.product-record-completeness-fill { height: 100%; border-radius: var(--radius-full); }
.product-record-rail-hint { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.product-record-rail-heading-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.product-record-rail-heading-row .pim-card-title { flex: 1; }
.product-record-rail-link { font-size: 0.8125rem; color: var(--color-link); text-decoration: none; }
.product-record-rail-link:hover { text-decoration: underline; }

.product-record-channel-list,
.product-record-connected-list,
.product-record-activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.product-record-channel-row,
.product-record-connected-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.875rem; }
.product-record-channel-name { color: var(--color-text); min-width: 0; }
/* Channel rows link to the Channels tab (review + resolve blockers there). */
a.product-record-channel-row {
  text-decoration: none; border-radius: var(--radius-sm);
  margin: 0 -6px; padding: 2px 6px;
  transition: background var(--transition);
}
a.product-record-channel-row:hover { background: var(--color-border-light); text-decoration: none; }
.product-record-connected-label { color: var(--color-text-muted); }
.product-record-activity-row { display: flex; flex-direction: column; gap: 2px; font-size: 0.8125rem; }
.product-record-activity-what { color: var(--color-text); }
.product-record-activity-change { color: var(--color-text-muted); }
.product-record-activity-when { color: var(--color-text-subtle); font-size: 0.75rem; }

.catalog-page--product-record .flash--inline { margin-bottom: 12px; }

@media (max-width: 1100px) {
  .product-record-layout { grid-template-columns: minmax(0, 1fr); }
  .product-record-header { flex-direction: column; }
}

.catalog-section-title {
  font-size: 1.05rem; font-weight: 650; color: var(--color-text);
  margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px;
}

.style-attr-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px; background: var(--color-border-light);
  border: 1px solid var(--color-border); margin: 0;
}
.style-attr { background: var(--color-surface); padding: 11px 15px; display: flex; flex-direction: column; gap: 3px; margin: 0; }
.style-attr-label { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-subtle); margin: 0; }
.style-attr-value { font-size: 14px; color: var(--color-text); margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.style-attr-source {
  font-size: 10px; letter-spacing: .03em; color: var(--color-text-subtle);
  border: 1px solid var(--color-border); padding: 0 5px; border-radius: var(--radius-full); white-space: nowrap;
}

.style-lifecycle-pill {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px;
  border-radius: var(--radius-full); border: 1px solid transparent; white-space: nowrap;
}
.style-lifecycle-pill--live { background: #e8f0e8; color: #2f6b46; border-color: #cfe3d3; }
.style-lifecycle-pill--discontinued { background: #f4e9e6; color: #9a3b22; border-color: #e6d0c8; }
.style-lifecycle-pill--upcoming { background: #eaf0f6; color: #2f5a86; border-color: #d3e0ee; }
.style-lifecycle-pill--unknown { background: #f1f1ef; color: #6b6b6b; border-color: #e0e0dd; }

.catalog-style-colorways .col-product-thumb { width: 52px; }
.style-colorway-open { text-align: right; white-space: nowrap; }
.pim-view-style-link { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--color-accent); text-decoration: none; }
.pim-view-style-link:hover { text-decoration: underline; }

/* ── Style-grouped catalog grid ────────────────────────────────────────────── */
.catalog-style-group-row td.catalog-style-group-cell {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border-light);
  padding: 10px 12px;
}
.catalog-style-group-row--expanded td.catalog-style-group-cell {
  background: var(--color-accent-muted);
  border-bottom-color: var(--color-border);
}
.catalog-style-group-toggle {
  display: inline-flex; align-items: baseline; gap: 10px;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--color-text); font-family: inherit; font-size: 14px;
  text-align: left;
}
.catalog-style-group-toggle:hover .catalog-style-group-name { text-decoration: underline; }
.catalog-style-group-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.catalog-style-group-caret {
  display: inline-block; width: 12px; color: var(--color-text-muted);
  transition: transform 0.15s ease;
  transform: rotate(0deg); transform-origin: 40% 55%;
  font-size: 12px; line-height: 1;
}
.catalog-style-group-caret.is-open { transform: rotate(90deg); }
.catalog-style-group-code {
  font-weight: 700; letter-spacing: .02em; color: var(--color-text);
  min-width: 3.5ch;
}
.catalog-style-group-name { font-weight: 600; color: var(--color-text); }
.catalog-style-group-stats {
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: 14px; font-size: 12px; color: var(--color-text-muted);
}
.catalog-style-group-count { font-variant-numeric: tabular-nums; }
.catalog-style-group-pill {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 1px 8px; border-radius: var(--radius-full);
  border: 1px solid transparent;
}
.catalog-style-group-pill--live { background: #e8f0e8; color: #2f6b46; border-color: #cfe3d3; }
.catalog-style-group-pill--disc { background: #f1efe8; color: #6b6b6b; border-color: #e0dfd8; }
.catalog-style-group-open {
  font-size: 12px; color: var(--color-accent); text-decoration: none; margin-left: 4px;
}
.catalog-style-group-open:hover { text-decoration: underline; }

.catalog-product-row--nested td:first-child,
.catalog-product-row--nested td.col-star { padding-left: 26px; }

.catalog-linklike {
  background: none; border: 0; padding: 0; margin: 0;
  color: var(--color-accent); font: inherit; cursor: pointer;
}
.catalog-linklike:hover { text-decoration: underline; }
.catalog-pagination-actions-inline { margin-left: 12px; }

/* ── is_active manual flag (Akeneo-style enabled) ─────────────────────────── */
.catalog-chip-inactive {
  background: #f2ecec; color: #7a4535; border: 1px solid #e3d0c8;
  font-weight: 600; letter-spacing: .04em;
}
.pim-active-badge {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px;
  border-radius: var(--radius-full); border: 1px solid transparent;
}
.pim-active-badge--on  { background: #e8f0e8; color: #2f6b46; border-color: #cfe3d3; }
.pim-active-badge--off { background: #f4e9e6; color: #7a4535; border-color: #e6d0c8; }

.catalog-product-row--nested.catalog-product-row--inactive td {
  opacity: 0.6;
}

/* OEM purchase-order portal (vendor landing) */
.oem-portal { padding: 0.5rem 0 2rem; }
.oem-portal__header { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.oem-portal__header h1 { margin: 0; }
.oem-portal__subtitle { color: #555; margin: 0; flex-basis: 100%; }
.oem-portal__back { font-size: 0.9em; }
.oem-portal__empty { padding: 1.25rem; background: #f7f7f7; border-radius: 6px; color: #444; }
.oem-portal__toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin: 0.75rem 0; }
.oem-portal__scope { display: inline-flex; gap: 0.25rem; }
.oem-portal__clear-filters { font-size: 0.9em; white-space: nowrap; }
.oem-portal__row-count { margin: 0 0 0.5rem; color: #666; font-size: 0.9em; }
.oem-portal__scope-link { padding: 0.25rem 0.7rem; border: 1px solid #ccc; border-radius: 4px; color: #333; text-decoration: none; font-size: 0.9em; }
.oem-portal__scope-link.is-active { background: #1f2d3d; color: #fff; border-color: #1f2d3d; }
.oem-portal__section { margin-top: 1.5rem; }
.oem-portal__section h2 { margin-bottom: 0.5rem; }
.oem-portal__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.5rem 1.5rem; margin: 0 0 1rem; }
.oem-portal__facts dt { font-size: 0.8em; color: #777; }
.oem-portal__facts dd { margin: 0; font-weight: 600; }
.oem-portal__ack-badge { padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8em; font-weight: 600; }
.oem-portal__ack-badge--new { background: #eee; color: #555; }
.oem-portal__ack-badge--draft { background: #fff3cd; color: #7a5b00; }
.oem-portal__ack-badge--acknowledged { background: #d4edda; color: #1c6b32; }
.oem-portal__ack-badge--needs_reack { background: #fde8cd; color: #8a4b08; }
.oem-portal__ack-notice { padding: 0.75rem 1rem; background: #d4edda; color: #1c6b32; border-radius: 6px; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.oem-portal__ack-notice--in-approval { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.oem-portal__ack-notice--needs-reack { background: #fde8cd; border: 1px solid #f6b26b; color: #8a4b08; }
.oem-portal__ack-oa { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.25rem; max-width: 360px; }
.oem-portal__ack-oa label { font-size: 0.85em; color: #555; }
.oem-portal__ack-actions { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* OEM portal — single line table: bulk toolbar, selection, late flag */
.oem-portal__bulk { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0; padding: 0.6rem 0.75rem; background: #f5f7fa; border-radius: 6px; }
.oem-portal__bulk-label { font-size: 0.9em; color: #444; }
/* Confirmed XF more than a year off its baseline: same palette as the in-approval notice. */
.oem-portal__xf-jump--active { margin: -0.25rem 0 0.75rem; padding: 0.6rem 0.75rem; background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; border-radius: 6px; font-size: 0.9em; }
/* Beside the submit buttons: its own full-width row above them. */
.oem-portal__ack-actions .oem-portal__xf-jump { flex-basis: 100%; }
/* Empty, it would still take a flex row. Safe to hide: this copy is not the live region. */
.oem-portal__ack-actions .oem-portal__xf-jump:not(.oem-portal__xf-jump--active) { display: none; }
.oem-portal__ack-actions .oem-portal__xf-jump--active { margin: 0; }
.oem-portal__bulk-label small { color: #888; font-weight: 400; }
.oem-portal__select-col { width: 2rem; text-align: center; }
.oem-portal__lines input[type="number"] { width: 6rem; }
.oem-portal__lines input[type="date"] { width: 9rem; }
.oem-portal__late-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.8em; font-weight: 600; background: #f8d7da; color: #a12027; }
.oem-portal__line--late td { background: #fdf3f4; }

/* OEM portal — post-acknowledgment drift (needs re-acknowledgment) */
.oem-portal__drift { background: #fff6e8; }
.oem-portal__drift-was { display: block; font-size: 0.8em; color: #8a4b08; }
.oem-portal__drift-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.8em; font-weight: 600; background: #fde8cd; color: #8a4b08; }

/* OEM portal — fully shipped lock (OAA-47) + inline split-sum error */
.oem-portal__shipped-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.8em; font-weight: 600; background: #e2e8f0; color: #334155; }
.oem-portal__ack-notice--fully-shipped { background: #e2e8f0; border: 1px solid #cbd5e1; color: #334155; }
.oem-portal__split-error { background: #f8d7da; color: #a12027; font-size: 0.85em; padding: 0.35rem 0.75rem; }

/* ---------------------------------------------------------------------------
   Delivery Plan (single-style, month-by-month released POs)
   --------------------------------------------------------------------------- */
.delivery-plan-total-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}

.delivery-plan-total-badge-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #b0472f;
}

.delivery-plan-total-badge-label {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.delivery-plan-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
  margin: 0.75rem 0 1rem;
}

.delivery-plan-style-picker,
.delivery-plan-range {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  position: relative;
}

.delivery-plan-controls label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.delivery-plan-controls input {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.85rem;
  background: var(--color-surface);
  color: var(--color-text);
}

.delivery-plan-style-results {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  margin: 0.2rem 0 0;
  padding: 0.25rem;
  list-style: none;
  min-width: 18rem;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.delivery-plan-style-results li {
  margin: 0;
}

.delivery-plan-style-results .table-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
}

.delivery-plan-style-results .table-link:hover {
  background: var(--color-accent-muted);
}

.delivery-plan-empty {
  padding: 1.5rem 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.delivery-plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.delivery-plan-table th,
.delivery-plan-table td {
  border: 1px solid var(--color-border-light);
  padding: 0.4rem 0.6rem;
  vertical-align: top;
}

.delivery-plan-table thead th {
  background: var(--color-primary);
  color: #fff;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

.delivery-plan-num-col {
  text-align: right;
  white-space: nowrap;
}

.delivery-plan-section-row th {
  background: #2f4a6b;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.delivery-plan-model-col {
  font-weight: 600;
  color: var(--color-text);
}

.delivery-plan-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05rem;
}

.delivery-plan-cell-qty {
  font-weight: 600;
  color: var(--color-text);
}

.delivery-plan-cell-empty {
  color: var(--color-text-subtle);
}

.delivery-plan-cell-xf {
  font-size: 0.68rem;
  color: var(--color-text-subtle);
}

.delivery-plan-cell-received {
  font-size: 0.68rem;
  color: var(--color-text-muted);
}

.delivery-plan-cell-received--complete {
  color: var(--color-accent);
  font-weight: 600;
}

.delivery-plan-row-total {
  font-weight: 700;
}

.delivery-plan-subtotal-row th,
.delivery-plan-subtotal-row td {
  background: var(--color-accent-muted);
  font-weight: 700;
  color: var(--color-primary);
}

.delivery-plan-grand-total-row th,
.delivery-plan-grand-total-row td {
  background: #b0472f;
  color: #fff;
  font-weight: 700;
}

.plt-delivery-plan-link {
  margin-left: 0.35rem;
  text-decoration: none;
  font-size: 0.85rem;
  opacity: 0.7;
}

.plt-delivery-plan-link:hover {
  opacity: 1;
}

/* Unattributed footwear dashboard */
.unattributed-page {
  padding: 1rem 1.5rem;
}

.unattributed-header {
  margin-bottom: 1rem;
}

.unattributed-header h1 {
  margin: 0 0 0.25rem 0;
  font-size: 1.4rem;
}

.unattributed-subtitle {
  color: var(--color-text-subtle);
  font-size: 0.85rem;
  margin: 0;
  max-width: 60ch;
}

.unattributed-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.unattributed-summary-card {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 120ms;
}

.unattributed-summary-card:hover {
  border-color: var(--color-primary);
}

.unattributed-summary-card--active {
  border-color: var(--color-primary);
  background: var(--color-accent-muted);
}

.unattributed-summary-card--total {
  cursor: default;
  background: var(--color-surface-alt);
  border-style: dashed;
}

.unattributed-summary-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}

.unattributed-summary-card__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem;
  font-size: 0.9rem;
}

.unattributed-summary-card__units {
  font-weight: 700;
  font-size: 1rem;
}

.unattributed-summary-card__dot {
  color: var(--color-text-muted);
}

.unattributed-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.unattributed-search {
  display: flex;
  gap: 0.35rem;
}

.unattributed-search input {
  min-width: 300px;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
}

.unattributed-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
}

.unattributed-clear {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
}

.unattributed-clear:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.unattributed-reconcile {
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--color-primary);
  color: var(--color-primary-text, #fff);
  border: 1px solid var(--color-primary);
  border-radius: 6px;
  cursor: pointer;
  margin-left: auto;
}

.unattributed-reconcile:hover:not(:disabled) {
  filter: brightness(0.95);
}

.unattributed-reconcile:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.unattributed-table-wrap {
  /* No overflow here: sideways scrolling belongs to the page so the header
     can pin to the viewport. See the locked-header block. */
}

.unattributed-table {
  width: 100%;
  font-size: 0.85rem;
}

.unattributed-table th,
.unattributed-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.unattributed-table th {
  font-weight: 600;
  color: var(--color-text-subtle);
}

.unattributed-cause-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.unattributed-cause-pill {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--color-surface-alt);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  cursor: help;
}

.unattributed-cause-pill--no_variant_link { background: #fef3c7; border-color: #f59e0b; color: #78350f; }
.unattributed-cause-pill--nil_po_number { background: #dbeafe; border-color: #3b82f6; color: #1e3a8a; }
.unattributed-cause-pill--sap_po_not_synced { background: #ede9fe; border-color: #8b5cf6; color: #4c1d95; }
.unattributed-cause-pill--no_matching_sap_line { background: #fce7f3; border-color: #ec4899; color: #831843; }
.unattributed-cause-pill--sizes_without_variants { background: #fee2e2; border-color: #ef4444; color: #7f1d1d; }
.unattributed-cause-pill--unresolved { background: #e5e7eb; border-color: #6b7280; color: #1f2937; }

.unattributed-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.unattributed-size-chip {
  display: inline-block;
  padding: 1px 5px;
  font-size: 0.72rem;
  background: var(--color-surface-alt);
  border-radius: 3px;
}

.unattributed-po__collective {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.unattributed-item__name {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.unattributed-qty {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.unattributed-phase {
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.unattributed-empty {
  padding: 2rem;
  text-align: center;
  color: var(--color-text-subtle);
}

/* Launch Control (v10 mockup) */
.launch-control-page {
  padding: 1rem 1.5rem;
  max-width: 1600px;
}

.launch-control-v10-header {
  margin-bottom: 1rem;
}

.launch-control-v10-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.launch-control-v10-title-row h1 {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
}

.launch-control-badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  background: var(--color-surface);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.launch-control-subtitle {
  color: var(--color-text-subtle);
  font-size: 0.85rem;
  margin: 0 0 0.35rem 0;
  max-width: 78ch;
}

.launch-control-meta-line {
  color: var(--color-text-subtle);
  font-size: 0.78rem;
  margin: 0;
}

.launch-control-meta-line strong {
  color: var(--color-text);
}

.launch-control-meta-dot {
  margin: 0 0.5rem;
  color: var(--color-text-muted);
}

/* Config shell (calendar fields + watch lists) */
.launch-control-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}

.launch-control-shell-heading {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.launch-control-shell-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

.launch-control-shell-grid label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text);
}

.launch-control-shell-caption {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-style: italic;
}

.launch-control-watchlist-card {
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-alt);
}

.launch-control-watchlist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

.launch-control-watchlist-header label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.launch-control-auto-badge {
  display: inline-block;
  padding: 1px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 4px;
  background: #dbeafe;
  color: #1e3a8a;
  letter-spacing: 0.04em;
}

/* Board tabs */
.launch-control-boards {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-border);
}

.launch-control-board-tab {
  padding: 0.55rem 1rem 0.6rem;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-text-subtle);
  margin-bottom: -1px;
}

.launch-control-board-tab:hover { color: var(--color-text); }

.launch-control-board-tab--active {
  color: var(--color-primary);
  font-weight: 600;
  background: var(--color-surface);
  border-color: var(--color-border);
  border-bottom-color: var(--color-surface);
}

/* Board section */
.launch-control-board {
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: var(--color-surface);
  padding: 0.75rem 1rem;
  overflow: hidden;
}

.launch-control-board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface-alt);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  font-size: 0.78rem;
}

.launch-control-board-caption {
  color: var(--color-text-subtle);
  margin-left: 0.3rem;
}

.launch-control-only-flags {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--color-text-subtle);
}

[data-row-filter-row].is-filtered-out {
  display: none !important;
}

/* Table */
.launch-control-table-wrap {
  /* No overflow here: sideways scrolling belongs to the page so the header
     can pin to the viewport. See the locked-header block. */
}

.launch-control-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.launch-control-table thead th {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: bottom;
  white-space: nowrap;
}

.launch-control-th-sort {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1.1;
}

.launch-control-th-sort:hover { color: var(--color-primary); }

.launch-control-th-sort--active { color: var(--color-primary); }

.launch-control-th-arrow {
  font-size: 0.6rem;
  color: var(--color-text-muted);
}

.launch-control-th-sort--active .launch-control-th-arrow {
  color: var(--color-primary);
}

.launch-control-col-status { text-align: center; width: 5.5rem; }
.launch-control-col-launch { width: 5rem; }
.launch-control-col-qty { width: 6.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.launch-control-col-upcoming { min-width: 12rem; }
.launch-control-col-filled { width: 12rem; }
.launch-control-col-product { min-width: 18rem; }

.launch-control-table tbody td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.launch-control-row--parent { background: var(--color-surface); }

.launch-control-row--child {
  background: var(--color-surface-alt);
  font-size: 0.82rem;
}

.launch-control-child-indent {
  padding-left: 2.5rem !important;
}

.launch-control-po-indent {
  padding-left: 4rem !important;
}

.launch-control-shipment-indent {
  padding-left: 5.5rem !important;
}

.launch-control-expand--nested {
  align-items: baseline;
}

/* PO row */
.launch-control-row--po {
  background: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);
  font-size: 0.8rem;
}

.launch-control-po-marker,
.launch-control-shipment-marker {
  color: var(--color-text-muted);
  margin-right: 0.35rem;
}

.launch-control-po-label {
  font-weight: 600;
  color: var(--color-text);
}

.launch-control-po-collective,
.launch-control-po-meta {
  color: var(--color-text-subtle);
  margin-left: 0.35rem;
  font-size: 0.75rem;
}

.launch-control-po-status {
  font-size: 0.72rem;
  color: var(--color-text-subtle);
}

/* Shipment row */
.launch-control-row--shipment {
  background: var(--color-surface);
  font-size: 0.78rem;
}

.launch-control-shipment-tracking {
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.launch-control-shipment-meta {
  color: var(--color-text-subtle);
  margin-left: 0.35rem;
  font-size: 0.72rem;
  text-transform: lowercase;
}

.launch-control-child-marker {
  color: var(--color-text-muted);
  margin-right: 0.35rem;
}

.launch-control-po-empty {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-style: italic;
}

.launch-control-cumulative {
  display: block;
  margin-top: 0.15rem;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.launch-control-child-name {
  font-weight: 600;
  color: var(--color-text);
}

.launch-control-child-meta {
  color: var(--color-text-muted);
  margin-left: 0.5rem;
  font-size: 0.75rem;
}

.launch-control-filled-pct {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid var(--color-border);
}

.launch-control-filled-pct--ready { background: #dcfce7; color: #14532d; border-color: #86efac; }
.launch-control-filled-pct--nearly { background: #dcfce7; color: #14532d; border-color: #86efac; }
.launch-control-filled-pct--partial { background: #fef3c7; color: #78350f; border-color: #fbbf24; }
.launch-control-filled-pct--early { background: #fee2e2; color: #7f1d1d; border-color: #fca5a5; }

/* Product name / expand button */
.launch-control-expand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.launch-control-caret {
  display: inline-block;
  transition: transform 120ms;
  color: var(--color-text-subtle);
  font-size: 0.8rem;
}

.launch-control-caret--open {
  transform: rotate(90deg);
}

.launch-control-product-name {
  font-weight: 600;
  color: var(--color-text);
}

.launch-control-product-meta {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

/* Status dot */
.launch-control-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
}

.launch-control-dot--red { background: #ef4444; }
.launch-control-dot--yellow { background: #f59e0b; }
.launch-control-dot--green { background: #22c55e; }
.launch-control-dot--muted { background: #d1d5db; }

.launch-control-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--color-text-subtle);
}

/* PLT info popovers — lift th overflow:hidden so the tip button and its focus ring show. */
.plt-th-with-tip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
}

.plt-preorder-backorder-page .plt-dashboard-table th:has(.plt-info-tip),
.product-launch-tracking-page .plt-dashboard-table th:has(.plt-info-tip),
.product-launch-tracking-page .plt-shipment-schedule-table th:has(.plt-info-tip) {
  overflow: visible;
}

.plt-info-tip {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  vertical-align: middle;
}

.plt-info-tip__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border: 1px solid #64748b;
  border-radius: 50%;
  background: #f8fafc;
  color: #334155;
  font-size: 0.7rem;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  cursor: help;
}

.plt-info-tip__btn:hover,
.plt-info-tip__btn:focus-visible {
  background: #e2e8f0;
  border-color: #1e293b;
  color: #0f172a;
  outline: 2px solid #94a3b8;
  outline-offset: 1px;
}

.plt-info-tip__glyph {
  display: block;
  transform: translateY(-0.5px);
}

.plt-info-tip__panel {
  box-sizing: border-box;
  width: max-content;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 0.7rem 0.85rem;
  border: 1px solid #1e293b;
  border-radius: 6px;
  background: #0f172a;
  color: #f8fafc;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.4);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: left;
  /* Headers stay uppercase; popover copy is sentence case in locale. */
  text-transform: none;
}

.plt-info-tip__heading {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 650;
  color: #e2e8f0;
}

.plt-info-tip__body {
  display: block;
}

@supports (anchor-name: --plt-tip) {
  /* Prefer below-start; flip inline (then block) when the panel would leave the viewport. */
  @position-try --plt-tip-flip-inline {
    top: calc(anchor(bottom) + 0.4rem);
    bottom: auto;
    left: auto;
    right: anchor(right);
  }

  @position-try --plt-tip-flip-block {
    top: auto;
    bottom: calc(anchor(top) + 0.4rem);
    left: anchor(left);
    right: auto;
  }

  @position-try --plt-tip-flip-both {
    top: auto;
    bottom: calc(anchor(top) + 0.4rem);
    left: auto;
    right: anchor(right);
  }

  @position-try --plt-tip-flip-to-start {
    top: calc(anchor(bottom) + 0.4rem);
    bottom: auto;
    left: anchor(left);
    right: auto;
  }

  .plt-info-tip__panel:popover-open {
    position: fixed;
    inset: auto;
    margin: 0;
    top: calc(anchor(bottom) + 0.4rem);
    left: anchor(left);
    position-try-fallbacks: --plt-tip-flip-inline, --plt-tip-flip-block, --plt-tip-flip-both;
  }

  .plt-info-tip--end .plt-info-tip__panel:popover-open {
    left: auto;
    right: anchor(right);
    position-try-fallbacks: --plt-tip-flip-to-start, --plt-tip-flip-both, --plt-tip-flip-block;
  }
}

/* Preorder/Backorder toolbar: the client-facets component groups its trigger,
   menu, and popover panels; display:contents lets the "+ Add filter" button sit
   directly in the toolbar flex row (popover panels are top-layer/fixed). */
.pb-client-facets {
  display: contents;
}

/* Spreadsheet-style column hide/expand controls (ClientColumnToggle hook).
   The "−" hide button appears on header hover/focus; the "⋯" collapsed marker
   is revealed only on hidden columns via the hook's generated per-column rules
   (id-scoped, so they outrank these static ones). */
th[data-col] {
  position: relative;
}

.pb-col-hide {
  display: none;
  position: absolute;
  top: 1px;
  right: 1px;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
  color: #475569;
  font-size: 0.72rem;
  line-height: 1.1;
  cursor: pointer;
}

th[data-col]:hover .pb-col-hide,
th[data-col]:focus-within .pb-col-hide {
  display: inline-flex;
}

.pb-col-hide:hover,
.pb-col-hide:focus-visible {
  background: #e2e8f0;
  color: #0f172a;
}

.pb-col-expand {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.05rem 0.15rem;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.72rem;
  line-height: 1.1;
  cursor: pointer;
}

.pb-col-expand:hover,
.pb-col-expand:focus-visible {
  background: #e2e8f0;
  color: #0f172a;
}

/* A column's filter funnel (DataTable.col_filter). Inactive: an outline that appears on header
   hover/focus, its space kept so the header does not jump. Active: filled brand blue and always
   shown — the shape changes as well as the colour. The 24px box is the hit area; the glyph is
   drawn smaller inside it. */
.col-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.375rem 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  opacity: 0;
  vertical-align: middle;
}

th:hover .col-filter,
th:focus-within .col-filter,
.col-filter--active {
  opacity: 1;
}

/* No hover on touch screens: an invisible button that still takes taps would be a trap. */
@media (hover: none) {
  .col-filter {
    opacity: 1;
  }
}

.col-filter:hover,
.col-filter:focus-visible {
  background: #e2e8f0;
  color: #0f172a;
}

.col-filter__icon {
  width: 0.8rem;
  height: 0.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.col-filter--active,
.col-filter--active:hover,
.col-filter--active:focus-visible {
  color: var(--color-brand);
}

.col-filter--active .col-filter__icon {
  fill: currentColor;
}

/* A filtered column the user has collapsed keeps the signal on its "⋯" marker. */
th[data-filtered] .pb-col-expand {
  border-color: var(--color-brand);
  background: var(--color-brand-muted);
  color: var(--color-brand);
  font-weight: 700;
}
/* ── Toolio PO inbound (dashboard + upload) ────────────────────────────── */

.toolio-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.toolio-chip {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid #e0e0dd;
  border-radius: 999px;
  background: #f7f7f5;
  font-size: 0.85em;
}

.toolio-chip--total { font-weight: 600; }
.toolio-chip--changed { background: #fef3c7; border-color: #f59e0b; color: #78350f; }

.toolio-status-pill {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.85em;
}

.toolio-status-pill--issued { background: #e8f0e8; color: #2f6b46; border-color: #cfe3d3; }
.toolio-status-pill--saved { background: #eaf0f6; color: #2f5a86; border-color: #d3e0ee; }
.toolio-status-pill--other { background: #f1f1ef; color: #6b6b6b; border-color: #e0e0dd; }
.toolio-retired-pill { margin-left: 0.35rem; background: #f6e9e7; color: #8a3b2e; border-color: #ead2cd; }

.toolio-units-flag {
  background: #fef3c7;
  color: #78350f;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.toolio-history-row > td { background: #fafaf8; }
.toolio-history-table { margin: 8px 0; }
.toolio-lines-table { margin: 8px 0 16px; }
.toolio-lines-table .table-link { margin-right: 6px; }

.toolio-import-result {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid #cfe3d3;
  border-radius: 6px;
  background: #e8f0e8;
}

.toolio-po-commit { margin-top: 12px; }

/* ── Wholesale customer master ─────────────────────────────────────────────
   Mirrors the Partners screen of the "Wholesale Demand Pipeline" design: a
   header card sitting above a separate table card whose rows run flush to the
   rounded edge, the pair capped at 1180px so a three-column table does not
   stretch across a wide viewport. Deliberately not `.shipments-card` — that
   variant is tuned for wide scrolling tables (`:has(.table-wrap)` switches it
   to `width: max-content` and paints the table `#f8fafc` edge to edge), which
   is the opposite of what this screen wants. Colours come from the shared
   tokens; the design was drawn from the same palette. */
.wholesale-customers-shell {
  max-width: 1180px;
  padding-bottom: 1.5rem;
}

.wholesale-customers-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

.wholesale-customers-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.wholesale-customers-heading {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.wholesale-customers-heading h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.wholesale-customers-meta {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.wholesale-customers-note {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.wholesale-customers-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Wide once every design column is present, so the table scrolls inside its
   own card rather than pushing the page sideways. `overflow-x` (not the
   shorthand) keeps the vertical axis visible so a row's sync tooltip can
   escape the box. */
.wholesale-customers-scroll {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: var(--radius-lg);
}

/* The card cannot clip its own corners (that would cut the tooltip off), so
   the header cells round themselves. */
.wholesale-customers-card thead th:first-child {
  border-top-left-radius: var(--radius-lg);
}

.wholesale-customers-card thead th:last-child {
  border-top-right-radius: var(--radius-lg);
}

.wholesale-customers-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

/* Same header/hover wash the shipment tables use. */
.wholesale-customers-card thead tr {
  background: #f8fafc;
}

.wholesale-customers-card th {
  padding: 0.65rem 1rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border-light);
}

.wholesale-customers-card td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

.wholesale-customers-card tbody tr:last-child td {
  border-bottom: none;
}

.wholesale-customers-card tbody tr:hover {
  background: #f8fafc;
}

.wholesale-customers-name {
  font-weight: 500;
  color: var(--color-brand);
}

.wholesale-customers-name:hover {
  color: var(--color-brand-hover);
}

.wholesale-customers-number {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* The sync marker is a hover affordance, so it stays quiet until the row is
   hovered — the timestamp itself lives in the tooltip. */
.wholesale-customers-sync-col {
  width: 3rem;
  text-align: right;
}

.wholesale-customers-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Columns the customer master has no source for yet. */
.wholesale-customers-blank {
  color: var(--color-text-subtle);
}

/* `PanoramaWeb.Wholesale.Components` — see that module for why this is a CSS tooltip and
   not the browser's `title`. */
.sync-marker {
  position: relative;
  display: inline-flex;
  color: #a7b4c2;
}

.sync-marker-tip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.4rem);
  z-index: 5;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

.sync-marker:hover .sync-marker-tip,
.sync-marker:focus-visible .sync-marker-tip {
  opacity: 1;
  visibility: visible;
}

/* Who is on a wholesale page (`presence/1`): a pill trigger stacking initials, opening a panel of
   everyone here. Opening is a class toggle, as the actions menu's is, with the same full-viewport
   overlay catching the outside click. The panel is capped to the viewport, so a header that wraps
   the trigger to the left edge cannot push it off screen, and a long list scrolls. */
.wholesale-presence {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: center;
}

/* Where a header wraps, the presence stays on the right, under the edge its panel opens from. */
.line-form-header-title .wholesale-presence,
.wholesale-customers-header > .wholesale-presence,
.wholesale-customer-header-aside {
  margin-left: auto;
}

.wholesale-presence__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.15rem 0.5rem 0.15rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.wholesale-presence__trigger:hover,
.wholesale-presence.is-open .wholesale-presence__trigger {
  border-color: #c8d6e5;
  background: #eef2f7;
}

.wholesale-presence__stack {
  display: inline-flex;
  align-items: center;
}

.wholesale-presence__avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
}

.wholesale-presence__stack .wholesale-presence__avatar {
  width: 1.55rem;
  height: 1.55rem;
  border: 2px solid var(--color-surface);
  font-size: 0.625rem;
}

.wholesale-presence__stack .wholesale-presence__avatar + .wholesale-presence__avatar {
  margin-left: -0.45rem;
}

.wholesale-presence__avatar--tint-0 { background: #1e3a5f; }
.wholesale-presence__avatar--tint-1 { background: #2f6db0; }
.wholesale-presence__avatar--tint-2 { background: #4a6b4a; }
.wholesale-presence__avatar--tint-3 { background: #4b6076; }
.wholesale-presence__avatar--tint-4 { background: #7a5c9e; }

.wholesale-presence__more {
  font-size: 0.75rem;
  color: #607285;
  white-space: nowrap;
}

.wholesale-presence__count {
  font-size: 0.8125rem;
  color: #4b6076;
  white-space: nowrap;
}

.wholesale-presence__overlay {
  position: fixed;
  inset: 0;
  z-index: 59;
  display: none;
}

.wholesale-presence__panel {
  position: absolute;
  top: 2.1rem;
  right: 0;
  z-index: 60;
  display: none;
  width: 20rem;
  max-width: calc(100vw - 2rem);
  max-height: 24rem;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  text-align: left;
}

.wholesale-presence.is-open .wholesale-presence__overlay,
.wholesale-presence.is-open .wholesale-presence__panel {
  display: block;
}

.wholesale-presence__heading {
  margin: 0;
  padding: 0.7rem 0.9rem 0.55rem;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
}

.wholesale-presence__people {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wholesale-presence__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid #f8fafc;
}

.wholesale-presence__who {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.wholesale-presence__name {
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The pages a person has open: this one as plain text, the rest as links. */
.wholesale-presence__pages {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.35rem;
  font-size: 0.75rem;
  color: #607285;
}

.wholesale-presence__elsewhere {
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
}

.wholesale-presence__elsewhere-heading {
  margin: 0;
  padding: 0.5rem 0.9rem 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

.wholesale-customers-card tbody tr:hover .sync-marker {
  color: var(--color-text-muted);
}

/* `PanoramaWeb.Wholesale.Components.loader/1`: stands where the content will be while it is read.
   It fades in after a beat, so a read that lands quickly never flashes a spinner. */
.wholesale-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 14rem;
  padding: 2.75rem 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-subtle);
  animation: wholesale-loader-in 0.15s ease-in 0.2s both;
}

.wholesale-loader__spinner {
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--color-border-light);
  border-top-color: var(--color-text-muted);
  border-radius: 50%;
  animation: catalog-inline-spin 0.65s linear infinite;
}

.wholesale-loader--failed {
  color: var(--color-danger-text, #8a1c1c);
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .wholesale-loader__spinner {
    animation-duration: 2s;
  }
}

@keyframes wholesale-loader-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.wholesale-customers-empty {
  margin: 0;
  padding: 2.75rem 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-subtle);
}

.wholesale-customer-header-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

/* The aside stacks, so the buttons need their own row to sit side by side under the sync stamp. */
.wholesale-customer-header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.wholesale-customer-section {
  padding: 1.25rem 1.5rem 1.4rem;
  background: var(--color-surface);
  border: 1px solid #e9edf2;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.wholesale-customer-section h2 {
  margin: 0 0 0.15rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.wholesale-customer-section > p {
  margin: 0 0 1.1rem;
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

.wholesale-customer-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  margin: 0;
}

.wholesale-customer-fields dt {
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.wholesale-customer-fields dd {
  margin: 0;
  font-size: 0.9375rem;
}

@media (max-width: 40rem) {
  .wholesale-customer-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The customer's discount rules: one row per rule, then the form that adds one. */
.wholesale-customer-section + .wholesale-customer-section {
  margin-top: 1rem;
}

.wholesale-discounts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  padding: 0;
  list-style: none;
}

.wholesale-discount {
  display: grid;
  grid-template-columns: 6rem 4.5rem minmax(0, 1fr) auto 2rem;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #e9edf2;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
}

.wholesale-discount-kind {
  color: var(--color-text-subtle);
}

.wholesale-discount-percent {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.wholesale-discount-remove {
  border: none;
  background: none;
  color: var(--color-text-subtle);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.wholesale-discount-remove:hover {
  color: var(--color-text);
}

.wholesale-discounts-empty {
  margin-bottom: 0.85rem;
  padding: 0.9rem 1rem;
  background: #f8fafc;
  border: 1px dashed #d7dee7;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
}

/* The customer page's Pricing section: the waterfall a line's price comes down, top down — a
   section per step on a rail, each with a header naming the step's rule and who owns it, and that
   step's prices beneath. */
.wholesale-pricing-stack {
  position: relative;
  margin: 1rem 0 0;
  padding: 0 0 0 2.25rem;
  list-style: none;
  counter-reset: pricing-step;
}

/* The rail runs from each step's number down to the next one's, so it ends at the last step. */
.wholesale-pricing-section:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(-1.375rem - 1px);
  top: 2.3rem;
  bottom: -1.3rem;
  border-left: 2px dashed var(--color-border);
}

.wholesale-pricing-section {
  position: relative;
  counter-increment: pricing-step;
  margin-bottom: 0.75rem;
  border: 1px solid #e9edf2;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.wholesale-pricing-section::before {
  content: counter(pricing-step);
  position: absolute;
  left: -2.25rem;
  top: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: #b9c3cf;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
}

.wholesale-pricing-section--sales_order::before {
  background: var(--color-brand);
}

.wholesale-pricing-section--material::before,
.wholesale-pricing-section--style::before {
  background: #1d5f8a;
}

.wholesale-pricing-section--customer::before {
  background: var(--color-accent);
}

/* A step's header: a light tint of the step's colour and the step's name in full-strength text, so
   each step reads as a heading above its prices. */
.wholesale-pricing-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-surface-muted);
}

.wholesale-pricing-section-head:only-child {
  border-radius: var(--radius-md);
}

.wholesale-pricing-section-head h3 {
  margin: 0;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
}

.wholesale-pricing-section--sales_order .wholesale-pricing-section-head {
  background: var(--color-brand-muted);
}

.wholesale-pricing-section--material .wholesale-pricing-section-head,
.wholesale-pricing-section--style .wholesale-pricing-section-head {
  background: #e9f1f7;
}

.wholesale-pricing-section--customer .wholesale-pricing-section-head {
  background: var(--color-accent-muted);
}

.wholesale-pricing-section-rule {
  color: var(--color-text-subtle);
  font-size: 0.8125rem;
}

.wholesale-pricing-section-body {
  padding: 0.6rem 0.9rem 0.9rem;
  border-top: 1px solid #e9edf2;
}

.wholesale-pricing-section-body--quiet {
  padding-top: 0.5rem;
  padding-bottom: 0.6rem;
  color: var(--color-text-subtle);
  font-size: 0.8125rem;
}

/* SAP's price tables run the full width of their step, edge to edge, square-cornered under the
   header. */
.wholesale-pricing-section-body--table {
  padding: 0;
}

.wholesale-pricing-section-body--table > .wholesale-pricing-table-wrap {
  border: 0;
  border-radius: 0;
}

.wholesale-pricing-section-body--table > .wholesale-discounts-empty {
  margin: 0.6rem 0.9rem 0.9rem;
}

.wholesale-pricing-lock {
  margin-left: 0.35rem;
  padding: 0 0.4rem;
  border-radius: var(--radius-full);
  background: #e3eef6;
  color: #1d5f8a;
  font-size: 0.6875rem;
  font-weight: 600;
  vertical-align: 2px;
}

.wholesale-pricing-lock--panorama {
  background: var(--color-accent-muted);
  color: var(--color-accent);
}

.wholesale-pricing-lock--centric {
  background: var(--color-surface-muted);
  color: var(--color-text-subtle);
}

.wholesale-pricing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wholesale-pricing-head h2 {
  margin: 0;
}

.wholesale-pricing-table-wrap {
  max-height: 28rem;
  overflow: auto;
  border: 1px solid #e9edf2;
  border-radius: var(--radius-md);
}

.wholesale-pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.wholesale-pricing-table th {
  position: sticky;
  top: 0;
  padding: 0.4rem 0.6rem;
  background: var(--color-surface-muted);
  color: var(--color-text-subtle);
  font-size: 0.6875rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.wholesale-pricing-table td {
  padding: 0.4rem 0.6rem;
  border-top: 1px solid #f0f3f8;
  white-space: nowrap;
}

.wholesale-pricing-table .num {
  text-align: right;
}

.wholesale-pricing-table .muted {
  color: var(--color-text-subtle);
}

.wholesale-discount--sap {
  background: #f8fafc;
}

.wholesale-discount-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
}

.wholesale-discount-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-subtle);
}

.wholesale-discount-form input[type="number"] {
  width: 6rem;
}

.wholesale-discount-errors {
  margin: 0.6rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.8125rem;
  color: var(--color-danger-text, #8a1c1c);
}

/* ---------------------------------------------------------------------------
   Order log (/wholesale/orders/log)
   --------------------------------------------------------------------------- */

.orders-log-page {
  --orders-log-head-bg: #f1f5f9;
  --orders-log-head-fg: #475569;
  --orders-log-rule: #e2e8f0;
  --orders-log-neutral-bg: #eef2f7;
  --orders-log-neutral-fg: var(--color-text-muted);
  --orders-log-blue-bg: var(--color-brand-muted);
  --orders-log-blue-fg: var(--color-brand-hover);
  --orders-log-amber-bg: #fdf3dc;
  --orders-log-amber-fg: #8a6410;
  --orders-log-green-bg: var(--color-accent-muted);
  --orders-log-green-fg: #2f5233;
  --orders-log-green-solid-fg: #fff;
  --orders-log-red-bg: #fdeaea;
  --orders-log-red-fg: #a3232b;
  --orders-log-red-solid-fg: #fff;
}

/* Holds the header, the toolbar and the grid. Unclipped, so the menus inside it can overflow. */
.orders-log-card {
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.orders-log-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 1.25rem 1.5rem 0.25rem;
}

.orders-log-body {
  padding: 1rem 1.5rem;
}

.orders-log-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.orders-log-header-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

/* One row, the same height filtered or not: the chips on the left, what is on screen on the
   right. A filter appearing or going never moves the grid below. */
.orders-log-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.5rem;
}

/* More chips than fit scroll sideways within the row rather than wrapping onto a second one. */
.orders-log-toolbar-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.orders-log-toolbar-left::-webkit-scrollbar {
  display: none;
}

/* The caret on a button that opens a menu, turned up while the menu is open. */
.orders-menu-chevron {
  width: 0.875rem;
  height: 0.875rem;
  margin-left: 0.35rem;
  vertical-align: -0.125rem;
  transition: transform var(--transition);
}

.wholesale-actions-menu.is-open > .btn .orders-menu-chevron {
  transform: rotate(180deg);
}

/* The header's Columns and Reports menus, in the filter menu's shell: the same panel, head,
   section labels and rows. In the header's action cluster, at the right of the page, so they open
   leftwards like the rest. */
.orders-log-columns-list,
.orders-log-reports-list {
  width: 18rem;
  padding: 0;
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 12px 32px rgba(16, 33, 55, 0.14), 0 2px 6px rgba(16, 33, 55, 0.06);
  color: var(--color-text, #1e3a5f);
  font-size: 0.8125rem;
}

.orders-log-columns-reset {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent, #4a6b4a);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}

.orders-log-columns-reset:disabled {
  color: var(--color-text-subtle);
  cursor: default;
}

/* The column list takes the menu's height; a filter's list stays short beside its condition. */
.orders-log-columns-options {
  max-height: 18rem;
  margin-top: 0.35rem;
}

/* Each column's source sits at the row's right edge, so the badges line up as a column. */
.orders-log-columns-options .orders-log-src {
  margin-left: auto;
}

/* A column row's drag grip; Line's is kept for alignment but not shown, as Line does not move. */
.orders-log-columns-grip {
  flex: none;
  width: 0.6rem;
  color: var(--color-text-subtle, #607285);
  font-size: 0.75rem;
  letter-spacing: -0.15em;
  line-height: 1;
  opacity: 0.45;
  cursor: grab;
}

/* The column's letter, as the grid's header writes it, in a fixed-width slot so names line up. */
.orders-log-columns-letter {
  flex: none;
  min-width: 1.4rem;
  color: var(--color-text-subtle, #607285);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.orders-menu-option:hover .orders-log-columns-grip {
  opacity: 1;
}

.orders-menu-option.is-dragging {
  background: var(--color-accent-muted, #e8f0e8);
  opacity: 0.85;
}

/* A planner's row height, from their table layout: Standard is the cells' own padding. */
.orders-log-table--compact tbody:not(.orders-log-filler) td {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.orders-log-table--tall tbody:not(.orders-log-filler) td {
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
}

/* `FillViewport` sizes the filler to the height the lines leave, so the footer sits at the
   scroller's foot when the lines are few; with more than fit it is nothing, and the footer sticks. */
.orders-log-table tbody.orders-log-filler td {
  padding: 0;
  border: 0;
}

.orders-log-table tbody.orders-log-filler tr:hover {
  background: transparent;
}

.orders-log-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--orders-log-rule);
  border-bottom: 0;
  background: var(--orders-log-head-bg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.orders-log-table tfoot td[title] {
  cursor: help;
}

/* The footer's count sits under the gutter, wrapping onto a second line rather than widening it. */
.orders-log-table tfoot td[data-col="line"] {
  padding: 0.6rem 0.5rem;
  white-space: normal;
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
}


/* A report: its name, and who shared it, muted at the right. */
.orders-log-reports-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: calc(100% + 0.75rem);
  height: 1.875rem;
  margin: 0 -0.375rem;
  padding: 0 0.375rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--color-text, #1e3a5f);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.orders-log-reports-item:hover:not(:disabled) {
  background: var(--color-surface-muted, #eef1f6);
}

.orders-log-reports-by {
  margin-left: auto;
  color: var(--color-text-subtle, #607285);
  font-size: 0.75rem;
  white-space: nowrap;
}

/* A report's row: the link that opens it. */
.orders-log-reports-row {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.orders-log-reports-row .orders-log-reports-item {
  flex: 1;
  min-width: 0;
  width: auto;
  margin-right: 0;
  text-decoration: none;
}

.orders-log-reports-row.is-current .orders-menu-value {
  font-weight: 600;
}

.orders-log-reports-share-choice {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.375rem;
  color: var(--color-text-subtle, #607285);
  font-size: 0.75rem;
}

.orders-log-reports-save-row {
  display: flex;
  gap: 0.375rem;
}

.orders-log-reports-save-row .orders-menu-input {
  flex: 1;
  min-width: 0;
}

.orders-log-reports-list .orders-menu-note {
  margin: 0;
  padding: 0.625rem 0.75rem 0;
  color: var(--color-text-subtle, #607285);
  font-size: 0.75rem;
}

/* The veil over either order-log grid while its rows are being swapped out.

   It wraps the page's scrolling element rather than sitting inside it: `inset: 0` measured
   against scrolled content would slide the veil off the top on the second screenful. */
.sheet-grid {
  position: relative;
}

.sheet-grid-veil {
  position: absolute;
  inset: 0;
  /* Over the sticky header, the sticky footer, and a picker left open in a row. */
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-surface) 66%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* `phx-click-loading` is LiveView's own: on while the event is in flight, off when the server
   replies. Naming the two controls that replace every row keeps the veil off a row's own
   button, which is in flight just as often and must not dim the table around it.

   Clicks are refused the moment the swap starts, but the veil only fades in after it has run
   long enough to be worth explaining — a filter switch over a few hundred rows lands well
   inside the delay, so the common case shows nothing at all. */
.sheet-grid:has(.table-sort-link.phx-click-loading) .sheet-grid-veil,
.orders-log-import-body:has(.orders-log-import-filter.phx-click-loading)
  .sheet-grid-veil {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.12s ease-in 0.2s;
}

.sheet-grid-spinner {
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--color-border-light);
  border-top-color: var(--color-text-muted);
  border-radius: 50%;
  animation: catalog-inline-spin 0.65s linear infinite;
}

/* A grid's scrolling element, whichever page it is on (`Grid.grid_scroll/1`). No swipe
   back/forward, no scroll chaining to the page, and no elastic bounce at the edges: the grid stops
   where its rows and columns end, as a spreadsheet does. */
.sheet-grid-body {
  overscroll-behavior: none;
}

.orders-log-scroll {
  overflow: auto;
  /* A height: the sticky header and footer need a scrolling container. `FillViewport` sets it to
     the height left below the grid; this is the fallback until it runs. */
  max-height: clamp(14rem, calc(100vh - 25rem), 60vh);
  margin-top: 0.75rem;
  border: 1px solid #e9edf2;
  border-radius: 10px;
  background: var(--color-surface);
}

.orders-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: var(--color-surface);
  white-space: nowrap;
}

.orders-log-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--orders-log-rule);
  text-align: left;
  vertical-align: middle;
}

.orders-log-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--orders-log-head-bg);
  border-bottom: 1px solid var(--orders-log-rule);
  padding: 0.6rem 1rem;
  text-align: left;
  vertical-align: middle;
  color: var(--orders-log-head-fg);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* The header's sort link takes the band's colour. */
.orders-log-table thead th .table-sort-link {
  color: inherit;
  text-decoration: none;
}

/* A sticky cell with a z-index is its own stacking context: raising the cell is what lifts its
   tooltip above the neighbouring cells. */
.orders-log-table thead th:hover,
.orders-log-table thead th:focus-within {
  z-index: 40;
}

/* A td needs positioning to take a z-index; this lifts a pill's tooltip over its neighbours (and,
   in the importer, over the sticky footer; in the log a state cell rises further — see "Stacking
   in the log's grid"). Not a pinned cell: repositioned, it would leave its pin under the pointer. */
.orders-log-table tbody td:not(.orders-log-col-actions):hover,
.orders-log-table tbody td:not(.orders-log-col-actions):focus-within {
  position: relative;
  z-index: 5;
}

.orders-log-table tbody tr:hover {
  background: #f8fafc;
}

.orders-log-table tbody tr.is-starred {
  background: #fdfaf0;
}

/* A row clicked stays marked while the grid scrolls sideways; any cell with its own background
   (a sticky column) takes the highlight too. */
.orders-log-table tbody tr[phx-click] {
  cursor: pointer;
}

.orders-log-table tbody tr.is-highlighted,
.orders-log-table tbody tr.is-highlighted > td {
  background: #e8f1f9;
}


/* Pinned edges: a line's identity — its number and star, in the gutter — stays at the left and
   its actions at the right, however far the grid scrolls sideways. Each pinned cell takes its
   row's background, so the scrolled columns pass beneath it; a soft shadow marks each pinned edge.
   The gutter's width is set here, not left to the content, so every row's gutter lines up. */
.orders-log-table {
  --orders-log-pin-gutter: 4.75rem;
  --orders-log-pin-shadow: rgba(16, 33, 55, 0.14);
}

.orders-log-table tbody tr {
  background: var(--color-surface);
}

.orders-log-table :is(th, td).orders-log-gutter,
.orders-log-table :is(th, td).orders-log-col-actions {
  position: sticky;
  /* Above every scrolling cell, a hovered one (5) included, so none covers a pin or takes its
     click. */
  z-index: 6;
  background: inherit;
}

/* Hovered or holding focus (an open menu), a pinned cell rises above the other rows' pins and the
   sticky footer, so what it opens is not covered; it stays pinned. */
.orders-log-table tbody :is(th, td):is(.orders-log-gutter, .orders-log-col-actions):is(:hover, :focus-within) {
  z-index: 20;
}

/* The row-number gutter: each line's number heads its row from the grid's left edge, on the
   header band's ground, as a spreadsheet's row numbers do. The number is right-aligned so its
   digits line up down the edge. */
.orders-log-table :is(th, td).orders-log-gutter {
  left: 0;
  width: var(--orders-log-pin-gutter);
  min-width: var(--orders-log-pin-gutter);
  max-width: var(--orders-log-pin-gutter);
  padding: 0 0.5rem;
  /* A collapsed border stays where the column was, not on the pinned cell; the shadow travels, and
     a soft one beyond it marks the pinned edge. */
  box-shadow:
    inset -1px 0 0 var(--orders-log-rule),
    6px 0 6px -6px var(--orders-log-pin-shadow);
  background: var(--orders-log-head-bg);
  text-align: right;
}

.orders-log-table tbody th.orders-log-gutter {
  border-bottom: 1px solid var(--orders-log-rule);
  color: var(--orders-log-head-fg);
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: normal;
  text-transform: none;
}

/* The corner header holds Line's sort and filter, so its label sits at the right like the numbers. */
.orders-log-table thead th.orders-log-gutter .orders-log-th-inner {
  justify-content: flex-end;
  width: 100%;
}

.orders-log-table tbody tr:hover > th.orders-log-gutter {
  background: var(--orders-log-rule);
}

/* A row clicked is marked in its gutter the way a spreadsheet marks a selected row's number. */
.orders-log-table tbody tr.is-highlighted > th.orders-log-gutter {
  background: #2f6db0;
  color: #fff;
  font-weight: 600;
}

/* A cancelled line's number is struck through in red on a red-tinted gutter, so the dropped buys
   read down the left edge however far the grid scrolls. The rest of the row stays at full
   strength (see the cancelled rule beside the State pill). */
.orders-log-table tbody tr.is-cancelled > th.orders-log-gutter {
  background: var(--orders-log-red-bg);
  color: var(--color-text-subtle);
}

.orders-log-table tbody th.orders-log-gutter s {
  text-decoration-color: var(--orders-log-red-fg);
  text-decoration-thickness: 1.5px;
}

.orders-log-table tbody tr.is-cancelled.is-highlighted > th.orders-log-gutter {
  background: #2f6db0;
  color: #fff;
}

.orders-log-table tbody tr.is-highlighted > th.orders-log-gutter s {
  text-decoration-color: #fff;
}

.orders-log-table :is(th, td).orders-log-col-actions {
  right: 0;
  box-shadow: -6px 0 6px -6px var(--orders-log-pin-shadow);
}

/* The sticky header and footer sit above the pinned body cells (6), which pass beneath them as
   the lines scroll. Scoped to the log's grid, so the rules the importer's table shares stay as
   they are. */
.orders-log-scroll .orders-log-table thead th {
  z-index: 7;
}

.orders-log-scroll .orders-log-table tfoot td {
  z-index: 7;
}

/* Stacking in the log's grid, lowest first: a hovered cell (5), pinned body cells (6), the sticky
   header and footer (7), a hovered scrolled header or state cell (8) so its tooltip clears the
   header and footer, the pinned header and footer cells (9), a hovered pinned header (10), and a
   hovered or focused pinned body cell (20) so what it opens clears everything, and a cell whose +N
   menu is open (21) for the same reason. A hovered scrolled header stays under the pinned headers it
   passes beneath. */
.orders-log-scroll .orders-log-table thead th:is(:hover, :focus-within) {
  z-index: 8;
}

.orders-log-scroll .orders-log-table tbody td:has(.orders-log-state):is(:hover, :focus-within) {
  z-index: 8;
}

.orders-log-scroll
  .orders-log-table
  thead
  th:is(.orders-log-gutter, .orders-log-col-actions):is(
    :hover,
    :focus-within
  ) {
  z-index: 10;
}

/* Header and footer cells are pinned top or bottom already; pinned at an edge too, they sit above
   both the scrolled header row and the pinned body cells. */
.orders-log-table thead th:is(.orders-log-gutter, .orders-log-col-actions) {
  z-index: 9;
  background: var(--orders-log-head-bg);
}

.orders-log-table tfoot td:is(.orders-log-gutter, .orders-log-col-actions) {
  z-index: 9;
  background: var(--orders-log-head-bg);
}

/* The table keeps its cells on one line; a row's menu is prose, so its notes wrap within it. */
.orders-log-table .wholesale-actions-menu__list {
  white-space: normal;
}

/* Tags wrap within a column wide enough for a few chips side by side. */
.orders-log-table .orders-log-tags {
  min-width: 20rem;
  white-space: normal;
}

.orders-log-col--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.orders-log-total {
  font-weight: 600;
}

.orders-log-notes {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orders-log-table th.orders-log-col-actions,
.orders-log-table td.orders-log-col-actions {
  text-align: right;
}

/* The outline clears 3:1 against the gutter's grey, so an unstarred line still shows where to click. */
.orders-log-star {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: #7b8a9e;
  cursor: pointer;
}

.orders-log-star:hover {
  color: #475569;
}

.orders-log-star[aria-pressed="true"] {
  color: #dfa711;
}

/* In the gutter the star sits just before the number, both at the right, so the numbers' digits
   line up down the edge and the star stays beside the line it marks. */
.orders-log-gutter-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
}

.orders-log-table tbody tr.is-highlighted > th.orders-log-gutter .orders-log-star[aria-pressed="false"] {
  color: rgba(255, 255, 255, 0.85);
}

/* The gold reads too faintly on the highlight's blue, so a starred star brightens there. */
.orders-log-table tbody tr.is-highlighted > th.orders-log-gutter .orders-log-star[aria-pressed="true"] {
  color: #ffd54a;
}

.orders-log-so-number {
  color: var(--color-link);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.orders-log-so-number:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* A sales order's number is a button that opens it in the drawer; it reads as a link. */
button.orders-log-so-number {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

/* A cell that can carry several values — sales orders, customer POs, inbound POs — shows the
   first, cut short with an ellipsis rather than widening its column, and a +N chip for the rest.
   Each caps at 11rem: `.orders-log-compact` here, `.orders-log-inbound-open` in its own rule. */
.orders-log-compact {
  max-width: 11rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.orders-log-compact > .orders-log-so-number,
.orders-log-inbound-open > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orders-log-more {
  flex: none;
  padding: 0 0.4rem;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--orders-log-neutral-bg);
  color: var(--orders-log-neutral-fg);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}

button.orders-log-more {
  cursor: pointer;
}

button.orders-log-more:hover {
  background: var(--color-border-light);
}

/* The +N count's menu of a line's sales orders: it opens below the chip, running right from it; its
   cell rises above the pinned edges and the sticky footer while it is open, so nothing covers it. */
.orders-log-more-menu {
  flex: none;
}

.orders-log-more-menu .wholesale-actions-menu__list {
  left: 0;
  right: auto;
}

.orders-log-more-menu .wholesale-actions-menu__label {
  font-variant-numeric: tabular-nums;
}

.orders-log-table tbody td:has(.orders-log-more-menu.is-open) {
  position: relative;
  z-index: 21;
}

/* A column's source, in the Columns menu beside it: Panorama, SAP or Centric, as a quiet pill. */
.orders-log-src {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 1.15rem;
  padding: 0 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface-muted);
  color: var(--color-text-subtle);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
}

.orders-log-state-tip,
.orders-log-assumed-tip {
  position: absolute;
  left: 0;
  top: calc(100% + 0.4rem);
  z-index: 30;
  width: max-content;
  max-width: 18rem;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: normal;
  box-shadow: var(--shadow-lg);
  /* Out of the layout until shown, as the price bar's tip is, so a tip on a line near the foot never
     stretches the scroller below the sticky footer. */
  display: none;
}

.orders-log-state:hover .orders-log-state-tip,
.orders-log-state:focus-visible .orders-log-state-tip,
.orders-log-assumed:hover .orders-log-assumed-tip,
.orders-log-assumed:focus-visible .orders-log-assumed-tip {
  display: block;
}

/* A flex row: the name and its letter sit flush. */
.orders-log-th-inner {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.orders-log-letter {
  font-size: inherit;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--color-text-subtle);
}

/* `.orders-log-scroll` clips its children; the last columns' tooltips anchor right to stay inside it.
   Scrolled far right, a mid-table tooltip still clips. */
.orders-log-table tbody td:nth-last-child(-n + 8) .orders-log-state-tip,
.orders-log-table td:nth-last-child(-n + 8) .orders-log-assumed-tip {
  right: 0;
  left: auto;
}

/* A value resting on an assumption (priced at MSRP, or only partly by its sales orders): a quiet
   "≈" before the figure, with a tooltip saying which. */
/* The footer sits at the scroll area's bottom edge, so its tooltip opens upward to stay inside. */
.orders-log-table tfoot .orders-log-assumed-tip {
  top: auto;
  bottom: calc(100% + 0.4rem);
}

.orders-log-assumed {
  position: relative;
  margin-right: 0.15rem;
  color: var(--color-text-subtle);
  font-weight: 600;
  cursor: help;
}

/* Where a line's price came from, as the pricing waterfall names its step: SO, Material, Style,
   Customer, MSRP. A price set in SAP's price list carries a lock: it changes only in SAP. */
.orders-log-price-source {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-right: 0.35rem;
  padding: 0 0.4rem;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.15rem;
  vertical-align: 1px;
  background: var(--orders-log-neutral-bg);
  color: var(--orders-log-neutral-fg);
}

.orders-log-price-source--so {
  background: var(--color-brand-muted);
  color: var(--color-brand);
}

.orders-log-price-source--material,
.orders-log-price-source--style {
  background: #e3eef6;
  color: #1d5f8a;
  box-shadow: inset 0 0 0 1px #b8d3e6;
}

.orders-log-price-source--customer {
  background: var(--color-accent-muted);
  color: var(--color-accent);
}

.orders-log-price-more {
  font-weight: 500;
  opacity: 0.8;
}

.orders-log-bar-split {
  display: grid;
  gap: 0.15rem;
  font-variant-numeric: tabular-nums;
}

.orders-log-price-lock {
  font-size: 0.625rem;
  font-weight: 600;
  opacity: 0.85;
}

/* The discount bar: MSRP is the track, what the customer pays the solid part in its step's colour,
   the discount hatched. Hovered or focused, a panel lays every figure out. */
.orders-log-bar-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 0.45rem;
  vertical-align: middle;
  cursor: help;
}

.orders-log-bar {
  display: inline-flex;
  width: 4.5rem;
  height: 0.5rem;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
}

.orders-log-bar i {
  display: block;
  height: 100%;
}

.orders-log-bar-paid,
.orders-log-bar--msrp {
  background: #b9c3cf;
}

.orders-log-bar--sales_order {
  background: var(--color-brand);
}

.orders-log-bar--material,
.orders-log-bar--style {
  background: #1d5f8a;
}

.orders-log-bar--customer {
  background: var(--color-accent);
}

.orders-log-bar-off {
  background: repeating-linear-gradient(45deg, #f4c7b4, #f4c7b4 3px, #fff 3px, #fff 6px);
}

.orders-log-bar-tip {
  position: absolute;
  left: 0;
  top: calc(100% + 0.4rem);
  z-index: 30;
  /* Out of the layout until shown: hidden but laid out, the tip of a line near the foot hangs below
     the table and stretches the scroller, so at the bottom the sticky footer sits above empty
     space. */
  display: none;
  gap: 0.5rem;
  width: 18rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  box-shadow: var(--shadow-lg);
}

.orders-log-bar-wrap:hover .orders-log-bar-tip,
.orders-log-bar-wrap:focus-visible .orders-log-bar-tip {
  display: grid;
}

.orders-log-table td:nth-last-child(-n + 8) .orders-log-bar-tip {
  right: 0;
  left: auto;
}

.orders-log-bar-tip-title {
  font-weight: 600;
}

.orders-log-bar--large {
  width: 100%;
  height: 0.75rem;
  border-radius: var(--radius-sm);
}

.orders-log-bar-figures {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.25rem 0.75rem;
  font-variant-numeric: tabular-nums;
}

.orders-log-bar-pct {
  color: rgb(255 255 255 / 0.7);
  text-align: right;
}

.orders-log-bar-amt {
  text-align: right;
}

.orders-log-bar-total {
  padding-top: 0.25rem;
  border-top: 1px solid rgb(255 255 255 / 0.25);
  font-weight: 600;
}

.orders-log-bar-swatch {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.35rem;
  border-radius: 2px;
  vertical-align: -1px;
}

.orders-log-bar-source {
  padding-top: 0.4rem;
  border-top: 1px solid rgb(255 255 255 / 0.25);
  color: rgb(255 255 255 / 0.85);
  font-size: 0.6875rem;
}

.orders-log-state {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: help;
}

.orders-log-state--planned {
  background: var(--orders-log-neutral-bg);
  color: var(--orders-log-neutral-fg);
}

.orders-log-state--booking {
  background: var(--orders-log-blue-bg);
  color: var(--orders-log-blue-fg);
}

.orders-log-state--short {
  background: var(--orders-log-amber-bg);
  color: var(--orders-log-amber-fg);
}

.orders-log-state--realized {
  background: var(--orders-log-green-bg);
  color: var(--orders-log-green-fg);
}

/* Over plan is upside: realized's green, filled. */
.orders-log-state--over {
  background: var(--orders-log-green-fg);
  color: var(--orders-log-green-solid-fg);
}

.orders-log-state--lapsed {
  background: var(--color-border-light);
  color: var(--color-text-subtle);
}

.orders-log-state--unplanned {
  background: var(--orders-log-red-bg);
  color: var(--orders-log-red-fg);
}

/* Cancelled is Unplanned's red, filled, as Over plan is Realized's green: the two stay apart. */
.orders-log-state--cancelled {
  background: var(--orders-log-red-fg);
  color: var(--orders-log-red-solid-fg);
}

/* A cancelled line stays in the grid as a record, at full strength so it reads like any other row.
   Its State pill says so, and only the figures that sum into the log's totals are struck, thinly and
   in their own colour; an empty cell's dash is left alone. */
.orders-log-page tr.is-cancelled
  > td:is(
    [data-col="store"],
    [data-col="ecom"],
    [data-col="unconfirmed"],
    [data-col="total_units"],
    [data-col="booked_units"],
    [data-col="confirmed_units"],
    [data-col="value"],
    [data-col="variance_units"],
    [data-col="variance_value"]
  ):not([data-blank]) {
  text-decoration: line-through;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
}

.orders-log-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.25rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  /* Each tag carries its own ink in --tag-color, set from the vocabulary row. */
  color: var(--tag-color, #4b6076);
  background: color-mix(in srgb, var(--tag-color, #4b6076) 12%, white);
}

.orders-log-tag-remove {
  margin: 0 -0.15rem 0 0.05rem;
  padding: 0 0.15rem;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
}

.orders-log-tag-remove:hover,
.orders-log-tag-remove:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, var(--tag-color, #4b6076) 18%, white);
}

.orders-log-tag-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--radius-full);
  background: currentColor;
}

/* Order Log line form: one line written by hand, after the demand pipeline design. Section cards
   down the main column; an aside with the actions, the line's figures and its tags. */
.line-form-page {
  max-width: 74rem;
  margin: 0 auto;
  padding-bottom: 1.5rem;
  color: #1e3a5f;
}

.line-form-crumbs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0 0.75rem;
  font-size: 0.8125rem;
  color: #607285;
}

.line-form-crumbs a {
  color: #2f6db0;
}

.line-form-card {
  background: #fff;
  border: 1px solid #e9edf2;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 33, 55, 0.05);
  padding: 1.25rem 1.5rem 1.4rem;
}

.line-form-header {
  margin-bottom: 1rem;
}

.line-form-header-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.line-form-header h1 {
  margin: 0 0 0.125rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.line-form-lede {
  margin: 0;
  max-width: 46rem;
  font-size: 0.9rem;
  color: #4b6076;
}

.line-form-summary {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid #fca5a5;
  border-left: 3px solid #dc2626;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 33, 55, 0.05);
}

.line-form-summary-title {
  margin: 0 0 0.2rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #b91c1c;
}

.line-form-summary ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #4b6076;
}

.line-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1.25rem;
  align-items: start;
}

.line-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.line-form h2 {
  margin: 0 0 0.15rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.line-form-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.line-form-section-lede {
  margin: 0 0 1.1rem;
  font-size: 0.8125rem;
  color: #607285;
}

.line-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}

.line-form-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.line-form-grid--when {
  grid-template-columns: 14rem minmax(0, 1fr);
}

.line-form-span {
  grid-column: 1 / -1;
}

.line-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.line-form-field label,
.line-form-label {
  font-size: 0.875rem;
  font-weight: 500;
}

.line-form-hint {
  display: block;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #607285;
}

.line-form-eyebrow {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

.line-form-combo {
  position: relative;
}

.line-form-combo .form-input {
  padding-right: 2rem;
}

.line-form-combo-clear {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 1rem;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
}

.line-form-combo-clear:hover,
.line-form-combo-clear:focus-visible {
  background: #f1f5f9;
  color: #1e3a5f;
}

.line-form-picks {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.25rem;
  background: #fff;
  border: 1px solid #e2e6ec;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(16, 33, 55, 0.12);
}

.line-form-pick {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.line-form-pick:hover,
.line-form-pick:focus-visible,
.line-form-pick.is-active {
  background: #f1f5f9;
}

.line-form-pick-sub {
  font-size: 0.75rem;
  color: #607285;
}

.line-form-pick-none {
  padding: 0.45rem 0.6rem;
  font-size: 0.8125rem;
  color: #607285;
}

.orders-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  align-self: flex-start;
  gap: 2px;
  padding: 2px;
  background: #f1f5f9;
  border: 1px solid #e9edf2;
  border-radius: 8px;
}

.orders-segment {
  position: relative;
  cursor: pointer;
}

.orders-segment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.orders-segment span {
  display: block;
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #4b6076;
}

.orders-segment input:checked + span {
  background: #fff;
  color: #1e3a5f;
  box-shadow: 0 1px 2px rgba(16, 33, 55, 0.12);
}

.orders-segment input:focus-visible + span {
  outline: 2px solid #1e3a5f;
  outline-offset: 1px;
}

/* Stretched across its row: each choice takes an equal share. */
.orders-segmented--fill {
  display: flex;
  flex-wrap: nowrap;
  align-self: stretch;
}

.orders-segmented--fill .orders-segment {
  flex: 1;
  text-align: center;
}

.orders-segment:has(input:disabled) {
  cursor: default;
}

.orders-segment input:disabled:not(:checked) + span {
  opacity: 0.6;
}

.line-form-inline {
  display: flex;
  gap: 0.5rem;
}

.line-form-year {
  width: 6.5rem;
}

.line-form-affix {
  position: relative;
  display: block;
}

.line-form-affix .form-input {
  padding-right: 3.25rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.line-form-suffix {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  font-size: 0.8125rem;
  color: #94a3b8;
  pointer-events: none;
}

.line-form-sizes-total {
  font-size: 0.75rem;
  font-weight: 500;
  color: #607285;
}

/* The size grid scrolls inside a wrapper that does not, so the edge fades stay put. `ScrollHint`
   sets data-more-left / data-more-right while there is more to see that way. */
.line-form-size-scroll {
  position: relative;
}

.line-form-size-body {
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}

.line-form-size-scroll::before,
.line-form-size-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0.5rem;
  width: 3rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
}

.line-form-size-scroll::before {
  left: 0;
  background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0));
}

.line-form-size-scroll::after {
  right: 0;
  background: linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0));
}

.line-form-size-scroll[data-more-left]::before,
.line-form-size-scroll[data-more-right]::after {
  opacity: 1;
}

.line-form-scroll-more {
  position: absolute;
  z-index: 1;
  bottom: calc(0.5rem + 0.3rem);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1.4rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  color: #607285;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
}

.line-form-scroll-more--left {
  left: 0.15rem;
}

.line-form-scroll-more--right {
  right: 0.15rem;
}

.line-form-size-scroll[data-more-left] .line-form-scroll-more--left,
.line-form-size-scroll[data-more-right] .line-form-scroll-more--right {
  opacity: 1;
}

.line-form-size-grid {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: max-content;
}

/* One row per channel: a label, a column per size, the row's total. */
.line-form-size-row {
  display: grid;
  grid-template-columns: 4.25rem repeat(var(--size-count), 3.25rem) 3.75rem;
  gap: 0.25rem;
  align-items: center;
}

.line-form-size-rowlabel {
  font-size: 0.8125rem;
  font-weight: 600;
}

.line-form-size-row--head .line-form-size-rowlabel,
.line-form-size-row--head .line-form-size-rowtotal {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

.line-form-size-head {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  color: #4b6076;
}

.line-form-size-row .form-input {
  padding: 0.35rem 0.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.line-form-size-rowtotal,
.line-form-size-cell {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.line-form-size-cell {
  text-align: center;
  color: #4b6076;
}

.line-form-size-row--total {
  padding-top: 0.35rem;
  border-top: 1px solid #e2e8f0;
}

.line-form-size-row--total .line-form-size-rowtotal {
  font-weight: 700;
}

.line-form-size--stray {
  color: #b91c1c;
}

.line-form-size-row .form-input.line-form-size--stray,
.line-form-size--stray .form-input {
  border-color: #fca5a5;
  background: #fef2f2;
}

.line-form-notice {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #f0e2c2;
  border-radius: 8px;
  background: #fdf8ec;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #6b5a2e;
}

.line-form-aside {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.line-form-aside .line-form-card {
  padding: 1rem 1.25rem;
}

.line-form-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.line-form-actions .btn {
  justify-content: center;
  width: 100%;
}

.line-form-total {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.line-form-facts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid #f1f5f9;
  font-size: 0.875rem;
}

.line-form-facts div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.line-form-facts dt {
  color: #4b6076;
}

.line-form-facts dd {
  margin: 0;
  font-weight: 600;
}

.line-form-figures .line-form-notice {
  margin: 0.85rem 0 0;
}

@media (max-width: 960px) {
  .line-form-layout,
  .line-form-grid,
  .line-form-grid--three,
  .line-form-grid--when {
    grid-template-columns: minmax(0, 1fr);
  }

  .line-form-aside {
    position: static;
  }
}

/* Tag picker: a line's chips, a circled + after them, and the type-ahead panel it opens. */
.tag-picker {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0;
}

.tag-picker-chips {
  display: contents;
}

.tag-picker-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted, #4b6076);
  cursor: pointer;
  opacity: 0.55;
}

.tag-picker-add:hover,
.tag-picker-add:focus-visible,
tr:hover .tag-picker-add {
  opacity: 1;
}

.tag-picker-add svg {
  width: 1rem;
  height: 1rem;
}

.tag-picker-panel {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border, #e2e6ec);
  border-radius: var(--radius-md, 0.5rem);
  background: var(--color-surface, #fff);
  box-shadow: var(--shadow-xl);
  width: 16rem;
  max-width: calc(100vw - 2rem);
  font-size: 0.8125rem;
  color: var(--color-text, #1e3a5f);
}

.tag-picker-input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--color-border, #e2e6ec);
  border-radius: var(--radius-md, 0.5rem) var(--radius-md, 0.5rem) 0 0;
  font: inherit;
  outline: none;
}

.tag-picker-error {
  margin: 0;
  padding: 0.45rem 0.75rem;
  color: #a3232b;
  background: #fdeaea;
}

.tag-picker-options {
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.tag-picker-option,
.tag-picker-create {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.75rem;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.tag-picker-option:hover,
.tag-picker-option:focus-visible,
.tag-picker-option.is-active,
.tag-picker-create:hover,
.tag-picker-create:focus-visible,
.tag-picker-create.is-active {
  background: var(--color-surface-muted, #eef1f6);
}

.tag-picker-option .orders-log-tag-dot {
  color: var(--tag-color, #4b6076);
}

.tag-picker-check {
  width: 0.75rem;
  visibility: hidden;
}

.tag-picker-option[aria-checked="true"] .tag-picker-check {
  visibility: visible;
}

.tag-picker-create {
  border-top: 1px solid var(--color-border, #e2e6ec);
}

@media (max-width: 640px) {
  .tag-picker-panel:popover-open {
    position: fixed;
    inset: 0.5rem 0.5rem auto 0.5rem;
    width: auto;
  }
}

/* A column header's ▾, opening its filter checklist. Quiet until the header is hovered or the
   column is filtered, when it shows a funnel in the accent colour. */
.orders-log-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.3rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  color: var(--color-text-subtle);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
}

th:hover .orders-log-filter-btn,
.orders-log-filter-btn:focus-visible,
.orders-log-filter-btn.is-filtered {
  opacity: 1;
}

.orders-log-filter-btn:hover {
  border-color: var(--color-border);
  background: var(--color-surface-muted);
}

.orders-log-filter-btn.is-filtered {
  border-color: var(--color-accent, #2563eb);
  color: var(--color-accent, #2563eb);
}

.orders-log-filter-btn svg {
  width: 0.7rem;
  height: 0.7rem;
}

.orders-log-filter {
  box-sizing: border-box;
  width: 18rem;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border, #e2e6ec);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-surface, #fff);
  box-shadow: 0 12px 32px rgba(16, 33, 55, 0.14), 0 2px 6px rgba(16, 33, 55, 0.06);
  color: var(--color-text, #1e3a5f);
  font-size: 0.8125rem;
}

/* The operator list floats over the menu, so the menu stops clipping while it is open. */
.orders-log-filter:has(.orders-log-filter-op[open]) {
  overflow: visible;
}

/* While the menu is open the page behind it holds still (`FilterChecklist`); the veil says so. */
.orders-log-filter::backdrop {
  background: rgb(15 23 42 / 0.06);
}

/* While a column's values are on their way, the previous column's are not shown. */
.orders-log-filter.phx-click-loading .orders-log-filter-body {
  visibility: hidden;
}

.orders-menu-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem 0.5rem;
}

.orders-menu-type {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 5px;
  background: var(--color-surface-muted, #eef1f6);
  color: var(--color-text-muted, #4b6076);
  font-size: 0.625rem;
  font-weight: 700;
}

.orders-menu-title {
  font-weight: 600;
}

.orders-log-filter-clear,
.orders-menu-links button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent, #4a6b4a);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}

.orders-log-filter-clear {
  margin-left: auto;
}

.orders-log-filter-clear:hover,
.orders-menu-links button:hover {
  color: var(--color-accent-hover, #3d5a3d);
  text-decoration: underline;
}

/* Sort: two toggles, the sort in force lit. */
.orders-log-filter-sort {
  display: flex;
  gap: 0.25rem;
  padding: 0 0.75rem 0.65rem;
}

.orders-log-filter-sort-btn {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 1.75rem;
  border: 1px solid var(--color-border, #e2e6ec);
  border-radius: 7px;
  color: var(--color-text-muted, #4b6076);
  font-size: 0.75rem;
  text-decoration: none;
  white-space: nowrap;
}

.orders-log-filter-sort-btn:hover {
  background: var(--color-surface-muted, #eef1f6);
}

.orders-log-filter-sort-btn.is-on {
  border-color: #bcd0bc;
  background: var(--color-accent-muted, #e8f0e8);
  color: var(--color-accent, #4a6b4a);
  font-weight: 600;
}

.orders-menu-section {
  padding: 0.65rem 0.75rem;
  border-top: 1px solid var(--color-border-light, #eef1f5);
}

.orders-menu-label {
  display: flex;
  align-items: center;
  margin: 0 0 0.45rem;
  color: var(--color-text-subtle, #607285);
  font-size: 0.65625rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.orders-menu-label-note {
  margin-left: auto;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.75rem;
}

/* The condition: an operator, then its value or values, on one line. */
.orders-log-filter-cond {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.orders-menu-input,
.orders-log-filter-select,
.orders-log-filter-op-btn {
  box-sizing: border-box;
  height: 1.875rem;
  border: 1px solid var(--color-border, #e2e6ec);
  border-radius: 7px;
  background: #fff;
  color: var(--color-text, #1e3a5f);
  font: inherit;
  font-size: 0.78125rem;
}

.orders-menu-input {
  width: 100%;
  min-width: 0;
  padding: 0 0.55rem;
}

.orders-menu-input:focus,
.orders-log-filter-select:focus,
.orders-log-filter-op-btn:focus-visible {
  outline: none;
  border-color: var(--color-accent, #4a6b4a);
  box-shadow: 0 0 0 3px rgb(74 107 74 / 0.15);
}

.orders-log-filter-select,
.orders-log-filter-op-btn {
  padding: 0 1.6rem 0 0.55rem;
  background-image: linear-gradient(45deg, transparent 50%, #607285 50%),
    linear-gradient(135deg, #607285 50%, transparent 50%);
  background-position: calc(100% - 0.8rem) 52%, calc(100% - 0.55rem) 52%;
  background-size: 0.25rem 0.25rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

.orders-log-filter-select {
  flex: 1;
  min-width: 0;
  appearance: none;
}

.orders-log-filter-op {
  position: relative;
  flex: none;
}

.orders-log-filter-op-btn {
  display: flex;
  align-items: center;
  list-style: none;
  white-space: nowrap;
}

.orders-log-filter-op-btn::-webkit-details-marker {
  display: none;
}

.orders-log-filter-op-menu {
  position: absolute;
  z-index: 2;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 11rem;
  padding: 0.25rem;
  border: 1px solid var(--color-border, #e2e6ec);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(16, 33, 55, 0.14);
}

.orders-log-filter-op-item {
  display: flex;
  align-items: center;
  height: 1.75rem;
  padding: 0 0.5rem;
  border-radius: 6px;
  white-space: pre;
  cursor: pointer;
}

.orders-log-filter-op-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.orders-log-filter-op-item:hover,
.orders-log-filter-op-item:has(input:focus-visible) {
  background: var(--color-surface-muted, #eef1f6);
}

.orders-log-filter-op-item:has(input:checked) {
  font-weight: 600;
}

/* The tests that take no value sit apart, below a rule. */
.orders-log-filter-op-item.is-first-test {
  margin-top: 0.25rem;
  border-top: 1px solid var(--color-border-light, #eef1f5);
  border-radius: 0 0 6px 6px;
  padding-top: 0.25rem;
  height: 2rem;
}

.orders-log-filter-operands {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.orders-log-filter-and {
  flex: none;
  color: var(--color-text-subtle, #607285);
  font-size: 0.75rem;
}

/* The far end of a range shows only for "between"; a test with no value takes no field. */
.orders-log-filter-b {
  display: none;
  flex: 1;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.orders-log-filter-condition:has(input[name="op"][value="between"]:checked) .orders-log-filter-b {
  display: flex;
}

.orders-log-filter-condition:has(input[name="op"][value="blank"]:checked) .orders-log-filter-operands,
.orders-log-filter-condition:has(input[name="op"][value="not_blank"]:checked)
  .orders-log-filter-operands {
  display: none;
}

/* Values: a search, Select all and Clear, then the list. */
.orders-menu-search {
  position: relative;
}

.orders-menu-search svg {
  position: absolute;
  top: 50%;
  left: 0.55rem;
  width: 0.8rem;
  height: 0.8rem;
  color: var(--color-text-subtle, #607285);
  transform: translateY(-50%);
}

.orders-menu-search .orders-menu-input {
  padding-left: 1.75rem;
}

.orders-menu-links {
  display: flex;
  gap: 0.75rem;
  margin: 0.5rem 0 0.25rem;
}

.orders-menu-list {
  max-height: 11rem;
  margin: 0 -0.375rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.orders-menu-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 1.75rem;
  padding: 0 0.375rem;
  border-radius: 6px;
  cursor: pointer;
}

.orders-menu-option[hidden],
.orders-menu-group[hidden] {
  display: none;
}

.orders-menu-option:hover,
.orders-menu-option:has(input:focus-visible) {
  background: var(--color-surface-muted, #eef1f6);
}

.orders-menu-option input {
  flex: none;
  width: 0.9375rem;
  height: 0.9375rem;
  margin: 0;
  border: 1.5px solid #b8c2ce;
  border-radius: 4px;
  background: #fff;
  appearance: none;
  cursor: pointer;
}

.orders-menu-option input:checked {
  border-color: var(--color-accent, #4a6b4a);
  background: var(--color-accent, #4a6b4a)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 100% no-repeat;
}

.orders-menu-option input:focus-visible {
  outline: 2px solid rgb(74 107 74 / 0.4);
  outline-offset: 1px;
}

.orders-menu-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orders-menu-value .orders-log-tag-dot {
  display: inline-block;
  margin-right: 0.35rem;
  vertical-align: middle;
  color: var(--tag-color, #4b6076);
}

.orders-menu-value.is-blank {
  color: var(--color-text-subtle, #607285);
  font-style: italic;
}

.orders-menu-count {
  color: var(--color-text-subtle, #607285);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* A date column's values, grouped by year. */
.orders-menu-group {
  margin: 0.35rem 0 0.1rem;
  padding: 0 0.375rem;
  color: var(--color-text-subtle, #607285);
  font-size: 0.65625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Tags: whether a line carries any, all or none of the ticked ones. */
.orders-log-filter-mode {
  margin-bottom: 0.5rem;
}

/* A number column's values wait behind Show values. */
.orders-log-filter-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-accent, #4a6b4a);
  font-size: 0.75rem;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.orders-log-filter-more > summary::-webkit-details-marker {
  display: none;
}

.orders-log-filter-more > summary::after {
  content: "▸";
}

.orders-log-filter-more[open] > summary {
  margin-bottom: 0.5rem;
}

.orders-log-filter-more[open] > summary::after {
  content: "▾";
}

.orders-menu-foot {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--color-border-light, #eef1f5);
  background: #fbfcfd;
  color: var(--color-text-subtle, #607285);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.orders-menu-hint {
  margin-left: auto;
  font-size: 0.6875rem;
}

.orders-menu-hint kbd {
  padding: 0 0.25rem;
  border: 1px solid var(--color-border, #e2e6ec);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #fff;
  color: var(--color-text-muted, #4b6076);
  font-family: inherit;
  font-size: 0.65625rem;
}

/* What the grid is filtered by, one chip per column, between the toolbar and the grid. Shown only
   while something is filtered, so it costs no row the rest of the time. */
.orders-log-chips {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: max-content;
}

.orders-log-chip {
  display: inline-flex;
  flex: none;
  align-items: stretch;
  height: 1.625rem;
  max-width: 26rem;
  border: 1px solid var(--color-border, #e2e6ec);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 33, 55, 0.05);
  font-size: 0.75rem;
}

.orders-log-chip-label {
  display: inline-flex;
  align-items: stretch;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 7px 0 0 7px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.orders-log-chip-label:hover {
  background: var(--color-surface-muted, #eef1f6);
}

.orders-log-chip-column,
.orders-log-chip-op,
.orders-log-chip-value {
  display: inline-flex;
  align-items: center;
  padding: 0 0.45rem;
  white-space: nowrap;
}

.orders-log-chip-column {
  padding-left: 0.6rem;
  color: var(--color-text-subtle, #607285);
}

.orders-log-chip-op {
  border-left: 1px solid var(--color-border-light, #eef1f5);
  color: var(--color-text-subtle, #607285);
}

.orders-log-chip-value {
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--color-border-light, #eef1f5);
  color: var(--color-text, #1e3a5f);
  font-weight: 600;
  text-overflow: ellipsis;
}

.orders-log-chip-remove {
  padding: 0 0.5rem;
  border: 0;
  border-left: 1px solid var(--color-border-light, #eef1f5);
  border-radius: 0 7px 7px 0;
  background: none;
  color: var(--color-text-subtle, #607285);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
}

.orders-log-chip-remove:hover {
  background: var(--color-surface-muted, #eef1f6);
  color: var(--color-text, #1e3a5f);
}

.orders-log-sort-chip .orders-log-chip-remove {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* The view's sort and filter chips. While a report is open they sit in the report's group, under
   its name, and stay collapsed behind a count until expanded or edited. */
.orders-log-view,
.orders-log-view-chips {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.375rem;
}

.orders-log-report-group {
  padding: 2px;
  border: 1px solid var(--color-accent, #4a6b4a);
  border-radius: 9px;
  background: var(--color-surface-muted, #eef1f6);
}

.orders-log-report-group .orders-log-report {
  margin-right: 0;
  border-color: transparent;
}

.orders-log-report-group:not(.is-expanded):not(.is-edited) .orders-log-view-chips {
  display: none;
}

.orders-log-report-group.is-expanded .orders-log-report-toggle .orders-menu-chevron {
  transform: rotate(180deg);
}

.orders-log-report-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.5rem;
  border: 0;
  border-left: 1px solid var(--color-border-light, #eef1f5);
  background: none;
  color: var(--color-text-subtle, #607285);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.orders-log-report-toggle:hover {
  background: var(--color-surface-muted, #eef1f6);
  color: var(--color-text, #1e3a5f);
}

/* The open report, ahead of its filters' chips. */
.orders-log-report {
  display: inline-flex;
  flex: none;
  align-items: stretch;
  height: 1.625rem;
  margin-right: 0.375rem;
  border: 1px solid var(--color-accent, #4a6b4a);
  border-radius: 7px;
  background: #fff;
  font-size: 0.75rem;
}

.orders-log-report-label,
.orders-log-report-name,
.orders-log-report-edited {
  display: inline-flex;
  align-items: center;
  padding: 0 0.45rem;
  white-space: nowrap;
}

.orders-log-report-label {
  padding-left: 0.6rem;
  color: var(--color-text-subtle, #607285);
}

.orders-log-report-name {
  color: var(--color-text, #1e3a5f);
  font-weight: 600;
}

.orders-log-report-edited {
  padding-left: 0;
  color: var(--color-text-subtle, #607285);
  font-style: italic;
}

.orders-log-report-action {
  padding: 0 0.5rem;
  border: 0;
  border-left: 1px solid var(--color-border-light, #eef1f5);
  background: none;
  color: var(--color-text-subtle, #607285);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.orders-log-report-action:hover {
  background: var(--color-surface-muted, #eef1f6);
  color: var(--color-text, #1e3a5f);
}

.orders-log-report-action--danger:hover {
  color: var(--color-danger, #b42318);
}

/* A page-level confirmation over the Order Log, its grid and the grid's veil: removing a report,
   its name typed to confirm. */
.wholesale-confirm {
  position: fixed;
  top: 6rem;
  left: 50%;
  z-index: 60;
  width: min(26rem, calc(100vw - 2rem));
  padding: 1rem;
  transform: translateX(-50%);
  border: 1px solid var(--color-border, #e2e6ec);
  border-radius: var(--radius-lg, 12px);
  background: #fff;
  box-shadow: 0 12px 32px rgba(16, 33, 55, 0.18), 0 2px 6px rgba(16, 33, 55, 0.08);
  font-size: 0.8125rem;
}

.wholesale-confirm-title {
  margin: 0 0 0.5rem;
  color: var(--color-text, #1e3a5f);
  font-weight: 600;
}

.wholesale-confirm-label {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  color: var(--color-text-subtle, #607285);
}

.wholesale-confirm-error {
  margin: 0.375rem 0 0;
  color: var(--color-danger, #b42318);
}

.wholesale-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.orders-log-chips-clear {
  flex: none;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--color-accent, #4a6b4a);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}

.orders-log-chips-clear:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .orders-log-filter:popover-open {
    position: fixed;
    inset: 0.5rem 0.5rem auto 0.5rem;
    width: auto;
  }
}

/* Split button: an action with the menu's caret welded to its right edge. Used where a
   primary action also offers alternatives; the bare ··· trigger does not use it. */
.wholesale-actions-menu--split {
  display: inline-flex;
  flex: 0 0 auto;
}

.wholesale-actions-menu--split .wholesale-actions-menu__primary {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.wholesale-actions-menu--split .wholesale-actions-menu__trigger {
  /* Centred on a min-width: the caret is a narrow glyph, and padding alone leaves the
     segment thinner than the button it is welded to. */
  justify-content: center;
  min-width: 1.95rem;
  margin-left: -1px;
  padding-right: 0.65rem;
  padding-left: 0.65rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  /* A hairline so the two halves read as one control with a seam, not one wide button. */
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.35);
  letter-spacing: 0;
}

/* ── Order-log importer (`orders-log-import-`) ──────────────────────────────────────────────
   The importer carries its own slate palette rather than the app's `--color-*`
   tokens. Header bands and number grouping come from the order log, so
   the two screens read as one.
   ------------------------------------------------------------------------- */
.orders-log-import-page {
  background: #f0f3f8;
  -webkit-font-smoothing: antialiased;
}

.orders-log-import {
  --orders-log-import-ink: #1e3a5f;
  --orders-log-import-muted: #4b6076;
  --orders-log-import-subtle: #5d6b7e;
  --orders-log-import-label: #9aa5b5;
  --orders-log-import-rule: #e4e8ee;
  --orders-log-import-rule-soft: #eef1f5;
  --orders-log-import-rule-row: #cdd5df;
  --orders-log-import-held: #d9a43b;
  --orders-log-import-tint: #fbfaf8;
  --orders-log-import-sel-bg: #f4f7ff;
  --orders-log-import-sel-rule: #2f5bd8;
  --orders-log-import-rail: #1e35a6;
  --orders-log-import-link: #2f6db0;
  --orders-log-import-sand: #f1efeb;
  min-width: 0;
  padding-bottom: 2rem;
  font-size: 16px;
  line-height: 1.55;
  color: var(--orders-log-import-ink);
}

.orders-log-import button,
.orders-log-import input,
.orders-log-import select,
.orders-log-import textarea {
  font-family: var(--font-sans);
  color: var(--orders-log-import-ink);
}

.orders-log-import ::selection {
  background: #e8f1f9;
}

.orders-log-import :focus-visible {
  outline: 2px solid var(--orders-log-import-ink);
  outline-offset: 2px;
}

.orders-log-import button {
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease,
    box-shadow 140ms ease;
}

/* Buttons are the ink colour, not Panorama's brand blue. */
.orders-log-import .btn {
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 6px;
}

.orders-log-import .btn-primary {
  background: var(--orders-log-import-ink);
  color: #fff;
  border: 1px solid var(--orders-log-import-ink);
}

.orders-log-import .btn-primary:hover:not(:disabled):not([disabled]) {
  background: #16304f;
  border-color: #16304f;
}

.orders-log-import .btn-outline {
  background: #fff;
  color: var(--orders-log-import-muted);
  border: 1px solid var(--orders-log-import-rule);
}

.orders-log-import .btn-outline:hover:not(:disabled):not([disabled]) {
  background: var(--orders-log-import-tint);
  border-color: #d6dce5;
}

.orders-log-import .btn-sm {
  padding: 0.28rem 0.65rem;
  font-size: 0.8125rem;
}

.orders-log-import .btn-danger {
  background: #fff;
  color: #b3261e;
  border: 1px solid #e3b4b0;
}

.orders-log-import .btn:disabled,
.orders-log-import .btn[disabled],
.orders-log-import-step[disabled],
.orders-log-import-check[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Breadcrumb sits above the card. */
.orders-log-import-crumbs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0 0.75rem;
  font-size: 0.875rem;
  color: var(--orders-log-import-subtle);
}

.orders-log-import-crumb-link {
  color: var(--orders-log-import-link);
  text-decoration: none;
}

.orders-log-import-crumb-link:hover {
  color: #255a95;
}

.orders-log-import-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #eef1f5;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 33, 55, 0.06), 0 1px 2px rgba(16, 33, 55, 0.04);
}

.orders-log-import-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.5rem 1.15rem;
  border-bottom: 1px solid var(--orders-log-import-rule);
}

.orders-log-import-header-text {
  flex: 1 1 20rem;
  min-width: 0;
}

.orders-log-import-eyebrow {
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--orders-log-head-fg);
}

.orders-log-import-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--orders-log-import-ink);
  overflow-wrap: anywhere;
}

.orders-log-import-lede,
.orders-log-import-filemeta {
  margin: 0.4rem 0 0;
  max-width: 46rem;
  font-size: 0.9375rem;
  color: var(--orders-log-import-subtle);
  text-wrap: pretty;
}

.orders-log-import-filemeta {
  margin-top: 0.3rem;
}

.orders-log-import-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin-left: auto;
}

/* Progress rail: a line above each label, and only the step you are on is lit. */
.orders-log-import-steps {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  padding: 1.15rem 1.5rem 0.4rem;
}

.orders-log-import-step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.orders-log-import-step-track {
  display: block;
  height: 2px;
  background: var(--orders-log-import-rule);
}

.orders-log-import-step--current .orders-log-import-step-track {
  height: 3px;
  background: var(--orders-log-import-rail);
}

.orders-log-import-step-label {
  font-size: 0.9375rem;
  color: var(--orders-log-import-subtle);
}

.orders-log-import-step--current .orders-log-import-step-label {
  color: var(--orders-log-import-ink);
  font-weight: 600;
}

.orders-log-import-body {
  padding: 1.1rem 1.5rem 1.6rem;
}

/* ── Upload state ────────────────────────────────────────────────────────── */
.orders-log-import-drop-body {
  padding: 2.5rem 1.5rem 3rem;
}

.orders-log-import-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 3.25rem 2rem;
  background: var(--orders-log-import-sand);
  border: 1px dashed #d6d2ca;
  border-radius: 12px;
  cursor: pointer;
}

.orders-log-import-drop.phx-drag-over {
  border-color: var(--orders-log-import-sel-rule);
  background: var(--orders-log-import-sel-bg);
}

.orders-log-import-drop-title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.orders-log-import-drop-note {
  font-size: 0.9375rem;
  color: var(--orders-log-import-subtle);
}

.orders-log-import-drop-btn {
  margin-top: 1rem;
}

/* ── Bordered panel with an uppercase head — used by every list ──────────── */
.orders-log-import-panel {
  overflow: hidden;
  margin-bottom: 1.5rem;
  border: 1px solid var(--orders-log-import-rule);
  border-radius: 10px;
}

.orders-log-import-panel:last-child {
  margin-bottom: 0;
}

/* The band the pipeline's table headers use. `--orders-log-head-*` are in scope because the
   page carries `orders-log-page`. */
.orders-log-import-panel-head,
.orders-log-import-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 0.6rem 1rem;
  background: var(--orders-log-head-bg);
  border-bottom: 1px solid var(--orders-log-import-rule);
  color: var(--orders-log-head-fg);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

/* ── Sheet list ──────────────────────────────────────────────────────────── */
.orders-log-import-sheet {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--orders-log-import-rule-soft);
}

.orders-log-import-sheet:last-child {
  border-bottom: 0;
}

.orders-log-import-sheet--on {
  background: var(--orders-log-import-sel-bg);
}

.orders-log-import-sheet-name {
  min-width: 9.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--orders-log-import-ink);
}

.orders-log-import-sheet--inert .orders-log-import-sheet-name,
.orders-log-import-sheet--inert .orders-log-import-sheet-note {
  color: var(--orders-log-import-label);
  font-weight: 500;
}

.orders-log-import-sheet-note {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--orders-log-import-subtle);
  text-wrap: pretty;
}

.orders-log-import-sheet-count {
  font-size: 0.875rem;
  color: var(--orders-log-import-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.orders-log-import-kind {
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  border-radius: 5px;
  white-space: nowrap;
}

.orders-log-import-kind--orders {
  background: #e4f1e8;
  color: #2f6b48;
}

.orders-log-import-kind--inert {
  background: #eef0f3;
  color: #8a97a8;
}

.orders-log-import-check {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #c7cfdb;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  line-height: 1;
}

.orders-log-import-check[aria-pressed="true"] {
  background: var(--orders-log-import-ink);
  border-color: var(--orders-log-import-ink);
  color: #fff;
}

.orders-log-import-check-mark {
  font-size: 0.65rem;
}

/* ── Rule columns ────────────────────────────────────────────────────────── */
/* Revealed by the disclosure. The edge and tint separate it from the sheet list above. */
.orders-log-import-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.75rem;
  align-items: start;
  padding: 1.25rem 1.35rem;
  background: var(--orders-log-import-tint);
  border: 1px solid var(--orders-log-import-rule);
  border-radius: 10px;
}

/* Drawn only where the columns sit side by side. */
.orders-log-import-rule + .orders-log-import-rule {
  padding-left: 1.75rem;
  border-left: 1px solid var(--orders-log-import-rule);
}

@media (max-width: 60rem) {
  .orders-log-import-rule + .orders-log-import-rule {
    padding-left: 0;
    border-left: 0;
  }
}

.orders-log-import-rule {
  min-width: 0;
}

.orders-log-import-rule-title {
  margin-bottom: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--orders-log-import-ink);
}

.orders-log-import-rule-note {
  margin: 0 0 0.8rem;
  font-size: 0.875rem;
  color: var(--orders-log-import-subtle);
  text-wrap: pretty;
}

.orders-log-import-rule-opts {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.orders-log-import-opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--orders-log-import-rule);
  border-radius: 8px;
  background: #fff;
  font-size: 0.9375rem;
  color: var(--orders-log-import-muted);
  text-align: left;
  cursor: pointer;
}

.orders-log-import-opt:not(.orders-log-import-opt--on):hover {
  border-color: #d6dce5;
}

.orders-log-import-opt--on {
  background: var(--orders-log-import-sel-bg);
  border-color: var(--orders-log-import-sel-rule);
  color: var(--orders-log-import-ink);
}

.orders-log-import-opt-dot {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  border: 1.5px solid #c7cfdb;
  border-radius: 50%;
  background: #fff;
}

.orders-log-import-opt--on .orders-log-import-opt-dot {
  border-color: var(--orders-log-import-sel-rule);
  background: var(--orders-log-import-sel-rule);
  box-shadow: inset 0 0 0 3px #fff;
}

/* ── Review: filter tiles ────────────────────────────────────────────────── */
.orders-log-import-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  min-height: 2.25rem;
}

/* The one filter: a chip like the order log's, quiet until it is on. */
.orders-log-import-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 2rem;
  padding: 0 0.75rem;
  font: 500 0.875rem/1 var(--font-sans);
  color: var(--orders-log-import-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 999px);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.orders-log-import-chip:hover {
  background: var(--color-border-light);
}

.orders-log-import-chip--on {
  background: var(--orders-log-import-sel-bg);
  border-color: var(--orders-log-import-sel-rule);
  color: var(--orders-log-import-sel-rule);
}

.orders-log-import-chip-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #b3261e;
}

.orders-log-import-chip-count {
  min-width: 1.25rem;
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--orders-log-import-muted);
  background: var(--color-border-light);
  border-radius: var(--radius-full, 999px);
}

.orders-log-import-chip--on .orders-log-import-chip-count {
  color: #fff;
  background: var(--orders-log-import-sel-rule);
}

.orders-log-import-chip-clear {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--orders-log-import-muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.orders-log-import-chip-clear:hover {
  background: var(--color-border-light);
}

.orders-log-import-summary {
  margin-left: auto;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--orders-log-import-muted);
}

.orders-log-import-fix {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--orders-log-import-rule-soft);
}

.orders-log-import-fix:last-child {
  border-bottom: 0;
}

.orders-log-import-fix-n {
  flex: 0 0 2.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--orders-log-import-ink);
}

.orders-log-import-fix-text {
  flex: 1;
  min-width: 0;
  font-size: 0.9375rem;
  color: var(--orders-log-import-muted);
  text-wrap: pretty;
}

.orders-log-import-plan-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.orders-log-import-plan-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--orders-log-import-ink);
}

.orders-log-import-plan-note {
  font-size: 0.875rem;
  color: var(--orders-log-import-subtle);
  text-wrap: pretty;
}

/* ── Review: the rows that need attention ────────────────────────────────── */
/* The table's own footer, pinned the way the order log pins its totals. The row is always there,
   so a selection appearing in it moves nothing. */
.orders-log-import-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--orders-log-rule);
  border-bottom: 0;
  background: var(--orders-log-head-bg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The row count reads as the order log's line count does, in the column it counts. */
.orders-log-import-table tfoot td[data-col="row"] {
  white-space: nowrap;
  font-weight: 600;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
}

.orders-log-import-bulk {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.orders-log-import-bulk-count {
  font-size: 0.9375rem;
  font-weight: 600;
}

.orders-log-import-scroll {
  overflow: auto;
  /* The same height the pipeline's grid gets. A height is what gives the sticky header
     something to stick to, and what stops 229 rows running off the bottom of the page.
     No border or background here, unlike the pipeline's: that scroller stands on its own
     where this one sits inside a panel that already draws them. */
  max-height: clamp(14rem, calc(100vh - 25rem), 60vh);
  background: var(--color-surface);
}

.orders-log-import-table {
  /* Fixed layout so the colgroup's widths are the widths. Under auto layout a column of
     inputs has nothing to measure — an input with `width: 100%` has no intrinsic size — and
     every correctable column collapses to its padding. With fixed layout the stated widths
     are honoured and the table overflows its scroller when they add up to more than it,
     which they do. */
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

/* Under fixed layout a nowrap header cannot widen its column, so it would spill into the
   next one. These wrap instead. */
.orders-log-import-table thead th {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: bottom;
}

.orders-log-import-table col.orders-log-import-col-pick {
  width: 3rem;
}

.orders-log-import-table col.orders-log-import-col-row {
  width: 5rem;
}

.orders-log-import-table col.orders-log-import-col-reason {
  width: 17rem;
}

.orders-log-import-table col.orders-log-import-col-act {
  width: 10.5rem;
}



/* A row of the review table can run several lines tall — a picker, the reasons, what it was read
   from — so each starts at its top edge and ends on a rule strong enough to see where the next
   one begins. */
.orders-log-import-table td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--orders-log-import-rule-row);
  vertical-align: top;
}

.orders-log-import-table tbody tr:last-child td {
  border-bottom: 0;
}

/* The cell a person has to fill or choose: a red ring and a dot at its corner, so the eye goes
   to it before the reasons column says why. */
.orders-log-import-table td.orders-log-import-cell--decide {
  position: relative;
}

.orders-log-import-table td.orders-log-import-cell--decide::after {
  content: "";
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b3261e;
  pointer-events: none;
}

/* The control itself is ringed, at the field's own height: a cell to fill, not an error box. And it
   looks like a field at rest, where the rest of the grid stays quiet. */
.orders-log-import-table td.orders-log-import-cell--decide :is(input[type="text"], select) {
  background-color: var(--color-surface);
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgb(179 38 30 / 0.12);
}

/* A select still on its prompt reads as a prompt, not as a value. */
.orders-log-import-table select:has(option[value=""]:checked) {
  color: var(--orders-log-import-subtle);
}

/* Focus that reads on any row, held or not. */
.orders-log-import-table :is(input[type="text"], select):focus-visible {
  outline: 2px solid var(--orders-log-import-ink);
  outline-offset: 1px;
}

/* A write in flight: the row it is about says so, and its buttons take no second click. */
.orders-log-import-row:has(.phx-click-loading, .phx-change-loading) {
  cursor: progress;
}

.orders-log-import-row:has(.phx-click-loading) td {
  opacity: 0.6;
  transition: opacity 0.15s ease-in 0.15s;
}

.orders-log-import .btn.phx-click-loading {
  pointer-events: none;
  opacity: 0.7;
}

/* The native select arrow ignores padding and sits against the right edge, a little high in a
   short box; draw our own, centred, with the same inset as the text. As the admin forms do. */
.orders-log-import-table select,
.orders-log-import-order-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b6076' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 14px 14px;
}

.orders-log-import-table select {
  padding-right: 1.9rem;
}

.orders-log-import-order-select {
  background-position: right 0.75rem center;
  background-size: 16px 16px;
}

/* One buyer's order: its customer and market, set once above the lines. */
.orders-log-import-order {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 1.5rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  background: var(--orders-log-import-tint);
  border: 1px solid var(--orders-log-import-rule);
  border-radius: var(--radius-md);
}

.orders-log-import-order-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
}

.orders-log-import-order-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orders-log-import-subtle);
}

.orders-log-import-order-select {
  min-width: 15rem;
  height: 2.25rem;
  padding: 0 2.5rem 0 0.65rem;
  font-size: 0.9375rem;
  color: var(--orders-log-import-ink);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
}

.orders-log-import-order-select:focus-visible {
  outline: 2px solid var(--orders-log-import-ink);
  outline-offset: 1px;
}

.orders-log-import-order-select:has(option[value=""]:checked) {
  color: var(--orders-log-import-subtle);
}

.orders-log-import-order-field--decide .orders-log-import-order-select {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgb(179 38 30 / 0.12);
}

.orders-log-import-order-note {
  font-size: 0.8125rem;
  color: var(--orders-log-import-muted);
}

/* A row held back reads warm against the plain ones, and its edge says so even beside another
   held row. */
.orders-log-import-row--open td {
  background: #fdf9ef;
}

.orders-log-import-row--open td:first-child {
  box-shadow: inset 3px 0 0 var(--orders-log-import-held);
}

.orders-log-import-row--skipped td {
  opacity: 0.45;
}

.orders-log-import-col-pick {
  width: 1px;
  padding-right: 0;
}

.orders-log-import-col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.orders-log-import-col-act {
  width: 1px;
  text-align: right;
  white-space: nowrap;
}

.orders-log-import-col-act .btn + .btn {
  margin-left: 0.35rem;
}

.orders-log-import-row-number {
  font-variant-numeric: tabular-nums;
  color: var(--orders-log-import-label);
}

.orders-log-import-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.orders-log-import-strong {
  font-weight: 600;
}

.orders-log-import-sub {
  font-size: 0.8125rem;
  color: var(--orders-log-import-subtle);
}

.orders-log-import-sub--quiet {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--orders-log-import-label);
}

.orders-log-import-units {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.orders-log-import-units-total {
  font-size: 1.0625rem;
  font-weight: 700;
}

.orders-log-import-units-split {
  font-size: 0.8125rem;
  color: var(--orders-log-import-subtle);
}

/* The reason a row is held back, stated in full rather than badged. */
.orders-log-import-reason {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #b3261e;
  text-wrap: pretty;
}

/* One reason a line, beside the cells they are about. */
.orders-log-import-col-reason .orders-log-import-reason {
  display: block;
  line-height: 1.4;
}

.orders-log-import-col-reason .orders-log-import-reason + .orders-log-import-reason {
  margin-top: 0.15rem;
}

/* What the agent itself noted, first in the detail: the tiebreak a person most often needs. */
.orders-log-import-flags {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--orders-log-import-ink);
}

.orders-log-import-flags li + li {
  margin-top: 0.15rem;
}

.orders-log-import-evidence {
  margin-top: 0.3rem;
  font-size: 0.8125rem;
}

.orders-log-import-evidence-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  list-style: none;
  font-weight: 500;
  color: var(--orders-log-import-link);
  cursor: pointer;
}

.orders-log-import-evidence-summary::-webkit-details-marker {
  display: none;
}

.orders-log-import-evidence-summary::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--transition);
}

.orders-log-import-evidence[open] > .orders-log-import-evidence-summary::before {
  transform: rotate(45deg);
}

.orders-log-import-weak,
.orders-log-import-totals {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--orders-log-import-muted);
}

.orders-log-import-weak li + li,
.orders-log-import-totals li + li {
  margin-top: 0.15rem;
}

.orders-log-import-totals {
  font-variant-numeric: tabular-nums;
}

.orders-log-import-evidence-reference {
  margin: 0.5rem 0 0;
  font-weight: 500;
  color: var(--orders-log-import-ink);
}

.orders-log-import-evidence-row {
  margin-top: 0.3rem;
}

.orders-log-import-evidence-sheet {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orders-log-import-subtle);
}

.orders-log-import-evidence-text {
  display: block;
  padding: 0.35rem 0.5rem;
  font: 0.75rem/1.45 var(--font-mono, ui-monospace, monospace);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--orders-log-import-ink);
  background: var(--orders-log-import-sand);
  border-radius: var(--radius-sm, 4px);
}

/* Accept and Remove stay on screen however far the table scrolls: the decision and its action
   are never a screen apart. */
.orders-log-import-table th.orders-log-import-col-act,
.orders-log-import-table td.orders-log-import-col-act {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--color-surface);
  box-shadow: -1px 0 0 var(--orders-log-import-rule-row), -6px 0 8px -6px rgb(15 23 42 / 0.12);
}

.orders-log-import-row--open td.orders-log-import-col-act {
  background: #fdf9ef;
}

.orders-log-import-act-remove {
  color: var(--orders-log-import-muted);
  background: none;
  border-color: transparent;
}

.orders-log-import-act-remove:hover {
  color: #b3261e;
  background: #fbeceb;
}

/* A cell that is searching is a control, not a value: the ordinary cell input is transparent so
   the table reads as the user's own spreadsheet, which leaves a search box indistinguishable
   from the row behind it. */
.orders-log-import-search {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* What the list hangs from. Without this the list positions against the cell, and the cell's
   padding shows up as a gap between the input and the list under it. */
.orders-log-import-picker {
  position: relative;
}

/* What a search offers for an unresolved key. Built like the app's own menus — same tokens,
   same type — because it is one. */
.orders-log-import-picks {
  /* Out of flow: in flow it grows the row, and every row below it moves while someone types. A
     popover a little below the box and wider than its cell, so an option reads on two lines. */
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  min-width: 100%;
  max-width: 26rem;
  /* The scroller around the table clips this, so keep it short enough to fit under a row near
     the bottom rather than letting eight results run past the edge. */
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.25rem;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* What the customer's file says for the line: the tiebreak, above the options it decides. */
.orders-log-import-picks-reference {
  margin: 0;
  padding: 0.45rem 0.6rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--orders-log-import-ink);
  border-bottom: 1px solid var(--color-border-light);
}

.orders-log-import-picks-reference-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orders-log-import-subtle);
}

.orders-log-import-pick-main {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.orders-log-import-pick-sub {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.75rem;
  color: var(--orders-log-import-muted);
}

.orders-log-import-pick-tag {
  padding: 0.05rem 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--orders-log-import-sel-rule);
  background: var(--orders-log-import-sel-bg);
  border-radius: 999px;
}

.orders-log-import-pick-none {
  padding: 0.55rem 0.6rem;
  font-size: 0.8125rem;
  color: var(--orders-log-import-muted);
}

.orders-log-import-pick {
  display: block;
  width: 100%;
  padding: 0.45rem 0.6rem;
  font-family: var(--font-sans);
  text-align: left;
  white-space: normal;
  color: inherit;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: background var(--transition);
}

.orders-log-import-pick:hover {
  background: var(--color-border-light);
}

/* The option the keyboard has reached, and the focused one: a ring that reads on any row. */
.orders-log-import-pick.is-active,
.orders-log-import-pick:focus-visible {
  background: var(--color-border-light);
  outline: 2px solid var(--orders-log-import-ink);
  outline-offset: -2px;
}

/* The key the row holds now, so the list says which one a pick would replace. */
.orders-log-import-pick[aria-selected="true"] {
  background: var(--orders-log-import-sel-bg);
  box-shadow: inset 3px 0 0 var(--orders-log-import-sel-rule);
}

/* A search that found nothing still says so, in the list's own box. */
.orders-log-import-picks .orders-log-import-reason {
  padding: 0.55rem 0.8rem;
  font-size: 0.875rem;
}

/* The form wrapping a search is layout only. A browser's default form margin would leave a gap
   between the input and the list below it, which is the whole thing they must not have. */
.orders-log-import-table form {
  margin: 0;
}

/* Joined to its list, so the two read as one control rather than two stacked boxes. The
   negative margin collapses the pair of borders into a single line. */

/* The cell must not clip a list that hangs out of it. */
.orders-log-import-table td:has(.orders-log-import-picks) {
  overflow: visible;
  white-space: normal;
}

/* An input whose value the order refused. */
.orders-log-import-cell-input--refused {
  background: var(--color-surface);
  border-color: #b3261e;
}

/* A month the sheet did not give, ringed like any cell to decide. */
.orders-log-import-month-select {
  width: 100%;
  min-width: 9rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
}

/* A correctable cell. Quiet until it is touched: the review table is mostly reading, and a
   grid of boxed inputs reads as a form rather than as the user's own spreadsheet. */
.orders-log-import-cell-input {
  width: 100%;
  /* Explicit, so `width: 100%` is the cell's width and not the cell's width plus padding —
     a content-box input overflows its cell and gets cut off at the edge. */
  box-sizing: border-box;
  /* No floor here: the cell carries the width (see below), and a floor on the input would
     fight it. */
  min-width: 0;
  padding: 0.3rem 0.4rem;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
}

.orders-log-import-cell-input:hover {
  border-color: #d8dce3;
}

.orders-log-import-cell-input:focus {
  background-color: #fff;
  border-color: #e0a93a;
  outline: none;
}

.orders-log-col--num .orders-log-import-cell-input {
  text-align: right;
}

/* Widths come from the colgroup. The shared `.orders-log-notes` would still clip this cell,
   which is right on the pipeline where it holds read-only text and wrong here where it
   holds an input that has to be typable to its end. */
.orders-log-import-table td[data-col="notes"] {
  max-width: none;
  overflow: visible;
}

/* Whole sentences, one per open cell, so this wraps rather than running the table wider.
   Scoped to the table so it outranks `.orders-log-import-table th`, which sets nowrap. */
.orders-log-import-table th.orders-log-import-col-reason,
.orders-log-import-table td.orders-log-import-col-reason {
  white-space: normal;
}

.orders-log-import-empty {
  padding: 2.25rem 1.5rem 2.5rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--orders-log-import-muted);
}

/* ── Finish ──────────────────────────────────────────────────────────────── */
.orders-log-import-finish-lede {
  margin: 0 0 1.35rem;
  max-width: 46rem;
  font-size: 0.9375rem;
  color: var(--orders-log-import-subtle);
  text-wrap: pretty;
}

.orders-log-import-finish-label {
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--orders-log-import-label);
}

.orders-log-import-target,
.orders-log-import-undo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.orders-log-import-target-version {
  font-size: 1rem;
  font-weight: 700;
  color: var(--orders-log-import-ink);
}

/* The importer's menu panel sits lower and wider than the app default. */
.orders-log-import .wholesale-actions-menu {
  flex: 0 0 auto;
}

.orders-log-import .wholesale-actions-menu__list {
  top: 2.4rem;
  width: 17rem;
  box-shadow: 0 4px 14px rgba(16, 33, 55, 0.1);
}

.orders-log-import .wholesale-actions-menu__note {
  line-height: 1.55;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .orders-log-import *,
  .orders-log-import *::before,
  .orders-log-import *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Split button: a real action with the menu's caret welded to its right edge. */
.wholesale-actions-menu--split {
  display: inline-flex;
  flex: 0 0 auto;
}

.wholesale-actions-menu--split .wholesale-actions-menu__primary {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.wholesale-actions-menu--split .wholesale-actions-menu__trigger {
  justify-content: center;
  min-width: 1.95rem;
  margin-left: -1px;
  padding-right: 0.65rem;
  padding-left: 0.65rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.35);
  letter-spacing: 0;
}

/* The trigger for the reading rules. */
.orders-log-import-advanced {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  background: none;
  border: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--orders-log-import-subtle);
  cursor: pointer;
}

.orders-log-import-advanced:hover {
  color: var(--orders-log-import-ink);
}

/* Sized in ems so it tracks the label. Rotates on open rather than swapping glyph. */
.orders-log-import-advanced-caret {
  width: 0.55em;
  height: 0.55em;
  flex: 0 0 auto;
  fill: currentColor;
  transition: transform 140ms ease;
}

.orders-log-import-advanced[aria-expanded="true"] .orders-log-import-advanced-caret {
  transform: rotate(90deg);
}

.orders-log-import-advanced[aria-expanded="true"] {
  margin-bottom: 0.35rem;
  color: var(--orders-log-import-ink);
}

/* The drop target during an upload: same box, different contents. */
.orders-log-import-drop--busy {
  border-style: solid;
  border-color: var(--orders-log-import-sel-rule);
  background: var(--orders-log-import-sel-bg);
  cursor: progress;
  /* Belt and braces with the input's `disabled`: nothing in the zone is clickable. */
  pointer-events: none;
}

.orders-log-import-drop-idle,
.orders-log-import-drop-live {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.orders-log-import-drop-live .orders-log-import-drop-title {
  overflow-wrap: anywhere;
}

.orders-log-import-drop-error {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: #b3261e;
}

/* ---------------------------------------------------------------------------
   Wholesale → EDI monitor (/wholesale/edi). Reuses the wholesale-customers
   header/card shell; adds the per-folder cards and the status chips.
   --------------------------------------------------------------------------- */
.wholesale-edi-page .wholesale-customers-shell {
  max-width: 1280px;
}

.wholesale-edi-header-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.wholesale-edi-notice {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid #f0d9a8;
  background: #fdf6e7;
  color: #633806;
  font-size: 0.875rem;
}

.wholesale-edi-notice--error {
  border-color: #f2c4c4;
  background: #fdeeee;
  color: #7a1f1f;
}

.wholesale-edi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.wholesale-edi-card {
  padding: 0.9rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.wholesale-edi-card__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.wholesale-edi-card__count {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.wholesale-edi-card__meta {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.wholesale-edi-section {
  margin-bottom: 1rem;
}

.wholesale-edi-section h2 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 650;
}

.wholesale-edi-section .wholesale-customers-empty {
  padding: 1rem 1.25rem;
}

.wholesale-edi-chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--color-brand-muted);
  color: var(--color-brand);
}

.wholesale-edi-chip--open { background: #faeeda; color: #633806; }
.wholesale-edi-chip--closed { background: #e1f5ee; color: #0f6e56; }
.wholesale-edi-chip--sandbox { background: #fdf6e7; color: #633806; border: 1px solid #f0d9a8; }

.wholesale-edi-path {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.8125rem;
}

.wholesale-edi-muted {
  color: var(--color-text-subtle);
}

/* Admin → Centric images (image-mirror ops card).
   `vault_missing` and `error` are toned because they are the two numbers someone acts on;
   the rest are context. Deliberately reuses the existing token vocabulary rather than
   introducing a palette. */
.centric-images__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.centric-images__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.centric-images__stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.centric-images__stat--vault-missing {
  border-color: var(--color-warning, #b45309);
}

.centric-images__stat--error {
  border-color: var(--color-danger, #b91c1c);
}

.centric-images__stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.centric-images__stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.centric-images__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.9rem;
  color: var(--color-text-subtle);
  margin-bottom: 1.25rem;
}

.centric-images__empty,
.centric-images__none,
.centric-images__truncated {
  font-size: 0.9rem;
  color: var(--color-text-subtle);
}

.centric-images__error-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  word-break: break-word;
}

/* Preorder/Backorder page-level Activity Journal (PTD-200) */
.plt-backorder-activity-journal-dialog {
  width: min(52rem, 96vw);
  max-width: min(52rem, 96vw);
  max-height: min(90vh, 48rem);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.plt-backorder-activity-journal-panel.shipment-overlay-content {
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 48rem);
  min-height: 0;
  overflow: hidden;
  padding: 1.25rem 1.5rem 1rem;
  box-sizing: border-box;
  width: 100%;
}

.plt-backorder-activity-journal-header {
  flex: 0 0 auto;
  padding-right: 1.75rem;
}

.plt-backorder-activity-journal-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

.plt-backorder-activity-journal-filters {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border-light);
}

.plt-backorder-activity-journal-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.plt-backorder-activity-journal-filter-row label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  min-width: 8rem;
  flex: 1 1 8rem;
}

.plt-backorder-activity-journal-filter-row input,
.plt-backorder-activity-journal-filter-row select {
  font-size: 0.875rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 0.375rem);
  background: var(--color-surface, #fff);
  color: var(--color-text);
  min-height: 2.25rem;
  box-sizing: border-box;
}

.plt-backorder-activity-journal-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.plt-backorder-activity-journal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  margin-top: 0.75rem;
  padding-right: 0.25rem;
}

.plt-backorder-activity-journal-count {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
}

.plt-backorder-activity-journal-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plt-backorder-activity-journal-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border-light);
}

.plt-backorder-activity-journal-item:last-child {
  border-bottom: none;
}

.plt-backorder-activity-journal-item-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.85rem;
}

.plt-backorder-activity-journal-time {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.plt-backorder-activity-journal-sku {
  padding: 0;
  margin: 0;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.3;
  text-align: left;
  vertical-align: baseline;
}

.plt-backorder-activity-journal-event {
  font-size: 0.875rem;
  color: var(--color-text);
}

.plt-backorder-activity-journal-item-meta {
  margin: 0;
  padding-left: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  word-break: break-word;
}

.plt-backorder-activity-journal-pager {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border-light);
}

/* ── Unified list table (.data-grid) ───────────────────────────────────────
   One look for every list screen: Inbound Shipments' type size, headers as
   written, zebra rows with an accent hover, hairline rules. Put the class on
   the <table> inside a `.table-wrap` (pinned header and .col-lock-1/2 columns
   come from that wrapper's rules above). The class is doubled so it outranks
   the per-page `.shipment-table` overrides it replaces. */
.data-grid.data-grid {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  background: #fff;
}

.data-grid.data-grid th,
.data-grid.data-grid td {
  padding: 0.35rem 0.5rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #dbe2ea;
  min-width: 0;
  max-width: none;
  white-space: nowrap;
}

.data-grid.data-grid thead th {
  background: #eef2f6;
  color: #55657a;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.data-grid.data-grid thead th .sortable-header,
.data-grid.data-grid thead th .plt-sort-th,
.data-grid.data-grid thead th button.sortable-header {
  color: var(--color-link);
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.data-grid.data-grid thead th .sortable-header:hover,
.data-grid.data-grid thead th .plt-sort-th:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.data-grid.data-grid tbody tr {
  background: #fff;
}

.data-grid.data-grid tbody tr:nth-child(even) {
  background: #f8fafc;
}

.data-grid.data-grid tbody tr:hover {
  background: #e4edfb;
}

.data-grid.data-grid td.num,
.data-grid.data-grid th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.data-grid.data-grid th[data-col] {
  padding-right: 1.3rem;
}

/* Per-page table rules (.plt-dashboard-table's 0.9375rem, td.plt-col-date, …) out-rank the doubled
   .data-grid above, so on the Launch Tracker, Preorder/Backorder and Inbound pages the standard is
   restated at their specificity. Later in the file, so it wins ties. */
:is(.product-launch-tracking-page, .plt-preorder-backorder-page, .inbound-page) .data-grid.data-grid.data-grid.data-grid {
  font-size: 0.75rem;
}

:is(.product-launch-tracking-page, .plt-preorder-backorder-page, .inbound-page) .data-grid.data-grid.data-grid.data-grid th,
:is(.product-launch-tracking-page, .plt-preorder-backorder-page, .inbound-page) .data-grid.data-grid.data-grid.data-grid td {
  font-size: 0.75rem;
  padding: 0.35rem 0.5rem;
}

/* ...and with it the hideable header's room for its hover "−" (`th[data-col]` above), which the
   shorthand would otherwise take back, leaving the "−" on top of the header's (i). Only headers
   that carry the control: a keyed subtotal cell has no "−" to make room for. */
:is(.product-launch-tracking-page, .plt-preorder-backorder-page, .inbound-page) .data-grid.data-grid.data-grid.data-grid th[data-col]:has(> .pb-col-hide) {
  padding-right: 1.3rem;
}

:is(.product-launch-tracking-page, .plt-preorder-backorder-page, .inbound-page) .data-grid.data-grid.data-grid.data-grid thead th {
  font-size: 0.75rem;
}

/* Compact rows on the Launch Tracker tables. The disclosure toggle (3rem), the product thumbnail
   (2.5rem) and the flex status cell were each taller than a 0.75rem text row, so every row grew to
   ~60px with its content pinned to the top and the status cell shorter than its neighbours. */
.data-grid.data-grid .catalog-disclosure-btn--boxed {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  font-size: 1.125rem;
}

.data-grid.data-grid .product-thumb-img,
.data-grid.data-grid .product-thumb-placeholder {
  width: 1.75rem;
  height: 1.75rem;
}

.product-launch-tracking-page .data-grid.data-grid.data-grid td,
.product-launch-tracking-page .data-grid.data-grid.data-grid th {
  vertical-align: middle;
}

.product-launch-tracking-page .data-grid.data-grid.data-grid.data-grid td {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

/* A flex <td> stops being a table cell: it sat at its content height (~34px) inside a taller row,
   leaving a gap under the status column. Keep it a real cell and space its children with margins. */
.product-launch-tracking-page .plt-dashboard-table td.plt-rollup-status-cell {
  display: table-cell;
  white-space: nowrap;
}

.product-launch-tracking-page .plt-dashboard-table td.plt-rollup-status-cell > * + * {
  margin-left: 0.55rem;
}

/* Preorder/Backorder tables share `.plt-dashboard-table`, whose `table-layout: fixed` +
   `width: max-content` (built for the Launch Tracker Dashboard's <colgroup>) had no widths to
   read here, so the columns came out 130-550px wide and the table 4000px across. Size them to
   their content instead. */
.plt-preorder-backorder-page.inbound-page .shipments-card .shipments-section .plt-table-wrap > table.plt-dashboard-table.data-grid,
.plt-preorder-backorder-page.inbound-page .shipments-card .plt-table-wrap > table.plt-dashboard-table.data-grid {
  table-layout: auto;
  width: max-content;
  min-width: 0;
}

/* ── Links ──────────────────────────────────────────────────────────────────────────────────
   One colour for every text link, whatever class it wears: `--color-link`, underlined, darker on
   hover. Per-page rules used to pick the sage accent, `inherit` (black) or a hard-coded blue, so
   the same kind of link looked different on every screen. `:not(#link)` lifts this above them all
   without `!important`. Chrome (nav, tabs, buttons, badges) is deliberately not in the list. */
:is(
    .table-link,
    .table-sort-link,
    .back-link,
    .catalog-back-link,
    .po-show-back-link,
    .orders-log-import-crumb-link,
    .tracking-link-external,
    .sap-external-link,
    .sap-external-link--header,
    .sap-external-link--overlay-title,
    .sap-external-link--compact,
    .shipment-overlay-title-link,
    .campaign-view-sheet-link,
    .plt-delivery-plan-link,
    .catalog-linklike,
    .product-record-style-link,
    .pim-view-style-link,
    .plt-backorder-inbound-trigger
  ):not(#link) {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

:is(
    .table-link,
    .table-sort-link,
    .back-link,
    .catalog-back-link,
    .po-show-back-link,
    .orders-log-import-crumb-link,
    .tracking-link-external,
    .sap-external-link,
    .sap-external-link--header,
    .sap-external-link--overlay-title,
    .sap-external-link--compact,
    .shipment-overlay-title-link,
    .campaign-view-sheet-link,
    .plt-delivery-plan-link,
    .catalog-linklike,
    .product-record-style-link,
    .pim-view-style-link
  ):not(#link):hover,
.plt-backorder-inbound-trigger:not(#link):hover {
  color: var(--color-link-hover);
}

/* The In-DC ETA opener keeps the issue badge's colour (red when late): that colour is data.
   Only the SKU opener is a plain link. */
.plt-backorder-inbound-trigger:not(td[data-col="sku"] *):not(#link) {
  color: inherit;
}

/* "Open full PO" sat under the overlay's close ×, which is absolutely placed at the panel corner. */
.po-detail-header--overlay .po-overlay-open-full-btn,
.po-overlay-header .po-overlay-open-full-btn {
  margin-right: 2.5rem;
}

/* ── Preorder / Backorder: Active / Recommended tabs, workflow steps, filters, action bar ──
   The page holds two jobs — watching what is live and triaging what could go live — so each
   gets a tab. The Recommended tab then reads top to bottom as: what the two steps are and which
   one is yours → which rows you are looking at → what you can do with the rows you select. */

.pb-view-panel[hidden] {
  display: none !important;
}

/* One "needs attention" colour for pending verification, shared by the tab pill, the row chip
   and the no-longer-listed requests, so the same state always looks the same. */
.plt-preorder-backorder-page {
  --pb-pending-bg: #fff4e5;
  --pb-pending-fg: #8a4b00;
}

.pb-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 1rem 0 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

a.pb-view-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem 0.6rem;
  margin-bottom: -1px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

a.pb-view-tab:hover {
  color: var(--color-text);
  background: var(--color-surface-muted);
}

a.pb-view-tab:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

a.pb-view-tab--active {
  color: var(--color-text);
  border-bottom-color: var(--color-brand);
}

.pb-view-tab-count {
  min-width: 1.75rem;
  padding: 0.05rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

a.pb-view-tab--active .pb-view-tab-count {
  background: var(--color-brand-muted);
  color: var(--color-brand-hover);
}

/* My queue's "waiting on you" badge: the purchase orders page's Awaiting review treatment
   (`.po-area-tab-badge`), in the same darkened coral so white text clears 4.5:1. */
.pb-view-tab-action {
  min-width: 1.75rem;
  padding: 0.05rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-action-badge);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.pb-queue-intro {
  max-width: 75ch;
  margin: 0 0 0.75rem;
}

.pb-queue-sku {
  display: block;
  font-weight: 600;
}

.pb-queue-product {
  display: block;
  font-size: 0.8125rem;
}

.pb-view-tab-pending {
  padding: 0.05rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--pb-pending-bg);
  color: var(--pb-pending-fg);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Two-step workflow explainer. The viewer's own step is outlined so it reads at a glance. */
.pb-workflow {
  margin: 0.25rem 0 1rem;
}

/* The page card stretches to the widest table; keep the tabs, headings and prose-and-controls
   blocks at a readable width inside it instead of letting them run the table's full width. They
   are page chrome, so like the card header they are also bounded by the window (the 2.5rem inset
   is the page gutter plus the section padding) and pinned to its left edge: in a narrow window
   they wrap instead of running off-screen, and they stay in view while the page scrolls sideways
   across a table. */
.pb-view-tabs,
.pb-view-panel > .plt-section-heading,
.pb-workflow,
.pb-filter-panel,
.pb-admin-tools,
.pb-action-bar,
.pb-stranded {
  max-width: min(72rem, calc(100vw - 5rem));
  position: sticky;
  left: 2.5rem;
}

.pb-workflow-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pb-workflow-step {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

/* Only the viewer's own step is set off; the other reads as context. */
.pb-workflow-step--mine {
  border-color: var(--color-brand);
  background: var(--color-brand-muted);
}

.pb-workflow-step-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  /* Surface, not surface-muted: the step card is already surface-muted, and a disc the colour of
     its card vanished, leaving the other step's number floating. */
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.875rem;
}

.pb-workflow-step--mine .pb-workflow-step-num {
  background: var(--color-brand);
  color: #fff;
}

.pb-workflow-step-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.pb-workflow-step-text strong {
  color: var(--color-text);
  font-size: 0.9375rem;
}

.pb-workflow-role {
  max-width: 75ch;
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text);
}

/* Candidate filters: grouped, labelled, and allowed to wrap — they used to run off the page. */
.pb-filter-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.5rem;
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.pb-filter-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.pb-filter-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.pb-filter-range {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
}

.pb-filter-range-sep {
  padding-bottom: 0.4rem;
  color: var(--color-text-subtle);
}

.pb-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8125rem;
}

.pb-filter-field--wide {
  flex: 1 1 20rem;
}

.pb-filter-label {
  color: var(--color-text-muted);
}

.pb-filter-number {
  width: 6rem;
}

.pb-filter-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}

/* A filter checkbox with its info tip beside it, outside the label. */
.pb-filter-check-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.pb-filter-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
}

.pb-filter-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.pb-filter-summary {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.8125rem;
}

/* Admin re-admit tool: an occasional repair, so it stays folded away until asked for. */
.pb-admin-tools {
  margin: 0 0 1rem;
}

.pb-admin-tools-summary {
  display: inline-block;
  padding: 0.25rem 0;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-link);
}

.pb-admin-tools-summary:hover {
  color: var(--color-link-hover);
}

.pb-admin-tools-summary:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.pb-admin-tools-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  padding: 0.5rem 0 0;
}

.pb-admin-tools-hint {
  flex-basis: 100%;
  margin: 0;
  max-width: 75ch;
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* What you can do with the selected rows — only the buttons this viewer's role may use. Kept
   next to the Experience picker rather than pushed right: the page card is as wide as the widest
   table, so a right-aligned button can land off-screen. */
.pb-action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem 1.5rem;
  margin: 0.5rem 0 0.75rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.pb-action-experience {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.875rem;
}

.pb-action-experience select {
  width: auto;
}

.pb-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Row badges on Recommended: pending request, re-admitted, wholesale-deprioritized. */
.plt-rec-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.plt-rec-badge--pending {
  background: var(--pb-pending-bg);
  color: var(--pb-pending-fg);
  font-weight: 600;
}

/* Requests no longer on the Recommended list: a plain divided list, not another card. */
.pb-stranded {
  margin: 1.5rem 0 0.5rem;
}

.pb-stranded-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  font-size: 1rem;
  text-wrap: balance;
}

.pb-stranded-body {
  max-width: 65ch;
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
}

.pb-stranded-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border-light);
}

.pb-stranded-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.875rem;
}

.pb-stranded-sku {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pb-stranded-product {
  min-width: 0;
}

.pb-stranded-meta {
  flex: 1 1 16rem;
  min-width: 0;
  font-size: 0.8125rem;
}

.pb-stranded-clear {
  margin-left: auto;
}

/* ── Admin → Mailing lists (page-scoped) ─────────────────────────────── */
.admin-ml { --ml-ink: #1c2b4b; --ml-ink-2: #4d5a73; --ml-line: #d5dbe6; --ml-soft: #f4f6fa; }
.admin-ml__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin: 8px 0 24px; flex-wrap: wrap; }
.admin-ml__title { margin: 0 0 6px; font-size: 28px; font-weight: 600; color: var(--ml-ink); }
.admin-ml__desc { margin: 0; max-width: 64ch; color: var(--ml-ink-2); }
.admin-ml__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.admin-ml__stat { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: #fff; border: 1px solid var(--ml-line); border-radius: 12px; }
.admin-ml__stat-label { font-size: 13px; color: var(--ml-ink-2); }
.admin-ml__stat-value { font-size: 28px; font-weight: 600; color: var(--ml-ink); }
.admin-ml__stat-sub { font-size: 13px; color: var(--ml-ink-2); }
.admin-ml__gaps { padding: 16px 20px; margin-bottom: 20px; background: #fff7e8; border: 1px solid #f0d49a; border-radius: 12px; color: #5c3b00; }
.admin-ml__gaps-title { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.admin-ml__gaps-group h3 { margin: 8px 0 4px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.admin-ml__gaps-group ul { margin: 0; padding-left: 18px; }
.admin-ml__panel { padding: 20px 24px; margin-bottom: 20px; background: #fff; border: 1px solid var(--ml-line); border-radius: 12px; }
.admin-ml__panel h2 { margin: 0 0 4px; font-size: 18px; color: var(--ml-ink); }
/* Text inputs stack in a narrow left column; the notification switches fill the right. One row of
   three stretched inputs over a full-width switch grid reads badly on a wide screen. */
.admin-ml__fields { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); column-gap: 32px; row-gap: 16px; margin: 16px 0; align-items: start; }
.admin-ml__fields > .admin-ml__field { grid-column: 1; }
.admin-ml__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.admin-ml__field label, .admin-ml__field legend { font-size: 13px; font-weight: 500; color: var(--ml-ink); }
.admin-ml__input { font: inherit; font-size: 14px; height: 40px; padding: 0 12px; border: 1px solid var(--ml-line); border-radius: 9px; background: #fff; color: var(--ml-ink); width: 100%; }
.admin-ml__input:focus { outline: none; border-color: var(--ml-ink); box-shadow: 0 0 0 3px rgba(28, 43, 75, .14); }
/* The native select arrow ignores padding and sits against the right edge; draw our own so it is
   vertically centred and inset like the text. */
select.admin-ml__input { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d5a73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; }
.admin-ml__hint { margin: 0; font-size: 12px; color: var(--ml-ink-2); }
.admin-ml__error { margin: 0; font-size: 12px; color: #b42318; }
.admin-ml__events { grid-column: 2; grid-row: 1 / span 3; align-content: start; border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(220px, calc((100% - 16px) / 3)), 1fr)); gap: 8px; }
.admin-ml__events legend { grid-column: 1 / -1; margin-bottom: 4px; }
.admin-ml__toggle { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--ml-line); border-radius: 10px; cursor: pointer; }
.admin-ml__toggle:has(input:checked) { background: var(--ml-soft); border-color: #c3cbd9; }
/* The checkbox itself is drawn as the switch, so it stays the control the form submits and the
   keyboard reaches. */
.admin-ml__toggle input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 40px; height: 24px; margin: 0 0 0 auto; border-radius: 999px; background: #b9c2d3; cursor: pointer; transition: background .15s; }
.admin-ml__toggle input[type="checkbox"]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .2); transition: transform .15s; }
.admin-ml__toggle input[type="checkbox"]:checked { background: var(--ml-ink); }
.admin-ml__toggle input[type="checkbox"]:checked::before { transform: translateX(16px); }
.admin-ml__toggle input[type="checkbox"]:focus-visible { outline: 2px solid var(--ml-ink); outline-offset: 2px; }
.admin-ml__actions { display: flex; justify-content: flex-end; gap: 8px; }
.admin-ml__toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.admin-ml__tabs { display: inline-flex; gap: 4px; padding: 4px; background: #e9edf4; border-radius: 10px; }
.admin-ml__tab { font: inherit; font-size: 14px; font-weight: 500; height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ml-ink-2); cursor: pointer; }
.admin-ml__tab[aria-pressed="true"] { background: #fff; color: var(--ml-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.admin-ml__tab-count { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #d8dee8; font-size: 12px; }
.admin-ml__search { width: min(320px, 100%); }
.admin-ml__lists { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.admin-ml__card { background: #fff; border: 1px solid var(--ml-line); border-radius: 12px; }
.admin-ml__card.is-paused { background: #fafbfc; }
.admin-ml__row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; flex-wrap: wrap; }
.admin-ml__expander { font: inherit; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ml-ink); cursor: pointer; text-align: left; }
.admin-ml__expander:hover .admin-ml__lname { text-decoration: underline; text-underline-offset: 3px; }
.admin-ml__chev { display: inline-block; transition: transform .15s; }
.admin-ml__chev.is-open { transform: rotate(90deg); }
.admin-ml__lname { font-weight: 600; }
.admin-ml__badge { font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px; }
.admin-ml__badge--external_supplier { background: #e3e9f5; color: var(--ml-ink); }
.admin-ml__badge--internal_production { background: #f5ead9; color: #6b400b; }
.admin-ml__sap { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--ml-ink-2); }
.admin-ml__chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 240px; }
.admin-ml__chip { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--ml-soft); color: var(--ml-ink); }
.admin-ml__avatars { display: flex; }
.admin-ml__avatars .admin-ml__avatar + .admin-ml__avatar { margin-left: -6px; }
.admin-ml__avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; font-size: 11px; font-weight: 600; color: var(--ml-ink); }
.admin-ml__avatar--t0 { background: #e3e9f5; } .admin-ml__avatar--t1 { background: #f3e7d6; } .admin-ml__avatar--t2 { background: #dfeee6; }
.admin-ml__avatar--t3 { background: #ece3f1; } .admin-ml__avatar--t4 { background: #f1e1e1; }
.admin-ml__count { font-size: 13px; color: var(--ml-ink-2); }
.admin-ml__controls { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.admin-ml__switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ml-ink); cursor: pointer; }
.admin-ml__track { position: relative; width: 40px; height: 24px; border-radius: 999px; background: #b9c2d3; transition: background .15s; }
.admin-ml__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.admin-ml__switch[aria-checked="true"] .admin-ml__track { background: var(--ml-ink); }
.admin-ml__switch[aria-checked="true"] .admin-ml__track::after { transform: translateX(16px); }
.admin-ml__icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--ml-ink-2); cursor: pointer; }
.admin-ml__icon:hover { background: #eef1f6; color: var(--ml-ink); }
.admin-ml__icon--danger:hover { background: #fdecea; color: #b42318; }
.admin-ml__confirm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; padding: 12px 14px; border-radius: 10px; background: #fdecea; color: #7a1a12; }
.admin-ml__confirm .btn-danger { background: #b42318; border-color: #b42318; color: #fff; }
.admin-ml__body { padding: 0 18px 18px; border-top: 1px solid var(--ml-line); }
.admin-ml__rec-title { margin: 16px 0 8px; font-size: 14px; font-weight: 600; color: var(--ml-ink); }
.admin-ml__none { margin: 0 0 12px; color: var(--ml-ink-2); }
.admin-ml__rec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-ml__rec-table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--ml-ink-2); padding: 6px 8px; border-bottom: 1px solid var(--ml-line); }
.admin-ml__rec-table td { padding: 8px; border-bottom: 1px solid #eef1f5; vertical-align: middle; }
.admin-ml__rec-email { display: inline-flex; align-items: center; gap: 10px; }
.admin-ml__rec:hover { background: #f6f8fb; }
.admin-ml__rec .is-muted, .admin-ml__rec-table .is-muted { color: #8a94a8; }
.admin-ml__rec-actions { text-align: right; white-space: nowrap; }
/* The add row and the inline edit row share one grid, so their fields line up: a fixed actions
   column (wide enough for Cancel + Save) keeps the flexible columns the same width in both. */
.admin-ml__add { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) 9.5rem; gap: 8px; margin-top: 12px; align-items: start; }
.admin-ml__add > :last-child { justify-self: end; display: inline-flex; gap: 8px; }
.admin-ml__rec-table td[colspan] { padding-left: 0; padding-right: 0; }
.admin-ml__rec-table .admin-ml__add { margin-top: 0; }
.admin-ml__empty { color: var(--ml-ink-2); }
@media (max-width: 900px) {
  .admin-ml__stats, .admin-ml__fields, .admin-ml__add { grid-template-columns: minmax(0, 1fr); }
  .admin-ml__fields > .admin-ml__field, .admin-ml__events { grid-column: auto; grid-row: auto; }
  .admin-ml__rec-table thead { display: none; }
  .admin-ml__rec-table tr, .admin-ml__rec-table td { display: block; }
}

/* ── PO page → Email history dialog (reuses the date-history dialog shell) ─────────────────── */
.po-date-history-dialog.po-email-history { width: min(880px, 100%); }
.po-email-history__empty { margin: 0; padding: 1rem 1.15rem 1.25rem; color: var(--color-text-muted); }
.po-email-history__table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.po-email-history__table th { text-align: left; font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); padding: 0.6rem 1.15rem; border-bottom: 1px solid var(--color-border); }
.po-email-history__table td { padding: 0.65rem 1.15rem; border-bottom: 1px solid var(--color-border-light); vertical-align: top; overflow-wrap: anywhere; }
.po-email-history__table tr:last-child td { border-bottom: 0; }
.po-email-history__when { white-space: nowrap; }

/* ── Phone header cascade winners ─────────────────────────────────────────────
   The ≤640px block earlier in this file sets the phone chrome, but later equal-
   specificity base rules (`.po-area-tabs` flex-wrap: wrap around the PO section,
   density `.app-header-bar` padding) would otherwise win. Re-assert here so the
   56px bar and 48px scrolling section strip actually compute on phones. */
@media (max-width: 640px) {
  .app-header-bar {
    height: 56px;
    padding: 0;
    box-sizing: border-box;
  }

  .po-area-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    height: 48px;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.5rem;
    padding: 0 1rem 0 0;
    border-bottom: 1px solid var(--color-border);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 2rem), transparent 100%);
  }

  .po-area-tabs::-webkit-scrollbar {
    display: none;
  }

  a.po-area-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.5rem 0.15rem;
    margin-bottom: 0;
  }
}


/* ── PIM Shopify launch board (/pim/shopify-launch) ─────────────────────────────────────────
   A triage surface: header + actions, window tabs and search, a status summary that doubles as
   the status filter, a launch calendar, then one folding card per launch.
   Status colours are semantic and their own set (never --color-brand); every one also carries a
   word, so nothing is colour-only. Text/background pairs clear WCAG AA. */
.launch-board {
  --launch-blocked-fg: #b42318;
  --launch-blocked-bg: #fef3f2;
  --launch-blocked-solid: #d92d20;
  --launch-not_in_catalog-fg: #475467;
  --launch-not_in_catalog-bg: #f2f4f7;
  --launch-not_in_catalog-solid: #98a2b3;
  --launch-needs_pdp-fg: #93370d;
  --launch-needs_pdp-bg: #fffaeb;
  --launch-needs_pdp-solid: #f79009;
  --launch-ready-fg: #067647;
  --launch-ready-bg: #ecfdf3;
  --launch-ready-solid: #17b26a;
  --launch-live-fg: #1e3a5f;
  --launch-live-bg: #e8f1f9;
  --launch-live-solid: #1e3a5f;
}

.launch-board__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 1rem;
}
.launch-board__subtitle {
  margin: 0;
  max-width: 70ch;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}
.launch-board__refreshed {
  margin: 0.25rem 0 0;
  color: var(--color-text-subtle);
  font-size: 0.75rem;
}
.launch-board__actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.launch-board__section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
}

/* Popover panels for the occasional actions (import, new launch). */
.launch-popover {
  position: relative;
}
.launch-popover > summary {
  list-style: none;
  cursor: pointer;
}
.launch-popover > summary::-webkit-details-marker {
  display: none;
}
.launch-popover__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  width: min(560px, calc(100vw - 32px));
  padding: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
}

.launch-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.8125rem;
}
.launch-form__label {
  font-weight: 600;
}
.launch-form__row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.launch-form__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}
.launch-form--grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.launch-form--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}
.launch-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
}
.launch-form__field--wide {
  grid-column: 1 / -1;
}
.launch-form__field input,
.launch-form__field select {
  min-height: var(--filter-bar-control-height);
}
.launch-form__input--style {
  width: 7.5rem;
}
.launch-form__input--short {
  width: 5rem;
}
.launch-form__submit {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.launch-import-preview {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-brand-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
}
.launch-import-preview p {
  margin: 0 0 0.5rem;
}
.launch-import-preview__skipped {
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
  color: var(--launch-blocked-fg, #b42318);
}
.launch-import-preview__actions {
  display: flex;
  gap: 0.5rem;
}

/* Toolbar: window tabs + search. */
.launch-board__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.launch-tabs {
  display: inline-flex;
  padding: 2px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.launch-tabs__tab {
  padding: 0.3rem 0.85rem;
  min-height: var(--filter-bar-control-height);
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
}
.launch-board a.launch-tabs__tab:hover {
  color: var(--color-text);
  text-decoration: none;
}
.launch-board a.launch-tabs__tab.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.launch-search input {
  width: min(320px, 100%);
  min-height: var(--filter-bar-control-height);
  padding: 0 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  background: var(--color-surface);
}

/* Status summary tiles — also the status filter. */
.launch-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.launch-board a.launch-summary__tile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.8rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.launch-board a.launch-summary__tile:hover {
  border-color: var(--color-text-subtle);
  text-decoration: none;
}
.launch-board a.launch-summary__tile.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.launch-summary__count {
  font-size: 1.375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.launch-summary__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.launch-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex: none;
}
.launch-dot--blocked { background: var(--launch-blocked-solid); }
.launch-dot--not_in_catalog { background: var(--launch-not_in_catalog-solid); }
.launch-dot--needs_pdp { background: var(--launch-needs_pdp-solid); }
.launch-dot--ready { background: var(--launch-ready-solid); }
.launch-dot--live { background: var(--launch-live-solid); }

/* Stacked status bar (calendar rows + launch headers). */
.launch-status-bar {
  display: flex;
  width: 100%;
  min-width: 80px;
  height: 8px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-border-light);
  gap: 1px;
}
.launch-status-bar__seg--blocked { background: var(--launch-blocked-solid); }
.launch-status-bar__seg--not_in_catalog { background: var(--launch-not_in_catalog-solid); }
.launch-status-bar__seg--needs_pdp { background: var(--launch-needs_pdp-solid); }
.launch-status-bar__seg--ready { background: var(--launch-ready-solid); }
.launch-status-bar__seg--live { background: var(--launch-live-solid); }

/* Launch calendar. */
.launch-calendar {
  margin-bottom: 1.25rem;
}
.launch-calendar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.launch-calendar__day + .launch-calendar__day {
  border-top: 1px solid var(--color-border-light);
}
.launch-board a.launch-calendar__link {
  display: grid;
  grid-template-columns: 11rem 7rem 13rem minmax(120px, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.8125rem;
  color: var(--color-text);
  text-decoration: none;
}
.launch-board a.launch-calendar__link:hover {
  background: var(--color-surface-muted);
  text-decoration: none;
}
.launch-calendar__date {
  font-weight: 600;
}
.launch-calendar__rel,
.launch-calendar__meta {
  color: var(--color-text-muted);
}

/* Launch cards. */
.launch-card {
  margin-bottom: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.launch-card--overdue,
.launch-card--at_risk { border-left-color: var(--launch-blocked-solid); }
.launch-card--on_track { border-left-color: var(--launch-needs_pdp-solid); }
.launch-card--ready { border-left-color: var(--launch-ready-solid); }
.launch-card--live { border-left-color: var(--launch-live-solid); }

.launch-card__header {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto auto minmax(140px, 220px);
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
}
.launch-card__header::-webkit-details-marker {
  display: none;
}
.launch-card__header:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}
.launch-card__chevron::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(-45deg);
  transition: transform var(--transition);
}
.launch-card__anchor {
  display: block;
  scroll-margin-top: 1rem;
}
.launch-card__fold[open] .launch-card__chevron::before {
  transform: rotate(45deg);
}
.launch-card__title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.launch-card__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.launch-card__meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.launch-card__date {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.launch-card__date-main {
  font-weight: 500;
}
.launch-card__date-rel {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.launch-card__progress {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.launch-card__count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.launch-card__table {
  border-top: 1px solid var(--color-border-light);
  /* Short tables in a card: wide rows scroll inside the card, never the page (hence
     .table-wrap--unlocked — there is no long thead to pin). */
  overflow-x: auto;
  max-width: 100%;
}
.launch-card__table .data-table {
  width: 100%;
  margin: 0;
}
.launch-card__table .data-table td {
  vertical-align: top;
}
.launch-card__empty {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}
.launch-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-border-light);
  background: var(--color-surface-muted);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.launch-add {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.launch-add > summary {
  list-style: none;
  cursor: pointer;
  align-self: flex-start;
}
.launch-add > summary::-webkit-details-marker {
  display: none;
}
.launch-card__delete {
  color: var(--launch-blocked-fg);
}

/* Health pill (launch) and status badge (colorway). */
.launch-health,
.launch-status {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.launch-health--overdue,
.launch-health--at_risk { color: var(--launch-blocked-fg); background: var(--launch-blocked-bg); }
.launch-health--on_track { color: var(--launch-not_in_catalog-fg); background: var(--launch-not_in_catalog-bg); }
.launch-health--ready { color: var(--launch-ready-fg); background: var(--launch-ready-bg); }
.launch-health--live { color: var(--launch-live-fg); background: var(--launch-live-bg); }

.launch-status--blocked { color: var(--launch-blocked-fg); background: var(--launch-blocked-bg); }
.launch-status--not_in_catalog { color: var(--launch-not_in_catalog-fg); background: var(--launch-not_in_catalog-bg); }
.launch-status--needs_pdp { color: var(--launch-needs_pdp-fg); background: var(--launch-needs_pdp-bg); }
.launch-status--ready { color: var(--launch-ready-fg); background: var(--launch-ready-bg); }
.launch-status--live { color: var(--launch-live-fg); background: var(--launch-live-bg); }

/* Rows. */
.launch-row__colorway {
  min-width: 10rem;
}
.launch-row__name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
}
.launch-row__cc {
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}
.launch-row__style {
  font-size: 0.75rem;
}
.launch-row__workflow {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}
.launch-row__gaps {
  max-width: 34rem;
}
.launch-row__actions {
  white-space: nowrap;
  text-align: right;
}
.launch-task-form {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}
.launch-task-form select {
  font-size: 0.75rem;
  max-width: 9rem;
}
.launch-icon-btn {
  width: 28px;
  height: 28px;
  margin-left: 0.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.launch-icon-btn:hover {
  border-color: var(--launch-blocked-solid);
  color: var(--launch-blocked-fg);
  background: var(--launch-blocked-bg);
}

/* Completeness score: bar + % + n/m (the count makes "92%" actionable). */
.launch-score {
  display: inline-grid;
  grid-template-columns: 48px auto;
  column-gap: 0.4rem;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.launch-score__track {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-border-light);
  overflow: hidden;
}
.launch-score__fill {
  display: block;
  height: 100%;
}
.launch-score--full .launch-score__fill { background: var(--launch-ready-solid); }
.launch-score--partial .launch-score__fill { background: var(--launch-needs_pdp-solid); }
.launch-score--low .launch-score__fill { background: var(--launch-blocked-solid); }
.launch-score__pct {
  font-size: 0.75rem;
  font-weight: 600;
}
.launch-score__count {
  grid-column: 2;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

/* What's missing: a one-line summary by where the fix lives; chips on demand. */
.launch-gaps > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.75rem;
}
.launch-gaps > summary::-webkit-details-marker {
  display: none;
}
.launch-gaps__toggle {
  color: var(--color-link);
}
.launch-gaps__toggle--hide,
.launch-gaps[open] .launch-gaps__toggle--show {
  display: none;
}
.launch-gaps[open] .launch-gaps__toggle--hide {
  display: inline;
}
.launch-gaps__label {
  color: var(--color-text-muted);
}
.launch-gaps__owner {
  padding: 0.05rem 0.45rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
}
.launch-gaps__owner--pim_attributes {
  background: var(--color-brand-muted);
}
.launch-gaps__none {
  font-size: 0.75rem;
  color: var(--launch-ready-fg);
}
.launch-gaps__detail {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.launch-gaps__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}
.launch-gaps__group-label {
  min-width: 6.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.launch-board .pim-missing-chip {
  font-size: 0.6875rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-full);
  background: var(--launch-needs_pdp-bg);
  border: 1px solid #fedf89;
  color: var(--color-text);
  text-decoration: none;
}
.launch-board .pim-missing-chip--unsourced {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}
.launch-board a.pim-missing-chip--link {
  background: var(--color-brand-muted);
  border: 1px dashed var(--color-brand);
  color: var(--color-link);
}
.launch-board a.pim-missing-chip--link:hover {
  background: #d6e6f5;
  text-decoration: none;
}

.launch-empty {
  padding: 2rem;
  text-align: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}
.launch-empty p {
  margin: 0 0 0.75rem;
}

@media (max-width: 1100px) {
  .launch-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .launch-card__header {
    grid-template-columns: 1rem minmax(0, 1fr) auto;
  }
  .launch-card__progress {
    grid-column: 2 / -1;
  }
  .launch-board a.launch-calendar__link {
    grid-template-columns: 1fr auto;
  }
}

/* Side drawer (PanoramaWeb.Drawer): a dialog on the right edge, in the Order Log's card style. While
   one is open the page behind it holds still: the root does not scroll, and the panel keeps a
   scroll that reaches its end rather than handing it on to the page. */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
:root:has(.drawer) {
  overflow: hidden;
}
.drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(16, 33, 55, 0.22);
  animation: drawer-fade 160ms ease-out;
}
.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-width: 92vw;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
  animation: drawer-in 200ms ease-out;
}
.drawer-panel--md {
  width: 29rem;
}
.drawer-panel--lg {
  width: 32rem;
}
.drawer-panel--xl {
  width: 42rem;
}
.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--color-border);
}
.drawer-heading {
  min-width: 0;
}
.drawer-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}
.drawer-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.drawer-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.55rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.drawer-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--color-text);
}
.drawer-subtitle {
  margin: 0.1rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
}
.drawer-close:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}
.drawer-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.drawer-close svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
}
.drawer-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--color-border-light);
  border-bottom: 1px solid var(--color-border);
}
.drawer-fact {
  padding: 0.8rem 1.25rem 0.85rem;
  background: var(--color-surface);
}
.drawer-fact-label {
  margin-bottom: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.drawer-fact-value {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.drawer-fact-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}
.drawer-body {
  flex: 1 1 auto;
  padding: 0.75rem 0 1rem;
}
.drawer-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.9rem 1.25rem 1.25rem;
  border-top: 1px solid var(--color-border-light);
}
@keyframes drawer-in {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes drawer-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .drawer-panel,
  .drawer-scrim {
    animation: none;
  }
}

/* Order Log size breakdown (PanoramaWeb.Wholesale.Orders.Log.SizeDrawer). */
.size-drawer-grid {
  display: flex;
  flex-direction: column;
}
.size-drawer-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 4.5rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 1.25rem;
  font-size: 0.875rem;
  color: var(--color-text);
}
.size-drawer-row:not(.size-drawer-row--head):hover {
  background: #f8fafc;
}
.size-drawer-row--head {
  padding-top: 0.15rem;
  padding-bottom: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.size-drawer-size {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.size-drawer-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.size-drawer-bars {
  display: flex;
  min-width: 0;
}
/* Projected, not yet real: an outline with no fill. */
.size-drawer-bar {
  display: block;
  box-sizing: border-box;
  height: 10px;
  min-width: 0;
  border: 2px dotted var(--color-brand);
  border-radius: 2px;
  background: transparent;
}
/* Order Log inventory breakdown (PanoramaWeb.Wholesale.Orders.Log.InventoryDrawer): the size, then
   the seven steps of its stock waterfall, with the line's totals ruled off below. Seven figures
   share the drawer, so the headings drop the caps and, on a narrow screen, wrap inside their own
   column rather than run into the next; a negative figure is red. When the stock was read sits
   above the figures, and a legend of one line per column below them. */
.size-drawer-row--inventory {
  grid-template-columns: 2.75rem repeat(7, minmax(0, 1fr));
  gap: 0.75rem;
}
.size-drawer-row--inventory.size-drawer-row--head {
  align-items: end;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}
.size-drawer-row--inventory.size-drawer-row--head > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.size-drawer-taken-at {
  margin: 0 1.25rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.size-drawer-legend {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.2rem 0.75rem;
  margin: 0;
}
.size-drawer-legend > div {
  display: contents;
}
.size-drawer-legend dt {
  font-weight: 600;
  color: var(--color-text);
}
.size-drawer-legend dd {
  margin: 0;
}
.size-drawer-legend-note {
  margin: 0.6rem 0 0;
}
.size-drawer-num.is-negative {
  color: var(--orders-log-red-fg);
}
.size-drawer-row--total {
  margin-top: 0.25rem;
  border-top: 1px solid var(--color-border-light);
  padding-top: 0.55rem;
  font-weight: 600;
}
.size-drawer-row--total:hover {
  background: transparent;
}
.size-drawer-empty {
  margin: 0.5rem 1.25rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: #f8fafc;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
/* Order Log sales order drawer (PanoramaWeb.Wholesale.Orders.Log.SalesOrderDrawer). */
.orders-log-sales-order-grid {
  display: flex;
  flex-direction: column;
}
.orders-log-sales-order-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 4.25rem 4.75rem 5rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 1.25rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.orders-log-sales-order-row.is-on-line {
  color: var(--color-text);
}
.orders-log-sales-order-row:not(.orders-log-sales-order-row--head):hover {
  background: #f8fafc;
}
.orders-log-sales-order-row--head {
  padding-top: 0.15rem;
  padding-bottom: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.orders-log-sales-order-item {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.orders-log-sales-order-material {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.orders-log-sales-order-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.orders-log-sales-order-row.is-on-line [data-col="booked"] {
  font-weight: 600;
}
/* The grid's total units, as the button that opens a line's size breakdown; Partner and Customer
   no. as the buttons that open the account summary, Style, Model and Color the product. */
.orders-log-sizes-open,
.orders-log-cell-open {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: inherit;
  text-decoration: underline dotted var(--color-text-subtle);
  text-underline-offset: 3px;
  cursor: pointer;
}
.orders-log-cell-open {
  max-width: 100%;
  overflow: hidden;
  text-align: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.orders-log-sizes-open:hover,
.orders-log-cell-open:hover {
  color: var(--color-brand);
  text-decoration-color: currentColor;
}
.orders-log-sizes-open:focus-visible,
.orders-log-cell-open:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.size-drawer-sources {
  margin: 0.75rem 1.25rem 0;
  padding: 0.7rem 0.95rem;
  list-style: none;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: #f8fafc;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.size-drawer-notice {
  margin: 0.75rem 1.25rem 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-brand-muted);
  border-radius: var(--radius-md);
  background: var(--color-brand-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text);
}
/* Order Log recent exports (PanoramaWeb.Wholesale.Orders.Log.ExportsDrawer). */
.orders-exports-empty {
  margin: 0.5rem 1.25rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: #f8fafc;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.orders-exports-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.orders-exports-item {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-border-light);
}
.orders-exports-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}
.orders-exports-status {
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.orders-exports-status--failed {
  color: var(--color-danger-text, #8a1c1c);
}
.orders-exports-when,
.orders-exports-filters {
  margin: 0.2rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.orders-exports-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
/* Order Log open imports (PanoramaWeb.Wholesale.Orders.Log.ImportsDrawer), which reuses the exports
   drawer's list and adds a heading per section: the viewer's own, then everyone else's. */
.orders-imports-section + .orders-imports-section {
  border-top: 1px solid var(--color-border-light);
}
.orders-imports-heading {
  margin: 0.75rem 1.25rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.orders-imports-number {
  flex: none;
  padding: 0.05rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-subtle);
  background: var(--color-border-light);
  border-radius: 999px;
}

.orders-imports-file {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Order Log account summary (PanoramaWeb.Wholesale.Orders.Log.Summary), whose sections the product
   details share. */
.summary-drawer-section {
  padding: 0.5rem 0 0.75rem;
}
.summary-drawer-section + .summary-drawer-section {
  border-top: 1px solid var(--color-border-light);
}
.summary-drawer-heading {
  margin: 0.35rem 1.25rem 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
}
.summary-drawer-grid {
  display: flex;
  flex-direction: column;
}
.summary-drawer-row {
  display: grid;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--color-text);
}
.summary-drawer-grid--flow .summary-drawer-row {
  grid-template-columns: 5rem minmax(0, 1fr) 4rem 4rem 4rem;
}
.summary-drawer-grid--mix .summary-drawer-row {
  grid-template-columns: minmax(0, 1fr) 4rem 4rem 3.25rem;
}
.summary-drawer-row:not(.summary-drawer-row--head):hover {
  background: #f8fafc;
}
.summary-drawer-row--head {
  padding-top: 0.1rem;
  padding-bottom: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.summary-drawer-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.summary-drawer-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.summary-drawer-bars {
  display: flex;
  min-width: 0;
}
/* A month's plan as an outline, filled as far as it is booked. */
.summary-drawer-bar {
  display: block;
  box-sizing: border-box;
  height: 10px;
  min-width: 0;
  border: 1px solid var(--color-brand);
  border-radius: 2px;
  overflow: hidden;
}
.summary-drawer-bar-fill {
  display: block;
  height: 100%;
  background: var(--color-brand);
}
.summary-drawer-grid--variants .summary-drawer-row {
  grid-template-columns: 3.5rem minmax(0, 1fr) 8.5rem;
}
.summary-drawer-mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
/* Order Log product details (PanoramaWeb.Wholesale.Orders.Log.ProductDrawer). */
.product-drawer-image {
  display: block;
  max-width: 100%;
  max-height: 12rem;
  margin: 0.25rem auto 0.5rem;
  object-fit: contain;
}
.product-drawer-attributes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0.15rem 1.25rem 0.25rem;
}
.product-drawer-attribute dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.product-drawer-attribute dd {
  margin: 0.1rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text);
}
.summary-drawer-more {
  margin: 0.25rem 1.25rem 0;
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}
/* Order Log inbound POs (PanoramaWeb.Wholesale.Orders.Log.InboundPos). */
.orders-log-inbound-open {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 11rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: inherit;
  text-decoration: underline dotted var(--color-text-subtle);
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.orders-log-inbound-open:hover {
  color: var(--color-brand);
  text-decoration-color: currentColor;
}
/* The PO beside its collective: still opens the drawer, but reads as the second name. */
.orders-log-inbound-open--secondary {
  font-size: 0.75rem;
}
.orders-log-inbound-open--secondary:not(:hover) {
  color: var(--color-text-muted);
}
.orders-log-inbound-open:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.inbound-drawer-empty {
  margin: 0.5rem 1.25rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: #f8fafc;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.inbound-drawer-list {
  max-height: 14rem;
  margin: 0 1.25rem;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}
.inbound-drawer-po {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem 4.5rem;
  gap: 0.75rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--color-border-light);
  background: none;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
}
.inbound-drawer-list li:last-child .inbound-drawer-po {
  border-bottom: 0;
}
.inbound-drawer-po:hover {
  background: #f8fafc;
}
.inbound-drawer-po[aria-current="true"] {
  background: var(--color-brand-muted);
  font-weight: 600;
}
#orders-log-drawer [data-inbound-step][aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
}
.inbound-drawer-po:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.inbound-drawer-po-number {
  font-variant-numeric: tabular-nums;
}
.inbound-drawer-po-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.inbound-drawer-po-secondary {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.inbound-drawer-po-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.inbound-drawer-po-muted {
  color: var(--color-text-muted);
}
.inbound-drawer-detail {
  margin: 1rem 0 0;
}
.inbound-drawer-detail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 1.25rem 0.5rem;
}
.inbound-drawer-detail-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.inbound-drawer-grid {
  display: flex;
  flex-direction: column;
}
.inbound-drawer-row {
  display: grid;
  grid-template-columns: 2.75rem repeat(3, 4rem) minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 1.25rem;
  font-size: 0.875rem;
  color: var(--color-text);
}
.inbound-drawer-row--head {
  padding-top: 0.15rem;
  padding-bottom: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.inbound-drawer-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.inbound-drawer-subhead {
  margin: 1rem 1.25rem 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.inbound-drawer-shipments {
  margin: 0 1.25rem;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}
.inbound-drawer-shipments li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 7rem;
  gap: 0.75rem;
  padding: 0.3rem 0;
}
.inbound-drawer-phase {
  padding: 0 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-border-light);
  font-size: 0.75rem;
  font-weight: 600;
}
.inbound-drawer-detail > p.inbound-drawer-po-muted {
  margin: 0 1.25rem;
  font-size: 0.8125rem;
}

/* Launch flow actions: numbered steps, left to right; Promote is the primary. */
.launch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--color-border-light);
  background: var(--color-surface-muted);
}
.launch-actions__step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.launch-actions__num {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: var(--radius-full);
  background: var(--color-border);
  color: var(--color-text);
  font-size: 0.6875rem;
  font-weight: 600;
}
.launch-actions .btn-primary .launch-actions__num {
  background: rgba(255, 255, 255, 0.25);
  color: inherit;
}
.launch-row__staged::before {
  content: "\25CF\00a0";
  color: var(--launch-ready-solid);
}

/* Variance to plan on the order log: green over plan, red under it, the footer's upside and
   shortfall split on a second line beneath the net. */
.orders-log-variance--up {
  color: var(--orders-log-green-fg);
}

.orders-log-variance--down {
  color: var(--orders-log-red-fg);
}

.orders-log-variance-split {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

/* PIM Attributes tab: each attribute group is a fold (open by default), its summary the group's
   label and how many of its fields hold a value. */
.pim-attr-group {
  border-top: 1px solid var(--color-border);
  padding: 6px 0;
}
.pim-attr-group-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
.pim-attr-group-summary::-webkit-details-marker {
  display: none;
}
.pim-attr-group-summary .pim-attr-group-label {
  margin: 0;
}
.pim-attr-group-chevron::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(-45deg);
  transition: transform var(--transition);
}
.pim-attr-group[open] .pim-attr-group-chevron::before {
  transform: rotate(45deg);
}
.pim-attr-group-fill {
  margin-left: auto;
  font-size: 12px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.pim-attr-group[open] > .pim-field-grid {
  margin-top: 6px;
}

/* Catalog: the New product form (one net-new colorway, not from Centric). */
.catalog-new-product {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 12px 0;
  max-width: 720px;
}
.catalog-new-product__title {
  margin: 0 0 4px;
  font-size: 15px;
}
.catalog-new-product__hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.catalog-new-product__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.catalog-new-product__fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.catalog-new-product__error {
  color: #a32d2d;
  font-size: 13px;
  margin: 8px 0 0;
}
.catalog-new-product__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}