/* ===========================================
   Tables
   ===========================================
   Hairline rows, no header fill, numbers aligned.
   =========================================== */

@layer components {
  .table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;

    th,
    td {
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--color-border);
      text-align: left;
      vertical-align: middle;

      &.text-center {
        text-align: center;
      }

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

    thead th {
      font-size: var(--text-sm);
      font-weight: var(--font-medium);
      color: var(--color-gray-700);
      border-bottom-color: var(--color-gray-400);
      white-space: nowrap;
    }

    th:first-child,
    td:first-child {
      padding-left: 0;
    }

    th:last-child,
    td:last-child {
      padding-right: 0;
    }

    td .table-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: var(--space-4);
    }
  }
}

/* In the utilities layer so it wins over page styles for the same tables (pricing, billing, portfolio) */
@layer utilities {
  /* Phones: a table with .table--stack turns each row into a ruled block. The first cell is the row's name;
     every other cell shows its column name from data-label on the left and the value on the right. */
  @media (max-width: 40rem) {
    .table-wrapper:has(> .table--stack),
    .pricing-table-wrap:has(> .table--stack) {
      overflow-x: visible;
    }

    table.table--stack {
      display: block;
      min-width: 0;

      caption,
      thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }

      tbody,
      tr {
        display: block;
      }

      tr {
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--color-border);
      }

      th,
      td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--space-4);
        padding: var(--space-1) 0;
        border: 0;
        text-align: right;
        white-space: normal;
      }

      tr > :first-child {
        display: block;
        padding-bottom: var(--space-2);
        text-align: left;
      }

      td[data-label]::before {
        content: attr(data-label);
        font-weight: var(--font-normal);
        color: var(--color-text-muted);
        text-align: left;
      }

      td:empty,
      td:not([data-label]):has(> :only-child:empty) {
        display: none;
      }

      td:not([data-label]) {
        justify-content: flex-start;
      }
    }
  }
}

@layer components {

  /* Row name is the link; the secondary line (domain, URL) sits under it in muted text */
  .table__primary {
    display: block;
    font-weight: var(--font-semibold);
    color: var(--color-text);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }

  .table__secondary {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }
}