/* ============================================
   Tables — shared base for data tables
   ============================================ */

/* Base data table */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: var(--space-sm);
  text-align: left;
  border-bottom: 1px solid var(--color-gray-20);
  vertical-align: middle;
}

.data-table th {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.data-table td {
  font-size: 13px;
  color: var(--color-text-primary);
}

.data-table tbody tr:hover {
  background: var(--color-gray-10);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Table utility classes */
.td-id {
  font-family: "SF Mono", "Fira Code", monospace;
  color: var(--color-text-muted);
}

.td-date {
  color: var(--color-text-secondary);
  font-size: 13px;
}

.td-number {
  font-family: "SF Mono", "Fira Code", monospace;
  text-align: center;
}

.td-right {
  text-align: right;
}

/* Sortable headers */
.data-table-sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 16px !important;
}

.data-table-sortable:hover {
  color: var(--color-primary);
}

.data-table-sortable::after {
  content: "⇅";
  position: absolute;
  right: 2px;
  font-size: 10px;
  opacity: 0.3;
}

.data-table-sortable.sort-asc::after {
  content: "▲";
  opacity: 0.7;
}

.data-table-sortable.sort-desc::after {
  content: "▼";
  opacity: 0.7;
}