/* ==========================================================
   IROZON DESIGN SYSTEM — Table (canonical, v1)
   Public API:
     <div class="iz-table-wrap"><table class="iz-table">...</table></div>
     <table class="iz-table" data-density="compact">
     <td data-align="end">, <th data-align="end">
     <tr data-interactive>          actionable row, plain hover only
     <tr aria-selected="true">      selected row, native ARIA state
   Native <table>/<thead>/<tbody> throughout — no div-grid stand-in.
   Editorial over spreadsheet-heavy: whitespace and aligned type
   before heavy grid lines; not every table needs a bordered box.
   ========================================================== */

.iz-table-wrap {
  overflow-x: auto;
}

.iz-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
}

.iz-table th,
.iz-table td {
  padding-block: 12px;
  padding-inline: 16px;
  text-align: start;
  vertical-align: middle;
}
.iz-table th:first-child,
.iz-table td:first-child {
  padding-inline-start: 20px;
}
.iz-table th:last-child,
.iz-table td:last-child {
  padding-inline-end: 20px;
}

.iz-table thead th {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-block-end: 1px solid var(--color-border);
  white-space: nowrap;
}

.iz-table tbody tr {
  border-block-end: 1px solid var(--color-border);
}
.iz-table tbody tr:last-child {
  border-block-end: none;
}

/* Numeric / end-aligned columns — opt in per cell, not a separate
   utility family. */
.iz-table td[data-align="end"],
.iz-table th[data-align="end"] {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* Empty value — a quiet convention (an em dash), not a jarring
   "N/A" or a blank cell that reads as a rendering bug. */
.iz-table .iz-table__empty {
  color: var(--color-text-muted);
}

/* ---------- Row interaction ----------
   Static rows get no hover at all. Only a row that's genuinely
   actionable as a whole opts in with data-interactive — a background
   shift only, never lift/scale. If a row holds several independent
   controls (an action menu, a checkbox), don't wire the whole row as
   one target; let the specific controls stay individually focusable
   instead. */
.iz-table tbody tr[data-interactive] {
  cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.iz-table tbody tr[data-interactive]:hover {
  background: var(--color-surface-subtle);
}
.iz-table tbody tr[aria-selected="true"] {
  /* The primitive, not --color-action-primary — this tint is a fixed
     Green selection cue, unrelated to Button's theme-adaptive Primary
     (which resolves to Ink on light surfaces as of v2). Preserves the
     pre-v2 appearance in both themes. */
  background: color-mix(in srgb, var(--irozon-green) 8%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .iz-table tbody tr[data-interactive] {
    transition: none;
  }
}

/* ---------- Density ----------
   One default, one compact option — nothing between roomy and dense. */
.iz-table[data-density="compact"] th,
.iz-table[data-density="compact"] td {
  padding-block: 8px;
  padding-inline: 12px;
}
.iz-table[data-density="compact"] th:first-child,
.iz-table[data-density="compact"] td:first-child {
  padding-inline-start: 16px;
}
.iz-table[data-density="compact"] th:last-child,
.iz-table[data-density="compact"] td:last-child {
  padding-inline-end: 16px;
}