/* ============================================================
   Ahmed El-Masry Platform — Global Design System Styles
   ============================================================ */

* { font-family: 'Cairo', sans-serif; }

html { scroll-behavior: smooth; }

/* ---- Buttons ---- */
.btn-primary {
  background: linear-gradient(135deg, #4c1d95, #2e1065);
  color: white;
  font-weight: 800;
  padding: 0.75rem 1.75rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px -10px rgba(76,29,149,0.45);
  transition: all .2s ease;
  display: inline-flex; align-items: center; gap: .5rem;
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

.btn-gold {
  background: linear-gradient(135deg, #f0c24b, #d4af37);
  color: #2e1065;
  font-weight: 800;
  padding: 0.75rem 1.75rem;
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px -6px rgba(212,175,55,0.5);
  transition: all .2s ease;
  display: inline-flex; align-items: center; gap: .5rem;
}
.btn-gold:hover { filter: brightness(1.05); transform: translateY(-1px); }

.btn-outline {
  border: 2px solid #4c1d95;
  color: #4c1d95;
  font-weight: 700;
  padding: 0.7rem 1.6rem;
  border-radius: 0.75rem;
  transition: all .2s ease;
  display: inline-flex; align-items: center; gap: .5rem;
}
.btn-outline:hover { background: #4c1d95; color: white; }

/* ---- Cards ---- */
.card {
  background: white;
  border-radius: 1rem;
  border: 1px solid #f1f1f4;
  box-shadow: 0 2px 10px -4px rgba(0,0,0,0.06);
  transition: all .25s ease;
}
.card-hover:hover {
  box-shadow: 0 20px 40px -16px rgba(76,29,149,0.25);
  transform: translateY(-4px);
}

/* ---- Badges ---- */
.badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 800; padding: .25rem .65rem; border-radius: 999px; }
.badge-purple { background: #ede9fe; color: #5b21b6; }
.badge-gold { background: #faedc4; color: #8f7018; }
.badge-green { background: #dcfce7; color: #15803d; }
.badge-red { background: #fee2e2; color: #b91c1c; }
.badge-yellow { background: #fef9c3; color: #a16207; }
.badge-gray { background: #f3f4f6; color: #4b5563; }

/* ---- Hero pattern ---- */
.hero-gradient {
  background: radial-gradient(circle at 20% 20%, rgba(212,175,55,0.15), transparent 40%),
              radial-gradient(circle at 80% 0%, rgba(139,92,246,0.25), transparent 45%),
              linear-gradient(135deg, #2e1065 0%, #4c1d95 55%, #3b1478 100%);
}

/* ---- Section title ---- */
.section-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #ede9fe; color: #5b21b6; font-weight: 800; font-size: .75rem;
  padding: .35rem .9rem; border-radius: 999px; margin-bottom: .75rem;
}

/* ---- Progress bar ---- */
.progress-track { background: #eee9f7; border-radius: 999px; height: .5rem; overflow: hidden; }
.progress-fill { background: linear-gradient(90deg, #d4af37, #f0c24b); height: 100%; border-radius: 999px; transition: width .4s ease; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 999px; }

/* ---- Toast ---- */
#toast-container { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: .5rem; width: 92%; max-width: 420px; }
.toast { padding: .85rem 1.1rem; border-radius: .75rem; font-weight: 700; font-size: .875rem; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.25); display:flex; align-items:center; gap:.6rem; animation: slideDown .25s ease; }
.toast-success { background: #16a34a; color: white; }
.toast-error { background: #dc2626; color: white; }
.toast-info { background: #4c1d95; color: white; }
@keyframes slideDown { from { opacity:0; transform: translateY(-10px);} to {opacity:1; transform: translateY(0);} }

/* ---- Modal ---- */
.modal-backdrop { position: fixed; inset:0; background: rgba(46,16,101,0.55); z-index: 90; display:flex; align-items:center; justify-content:center; padding:1rem; }

/* ---- Loading spinner ---- */
.spinner { border: 3px solid #ede9fe; border-top-color: #7c3aed; border-radius: 50%; width: 1.5rem; height: 1.5rem; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Sidebar (admin/student) ---- */
.sidebar-link { display:flex; align-items:center; gap:.7rem; padding:.65rem .9rem; border-radius:.65rem; font-size:.875rem; font-weight:700; color:#4b5563; transition: all .15s; }
.sidebar-link:hover { background:#f5f3ff; color:#4c1d95; }
.sidebar-link.active { background: linear-gradient(135deg,#4c1d95,#2e1065); color:white; box-shadow: 0 6px 16px -4px rgba(76,29,149,.5); }

/* ---- Line clamp ---- */
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }