/* ============================================================================
   Barmaso — Retail › Retail Order Request (and Data › Order Approved History)
   ----------------------------------------------------------------------------
   Built on China Order's sheet (co-*: the frame that scrolls, Barcode and
   Description held in place, figures centred) and Rebate's header and
   figures (rb-*). What is its own: the list of requests, the quantity a shop
   types, the bar with Approve that stays in reach, and a changed line marked.
   A changed quantity is blue and its line tinted — and the figure itself
   says it, never the colour alone.
   ============================================================================ */

.orq-shop-pick { display: grid; gap: 6px; max-width: 360px; }
.orq-shop-one { margin: 0; font-size: 15px; font-weight: 700; color: var(--pt-ink); }

/* --- the list ---------------------------------------------------------------------------- */

.orq-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.orq-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 64px; padding: 12px 16px; border: 1px solid var(--pt-line); border-left: 4px solid #f59e0b;
  border-radius: 12px; background: #fff; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.orq-item.is-approved { border-left-color: var(--pt-green-600); }
.orq-item:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
.orq-item:focus-visible { outline: 2px solid var(--pt-green-600); outline-offset: 2px; }
.orq-item-main { display: grid; gap: 4px; min-width: 0; }
.orq-item-date { font-size: 15px; color: var(--pt-ink); }
.orq-item-sub { font-size: 12.5px; color: var(--pt-muted); overflow-wrap: anywhere; }
.orq-item-go { flex: none; font-size: 13px; font-weight: 700; color: var(--pt-green-700); }

/* --- a request --------------------------------------------------------------------------- */

.orq-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.orq-table tr.is-changed td { background: #eff6ff; }
/* A line the plan does not order: there to be seen (and ordered if wanted), quieter than the rest. */
.orq-table tr.is-unplanned:not(.is-changed) td { color: var(--pt-muted); }
.orq-table tr.is-unplanned:not(.is-changed) .co-strong { font-weight: 500; }
.orq-change { width: 84px; min-height: 34px; padding: 4px 8px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.orq-change.is-set { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.orq-new { color: #1d4ed8; }
.orq-diff.is-up { color: #047857; font-weight: 700; }
.orq-diff.is-down { color: #b91c1c; font-weight: 700; }

/* Approve stays in reach however far down the lines go. */
.orq-bar {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 12px 16px; border: 1px solid var(--pt-line); border-radius: 14px; background: rgba(255, 255, 255, .96);
  box-shadow: 0 -6px 20px rgba(15, 23, 42, .08); backdrop-filter: blur(6px);
}
.orq-bar-text { font-size: 14px; font-weight: 600; color: var(--pt-ink); font-variant-numeric: tabular-nums; }
.orq-approve { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 22px; }

@media (max-width: 720px) {
  .orq-shop-pick { max-width: none; }
  .orq-bar { margin-inline: -4px; border-radius: 12px; }
  .orq-approve { flex: 1 1 100%; justify-content: center; }
  .orq-actions .btn { flex: 1 1 auto; justify-content: center; min-height: 40px; }
}

/* A request in its box on a phone: the frozen top kept short, so the lines
   have the room — the four figures in one row, search and ticks in two lines,
   Approve beside the total — and Barcode and Description narrow enough that
   Order Qty and Change Qty are on the screen without scrolling sideways. */
@media (max-width: 640px) {
  dialog.op-box .orq .field-hint { font-size: 11.5px; line-height: 1.45; }
  dialog.op-box .co-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  dialog.op-box .co-counts .rb-figure { padding: 7px 8px; border-top: 0; }
  dialog.op-box .co-counts .rb-figure + .rb-figure { border-left: 1px solid var(--pt-line-soft); }
  dialog.op-box .co-counts .rb-figure:last-child:nth-child(odd) { grid-column: auto; }
  dialog.op-box .co-counts .rb-figure-label { font-size: 10.5px; line-height: 1.3; }
  dialog.op-box .co-counts .rb-figure-value { font-size: 15px; }
  dialog.op-box .co-tools { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  dialog.op-box .co-tools .rb-search { flex: 1 1 100%; }
  dialog.op-box .co-toggle { min-height: 32px; }
  dialog.op-box .orq-bar { flex-wrap: nowrap; margin-inline: 0; padding: 8px 10px; }
  dialog.op-box .orq-bar-text { font-size: 12.5px; }
  dialog.op-box .orq-approve { flex: none; min-height: 40px; padding-inline: 16px; }
  dialog.op-box .orq-table { --co-code: 84px; --co-desc: 104px; }
  dialog.op-box .orq-table th { min-width: 54px; padding-inline: 6px; }
  dialog.op-box .orq-table td { padding-inline: 6px; }
  dialog.op-box .orq-change { width: 58px; padding-inline: 4px; }
}