/* ===========================================
   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);
    }
  }
}

@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);
  }
}