/* ====== ترويض الحركة (مستوحى من main-no-dropdown-effects.css) ====== */
.btn,
.btn-sm,
.view-toggle-buttons .btn,
.status-select-dropdown,
.notification-item,
.dropdown-item,
.searchable-dropdown .searchable-input,
.dropdown-list > div,
.notification-bell,
.stat-tab,
.clickable-card,
.orders-list tbody tr,
.form-input,
.nav-item,
.stat-card {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease !important;
}

/* على الجوال نُبقي تثبيت الحركة لتجنّب الإرهاق في البيئات الصغيرة.
   على الديسكتوب تعود الـ entrance الموحّدة (fadeIn). */
@media (max-width: 768px) {
    .notification-dropdown,
    .dropdown-menu { animation: none !important; }
}

/* ============================================================
   Stagger — الظهور المتتابع (الـ entrance الوحيد المعتمد للظهور المتتابع)
   يُفعَّل بإضافة .stagger-go على الحاوية عبر JS. الأبناء المباشرون يتدرّجون
   بـ delay بسيط (rhythm واضح)، وللحاويات الفرعية [data-stagger] داخلها يتدرّج
   الأبناء بنفس النمط. بلا translateY/scale على أي عنصر — opacity فقط كي لا
   يبقى أي «زوم/شِفت» في الواجهة. يحترم prefers-reduced-motion.
   ============================================================ */
@keyframes staggerRise {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* الأبناء المباشرون يتدرّجون، لكن الحاوية نفسها لو كانت [data-stagger]
   لا تتدرّج كقطعة (نتجنّب التراكم المرئي على أبنائها). */
.stagger-go > *:not([data-stagger]),
.stagger-go [data-stagger] > * {
    animation: staggerRise .42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.stagger-go > *:nth-child(1),
.stagger-go [data-stagger] > *:nth-child(1)  { animation-delay: .03s; }
.stagger-go > *:nth-child(2),
.stagger-go [data-stagger] > *:nth-child(2)  { animation-delay: .08s; }
.stagger-go > *:nth-child(3),
.stagger-go [data-stagger] > *:nth-child(3)  { animation-delay: .13s; }
.stagger-go > *:nth-child(4),
.stagger-go [data-stagger] > *:nth-child(4)  { animation-delay: .18s; }
.stagger-go > *:nth-child(5),
.stagger-go [data-stagger] > *:nth-child(5)  { animation-delay: .23s; }
.stagger-go > *:nth-child(6),
.stagger-go [data-stagger] > *:nth-child(6)  { animation-delay: .28s; }
.stagger-go > *:nth-child(7),
.stagger-go [data-stagger] > *:nth-child(7)  { animation-delay: .33s; }
.stagger-go > *:nth-child(8),
.stagger-go [data-stagger] > *:nth-child(8)  { animation-delay: .38s; }
.stagger-go > *:nth-child(9),
.stagger-go [data-stagger] > *:nth-child(9)  { animation-delay: .43s; }
.stagger-go > *:nth-child(10),
.stagger-go [data-stagger] > *:nth-child(10) { animation-delay: .48s; }
/* الأبناء من 11 فما فوق (مثل بقية بطاقات الطلبات/المنتجات بعد العشرة الأولى):
   بدلاً من تركهم بلا delay فيظهرون دفعةً فوراً (سلوك جزئي قبيح)، نُعيّن لهم
   delay ثابتاً يكتمل بعد آخر فرد متدرّج (0.48s + 0.42s = 0.9s) فيظهرون معاً
   بسلاسة، أو نواصل التدرّج الخفيف لمن لديهم أكثر من 20 عنصراً.
   11..20 → تدرّج 50ms تدريجياً (نفس إيقاع العشرة الأولى). */
.stagger-go > *:nth-child(11),
.stagger-go [data-stagger] > *:nth-child(11) { animation-delay: .50s; }
.stagger-go > *:nth-child(12),
.stagger-go [data-stagger] > *:nth-child(12) { animation-delay: .52s; }
.stagger-go > *:nth-child(13),
.stagger-go [data-stagger] > *:nth-child(13) { animation-delay: .54s; }
.stagger-go > *:nth-child(14),
.stagger-go [data-stagger] > *:nth-child(14) { animation-delay: .56s; }
.stagger-go > *:nth-child(15),
.stagger-go [data-stagger] > *:nth-child(15) { animation-delay: .58s; }
.stagger-go > *:nth-child(16),
.stagger-go [data-stagger] > *:nth-child(16) { animation-delay: .60s; }
.stagger-go > *:nth-child(17),
.stagger-go [data-stagger] > *:nth-child(17) { animation-delay: .62s; }
.stagger-go > *:nth-child(18),
.stagger-go [data-stagger] > *:nth-child(18) { animation-delay: .64s; }
.stagger-go > *:nth-child(19),
.stagger-go [data-stagger] > *:nth-child(19) { animation-delay: .66s; }
.stagger-go > *:nth-child(20),
.stagger-go [data-stagger] > *:nth-child(20) { animation-delay: .68s; }
/* ما بعد 20: نُثبّت delay عند 0.7s كي تظهر دفعةً واحدة بعد انتهاء التدرّج
   الأوّلي بدل أن تنفجر فجأة عند 0s. */
.stagger-go > *:nth-child(n+21),
.stagger-go [data-stagger] > *:nth-child(n+21) { animation-delay: .70s; }

@media (prefers-reduced-motion: reduce) {
    .stagger-go > *,
    .stagger-go [data-stagger] > * { animation: none !important; }
}

/* ============================================================
   الـ entrances الفردية (modals/dropdowns/splash) — fade فقط (opacity)
   بلا translateY/scale لإزالة أي «زوم/شِفت» بحسب طلب الظهور المتتابع.
   الأسماء صريحة (لا تدّعي Stagger لأنها لعناصر منفردة).
   ============================================================ */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* splash/شعار المتجر — تكبّر يميّز لحظة البدء */
@keyframes growInIntro {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
/* backdrop الـ reports-unlock — تلاشي + ضبابية متزامنة */
@keyframes backdropFadeIn {
    from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
    to   { opacity: 1; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}

/* ============================================================
   تحوّلا الأيقونتين المتبدّلتين (مبدّل الوضع الليلي، وشرطات القائمة ↔ ×)
   كانا المَوضعين الوحيدين في التطبيق خارج تغطية تقليل الحركة، ويعيشان في
   dark.css و forms.css اللذين لا يحويان أي كتلة. نُبقي الحكم هنا لأنّ
   motion.css يملك نظام الحركة.

   نُعطّل انتقال transform فقط — لا كتلة شاملة — فيبقى تغيّر الحالة
   محسوساً عبر اللون والشفافية، وهو ما تشترطه القاعدة: بديل مقصود يحفظ
   التغذية الراجعة، لا قتل يمحوها.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .theme-switch .ts-icon,
    .topbar-menu .burger > span {
        transition-property: opacity, background-color, color;
    }
}