/* screens/orders.css — orders screen styles (Stage 9 retrofit owner: this file).
 * Detail layout ported from design/stage9/mockups/admin/order-detail.html.
 * Shared classes (.kv/.totals/.timeline/.card) get scoped overrides here so
 * the components.css contract versions keep serving other screens. */

/* ============ list (Stage 9 mockup port) ============ */

/* Ref-cell copy affordance — visual only, revealed on row hover. */
.ref-copy {
  display: inline-block;
  width: var(--brand-size-sm);
  height: var(--brand-size-sm);
  margin-left: var(--brand-size-xxs);
  vertical-align: baseline;
  color: var(--brand-color-text-quaternary);
  opacity: 0;
  transition: opacity var(--brand-motion-duration-fast) var(--brand-motion-ease-out);
}

.admin-row:hover .ref-copy,
.ref-link:focus-visible .ref-copy {
  opacity: 1;
}

/* Customer cell secondary line. */
.cust-city {
  margin-top: calc(var(--brand-size-xxs) / 2);
  font-size: var(--brand-font-size-sm);
}

/* Row cursor lives in admin.css (.admin-row is shared by every list);
 * .backrow moved to components.css (orders detail, seller-profile
 * edit, and customer detail emit it). */

/* ============ order detail: sticky summary header ============ */

.detail-head {
  position: sticky;
  top: calc(var(--brand-control-height-lg) + var(--brand-size-xs));
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--brand-size-md);
  background: var(--brand-color-bg-elevated);
  border: var(--brand-line-width) solid var(--brand-color-border-secondary);
  border-radius: var(--brand-border-radius-lg);
  box-shadow: 0 1px 2px var(--brand-color-fill-quaternary);
  padding: var(--brand-size-sm) var(--brand-size-lg);
  margin-bottom: var(--brand-size-lg);
}

.detail-head h1 {
  font-size: var(--brand-font-size-heading-3);
}

.detail-head__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--brand-size-xs);
  margin-top: var(--brand-size-xxs);
}

.detail-head__total {
  font-weight: var(--brand-font-weight-strong);
  font-size: var(--brand-font-size-lg);
  font-variant-numeric: tabular-nums;
}

.detail-head__sep {
  color: var(--brand-color-text-quaternary);
}

.detail-head__actions {
  display: flex;
  align-items: center;
  gap: var(--brand-size-xs);
  flex: 0 0 auto;
}

/* ============ order detail: two-column body (main + 320px rail) ============ */

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--brand-size-lg);
  align-items: start;
}

.detail-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-lg);
}

.detail-rail {
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-lg);
  min-width: 0;
}

/* ============ order detail: card interior bits ============ */

.detail-grid .card h3 {
  font-size: var(--brand-font-size);
  margin-bottom: var(--brand-size-sm);
}

/* Tight card head for the Courier sub-block (button sits next to the h3). */
.card__head--tight {
  margin-bottom: var(--brand-size-sm);
}

.card__head--tight h3 {
  margin: 0;
}

.subhead {
  margin-top: var(--brand-size-md);
  padding-top: var(--brand-size-md);
  border-top: var(--brand-line-width) solid var(--brand-color-border-secondary);
}

/* ============ order detail: items table + totals ============ */

.table-wrap {
  overflow-x: auto;
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--brand-font-size);
}

.table-wrap th {
  text-align: left;
  padding: var(--brand-size-xs) var(--brand-size-sm);
  font-size: var(--brand-font-size-sm);
  font-weight: var(--brand-font-weight-strong);
  color: var(--brand-color-text-secondary);
  background: var(--brand-color-fill-tertiary);
  border-bottom: var(--brand-line-width) solid var(--brand-color-border-secondary);
  white-space: nowrap;
}

.table-wrap td {
  padding: var(--brand-size-xs) var(--brand-size-sm);
  border-bottom: var(--brand-line-width) solid var(--brand-color-border-secondary);
  vertical-align: middle;
}

.table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

/* Mockup totals variant: right-aligned block with an emphasized .grand row
 * (components.css .totals--grand is the flat-emphasis variant). */
.detail-grid .totals {
  max-width: 340px;
  margin-left: auto;
  margin-top: var(--brand-size-md);
}

.detail-grid .totals .grand {
  border-top: var(--brand-line-width) solid var(--brand-color-border);
  padding-top: var(--brand-size-xs);
  margin-top: var(--brand-size-xxs);
}

.detail-grid .totals .grand dt {
  color: var(--brand-color-text);
  font-weight: var(--brand-font-weight-strong);
  font-size: var(--brand-font-size-lg);
}

.detail-grid .totals .grand dd {
  font-weight: var(--brand-font-weight-strong);
  font-size: var(--brand-font-size-lg);
}

/* ============ order detail: customer / shipping key-value blocks ============ */

.addr {
  line-height: var(--brand-line-height);
}

.addr .addr-name {
  font-weight: var(--brand-font-weight-strong);
}

.addr-history {
  list-style: none;
  margin: var(--brand-size-xs) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-xxs);
  font-size: var(--brand-font-size-sm);
}

/* ============ order detail: status & actions rail card ============ */

.sa-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--brand-size-sm);
  margin-bottom: var(--brand-size-md);
}

.sa-current span:first-child {
  font-size: var(--brand-font-size-sm);
  color: var(--brand-color-text-tertiary);
}

.sa-next {
  margin-top: var(--brand-size-xs);
  font-size: var(--brand-font-size-sm);
  color: var(--brand-color-text-tertiary);
}

.divider {
  border: 0;
  border-top: var(--brand-line-width) solid var(--brand-color-border-secondary);
  margin: var(--brand-size-md) 0;
}

/* Full transition list: one row per target = action + message pair. */
.status-action-list {
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-xs);
}

.status-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--brand-size-xs);
  width: 100%;
}

.status-action-row > .status-action {
  flex: 1 1 auto;
}

/* Transition buttons keep their pre-Stage 9 tone cues, re-expressed on
 * brand tokens (pill tone recipe applied to buttons). caution/danger/muted
 * are the legacy tone aliases. */
.status-action--success {
  background: var(--brand-color-success-bg);
  border-color: var(--brand-color-success-border);
  color: var(--brand-color-success);
}

.status-action--success:hover {
  background: var(--brand-color-success-bg);
  border-color: var(--brand-color-success-active);
  color: var(--brand-color-success-active);
}

.status-action--warning,
.status-action--caution {
  background: var(--brand-color-warning-bg);
  border-color: var(--brand-color-warning-border);
  color: var(--brand-color-warning-active);
}

.status-action--warning:hover,
.status-action--caution:hover {
  background: var(--brand-color-warning-bg);
  border-color: var(--brand-color-warning-active);
}

.status-action--error,
.status-action--danger {
  background: var(--brand-color-error-bg);
  border-color: var(--brand-color-error-border);
  color: var(--brand-color-error-active);
}

.status-action--error:hover,
.status-action--danger:hover {
  background: var(--brand-color-error-bg);
  border-color: var(--brand-color-error-active);
}

.status-action--neutral,
.status-action--muted {
  background: var(--brand-color-fill-tertiary);
  border-color: var(--brand-color-border);
  color: var(--brand-color-text-secondary);
}

.status-action--neutral:hover,
.status-action--muted:hover {
  background: var(--brand-color-fill-tertiary);
  border-color: var(--brand-color-primary-border);
}

/* "Generate message" / "AI suggest" companions (Phase 6 pairing). */
.status-action-message {
  height: var(--brand-control-height-xs);
  padding: 0 var(--brand-size-xs);
  background: var(--brand-color-fill-tertiary);
  color: var(--brand-color-link);
  border-color: var(--brand-color-border-secondary);
  font-size: var(--brand-font-size-sm);
}

.status-action-message:hover {
  background: var(--brand-color-fill-quaternary);
  color: var(--brand-color-link-hover);
}

.status-action-message__pair {
  display: inline-flex;
  align-items: center;
  gap: var(--brand-size-xxs);
  flex-wrap: wrap;
}

.status-action-message--ai {
  background: var(--brand-color-fill-tertiary);
  color: var(--brand-color-primary);
  border-color: var(--brand-color-border);
}

.status-action-message--ai:hover {
  background: var(--brand-color-fill-secondary);
  color: var(--brand-color-primary-hover);
}

/* ============ order detail: timeline rail card ============
 * Mockup variant (li::after trail + .tl-dot) layered over the components.css
 * .timeline contract (li::before + .timeline__dot) — scoped to the rail so
 * both can coexist. */
.detail-rail .timeline li {
  display: flex;
  gap: var(--brand-size-sm);
  padding: 0 0 var(--brand-size-md);
}

.detail-rail .timeline li:last-child {
  padding-bottom: 0;
}

.detail-rail .timeline li::before {
  content: none;
}

.detail-rail .timeline li::after {
  content: '';
  position: absolute;
  left: calc(var(--brand-size-xs) / 2);
  top: calc(var(--brand-size-xs) + var(--brand-size-xxs));
  bottom: 0;
  width: var(--brand-line-width);
  background: var(--brand-color-border-secondary);
}

.detail-rail .timeline li:last-child::after {
  display: none;
}

.tl-dot {
  flex: 0 0 auto;
  width: var(--brand-size-xs);
  height: var(--brand-size-xs);
  margin-top: var(--brand-size-xxs);
  border-radius: 50%;
  background: var(--brand-color-fill);
}

.tl-dot--primary {
  background: var(--brand-color-primary);
}

.tl-dot--success {
  background: var(--brand-color-success);
}

.tl-meta {
  margin-top: calc(var(--brand-size-xxs) / 2);
  font-size: var(--brand-font-size-sm);
}

/* ============ order detail: payment proofs rail card ============ */

.proof-list {
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-md);
}

.proof {
  display: flex;
  gap: var(--brand-size-sm);
  align-items: flex-start;
}

.proof-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--brand-size-xxl);
  height: var(--brand-size-xxl);
  background: var(--brand-color-fill-tertiary);
  border: var(--brand-line-width) solid var(--brand-color-border-secondary);
  border-radius: var(--brand-border-radius-sm);
  color: var(--brand-color-text-quaternary);
}

.proof-thumb svg {
  width: var(--brand-size);
  height: var(--brand-size);
}

.proof-thumb--img {
  display: block;
  object-fit: cover;
}

.proof-meta {
  margin-top: calc(var(--brand-size-xxs) / 2);
  font-size: var(--brand-font-size-sm);
}

/* ============ order detail: tasks rail card ============ */

.detail-rail .task {
  display: flex;
  align-items: flex-start;
  gap: var(--brand-size-sm);
  padding: var(--brand-size-xs) 0;
}

.detail-rail .task input[type='checkbox'] {
  width: var(--brand-size);
  height: var(--brand-size);
  margin-top: var(--brand-size-xxs);
  accent-color: var(--brand-color-primary);
  flex: 0 0 auto;
}

.task-meta {
  margin-top: calc(var(--brand-size-xxs) / 2);
  font-size: var(--brand-font-size-sm);
}

/* ============ verify payment (PR5c, Stage 9 reskin) ============
 * Layout comes from the shared .two-pane / .card / .kv / .field / .btn
 * contracts; this block only frames the image viewer and the
 * verify-specific head meta, decision card, and result panel. */

/* Meta row under the page h1 (status pills + order total). */
.verify-head__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--brand-size-xs);
  margin-top: var(--brand-size-xxs);
}

.verify-head__total {
  font-weight: var(--brand-font-weight-strong);
  font-size: var(--brand-font-size-lg);
  font-variant-numeric: tabular-nums;
}

/* Decision rail card: notes field, error banner, action bar. */
.verify-card {
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-sm);
}

/* Emphasized "Expected amount" row inside the context .kv. */
.verify-context__total {
  font-weight: var(--brand-font-weight-strong);
  color: var(--brand-color-primary);
}

.verify-image-viewer {
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-sm);
}

.verify-image-viewer__main {
  background: var(--brand-color-bg-container);
  border: var(--brand-line-width) solid var(--brand-color-border-secondary);
  border-radius: var(--brand-border-radius-lg);
  box-shadow: 0 1px 2px var(--brand-color-fill-quaternary);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px; /* viewer floor before the image loads — raw value */
  max-height: 70vh; /* keep the proof on screen next to the rail — raw value */
}

.verify-image-viewer__main img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

.verify-image-viewer__main.empty-state {
  padding: var(--brand-size-lg);
  text-align: center;
}

.verify-image-viewer__thumbs {
  display: flex;
  gap: var(--brand-size-xs);
  flex-wrap: wrap;
}

.verify-image-viewer__thumb {
  width: 80px; /* thumbnail hit area — raw value */
  height: 80px;
  padding: 0;
  background: var(--brand-color-bg-container);
  border: calc(2 * var(--brand-line-width)) solid var(--brand-color-border-secondary);
  border-radius: var(--brand-border-radius);
  overflow: hidden;
  cursor: pointer;
}

.verify-image-viewer__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.verify-image-viewer__thumb.is-active {
  border-color: var(--brand-color-primary);
  outline: calc(2 * var(--brand-line-width)) solid var(--brand-color-primary);
  outline-offset: 2px;
}

.verify-image-viewer__caption {
  font-size: var(--brand-font-size-sm);
  margin: 0;
}

.verify-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--brand-size-xs);
  position: sticky;
  bottom: var(--brand-size-sm);
  background: var(--brand-color-bg-container);
  border: var(--brand-line-width) solid var(--brand-color-border-secondary);
  border-radius: var(--brand-border-radius);
  padding: var(--brand-size-sm);
}

.verify-actions__btn {
  flex: 1 1 100px;
  min-height: 48px; /* tap target — documented raw value */
}

/* Result panel sits on the .card chrome; only the stack + measure here. */
.verify-result {
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-sm);
  max-width: 560px; /* result card measure — raw value */
}

.verify-result h2 {
  margin: 0;
}

.verify-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--brand-size-xs);
  margin-top: var(--brand-size-sm);
}

/* ============ shipping extract modal (PR7.3 §3.3) ============ */

.shipping-extract-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(59, 38, 31, 0.55); /* scrim — no token (documented gap) */
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

@media (min-width: 700px) {
  .shipping-extract-modal__backdrop {
    align-items: center;
  }
}

.shipping-extract-modal {
  position: relative;
  background: var(--brand-color-bg-container);
  border-radius: var(--brand-border-radius-lg) var(--brand-border-radius-lg) 0 0;
  box-shadow: 0 4px 12px var(--brand-color-fill);
  padding: var(--brand-size);
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-sm);
}

@media (min-width: 700px) {
  .shipping-extract-modal {
    border-radius: var(--brand-border-radius-lg);
  }
}

.shipping-extract-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--brand-size-sm);
}

.shipping-extract-modal__header h2 {
  margin: 0;
  font-size: var(--brand-font-size-lg);
}

.shipping-extract-modal__close {
  background: transparent;
  border: none;
  font-size: var(--brand-font-size-heading-3);
  line-height: 1;
  cursor: pointer;
  color: var(--brand-color-text-secondary);
  padding: 0 var(--brand-size-xs);
}

.shipping-extract-modal__close:hover {
  color: var(--brand-color-text);
}

.shipping-extract-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-sm);
}

.shipping-extract-modal__confirm {
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-xs);
  padding-top: var(--brand-size-sm);
  border-top: var(--brand-line-width) solid var(--brand-color-border-secondary);
}

.shipping-extract-modal__confirm-text {
  margin: 0;
  font-size: var(--brand-font-size);
  color: var(--brand-color-text);
  font-weight: var(--brand-font-weight-strong);
}

.shipping-extract-modal__fields {
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-xs);
}

.shipping-extract-modal__field {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--brand-size-xxs);
  background: var(--brand-color-fill);
  border-radius: var(--brand-border-radius-sm);
  padding: var(--brand-size-xs) var(--brand-size-sm);
}

.shipping-extract-modal__field-label {
  font-size: var(--brand-font-size-sm);
  font-weight: var(--brand-font-weight-strong);
  color: var(--brand-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em; /* tracking — documented raw value */
}

.shipping-extract-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--brand-size-xs);
  padding-top: var(--brand-size-xs);
  border-top: var(--brand-line-width) solid var(--brand-color-border-secondary);
}

.shipping-extract-modal__actions .btn {
  flex: 1 1 100px;
  min-height: 44px; /* tap target — documented raw value */
}

@media (max-width: 480px) {
  .shipping-extract-modal__actions {
    flex-direction: column;
  }
  .shipping-extract-modal__actions .btn {
    width: 100%;
  }
}

/* ============ responsive (detail) ============ */

@media (max-width: 1023px) {
  .detail-grid {
    grid-template-columns: 1fr; /* rail cards stack below main; no tab-hiding */
  }
}

@media (max-width: 480px) {
  .detail-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .detail-head__actions {
    width: 100%;
  }
  .detail-head__actions .btn--primary {
    flex: 1;
  }
  .status-action-message__pair {
    width: 100%;
  }
  .status-action-message__pair .status-action-message {
    flex: 1 1 0;
  }
  .detail-grid .kv {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .detail-grid .kv dt {
    margin-top: var(--brand-size-xs);
  }
  .detail-grid .kv dt:first-child {
    margin-top: 0;
  }
  .verify-actions {
    flex-direction: column;
  }
  .verify-actions__btn {
    width: 100%;
  }
}