/* ==========================================================================
   Purchase Orders — Bills & Payments (purchase-orders-bills.html)

   Spec: build/po/pages.md §13

   Only what is this page's own: the column shares of the bills register and
   of the five smaller views (Bill Inbox, Payment Runs, Scheduled, Received
   Not Billed, Billed Not Received), the approval banner, the KPI tiles as
   links, the inbox address, the payment-run and remittance dialogs, the new
   bill form, and how the page folds at 1100 / 768 / 480. Everything another
   Purchase Orders page also says (the hub strip, the view switch, the
   readings, the bulk bar, the choice rows, the gear dialogs) is in
   css/pages/purchase-orders.css. Classes here use the `po-bl-` prefix.
   ========================================================================== */

/* ---------- The bills register ------------------------------------------------
   Nine columns take shares of the table under `table-layout: fixed`, so they
   resize with the browser and never with the data. The money is last and is
   right-aligned by `.data-table`'s own last-column rule. */
.po-bl-table th.col-check  { width: 4%; }
.po-bl-table th.col-bill   { width: 11%; }
.po-bl-table th.col-sup    { width: 13%; }
.po-bl-table th.col-for    { width: 15%; }
.po-bl-table th.col-match  { width: 13%; }
.po-bl-table th.col-due    { width: 10%; }
.po-bl-table th.col-pay    { width: 12%; }
.po-bl-table th.col-sync   { width: 9%; }
.po-bl-table th.col-amount { width: 13%; }
.po-bl-table td.col-match,
.po-bl-table td.col-pay { white-space: normal; }
.po-bl-table td.col-match .badge,
.po-bl-table td.col-pay .badge { white-space: nowrap; }
.po-bl-table td.col-sync .po-reading > * { white-space: nowrap; }
.po-bl-table td.col-sync .po-reading,
.po-bl-table td.col-due .po-reading { font-size: 12px; }
.po-bl-table .cell-stack .sub a { color: var(--color-primary-600); text-decoration: none; }
.po-bl-table .cell-stack .sub a:hover { color: var(--color-primary-700); }
/* A record number never breaks at its hyphens, in a link or in a sub-line. */
.po-bl-nw,
[data-view-panel] .po-table td a { white-space: nowrap; }
/* A main line that is a record number reads as one, tabular. */
.po-bl-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The smaller views: each a table on the same panel, shares of its own. */
.po-bl-inbox th.col-recv   { width: 14%; }
.po-bl-inbox th.col-from   { width: 20%; }
.po-bl-inbox th.col-read   { width: 24%; }
.po-bl-inbox th.col-sugg   { width: 20%; }
.po-bl-inbox th.col-status { width: 10%; }
.po-bl-inbox th.col-amount { width: 12%; }

.po-bl-runs th.col-run     { width: 18%; }
.po-bl-runs th.col-date    { width: 12%; }
.po-bl-runs th.col-bills   { width: 22%; }
.po-bl-runs th.col-who     { width: 18%; }
.po-bl-runs th.col-status  { width: 16%; }
.po-bl-runs th.col-amount  { width: 14%; }
.po-bl-runs td.col-status { white-space: normal; line-height: 1.9; }

.po-bl-sched th.col-po      { width: 22%; }
.po-bl-sched th.col-inst    { width: 20%; }
.po-bl-sched th.col-trigger { width: 24%; }
.po-bl-sched th.col-exp     { width: 16%; }
.po-bl-sched th.col-amount  { width: 18%; }

.po-bl-rnb th.col-line   { width: 26%; }
.po-bl-rnb th.col-vendor { width: 22%; }
.po-bl-rnb th.col-recv   { width: 22%; }
.po-bl-rnb th.col-state  { width: 14%; }
.po-bl-rnb th.col-amount { width: 16%; }

.po-bl-bnr th.col-bill   { width: 20%; }
.po-bl-bnr th.col-sup    { width: 20%; }
.po-bl-bnr th.col-where  { width: 26%; }
.po-bl-bnr th.col-paid   { width: 18%; }
.po-bl-bnr th.col-amount { width: 16%; }

/* A total row under a short view: the figure in 600 with a rule above it. */
.data-table tbody tr.po-bl-total td {
  font-weight: 600; border-top: 1px solid var(--color-border-strong);
  cursor: default; background: none;
}
.data-table tbody tr.po-bl-total td::after { content: none; }

/* ---------- The approval banner -----------------------------------------------
   The sentence takes the room, the act closes the line and drops under it
   when the line is too short. */
.po-bl-alert { align-items: center; flex-wrap: wrap; }
.po-bl-alert__text { flex: 1 1 320px; min-width: 0; line-height: 1.5; }
.po-bl-alert__acts { display: inline-flex; gap: 6px; flex: none; margin-left: auto; }

/* ---------- The accounting source under the title -------------------------------
   Named once for the page: the licence's one setting, read-only here. */
.po-bl-source { display: inline-flex; align-items: center; gap: 6px; }
.po-bl-source svg { width: 13px; height: 13px; flex: none; }

/* ---------- KPI tiles as links ----------------------------------------------------
   Each tile opens the list behind it, so it is an <a>; it keeps the tile's own
   ink and loses the link underline. */
a.po-bl-kpi,
a.po-bl-kpi:hover { color: inherit; text-decoration: none; }
a.po-bl-kpi { cursor: pointer; }
a.po-bl-kpi:hover { border-color: var(--color-border-strong); }

/* ---------- A view's lead-in --------------------------------------------------------
   One muted sentence over a view's table (what the list is, where it comes
   from); a closing note under it in the hint type. */
.po-bl-intro {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 0 0 10px; font-size: 13px; color: var(--color-text-muted); line-height: 1.5;
}
.po-bl-intro svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--color-text-subtle); }
.po-bl-intro a { color: var(--color-primary-600); text-decoration: none; }
.po-bl-note {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 12px 0 0; font-size: 12px; color: var(--color-text-subtle); line-height: 1.5;
}
.po-bl-note svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.po-bl-note a { color: var(--color-primary-600); text-decoration: none; }

/* The focus a KPI tile put on the register, said in the footer with its way
   back. */
.po-bl-focus { color: var(--color-text-muted); }
.po-bl-focus[hidden] { display: none; }
.po-bl-focus a { color: var(--color-primary-600); text-decoration: none; margin-left: 4px; }

/* ---------- Bill Inbox ----------------------------------------------------------------
   The inbox address is a box inside the white panel, so it stands on the
   control ground (memory.md §13): the address, then Copy. */
.po-bl-inboxbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 10px 12px; margin-bottom: 12px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  font-size: 13px; color: var(--color-text-muted);
}
.po-bl-inboxbar svg { width: 16px; height: 16px; flex: none; color: var(--color-text-subtle); }
.po-bl-inboxbar strong { color: var(--color-text); font-weight: 600; word-break: break-all; }
.po-bl-inboxbar .btn { margin-left: auto; }
.po-bl-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.po-bl-checks { font-size: 12px; }

/* ---------- Dialogs ------------------------------------------------------------------------ */
.po-bl-gap { margin-top: 14px; }

/* PAYMENT RUN: the run's bills, a total row, the ones held out. */
.po-bl-runbills th.col-bill   { width: 30%; }
.po-bl-runbills th.col-sup    { width: 30%; }
.po-bl-runbills th.col-due    { width: 20%; }
.po-bl-runbills th.col-amount { width: 20%; }
.po-bl-runbills tbody tr { cursor: default; }
.po-bl-held { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.po-bl-held li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.po-bl-held a { color: var(--color-primary-600); text-decoration: none; font-variant-numeric: tabular-nums; }
.po-bl-rate { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.po-bl-rate .field { margin: 0; }
.po-bl-rate .input { width: 110px; }
.po-bl-rate__note { font-size: 12px; color: var(--color-text-muted); padding-bottom: 8px; }
.po-pick-row.is-off .po-pick-row__meta a { color: var(--color-primary-600); text-decoration: none; }

/* REMITTANCE ADVICE: a drawn page, on the control ground inside the white
   modal (§13) — the letterhead, one block per supplier, the run total. */
.po-bl-remit {
  padding: 16px 18px;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius);
  font-size: 13px; color: var(--color-text);
}
.po-bl-remit__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding-bottom: 10px; border-bottom: 1px solid var(--color-control-border); }
.po-bl-remit__title { font-size: 15px; font-weight: 600; }
.po-bl-remit__meta { font-size: 12px; color: var(--color-text-muted); }
.po-bl-remit__block { padding: 10px 0; border-bottom: 1px solid var(--color-control-border); }
.po-bl-remit__to { font-weight: 600; margin-bottom: 4px; }
.po-bl-remit__to .po-kind { font-weight: 400; font-size: 12px; }
.po-bl-remit__line { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 8px; padding: 2px 0; font-variant-numeric: tabular-nums; }
.po-bl-remit__line > :last-child { text-align: right; }
.po-bl-remit__line--paid { font-weight: 600; }
.po-bl-remit__total { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 8px; padding-top: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.po-bl-remit__total > :last-child { text-align: right; }

/* NEW BILL: section heads and the preview of what comes across. */
.po-bl-form__h { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.po-bl-form__h:first-child { margin-top: 0; }
.po-bl-form__h .subtle { font-size: 12px; font-weight: 400; }
.po-bl-field--num .input { max-width: 160px; }
.po-bl-select { width: auto; max-width: 100%; }

/* ---------- Narrow screens -------------------------------------------------------------------
   Below 1100 the register's nine readings fight: it keeps its shares on a
   1080px table and scrolls sideways inside `.table-wrap` (the house pattern).
   The smaller views do the same at their own floor. */
@media (max-width: 1100px) {
  .po-bl-table { min-width: 1080px; }
  .po-bl-inbox { min-width: 900px; }
  .po-bl-runs { min-width: 820px; }
  .po-bl-sched,
  .po-bl-rnb,
  .po-bl-bnr { min-width: 720px; }
  /* Four tiles fold two by two, every tile the same size. */
  .kpi-summary .kpi-summary__cards > .kpi { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 768px) {
  .po-bl-alert__acts { margin-left: 0; }
  .po-bl-alert__acts .btn,
  .po-bl-acts .btn,
  .po-bl-inboxbar .btn { min-height: 44px; }
  .po-bl-runbills { min-width: 480px; }
}
@media (max-width: 640px) {
  .kpi-summary .kpi-summary__cards > .kpi { flex-basis: 100%; }
}
@media (max-width: 480px) {
  .po-bulk .btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .po-bulk .po-bulk__clear { flex-basis: 100%; }
  .po-bl-alert__acts { flex-basis: 100%; }
  .po-bl-alert__acts .btn { flex: 1 1 0; justify-content: center; }
  .po-bl-inboxbar .btn { margin-left: 0; flex-basis: 100%; justify-content: center; }
  .page-header .page-actions { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
  .tab-shell .card-footer { flex-wrap: wrap; gap: 8px; }
  .tab-shell .card-footer .page-controls { margin-left: 0; flex-wrap: wrap; row-gap: 6px; }
  /* The run's bills fit the phone: the supplier column steps aside (the
     register names it) so the amount stays on screen without a sideways
     scroll. */
  .po-bl-runbills { min-width: 0; }
  .po-bl-runbills .col-sup { display: none; }
  .po-bl-runbills th.col-bill { width: 42%; }
  .po-bl-runbills th.col-due { width: 28%; }
  .po-bl-runbills th.col-amount { width: 30%; }
  .po-bl-remit { padding: 12px; }
}