/* Trade History tab only -- shared tokens, page chrome, stat-strip, accordion,
   filter chips, and the generic sortable-table skeleton live in sp5.css. */

/* --- Fill Log scroll region -- same pattern as Holdings' .sp5-ledger-scroll:
   filter chips + column headers stay pinned while rows scroll beneath them. */
.sp5-th-scroll {
  max-height: min(70vh, 640px);
  overflow: auto;
  border: 1px solid var(--sp5-border);
  border-radius: 8px;
}
/* Two stacked filter rows (period+date-range, then side+search) act as one
   sticky unit -- simpler than stacking each row as its own sticky layer
   (which Performance's tpnl section needs, since it also has a totals bar
   to keep pinned; this table doesn't). Only one height to measure in JS. */
.sp5-th-scroll .sp5-th-filter-block {
  position: sticky; top: 0; left: 0; z-index: 2;
  background: var(--sp5-surface);
  border-bottom: 1px solid var(--sp5-border);
}
.sp5-th-scroll .sp5-th-filter-block .sp5-filter-row { padding: 0.6rem 0.75rem; }
.sp5-th-scroll .sp5-th-filter-block .sp5-filter-row:first-child { padding-bottom: 0.35rem; }
.sp5-th-scroll .sp5-th-filter-block .sp5-filter-row:last-child { padding-top: 0.25rem; }
.sp5-th-daterange {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; color: var(--sp5-ink-muted); margin-left: 0.25rem;
}
.sp5-th-daterange input[type="date"] {
  appearance: none; border: 1px solid var(--sp5-border); background: var(--sp5-surface); color: var(--sp5-ink);
  font: inherit; font-size: 0.82rem; padding: 0.25rem 0.5rem; border-radius: 7px;
}
.sp5-th-daterange input[type="date"]:focus-visible { outline: 2px solid var(--sp5-accent); outline-offset: 1px; }
/* Cancels sp5.css's base .sp5-table-wrap { overflow-x: auto } -- that alone
   makes this a second, nested scroll container that breaks the sticky
   header below it. Same bug, same fix, as .sp5-ledger-scroll .sp5-table-wrap. */
.sp5-th-scroll .sp5-table-wrap { overflow-x: visible; }
.sp5-th-scroll .sp5-sortable-table thead th {
  top: var(--sp5-th-filter-row-h, 44px);
  z-index: 1;
}

/* --- Fill Log table (column widths + row content) --- */
.sp5-th-ledger col.col-symbol { width: 15%; }
.sp5-th-ledger col.col-side { width: 8%; }
.sp5-th-ledger col.col-order-date { width: 12%; }
.sp5-th-ledger col.col-txn-date { width: 15%; }
.sp5-th-ledger col.col-shares { width: 7%; }
.sp5-th-ledger col.col-price { width: 10%; }
.sp5-th-ledger col.col-total { width: 11%; }
.sp5-th-ledger col.col-gain { width: 11%; }
.sp5-th-ledger col.col-pct { width: 11%; }

/* Tight row height, same reasoning as .sp5-ledger tbody td in holdings.css,
   but with an explicit floor -- zero padding alone packed rows too tight
   for the side/industry badges' own padding, so they visually overlapped
   past the row's own border into its neighbor. height on <tr> is a floor,
   not a cap -- a row still grows if content ever needs more than 30px. */
.sp5-th-ledger tbody tr { height: 30px; }
.sp5-th-ledger tbody td { padding-top: 0; padding-bottom: 0; line-height: 1.15; vertical-align: middle; }

.sp5-side-badge {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 4px; padding: 0.05rem 0.32rem; white-space: nowrap;
}
.sp5-side-badge--buy { background: var(--sp5-accent-soft); color: var(--sp5-accent); }
.sp5-side-badge--sell { background: var(--sp5-positive-soft); color: var(--sp5-positive); }