/* Transactions, Dense Ledger (UI-023). Builds on css/ledger.css (lg-* classes) and the theme tokens in index.html.
   Design: docs/design/dense-ledger.md (Transactions) · Board: design/dense-ledger.html, direction A.
   The three sizes below must equal VS_TXN_ROW_H_WIDE / VS_TXN_ROW_H / VS_GROUP_ROW_H in js/transactions.js
   (virtual scroll positions rows by those numbers; tests/transactions-list.test.cjs compares them). */
:root {
  --txn-row-desk: 36px;
  --txn-row-phone: 60px;
  --txn-group-h: 38px;   /* day header: 14px space above + 24px line */
  --txn-inset: 16px;     /* rows sit this far in from the left edge, under a 2px rail */
}

/* ---------- Header and toolbar: one row ---------- */
#view-transactions .txn-header { margin-bottom: 8px; gap: 12px; align-items: baseline; }
#view-transactions .txn-header .view-title { font-size: 18px; }
#view-transactions #txn-subtitle { display: none; }
#view-transactions .data-stamp { font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0; margin-top: 2px; }
#view-transactions .txn-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
#view-transactions .txn-search { flex: 1 1 180px; min-width: 0; height: 30px; padding: 0 10px; border: 1px solid var(--border-hi);
  background: var(--surface); border-radius: 0; font: 400 12.5px var(--font-sans); color: var(--text); }
#view-transactions .txn-search:focus { border-color: var(--accent); }
#view-transactions .txn-filter-btn { height: 30px; padding: 0 10px; font-size: 12px; }

/* Period: the existing Month / Last month / All time ranges, as a segmented control */
#view-transactions .txn-period { display: inline-flex; border: 1px solid var(--border-hi); background: transparent; padding: 0; gap: 0; }
#view-transactions .txn-period .date-tab { height: 28px; margin: 0; padding: 0 10px; border: 0; border-radius: 0; background: transparent;
  color: var(--text-dim); font: 600 12px var(--font-sans); letter-spacing: 0; text-transform: none; cursor: pointer; }
#view-transactions .txn-period .date-tab:hover { color: var(--text); }
#view-transactions .txn-period .date-tab.active { background: var(--surface-3); color: var(--text); }
#view-transactions .txn-period .date-tab:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; }

/* Totals sit at the right of the toolbar */
#view-transactions .txn-summary { display: flex; align-items: baseline; gap: 18px; margin-left: auto; font: 400 12px var(--font-sans); color: var(--text-dim); }
#view-transactions .txn-sum-item { display: inline-flex; align-items: baseline; gap: 6px; flex-direction: row; }
#view-transactions .txn-sum-item b { font: 700 13px var(--font-mono); color: var(--text); }
#view-transactions .txn-sum-item b.is-income { color: var(--green); }
#view-transactions .txn-filter-tray { margin-bottom: 8px; padding: 8px; border-radius: 0; gap: 8px; }
#view-transactions .txn-filter-tray .txn-select { height: 30px; font-size: 12.5px; }
#view-transactions .txn-tray-btn { height: 30px; font-size: 12px; }

/* ---------- The list ---------- */
#view-transactions .txn-vs-wrap { height: max(420px, calc(100vh - 205px)); overflow-x: hidden; overflow-y: auto; border: 0; box-shadow: none;
  border-radius: 0; background: var(--surface); scrollbar-width: thin; scrollbar-color: var(--border-hi) transparent; }
#view-transactions .txn-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
#view-transactions .txn-table col.txn-col-check { width: 52px; }
#view-transactions .txn-table col.txn-col-main { width: auto; }
#view-transactions .txn-table col.txn-col-cat { width: 27%; }
#view-transactions .txn-table col.txn-col-acct { width: 128px; }
#view-transactions .txn-table col.txn-col-amt { width: 124px; }

#view-transactions .txn-head { display: none; }
#view-transactions .txn-head th { position: sticky; top: 0; z-index: 2; height: 30px; padding: 0 8px; text-align: left; background: var(--surface);
  border: 0; border-bottom: 1px solid var(--border); font: 600 11px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--text-dim); }
#view-transactions .txn-head th.txn-amt-head { text-align: right; padding-right: 16px; }

/* Rows: --txn-hov is the hover/selected fill; the first cell draws the rail (2px at 16px) and fills only right of it */
#view-transactions .txn-row { --txn-hov: transparent; background: transparent; cursor: pointer; transition: none; }
#view-transactions .txn-row:hover { --txn-hov: var(--surface-2); }
#view-transactions .txn-row.txn-selected { --txn-hov: var(--surface-3); }
#view-transactions .txn-row.rpt-checked { --txn-hov: var(--accent-dim); background: transparent; }
#view-transactions .txn-table td { box-sizing: border-box; height: var(--txn-row-desk); padding: 0 8px; border: 0; border-top: 1px solid var(--border);
  background: var(--txn-hov, transparent); vertical-align: middle; font: 400 12.5px/1.2 var(--font-sans); color: var(--text-mid);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-transactions .txn-row:hover td, #view-transactions .txn-row.txn-selected td, #view-transactions .txn-row.rpt-checked td { background: var(--txn-hov); }
#view-transactions .txn-row td:first-child, #view-transactions .txn-skeleton td:first-child { border-top-color: transparent; padding: 0 0 0 18px !important; text-align: center; width: auto;
  background: linear-gradient(var(--border), var(--border)) var(--txn-inset) 0 / 2px 100% no-repeat,
              linear-gradient(var(--txn-hov), var(--txn-hov)) 18px 0 / 100% 100% no-repeat;
  background-origin: border-box; }
#view-transactions .txn-group-row + .txn-row td { border-top-color: transparent; }
#view-transactions .txn-row:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; }
#view-transactions .txn-row-ghost { opacity: .5; }

/* Checkbox shows on hover, focus or while anything is selected (always on touch) */
#view-transactions .txn-check { opacity: 0; transition: none; accent-color: var(--accent); }
#view-transactions .txn-row:hover .txn-check, #view-transactions .txn-row:focus-within .txn-check, #view-transactions .txn-check:focus-visible,
#view-transactions .txn-check:checked, #view-transactions .txn-table.has-selection .txn-check { opacity: 1; }
@media (hover: none) { #view-transactions .txn-check { opacity: 1; } }

/* Day group: 14px space above, bold date + dim "today", day total and count at the right */
#view-transactions .txn-group-row td { height: var(--txn-group-h); padding: 0; border: 0; background: transparent; overflow: visible; }
#view-transactions .txn-group-cell { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; height: var(--txn-group-h);
  padding: 14px 16px 0; background: none; border: 0; font: 400 12.5px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--text); }
#view-transactions .txn-group-cell b { font-weight: 700; white-space: nowrap; }
#view-transactions .txn-group-rel { margin-left: 8px; font: 500 11.5px var(--font-sans); color: var(--text-dim); }
#view-transactions .txn-group-total { font: 400 11.5px var(--font-mono); color: var(--text-dim); padding: 0; white-space: nowrap; }
#view-transactions .txn-group-total.is-income { color: var(--green); }

/* Merchant cell: logo, name + badges + dim note on one line */
#view-transactions .txn-row-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
#view-transactions .txn-row .txn-logo { width: 20px; height: 20px; font-size: 8px; background: hsl(var(--logo-hue, 265) 45% 42%); border-radius: 50%; }
#view-transactions .txn-row-text { min-width: 0; flex: 1; display: block; }
#view-transactions .txn-row-name { display: flex; align-items: center; gap: 0; min-width: 0; font: 400 12.5px var(--font-sans); color: var(--text); }
#view-transactions .txn-row-name .txn-desc-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; color: inherit; }
#view-transactions .txn-flag { flex: none; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--surface-3); color: var(--text-dim); font: 700 10px var(--font-sans); }
#view-transactions .txn-flag.is-pending { background: var(--yellow-dim); color: var(--yellow); }
#view-transactions .txn-flag.is-returning { background: var(--accent-dim); color: var(--accent-hi); }
#view-transactions .txn-rule-dot { flex: none; margin-left: 6px; }
#view-transactions .txn-note { flex: 0 100 auto; min-width: 0; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); font-size: 11.5px; }
#view-transactions .txn-row-sub { display: none; }
#view-transactions .txn-row-ghost .txn-desc-text { color: var(--text-dim); }

/* Category and account cells */
#view-transactions .txn-cat-main { font: 400 12.5px var(--font-sans); color: var(--text-mid); }
#view-transactions .txn-cat-sub { color: var(--text-dim); }
#view-transactions td.txn-acct-col { color: var(--text-dim); font-size: 11.5px; }
#view-transactions td.txn-acct-col .lg-blogo { vertical-align: middle; margin-right: 6px; }
#view-transactions .txn-acct-last4 { font-family: var(--font-mono); vertical-align: middle; }
#view-transactions .txn-amt-logo { display: none; }
#view-transactions td.txn-amt { padding-right: 16px; text-align: right; font: 700 12.5px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
#view-transactions td.txn-amt.is-income { color: var(--green); }
#view-transactions .txn-row-ghost .txn-amt { color: var(--text-dim) !important; }
#view-transactions .txn-footer { border: 0; padding-top: 6px; }
#view-transactions .txn-scroll-hint { font: 400 11.5px var(--font-sans); letter-spacing: 0; }

/* Skeleton rows at the real row height */
#view-transactions .txn-skeleton td { height: var(--txn-row-desk); padding: 0 8px; border-top-color: transparent; }
#view-transactions .txn-skel-logo { width: 20px; height: 20px; border-radius: 50%; flex: none; }

/* ---------- Desktop and tablet (900px and wider): five columns ---------- */
@media (min-width: 900px) {
  #view-transactions .txn-head { display: table-header-group; }
}

/* ---------- Phone and narrow (under 900px): 48px rows, logo 28px, name over "Category · Sub", amount over a 14px bank logo ---------- */
@media (max-width: 899px) {
  #view-transactions .txn-table col.txn-col-check { width: 32px; }
  #view-transactions .txn-table col.txn-col-cat, #view-transactions .txn-table col.txn-col-acct { width: 0; }
  #view-transactions .txn-table col.txn-col-amt { width: 112px; }
  #view-transactions .txn-row td { height: var(--txn-row-phone); }
  #view-transactions .txn-skeleton td { height: var(--txn-row-phone); }
  /* The category and account cells stay in the grid (so the amount keeps its column) but collapse to nothing */
  #view-transactions .txn-row td.txn-cat-cell, #view-transactions .txn-row td.txn-acct-col, #view-transactions .txn-skeleton td.txn-cat-cell, #view-transactions .txn-skeleton td.txn-acct-col {
    display: table-cell; width: 0; max-width: 0; padding: 0; border: 0; overflow: hidden; font-size: 0; line-height: 0; }
  #view-transactions .txn-row td.txn-cat-cell > *, #view-transactions .txn-row td.txn-acct-col > *, #view-transactions .txn-skeleton td > .skel { display: none; }
  #view-transactions .txn-skeleton td:nth-child(2) > .txn-row-main > .skel { display: block; }
  #view-transactions .txn-row td:first-child, #view-transactions .txn-skeleton td:first-child { padding-left: 6px !important; }
  #view-transactions .txn-row td:first-child, #view-transactions .txn-skeleton td:first-child { background:
    linear-gradient(var(--border), var(--border)) 6px 0 / 2px 100% no-repeat,
    linear-gradient(var(--txn-hov), var(--txn-hov)) 8px 0 / 100% 100% no-repeat;
    background-origin: border-box; }
  #view-transactions .txn-row .txn-logo, #view-transactions .txn-skel-logo { width: 28px; height: 28px; font-size: 9.5px; }
  #view-transactions .txn-row-main { gap: 10px; }
  #view-transactions .txn-row-text { display: grid; gap: 2px; }
  #view-transactions .txn-row-name { font-size: 13px; }
  #view-transactions .txn-note { display: none; }
  #view-transactions .txn-row-sub { display: block; font: 400 11.5px var(--font-sans); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #view-transactions td.txn-amt { padding-right: 12px; font-size: 12.5px; }
  #view-transactions .txn-amt-num { display: block; }
  #view-transactions .txn-amt-logo { display: grid; width: 14px; height: 14px; font-size: 6px; margin: 3px 0 0 auto; }
  #view-transactions .txn-group-cell { padding-left: 2px; padding-right: 12px; }
  #view-transactions .txn-search, #view-transactions .txn-filter-btn { height: 38px; }
  #view-transactions .txn-period .date-tab { height: 36px; }
  #view-transactions .txn-summary { order: 3; flex: 1 1 100%; margin-left: 0; gap: 14px; }
  #view-transactions .txn-sum-count { margin-left: auto; }
  #view-transactions .txn-vs-wrap { height: max(360px, calc(100dvh - 300px)); }
}

/* The summary wrapper must not break the flex row: its items stay direct flex children (visibility still inherits while pending). */
.txn-sum-pending { display: contents; }