/* ════════════════════════════════════════════════════════════════════════════
 * 🟣 [PERF-STUDENT 2026-06-10] 100-performance-mode.css — وضع الأداء القصوى
 * ────────────────────────────────────────────────────────────────────────────
 * مرآة طبقة الأدمن 99 لمنصة الطالب. تُحمَّل آخر ملف CSS في index.html.
 * التحميل بسطر واحد = التراجع بحذف سطر واحد (يرجع الشكل القديم بالكامل).
 *
 * الفلسفة: نحذف «كلفة» الحركة لا «جمالها» — الديسكتوب يحتفظ بأناقة مخففة،
 * والجوال (hover:none / pointer:coarse) يحصل على فورية مطلقة.
 * الأرقام من جرد فعلي: ~50 transition:all، ~121 backdrop-filter، 32 أنيميشن
 * لانهائي بالتطبيق، 3 خلفيات body ثابتة (fixed)، صفر مستمعات
 * animationend/transitionend في كل JS (مُثبت بـ grep ⇒ القتل آمن).
 *
 * الأقسام: §1 أنيميشن الدخول | §2 النبضات اللانهائية | §3 الزجاج backdrop
 * §4 خلفيات fixed | §5 الانتقالات والظلال | §hover حارس الهوفر واللمس
 * §6 انسجام الأجهزة | §7 القوائم الطويلة | §8 perf-lite + reduced-motion
 * §9 أدوات (هياكل شيمر + سهم العودة)
 * ════════════════════════════════════════════════════════════════════════════ */

/* ═══ §0 عام (كل الأجهزة) — مكاسب مجانية بلا أثر بصري ══════════════════════ */
body { touch-action: manipulation; }
a, button, .h-btn, .nav-item, .nav-btn, .poster-card, .course-card,
.svc-card, .profile-menu-item, .drawer-item, .category-header {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* تأثير الموجة (هوية) — صفر اعتراض لمس + تلميح تركيب */
.ripple-circle { pointer-events: none; will-change: transform, opacity; }

/* ═════════════════════════════════════════════════════════════════════════
 * الجوال/اللمس — فورية مطلقة
 * ═════════════════════════════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {

  /* ─── §1 أنيميشن الدخول: لا شيء — الصفحة تظهر فوراً ─────────────────── */
  .page,
  .page.slide-left, .page.slide-right, .page.slide-up,
  .poster-card.stagger-poster,
  .stagger-card,
  .count-animate { animation: none !important; }
  /* أنيميشن inline (كرت الترحيب fadeInScale + نبض «اسمك الثلاثي») */
  #page-dashboard div[style*="fadeInScale"] { animation: none !important; }
  #page-register span[style*="namePulseGlow"] { animation: none !important; }
  /* يبقى يتحرك: .h-progress-bar.animated (progressFill 0.8s مرة واحدة — وظيفي) */

  /* ─── §2 النبضات اللانهائية الزخرفية: إيقاف كامل على الجوال ───────────
     يبقى يتحرك: .spinner::after / .sbil-spinner / .pcs-spinner / .fa-spin
     (سبينرات) + .skeleton/.poster-skeleton/.h-skel-* (هياكل تحميل) +
     .wl-cd-sep (وميض فاصل countdown مقاطع الانتظار — وظيفي) +
     .sbil-pending-dots (مؤشر «جاري» فعلي). الشارات تبقى ظاهرة ثابتة. */
  .login-gradient-bg,
  .nav-icon-request .nav-custom-icon,
  .nav-icon-request::before,
  .lesson-card--waiting .course-thumb::after,
  .lesson-card--waiting .wl-center-icon,
  .lesson-card--waiting .wl-badge,
  .lesson-card--waiting .wl-pct-fill::after,
  .tg-particle, .tg-logo-wrap, .tg-logo-glow, .tg-open-btn,
  .tg-status-dot, .tg-success-ring, .tg-recovery-icon-bg,
  .dlm-badge .dot, .dlm-illust .halo,
  .sbil-svc-card[data-has-unpaid="1"],
  .sbil-result-icon-bg,
  .sbil-rt-connected i,
  .svc-card-badge,
  .sbil-pickcard-due .sbil-pickcard-status i,
  .sbil-pickcard-overdue .sbil-pickcard-status i,
  .cine-cosmos, .cine-stars, .cine-stars::after,
  .cine-aurora, .cine-aurora::before, .cine-aurora::after { animation: none !important; }

  /* ─── §3 الزجاج: إلغاء كامل على اللمس + خلفيات صلبة بروح كل ثيم ──────── */
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* الشرائط والمودالات — صلبة شبه معتمة (معايرة على الثيمات الأربعة) */
  .top-nav, .bottom-nav, .h-modal, .h-toast, .playlist-drawer {
    background: rgba(13, 17, 28, 0.97) !important;
  }
  :root[data-theme="purple"] .top-nav, :root[data-theme="purple"] .bottom-nav,
  :root[data-theme="purple"] .h-modal, :root[data-theme="purple"] .h-toast,
  :root[data-theme="purple"] .playlist-drawer {
    background: rgba(18, 12, 38, 0.96) !important;
  }
  :root[data-theme="pink"] .top-nav, :root[data-theme="pink"] .bottom-nav,
  :root[data-theme="pink"] .h-modal, :root[data-theme="pink"] .h-toast,
  :root[data-theme="pink"] .playlist-drawer {
    background: rgba(30, 15, 24, 0.96) !important;
  }
  :root[data-theme="light"] .top-nav, :root[data-theme="light"] .bottom-nav,
  :root[data-theme="light"] .h-modal, :root[data-theme="light"] .playlist-drawer {
    background: rgba(250, 251, 253, 0.97) !important;
  }
  :root[data-theme="light"] .h-toast { background: rgba(255, 255, 255, 0.97) !important; }
  /* بطاقات الثيمات الزجاجية (وردي/بنفسجي كان عليها blur 6px) — تعتيم أعلى بدل الزجاج */
  :root[data-theme="purple"] .h-card {
    background: linear-gradient(145deg, rgba(40, 26, 64, 0.95), rgba(26, 16, 48, 0.97)) !important;
  }
  :root[data-theme="pink"] .h-card {
    background: linear-gradient(145deg, rgba(45, 20, 38, 0.95), rgba(30, 14, 24, 0.97)) !important;
  }
  /* خلفيات المودالات/الشيتات (كانت blur) — سكريم أعمق يعوّض غياب الضبابية */
  .h-modal-overlay, .dlm-backdrop, .sbil-pay-modal-backdrop, .sbil-receipt-overlay,
  .pcs-sheet-backdrop, .tg-modal-overlay, .fp-gate-backdrop, .final-req-overlay {
    background-color: rgba(4, 6, 12, 0.78) !important;
  }

  /* ─── §4 خلفيات fixed: إعادة رسم كاملة مع كل سكرول على الجوال ─────────── */
  body { background-attachment: scroll !important; }

  /* ─── §hover حارس الهوفر اللزج: أول نقرة لمس كانت تفعّل hover كاملاً ──── */
  .poster-card:hover, .dash-poster-card:hover, .h-card:hover, .course-card:hover,
  .svc-card:hover, .h-btn:hover, .profile-menu-item:hover, .stat-mini:hover,
  .category-header:hover, .drawer-item:hover, .vid-bookmark-item:hover,
  .auth-back-link:hover, .poster-action-btn:hover {
    transform: none !important;
    filter: none !important;
  }
  .poster-card:hover img, .poster-card:hover .poster-img-wrap img { transform: none !important; }
  /* شاين البطاقات (::before تظليل + ::after لمعة قطرية) — معدوم على اللمس */
  .poster-card::before, .poster-card::after { display: none !important; }
  .h-btn:hover::after { box-shadow: none !important; }
  /* بديل اللمس الفوري: إحساس «ضغطة» حقيقي بلا كلفة */
  .poster-card:active, .dash-poster-card:active, .course-card:active,
  .h-card:active, .svc-card:active, .h-btn:active, .profile-menu-item:active,
  .drawer-item:active, .nav-item:active, .category-header:active {
    transform: scale(0.985) !important;
    transition: transform 0.06s ease !important;
  }

  /* ─── §5 الظلال متعددة الطبقات ⇒ ظل واحد خفيف على اللمس ───────────────── */
  .poster-card, .dash-poster-card { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important; }
  :root[data-theme="light"] .poster-card,
  :root[data-theme="light"] .dash-poster-card { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14) !important; }

  /* ─── §6 انسجام الأجهزة ──────────────────────────────────────────────── */
  /* مدخلات ≥16px = لا زوم قسري على iOS (شاشة الدخول تحديداً) */
  .h-input, input, select, textarea { font-size: max(16px, 1rem) !important; }
  /* أهداف لمس ≥ 44px للأزرار الصغيرة */
  .top-nav .nav-btn, .theme-toggle-btn, .vid-top-btn, .vid-ctrl-btn,
  .mini-player-btn, .vid-speed-btn {
    min-width: 44px; min-height: 44px;
  }
}

/* الحواف الآمنة (آيفون) — إضافي فوق معالجة 97 الجانبية: شريط القاع والتوست
   فوق home-indicator. لا أثر على الأجهزة بلا notch (env = 0). */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (hover: none), (pointer: coarse) {
    .bottom-nav {
      height: calc(var(--bottombar-height) + env(safe-area-inset-bottom, 0px));
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .toast-container {
      bottom: calc(var(--bottombar-height) + 12px + env(safe-area-inset-bottom, 0px));
    }
    /* ⚠️ (اكتشاف المراجعة العدائية) لا قاعدة body هنا — main.css:604-607 يعالج
       env على حشوة body أصلاً مع إبقاء إزاحة الشريط؛ قاعدة body{padding-bottom:env}
       كانت ستمحو الإزاحة وتحجب آخر ~75px من كل صفحة خلف الشريط الثابت. */
  }
}

/* ═════════════════════════════════════════════════════════════════════════
 * الديسكتوب — أناقة مخففة (hover حقيقي موجود)
 * ═════════════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {

  /* §1 دخول مخفف: نفس الحركات بنصف الكلفة (≤ 0.15s) */
  .page { animation-duration: 0.12s !important; }
  .page.slide-left, .page.slide-right, .page.slide-up { animation-duration: 0.15s !important; }
  .stagger-card { animation-duration: 0.2s !important; }

  /* §2 الأثقل فقط على الديسكتوب: نبض فلتر drop-shadow + الجزيئات العائمة */
  .nav-icon-request::before, .tg-particle { animation: none !important; }

  /* §3 الزجاج للعناصر العليا فقط وبسقف blur 8px */
  .top-nav { -webkit-backdrop-filter: blur(8px) saturate(1.1) !important; backdrop-filter: blur(8px) saturate(1.1) !important; }
  .bottom-nav { -webkit-backdrop-filter: blur(8px) saturate(1.1) !important; backdrop-filter: blur(8px) saturate(1.1) !important; }
  .h-modal, .h-modal-overlay, .h-toast,
  .dlm-backdrop, .sbil-pay-modal-backdrop, .sbil-receipt-overlay,
  .pcs-sheet-backdrop, .tg-modal-overlay, .fp-gate-backdrop,
  #page-login.active, #page-register.active {
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }
  /* زجاج «البطاقات» (كلفة بلا قيمة فوق خلفية كونية أصلاً) ⇒ إلغاء */
  :root[data-theme="pink"] .h-card, :root[data-theme="purple"] .h-card,
  .poster-status, .svc-badge, .streak-counter, .achievement-badge,
  .vid-ctrl-btn, .vid-top-btn, .nav-actions a[target="_blank"],
  .mf-badge, .wa-badge,
  #page-login.active a[target="_blank"], #page-register.active a[target="_blank"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* §5 هوفر مخفف: transform ≤ scale(1.02) + ظل واحد (بدل ظل ضخم + حلقة + شاين) */
  .poster-card:hover, .dash-poster-card:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4) !important;
  }
  :root[data-theme="light"] .poster-card:hover,
  :root[data-theme="light"] .dash-poster-card:hover { box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18) !important; }
  .poster-card:hover img, .poster-card:hover .poster-img-wrap img { transform: scale(1.02) !important; }
  /* لمعة الـ::after القطرية (أغلى رسم في البطاقة) تُلغى حتى ديسكتوباً —
     يبقى تظليل ::before الرقيق (رخيص: opacity فقط) */
  .poster-card::after { display: none !important; }
}

/* ═══ §5 الانتقالات: كل transition:all (~50 موضعاً) تُحصر في الخصائص الرخيصة
 *      بمدة قصوى 0.15s — على كل الأجهزة (مُثبت بـ grep: لا مستمع transitionend
 *      في أي JS). pay-share خارج النطاق (لا يحمّل هذا الملف). ══════════════ */
.top-nav .nav-btn, .bottom-nav .nav-item, .nav-icon-wrap, .nav-custom-icon,
.h-input, .h-btn, .category-header, .profile-menu-item,
.req-step, .req-step-num, .req-select-fancy, .poster-action-btn,
.vid-ctrl-btn, .vid-top-btn, .vid-speed-btn, .mini-player-btn, .vid-bookmark-item,
.dlm-back, .dlm-btn, .exss-opt, .mf-pill, .mf-chip,
.pcs-sheet-back, .pcs-sheet-x, .pcs-paytype-opt, .pcs-method-opt, .pcs-cta,
.rh-back-btn, .rh-tile-arrow, .rh-chip,
.sbil-method-card, .sbil-pay-btn-large, .sbil-inst-pay-btn, .sbil-copy-btn,
.sbil-result-btn, .sbil-rt-badge, .sbil-receipt-btn, .sbil-receipt-close,
.sbil-receipt-foot button, .sbil-pickcard-tick,
.tg-link-banner-btn, .tg-copy-btn, .tg-secondary-actions button,
.wa-pill, .wa-chip,
#page-login a[target="_blank"], #page-register a[target="_blank"] {
  transition-property: background-color, color, border-color, opacity, transform !important;
  transition-duration: 0.15s !important;
}

/* ═══ §7 القوائم الطويلة: المتصفح يرسم الظاهر فقط ═══════════════════════ */
.course-card { content-visibility: auto; contain-intrinsic-size: auto 112px; }
.drawer-item { content-visibility: auto; contain-intrinsic-size: auto 52px; }
.vid-bookmark-item { content-visibility: auto; contain-intrinsic-size: auto 48px; }
.peer-race-card { content-visibility: auto; contain-intrinsic-size: auto 150px; }

/* ═══ §8 perf-lite (جهاز ضعيف — حتى لو ديسكتوب) + prefers-reduced-motion ═══
 *  html.perf-lite يفعّله سكربت inline في <head> عند deviceMemory≤4 أو
 *  hardwareConcurrency≤4 أو saveData. ════════════════════════════════════ */
html.perf-lite *, html.perf-lite *::before, html.perf-lite *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.perf-lite .top-nav, html.perf-lite .bottom-nav, html.perf-lite .h-modal {
  background: rgba(13, 17, 28, 0.97) !important;
}
html.perf-lite[data-theme="purple"] .top-nav, html.perf-lite[data-theme="purple"] .bottom-nav,
html.perf-lite[data-theme="purple"] .h-modal { background: rgba(18, 12, 38, 0.96) !important; }
html.perf-lite[data-theme="pink"] .top-nav, html.perf-lite[data-theme="pink"] .bottom-nav,
html.perf-lite[data-theme="pink"] .h-modal { background: rgba(30, 15, 24, 0.96) !important; }
html.perf-lite[data-theme="light"] .top-nav, html.perf-lite[data-theme="light"] .bottom-nav,
html.perf-lite[data-theme="light"] .h-modal { background: rgba(250, 251, 253, 0.97) !important; }
html.perf-lite .login-gradient-bg,
html.perf-lite .nav-icon-request .nav-custom-icon,
html.perf-lite .nav-icon-request::before,
html.perf-lite .tg-particle, html.perf-lite .tg-logo-wrap, html.perf-lite .tg-logo-glow,
html.perf-lite .tg-open-btn, html.perf-lite .tg-success-ring,
html.perf-lite .cine-cosmos, html.perf-lite .cine-stars, html.perf-lite .cine-stars::after,
html.perf-lite .cine-aurora, html.perf-lite .cine-aurora::before, html.perf-lite .cine-aurora::after,
html.perf-lite .skeleton, html.perf-lite .poster-skeleton,
html.perf-lite .h-skel-row, html.perf-lite .h-skel-16x9 { animation: none !important; }
html.perf-lite .poster-card::before, html.perf-lite .poster-card::after { display: none !important; }
html.perf-lite .poster-card, html.perf-lite .dash-poster-card { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;          /* (مراجعة عدائية) بدون تصفير التأخير تبقى بطاقات stagger مخفية ثم «تفقع» تباعاً */
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* (مراجعة عدائية) قواعد الديسكتوب أعلاه (.page/.stagger-card بخصوصية 0,1,0)
     كانت تتغلب على القاعدة العامة (*) — نعيد فرض التسطيح بخصوصية مكافئة */
  .page, .page.slide-left, .page.slide-right, .page.slide-up, .stagger-card {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
  }
  /* السبينرات تبقى تدور — مؤشر تحميل وظيفي لا زخرفة */
  .spinner::after, .sbil-spinner, .pcs-spinner, .fa-spin, .fa-pulse {
    animation-duration: 0.8s !important;
    animation-iteration-count: infinite !important;
  }
  /* (مراجعة عدائية) نقاط «جاري التحقق من الدفع» مؤشر وظيفي — تبقى بتوقيتها الأصلي */
  .sbil-pending-dots span {
    animation-duration: 1.4s !important;
    animation-iteration-count: infinite !important;
  }
}

/* ═══ §9 أدوات ═══════════════════════════════════════════════════════════ */
/* هيكل صف درس (يستعمله openPlaylist) + هيكل فيديو 16:9 (يستعمله openVideo) */
.h-skel-row {
  height: 84px; border-radius: 14px; margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.05) 75%);
  background-size: 200% 100%;
  animation: hSkelShimmer 1.4s linear infinite;
}
.h-skel-16x9 {
  aspect-ratio: 16 / 9; border-radius: 12px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.04) 75%);
  background-size: 200% 100%;
  animation: hSkelShimmer 1.4s linear infinite;
}
:root[data-theme="light"] .h-skel-row,
:root[data-theme="light"] .h-skel-16x9 {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.06) 25%, rgba(15, 23, 42, 0.12) 50%, rgba(15, 23, 42, 0.06) 75%);
  background-size: 200% 100%;
}
@keyframes hSkelShimmer { to { background-position: -200% 0; } }

/* سهم العودة للواجهة على شعار «حمدان» (navTitle) — محسوس أكثر (المهمة ٢/د).
   ⚠️ المحرف "‹" (U+2039) من فئة Bidi_Mirrored: تحت dir=rtl يُرسم «›» يشير
   يميناً (اتجاه العودة الصحيح). لا «تُصلحه» إلى "›" وإلا انعكس وصار خاطئاً. */
.top-nav .nav-title::after {
  content: "‹";
  font-size: 1.05em;
  opacity: 0.55;
  margin-inline-start: 2px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  /* +3px = يمين (الـ transform لا ينعكس مع direction) — نفس اتجاه إشارة السهم المرسوم */
  .top-nav .nav-title:hover::after { opacity: 1; transform: translateX(3px); }
}