table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
}

.ui-table {
  width: 100%;
}

.ui-table-wrap {
  overflow-x: auto;
  border: var(--border-width) solid color-mix(in srgb, var(--color-border) 88%, white);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 96%, var(--color-brand-support-soft) 4%);
}

.ui-table-wrap table {
  min-width: 100%;
}

.ui-table-empty {
  margin: 0;
  padding: var(--space-4);
  color: var(--color-text-muted);
}

.ui-table-wrap--text-heavy {
  overflow-x: visible;
}

.ui-table-wrap--dense-wide {
  overflow-x: auto;
}

th,
td {
  border-bottom: var(--border-width) solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 700;
  background: color-mix(in srgb, var(--color-surface-muted) 88%, var(--color-brand-primary-soft) 12%);
}

.ui-table-cell--wrap {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ui-table-cell--nowrap {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .ui-table-wrap--text-heavy {
    overflow-x: auto;
  }

  .ui-table-wrap--text-heavy table {
    min-width: 42rem;
  }
}