/* ================================================
 * mobile_fixes.css — منصة عبقر (إضافات إصلاح الجوال)
 * ================================================
 * أضف هذا الملف بعد styles.css مباشرة في index.html:
 * <link rel="stylesheet" href="css/mobile_fixes.css">
 *
 * أو الصق هذا الكود في نهاية ملف styles.css الحالي.
 * ================================================ */

/* ====================================================
   إصلاح #1: White Space Issue
   المشكلة: scrollTo لا يكفي وحده أحياناً لأن html/body
   لا يملكان height محددة فيتمدد المحتوى تحت الشاشة
   ==================================================== */

html, body {
    /* نمنع الـ scroll على مستوى html/body ونتحكم فيه عبر JS */
    scroll-behavior: auto !important; /* نُلغي الـ smooth scroll لأنه يسبب تأخيراً */
    overscroll-behavior: none;
}

/* كل الصفحات المخفية يجب أن تكون خارج تدفق الصفحة تماماً */
.page[style*="display: none"],
.page:not([style*="display: flex"]) {
    /* نضمن عدم مساهمة الصفحات المخفية في ارتفاع الصفحة */
    position: absolute;
    pointer-events: none;
}

/* الصفحة الظاهرة تأخذ العرض الكامل */
.page[style*="display: flex"] {
    position: relative;
    min-height: 100dvh; /* dvh = dynamic viewport height (يعالج مشكلة شريط iOS) */
    width: 100%;
}

/* ====================================================
   إصلاح #3: Mobile UX — مشاكل عامة
   ==================================================== */

/* تكبير أهداف النقر على الجوال (min 44px كما توصي Apple/Google) */
@media (max-width: 768px) {
    /* أزرار العودة والتنقل */
    .btn-back,
    .btn-close-iframe,
    #btn-open-sidebar,
    #theme-toggle,
    #fullscreen-toggle {
        min-width: 44px;
        min-height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* تحسين حجم النص في البطاقات على الجوال */
    .app-card h2 {
        font-size: 1.1rem !important;
    }
    .app-card p {
        font-size: 0.8rem !important;
    }

    /* إصلاح المسافة العلوية في صفحات الأقسام على الجوال */
    #page-tools,
    #page-competitions,
    #page-games {
        padding-top: 80px !important; /* مسافة من الأزرار العائمة */
    }

    /* إصلاح: منع overflow أفقي */
    .container {
        overflow-x: hidden;
    }

    /* تحسين الشبكة على الجوال */
    main.grid {
        gap: 0.75rem !important;
    }

    /* تحسين حجم البطاقات على الجوال */
    .app-card {
        min-height: 80px;
    }

    /* إصلاح القائمة الجانبية على الجوال */
    #sidebar-menu {
        /* ضمان عرض مناسب على الجوال */
        max-width: 85vw;
    }

    /* تحسين النوافذ المنبثقة على الجوال */
    .fixed.inset-0 > div:not(.absolute) {
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* إصلاح safe area لأجهزة iPhone (notch) */
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* الأزرار العائمة تحترم safe area */
    #btn-open-sidebar {
        top: calc(1.5rem + env(safe-area-inset-top)) !important;
    }
    #theme-toggle {
        bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
    }
    #fullscreen-toggle {
        bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
    }

    /* تحسين نافذة تأكيد الخروج على الجوال */
    #exit-confirm-modal .relative {
        margin: 1rem;
        width: calc(100% - 2rem);
    }

    /* تحسين iframe على الجوال */
    .page-iframe-container {
        /* نمنع أي padding يسبب مساحات بيضاء */
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* نجعل حاوية التطبيق تملأ الشاشة بالكامل فقط عندما تكون مفعلة لتجنب إخفاء الموقع */
    .page-iframe-container[style*="display: flex"] {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        z-index: 99999;
        background-color: #000;
    }
    
    .page-iframe-container main {
        height: 100dvh;
    }
    .page-iframe-container iframe {
        height: 100dvh;
    }
}

/* ====================================================
   إصلاح إضافي: زر الرجوع في الهيدر على الجوال
   يُحسّن قابلية الاستخدام
   ==================================================== */
@media (max-width: 640px) {
    /* جعل زر الرجوع أكثر وضوحاً */
    .btn-back {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
        border-radius: 0.75rem !important;
    }

    /* تصغير العنوان في صفحات الأقسام لتلائم الشاشة الصغيرة */
    header h2 {
        font-size: 1.1rem !important;
    }

    /* إصلاح Bento Grid على الشاشات الصغيرة جداً */
    #page-welcome main.grid {
        grid-template-columns: 1fr !important;
    }

    /* تقليل حجم أيقونة المعلومات العلوية */
    .fixed.top-6.left-6 img {
        width: 3rem !important;
        height: 3rem !important;
    }
}

/* ====================================================
   إصلاح: Dark mode على أجهزة iOS
   بعض أجهزة iOS تتجاهل متغيرات CSS في الـ iframe
   ==================================================== */
@supports (-webkit-touch-callout: none) {
    /* خاص بأجهزة iOS */
    .page-iframe-container iframe {
        height: -webkit-fill-available;
    }
}