/* app/assets/stylesheets/components/tables.css */

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

.data-table th {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--text-secondary);
  text-align:     left;
  padding:        var(--space-2) var(--space-3);
  border-bottom:  2px solid var(--border-color);
}

.data-table td {
  padding:        var(--space-3) var(--space-3);
  border-bottom:  1px solid var(--border-color);
  vertical-align: middle;
}

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

.data-table td.mono {
  font-family: var(--font-mono);
  font-weight: 600;
}

.data-table--sortable th {
  cursor: pointer;
  user-select: none;
}

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

.data-table--zebra tbody tr:nth-child(even) {
  background: var(--bg-sunken);
}