/* ============================================================
   NavigationModule — DynamicMenu (منوی دیتابیسی سمت دانش‌آموز)
   بازطراحی کامل (۱۶ اوت ۲۰۲۶)، پیشوند dm-. از همون پالت اصلی پروژه (#2563eb) و فونت
   Vazirmatn استفاده می‌کنه — هم‌شکل با AppSidebar (سمت ادمین).
   ============================================================ */

.dynamic-menu {
  --dm-c-bg: #14161f;
  --dm-c-surface: #1c1f2b;
  --dm-c-border: rgba(255,255,255,0.08);
  --dm-c-text: #e5e7eb;
  --dm-c-text-2: #9ca3af;
  --dm-c-accent: #2563eb;
  --dm-c-accent-bg: rgba(59,130,246,0.14);
  --dm-c-accent-text: #93c5fd;
  --dm-radius-sm: 6px;
  --dm-radius: 10px;
  font-family: 'Vazirmatn', system-ui, sans-serif;
}

/* ── حالت Sidebar (درخت آبشاری) ──
   این حالت دیگه ظرف بصری خودش رو نداره — داخل .app-sidebar > .sb-scroll (همون Layout
   Chrome ای که AppSidebar سمت ادمین استفاده می‌کنه) رندر می‌شه، پس رنگ/عرض/پس‌زمینه از
   app-sidebar.css میان، نه از اینجا. آیتم‌ها هم از کلاس‌های sb-item/sb-group همون فایل
   استفاده می‌کنن — طبق اصل «همه‌ی ماژول‌ها باید یه الگوی UI مشترک داشته باشن»، به‌جای یه
   ظاهر جدا برای سایدبار دانش‌آموز.

   🔴 باگ واقعی رفع‌شده (۲۵ اوت ۲۰۲۶، تشخیص مستقیم کاربر با Inspect روی گوشی واقعی): تا این‌جا
   این div خودش یک کانتینر flex column جداگانه بود، تودرتوی .sb-scroll (که خودش flex/scroll
   جداگانه‌ای داره). این تودرتوییِ دو سطحی از flex/overflow دقیقاً همون الگوییه که در برخی
   مرورگرهای موبایل (بیشتر WebKit/iOS Safari) باعث می‌شه ظرف داخلی، على‌رغم داشتن محتوای واقعی،
   ارتفاع/نمایش درستی محاسبه نکنه و کاملاً پنهان بمونه — دقیقاً همون چیزی که کاربر با تغییر
   دستیِ display به contents در Inspect، بلافاصله و به‌طور قطعی حلش کرد. با display:contents،
   این div دیگه جعبه‌ی بصری خودش رو نداره؛ آیتم‌های داخلش مستقیماً فرزندِ .sb-scroll محسوب
   می‌شن — یعنی دیگه هیچ تودرتوییِ flex/overflow مشکل‌سازی وجود نداره. چون این قانون هیچ
   ویژگی بصری دیگه‌ای (padding/gap/background) نداشت که با این تغییر از دست بره، این جایگزینی
   کاملاً بی‌خطره. */
.dynamic-menu.sidebar { display: contents; }
.dm-tree-icon-img { width: 17px; height: 17px; object-fit: contain; flex-shrink: 0; }

/* ── حالت Footer (ردیف افقی آیکون) ── */
.dynamic-menu.footer {
  position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center;
  align-items: center; background: var(--dm-c-accent); z-index: 1000; height: 44px;
}
.dm-footer-back {
  position: absolute; left: 10px; z-index: 1; color: #161416; font-family: inherit;
  font-size: 11px; font-weight: 700; border-radius: 15px; margin: auto; background: #eff6ff;
  border: none; padding: 5px 12px; cursor: pointer;
}
.dm-row { display: flex; gap: 4px; justify-content: center; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; width: 100%; padding: 5px; position: absolute; top: -35px; }
.dm-row::-webkit-scrollbar { display: none; }
.dm-row { -ms-overflow-style: none; scrollbar-width: none; }
.dm-row-item { text-align: center; cursor: pointer; min-width: 70px; flex: 0 0 auto; }
.dm-row-icon-circle { width: 45px; height: 45px; background: var(--dm-c-accent); border-radius: 50%; padding: 1px; display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 19px; color: #fff; }
.dm-row-icon-circle img, .dm-row-icon-img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.dm-row-title { margin-top: 4px; color: #fff; font-family: inherit; font-size: 10px; font-weight: 700; }

/* ── حالت Dashboard (شبکه‌ی آیکون‌های بزرگ) ── */
.dm-dashboard-grid { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 15px; max-width: 700px; }
.dm-dashboard-box { width: 46%; margin-bottom: 28px; cursor: pointer; text-align: center; }
.dm-dashboard-box img { width: 100%; height: auto; border-radius: 8px; }
.dm-dashboard-icon-img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; display: block; }
.dm-dashboard-icon-fallback { width: 100%; aspect-ratio: 1; border-radius: 8px; background: var(--dm-c-accent-bg); color: var(--dm-c-accent-text); display: flex; align-items: center; justify-content: center; font-size: 34px; }
@media (min-width: 768px) {
  .dm-dashboard-box { width: 23%; }
}
.dm-back-btn { margin-bottom: 10px; background: #eff6ff; border: none; padding: 6px 14px; border-radius: var(--dm-radius-sm); cursor: pointer; font-family: 'Vazirmatn', system-ui, sans-serif; font-size: 12px; font-weight: 600; color: #1d4ed8; }