/**
 * gr-receiving-workbench.css — scoped responsive containment for the Purchases
 * reading journey (A-12 reading slice). Keeps the whole owner (#purchases-view)
 * within the viewport at 375/1280, long IDs, the state filter, retry button,
 * the reconciliation panel, and the receiver preview controls readable and
 * tappable. Does NOT flatten headings: body text is clamped at 16px while
 * headings keep a readable hierarchy.
 */

#purchases-view {
  --gr-purchase-text: var(--gr-cloud-text);
  --gr-purchase-muted: var(--gr-cloud-muted);
  --gr-purchase-surface: var(--gr-cloud-surface-alt);
  --gr-purchase-border: var(--gr-cloud-border);
  --gr-min-touch: 44px;
  --gr-min-text: 1rem;

  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* Reserve the actual header/navigation stack, including its spacing. */
  max-height: calc(100dvh - 12rem);
  overflow: auto;
  padding-block-end: 8px;
  scroll-padding-block: 8px;
  overflow-wrap: anywhere;
  font-size: var(--gr-min-text);
  line-height: 1.5;
}

/* Base 16px floor for every element inside the owner; headings are re-graded
   below so the hierarchy survives. */
#purchases-view,
#purchases-view * {
  font-size: var(--gr-min-text) !important;
  line-height: 1.5 !important;
}

#purchases-view h1 { font-size: 1.75rem !important; line-height: 1.25 !important; }
#purchases-view h2 { font-size: 1.5rem !important; line-height: 1.3 !important; }
#purchases-view h3 { font-size: 1.25rem !important; line-height: 1.3 !important; }
#purchases-view h4,
#purchases-view .order-status { font-size: 1.125rem !important; }

#purchases-view h1,
#purchases-view h2,
#purchases-view h3,
#purchases-view h4 { margin: 0 0 0.5rem 0; }

#purchases-view strong { font-size: inherit !important; }

/* Readable body text and metadata never below 16px. */
#purchases-view p,
#purchases-view li,
#purchases-view label,
#purchases-view span,
#purchases-view td,
#purchases-view th,
#purchases-view select,
#purchases-view input,
#purchases-view button,
#purchases-view .order-action-btn,
#purchases-view .btn {
  font-size: var(--gr-min-text) !important;
}

/* Every owned interactive control is a reachable 44px target. */
#purchases-view button,
#purchases-view select,
#purchases-view input,
#purchases-view textarea,
#purchases-view .order-action-btn,
#purchases-view .btn,
#purchases-view .gr-receiver-preview-action,
#purchases-view [data-action="bridge-confirm"] {
  min-height: var(--gr-min-touch) !important;
  min-width: var(--gr-min-touch) !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 6px !important;
}

#purchases-view select,
#purchases-view input {
  border: 1px solid var(--gr-purchase-border);
}

/* Card containment: long order/farm/PO/line IDs wrap instead of overflowing. */
#purchases-view .order-card {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#purchases-view .order-card h3,
#purchases-view .order-card strong,
#purchases-view .order-card td,
#purchases-view .order-card span {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* Tables stay semantic and wrap aggressively. */
#purchases-view table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

#purchases-view th,
#purchases-view td {
  padding: 0.5rem 0.25rem !important;
  vertical-align: top !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  min-width: 0 !important;
  text-align: left !important;
}

/* Stack tables into labelled cards on narrow owners; labels come from the
   shipped data-label attributes so screen-reader/table associations stay real. */
@media (max-width: 640px) {
  #purchases-view table,
  #purchases-view thead,
  #purchases-view tbody,
  #purchases-view th,
  #purchases-view td,
  #purchases-view tr {
    display: block !important;
    width: 100% !important;
  }

  #purchases-view thead tr {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
  }

  #purchases-view tr {
    margin-bottom: 0.75rem !important;
    border-bottom: 1px solid var(--gr-purchase-border) !important;
  }

  #purchases-view td {
    position: relative !important;
    padding-left: 40% !important;
    border: none !important;
    box-sizing: border-box !important;
  }

  #purchases-view td::before {
    content: attr(data-label);
    position: absolute !important;
    left: 0.25rem !important;
    top: 0.5rem !important;
    width: 35% !important;
    font-weight: 600 !important;
    color: var(--gr-purchase-muted) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* Reconciliation panel and receiver preview are part of the same owner. */
#purchases-view [id^="recon-panel-"] {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

#purchases-view [id^="recon-panel-"] strong,
#purchases-view [id^="recon-panel-"] span {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* Honour reduced motion for the reading journey. */
@media (prefers-reduced-motion: reduce) {
  #purchases-view,
  #purchases-view * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Same canonical ring as the shared operator foundation, scoped to this owner. */
#purchases-view :is(button, select, input, textarea, a):focus-visible {
  outline: 2px solid var(--border-focus, var(--gr-operator-border-focus)) !important;
  outline-width: 2px !important;
  outline-style: solid !important;
  outline-color: var(--border-focus, var(--gr-operator-border-focus)) !important;
  outline-offset: 2px;
  transition: none !important;
}