/**
 * hx-table.css — Table SSOT
 * Token-driven only. No !important. No fallbacks. No hex.
 * Covers public .hx-table and product widget .ws-table (legacy class kept for compatibility).
 * 4-variant system: light-desktop, light-mobile, dark-desktop, dark-mobile via data-theme + data-hx-vp.
 * All spacing, colour, radius, and type via tokens.
 */
.hx-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
}

.hx-table,
table.ws-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--text-body-size, 1rem);
  font-family: var(--font-sans);
  background: var(--hx-surface);
  color: var(--hx-fg);
  border: 1px solid var(--hx-line);
}

.hx-table th,
.hx-table td,
table.ws-table th,
table.ws-table td {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  border-bottom: 1px solid var(--hx-line);
  color: var(--hx-fg);
  vertical-align: middle;
}

.hx-table th,
table.ws-table th {
  font-weight: var(--font-weight-semibold, 600);
  background: var(--hx-surface-subtle);
  color: var(--hx-fg-muted);
  white-space: nowrap;
  font-size: var(--text-label-size, 0.875rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hx-table tbody tr:hover td,
table.ws-table tbody tr:hover td {
  background: var(--hx-surface-subtle);
}

.hx-table--striped tbody tr:nth-child(even) td,
table.ws-table-striped tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--hx-surface-subtle) 70%, transparent);
}

.hx-table--grid th,
.hx-table--grid td,
table.ws-table-grid th,
table.ws-table-grid td {
  border: 1px solid var(--hx-line);
}

.hx-table__sort,
.ws-table__sort {
  display: inline-flex;
  align-items: center;
  margin-inline-start: var(--spacing-1);
  border: 0;
  background: transparent;
  color: var(--hx-fg-muted);
  padding: 0;
  vertical-align: middle;
  cursor: pointer;
}

.hx-table__sort:hover,
.ws-table__sort:hover {
  color: var(--color-primary, var(--color-cobalt));
}

/* Rounded variants */
.hx-table-wrap--rounded,
table.ws-table-rounded {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.hx-table-wrap--rounded-lg,
table.ws-table-rounded-lg {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Structured header (dark header) */
.hx-table--structured th,
table.ws-table-structured th {
  background: var(--hx-bg-inverse, var(--color-charcoal));
  color: var(--hx-fg-on-inverse, var(--color-white));
}

.hx-table--structured tbody tr:nth-child(even) td,
table.ws-table-structured tbody tr:nth-child(even) td {
  background: var(--hx-surface-subtle);
}

/* Dark theme — tokens flip automatically; explicit for preview isolation */
html[data-theme="dark"] .hx-table,
html[data-theme="dark"] table.ws-table,
.hx-example[data-theme="dark"] .hx-table,
.hx-example[data-theme="dark"] table.ws-table {
  background: var(--hx-surface);
  color: var(--hx-fg);
  border-color: var(--hx-line);
}

html[data-theme="dark"] .hx-table th,
html[data-theme="dark"] table.ws-table th,
.hx-example[data-theme="dark"] .hx-table th,
.hx-example[data-theme="dark"] table.ws-table th {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg-muted);
}

/* Mobile density */
html[data-hx-vp="mobile"] .hx-table th,
html[data-hx-vp="mobile"] .hx-table td,
html[data-hx-vp="mobile"] table.ws-table th,
html[data-hx-vp="mobile"] table.ws-table td,
.hx-example[data-hx-vp="mobile"] .hx-table th,
.hx-example[data-hx-vp="mobile"] .hx-table td {
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--text-label-size, 0.875rem);
}

/* 4-variant readiness (tokens handle the flip) */
html[data-theme="light"][data-hx-vp="desktop"],
html[data-theme="light"][data-hx-vp="mobile"],
html[data-theme="dark"][data-hx-vp="desktop"],
html[data-theme="dark"][data-hx-vp="mobile"] {
  /* no overrides — pure token */
}