/* 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;
  /* 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;
  --color-link: var(--color-brand);
  /* 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;
  --color-primary: #1e3a5f;
  --color-primary-hover: #16324f;
  /* 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-banner {
  background: #f59e0b;
  color: #1e3a5f;
  text-align: center;
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

.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;
}

.non-production-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;
}

.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;
}

.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: 12px;
  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.
 */
.shipments-card:has(.table-wrap),
.shipments-card:has(.plt-table-wrap),
.shipments-card:has(.unattributed-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)) .shipments-card-header-content {
  position: sticky;
  left: 2.5rem;
}

.shipments-card:is(:has(.table-wrap), :has(.plt-table-wrap), :has(.unattributed-table-wrap)) .shipments-card-header-actions,
.shipments-card:is(:has(.table-wrap), :has(.plt-table-wrap), :has(.unattributed-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: 8px;
  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: 6px;
  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;
}

.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;
}

.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;
}

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

.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;
  }

  .inbound-page .shipments-card-header-actions .btn {
    flex: 1 1 auto;
    min-width: min(100%, 10rem);
    justify-content: center;
  }

  .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.
 *
 * 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);
}

.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-accent);
  text-decoration: none;
}

.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; }

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

.lifecycle-delivered {
  background: #e0e7ff;
  color: #4338ca;
}

.lifecycle-received {
  background: #d1fae5;
  color: #047857;
}

.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__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 */
.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;
}
.ops-console__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}
.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;
}

.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;
}

.product-line-items-th--po,
.product-line-items-td--po,
.product-line-items-th--collective,
.product-line-items-td--collective {
  min-width: 5.5rem;
  max-width: 6.5rem;
}

.product-line-items-td--po .form-input,
.product-line-items-td--collective .form-input {
  min-width: 0;
  max-width: 100%;
}

.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;
  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;
}

.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--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;
}

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

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

  .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;
}

.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-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 "+ Add filter" menu button (replaces the modal open button on /inbound only; the shared
   `.inbound-filters-open-btn` still drives the sibling filter modals). */
.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,
.inbound-facet-popover .inbound-filter-reference-number-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;
  margin: 0.5rem 0 0.25rem;
  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,
.inbound-filters-overlay-body .inbound-filter-reference-number-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;
}

/* Drayage partner portal: compact phase filter above the table */
.drayage-portal-phase-filter {
  margin-bottom: 1.25rem;
  width: 50%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 40rem) {
  .drayage-portal-phase-filter {
    width: 100%;
  }
}

.drayage-portal-phase-filter__hint {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
}

.drayage-portal-phase-filter__search {
  margin-bottom: 0.75rem;
}

.drayage-portal-phase-filter__search-label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.875rem;
}

.drayage-portal-phase-filter__search-input {
  max-width: 20rem;
  width: 100%;
}

.drayage-portal-phase-filter__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.drayage-portal-phase-filter__main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem 1rem;
}

.drayage-portal-phase-filter__legend {
  font-weight: 600;
  font-size: 0.875rem;
  padding-top: 0.35rem;
  flex: 0 0 auto;
}

.drayage-portal-phase-filter__list {
  flex: 1 1 min(100%, 12rem);
  min-width: 0;
}

.drayage-portal-phase-filter__actions {
  display: flex;
  justify-content: flex-end;
}

.drayage-portal-phase-filter__apply {
  flex-shrink: 0;
}

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

.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-brand);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.inbound-page .shipment-table thead a.sortable-header:hover {
  color: var(--color-brand-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-brand);
  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-brand-hover);
  text-decoration: underline;
}

.inbound-page .page-header-detail .back-link {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.inbound-page .page-header-detail .back-link:hover {
  color: var(--color-brand-hover);
  text-decoration: underline;
}

.inbound-page .tracking-link-external {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.inbound-page .tracking-link-external:hover {
  color: var(--color-brand-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-brand);
  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-brand-hover);
  text-decoration: underline;
}

.inbound-shipment-detail--overlay .tracking-link-external {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.inbound-shipment-detail--overlay .tracking-link-external:hover {
  color: var(--color-brand-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;
  background: #d85a30;
  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;
  flex-wrap: wrap;
  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;
}

.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 {
  max-width: min(1160px, 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);
}

.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; horizontal scroll only when the viewport is narrower than the table */
.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 {
  --lock-budget: min(70vh, calc(100dvh - 12rem));
  overflow: 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%;
  min-width: 68rem;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
}

.po-overlay-items-table .po-overlay-col-material {
  max-width: 6.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.po-overlay-items-table .po-overlay-col-plant {
  width: 2.75rem;
  max-width: 2.75rem;
  white-space: nowrap;
}

.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;
}

.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);
}

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

.po-overlay-desc-col {
  max-width: 9rem;
  white-space: normal;
}

.po-overlay-body .po-overlay-desc-col {
  max-width: 8rem;
}

.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;
}

.pim-centric-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pim-centric-link-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle, rgba(0, 0, 0, 0.03));
}

.pim-centric-link-item--active {
  background: var(--color-bg-subtle-strong, rgba(37, 99, 235, 0.06));
}

.pim-centric-link-season {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.pim-centric-link-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm);
  color: var(--color-link, #2563eb);
  background: rgba(37, 99, 235, 0.1);
}

.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;
}

.raw-json-copy-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;
}

.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;
}

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

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

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

.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;
}

.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;
}

.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;
}

/* 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-overlay-dialog {
  max-width: min(58rem, 96vw);
}

.product-launch-tracking-page .plt-filters-overlay-body {
  padding-top: 0.85rem;
}

.product-launch-tracking-page .plt-filters-overlay-section + .plt-filters-overlay-section {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border-light, #e2e8f0);
}

.product-launch-tracking-page .plt-filters-overlay-section--presets {
  margin-bottom: 0.15rem;
}

.product-launch-tracking-page .plt-filters-preset-row {
  margin-bottom: 0;
}

.product-launch-tracking-page .plt-filters-overlay-form .plt-filters-overlay-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.product-launch-tracking-page .plt-filters-shipment-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem 1rem;
  align-items: start;
}

@media (max-width: 52rem) {
  .product-launch-tracking-page .plt-filters-shipment-grid {
    grid-template-columns: 1fr 1fr;
  }

  .product-launch-tracking-page .plt-filters-shipment-phase {
    grid-column: 1 / -1;
  }
}

@media (max-width: 32rem) {
  .product-launch-tracking-page .plt-filters-shipment-grid {
    grid-template-columns: 1fr;
  }
}

.product-launch-tracking-page .plt-filters-shipment-phase .plt-filters-control-label {
  display: block;
  margin-bottom: 0.35rem;
}

.product-launch-tracking-page .plt-filters-phase-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 40rem) {
  .product-launch-tracking-page .plt-filters-phase-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.product-launch-tracking-page .plt-filters-phase-list .inbound-filters-check-label {
  padding: 0.35rem 0.45rem;
  font-size: 0.82rem;
}

/* PO type is the shared inbound checkbox facet (same treatment as the inbound tracking
   page filters), sitting in the narrow Catalog cluster: two option columns when there is
   room, one once the overlay grid collapses. */
.product-launch-tracking-page .plt-filters-po-type .inbound-filters-field {
  margin-bottom: 0;
}

.product-launch-tracking-page .plt-filters-po-type .inbound-filters-field-label {
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}

.product-launch-tracking-page .plt-filters-po-type .inbound-filters-checkbox-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 52rem) {
  .product-launch-tracking-page .plt-filters-po-type .inbound-filters-checkbox-list {
    grid-template-columns: 1fr;
  }
}

.product-launch-tracking-page .plt-filters-po-type .inbound-filters-check-label {
  padding: 0.35rem 0.45rem;
  font-size: 0.82rem;
}

.product-launch-tracking-page .plt-filters-field-cluster {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.product-launch-tracking-page .plt-filters-cluster-label {
  margin: 0 0 0.1rem;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #64748b);
}

.product-launch-tracking-page .plt-filters-control {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.product-launch-tracking-page .plt-filters-control-label {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text, #0f172a);
}

.product-launch-tracking-page .plt-filters-select {
  width: 100%;
  min-width: 0;
  font-size: 0.85rem;
}

.product-launch-tracking-page .plt-filters-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 1rem;
}

@media (max-width: 40rem) {
  .product-launch-tracking-page .plt-filters-date-grid {
    grid-template-columns: 1fr;
  }
}

.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-column: 1 / -1;
  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 .inbound-filters-overlay-footer {
  margin-top: 0.85rem;
  padding-top: 0.65rem;
}

.product-launch-tracking-page .plt-filters-overlay-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

.product-launch-tracking-page .plt-filters-overlay-actions-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.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 .plt-spreadsheet-table td:nth-child(8),
.product-launch-tracking-page .plt-spreadsheet-table td:nth-child(9) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.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;
}

.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. */
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.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;
}

.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;
}

.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;
}

.product-launch-tracking-page .plt-ship-status--at-risk {
  background: #fef3c7;
  color: #92400e;
}

.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;
}

/* Pre-SPA view (Launch Tracker third view) */
.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;
}

.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;
}

.product-launch-tracking-page .plt-pre-spa-notes {
  max-width: 22rem;
  min-width: 10rem;
  white-space: normal;
}

.product-launch-tracking-page .plt-pre-spa-note-btn {
  display: block;
  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: pre-line;
}

.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;
}

/* 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__count { color: #666; font-size: 0.9em; }
.oem-carton-panel__pending { color: #666; font-style: italic; margin: 0.2rem 0 0; }

.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; 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; }
.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);
}

/* Preorder/Backorder — click-to-open info popovers (escapes table overflow:hidden). */
.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) {
  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). */
.plt-preorder-backorder-page 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;
}

.plt-preorder-backorder-page th[data-col]:hover .pb-col-hide,
.plt-preorder-backorder-page 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;
}
/* ── 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-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; }