/* Tables */
.bx .tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--bx-text-sm); }
.bx .tbl thead th {
  text-align: left; font-weight: 700;
  color: var(--bx-ink-3);
  font-size: var(--bx-text-xs); letter-spacing: 0; text-transform: uppercase;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bx-line);
  background: var(--bx-paper-2);
}
.bx-dark .tbl thead th { background: rgba(var(--bx-white-rgb),0.03); }
.bx .tbl tbody td { padding: 12px 14px; border-bottom: 1px solid var(--bx-line); vertical-align: middle; }
.bx .tbl tbody tr:last-child td { border-bottom: 0; }
.bx .tbl tbody tr:hover { background: var(--bx-paper); }
.bx-dark .tbl tbody tr:hover { background: rgba(var(--bx-white-rgb),0.03); }

/* Right-aligned column — for numeric headers and cells (totals, amounts). */
.bx .tbl th.col-right,
.bx .tbl td.col-right,
.bx .col-right { text-align: right; }

/* Compact pill for dense table rows. */
.bx .pill-xs { padding: 2px 7px; font-size: var(--bx-text-2xs); }

/* Breathing room at the table's trailing edge so end-column content (status
   pills, action buttons) doesn't crowd the card/viewport edge. */
.bx .tbl thead th:last-child,
.bx .tbl tbody td:last-child { padding-inline-end: 18px; }

/* Sortable column headers (SortingHelper#sort_header). The whole header label
   is a link that re-sorts the table server-side; it inherits the uppercase
   header type so a sorted column reads identically to a static one. The arrow
   shows the active column + direction — solid in the accent ink when active, a
   faint ⇅ affordance otherwise that firms up on hover. */
.bx .tbl thead th .bido-sort {
  display: inline-flex; align-items: baseline; gap: 5px;
  color: inherit; text-decoration: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.bx .tbl thead th .bido-sort-arrow {
  font-size: 9px; line-height: 1; color: var(--bx-ink-4);
}
.bx .tbl thead th .bido-sort.active { color: var(--bx-ink); }
.bx .tbl thead th .bido-sort.active .bido-sort-arrow { color: var(--bx-accent-ink); }
.bx .tbl thead th .bido-sort:focus-visible {
  outline: 2px solid var(--bx-accent); outline-offset: 3px; border-radius: var(--bx-r-sm);
}
/* Right-aligned numeric headers keep the label + arrow flush to the edge. */
.bx .tbl th.col-right .bido-sort { justify-content: flex-end; }

@media (any-hover: hover) {
  .bx .tbl thead th .bido-sort:hover { color: var(--bx-ink); }
  .bx .tbl thead th .bido-sort:hover .bido-sort-arrow { color: var(--bx-ink-2); }
}