/* =============================================================================
   mobile-layout-guard.css
   حارس التخطيط الأفقي على الموبايل — مصدر واحد لكل صفحات الموقع.

   ---------------------------------------------------------------------------
   لماذا يوجد هذا الملف
   ---------------------------------------------------------------------------
   شريط التنقل السفلي `.mobile-bottom-taskbar` مثبَّت بـ `position: fixed; bottom: 0`.
   العنصر المثبَّت يُحسب موضعه بالنسبة إلى الـ viewport، لكن على الموبايل يتوسّع
   الـ layout viewport أفقياً إذا وُجد في الصفحة أي عنصر أعرض من الشاشة. عندها
   يصير «قاع الشاشة» الذي يستند إليه الشريط هو قاع التخطيط المتوسّع لا قاع الشاشة
   المرئية، فينزلق الشريط ويبدو وكأنه «يتحرك مع المحتوى» بدل أن يثبت.

   هذا هو السبب الجذري الواحد الذي تكرّر في صفحات متفرقة (AppInfo، PendingSubmissions
   وغيرها)، وكان يُعالَج في كل مرة داخل الصفحة المعنيّة وحدها — فيعود الظهور في أول
   صفحة جديدة تضيف عنصراً عريضاً. هذا الملف يعالجه مركزياً مرة واحدة لكل الصفحات
   الحالية والمستقبلية.

   ---------------------------------------------------------------------------
   أين يُربط
   ---------------------------------------------------------------------------
   يجب أن يُربط في `<head>` في:
     - Pages/Shared/_Layout.cshtml            (يغطي كل الصفحات التي ترث التخطيط)
     - وكل صفحة تضع `Layout = null` ولا ترث _Layout، وهي حالياً:
         Pages/Index.cshtml
         Pages/Properties/Index.cshtml
         Pages/Properties/PropertiesReport.cshtml
         Pages/Admin/Documentation.cshtml
         Pages/Admin/InterestsReport.cshtml
         Pages/Admin/PropertyRequestsReport.cshtml
         Pages/Admin/SubmissionsReport.cshtml

   أي صفحة جديدة تضع `Layout = null` يجب أن تربط هذا الملف، وإلا فقدت الحارس.

   ---------------------------------------------------------------------------
   ملاحظتان مهمّتان
   ---------------------------------------------------------------------------
   1) كل القواعد محصورة بـ `@media screen` عمداً، فلا تمسّ الطباعة إطلاقاً —
      صفحة الدليل وصفحات التقارير تفرض عرضاً مطلقاً بالمليمتر عند الطباعة
      (راجع القسم 53 من session-report.md) وأي تدخّل هنا يكسر ذلك.

   2) `overflow-x: clip` مقصودة ومكتوبة بعد `hidden` وليست تكراراً:
      `hidden` تجعل العنصر «حاوية تمرير» وتُجبر المحور الآخر على `auto`، وهو ما
      قد يتعارض مع `position: fixed/sticky`. أما `clip` فتقصّ دون إنشاء حاوية
      تمرير ودون المساس بالمحور العمودي. المتصفحات القديمة تتجاهل `clip`
      وتبقى على `hidden`، فالسلوك آمن في الحالتين.
   ============================================================================= */

@media screen and (max-width: 991px) {

    /* ---------------------------------------------------------------------
       (1) الحارس الجذري — الضمانة الفعلية لثبات الشريط.
       يقصّ أي تجاوز أفقي عند جذر المستند، فمهما فعلت أي صفحة لا يتوسّع
       الـ layout viewport ولا ينزلق الشريط السفلي.
       --------------------------------------------------------------------- */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden; /* احتياطي للمتصفحات التي لا تعرف clip */
        overflow-x: clip; /* المفضّلة: تقصّ بلا حاوية تمرير */
    }

    /* ---------------------------------------------------------------------
       (2) قواعد إيجابية تمنع نشوء التجاوز أصلاً.
       القصّ في (1) يحمي الشريط لكنه يُخفي المحتوى المتجاوز. هذه القواعد
       تجعل المحتوى «يتّسع» بدل أن يُقصّ، فلا يضيع شيء من الصفحة.
       --------------------------------------------------------------------- */

    /* الكلمات الطويلة غير القابلة للكسر (روابط، بريد، رموز تتبّع) كانت أشيع
       سبب لتوسّع الصفحة. تُكسر الآن بدل أن تدفع التخطيط. */
    body {
        overflow-wrap: break-word;
    }

    /* الوسائط لا تتجاوز عمودها أبداً.
       استُثنيت خرائط Leaflet صراحةً: بلاطات الخريطة صور بأبعاد ثابتة موضوعة
       بإحداثيات مطلقة داخل حاوية الخريطة، وفرض max-width عليها يشوّه الخريطة. */
    img,
    svg,
    video,
    canvas,
    iframe,
    embed,
    object {
        max-width: 100%;
    }

    .leaflet-container img,
    .leaflet-container svg,
    .leaflet-container canvas {
        max-width: none;
    }

    /* الكتل البرمجية والنصوص المنسّقة تمرّر داخل نفسها لا عبر الصفحة. */
    pre {
        max-width: 100%;
        overflow-x: auto;
    }

    /* شبكة Bootstrap: الصفّ السالب الهوامش داخل حاوية بلا حشو يتجاوز بمقدار
       الهامشين. تقييد الحاويات يمنع ذلك دون تغيير مظهرها. */
    .container,
    .container-fluid {
        max-width: 100%;
        overflow-x: clip;
    }

    /* ---------------------------------------------------------------------
       (3) شبكة أمان للجداول العريضة في أي صفحة مستقبلية.
       كل جداول المشروع اليوم ملفوفة بـ `.table-responsive` (تُمرّر محلياً)،
       فهذه القاعدة لا أثر لها على أي صفحة قائمة — وجودها ليمنع صفحة جديدة
       تنسى اللفّ من أن تصير سبب تجاوز جديد. الجدول غير الملفوف يمرّر داخل
       نفسه بدل أن يوسّع الصفحة.
       --------------------------------------------------------------------- */
    .table-responsive {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    :not(.table-responsive) > table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =============================================================================
   تشخيص: العنصر المثبَّت ينكسر أيضاً إذا حمل أيٌّ من أسلافه
   `transform` أو `filter` أو `perspective` أو `contain` أو `will-change`،
   لأن ذلك يجعل السلف كتلةً حاوية للعناصر المثبَّتة فتُحسب بالنسبة إليه لا إلى
   الشاشة. لا تُضِف أياً من هذه الخصائص إلى `.app-container` أو `body` أو أي
   سلف لشريط التنقل. يوجد اختبار يتحقق من ذلك في كل صفحة.
   ============================================================================= */