/* ============================================================
   app-mobile.css — أساس الجوال والـ Safe Area (المرحلة 1)
   مبادئ:
   - لا يغيّر أي سلوك على سطح المكتب (كل القواعد داخل media queries أو classes صريحة)
   - يوفّر متغيرات Safe Area موحّدة لكل الصفحات
   - يُفعَّل تلقائيًا على الشاشات الصغيرة أو داخل تطبيق Capacitor
   ============================================================ */

:root {
    /* Safe Area — قيم افتراضية صفرية، تُملأ تلقائيًا على iOS */
    --sa-top: env(safe-area-inset-top, 0px);
    --sa-bottom: env(safe-area-inset-bottom, 0px);
    --sa-left: env(safe-area-inset-left, 0px);
    --sa-right: env(safe-area-inset-right, 0px);
}

/* عند العمل داخل تطبيق Capacitor (iOS) */
html.is-capacitor body {
    /* منع التمرير المطاطي الزائد خارج الحاويات المخصصة */
    overscroll-behavior-y: none;
    /* تحسين الاستجابة اللمسية */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* أدوات Safe Area الجاهزة — تُستخدم حيث يلزم فقط */
.sa-pad-top    { padding-top: calc(var(--sa-top)) !important; }
.sa-pad-bottom { padding-bottom: calc(var(--sa-bottom)) !important; }
.sa-pad-x      { padding-left: var(--sa-left) !important; padding-right: var(--sa-right) !important; }

/* ===== قواعد الجوال العامة (شاشات ≤ 640px أو Capacitor) ===== */
@media (max-width: 640px) {
    html {
        /* منع تكبير iOS التلقائي عند التركيز على الحقول (يتطلب خط ≥ 16px) */
        -webkit-text-size-adjust: 100%;
    }
    body {
        overscroll-behavior-y: none;
        -webkit-tap-highlight-color: transparent;
        /* منع أي تمرير أفقي عرضي */
        overflow-x: hidden;
    }
    /* الحقول: حجم خط آمن يمنع الزوم التلقائي في iOS */
    input, select, textarea {
        font-size: max(16px, 1em);
    }
    /* أهداف لمس مريحة — الحد الأدنى 44px للعناصر التفاعلية الأساسية */
    button, .btn, [role="button"] {
        min-height: 44px;
    }
}

/* ===== داخل تطبيق iOS (Capacitor): احترام كامل للـ Safe Area ===== */
html.is-capacitor body {
    overflow-x: hidden;
}

/* العناصر الحساسة للوحة المفاتيح: JS يصغرها فوق الكيبورد */
.kb-aware {
    transition: height 0.18s ease, top 0.18s ease;
}
html.kb-open .kb-hides {
    display: none !important;
}

/* الشاشات القصيرة (عرضي/انقسام): تقليل الهوامش الرأسية */
@media (max-height: 500px) {
    body { overflow-y: auto; }
}