/* ============================================================
   SAAS.CSS — Unified Design System for EduQuest
   Loaded by ALL pages for consistent look & feel
   ============================================================ */

/* ═══════════════════════════════════════════
   1. DESIGN TOKENS (--eq-* prefixed)
   ═══════════════════════════════════════════ */
:root {
  /* Primary palette */
  --eq-primary:       #6C5CE7;
  --eq-primary-light: #A29BFE;
  --eq-primary-dark:  #4834D4;
  --eq-primary-bg:    #F0EDFF;

  /* Accent colors */
  --eq-coral:         #FF6B6B;
  --eq-coral-light:   #FFE0E0;
  --eq-green:         #00B894;
  --eq-green-light:   #D5F5ED;
  --eq-yellow:        #FDCB6E;
  --eq-yellow-light:  #FFF3D6;
  --eq-blue:          #0984E3;
  --eq-blue-light:    #DFF0FF;
  --eq-pink:          #E84393;
  --eq-pink-light:    #FFE0F0;
  --eq-teal:          #00CEC9;
  --eq-teal-light:    #D4FAF9;
  --eq-indigo:        #4A69BD;
  --eq-indigo-light:  #E0E7F7;

  /* Neutrals */
  --eq-bg:            #F8F9FC;
  --eq-bg-card:       #FFFFFF;
  --eq-text:          #2D3436;
  --eq-text-soft:     #636E72;
  --eq-text-muted:    #B2BEC3;
  --eq-border:        #E8ECF0;
  --eq-border-hover:  #DFE6E9;

  /* Typography */
  --eq-font-heading:  'Inter', system-ui, -apple-system, sans-serif;
  --eq-font-body:     'Nunito', system-ui, sans-serif;

  /* Spacing / Radius */
  --eq-r-sm:  10px;
  --eq-r-md:  14px;
  --eq-r-lg:  20px;
  --eq-r-xl:  28px;

  /* Shadows */
  --eq-shadow-xs: 0 1px 3px rgba(0,0,0,.04);
  --eq-shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --eq-shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --eq-shadow-lg: 0 8px 32px rgba(0,0,0,.10);
  --eq-shadow-xl: 0 16px 48px rgba(0,0,0,.14);

  /* ── Legacy aliases (backward compatibility with modules.css / leaderboard.css) ── */
  --c-teal:       var(--eq-primary);
  --c-teal-dark:  var(--eq-primary-dark);
  --c-coral:      var(--eq-coral);
  --c-coral-soft: var(--eq-coral-light);
  --c-yellow:     var(--eq-yellow);
  --c-yellow-soft:var(--eq-yellow-light);
  --c-mint:       var(--eq-green);
  --c-lilac:      var(--eq-primary-light);
  --c-ink:        var(--eq-text);
  --c-ink-soft:   var(--eq-text-soft);
  --c-dark:       var(--eq-text);
  --c-cream:      var(--eq-bg);
  --c-cream-2:    var(--eq-border);

  --primary:       var(--eq-primary);
  --primary-light: var(--eq-primary-light);
  --primary-dark:  var(--eq-primary-dark);
  --primary-bg:    var(--eq-primary-bg);
  --coral:         var(--eq-coral);
  --coral-light:   var(--eq-coral-light);
  --green:         var(--eq-green);
  --green-light:   var(--eq-green-light);
  --orange:        var(--eq-yellow);
  --orange-light:  var(--eq-yellow-light);
  --blue:          var(--eq-blue);
  --blue-light:    var(--eq-blue-light);
  --pink:          var(--eq-pink);
  --pink-light:    var(--eq-pink-light);
  --teal:          var(--eq-teal);
  --teal-light:    var(--eq-teal-light);
  --indigo:        var(--eq-indigo);
  --indigo-light:  var(--eq-indigo-light);
  --bg:            var(--eq-bg);
  --bg-card:       var(--eq-bg-card);
  --text:          var(--eq-text);
  --text-soft:     var(--eq-text-soft);
  --text-muted:    var(--eq-text-muted);
  --border:        var(--eq-border);
  --border-hover:  var(--eq-border-hover);

  --font-title:    var(--eq-font-heading);
  --font-heading:  var(--eq-font-heading);
  --font-body:     var(--eq-font-body);

  --r-sm: var(--eq-r-sm);
  --r-md: var(--eq-r-md);
  --r-lg: var(--eq-r-lg);
  --r-xl: var(--eq-r-xl);

  --shadow-xs: var(--eq-shadow-xs);
  --shadow-sm: var(--eq-shadow-sm);
  --shadow-md: var(--eq-shadow-md);
  --shadow-lg: var(--eq-shadow-lg);
  --shadow-xl: var(--eq-shadow-xl);
}

/* ═══════════════════════════════════════════
   2. EQ-NAVBAR — Glassmorphism Sticky Navbar
   ═══════════════════════════════════════════ */
.eq-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--eq-border);
  padding: 0 24px;
}
.eq-navbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.eq-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--eq-text);
}
.eq-logo-icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--eq-primary), var(--eq-primary-dark));
  border-radius: var(--eq-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #fff;
  box-shadow: 0 2px 8px rgba(108,92,231,.3);
}
.eq-logo-text {
  font-family: var(--eq-font-heading);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.3px;
}
.eq-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.eq-nav-link {
  padding: 8px 14px;
  border-radius: var(--eq-r-sm);
  font-family: var(--eq-font-heading);
  font-weight: 600;
  font-size: .88rem;
  color: var(--eq-text-soft);
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}
.eq-nav-link:hover {
  background: var(--eq-primary-bg);
  color: var(--eq-primary);
}
.eq-nav-link.active {
  background: var(--eq-primary-bg);
  color: var(--eq-primary);
  font-weight: 700;
}
.eq-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.eq-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--eq-r-sm);
  border: none;
  background: transparent;
  color: var(--eq-text-soft);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  text-decoration: none;
}
.eq-nav-btn:hover {
  background: var(--eq-primary-bg);
  color: var(--eq-primary);
}
.eq-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--eq-primary-light), var(--eq-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .9rem;
  font-weight: 800;
  font-family: var(--eq-font-heading);
  cursor: pointer;
  margin-left: 4px;
}

/* Mobile navbar */
@media (max-width: 768px) {
  .eq-navbar { padding: 0 16px; }
  .eq-navbar-inner { height: 54px; }
  .eq-nav-links { display: none; }
  .eq-logo-text { font-size: 1.05rem; }
}

/* ═══════════════════════════════════════════
   3. EQ-FOOTER — Unified Footer
   ═══════════════════════════════════════════ */
.eq-footer {
  border-top: 1px solid var(--eq-border);
  padding: 32px 24px;
  background: var(--eq-bg-card);
}
.eq-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.eq-footer-brand {
  font-family: var(--eq-font-heading);
  font-weight: 800;
  font-size: .88rem;
  color: var(--eq-text-soft);
}
.eq-footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.eq-footer-links a {
  font-size: .82rem;
  font-weight: 600;
  color: var(--eq-text-muted);
  text-decoration: none;
  transition: color .15s;
}
.eq-footer-links a:hover { color: var(--eq-primary); }

@media (max-width: 640px) {
  .eq-footer { padding: 24px 16px; }
  .eq-footer-inner { flex-direction: column; text-align: center; }
  .eq-footer-links { justify-content: center; gap: 16px; }
}

/* ═══════════════════════════════════════════
   4. UTILITIES
   ═══════════════════════════════════════════ */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-muted  { color: var(--eq-text-muted); }
.text-soft   { color: var(--eq-text-soft); }
.text-primary { color: var(--eq-primary); }

.mt-xs { margin-top: 4px; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.mt-xl { margin-top: 40px; }

.mb-xs { margin-bottom: 4px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 24px; }
.mb-xl { margin-bottom: 40px; }

.hidden { display: none !important; }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }

/* ═══════════════════════════════════════════
   5. COMMON COMPONENTS POLISH
   ═══════════════════════════════════════════ */

/* Buttons — polished version */
.eq-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--eq-primary);
  color: #fff;
  border: none;
  border-radius: var(--eq-r-sm);
  font-family: var(--eq-font-heading);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(108,92,231,.3);
  transition: all .15s;
}
.eq-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(108,92,231,.4);
}
.eq-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(108,92,231,.2);
}
.eq-btn-secondary {
  background: var(--eq-bg-card);
  color: var(--eq-primary-dark);
  border: 1px solid var(--eq-border);
  box-shadow: var(--eq-shadow-sm);
}
.eq-btn-secondary:hover {
  border-color: var(--eq-primary);
  box-shadow: var(--eq-shadow-md);
}
.eq-btn-danger {
  background: var(--eq-coral);
  box-shadow: 0 2px 8px rgba(255,107,107,.3);
}
.eq-btn-danger:hover {
  box-shadow: 0 4px 16px rgba(255,107,107,.4);
}

/* Badges */
.eq-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 50px;
  font-family: var(--eq-font-heading);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .3px;
}
.eq-badge-primary {
  background: var(--eq-primary-bg);
  color: var(--eq-primary);
}
.eq-badge-success {
  background: var(--eq-green-light);
  color: #1a6b4a;
}
.eq-badge-danger {
  background: var(--eq-coral-light);
  color: #9c2626;
}
.eq-badge-warning {
  background: var(--eq-yellow-light);
  color: #92400e;
}

/* Cards */
.eq-card {
  background: var(--eq-bg-card);
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-r-lg);
  padding: 24px;
  box-shadow: var(--eq-shadow-xs);
  transition: box-shadow .2s, transform .2s;
}
.eq-card:hover {
  box-shadow: var(--eq-shadow-md);
}

/* ═══════════════════════════════════════════
   6. PRINT STYLES
   ═══════════════════════════════════════════ */
@media print {
  .eq-navbar,
  .eq-footer,
  .mode-switch,
  .mode-switch-chapters {
    display: none !important;
  }
}