* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  direction: rtl;
  min-height: 100vh;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.3;
}

.hidden {
  display: none !important;
}

/* -------------------- إمكانية الوصول: تركيز لوحة المفاتيح -------------------- */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* -------------------- الحاوية العامة -------------------- */
.app-shell {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.view {
  flex: 1;
  width: 100%;
  padding: var(--space-4);
  /* مساحة إضافية أسفل المحتوى بالجوال/التابلت حتى لا يغطي شريط
     التنقل السفلي أو زر واتساب العائم آخر عنصر عند التمرير لأسفل */
  padding-bottom: calc(150px + env(safe-area-inset-bottom));
  animation: fadeIn 0.35s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* -------------------- الهيدر الثابت -------------------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 244, 237, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* -------------------- شبكة الدروس -------------------- */
.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

@media (min-width: 640px) {
  .content-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .content-grid { grid-template-columns: repeat(3, 1fr); }
  .view { padding: var(--space-6) var(--space-7); }
}

@media (min-width: 1024px) {
  /* لا يوجد شريط تنقل سفلي على الكمبيوتر، فقط زر واتساب بموضع منخفض */
  .view { padding-bottom: var(--space-7); }
}

/* -------------------- التنقل السفلي (جوال/تابلت) -------------------- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 50;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-around;
  padding: var(--space-2) var(--space-1) calc(var(--space-2) + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(27, 75, 67, 0.06);
}

.bottom-nav.nav-hidden-keyboard {
  transform: translateY(100%);
  transition: transform 0.2s ease;
}

/* -------------------- التنقل الجانبي (كمبيوتر) -------------------- */
/* 🛠️ إصلاح جوهري: هذه القاعدة الأساسية كانت موضوعة بعد قاعدة الـ media
   query التالية لها في هذا الملف (التي تضع display:flex عند 1024px
   فأكثر). بما أن كلا القاعدتين لهما نفس درجة التحديد تماماً (محدِّد كلاس
   واحد .sidebar-nav)، فإن ترتيب الظهور داخل ملف الـ CSS هو الفيصل عند
   تساوي درجة التحديد — والقاعدة الأحدث ظهوراً في الملف تفوز بغض النظر
   عن مطابقة شرط الـ media query من عدمه. كانت هذه القاعدة (display:none)
   تظهر بعد قاعدة الـ media query (display:flex)، فتُلغيها دائماً حتى على
   شاشات الكمبيوتر الكبيرة — وهذا هو السبب الحقيقي والوحيد لاختفاء تبويبات
   "الرئيسية / مذكراتي / الدعم / حسابي / الإدارة" بالكامل على الويب/الكمبيوتر
   رغم وجودها وعملها بشكل صحيح تماماً في الشريط السفلي على الجوال. نقلنا
   هذه القاعدة لتسبق الـ media query في ترتيب الملف، فتُطبَّق كوضع افتراضي
   (مخفي على الجوال) ثم تُعدَّل لاحقاً بأمان بواسطة الـ media query عند
   اتساع الشاشة كما كان مقصوداً أصلاً من الكود ومن التعليق المجاور له. */
.sidebar-nav {
  display: none;
  /* كانت هذه القيمة سابقاً "position: fixed; right: 0"، ما يجعل الشريط
     يلتصق بالحافة اليمنى لنافذة المتصفح الفعلية بدل حافة حاوية
     .app-shell المُمركزة (max-width: 1200px). على الشاشات العريضة
     (أكبر من 1200px) كان هذا يُبعد الشريط بصرياً عن باقي المحتوى
     فيبدو للمستخدم وكأن التنقل "غير موجود" على الكمبيوتر.
     position: sticky يجعله عنصر flex طبيعي داخل .app-shell نفسه،
     فيلتصق دائماً بجانب المحتوى مهما كان عرض الشاشة. */
  position: sticky;
  top: 0;
  height: 100vh;
  width: 260px;
  flex-shrink: 0;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  flex-direction: column;
  padding: var(--space-6) var(--space-4);
  gap: var(--space-2);
  z-index: 45;
}

@media (min-width: 1024px) {
  .bottom-nav { display: none; }
  .app-shell { flex-direction: row; }
  .sidebar-nav { display: flex; }
  /* ملاحظة: لا حاجة لـ margin-inline-start هنا بعد الآن — بما أن
     الشريط الجانبي أصبح عنصر flex طبيعي (وليس position: fixed)،
     فهو يحجز مساحته 260px تلقائياً ضمن تخطيط .app-shell نفسه. */
}

/* -------------------- سلسلة تسجيل الدخول -------------------- */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: radial-gradient(circle at 30% 20%, rgba(201, 162, 75, 0.14), transparent 55%),
              radial-gradient(circle at 80% 80%, rgba(27, 75, 67, 0.12), transparent 55%),
              var(--color-bg);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
}

/* -------------------- التذاكر/الشات -------------------- */
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  max-height: 55vh;
  overflow-y: auto;
}