/* Prices — prices.css v1.0.1 (spec 049 S7; TASK-2026-132; UI lane U1)

   The head-office Prices screens (prices.js, price_lists.js, price_requests_inbox.js). Everything here is the few pieces the approved branch-transfer kit
   (branch_transfers.css, `bx-`) does not have, named `pl-` as the mockups name them. The look of the mockups was scored 4/10 by the owner and will be redone, so this
   file is deliberately thin: tokens only, logical sides only, no one-off colours, nothing toggled with [hidden] given a display. Redoing the look touches these lines.
*/

/* ─────────────── the page head: the heading, the tab strip, the button at the strip's end ─────────────── */
.pl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.pl-head .bx-h1 { margin-inline-end: auto; }
.pl-tabrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.pl-tabrow .pl-tab-end { margin-inline-start: auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pl-count { font-family: 'Outfit', 'Cairo', sans-serif; font-variant-numeric: tabular-nums; }
.pl-pane { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.pl-pane > * { flex: none; min-width: 0; }

/* the (i) of a panel stands in its top inline-end corner; the panel's header keeps room for it */
.pl-page .bx-panel > .bx-panel-h { padding-inline-end: 52px; }
.pl-page .bx-panel > .info-tip.bx-corner { inset-block-start: 16px; }

/* ─────────────── the late strip ─────────────── */
.pl-late { display: flex; flex-direction: column; border: 1px solid var(--line); border-inline-start: 3px solid var(--warning); background: var(--surface); border-radius: 2px; position: relative; }
.pl-late-h { padding: 14px 18px; padding-inline-end: 52px; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.pl-late-h i { color: var(--warning); font-size: 13px; }
.pl-late-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 18px; border-block-start: 1px solid var(--line); }
.pl-late-row .pl-late-name { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; }
.pl-late-row .pl-late-name small { font-size: 12.5px; color: var(--bx-muted); }

/* ─────────────── lists, rows, progress ─────────────── */
.pl-prog { display: flex; align-items: center; gap: 10px; min-inline-size: 120px; }
.bx-table tbody tr[data-pl-act] { cursor: pointer; }
.bx-table tbody tr[data-pl-act]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.bx-table td.pl-wrap { white-space: normal; min-inline-size: 220px; }
.bx-table td.is-plain .bx-cell-2 { text-align: start; align-items: flex-start; }
.bx-table td.is-plain { text-align: start; }
.pl-detail { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: start; }
@container bx (max-width: 700px) { .bx-table.is-stack td .pl-detail { text-align: end; align-items: flex-end; } }
.pl-open-end { white-space: normal; display: inline-block; max-inline-size: 170px; }
.pl-sent-by { margin-top: 4px; }
.pl-flush { margin: 0; }

/* ─────────────── an editable price, a change, a pair of figures ─────────────── */
.pl-money-in { display: inline-flex; align-items: center; gap: 6px; }
.pl-money-in input { inline-size: 96px; block-size: 36px; padding: 0 8px; box-sizing: border-box; font: inherit; font-family: 'Outfit', 'Cairo', sans-serif; font-variant-numeric: tabular-nums; text-align: end; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); color: var(--text); }
.pl-money-in input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--border-active); }
.pl-money-in input[aria-invalid="true"] { border-color: var(--danger); }
.pl-money-in .pl-cur { font-size: 12px; color: var(--bx-muted); }
.pl-delta { font-family: 'Outfit', 'Cairo', sans-serif; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--muted); white-space: nowrap; }
.pl-delta.is-down { color: var(--info); }
.pl-pair { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.45; align-items: flex-end; min-width: 0; max-inline-size: 100%; text-align: end; }
.pl-pair small { font-size: 12px; color: var(--bx-muted); white-space: normal; }
.pl-remove { border: 0; background: none; color: var(--bx-muted); inline-size: 32px; block-size: 32px; border-radius: 2px; cursor: pointer; display: inline-grid; place-items: center; }
.pl-remove:hover { background: var(--tint); color: var(--danger); }
.pl-remove:focus-visible { outline: 2px solid var(--focus); }
.pl-toolbar-end { margin-inline-start: 0; inline-size: 100%; justify-content: flex-end; }

/* ─────────────── the draft: which branches ─────────────── */
.pl-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; padding: 0; list-style: none; }
.pl-branches label { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 2px; font-size: 14px; cursor: pointer; background: var(--surface); }
.pl-branches input { inline-size: 16px; block-size: 16px; min-height: 0 !important; accent-color: var(--fill); flex: none; }
@container bx (max-width: 560px) { .pl-branches { grid-template-columns: 1fr; } }

/* ─────────────── dialogs ─────────────── */
/* a dialog is its own container for the kit's narrow-width rules (it stands outside the page's container) */
.modal-card.bx-dlg.pl-dlg { container-name: bx; }
.modal-card.bx-dlg.pl-dlg .modal-body > * { flex: none; min-width: 0; }
.modal-card.bx-dlg.pl-dlg .modal-body { overflow-y: auto; }
.pl-ack { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); font-size: 14px; line-height: 1.7; cursor: pointer; }
.pl-ack input { inline-size: 18px; block-size: 18px; min-height: 0 !important; margin-top: 4px; flex: none; accent-color: var(--fill); }
.pl-ack.is-need { border-color: var(--danger); }
.pl-textarea { block-size: auto; min-height: 88px; }
.pl-end-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pl-end-row input[type="date"] { max-inline-size: 220px; }
.pl-noend { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.pl-noend input { inline-size: 16px; block-size: 16px; min-height: 0 !important; accent-color: var(--fill); flex: none; }
.modal-card.bx-dlg.pl-dlg .bx-tablewrap { border: 1px solid var(--line); border-radius: 2px; }