/* stockroom -- buying view: purchases, suppliers, and the purchase sheets.
   Page styles are scoped under .view-buying (all four routes carry it);
   sheet bodies under .buy-sheet. Kit classes are composed, never restyled. */

/* ------------------------------------------------------------ list page -- */
.view-buying .buy-kpis { margin-top: 6px; }
.view-buying .buy-kpis .kpi { padding: 12px 12px 11px; }
.view-buying .buy-kpis .kpi .value { font-size: 24px; margin-top: 6px; }
.view-buying .buy-kpis .kpi .foot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.view-buying .kpi.tone-bad .value { color: var(--t); }
.view-buying .buy-seg { margin: 16px 0 12px; }
@media (min-width: 900px) {
  .view-buying .buy-kpis { max-width: 720px; }
  .view-buying .buy-seg .seg { max-width: 420px; }
}

/* ------------------------------------------------------ purchase cards -- */
.view-buying .buy-cards { display: grid; gap: 12px; }
@media (min-width: 900px) {
  .view-buying .buy-list .buy-cards { grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
}
.view-buying .pcard { padding: 14px 14px 13px; display: grid; gap: 11px; cursor: pointer; min-width: 0; outline: none; }
.view-buying .pcard:focus-visible { box-shadow: 0 0 0 3px var(--brand-tint), var(--sh-1); border-color: var(--brand-mid); }
.view-buying .pcard.late { border-color: var(--bad-mid); }
.view-buying .pcard.void { opacity: .72; }
.view-buying .pc-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.view-buying .pc-head .main { flex: 1; min-width: 0; }
.view-buying .pc-name { font-weight: 650; font-size: 16px; letter-spacing: -.01em; line-height: 1.25;
                        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-buying .pc-sub { font-size: 13px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums;
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-buying .pc-trail { display: grid; justify-items: end; gap: 6px; flex: none; }
.view-buying .pc-total { font: 700 19px/1 var(--f-num); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.view-buying .pc-journey .bar-legend { margin-top: 6px; }
.view-buying .pc-journey .bar-legend .neg { font-weight: 650; }
.view-buying .pc-lines { font-size: 13.5px; line-height: 1.35; color: var(--ink-2);
                         display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.view-buying .pc-actions { display: flex; gap: 8px; }
.view-buying .pc-actions .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; gap: 6px; font-size: 14.5px; }
.view-buying .pc-actions .btn .i { width: 18px; height: 18px; }
.view-buying .pc-actions .btn.soft { --tt: var(--brand-tint); --t: var(--brand); }

/* ------------------------------------------------------ purchase detail -- */
.view-buying .buy-detail > div > .card:first-child,
.view-buying .buy-detail > div > .section:first-child { margin-top: 6px; }
.view-buying .buy-hero { display: grid; gap: 16px; }
.view-buying .bh-sup { display: flex; align-items: center; gap: 12px; color: inherit; min-width: 0; min-height: 44px; }
.view-buying .bh-sup .main { flex: 1; min-width: 0; }
.view-buying .bh-sup .title { font-weight: 650; font-size: 16px; letter-spacing: -.01em;
                              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-buying .bh-sup .sub { font-size: 13px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.view-buying .bh-due .lbl { font: 650 12px/1.2 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.view-buying .bh-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 5px; }
.view-buying .bh-date { font: 700 32px/1.05 var(--f-num); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.view-buying .bh-when { font: 650 14.5px/1.2 var(--f-ui); color: var(--muted); }
.view-buying .bh-when.bad { color: var(--bad); }
.view-buying .bh-when.warn { color: var(--warn); }
.view-buying .bh-when.ok { color: var(--ok); }
.view-buying .buy-hero .pc-actions .btn { height: 48px; font-size: 15px; }

.view-buying .buy-count { font-size: 13px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.view-buying .buy-detail .row .gauge .bar-legend { margin-top: 4px; }
.view-buying .buy-detail .row .trail { min-width: 78px; }

.view-buying .buy-costs .kv { font-size: 15px; margin: 0; }
.view-buying .bc-total { display: flex; justify-content: space-between; align-items: baseline;
                         margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 650; }
.view-buying .bc-total .v { font: 700 22px/1 var(--f-num); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }

/* timeline: every stamped date is a button that corrects it */
.view-buying .buy-tl-card { padding: 10px 14px 4px 16px; }
.view-buying .buy-tl li { padding: 0 0 2px; }
.view-buying .buy-tl li::before { top: 16px; }
.view-buying .buy-tl li.pending::before { border-width: 2px; background: var(--paper-2); }
.view-buying .buy-tl li.pending.tone-muted::before { border-color: var(--line-2); }
.view-buying .buy-tl li.pending .t-title { color: var(--muted); }
.view-buying .buy-tl::before { top: 18px; bottom: 22px; }
.view-buying .tl-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 8px 0 8px 6px;
                       text-align: left; border-radius: 10px; color: inherit; }
.view-buying button.tl-row:active { background: var(--paper); }
.view-buying .tl-main { flex: 1; min-width: 0; }
.view-buying .tl-main .t-sub { overflow-wrap: anywhere; }
.view-buying .tl-date { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 3px 8px; border-radius: 8px;
                        background: var(--paper-2); font: 650 13.5px/1.2 var(--f-num); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.view-buying .tl-date .i { width: 13px; height: 13px; color: var(--muted); }
.view-buying .tl-date.plain { background: none; color: var(--muted); font-weight: 600; padding-right: 0; }
.view-buying li.tone-bad .tl-date:not(.plain) { background: var(--bad-tint); color: var(--bad); }
.view-buying li.tone-bad .tl-date .i { color: var(--bad); }

.view-buying .buy-track .title { font-family: var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.view-buying .buy-more { display: flex; gap: 8px; }
.view-buying .buy-more .btn { flex: 1 1 0; min-width: 0; padding: 0 10px; }

/* ------------------------------------------------------------ suppliers -- */
.view-buying .buy-sups .row { min-height: 72px; }
.view-buying .buy-meter { display: flex; align-items: center; gap: 8px; margin-top: 7px;
                          font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.view-buying .buy-meter .bar { flex: 1; max-width: 120px; }
.view-buying .buy-sups .trail .v { font-size: 18px; }

.view-buying .buy-supplier > div > .card:first-child { margin-top: 6px; }
.view-buying .buy-score { display: grid; gap: 16px; }
.view-buying .bs-top { display: flex; align-items: center; gap: 16px; }
.view-buying .bs-lbl { font: 650 12px/1.2 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.view-buying .bs-big { font: 700 44px/1 var(--f-num); letter-spacing: -.03em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.view-buying .bs-big .u { font: 650 17px/1 var(--f-ui); letter-spacing: -.01em; color: var(--muted); }
.view-buying .bs-sub { font-size: 13px; color: var(--muted); margin-top: 5px; }
.view-buying .bs-range { position: relative; height: 10px; border-radius: 99px; background: var(--paper-2); }
.view-buying .bs-range .span { position: absolute; top: 0; bottom: 0; min-width: 10px; border-radius: 99px; background: var(--brand-mid); }
.view-buying .bs-range .med { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; border-radius: 2px;
                              background: var(--brand); box-shadow: 0 0 0 2px var(--card); }
.view-buying .bs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--line); padding-top: 13px; }
.view-buying .bs-stat .v { font: 700 20px/1.1 var(--f-num); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.view-buying .bs-stat .l { font-size: 12px; color: var(--muted); margin-top: 3px; font-weight: 600; }
.view-buying .buy-newbtn { margin-top: 12px; }
.view-buying .buy-contact .row .title { font-size: 15px; }

/* --------------------------------------------------------------- sheets -- */
.buy-sheet .buy-now { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 2px 12px; font-size: 15px; }
.buy-sheet .buy-now b { font-weight: 650; font-variant-numeric: tabular-nums; }
.buy-sheet .buy-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.buy-sheet .buy-quick .tile { min-height: 74px; padding: 12px; justify-content: center; }
.buy-sheet .buy-quick .tile .big { font-size: 22px; }
.buy-sheet .buy-chiprow { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 12px; }
.buy-sheet .buy-chip { max-width: 100%; min-width: 0; height: 42px; }
.buy-sheet .buy-chip .ellipsis { max-width: 190px; }
.buy-sheet .buy-chip .i { color: var(--muted); }
.buy-sheet .buy-add { margin-top: 10px; }
.buy-sheet .buy-add .btn { border-style: dashed; color: var(--brand); }
.buy-sheet .sec-head { margin-top: 4px; }