/* ═══════════════════════════════════════════════════════════════
   مجمع الحسين — انيميشن عصري مبسّط v3.0
   Modern Animations — Clean · Fast · Accessible
   ═══════════════════════════════════════════════════════════════ */

/* ════════ Easing Variables ════════ */
:root {
    --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-decel:  cubic-bezier(0.05, 0.7, 0.1, 1.0);
}

/* ════════════════════════════════════════════════════════════════
   KEYFRAMES الأساسية — موحّدة ومبسّطة
   ════════════════════════════════════════════════════════════════ */

/* دخول أساسي — fade + slide up */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* دخول البطاقات */
@keyframes cardEnter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* دخول النوافذ المنبثقة */
@keyframes modalEnter {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* دخول الإشعارات */
@keyframes toastEnter {
    from { opacity: 0; transform: translateY(16px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* دخول القوائم المنسدلة */
@keyframes dropDown {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ظهور بتكبير */
@keyframes popIn {
    0%   { opacity: 0; transform: scale(0.85) translateY(16px); }
    65%  { transform: scale(1.02) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* هز على الخطأ */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-7px); }
    35%      { transform: translateX(7px); }
    55%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

/* نبضة ناعمة */
@keyframes softPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* توهج نابض للشارة */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50%      { box-shadow: 0 0 10px rgba(74,222,128,0.2); }
}

/* تحريك الهيكل العظمي */
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* لمعان متحرك */
@keyframes shine {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* دوران */
@keyframes spinRound {
    to { transform: rotate(360deg); }
}

/* تعويم ناعم */
@keyframes floatSoft {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-15px, 10px); }
}

/* حركة خلفية الدخول */
@keyframes ambientBg {
    0%   { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-4%, -2%) rotate(2deg); }
}


/* ════════════════════════════════════════════════════════════════
   SPINNER — عصري وأنيق
   ════════════════════════════════════════════════════════════════ */

.app-loading-spinner {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(212,175,55,0.12) !important;
    border-top-color: #d4af37 !important;
    border-right-color: rgba(212,175,55,0.4) !important;
    box-shadow: none !important;
    animation: spinRound 0.65s var(--ease-in-out) infinite !important;
}

.loading-spinner .spinner-icon {
    border: 3px solid rgba(212,175,55,0.12) !important;
    border-top-color: #d4af37 !important;
    border-right-color: rgba(212,175,55,0.4) !important;
    box-shadow: none !important;
    animation: spinRound 0.65s var(--ease-in-out) infinite !important;
}

.loading-spinner .spinner-text,
.app-loading-text {
    animation: softPulse 1.8s ease-in-out infinite !important;
}

/* أيقونات الدوران */
.icon-spin {
    animation: spinRound 0.75s linear infinite !important;
}

.att-loc-btn.loading i,
.att-refresh-btn.spinning i {
    animation: spinRound 0.75s linear infinite !important;
}


/* ════════════════════════════════════════════════════════════════
   SKELETON — هيكل تحميل
   ════════════════════════════════════════════════════════════════ */

.skeleton-bar {
    background: linear-gradient(
        90deg,
        rgba(226,232,240,0.5) 0%,
        rgba(248,250,252,0.95) 40%,
        rgba(226,232,240,0.5) 100%
    ) !important;
    background-size: 300% 100% !important;
    animation: shimmer 1.6s ease-in-out infinite !important;
}

[data-theme="dark"] .skeleton-bar {
    background: linear-gradient(
        90deg,
        rgba(42,52,68,0.5) 0%,
        rgba(65,78,102,0.9) 40%,
        rgba(42,52,68,0.5) 100%
    ) !important;
    background-size: 300% 100% !important;
}


/* ════════════════════════════════════════════════════════════════
   PAGE TRANSITIONS — انتقالات الصفحة
   ════════════════════════════════════════════════════════════════ */

.page-section.active {
    animation: fadeUp 0.28s var(--ease-out) both !important;
}


/* ════════════════════════════════════════════════════════════════
   MODAL — نافذة منبثقة
   ════════════════════════════════════════════════════════════════ */

.modal-content,
.form-content {
    animation: modalEnter 0.26s var(--ease-out) both !important;
}


/* ════════════════════════════════════════════════════════════════
   TOAST — إشعار
   ════════════════════════════════════════════════════════════════ */

.toast {
    animation: toastEnter 0.28s var(--ease-spring) both !important;
}


/* ════════════════════════════════════════════════════════════════
   DROPDOWN — قائمة منسدلة
   ════════════════════════════════════════════════════════════════ */

.fancy-dropdown-menu {
    animation: dropDown 0.2s var(--ease-out) both !important;
}


/* ════════════════════════════════════════════════════════════════
   CARD REVEAL — ظهور البطاقات مع تأخير متدرج
   ════════════════════════════════════════════════════════════════ */

.page-section.active .card,
.page-section.active .stat-card,
.page-section.active .qab,
.page-section.active .dash-extra-card,
.page-section.active .wh-card,
.page-section.active .warehouse-section,
.page-section.active .att-glass-card,
.page-section.active .list-item,
.page-section.active .form-card,
.page-section.active .info-card,
.page-section.active .alert-card {
    animation: cardEnter 0.3s var(--ease-out) both;
}

/* تأخير متدرج بـ :is() مبسّط */
.page-section.active :is(.card, .stat-card, .qab, .wh-card, .warehouse-section,
  .att-glass-card, .list-item, .dash-extra-card, .form-card, .info-card, .alert-card):nth-child(1)
    { animation-delay: 0.03s; }
.page-section.active :is(.card, .stat-card, .qab, .wh-card, .warehouse-section,
  .att-glass-card, .list-item, .dash-extra-card, .form-card, .info-card, .alert-card):nth-child(2)
    { animation-delay: 0.07s; }
.page-section.active :is(.card, .stat-card, .qab, .wh-card, .warehouse-section,
  .att-glass-card, .list-item, .dash-extra-card, .form-card, .info-card, .alert-card):nth-child(3)
    { animation-delay: 0.11s; }
.page-section.active :is(.card, .stat-card, .qab, .wh-card, .warehouse-section,
  .att-glass-card, .list-item, .dash-extra-card, .form-card, .info-card, .alert-card):nth-child(4)
    { animation-delay: 0.14s; }
.page-section.active :is(.card, .stat-card, .qab, .wh-card, .warehouse-section,
  .att-glass-card, .list-item, .dash-extra-card, .form-card, .info-card, .alert-card):nth-child(5)
    { animation-delay: 0.17s; }
.page-section.active :is(.card, .stat-card, .qab, .wh-card, .warehouse-section,
  .att-glass-card, .list-item, .dash-extra-card, .form-card, .info-card, .alert-card):nth-child(6)
    { animation-delay: 0.20s; }


/* ════════════════════════════════════════════════════════════════
   SHAKE — اهتزاز عند الخطأ
   ════════════════════════════════════════════════════════════════ */

.att-shake {
    animation: shake 0.4s var(--ease-out) !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.2) !important;
}


/* ════════════════════════════════════════════════════════════════
   POP IN — ظهور انبثاقي
   ════════════════════════════════════════════════════════════════ */

/* يُستخدم عبر JS بإضافة كلاس pop-in */
.pop-in {
    animation: popIn 0.35s var(--ease-spring) both;
}

/* تطبيق attPopIn على نفس التأثير */
@keyframes attPopIn {
    0%   { opacity: 0; transform: scale(0.85) translateY(16px); }
    65%  { transform: scale(1.02) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}


/* ════════════════════════════════════════════════════════════════
   LIVE BADGE — شارة البث المباشر
   ════════════════════════════════════════════════════════════════ */

.live-badge {
    animation: glowPulse 2.5s ease-in-out infinite !important;
}


/* ════════════════════════════════════════════════════════════════
   SHINE EFFECTS — اللمعان المتحرك
   ════════════════════════════════════════════════════════════════ */

.nav-tab.active::before {
    animation: shine 4s ease-in-out infinite !important;
}

.list-summary::before {
    animation: shine 4.5s ease-in-out infinite !important;
}

/* لمعان الفاوتشر */
@keyframes voucherShine {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ════════════════════════════════════════════════════════════════
   STAT CARD GLOW — توهج بطاقات الإحصائية
   ════════════════════════════════════════════════════════════════ */

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


/* ════════════════════════════════════════════════════════════════
   BANNER FLOAT — تعويم البانر
   ════════════════════════════════════════════════════════════════ */

.att-live-banner::after {
    animation: floatSoft 7s ease-in-out infinite alternate !important;
}


/* ════════════════════════════════════════════════════════════════
   LOGIN AMBIENT — خلفية صفحة الدخول
   ════════════════════════════════════════════════════════════════ */

#loginScreen::before {
    animation: ambientBg 20s ease-in-out infinite alternate !important;
}


/* ════════════════════════════════════════════════════════════════
   HOVER — تفاعلات موحّدة
   ════════════════════════════════════════════════════════════════ */

/* رفع موحد للبطاقات */
.stat-card:hover        { transform: translateY(-4px) !important; }
.card:hover             { transform: translateY(-3px) !important; }
.qab:hover              { transform: translateY(-4px) !important; }
.dash-extra-card:hover  { transform: translateY(-3px) !important; }
.user-card:hover        { transform: translateY(-3px) !important; }
.att-emp-card:hover     { transform: translateY(-3px) !important; }
.list-item:hover        { transform: translateX(-4px) !important; }
.result-card:hover      { transform: translateX(-5px) !important; }

/* ضغط الأزرار */
.submit-btn:active,
.att-reg-btn:active,
.qab:active,
#loginBtn:active {
    transform: scale(0.97) !important;
    transition-duration: 0.1s !important;
}

/* أيقونات البطاقات عند الـ hover */
.card:hover .card-title i,
.card:hover .card-title svg {
    transform: scale(1.12) rotate(-4deg) !important;
    transition: transform 0.3s var(--ease-spring) !important;
}

.dash-extra-card:hover .dash-extra-icon,
.qab:hover .qab-icon {
    transform: scale(1.1) rotate(-6deg) !important;
    transition: transform 0.3s var(--ease-spring) !important;
}


/* ════════════════════════════════════════════════════════════════
   MOBILE — إلغاء تأثيرات الرفع على الشاشات الصغيرة
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .stat-card:hover,
    .card:hover,
    .qab:hover,
    .dash-extra-card:hover,
    .list-item:hover,
    .user-card:hover,
    .att-emp-card:hover,
    .result-card:hover {
        transform: none !important;
    }

    /* ضغط بديلاً عن الرفع */
    .stat-card:active { transform: scale(0.97) !important; }
    .qab:active       { transform: scale(0.97) !important; }
    .card:active      { transform: scale(0.98) !important; }
}


/* ════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION — إمكانية الوصول
   ════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.15ms !important;
        scroll-behavior: auto !important;
    }
}