/**
 * ══════════════════════════════════════════════════════════════════════════════
 * ADMIN USERS PAGE — Styling
 * 
 * Page: pages/admin/users.html
 * Purpose: User management table with search, filtering, and status badges
 * 
 * COMPONENTS:
 * - Table styling with hover states
 * - Status badges (success, warning, accent, danger)
 * - Search bar with input styling
 * - Responsive table layout
 * 
 * ══════════════════════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────────────────────
   TABLE CONTAINER & BASE STYLES
   ───────────────────────────────────────────────────────────────────────────── */

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

/** Table header styling */
thead {
  background: rgba(255, 255, 255, 0.03);
}

th {
  text-align: left;
  padding: 0.85rem 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--glass-border);
}

/** Table cell styling */
td {
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/** Row hover effect */
tbody tr {
  transition: background 0.2s ease;
}

tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

/** Remove bottom border from last row */
tbody tr:last-child td {
  border-bottom: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   STATUS BADGES
   Visual indicators for user status
   ───────────────────────────────────────────────────────────────────────────── */

/**
 * Badge color variants:
 * - .badge-success: Active/verified users
 * - .badge-warning: Pending/warning states
 * - .badge-accent: Premium/special status
 * - .badge-danger: Suspended/banned users
 */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-success {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.badge-warning {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.badge-accent {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
}

.badge-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SEARCH BAR
   User search input with icon support
   ───────────────────────────────────────────────────────────────────────────── */

.search-bar input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 0.875rem;
}

.search-bar input:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.08);
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE ADJUSTMENTS
   Mobile-optimized table display
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  th, td {
    padding: 0.65rem 0.75rem;
    font-size: 0.8125rem;
  }
}