/* Stock transfers, Send stock, Receive a transfer, Other branches' stock and Piece requests - stock_flow.css v1.0.0 (TASK-2026-186; approved mockup scratch/stock-transfers.html).
   The classes of the multi-branch pages (mr-, mb-) are in app.css and multi_branch.css; these are the few this flow adds (st-). Logical sides only (padding-inline, text-align: start). */
.st-page .mb-chips { margin-inline-start: 0; margin-block-end: var(--space-3); }
.st-route { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-4); }
.st-route .form-group { margin-bottom: 0; }
.st-page .mb-ptitle { display: grid; gap: 2px; margin-inline-end: 0; min-width: 0; }
.st-page .mb-ptitle b { font-size: var(--fs-title); }
.st-page .mb-ptitle span { color: var(--muted); font-size: var(--fs-small); }
.st-route select { width: auto; min-width: 14rem; max-width: 100%; }
.st-scan { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); }
.st-scan .form-group { flex: 1 1 16rem; margin-bottom: 0; min-width: 0; }
.st-scan input { width: 100%; }
.st-last { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; margin-top: var(--space-2); color: var(--muted); font-size: var(--fs-small); }
.st-last b { color: var(--text); font-weight: 700; }
.st-res { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; border: 1px solid var(--line); border-radius: var(--radius); }
.st-res:empty { display: none; }
.st-res > li + li { border-top: 1px solid var(--line); }
.st-res button { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: 0; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.st-res button:hover, .st-res button:focus-visible { background: var(--tint); }
.st-res small { color: var(--muted); font-size: var(--fs-small); }
.st-colour { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.st-colour > b { color: var(--muted); font-size: var(--fs-small); font-weight: 700; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--space-3); }
.st-cell { display: grid; gap: 2px; min-width: 0; }
.st-cell > label { margin: 0; font-weight: 700; }
.st-cell input { width: 100%; }
.st-cell > small { color: var(--muted); font-size: var(--fs-small); }
.st-cell.is-out { opacity: .55; }
.st-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.st-step { display: inline-flex; align-items: center; gap: var(--space-2); }
.st-step > b { min-width: 2.5ch; text-align: center; }
.st-step .btn { min-width: 0; width: 32px; padding: 0; }
.st-why { display: grid; gap: var(--space-1); min-width: 12rem; }
.st-why input { width: 100%; }
.mr-tbl td.st-r { min-width: 14rem; white-space: normal; padding-block: var(--space-2); }
.mr-tbl tbody tr.selected-row .st-r input { color: var(--text); }
.st-qrow { display: grid; grid-template-columns: minmax(0, 1fr) auto 6rem; align-items: center; gap: var(--space-2) var(--space-3); }
.st-qrow input { width: 100%; }
.st-qrow small { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.st-prev { max-height: 50vh; }
.st-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--space-3); }
.st-ticks { display: flex; align-items: center; gap: var(--space-2); }
.st-pair { display: inline-flex; align-items: center; gap: var(--space-2); }
.mr-tbl td.mb-oq, .mr-tbl th.mb-oq { text-align: center; }
.mr-tbl td.mb-oq .mr-muted { font-weight: 400; }
.st-page .mr-tbl tbody tr[data-tone="none"] > td:first-child { box-shadow: none; }
@media (max-width: 768px) {
  .st-route select { min-width: 0; width: 100%; }
  .st-route .form-group { flex: 1 1 100%; }
  .st-opts { grid-template-columns: minmax(0, 1fr); }
  .st-qrow { grid-template-columns: minmax(0, 1fr) 6rem; }
  .st-qrow small { grid-column: 1 / -1; grid-row: 2; }
  .mr-tbl td.st-r { min-width: 0; }
  .st-page .mb-stack td.st-r { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .st-page .mb-stack td:empty { display: none; }
}

/* the slip dialog's preview scrolls inside its own well (the month report's print dialog draws the same well) */
.mr-prev.st-prev { max-height: 50vh; }
.st-a4 .st-bars, .st-bars { display: block; }