/* ============================================================================
   mobile-responsive.css
   إصلاحات responsive شاملة لمنصة إجلال — يُحمّل على كل صفحات الحسابات + Landing
   يعالج:
     1. iOS auto-zoom على focus (font-size >= 16px)
     2. Touch targets < 44px (Apple HIG minimum)
     3. Safe areas (notch/Dynamic Island على iPhone)
     4. horizontal scroll غير المتعمّد
     5. Momentum scrolling على iOS
     6. Tap highlight الأزرق الافتراضي
   ============================================================================ */

/* ── 1) منع horizontal scroll غير المتعمّد ──
   ملاحظة حرجة: overflow-x فقط على body، ليس على html
   لأن ذلك يكسر scroll-behavior: smooth ويسبب حظر التمرير في بعض الصفحات */
body {
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* ── 2) Safe area insets لأجهزة iPhone بـnotch ── */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    /* لكن Fixed toolbars يجب أن يطبّقوا env بأنفسهم */
    body:has(.messaging-app),
    body:has(.msg-app),
    body:has([data-fixed-layout]) {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* ── 3) منع Tap highlight الأزرق الافتراضي على iOS + الاستبدال بلمسة ذهبية لطيفة ── */
* {
    -webkit-tap-highlight-color: rgba(198, 166, 117, 0.15);
}

/* ── 4) إصلاحات خاصّة بالموبايل فقط ── */
@media (max-width: 768px) {

    /* منع iOS auto-zoom على input focus — يجب >= 16px */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Touch targets: كل عنصر تفاعلي يجب أن يكون 44x44 على الأقل */
    button,
    a.btn,
    input[type="submit"],
    input[type="button"],
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* لكن روابط النصوص الصغيرة داخل الفقرات لا تحتاج 44px — استثنيها */
    p a,
    span a,
    li a,
    .txt a,
    a.inline-link {
        min-height: auto;
        min-width: auto;
    }

    /* الروابط الصغيرة (مثل "نسيت كلمة المرور؟") تحتاج padding داخلي */
    a.small-link,
    .auth-link,
    .forgot-link,
    a[href*="forgot"],
    a[href*="register"]:not(.btn),
    a[href*="login"]:not(.btn) {
        display: inline-block;
        padding: 10px 8px;
        min-height: 44px;
        line-height: 24px;
    }

    /* أزرار الأيقونات الصغيرة */
    button > i:only-child,
    button:has(> i:only-child) {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* منع overflow على العناصر الزخرفية (orbs, gradients, decorations) */
    .hero-orb,
    .decorative-blob,
    .bg-decoration,
    [class*="orb"],
    [class*="blob"] {
        max-width: 100vw;
        overflow: hidden;
    }

    /* Modals يجب أن لا تتجاوز الشاشة */
    .modal,
    .dialog,
    [role="dialog"],
    [role="alertdialog"] {
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 48px);
        max-height: calc(100dvh - 48px);
    }

    /* جداول قابلة للسحب أفقياً بدل كسر الصفحة */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    /* إلا الجداول الأدمن التي تُدار خاصةً */
    .admin-table {
        display: table;
        white-space: normal;
    }
    .admin-table__wrapper,
    div[style*="overflow"]:has(> .admin-table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* الصور المرنة */
    img:not([width]) {
        max-width: 100%;
        height: auto;
    }

    /* منع النص من التسبب في horizontal scroll */
    h1, h2, h3, h4, h5, h6, p, span, div {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* المسافات الجانبية للـcontainers */
    .container:not([class*="messaging"]):not([class*="msg"]):not([class*="chat"]) {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
}

/* ── 5) إصلاحات خاصة بالشاشات الصغيرة جداً (< 400px) ── */
@media (max-width: 400px) {
    /* تصغير الـpadding العام على الشاشات جداً صغيرة */
    .container:not([class*="messaging"]):not([class*="msg"]):not([class*="chat"]) {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ── 6) دعم Landscape على الموبايل (تخفيض الـpadding العمودي) ── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .hero,
    .hero-section,
    .auth-container,
    header.main-header {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
}

/* ── 7) احترام تفضيل تقليل الحركة ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── 8) دعم High contrast mode ── */
@media (forced-colors: active) {
    button, input, select, textarea, a {
        forced-color-adjust: none;
    }
}

/* ── 9) دعم dvh (dynamic viewport height) لحلّ مشكلة keyboard على iOS ── */
@supports (height: 100dvh) {
    .full-height-mobile,
    .messaging-layout,
    .msg-layout {
        min-height: 100dvh;
    }
}