/* ===== Realtime Arabic Chat - Global Styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary: #667eea;
  --primary-dark: #5a67d8;
  --secondary: #764ba2;
  --dark: #0d0d1a;
  --dark-2: #151528;
  --dark-3: #1e1e38;
  --dark-4: #252545;
  --dark-5: #2d2d55;
  --border: rgba(255,255,255,0.08);
  --text: #e8e8f0;
  --text-muted: #888899;
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #3b82f6;
  --vip: #FFD700;
  --admin: #FF4444;
  --mod: #4CAF50;
}

* { box-sizing: border-box; }
body { font-family: 'Cairo', sans-serif; }

/* Auth Pages */
.auth-body {
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
  min-height: 100vh;
}
.auth-bg {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(102,126,234,0.15) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 50%, rgba(118,75,162,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.auth-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 40px;
}
.auth-logo {
  font-size: 4rem;
  margin-bottom: 12px;
  animation: float 3s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.auth-tabs .nav-link {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.5);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s;
}
.auth-tabs .nav-link.active {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  border-color: transparent;
}
.auth-tabs .nav-link:not(.active):hover { color: white; background: rgba(255,255,255,0.08); }

.auth-input-group .input-group-text {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-left: none;
  color: var(--primary);
}
.auth-input-group .form-control {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: white;
  border-right: none;
}
.auth-input-group .form-control:focus {
  background: rgba(255,255,255,0.08);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 0 0 3px rgba(102,126,234,0.2);
}
.auth-input-group .form-control::placeholder { color: rgba(255,255,255,0.3); }
.auth-input-group .btn-outline-secondary {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-right: none;
  color: var(--text-muted);
}
.auth-input-group .btn-outline-secondary:hover { color: white; }

.auth-btn {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border: none;
  color: white !important;
  font-size: 1rem;
  letter-spacing: 0.5px;
  transition: all 0.3s;
}
.auth-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(102,126,234,0.4); }

.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-label { cursor: pointer; }

/* Password Strength */
.password-strength {
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}
.strength-bar { height: 100%; width: 0; transition: all 0.4s; border-radius: 3px; }

/* General */
.text-gradient {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hover-white:hover { color: white !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }

/* Badges */
.role-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 700;
  display: inline-block;
}

/* Alerts */
.alert { border: none; border-radius: 12px; }
.alert-danger { background: rgba(239,68,68,0.15); color: #fca5a5; }
.alert-success { background: rgba(34,197,94,0.15); color: #86efac; }
.alert-warning { background: rgba(245,158,11,0.15); color: #fcd34d; }
.alert-info { background: rgba(59,130,246,0.15); color: #93c5fd; }

/* Dropdown */
.dropdown-menu { border-radius: 16px; border: 1px solid var(--border); }