@layer components {
  /* ── Admin Table ──────────────────────────────────────── */
  .admin-table {
    width: 100%;
    background-color: var(--admin-surface-container);
    border-collapse: collapse;
  }

  .admin-table thead {
    background-color: var(--admin-surface-low);
  }

  .admin-table th {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--admin-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
  }

  .admin-table td {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-sm);
    color: var(--admin-on-surface);
    vertical-align: middle;
  }

  .admin-table tbody tr {
    transition: background-color var(--transition-fast);
  }

  .admin-table tbody tr + tr {
    border-top: 1px solid var(--admin-ghost-border);
  }

  .admin-table tbody tr:hover {
    background-color: var(--admin-surface-low);
  }

  /* User row — avatar + name + email */
  .admin-user-cell {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }

  .admin-user-cell__avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background-color: var(--admin-surface-low);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--admin-primary);
    flex-shrink: 0;
    overflow: hidden;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .admin-user-cell__name {
    font-weight: var(--font-semibold);
    color: var(--admin-primary);
  }

  .admin-user-cell__email {
    font-size: var(--text-xs);
    color: var(--admin-on-surface-variant);
  }

  /* Status badge with dot */
  .admin-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
  }

  .admin-status__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
  }

  .admin-status--active {
    color: var(--color-positive);

    & .admin-status__dot {
      background-color: var(--color-positive);
    }
  }

  .admin-status--pending {
    color: var(--admin-tertiary);

    & .admin-status__dot {
      background-color: var(--admin-tertiary);
    }
  }

  .admin-status--disabled {
    color: var(--color-negative);

    & .admin-status__dot {
      background-color: var(--color-negative);
    }
  }

  /* Action icons */
  .admin-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    color: var(--admin-on-surface-variant);
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast),
                color var(--transition-fast);
    text-decoration: none;

    & svg {
      width: 1.125rem;
      height: 1.125rem;
    }

    &:hover {
      background-color: var(--admin-surface-low);
      color: var(--admin-on-surface);
    }

    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }
  }

  .admin-action-form {
    display: inline-flex;
  }

  /* ── Row dropdown ─────────────────────────────────────── */
  .admin-dropdown {
    position: relative;
    display: inline-flex;
  }

  .admin-dropdown__panel {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: var(--z-dropdown);
    min-width: 10rem;
    background: var(--admin-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);

    &.is-open {
      display: block;
    }
  }

  .admin-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    color: var(--admin-on-surface);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background-color var(--transition-fast);

    &:first-child {
      border-radius: var(--radius-md) var(--radius-md) 0 0;
    }

    &:last-child {
      border-radius: 0 0 var(--radius-md) var(--radius-md);
    }

    &:hover {
      background-color: var(--admin-surface-low);
    }

    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: -2px;
    }

    &.admin-dropdown__item--danger {
      color: var(--color-negative);

      &:hover {
        background-color: var(--color-negative-bg);
      }
    }
  }
}