/**
 * Tables — requires tokens.css first.
 */

.tb-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--tb-radius-lg);
  border: 1px solid var(--tb-color-border-subtle);
  background: var(--tb-color-bg-panel);
}

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

.tb-table th,
.tb-table td {
  padding: var(--tb-space-3) var(--tb-space-4);
  text-align: left;
  border-bottom: 1px solid var(--tb-color-border-subtle);
  vertical-align: middle;
}

.tb-table th {
  font-weight: var(--tb-font-bold);
  color: var(--tb-color-text-secondary);
  background: var(--tb-color-bg-inset);
  white-space: nowrap;
}

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

.tb-table tbody tr:hover td {
  background: var(--tb-color-bg-panel-hover);
}

/* Status cell chips */
.tb-cell-status {
  display: inline-flex;
  align-items: center;
  padding: var(--tb-space-1) var(--tb-space-3);
  border-radius: var(--tb-radius-pill);
  font-size: var(--tb-text-xs);
  font-weight: var(--tb-font-bold);
}

.tb-cell-status--ok {
  background: var(--tb-color-status-green-bg);
  color: var(--tb-color-status-green);
}

.tb-cell-status--warn {
  background: var(--tb-color-status-amber-bg);
  color: var(--tb-color-status-amber);
}

.tb-cell-status--bad {
  background: var(--tb-color-status-red-bg);
  color: var(--tb-color-status-red);
}

.tb-cell-status--info {
  background: var(--tb-color-status-blue-bg);
  color: var(--tb-color-status-blue);
}