/* =====================================================================
   ux-delight.css — طبقة تجربة بصرية للمعلم المشترك
   • بولش بطاقات (رفع + ظل ملوّن) + Ripple على الأزرار
   • Skeleton loaders + إشعارات نجمة + حالات فارغة تحفيزية
   • حركات كلها 200–250ms (نظام cmp)
   • يُحمَّل بعد premium-theme + ui-dialogs ليعلوها بلطف
   ===================================================================== */

:root {
  --uxd-brand: #D46E2A;
  --uxd-brand-rgb: 212, 110, 42;
  --uxd-ease: cubic-bezier(.2, .8, .2, 1);
  --uxd-shadow-hover: 0 10px 30px rgba(var(--uxd-brand-rgb), .18), 0 2px 8px rgba(0, 0, 0, .06);
}

/* ============ 1) بولش البطاقات: رفع + ظل دافئ ============ */
/* بلا will-change: transform — يجعل البطاقة حاوياً لأي مودال fixed بداخلها
   فيُحبس خلف الـbackdrop وتبدو النافذة «مفتوحة غير نشطة» */
.card,
.uxd-card {
  transition: transform .22s var(--uxd-ease),
              box-shadow .22s var(--uxd-ease),
              border-color .22s var(--uxd-ease);
}

/* لا نطبّق التحويم على البطاقات الموسّعة/الجداول/المودالات،
   ولا على بطاقة بداخلها مودال مفتوح (الـtransform يكسر تموضعه الثابت) */
.card:not(.no-hover):not(.card-plain):not(:has(.modal.show)):hover,
.uxd-card:not(:has(.modal.show)):hover {
  transform: translateY(-3px);
  box-shadow: var(--uxd-shadow-hover);
}

/* بطاقة بداخلها مودال مفتوح: تصفير فوري للتحويل (بلا transition عليه)
   كي لا تصبح البطاقة حاوياً للنافذة الثابتة ولو للحظة */
.card:has(.modal.show),
.uxd-card:has(.modal.show) {
  transform: none !important;
  transition-property: box-shadow, border-color;
}

/* بطاقات قابلة للنقر — مؤشر بصري صريح */
.uxd-clickable {
  cursor: pointer;
  position: relative;
}
.uxd-clickable::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  transition: border-color .22s var(--uxd-ease);
  pointer-events: none;
}
.uxd-clickable:hover::after {
  border-color: rgba(var(--uxd-brand-rgb), .35);
}

/* ============ 2) Ripple على الأزرار (خفيف) ============ */
.btn,
.uxd-ripple {
  position: relative;
  overflow: hidden;
}
.uxd-ripple-ink {
  position: absolute;
  border-radius: 50%;
  background: rgba(var(--uxd-brand-rgb), .28);
  transform: scale(0);
  animation: uxd-ripple .55s var(--uxd-ease);
  pointer-events: none;
}
.btn-primary .uxd-ripple-ink,
.btn-brand .uxd-ripple-ink {
  background: rgba(255, 255, 255, .45);
}
@keyframes uxd-ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* ============ 3) Skeleton Loaders ============ */
.uxd-skel {
  display: block;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, .06) 0%,
    rgba(0, 0, 0, .12) 50%,
    rgba(0, 0, 0, .06) 100%);
  background-size: 200% 100%;
  animation: uxd-skel-shine 1.4s linear infinite;
  border-radius: .5rem;
  min-height: 1rem;
}
html.dark-style .uxd-skel {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0%,
    rgba(255, 255, 255, .12) 50%,
    rgba(255, 255, 255, .05) 100%);
  background-size: 200% 100%;
}
.uxd-skel--title  { height: 1.5rem; width: 60%; }
.uxd-skel--line   { height: .9rem; margin-top: .6rem; }
.uxd-skel--line.short { width: 40%; }
.uxd-skel--avatar { width: 44px; height: 44px; border-radius: 50%; }
.uxd-skel--card   { height: 140px; border-radius: .75rem; }
@keyframes uxd-skel-shine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============ 4) توستات نجمة (تحسين شكلي، بلا كسر flash-toasts) ============ */
#toast-container > .toast {
  border-inline-start: 4px solid var(--uxd-brand);
  border-radius: .75rem !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14) !important;
  opacity: .98 !important;
  transition: transform .25s var(--uxd-ease), opacity .25s var(--uxd-ease);
}
#toast-container > .toast-success { border-inline-start-color: #10B981; }
#toast-container > .toast-error   { border-inline-start-color: #EF4444; }
#toast-container > .toast-warning { border-inline-start-color: #F59E0B; }
#toast-container > .toast-info    { border-inline-start-color: #3B82F6; }
#toast-container > .toast:hover { transform: translateY(-2px); }

/* ============ 5) الحالات الفارغة التحفيزية ============ */
.uxd-empty {
  text-align: center;
  padding: 3.5rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(180deg,
    rgba(var(--uxd-brand-rgb), .04) 0%,
    rgba(var(--uxd-brand-rgb), 0) 100%);
  border: 1px dashed rgba(var(--uxd-brand-rgb), .25);
  animation: uxd-fade-up .35s var(--uxd-ease);
}
.uxd-empty__icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 96px; height: 96px;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: rgba(var(--uxd-brand-rgb), .12);
  color: var(--uxd-brand);
  font-size: 3rem;
  animation: uxd-float 3s ease-in-out infinite;
}
.uxd-empty__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: inherit;
}
.uxd-empty__desc {
  color: rgba(0, 0, 0, .6);
  margin-bottom: 1.5rem;
  max-width: 480px;
  margin-inline: auto;
  line-height: 1.7;
}
html.dark-style .uxd-empty__desc { color: rgba(255, 255, 255, .65); }

@keyframes uxd-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes uxd-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ 6) Confetti (طبقة رسم أعلى الصفحة) ============ */
.uxd-confetti-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 2000;
  overflow: hidden;
}
.uxd-confetti-piece {
  position: absolute; top: -10px;
  width: 8px; height: 14px;
  border-radius: 2px;
  opacity: .95;
  animation: uxd-confetti-fall linear forwards;
}
@keyframes uxd-confetti-fall {
  0%   { transform: translateY(-10px) rotate(0);   opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* ============ 7) Micro-interactions إضافية ============ */
/* أزرار البراند: تلمّع خفيف عند التحويم */
.btn-primary,
.btn-brand {
  position: relative;
  isolation: isolate;
}
.btn-primary::before,
.btn-brand::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .55s var(--uxd-ease);
  pointer-events: none;
  z-index: -1;
}
.btn-primary:hover::before,
.btn-brand:hover::before {
  transform: translateX(100%);
}

/* روابط شريط التنقّل: نبضة ألطف عند التحويم */
.menu-link {
  transition: background .22s var(--uxd-ease), color .22s var(--uxd-ease);
}

/* أداة استجابة: التفاف طبيعي على الجوال ومنع الالتفاف من md فأعلى.
   Bootstrap لا توفّر text-md-nowrap — تُستخدم لعناوين البنود الطويلة. */
@media (min-width: 768px) {
  .text-md-nowrap { white-space: nowrap !important; }
}

/* احترام تفضيل الحركة المخفّضة (accessibility) */
@media (prefers-reduced-motion: reduce) {
  .card, .uxd-card, .uxd-empty__icon,
  .btn-primary::before, .btn-brand::before,
  .uxd-skel, .uxd-confetti-piece {
    animation: none !important;
    transition: none !important;
  }
  .card:hover, .uxd-card:hover { transform: none !important; }
}