/* assets/css/components/data-table.css
 * @layer components — generic striped data table
 * Pencil ref: component/table (RavFb)
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  .vimta-data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: var(--table-border);
    border-radius: var(--table-radius);
  }

  .vimta-data-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    /* 32rem min prevents total collapse before horizontal scroll */
    min-inline-size: 32rem;
  }

  /* ── Header ── */
  .vimta-data-table__head {
    background: var(--table-header-bg);
    border-block-end: var(--table-border-strong);
  }

  .vimta-data-table__th {
    padding-block: var(--table-padding-block);
    padding-inline: var(--table-padding-inline);
    min-block-size: var(--table-row-height);
    font-size: var(--table-header-font-size);
    font-weight: var(--table-header-weight);
    letter-spacing: var(--table-header-tracking);
    text-transform: var(--table-header-transform);
    color: var(--table-header-text);
    text-align: start;
    white-space: nowrap;
    vertical-align: middle;
  }

  .vimta-data-table__th--center {
    text-align: center;
  }

  /* ── Body rows — white / off-white alternating stripe ── */
  .vimta-data-table__body .vimta-data-table__row:nth-child(odd) {
    background: var(--white);
  }

  .vimta-data-table__body .vimta-data-table__row:nth-child(even) {
    background: var(--off-white);
  }

  .vimta-data-table__row {
    border-block-end: var(--table-border);
    transition: background var(--duration-fast) var(--ease-default);
  }

  .vimta-data-table__body .vimta-data-table__row:last-child {
    border-block-end: none;
  }

  .vimta-data-table__body .vimta-data-table__row:hover {
    background: var(--surface-highlight);
  }

  /* ── Cells ── */
  .vimta-data-table__td {
    padding-block: var(--table-padding-block);
    padding-inline: var(--table-padding-inline);
    min-block-size: var(--table-row-height);
    font-size: var(--text-s);
    line-height: var(--leading-normal);
    color: var(--text-body);
    vertical-align: middle;
  }

  .vimta-data-table__td--primary {
    font-weight: var(--weight-medium);
    color: var(--text-main);
  }

  .vimta-data-table__td--center {
    text-align: center;
  }

  /* ── Download action — WCAG 2.5.5 44×44 touch target ── */
  .vimta-data-table__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    color: var(--primary);
    transition: color var(--duration-fast) var(--ease-default);
  }

  .vimta-data-table__action:hover {
    color: var(--primary-hover);
  }

  .vimta-data-table__action:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-xs);
  }

  /* ── Empty state ── */
  .vimta-data-table__empty {
    padding: var(--space-xl) var(--table-padding-inline);
    text-align: center;
    font-size: var(--text-s);
    color: var(--text-muted);
  }

  /* ── Responsive: hide low-priority columns below 40em ── */
  @media (max-width: 40em) {
    .vimta-data-table__th--hide-mobile,
    .vimta-data-table__td--hide-mobile {
      display: none;
    }
  }

}