/* Transactions (§6.4) and the drawer (§6.5). Grids are from the reference. */

.tx__head {
  display: flex; align-items: flex-end; gap: 16px; margin-bottom: 14px;
  flex-wrap: wrap;
}
.tx__head-titles { flex: 1; min-width: 0; }
/* Columns / Export / New journal. All three are in the design and none has a
   route, so they are drawn disabled and explained rather than dropped — §8.6.
   Dropping them would misrepresent the product's shape; enabling them would
   misrepresent what happens on click. */
.tx__head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tx__head-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--p-surface); border: 1px solid var(--p-line);
  border-radius: var(--radius-pill); padding: 7px 13px;
  font-size: 12.5px; font-weight: 500; color: var(--p-ink);
  cursor: pointer; font-family: inherit;
}
.tx__head-btn.is-disabled {
  background: var(--p-line-2); color: var(--p-ink-3); cursor: not-allowed;
  border-color: transparent;
}
.tx__title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0;
}
.tx__sub { font-size: 12.5px; color: var(--p-ink-2); margin: 3px 0 0; }

/* Search, then the filter pills, then Save this view pushed to the end —
   the prototype's own order, with a spacer doing the pushing. */
.tx__viewbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px;
}
.tx__viewbar-spacer { flex: 1; min-width: 0; }
.tx__search {
  display: flex; align-items: center; gap: 8px;
  width: 300px; flex: none;
  background: var(--p-surface-2); border: 1px solid var(--p-line);
  border-radius: var(--radius-pill); padding: 8px 12px; color: var(--p-ink-3);
}
.tx__search input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  font-size: 13px; color: var(--p-ink);
}
.tx__searchnote { font-size: 11px; color: var(--p-ink-3); margin: 0 0 14px; }

/* ---- Bulk bar. Only with a selection. ---- */
.tx__bulk {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--p-brand-soft); border: 1px solid var(--p-line-2);
  border-radius: var(--radius-lg); padding: 10px 14px; margin-bottom: 12px;
}
.tx__bulk-count { font-size: 12.5px; font-weight: 600; }
.tx__bulk-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tx__bulk-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--p-surface); border: 1px solid var(--p-line);
  border-radius: var(--radius-pill); padding: 6px 12px;
  font-size: 12px; font-weight: 500; color: var(--p-ink); cursor: pointer;
}
.tx__bulk-btn:hover { border-color: var(--p-line-2); }
/* §8.6 — disabled means disabled, and says why when pressed. */
.tx__bulk-btn.is-disabled {
  background: var(--p-line-2); color: var(--p-ink-3); cursor: not-allowed;
  border-color: transparent;
}
.tx__bulk-clear {
  margin-inline-start: auto; background: none; border: none;
  font-size: 12px; font-weight: 600; color: var(--p-ink-2); cursor: pointer;
}

/* ---- Table ---- */
/* TEN COLUMNS, AT THE PROTOTYPE'S OWN WIDTHS.
 *
 * Measured from the export's rowStyle:
 *   34px 86px 1fr 82px 148px 120px 96px 96px 62px 104px 90px 26px
 *
 * Two of the twelve are not drawn — Reconciled (104px) and the risk dot
 * (26px) — because the API has no field for either; see transactions-view.js.
 * Every remaining width is the prototype's, unchanged, so the columns that
 * DO exist sit exactly where the design puts them. min-width follows:
 * 1180 − 104 − 26 = 1050.
 *
 * The row is a FLAT grid of ten children. It used to be two controls with an
 * inner button spanning eleven columns, which meant the header and the row
 * carried two different column lists that had to be kept in step by hand. */
.tx__table { min-width: 1050px; }
.tx__thead,
.tx__row {
  display: grid;
  grid-template-columns:
    34px 86px 1fr 82px 148px 120px 96px 96px 62px 90px;
  align-items: center;
  width: 100%;
  text-align: start;
}

.tx__thead {
  position: sticky; top: 0; z-index: 2;
  background: var(--p-surface-2);
  border-bottom: 1px solid var(--p-line);
  padding: 10px 16px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--p-ink-3);
}

/* ROW HEIGHT — a DELIBERATE divergence from the prototype.
   The export's rowStyle says `padding: 9px 14px`. At 9px the description cell's
   two stacked lines leave the row visibly cramped, so this uses 13px. The
   inline padding stays 16px to line up with the card's other content. Recorded
   here because a silent divergence is the failure, not the divergence. */
.tx__row {
  border-bottom: 1px solid var(--p-line);
  padding: 13px 16px;
}
.tx__row:hover { background: var(--p-surface-2); }
.tx__row.is-selected { background: var(--p-brand-soft); }
.tx__row:last-child { border-bottom: none; }

.tx__cell { font-size: 12px; color: var(--p-ink-2); min-width: 0; padding-inline-end: 8px; }

/* Date over time in one column. The time is SECONDARY — it disambiguates two
   same-day rows, it is not the ledger fact the row is filed under — so it is
   set smaller and lighter than the date above it. Each restates the cell's
   own size and ink rather than inheriting silently: lint.py fails on a class
   used in JS and defined nowhere, and an undefined class is a style that
   quietly does nothing the day the cell's defaults change. */
.tx__cell--date {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: inherit;
}
.tx__date { font-size: 12px; color: var(--p-ink-2); }
.tx__time { font-size: 11px; color: var(--p-ink-3); opacity: 0.75; }

.tx__cell--check {
  display: flex; align-items: center; justify-content: flex-start;
  background: none; border: none; cursor: pointer; height: 100%;
}
.tx__check {
  width: 18px; height: 18px; border-radius: 5px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1.5px var(--p-line-2);
}
.tx__check.is-on {
  background: var(--p-brand); color: var(--p-on-brand); box-shadow: none;
}

.tx__cell--desc {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: inherit; text-align: start; min-width: 0;
}
.tx__desc { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tx__cell--desc .tx__desc-text { line-height: 1.35; }
.tx__submeta { margin-top: 3px; }
.tx__desc-text {
  font-size: 13px; font-weight: 600; color: var(--p-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tx__clip { color: var(--p-ink-3); flex: none; display: inline-flex; }
/* Contact · source. Both are sparse in production, so this line is often
   absent entirely — it is not rendered at all when neither is known. */
.tx__submeta {
  display: block; font-size: 10.5px; color: var(--p-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The ref column is 82px and bank references are longer than that in a
   monospaced face — `NBB0808260N04KS2` ran straight into the Account column.
   Truncated, with the whole value on hover and to a screen reader, rather than
   widened: the prototype's column widths are the spec. */
.tx__cell--ref {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tx__cell--account,
.tx__cell--cat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Amounts are end-aligned so the decimal points line up down the column —
   the whole reason this table is read in a monospaced face. */
.tx__cell--amt,
.tx__cell--vat { text-align: end; }
.tx__cell--review { display: flex; justify-content: flex-start; }

.tx__empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 48px 16px; color: var(--p-ink-3); text-align: center;
}
.tx__empty p { margin: 0; font-size: 13px; }
.tx__empty-title { font-weight: 600; color: var(--p-ink); }
.tx__empty-body { max-width: 34ch; }

.tx__footer {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 11px 16px; border-top: 1px solid var(--p-line);
  background: var(--p-surface-2); font-size: 12px; color: var(--p-ink-2);
}
/* The count sits at the start, the totals and the verdict at the end. */
.tx__footer-spacer { flex: 1; min-width: 0; }
.tx__footer-total { color: var(--p-ink-2); }
.tx__footer-total strong { color: var(--p-ink); font-weight: 650; }
.tx__load-more {
  border: 1px solid var(--p-line-2); border-radius: var(--radius-pill);
  /* `--p-accent` was used here and is DEFINED NOWHERE — not in the design
     system, not in index.html, not in JS. An undefined custom property
     makes the declaration invalid at computed-value time, so this button's
     text fell back to inherited ink and the one affordance that says "there
     is more to load" has never actually been branded. `--p-brand` is the
     real token. Found while wiring the receivables bucket selection, which
     I had just written against the same non-existent name. */
  padding: 7px 13px; background: var(--p-surface); color: var(--p-brand);
  font: inherit; font-weight: 650; cursor: pointer;
}
.tx__load-more:hover { background: var(--p-accent-soft); }
.tx__load-more:disabled { opacity: .65; cursor: wait; }

/* ---- Drawer (§6.5) ---- */
.drawer__host { position: fixed; inset: 0; z-index: 80; }
.drawer__scrim {
  position: absolute; inset: 0; background: var(--p-scrim);
  border: none; padding: 0; cursor: pointer;
}
.drawer {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: 520px; max-width: 100%;
  background: var(--p-surface); border-inline-start: 1px solid var(--p-line);
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; overflow-y: auto;
}
@media (max-width: 899px) { .drawer { width: 100%; } }

.drawer__head { padding: 18px 20px 14px; border-bottom: 1px solid var(--p-line); }
.drawer__chips { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.drawer__close {
  margin-inline-start: auto; background: none; border: none;
  color: var(--p-ink-2); cursor: pointer;
}
.drawer__title { font-size: 17px; font-weight: 600; margin: 0; }
.drawer__meta { font-size: 11.5px; color: var(--p-ink-3); margin: 4px 0 0; }

.drawer__section { padding: 16px 20px; border-bottom: 1px solid var(--p-line); }
.drawer__section .eyebrow { display: block; margin-bottom: 10px; }

.drawer__je-head, .drawer__je-row, .drawer__je-total {
  display: grid; grid-template-columns: 1fr 96px 96px; gap: 8px;
  align-items: center; padding: 6px 0; font-size: 12px;
}
.drawer__je-head {
  font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--p-ink-3);
  border-bottom: 1px solid var(--p-line);
}
.drawer__je-row { border-bottom: 1px solid var(--p-line); }
.drawer__je-code { color: var(--p-ink-3); }
.drawer__je-amt { text-align: end; }
.drawer__je-total { font-weight: 600; padding-top: 10px; }
.drawer__je-total.is-ok { color: var(--p-ok); }
.drawer__je-total.is-risk { color: var(--p-risk); }

.drawer__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0; }
.drawer__facts dt { font-size: 10.5px; color: var(--p-ink-3); }
.drawer__facts dd { margin: 2px 0 0; font-size: 12px; }

.drawer__doc { display: flex; align-items: center; gap: 10px; }
.drawer__documents { display: grid; gap: 10px; }
.drawer__doc-tile {
  width: 34px; height: 34px; flex: none; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--p-surface-2); color: var(--p-ink-2);
}
.drawer__doc-text { flex: 1; min-width: 0; }
.drawer__doc-name { font-size: 12.5px; font-weight: 600; }
.drawer__doc-meta { font-size: 10.5px; color: var(--p-ink-3); margin-top: 2px; }
.drawer__doc-btn {
  background: var(--p-surface-2); border: 1px solid var(--p-line);
  border-radius: var(--radius-pill); padding: 6px 12px;
  font-size: 12px; cursor: pointer;
}
.drawer__doc-btn:disabled { cursor: progress; opacity: .6; }

.drawer__history-absent {
  font-size: 12px; line-height: 1.55; color: var(--p-ink-2); margin: 0;
}

.drawer__foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 16px 20px; margin-top: auto;
}
.drawer__foot-btn {
  background: var(--p-surface-2); border: 1px solid var(--p-line);
  border-radius: var(--radius-pill); padding: 9px 14px;
  font-size: 12.5px; font-weight: 500; cursor: pointer;
}

/* Referenced in JS; needed so the footer count does not collapse. */
.tx__footer-count { flex: none; }
.drawer__je { display: block; }