/* Table
   A data table in the console style. Wrap in .dp-table-wrap for horizontal
   scroll on narrow screens. All colour and type come from tokens.css. */

.dp-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-lg);
  background: var(--dp-surface);
}

.dp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--dp-text-sm);
  color: var(--dp-text);
}

.dp-table thead th {
  text-align: left;
  font-weight: var(--dp-weight-bold);
  color: var(--dp-text-muted);
  background: var(--dp-surface-subtle);
  padding: var(--dp-space-3) var(--dp-space-4);
  border-bottom: 1px solid var(--dp-border);
  white-space: nowrap;
}

.dp-table tbody td {
  padding: var(--dp-space-3) var(--dp-space-4);
  border-bottom: 1px solid var(--dp-border);
}

.dp-table tbody tr:last-child td {
  border-bottom: 0;
}

.dp-table tbody tr:hover {
  background: var(--dp-surface-subtle);
}

/* Numeric columns align right */
.dp-table [data-align="end"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Sortable header */
.dp-table th[data-sortable] {
  cursor: pointer;
}

.dp-table th[data-sortable]:hover {
  color: var(--dp-navy);
}

.dp-table th[data-sortable] svg {
  width: 0.875em;
  height: 0.875em;
  vertical-align: -2px;
  opacity: 0.6;
}