/* Shared table presentation: match the compact, full-width Quotes experience. */
.card.table-scroll {
  overflow-x: visible;
  padding: 8px;
}

table.data-table:not(.compact-table) {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

table.data-table:not(.compact-table) thead th {
  position: sticky;
  top: 49px;
  z-index: 7;
  background: var(--surface-1);
  box-shadow: 0 1px 0 var(--gridline);
}

table.data-table:not(.quotes-table) th,
table.data-table:not(.quotes-table) td {
  padding: 8px 7px;
}

table.data-table:not(.quotes-table):not(.compact-table) td {
  overflow-wrap: anywhere;
}

table.data-table:not(.quotes-table):not(.compact-table) td input,
table.data-table:not(.quotes-table):not(.compact-table) td select {
  max-width: 100%;
}

/* Clickable sortable headers. */
table.data-table th.sortable-header {
  cursor: pointer;
  user-select: none;
  padding-right: 20px;
  position: relative;
  transition: background 0.12s ease, color 0.12s ease;
}

table.data-table th.sortable-header:hover,
table.data-table th.sortable-header:focus-visible {
  background: #eef4fb;
  color: var(--brand);
  outline: none;
}

table.data-table th.sortable-header::after {
  content: '↕';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  opacity: 0.55;
}

table.data-table th.sortable-header[data-sort-dir='asc']::after {
  content: '▲';
  color: var(--series-1);
  opacity: 1;
}

table.data-table th.sortable-header[data-sort-dir='desc']::after {
  content: '▼';
  color: var(--series-1);
  opacity: 1;
}

table.data-table th.no-sort::after {
  content: none;
}

/* Payout summary rows stay visually distinct while details remain nested below them. */
.payout-summary-row {
  cursor: pointer;
}
.payout-summary-row td {
  vertical-align: middle;
}
.payout-detail-wrap {
  overflow-x: auto;
  padding: 4px 0 8px;
}
.compact-table {
  table-layout: auto;
}
.compact-table thead th {
  position: static;
}

/* Reconciliation and rate tables can contain many columns; keep them compact enough to fit. */
.recon-table,
#rates-table {
  font-size: 12px;
}
.recon-table th,
.recon-table td,
#rates-table th,
#rates-table td {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

@media (max-width: 1250px) {
  table.data-table:not(.quotes-table):not(.compact-table) {
    font-size: 11.5px;
  }
  table.data-table:not(.quotes-table):not(.compact-table) th {
    font-size: 9.5px;
    letter-spacing: 0;
  }
  table.data-table:not(.quotes-table):not(.compact-table) th,
  table.data-table:not(.quotes-table):not(.compact-table) td {
    padding: 7px 4px;
  }
}