/* ============================================================
   Order cockpit — status row, routing strip, panel grid.
   ============================================================ */

.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--geist-gap-half);
  padding: var(--geist-space-4x);
  background: var(--ds-background-100);
  border-radius: var(--geist-radius);
  box-shadow: var(--ds-shadow-border);
}

.cockpit-section {
  display: flex;
  flex-direction: column;
  gap: var(--geist-space-4x);
}

.cockpit-section > h3:not(.cockpit-heading) {
  margin-top: var(--geist-space-4x);
}

.downtime-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--geist-space-4x);
}

.downtime-chart-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--geist-space-3x);
  margin: 0;
  padding: var(--geist-space-4x);
  background: var(--ds-background-100);
  border-radius: var(--geist-radius);
  box-shadow: var(--ds-shadow-border);
}

.downtime-chart-panel-wide { grid-column: 1 / -1; }
.downtime-chart-panel h3,
.downtime-chart-panel h4 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.downtime-chart-panel figcaption { margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.downtime-chart-canvas { min-width: 0; overflow: hidden; }

.downtime-pareto-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--geist-space-4x);
}

.cockpit-heading {
  padding-bottom: var(--geist-space-2x);
  box-shadow: 0 1px 0 var(--ds-gray-400);
  color: var(--ink-subtle);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cockpit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--geist-gap);
}

/* Station workspace — one operational list leads; setup and transactions support it. */
.station-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--geist-space-6x);
}

.station-title,
.station-list-title,
.station-section-title,
.station-selected-task h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 600;
}

.station-title,
.station-list-title {
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.4px;
}

.station-section-title,
.station-selected-task h3 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
}

.station-day-summary {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--geist-space-3x);
}

.station-day-facts,
.press-targets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--geist-space-2x);
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.station-day-facts strong,
.press-targets strong { color: var(--ink); font-weight: 500; }

.station-day-editor > summary,
.station-task-editor > summary { list-style: none; }
.station-day-editor > summary::-webkit-details-marker,
.station-task-editor > summary::-webkit-details-marker { display: none; }

.station-day-form {
  position: absolute;
  top: calc(100% + var(--geist-space-2x));
  right: 0;
  z-index: var(--z-popover);
  display: flex;
  width: max-content;
  max-width: min(560px, calc(100vw - var(--geist-space-8x)));
  align-items: flex-end;
  gap: var(--geist-space-3x);
  padding: var(--geist-space-4x);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--ds-shadow-menu);
}

.station-active-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--geist-space-4x);
}

.station-list-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--geist-space-6x);
}

.station-list-toolbar > div { flex: 1 1 auto; }

.station-list-controls {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--geist-space-2x);
}

.station-list-field { min-width: 220px; margin: 0; }
.station-search-field { min-width: min(280px, 100%); margin: 0; }

.press-targets {
  gap: var(--geist-space-4x);
  padding-block: var(--geist-space-2x);
  border-block: 1px solid var(--hairline);
}

.print-scope {
  display: none;
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 16px;
}

.station-table-container { margin: 0; }
.station-table-container tr.is-selected { background: var(--surface-active); }

.station-list-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: var(--geist-space-4x);
}

.station-list-count {
  margin: 0;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.station-list-footer nav.pagy { margin: 0; }

.station-supporting {
  margin-top: var(--geist-space-8x);
  padding-top: var(--geist-space-6x);
  border-top: 1px solid var(--hairline);
}

.station-billet-table { max-width: 560px; }

.station-task-editor {
  width: fit-content;
  max-width: 100%;
}

.station-task-form,
.station-selected-task {
  margin-top: var(--geist-space-4x);
  padding: var(--geist-space-4x);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--ds-shadow-border);
}

/* Modal entry sits above workspace navigation, popovers, and shell drawers. */
.station-task-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) - 1);
  background: rgb(0 0 0 / 25%);
}

.station-task-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--z-modal);
  width: min(680px, calc(100vw - var(--geist-space-12x)));
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: contain;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--ds-shadow-modal);
}

.station-task-drawer[hidden],
.station-task-drawer-backdrop[hidden] { display: none; }

.station-task-drawer-frame {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
}

.station-task-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--geist-space-4x);
  padding: var(--geist-space-4x) var(--geist-space-6x);
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--hairline);
}

.station-task-drawer-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.station-task-drawer-head p {
  margin: var(--geist-space) 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 18px;
}

.station-task-drawer-close {
  display: inline-flex;
  width: 36px;
  min-width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}

.station-task-drawer-close:hover { background: var(--surface-hover); color: var(--ink); }
.station-task-drawer-close:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.station-task-drawer-close-icon { width: 18px; height: 18px; }

.station-task-drawer-body {
  min-height: 0;
  padding: var(--geist-space-6x);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-bottom: calc(var(--geist-space-16x) + var(--geist-space-6x));
}

.station-task-drawer-body > form { margin: 0; }
.station-task-drawer .order-entry-grid { grid-template-columns: minmax(0, 1fr); gap: var(--geist-space-6x); }
.station-task-drawer .quote-line-grid { grid-template-columns: minmax(0, 1fr); }
.station-task-drawer .quote-line-description { grid-column: auto; }
.station-task-drawer-body .entry-form input,
.station-task-drawer-body .entry-form select,
.station-task-drawer-body .entry-form textarea {
  scroll-margin-bottom: calc(var(--geist-space-16x) + var(--geist-space-6x));
}
.station-task-drawer-body .detail-list {
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--geist-space-2x) var(--geist-space-3x);
}
.station-task-drawer-body .detail-list dt {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  text-transform: none;
}
.station-task-drawer-body .detail-list dd { min-width: 0; overflow-wrap: anywhere; }
.station-task-drawer-body .form-actions {
  position: sticky;
  bottom: calc(-1 * var(--geist-space-6x));
  z-index: 1;
  margin-inline: calc(-1 * var(--geist-space-6x));
  padding: var(--geist-space-4x) var(--geist-space-6x);
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--hairline);
}

body.is-station-drawer-open { overflow: hidden; }
body.is-station-drawer-open .ai-chat-fab { opacity: 0; pointer-events: none; }

.station-selected-task .station-task-form { margin: 0; padding: 0; box-shadow: none; }

.station-task-form { max-width: 900px; }
.station-task-form .form-actions { align-self: end; padding-top: 0; }
.station-form-errors { grid-column: 1 / -1; }

.station-selected-task {
  display: flex;
  flex-direction: column;
  gap: var(--geist-space-2x);
}

@media (max-width: 1100px) {
  .station-list-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .station-list-controls { justify-content: flex-start; }
}

@media (max-width: 800px) {
  .station-heading-row,
  .station-list-footer {
    display: flex;
    align-items: stretch;
    flex-direction: column;
  }

  .station-day-summary { position: relative; justify-content: space-between; }
  .station-day-editor { position: static; }
  .station-day-form {
    position: absolute;
    right: 0;
    left: 0;
    width: auto;
    max-width: none;
    flex-wrap: wrap;
  }

  .station-list-controls { flex-wrap: wrap; }
  .station-list-field,
  .station-search-field { flex: 1 1 220px; }
}

@media (max-width: 640px) {
  .station-task-drawer {
    inset: 0;
    width: 100vw;
    border-radius: 0;
  }

  .station-task-drawer-head,
  .station-task-drawer-body { padding-inline: var(--geist-space-4x); }

  .station-task-drawer-body .form-actions {
    bottom: calc(-1 * var(--geist-space-6x));
    margin-inline: calc(-1 * var(--geist-space-4x));
    padding-inline: var(--geist-space-4x);
  }

}

@media (prefers-reduced-motion: reduce) {
  .station-task-drawer,
  .station-task-drawer-backdrop { transition: none; }
}

/* Routing progress strip — text accompanies every semantic state. */
.routing-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.routing-step {
  position: relative;
  display: flex;
  flex: 1 1 112px;
  flex-direction: column;
  gap: 2px;
  min-width: 96px;
  margin: 0 var(--geist-gap-half) var(--geist-space-2x) 0;
  padding: var(--geist-space-2x) var(--geist-space-3x);
  border-radius: var(--geist-radius);
  background: var(--ds-gray-100);
  box-shadow: var(--ds-shadow-border);
  color: var(--ink-muted);
}

.routing-step::after {
  position: absolute;
  top: 50%;
  left: 100%;
  width: var(--geist-gap-half);
  height: 1px;
  background: var(--ds-gray-400);
  content: "";
}

.routing-step:last-child::after { display: none; }

.routing-step-code {
  color: currentColor;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
}

.routing-step-detail {
  color: currentColor;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

.routing-step-status {
  color: currentColor;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.routing-step.is-complete { background: var(--ds-green-100); color: var(--ds-green-900); }
.routing-step.is-complete .routing-step-status { color: var(--ds-green-900); }
.routing-step.is-partial { background: var(--ds-amber-100); color: var(--ds-amber-900); }
.routing-step.is-partial .routing-step-status { color: var(--ds-amber-900); }
.routing-step.is-open { background: var(--ds-red-100); color: var(--ds-red-900); }
.routing-step.is-open .routing-step-status { color: var(--ds-red-900); }

/* Order-entry part context (alert / BOM / due-date guidance). */
.part-context { margin-top: var(--geist-gap-half); }

.part-context-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--geist-gap-half);
  margin-bottom: var(--geist-gap-half);
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 18px;
}

.part-context-heading {
  margin-bottom: var(--geist-space-2x);
  color: var(--ink);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

/* Department queue picker — a floating selection layer. */
.queue-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--geist-space-2x);
  margin-top: var(--geist-space-4x);
  padding: var(--geist-space-2x);
  background: var(--ds-background-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--ds-shadow-menu);
}

.queue-picker-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--geist-space-2x);
  border-radius: var(--geist-radius);
  color: var(--ink);
  text-decoration: none;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}

.queue-picker-item:hover {
  background: var(--ds-gray-100);
}

.queue-picker-item:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

.queue-picker-code {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.queue-picker-name {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 18px;
}

/* Press schedule. */
.schedule-table td,
.schedule-table th {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.schedule-table tr.is-late td { background: var(--ds-red-100); color: var(--ds-red-900); }

.schedule-trials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--geist-space-2x);
  margin-bottom: var(--geist-gap-half);
}

.schedule-trial {
  padding: 2px var(--geist-space-2x);
  border-radius: var(--geist-radius);
  background: var(--ds-gray-100);
  box-shadow: var(--ds-shadow-border);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
}

.schedule-move .inline { display: inline; }
.schedule-inline { display: flex; gap: 4px; }

.schedule-comment,
.schedule-cut {
  min-height: 32px;
  padding: 2px var(--geist-space-2x);
  border: 1px solid transparent;
  border-radius: var(--geist-radius);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}

.schedule-comment { width: 12rem; }
.schedule-cut { width: 4rem; }

.schedule-comment:hover,
.schedule-cut:hover {
  border-color: var(--ds-gray-500);
  background: var(--ds-background-100);
}

.schedule-comment:focus-visible,
.schedule-cut:focus-visible {
  border-color: transparent;
  background: var(--ds-background-100);
  outline: none;
  box-shadow: var(--ds-shadow-border), var(--ds-focus-ring);
}

/* Inline shipment entry. */
.shipment-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--geist-gap-half);
  margin-top: var(--geist-gap);
  padding-top: var(--geist-space-4x);
  box-shadow: 0 -1px 0 var(--ds-gray-400);
}

.shipment-form .field { margin-bottom: 0; }
.shipment-form .form-actions { margin: 0; padding-top: 0; }

/* ============================================================
   Orders — overview metric strip, chart panels, action lists.
   ============================================================ */

.orders-overview {
  display: flex;
  flex-direction: column;
  gap: var(--geist-gap);
}

.order-overview-grid,
.order-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--geist-gap);
}

.order-overview-panel {
  min-width: 0;
  overflow: hidden;
  background: var(--ds-background-100);
  border-radius: var(--geist-radius);
  box-shadow: var(--ds-shadow-border);
}

.order-overview-panel-wide { grid-column: 1 / -1; }

/* Match the global table header treatment (.table th). */
.order-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--geist-gap-half);
  padding: var(--geist-space-3x) var(--geist-space-4x);
  border-bottom: 1px solid var(--hairline);
  background: var(--ds-gray-alpha-200);
}

.order-panel-head h2 {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
}

.order-chart { padding: 16px; overflow: hidden; }

/* ── Invoice-style order entry ──────────────────────────────────────────────
   Bill-to/line-entry on the left, the ship-to panel on the right. Collapses
   to one column on narrow screens with the ship-to panel first on paper. */
.order-entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr);
  gap: var(--geist-space-8x);
  margin-bottom: var(--geist-space-4x);
}

.order-entry-main,
.order-entry-aside { min-width: 0; }

.customer-context-heading {
  margin: 0 0 var(--geist-space-3x);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.customer-context-card {
  display: flex;
  flex-direction: column;
  gap: var(--geist-space);
  margin-bottom: var(--geist-space-4x);
  padding: var(--geist-space-4x);
  border-radius: var(--radius);
  background: var(--surface-muted);
  color: var(--ink);
  font-size: 13px;
  line-height: 20px;
}

.customer-context-card .customer-context-name {
  font-weight: var(--font-weight-semibold);
}

.customer-context-card p { margin: 0; }

.customer-context-empty {
  margin: 0 0 var(--geist-space-4x);
  padding: var(--geist-space-4x);
  border-radius: var(--radius);
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 20px;
}

/* Invoice lines: one row per part — part spans the free width, the short
   fields sit to its right; wraps on narrow screens. */
.order-lines {
  display: flex;
  flex-direction: column;
  gap: var(--geist-space-4x);
}

.order-lines > .customer-context-heading { margin: 0; }

.order-line-item {
  padding: var(--geist-space-4x);
  border-radius: var(--radius);
  background: var(--surface-muted);
}

.order-line-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--geist-space-3x);
}

.order-line-row .field { margin-bottom: 0; }

.order-line-field--part { flex: 1 1 280px; }

.order-line-field--item { flex: 0 0 80px; }

.order-line-field--num { flex: 0 0 110px; }

.order-line-field--short { flex: 0 0 150px; }

.order-line-field--flag { flex: 0 0 auto; }

/* Line fields fill their column instead of the shared 32rem cap. */
.order-line-row .field input:not([type="checkbox"]),
.order-line-row .field select {
  width: 100%;
  max-width: none;
}

.order-line-row .icon-link { margin-bottom: 4px; }

.field-check:has(#order_ship_to_different:not(:checked)) + .reveal-target { display: none; }

@media (max-width: 900px) {
  .order-entry-grid { grid-template-columns: minmax(0, 1fr); gap: var(--geist-space-6x); }
}

/* Table panels keep their title OUTSIDE the table box: a plain title row
   above, and the table container as the only framed surface below. */
.order-action-panel {
  display: flex;
  flex-direction: column;
  gap: var(--geist-space-2x);
  min-width: 0;
}

.order-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--geist-gap-half);
  min-height: 28px;
}

.order-panel-title h2 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
}

@media (max-width: 820px) {
  .order-overview-grid,
  .order-action-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .downtime-chart-grid,
  .downtime-pareto-grid { grid-template-columns: minmax(0, 1fr); }
  .downtime-chart-panel-wide { grid-column: auto; }
}

@media (max-width: 560px) {
  .cockpit-grid { grid-template-columns: minmax(0, 1fr); }
  .routing-step { flex-basis: calc(50% - var(--geist-gap-half)); }
  .order-action-grid .table-container { overflow: visible; }
}