/* 11-payables.css
   Admin › Payables — supplier invoices from invoices@.

   Red is reserved for a blocker: something that stops an invoice being
   approved or sent. Amber is "read this". Nothing else on the page is
   coloured, so a red line is never decoration. */

.payables { display: grid; gap: 16px; }
.payables .notice { margin: 0; }

.payables__status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.payables__status > div { display: grid; gap: 3px; align-content: start; min-width: 0; }
.payables__status span { color: var(--ink-faint); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.payables__status strong { font-size: 13px; overflow-wrap: anywhere; }
.payables__status small { color: var(--ink-soft); font-size: 11.5px; line-height: 1.45; }
.payables__status small.is-error { color: var(--negative); }
.payables__status-actions { display: flex; gap: 6px; align-items: start; flex-wrap: wrap; }

.payables__tabs { margin-left: 0; justify-self: start; flex-wrap: wrap; }
.payables__count {
  display: inline-block;
  min-width: 18px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--surface-sunk);
  color: var(--ink-soft);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.payables__body { display: grid; gap: 14px; }
.payables__empty {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-faint);
  text-align: center;
}

.payables__card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.payables__card.is-blocked { border-left: 3px solid var(--negative); }
.payables__card-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.payables__card-head h3 { margin: 0; font-size: 15px; }
.payables__card-head h3 span { margin-left: 6px; color: var(--ink-soft); font-weight: 400; font-size: 13px; }
.payables__card-head p { margin: 4px 0 0; color: var(--ink-faint); font-size: 11.5px; overflow-wrap: anywhere; }
.payables__card-figure { display: grid; justify-items: end; gap: 2px; white-space: nowrap; }
.payables__card-figure strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.payables__card-figure span { color: var(--ink-soft); font-size: 11.5px; }
.payables .is-overdue { color: var(--negative); font-weight: 600; }

.payables__checks { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.payables__check {
  margin: 0;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.45;
  background: var(--surface-sunk);
  color: var(--ink-soft);
}
.payables__check.is-block { background: color-mix(in srgb, var(--negative) 12%, transparent); color: var(--negative); }
.payables__check.is-warn { background: color-mix(in srgb, var(--series-3) 14%, transparent); color: var(--ink); }
.payables__clear { margin: 0; color: var(--ink-faint); font-size: 12px; }
.payables__note { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }

.payables__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.payables__form label { display: grid; gap: 4px; align-content: start; min-width: 0; color: var(--ink-soft); font-size: 11px; font-weight: 600; }
.payables__form .payables__wide { grid-column: span 2; }
.payables__form input,
.payables__form select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  padding: 6px 8px;
  font: inherit;
  font-weight: 400;
  font-size: 13px;
  color-scheme: light dark;
}
.payables__form small { color: var(--ink-faint); font-weight: 400; font-size: 11px; overflow-wrap: anywhere; }

.payables__actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.payables__spacer { flex: 1; }

.payables__table td { vertical-align: top; }
.payables__table td:nth-child(3), .payables__table td:nth-child(4) { white-space: nowrap; }
.payables__table td small { display: block; margin-top: 2px; color: var(--ink-faint); font-size: 10.5px; }
.payables__table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.payables__table tr.is-blocked td:first-child { box-shadow: inset 3px 0 0 var(--negative); }
/* A <td>, so it stays a table cell: `display: flex` on a cell takes it out of
   the row, and its border and height stop lining up with the cells beside it
   (13 Oct 2026, the Ready to pay table). The buttons sit inline instead. */
.payables__row-actions { text-align: right; white-space: nowrap; }
.payables__row-actions > * { margin: 2px 0 2px 4px; vertical-align: middle; }
.payables__chip { display: inline-block; padding: 2px 7px; border-radius: 99px; font-size: 10.5px; background: var(--surface-sunk); color: var(--ink-soft); }
.payables__chip.is-block { background: color-mix(in srgb, var(--negative) 14%, transparent); color: var(--negative); }
.payables__chip.is-warn { background: color-mix(in srgb, var(--series-3) 16%, transparent); color: var(--ink); }
.payables__chip.is-ok { background: color-mix(in srgb, var(--positive) 14%, transparent); color: var(--positive); }

.payables__send {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.payables__draft { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.payables__draft header { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.payables__draft h3 { margin: 0; font-size: 14px; }
.payables__draft header span { flex: 1; color: var(--ink-soft); font-size: 12px; }
.payables__draft ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }

@media (max-width: 760px) {
  .payables__status { grid-template-columns: 1fr; }
  .payables__card-head { flex-direction: column; }
  .payables__card-figure { justify-items: start; }
  .payables__form { grid-template-columns: 1fr 1fr; }
  .payables__form .payables__wide { grid-column: 1 / -1; }
}

/* Approve and Send are the two decisions on this page; everything else is a
   way to look or to back out. Same treatment as the date picker's Apply. */
.payables .btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.payables .btn--primary:hover { color: #fff; }
.payables .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* The invoice viewer: the document over the whole page, so an invoice is
   read beside nothing rather than downloaded. Above the app bar (70) and the
   rail's scrim. */
body.payables-viewer-open { overflow: hidden; }
.payables-viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  padding: 24px;
  background: color-mix(in srgb, #000 62%, transparent);
}
.payables-viewer__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.payables-viewer__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.payables-viewer__head > div { display: grid; flex: 1; min-width: 0; }
.payables-viewer__head strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payables-viewer__head span { color: var(--ink-faint); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payables-viewer__body { min-height: 0; background: var(--surface-sunk); }
.payables-viewer__body iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.payables-viewer__body--image { display: grid; place-items: center; overflow: auto; padding: 16px; }
.payables-viewer__body--image img { max-width: 100%; height: auto; box-shadow: 0 2px 12px rgba(0, 0, 0, .15); background: #fff; }
.payables-viewer__body--pages { overflow: auto; padding: 16px; display: grid; gap: 12px; justify-items: center; align-content: start; }
.payables-viewer__body--pages canvas { display: block; width: 100%; height: auto; max-width: 100%; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .15); }
.payables-viewer__status { margin: 40px 16px; text-align: center; color: var(--ink-faint); font-size: 13px; }
@media (max-width: 760px) { .payables-viewer__body--pages { padding: 8px; gap: 8px; } }

@media (max-width: 760px) {
  .payables-viewer { padding: 0; }
  .payables-viewer__panel { border-radius: 0; }
  .payables-viewer__head { flex-wrap: wrap; }
}

/* Expense claims: ticking receipts to combine, and the claim's receipts. */
.payables__pick { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--ink-soft); cursor: pointer; }
.payables__claim-bar { margin-bottom: 12px; }
.payables__claim { display: grid; gap: 8px; }
.payables__claim ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: receipt; }
.payables__claim li {
  counter-increment: receipt;
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center;
  padding: 6px 8px; border-radius: 6px; background: var(--surface-sunk); font-size: 12.5px;
}
.payables__claim li::before { content: counter(receipt) "."; color: var(--ink-faint); }
.payables__claim li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payables__claim li .num { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .payables__claim li { grid-template-columns: 22px minmax(0, 1fr) auto auto; }
  .payables__claim li span:nth-child(2) { display: none; }
}

/* "Pay from": which of our accounts the run is paid out of. */
.payables__pay-from { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); }
.payables__pay-from select { max-width: 320px; font: inherit; color: var(--ink); padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
@media (max-width: 760px) {
  .payables__pay-from { flex: 1 1 100%; }
  .payables__pay-from select { flex: 1; max-width: none; min-width: 0; }
}

/* The progress bar while something slow runs (paying, checking the inbox):
   pinned to the bottom so it is on screen however far down the page is. */
.payables-progress {
  /* Centred by margins, not left: 50% + transform: an absolutely placed box
     at left: 50% may only be as wide as the other half of the screen, which
     wrapped the text to three lines on a phone. */
  position: fixed; left: 12px; right: 12px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 90;
  width: fit-content; max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--surface); color: var(--ink); font-size: 13px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  animation: payables-progress-in .18s ease-out;
}
.payables-progress__spinner {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--accent);
  animation: payables-progress-spin .8s linear infinite;
}
@keyframes payables-progress-spin { to { transform: rotate(360deg); } }
@keyframes payables-progress-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .payables-progress { animation: none; }
  .payables-progress__spinner { animation-duration: 2.4s; }
}

/* An error on one card (approving without a category or project, or the
   server refusing): said on the card, not only at the top of the page. */
.payables__card-error {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--negative); border-left-width: 4px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--negative) 10%, var(--surface));
  color: var(--ink);
}
.payables__card-error p { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.45; }
.payables__card-error-icon {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--negative); color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
}
.payables__card-error.is-new { animation: payables-error-pulse .9s ease-out; }
@keyframes payables-error-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--negative) 45%, transparent); }
  100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--negative) 0%, transparent); }
}
.payables__form label.is-missing { color: var(--negative); }
.payables__form label.is-missing select,
.payables__form label.is-missing input {
  border: 2px solid var(--negative);
  padding: 5px 7px;
  background: color-mix(in srgb, var(--negative) 7%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--negative) 18%, transparent);
}
.payables__form small.payables__missing { color: var(--negative); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .payables__card-error.is-new { animation: none; } }