@layer components {
  .table {
    width: 100%;
    background: var(--color-canvas);
    border-collapse: collapse;
    font-size: var(--text-footnote);

    th,
    td {
      padding: var(--block-space) var(--inline-space);
      text-align: left;
      border-bottom: 1px solid var(--color-border);
    }

    th {
      background: var(--color-ink);
      font-weight: 600;
      font-size: var(--text-caption);
      text-transform: uppercase;
      letter-spacing: var(--letter-spacing-caps);
      color: var(--color-ink-inverted);
    }

    tr:last-child td {
      border-bottom: none;
    }

    @media (any-hover: hover) {
      tr:hover td {
        background: var(--color-border);
      }
    }
  }

  /* ==========================================================================
     Mobile: Transform table to card layout
     ========================================================================== */

  @media (max-width: 800px) {
    .table,
    .table thead,
    .table tbody,
    .table tr,
    .table th,
    .table td {
      display: block;
    }

    .table thead {
      display: none;
    }

    .table tr {
      padding: var(--block-space);
      border-bottom: 1px solid var(--color-border);

      &:last-child {
        border-bottom: none;
      }
    }

    .table td {
      padding: var(--block-space-quarter) 0;
      border: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--inline-space);

      /* Use data-label attribute for mobile labels */
      &::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: var(--text-caption);
        text-transform: uppercase;
        color: var(--color-ink-light);
        flex-shrink: 0;
      }

      &:first-child {
        font-weight: 500;

        &::before {
          display: none;
        }
      }
    }

    .table tr:hover td {
      background: transparent;
    }
  }
}