/**
 * Mobile Users List - iOS Style
 * Uses CSS Variables from mobile-core.css
 *
 * iOS-style list for displaying users on mobile devices
 * Following Apple HIG with proper touch targets and visual hierarchy
 */

@media (max-width: 768px) {

  /* Hide desktop users content on mobile (table and wrapper cards) */
  html body .table-users,
  html body .admin-content-container > .admin-content-container {
    display: none;
  }

  /* ============================================
     MOBILE USERS HEADER
     ============================================ */

  .mobile-users-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-md) 12px var(--spacing-md);
  }

  .mobile-users-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
  }

  .mobile-users-add-btn {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    text-decoration: none;
    padding: var(--spacing-sm) 14px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-users-add-btn:active {
    background-color: var(--color-primary-alpha);
  }

  /* ============================================
     MOBILE USERS LIST CONTAINER
     ============================================ */

  .mobile-users-list {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
  }

  /* ============================================
     USER ROW
     ============================================ */

  .mobile-user-item {
    position: relative;
  }

  /* iOS-style divider (inset from left) */
  .mobile-user-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--spacing-md);
    right: 0;
    height: 0.5px;
    background-color: var(--color-separator);
  }

  /* ============================================
     USER LINK (Tap Target)
     ============================================ */

  a.user-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px var(--spacing-md);
    min-height: 64px;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  a.user-content:active {
    background-color: var(--color-hover);
  }

  /* ============================================
     STATUS INDICATOR
     ============================================ */

  .user-status-indicator {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }

  .user-status-indicator.active {
    background-color: var(--color-success);
  }

  .user-status-indicator.inactive {
    background-color: var(--color-danger);
  }

  /* ============================================
     USER INFO BLOCK
     ============================================ */

  .user-info-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .user-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .user-status-text {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
  }

  /* ============================================
     ROLE BADGE
     ============================================ */

  .user-role-badge {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-tertiary);
    padding: var(--spacing-xs) 10px;
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
  }

  .user-role-badge.admin {
    background-color: var(--color-badge-admin-bg);
    color: var(--color-badge-admin-text);
  }

  /* ============================================
     CHEVRON
     ============================================ */

  .user-chevron {
    color: var(--color-chevron);
    font-size: 14px;
    flex-shrink: 0;
  }
}