/*
 * Table Component
 * Data tables for admin views
 */

@layer components {
  .table-container {
    inline-size: 100%;
    overflow-x: auto;
  }

  .table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-normal);

    & th {
      padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.5rem, 2vw, var(--block-space));
      text-align: start;
      color: var(--color-gray-darker);
      background-color: var(--color-gray-lightest);
      border-bottom: 2px solid var(--color-gray-medium);
      white-space: nowrap;
    }

    & td {
      padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.5rem, 2vw, var(--block-space));
      color: var(--color-gray-darker);
      border-bottom: var(--border-subtle);
      vertical-align: middle;
    }

    @media (any-hover: hover) {
      & tbody tr:hover {
        background-color: var(--color-gray-lightest);
      }
    }

    /* Alignment helpers */
    & td.align-text-right,
    & th.align-text-right { text-align: end; }

    & td.align-text-center,
    & th.align-text-center { text-align: center; }

    /* Variants */
    &.table--striped tbody tr:nth-child(even) {
      background-color: var(--color-gray-lightest);
    }

    &.table--bordered {
      border: var(--border-standard);

      & th,
      & td { border: var(--border-standard); }
    }

    &.table--compact {
      & th,
      & td { padding: var(--block-space-3quarter); }
    }
  }

  .table__actions {
    display: flex;
    gap: var(--block-space-half);
    white-space: nowrap;
  }

  .table__sortable {
    cursor: pointer;
    user-select: none;

    @media (any-hover: hover) {
      &:hover { background-color: var(--color-gray-lighter); }
    }
  }

  .table__sort-icon {
    display: inline-block;
    margin-inline-start: var(--inline-space-half);
    opacity: 0.5;

    .table__sortable--active & { opacity: 1; }
  }

  .table__empty {
    text-align: center;
    padding: var(--block-space-double);
    color: var(--color-gray-dark);
  }

  /* Admin-density overrides — declared before mobile stacked rules so stacked can override */
  body.full .table th {
    padding-block: 0.875rem 0.625rem;
    padding-inline: var(--block-space-3quarter);
    background-color: transparent;
    border-bottom: var(--border-subtle);
    font-size: var(--text-x-small);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-gray);
  }

  body.full .table td {
    padding-block: 0.625rem;
    padding-inline: var(--block-space-3quarter);
    border-bottom: none;
  }

  /* Mobile: hide secondary columns or stack as cards */
  @media (max-width: 639px) {
    .col--hide-mobile { display: none; }

    .table--stacked {
      display: block;

      & thead { display: none; }
      & tbody, & tr { display: block; }

      & tr {
        border: var(--border-standard);
        border-radius: var(--radius);
        margin-block-end: var(--block-space-3quarter);
        overflow: hidden;
        padding: var(--block-space-half);
      }

      & td {
        display: block;
        padding: var(--block-space-quarter) 0;
      }

      & td[data-label] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--block-space);

        &::before {
          content: attr(data-label);
          font-size: var(--text-small);
          color: var(--color-gray);
          flex-shrink: 0;
        }
      }

      & td.align-text-right { text-align: start; }

      /* Inline checkbox with title */
      & tr:has(> td.table__check) {
        display: grid;
        grid-template-columns: 1.25rem 1fr;
        column-gap: var(--block-space-half);
      }

      & tr:has(> td.table__check) > td.table__check {
        display: flex;
        align-items: flex-start;
        padding-block-start: 3px;
        padding-block-end: 0;
      }

      & tr:has(> td.table__check) > td:nth-child(2) {
        padding-block: 0;
      }

      & tr:has(> td.table__check) > td:nth-child(n+3) {
        grid-column: 1 / -1;
      }
    }

    body.full .table--stacked td {
      border-bottom: none;
      padding: var(--block-space-quarter) 0;
    }
  }
}