/* Paddy purchase and supplier money (/purchase). Uses the app.css tokens (--ok, --warn, --bad,
   --info, --gold and their -bg partners switch for light and dark), so nothing here needs its own
   dark variant. Phone width (390 px): every grid falls to one column. */

.pu-crumbs { font-size: 14px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pu-crumbs a { text-decoration: none; font-weight: 600; }
.pu-sub { margin: 20px 0 6px; font-size: 16px; }
.pu-kpis { margin-bottom: 16px; }
.pu-grid { margin-bottom: 16px; }
.pu-grid > .panel, .pu-stack > .panel { min-width: 0; }
.pu-big-input { font-size: 20px; font-weight: 600; letter-spacing: .01em; }
.pu-over { color: var(--bad); font-weight: 700; }
.pu-neg { color: var(--bad); }
.pu-why { color: var(--bad); font-weight: 600; }
.pu-details summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.pu-details[open] summary { margin-bottom: 8px; }

/* Tone edge: colour plus words, never colour alone */
.pu-tone-ok { --pu-edge: var(--ok); }
.pu-tone-warn { --pu-edge: var(--warn); }
.pu-tone-bad { --pu-edge: var(--bad); }
.pu-tone-info { --pu-edge: var(--info); }

/* Scan box */
.pu-scan-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.pu-scan-form .field { flex: 1 1 260px; margin: 0; }
.pu-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.pu-filters .field { flex: 1 1 180px; margin: 0; }

/* Truck found */
.pu-truck { box-shadow: inset 4px 0 0 var(--pu-edge, var(--line-strong)); display: flex; flex-direction: column; gap: 10px; }
.pu-truck-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pu-truck-id { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.pu-truck-id .icon, .pu-truck-party .icon { width: 18px; height: 18px; }
.pu-truck-party { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.pu-truck-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pu-lab-box { display: flex; flex-direction: column; gap: 6px; }
.pu-lab-box p { margin: 0; }
.pu-mini-label { font-size: 13px; font-weight: 600; color: var(--muted); }

/* Bill form and bill page */
.pu-bill-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.pu-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pu-bill-form .field-wide, .form .field-wide { grid-column: 1 / -1; }
.pu-summary { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 10px; }
.pu-calc li strong { font-variant-numeric: tabular-nums; }
.pu-calc-net strong { font-size: 24px; color: var(--ink); }
.pu-live { margin: 2px 0 0; font-weight: 600; min-height: 1em; }
.pu-live.is-ok { color: var(--ok); }
.pu-live.is-warn { color: var(--warn); }
.pu-live.is-bad { color: var(--bad); }
.pu-road { overflow-x: auto; }
.pu-code-box, .pu-new-code { max-width: 320px; }
.pu-code-box svg, .pu-new-code svg { width: 100%; height: auto; display: block; }
.pu-new-slip { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.pu-new-slip p { flex: 1 1 220px; margin: 0; }
.pu-meters { display: flex; flex-direction: column; gap: 12px; }
.pu-rate-none { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0; }
.pu-rate-label { font-weight: 600; font-size: 14px; }

/* Payment method chooser */
.pu-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pu-method { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius); background: var(--sunk); cursor: pointer; }
.pu-method span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pu-method small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.pu-method:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); }
.pu-method.is-off { opacity: .55; cursor: not-allowed; }
.pu-due-box { margin: 0; }

/* Cards (trucks to bill, bills waiting, payee numbers) */
.pu-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.pu-rate-cards { margin: 0 0 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.pu-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--radius); background: var(--sunk); box-shadow: inset 4px 0 0 var(--pu-edge, var(--line-strong)); min-width: 0; color: inherit; }
.pu-card p { margin: 0; }
a.pu-card-link { text-decoration: none; }
a.pu-card-link:hover { background: var(--sunk-2, var(--sunk)); }
.pu-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pu-card-kind { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.pu-card-kind .icon { width: 16px; height: 16px; }
.pu-card-big { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pu-card-big small { font-size: 14px; color: var(--muted); font-weight: 600; }
.pu-rate-now { font-size: 22px; font-weight: 700; }

.pu-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pu-list li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pu-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); flex: none; align-self: center; }
.pu-dot-ok { background: var(--ok); }
.pu-dot-bad { background: var(--bad); }

/* Waterfall: net weight → cuts → payable, value → adjustments → net payable */
.pu-wf { margin: 0 0 12px; }
.pu-wf-cap { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; margin-bottom: 8px; }
.pu-wf-cap small { color: var(--muted); font-weight: 600; }
.pu-wf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pu-wf-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 2fr) minmax(84px, auto); gap: 10px; align-items: center; }
.pu-wf-label { font-size: 14px; display: flex; flex-direction: column; min-width: 0; }
.pu-wf-label small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.pu-wf-value { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; white-space: nowrap; }
.pu-wf-track { display: block; overflow: visible; }
.pu-wf-bg { fill: var(--sunk-2, rgba(128, 128, 128, .14)); }
.pu-wf-start .pu-wf-bar { fill: var(--gold, #C9A227); }
.pu-wf-cut .pu-wf-bar { fill: var(--bad); }
.pu-wf-add .pu-wf-bar { fill: var(--info); }
.pu-wf-end .pu-wf-bar { fill: var(--ok); }
.pu-wf-cut .pu-wf-value { color: var(--bad); }
.pu-wf-end .pu-wf-value { color: var(--ok); font-size: 17px; }
.pu-wf-row.is-zero { opacity: .55; }

/* Purchase slip and vouchers (print) */
.pu-slip { max-width: 820px; margin: 0 auto; padding: 24px; border-radius: var(--radius-lg); background: var(--glass); box-shadow: var(--shadow), var(--hairline); display: flex; flex-direction: column; gap: 14px; }
.pu-slip-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid var(--line-strong); padding-bottom: 12px; }
.pu-slip-head > div { display: flex; flex-direction: column; gap: 2px; }
.pu-slip-head strong { font-size: 19px; }
.pu-slip-title { font-weight: 700; margin-top: 4px; }
.pu-slip-no { text-align: right; }
.pu-slip-no strong { font-size: 20px; }
.pu-slip-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; margin: 0; }
.pu-slip-facts div { display: flex; flex-direction: column; }
.pu-slip-facts dt { font-size: 12px; color: var(--muted); }
.pu-slip-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pu-slip-codes { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pu-slip-codes > div:first-child { flex: 1 1 260px; max-width: 360px; display: flex; flex-direction: column; gap: 4px; }
.pu-slip-codes svg { width: 100%; height: auto; display: block; }
.pu-qr { width: 112px; height: 112px; display: block; }
.pu-slip-table { width: 100%; border-collapse: collapse; }
.pu-slip-table td { padding: 7px 4px; border-bottom: 1px solid var(--line); }
.pu-slip-table .num, .table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pu-slip-table .is-net td { font-weight: 700; font-size: 18px; border-bottom: 0; }
.pu-voucher-amount { font-size: 34px; font-weight: 800; margin: 0; font-variant-numeric: tabular-nums; }
.pu-slip-foot { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 26px; }
.pu-sign { flex: 1 1 120px; border-top: 1px solid var(--ink-2, var(--ink)); padding-top: 4px; text-align: center; color: var(--ink); }

@media (max-width: 900px) {
  .pu-bill-layout, .pu-truck-grid { grid-template-columns: minmax(0, 1fr); }
  .pu-summary { position: static; }
}
@media (max-width: 520px) {
  .pu-wf-row { grid-template-columns: minmax(0, 1fr) minmax(70px, auto); }
  .pu-wf-track { grid-column: 1 / -1; grid-row: 2; }
  .pu-rate-cards { grid-template-columns: minmax(0, 1fr); }
  .pu-slip { padding: 14px; }
  .pu-slip-no { text-align: left; }
}
@media print {
  .pu-slip { box-shadow: none; background: #FFFFFF; max-width: none; padding: 0; }
  .pu-wf-bg { fill: #EEEEEE; }
  .pu-summary { position: static; }
}