/* ================================================
 * styles.css — منصة عبقر
 * ================================================
 * الأنماط الرئيسية للمنصة
 * تم فصلها من index.html لتحسين التنظيم والصيانة
 * ================================================ */

/* تعريف الخط المخصص الجديد (AA-GALAXY) */
@font-face {
    font-family: 'AAGalaxy';
    src: url('../fonts/AA-GALAXY.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* تطبيق الخط المخصص على كامل الصفحة */
body {
    font-family: 'Tajawal', sans-serif;
    font-weight: 400; /* وزن خفيف للنصوص */
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

/* تحسين التباين في العناوين */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800; /* وزن عريض جداً للعناوين */
    letter-spacing: -0.025em; /* تباعد أحرف أضيق قليلاً للمظهر العصري */
}

/* إخفاء شريط التمرير (Scrollbar) */
::-webkit-scrollbar {
    display: none;
}
html {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    overscroll-behavior-y: none;
}

/* 4. إعداد الصفحات للانتقال الناعم (Fade Transition) */
.page {
    display: none; /* إخفاء كل الصفحات افتراضياً */
    flex-direction: column;
    opacity: 0; /* البدء بشفافية كاملة */
    transition: opacity 0.3s ease-out; /* تحديد مدة وسلاسة الانتقال */
}

/* 5. إضافة أنيميشن للتدرج اللوني للعنوان (تم نقله إلى tailwind.config) */
/* .gradient-animate ... */

/* كلاس لإخفاء العناصر */
.hidden {
    display: none;
}

/* (جديد) كلاس لصفحات التطبيق المدمج (iframe) */
.page-iframe-container {
    padding: 0 !important; 
    overflow: hidden; /* إخفاء أي scrollbars */
}

/* (جديد) إصلاح نهائي لـ iframe ليملأ الشاشة */
.page-iframe-container main {
    position: relative;
    flex: 1 1 0%; /* السماح بالتمدد */
}
.page-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* (جديد) إخفاء أيقونات المفضلة (النجمة) افتراضياً */
.favorite-btn {
    display: none;
}
/* (جديد) إظهار النجوم فقط للمستخدمين المسجلين (يتم التحكم به عبر JS) */
.user-logged-in .favorite-btn {
    display: flex; /* أو 'block' حسب الحاجة */
}

/* (جديد) تنسيق النجمة الممتلئة */
.favorite-btn.favorited {
    color: #facc15; /* لون النجمة الممتلئة (أصفر) */
}


/* --- (جديد) خلفية متدرجة دوارة --- */
.animated-gradient-background {
    position: relative;
    z-index: 0; /* (إصلاح) إنشاء سياق تكديس جديد لمنع اختفاء الخلفية في وضع ملئ الشاشة */
    /* (إصلاح) تم حذف height: 100vh و overflow: hidden للسماح بالـ scroll */
}

.animated-gradient-background::before,
.animated-gradient-background::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        #caf3ff,
        #ffe1cc
    );
    z-index: -1;
    pointer-events: none; 
}

/* --- الوضع الداكن --- */
.dark .animated-gradient-background {
    /* (تعديل) خلفية داكنة جداً كأساس */
    background: #020617; /* slate-950 */
}

.dark .animated-gradient-background::before,
.dark .animated-gradient-background::after {
     background: linear-gradient(
        to bottom,
        #172554,
        #020617
    );
    opacity: 1;
    filter: none;
}

/* (جديد) إصلاح لـ z-index للأزرار العائمة لتكون فوق الخلفية */
#btn-open-sidebar, #theme-toggle {
    position: fixed;
    z-index: 50; /* التأكد من أنها فوق الخلفية */
}

/* (إصلاح) تم نقل تعريفات الحركة هنا لتعمل بشكل صحيح */
@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes rotate-reverse {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

/* 6. (محسّن) أنيميشن الانتقال الناعم بين الوضع الليلي والنهاري */
/* نطبقه فقط على العناصر المحتاجة بدل body * لتحسين الأداء */
body,
.app-card,
.animated-gradient-background,
.animated-gradient-background::before,
.animated-gradient-background::after,
#sidebar-menu,
#sidebar-overlay,
#theme-toggle,
#fullscreen-toggle,
#btn-open-sidebar,
nav button,
footer,
.app-card-body h3,
.app-card-body p {
    transition-property: background-color, border-color, color, fill, stroke, box-shadow;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
}

/* استثناء هام: القائمة الجانبية لها أنيميشن transform خاص */
#sidebar-menu, .transform, .transition-transform {
    transition-property: transform, background-color, border-color, color;
}
/* رفع البطاقات والأزرار فوق الخلفية وتطبيق تأثير الزجاج */
.app-card, 
#btn-tools, 
#btn-competitions, 
#btn-games {
position: relative; /* ضروري لعمل الـ z-index */
z-index: 10;        /* رقم أعلى من الخلفية */
cursor: pointer;

/* تأثير الزجاج (Glassmorphism) - عودة للأبيض للوضوح */
background: rgba(255, 255, 255, 0.85); /* أبيض شبه شفاف */
backdrop-filter: blur(12px); /* تمويه الخلفية */
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.6); /* حدود مضيئة */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* ظل ناعم */

/* التفاعل والحركة */
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
            box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            background-color 0.3s ease,
            opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* (جديد) تخصيص ألوان البطاقات حسب الطلب (الوضع الفاتح) مع حدود بنفسجية فخمة */
#btn-competitions {
background: #F0FDF4 !important; /* نعناعي فاتح */
border: 1px solid rgba(76, 29, 149, 0.4) !important; /* بنفسجي غامق أرق وأكثر شفافية */
}

#btn-tools {
background: #F0F6FF !important; /* أزرق فاتح */
border: 1px solid rgba(76, 29, 149, 0.4) !important; /* بنفسجي غامق أرق وأكثر شفافية */
}

#btn-games {
background: #FFF5F5 !important; /* وردي فاتح */
border: 1px solid rgba(76, 29, 149, 0.4) !important; /* بنفسجي غامق أرق وأكثر شفافية */
}

/* تأثير الوضع الليلي للبطاقات */
.dark .app-card, 
.dark #btn-tools, 
.dark #btn-competitions, 
.dark #btn-games {
background: rgba(30, 41, 59, 0.85) !important; /* slate-800 with high opacity - إعادة توحيد اللون في الوضع الداكن */
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* تأثير التحويم (Hover) - تكبير وإضاءة */
.app-card:hover, 
#btn-tools:hover, 
#btn-competitions:hover, 
#btn-games:hover {
transform: translateY(-5px) scale(1.02); /* رفع وتكبير طفيف */
border-color: rgba(76, 29, 149, 0.8) !important; /* تزداد سماكة/وضوح اللون عند التحويم فقط */
box-shadow: 0 20px 25px -5px rgba(76, 29, 149, 0.2), 0 10px 10px -5px rgba(76, 29, 149, 0.1); /* ظل بنفسجي خفيف */
}

.dark .app-card:hover, 
.dark #btn-tools:hover, 
.dark #btn-competitions:hover, 
.dark #btn-games:hover {
background: rgba(39, 39, 42, 0.8);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

/* شارة عدد المسابقات في بطاقة المنصة الرئيسية */
.hero-count-badge {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hero-count-badge--competitions {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.38);
    color: #047857;
}
.dark .hero-count-badge--competitions {
    background: rgba(52, 211, 153, 0.16);
    border-color: rgba(52, 211, 153, 0.45);
    color: #6ee7b7;
}
.hero-count-badge--tools {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.38);
    color: #1d4ed8;
}
.dark .hero-count-badge--tools {
    background: rgba(96, 165, 250, 0.16);
    border-color: rgba(96, 165, 250, 0.45);
    color: #93c5fd;
}
.hero-count-badge--games {
    background: rgba(225, 29, 72, 0.14);
    border: 1px solid rgba(225, 29, 72, 0.36);
    color: #be123c;
}
.dark .hero-count-badge--games {
    background: rgba(244, 114, 182, 0.16);
    border-color: rgba(244, 114, 182, 0.45);
    color: #f9a8d4;
}

/* شريط الإحصائيات السريع */
.quick-stat-card {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.dark .quick-stat-card {
    background: rgba(39, 39, 42, 0.62);
    border-color: rgba(255, 255, 255, 0.08);
}

/* بطاقة "قريباً" بشكل أوضح */
@keyframes comingSoonPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.10); }
    50% { box-shadow: 0 0 0 8px rgba(139, 92, 246, 0.03); }
}
.coming-soon-card {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 2px dashed rgba(139, 92, 246, 0.35) !important;
    animation: comingSoonPulse 2.4s ease-in-out infinite;
}
.dark .coming-soon-card {
    background: rgba(39, 39, 42, 0.72) !important;
    border-color: rgba(167, 139, 250, 0.5) !important;
}
.coming-soon-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.65);
    border: 1px dashed rgba(139, 92, 246, 0.35);
}
.dark .coming-soon-icon-wrap {
    background: rgba(63,63,70,0.7);
    border-color: rgba(167, 139, 250, 0.5);
}

/* ================================================
 * الدفعة الأولى: تحسين واجهة البطاقات
 * ================================================ */
@keyframes cardAppear {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ظهور متدرج للبطاقات في صفحات الأقسام */
#tools-grid .app-card,
#competitions-grid .app-card,
#games-grid .app-card {
    opacity: 0;
    transform: translateY(18px);
    animation: cardAppear .42s ease-out forwards;
}

#tools-grid .app-card:nth-child(1),
#competitions-grid .app-card:nth-child(1),
#games-grid .app-card:nth-child(1) { animation-delay: 0s; }
#tools-grid .app-card:nth-child(2),
#competitions-grid .app-card:nth-child(2),
#games-grid .app-card:nth-child(2) { animation-delay: .08s; }
#tools-grid .app-card:nth-child(3),
#competitions-grid .app-card:nth-child(3),
#games-grid .app-card:nth-child(3) { animation-delay: .16s; }
#tools-grid .app-card:nth-child(4),
#competitions-grid .app-card:nth-child(4),
#games-grid .app-card:nth-child(4) { animation-delay: .24s; }
#tools-grid .app-card:nth-child(5),
#competitions-grid .app-card:nth-child(5),
#games-grid .app-card:nth-child(5) { animation-delay: .32s; }
#tools-grid .app-card:nth-child(6),
#competitions-grid .app-card:nth-child(6),
#games-grid .app-card:nth-child(6) { animation-delay: .40s; }

/* Overlay متدرج لتحسين قراءة النص */
#tools-grid .app-card .relative,
#competitions-grid .app-card .relative,
#games-grid .app-card .relative {
    overflow: hidden;
}
#tools-grid .app-card .relative::after,
#competitions-grid .app-card .relative::after,
#games-grid .app-card .relative::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.22) 0%, rgba(0,0,0,.02) 58%, transparent 100%);
    pointer-events: none;
    opacity: .9;
    transition: opacity .35s ease;
}

/* تكبير الصورة داخل البطاقة عند hover */
#tools-grid .app-card img,
#competitions-grid .app-card img,
#games-grid .app-card img {
    transition: transform .55s ease;
}
#tools-grid .app-card:hover img,
#competitions-grid .app-card:hover img,
#games-grid .app-card:hover img {
    transform: scale(1.08);
}
#tools-grid .app-card:hover .relative::after,
#competitions-grid .app-card:hover .relative::after,
#games-grid .app-card:hover .relative::after {
    opacity: 1;
}

/* زر الرجوع: ثابت وبتأثير زجاجي */
.btn-back {
    position: sticky;
    top: 20px;
    z-index: 30;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* (جديد) زر تسجيل الدخول النابض لجذب الانتباه */
@keyframes pulse-blue {
0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

#btn-sidebar-login {
animation: pulse-blue 2s infinite;
}

/* (جديد) إخفاء زر الخروج من التطبيقات وإظهاره عند التحويم */
.btn-close-iframe {
opacity: 1; /* ظاهر افتراضياً عند التحميل */
transition: opacity 0.5s ease-in-out, background-color 0.2s, transform 0.1s;
}

/* كلاس للإخفاء التلقائي */
.btn-close-iframe.fade-out {
opacity: 0;
}

/* يظهر دائماً عند التحويم */
.btn-close-iframe:hover {
opacity: 1 !important;
}

/* (جديد) نفس سلوك الإخفاء لزر ملئ الشاشة عند تفعيله في التطبيقات */
#fullscreen-toggle.fade-out-enabled {
transition: opacity 0.5s ease-in-out, transform 0.1s;
opacity: 1;
}
#fullscreen-toggle.fade-out-enabled.fade-out {
opacity: 0;
}
#fullscreen-toggle.fade-out-enabled:hover {
opacity: 1 !important;
}
/* زيادة مساحة النقر */
#fullscreen-toggle.fade-out-enabled::after {
content: '';
position: absolute;
top: -40px; left: -40px; right: -40px; bottom: -40px;
z-index: -1;
}

/* زيادة مساحة النقر/التحويم لزر الخروج ليسهل الوصول إليه */
.btn-close-iframe::after {
content: '';
position: absolute;
top: -10px;   /* تم تقليل المساحة لتصبح معقولة */
left: -10px;  /* تم تقليل المساحة */
right: -10px; /* تم تقليل المساحة */
bottom: -10px;/* تم تقليل المساحة */
z-index: -1;
}

/* (Mobile UX) منع الانتقال والوميض على الجوال */
@media (max-width: 768px) {
.page {
    transition: none !important;
}
}

/* ================================================
 * الدفعة الثالثة: تحسينات دقيقة (Micro-animations & Visuals)
 * ================================================ */

/* 4. تحسين بطاقات "قريباً" (Coming Soon) بشكل إضافي */
.coming-soon-card {
    overflow: hidden;
    position: relative;
}
.coming-soon-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: shimmer 3s infinite;
}
.dark .coming-soon-card::after {
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0) 100%);
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}