/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  loading-unified.css — نظام التحميل الموحّد للمنصة كاملة              ║
   ║  ──────────────────────────────────────────────────────────────────  ║
   ║  المصدر الوحيد لكل حالات "جاري التحميل" في المشروع.                  ║
   ║  يستبدل: نصوص خام متفرقة + resource-card--skeleton (31) +            ║
   ║          ftq-loading-skeleton (free-trial) + أي كلاس .loading عام.   ║
   ║  الاستخدام: أضف class="skel" أو [data-skel] على أي عنصر placeholder. ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ---------- 1) القاعدة الأساسية (نفس أنيميشن 70-dashboard-redesign) ---------- */
.skel,
[data-skel] {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 200% 100%;
  animation: skelShimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
  display: inline-block;
}

@keyframes skelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- 2) أشكال جاهزة (سطر / كتلة / صورة / دائرة) ---------- */
.skel-line {
  height: 14px;
  width: 100%;
  margin: 6px 0;
}
.skel-line--short  { width: 38%; }
.skel-line--medium { width: 68%; }
.skel-line--full   { width: 92%; }
.skel-line--thin   { height: 8px; }

.skel-block {
  width: 100%;
  height: 80px;
  border-radius: 12px;
}

.skel-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skel-card {
  width: 100%;
  min-height: 120px;
  border-radius: 14px;
}

/* تعطيل تدريجي staggered عشان الأسطر متطلعش كلها مع بعض بنفس التوقيت */
.skel-line:nth-child(1) { animation-delay: 0s; }
.skel-line:nth-child(2) { animation-delay: .08s; }
.skel-line:nth-child(3) { animation-delay: .16s; }
.skel-line:nth-child(4) { animation-delay: .24s; }

/* ---------- 3) توافق رجعي (Backward compatibility) ---------- */
/* عشان الكود القديم اللي بيستخدم أسامي قديمة يفضل شغال من غير ما نكسر حاجة،
   لحد ما نستبدلها بالكامل من الملفات القديمة */
.skeleton,
.nf16-skeleton,
[data-skeleton],
.resource-card--skeleton,
.card-image-wrap--skeleton,
.skeleton-line,
.ftq-loading-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.03) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skelShimmer 1.4s ease-in-out infinite !important;
  color: transparent !important;
}

/* ---------- 4) الوضع الفاتح ---------- */
body.light-mode .skel,
body.light-mode [data-skel],
body.light-mode .skel-line,
body.light-mode .skel-block,
body.light-mode .skel-avatar,
body.light-mode .skel-card {
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.04) 25%,
    rgba(0,0,0,0.09) 50%,
    rgba(0,0,0,0.04) 75%
  );
  background-size: 200% 100%;
}

/* ---------- 5) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  .skel, [data-skel], .skel-line, .skel-block, .skel-avatar, .skel-card,
  .skeleton, .nf16-skeleton, [data-skeleton], .resource-card--skeleton,
  .card-image-wrap--skeleton, .skeleton-line, .ftq-loading-skeleton {
    animation: none;
  }
}