/* ─────────────────────────────────────────────────────────────────────────────────────
   The branch's price screens — price_branch.css v1.0.1 (spec 049, slice S8, TASK-2026-132; UI lane U2)

   Tags to change (price_tags.js), Price requests of the branch (price_requests_branch.js) and the bell item (price_bell.js). The approved mockups
   049-m2 and 049-m3 were approved for behaviour with the look scored 4/10, to be redone, so everything here is thin and token-based: the pieces
   these screens share with the other branch screens (the panel, the table, the notice, the dialog, the status words) are branch_transfers.css's
   bx- classes, and this file adds only the pb- classes the two pages need. When the look is redone, this is the file that changes.

   Rules this file keeps: tokens only; logical sides; nothing toggled with the hidden attribute is given an explicit display; dialogs fold on their own
   width (container queries), never on the screen's.
   ───────────────────────────────────────────────────────────────────────────────────── */

.pb-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pb-view > .pb-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pb-title { margin: 0; }
.pb-sent { margin-top: 4px; }
.pb-sub { font-size: 13.5px; color: var(--muted); }
.pb-tab-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px; }

/* money and change: two lines in a cell, the figure first */
.pb-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; }
.pb-pair small { font-size: 12px; color: var(--bx-muted); white-space: normal; }
.pb-stack { display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.pb-delta { font-family: 'Outfit', 'Cairo', sans-serif; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--muted); white-space: nowrap; }
.pb-open { white-space: normal; display: inline-block; max-inline-size: 170px; }
.bx-table td.is-plain .bx-cell-2 { text-align: start; align-items: flex-start; }
.bx-table td.is-plain { text-align: start; }

/* the tick row at the foot of a card */
.pb-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 18px; border-block-start: 1px solid var(--line); background: var(--bx-well); }
.pb-confirm-text { flex: 1 1 280px; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.7; }
.pb-confirm-text small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
.pb-confirm .btn[disabled] { cursor: not-allowed; }
@container bx (max-width: 700px) { .pb-confirm .btn { flex: 1 1 100%; } }

/* the print dialog: a few labels as the printer will draw them (white paper in both themes) */
.pb-labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pb-label { background: #fff; color: #1D2D3E; border: 1px solid #C7D2DC; border-radius: 2px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.pb-label b { font-size: 13px; line-height: 1.4; }
.pb-label span { font-size: 11.5px; color: #5B6F84; }
.pb-label strong { font-family: 'Outfit', 'Cairo', sans-serif; font-size: 20px; line-height: 1.3; }
.pb-label .pb-bars { block-size: 18px; margin-top: 4px; background: repeating-linear-gradient(90deg, #1D2D3E 0 2px, transparent 2px 4px, #1D2D3E 4px 5px, transparent 5px 8px, #1D2D3E 8px 11px, transparent 11px 13px); }
.pb-static { display: flex; align-items: center; min-block-size: var(--bx-field, 44px); padding: 0 12px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 2px; background: var(--bx-well); color: var(--text); }

/* a refused request: its reason stands on a row of its own under the request */
.pb-view .bx-table tbody tr.has-sub td { border-block-end: 0; padding-block-end: 4px; }
.pb-view .bx-table tbody tr.pb-sub-row td { padding-block-start: 0; white-space: normal; }
.pb-view .bx-table tbody tr.pb-sub-row:hover, .pb-view .bx-table tbody tr.has-sub:hover { background: transparent; }
.pb-sub-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pb-reason-line { display: flex; gap: 8px; align-items: baseline; font-size: 13px; color: var(--muted); white-space: normal; line-height: 1.65; flex: 1 1 260px; }
.pb-reason-line i { color: var(--danger); font-size: 11px; }

/* the request dialog */
.pb-search { margin-block-end: 8px; }
.pb-found-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); }
.pb-found-list:empty { display: none; }
.pb-found-list li + li { border-block-start: 1px solid var(--line); }
.pb-found { display: flex; align-items: center; justify-content: space-between; gap: 12px; inline-size: 100%; padding: 10px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.pb-found:hover, .pb-found:focus-visible { background: var(--tint); outline: none; }
.pb-found:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.pb-found-end { flex: none; color: var(--muted); }
.pb-none { margin: 4px 0 8px; }
.pb-reqlines { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); }
.pb-reqlines:empty { display: none; }
.pb-reqline { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name money drop" "delta delta delta" "err err err"; gap: 8px 16px; align-items: center; padding: 12px 14px; border-block-end: 1px solid var(--line); }
.pb-reqline:last-child { border-block-end: 0; }
.pb-reqline > .bx-cell-2 { grid-area: name; white-space: normal; min-width: 0; }
.pb-reqline > .pb-money-in { grid-area: money; }
.pb-reqline > .pb-delta { grid-area: delta; justify-self: start; font-size: 12.5px; }
.pb-reqline > .pb-delta:empty { display: none; }
.pb-reqline > .pb-remove { grid-area: drop; }
.pb-reqline > .pb-line-err { grid-area: err; margin: 0; }
.pb-money-in { display: inline-flex; align-items: center; gap: 6px; }
.bx-dlg .pb-money-in input { inline-size: 110px; block-size: 38px; min-height: 0; padding: 0 8px; font-family: 'Outfit', 'Cairo', sans-serif; font-variant-numeric: tabular-nums; text-align: end; }
.pb-cur { font-size: 12px; color: var(--bx-muted); }
.pb-remove { border: 0; background: none; color: var(--bx-muted); inline-size: 36px; block-size: 36px; border-radius: 2px; cursor: pointer; display: inline-grid; place-items: center; }
.pb-remove:hover { background: var(--tint); color: var(--danger); }
.pb-remove:focus-visible { outline: 2px solid var(--focus); }
@container (max-width: 560px) {
  .pb-reqline { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name drop" "money money" "delta delta" "err err"; }
  .pb-reqline > .pb-money-in { justify-self: start; }
}

/* the bell item (the bell is not inside a bx- view, so it carries its own tokens) */
.bell-price-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; background: var(--warning-tint); border-block-end: 1px solid var(--line); text-align: start; }
.bell-price-item > i { color: var(--warning); margin-top: 4px; }
.bell-price-item b { font-size: 14px; color: var(--text); }
.bell-price-item p { grid-column: 2; margin: 0; font-size: 13px; color: var(--muted); line-height: 1.7; }
.bell-price-item .btn { grid-column: 2; justify-self: start; margin-top: 4px; }