/**
 * Table primitives
 * Table layout, headers, rows, cells
 */
@layer ks-primitives {
  /* Responsive table wrapper for horizontal scroll */
  .ks-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Base table styling */
  .ks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ks-font-size-sm);
  }

  .ks-table th,
  .ks-table td {
    padding: var(--ks-space-3) var(--ks-space-4);
    text-align: start;
    border-block-end: 1px solid var(--ks-color-border-subtle);
  }

  .ks-table th {
    font-weight: var(--ks-font-weight-strong);
    color: var(--ks-color-text-strong);
    background-color: var(--ks-color-surface-section);
  }

  .ks-table td {
    color: var(--ks-color-text-default);
  }

  /* Striped rows */
  .ks-table tbody tr:nth-child(even) {
    background-color: var(--ks-color-surface-section);
  }

  /* Hover state */
  .ks-table tbody tr:hover {
    background-color: color-mix(in srgb, var(--ks-color-primary-500) 5%, var(--ks-color-surface-card));
  }

  /* Table section classes for semantic markup */
  .ks-table-header {
    background-color: var(--ks-color-surface-section);
  }

  .ks-table-th {
    padding: var(--ks-space-3) var(--ks-space-6);
    text-align: start;
    font-size: var(--ks-font-size-xs);
    font-weight: var(--ks-font-weight-medium);
    color: var(--ks-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .ks-table-body > tr {
    border-block-end: 1px solid var(--ks-color-border-subtle);
  }

  .ks-table-row:hover {
    background-color: var(--ks-color-surface-section);
  }

  .ks-table-td {
    padding: var(--ks-space-3) var(--ks-space-6);
  }
}