/* ==========================================================================
   erp_mobile.css — طبقة التجاوب للنظام الأساسي (الـERP الكلاسيكي).

   لماذا ملفٌ منفصل لا إضافةٌ إلى style.css: style.css هو ملف الهوية — الألوان
   والزجاج والأزرار — ويقرأه كل من يعدّل الشكل. أما ما هنا فقرارٌ واحد مختلف
   تماماً: «كيف يتصرّف هذا التخطيط المصمَّم لشاشة 1440 حين يُفتح على 360».
   خلطهما يجعل كل تعديل لونٍ مخاطرةً على التجاوب والعكس.

   قاعدة صارمة: كل ما في هذا الملف داخل @media بحدٍّ أعلى للعرض
   (991.98px أو 575.98px). فسطح المكتب لا يتغيّر بكسلاً واحداً — وهذا مقصود:
   المطلوب تحسين الجوال لا إعادة تصميم النظام.

   لا يُحمَّل هنا mobile_app.css المشترك: قواعده تخصّ بوابات لها شريط سفلي
   ثابت (padding-bottom على .main-content بلا حدّ عرض)، والنظام الأساسي لا
   شريط سفلي فيه — فتحميله يزيد هامشاً سفلياً على سطح المكتب أيضاً.
   ========================================================================== */


/* ==========================================================================
   1) استرجاع عرض الشاشة — كان 78 بكسلاً من 360 تذهب هوامشَ فارغة
   ==========================================================================
   الصفحات مبنية على  <main class="main-content"><div class="container-fluid p-4">.
   على الجوال يضيف style.css خمسة عشر بكسلاً لكل جانب من main، ثم تضيف p-4
   أربعة وعشرين — أي 39px يميناً و39px يساراً من أصل 360. الجداول والأزرار
   تُزاحم في 282px فقط، وهو سبب أغلب القصّ أدناه لا الجداول نفسها.
   ========================================================================== */
@media (max-width: 575.98px) {
    /* ‏#mainContent مذكور صراحةً: قاعدة style.css تستعمل المعرّف، ولا يغلب
       المعرّفَ إلا معرّف. */
    #mainContent, .main-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    /* ‏.75rem = 12px بالضبط، وهو نصف أكبر فجوة تستعملها الصفحات (g-4 = 1.5rem).
       ‏.row في بوستراب تحمل هامشاً سالباً بمقدار نصف الفجوة، فلو نقص حشو
       الحاوية عن ذلك خرج الصفّ من حدّها بالفرق — جرّبنا 8px فظهر قصٌّ
       مقداره 4px في مكتبة العملاء. */
    .main-content > .container-fluid,
    .main-content > .container-fluid.p-4 {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }
    /* حشو البطاقات الداخلي: 24px داخل بطاقة عرضها 324 تلتهم خُمس المساحة */
    .main-content .card-body.p-4,
    .main-content .card-header.p-4 { padding: 1rem !important; }
}


/* ==========================================================================
   2) الشريط العلوي في سطر واحد دائماً
   ==========================================================================
   القياس: عند 352px كان الشريط يلتفّ إلى سطرين فيصير ارتفاعه 103px، بينما
   المحتوى يبدأ عند 72px (pt-5 mt-4) — أي أن أول سطر في كل صفحة يختفي تحت
   شريطٍ ثابت. وهذا يحدث على أي هاتف ضيّق أو حين يظهر شريط تمرير.

   العلاج من السبب: نمنع الالتفاف ونقلّص المسافات الزائدة بين أيقونات اليمين
   (me-3 وme-4 = 40px مهدرة) فيبقى الشريط 63px حتى عند 320px.
   ========================================================================== */
@media (max-width: 991.98px) {
    #mainNavbar { flex-wrap: nowrap !important; }
    #mainNavbar > .container-fluid { flex-wrap: nowrap; min-width: 0; }
}

@media (max-width: 575.98px) {
    #mainNavbar > .container-fluid {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }
    /* ‏margin-inline لا margin-left: النظام RTL، وبوستراب يترجم me-* إلى
       margin-left هنا — والمنطقيّ يغطّي الاتجاهين فلا ينكسر لو قُلبت الوجهة */
    #mainNavbar .ms-auto > .dropdown.me-3,
    #mainNavbar #themeToggleBtn { margin-inline: .25rem !important; }
    #mainNavbar #toggleSidebar  { margin-inline: 0 .25rem !important; }
}


/* ==========================================================================
   3) الدرج الجانبي
   ==========================================================================
   ارتفاعه 100vh، و100vh على متصفحات الجوال تشمل المساحة التي يغطّيها شريط
   العنوان — فآخر روابط القائمة تقع خارج الشاشة ولا تُلمس. 100dvh هو الارتفاع
   المرئي فعلاً. ونبقي 100vh في sidebar.php احتياطاً للمتصفحات الأقدم.
   ========================================================================== */
@media (max-width: 991.98px) {
    .sidebar-pro { height: 100dvh; }

    /* مساحة أمان الهواتف ذات الشريط السفلي: بدونها يختبئ آخر رابط خلفه */
    .sidebar-scroll { padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }

    /* أهداف لمس: 31 من 67 رابطاً كانت تحت 44px — إصبعٌ لا فأرة */
    .sidebar-link,
    .submenu-link { min-height: 44px; }
    .submenu-link { display: flex; align-items: center; }

    /* زر الإغلاق كان 27×32 — أصغر من أن يُصاب من أول لمسة.
       flex-shrink: 0 ضروري لا زينة: ترويسة الشريط صفٌّ مرن، واسم شركةٍ طويل
       كان يضغط الزرّ من 44 إلى 35 عند 320px — أي أن الإصلاح يتبخّر عند
       أضيق شاشة، وهي بالضبط الشاشة التي كُتب من أجلها. */
    .close-sidebar-btn {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 auto;
        font-size: 1.35rem;
    }
    /* والاسم يقصّ نفسه بدل أن يقصّ الزرّ */
    .sidebar-header > .d-flex { min-width: 0; }
    .sidebar-header .brand-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* ==========================================================================
   4) الصفوف الأفقية تلتفّ بدل أن تُقصّ
   ==========================================================================
   هذا أخطر عيبٍ قِسناه: .main-content عليها overflow-x: hidden على الجوال،
   فأي صفٍّ أعرض من الشاشة لا يُمرَّر — يُقصّ ويختفي. في شاشة الحضور كان
   303px من شريط الفلترة خارج الشاشة عند 360، بما فيه زر «فلترة» نفسه: أي
   وظيفةٌ كاملة لا يمكن الوصول إليها من الهاتف، ولا شيء يدلّ على وجودها.

   الالتفاف هو العلاج الصحيح لصفوف الأدوات: زرٌّ ينزل سطراً أفضل من زرٍّ
   يختفي. ونعتمد على أن .flex-nowrap في بوستراب تحمل !important، فمن كتبها
   صراحةً يبقى قراره ساري المفعول بلا استثناءات نكتبها نحن.
   ========================================================================== */
@media (max-width: 991.98px) {
    .main-content .d-flex { flex-wrap: wrap; }

    /* داخل الجداول لا: للجدول حاوية تمرير خاصة به، والالتفاف هناك يطيل
       الصفوف بلا فائدة (اسمٌ ينزل تحت صورته). التخصيص أعلى فيغلب. */
    .main-content .table .d-flex { flex-wrap: nowrap; }

    /* الأسماء الطويلة (اسم عميل، عنوان مهمة) كانت تفرض عرضاً أكبر من الشاشة
       بدل أن تنكسر سطرين */
    .main-content h1, .main-content h2, .main-content h3,
    .main-content h4, .main-content h5, .main-content h6 { overflow-wrap: break-word; }

    /* الحقل الذي لا يقبل الانكماش يدفع صفَّه كلَّه خارج الشاشة */
    .main-content .form-control,
    .main-content .form-select { min-width: 0; }

    /* شارةٌ نصُّها طويل (شريط «آخر تسوية…» في الخزينة كان 367px داخل عمود
       عرضه 294px) تخرج من عمودها فتُقصّ. الالتفاف أَولى من الاختفاء —
       وداخل الجداول تبقى كما هي لأن للجدول تمريره الخاص. */
    .main-content .badge {
        white-space: normal;
        overflow-wrap: break-word;
    }
    .main-content .table .badge { white-space: nowrap; }
}


/* ==========================================================================
   5) الجداول: تمرِّر داخل حاويتها لا تُخرج الصفحة عن مسارها
   ==========================================================================
   حشو الخلية في style.css هو 1.25rem × 1.5rem — مقاسُ شاشةٍ عريضة. على
   الهاتف يضاعف عرض الجدول بلا أن يضيف معلومة: جدول الفواتير كان 689px،
   أي أكثر من ضعف الشاشة، نصفه حشوٌ فارغ.
   ========================================================================== */
@media (max-width: 991.98px) {
    .table th, .table td,
    .table-light th, .table-light td { padding: .6rem .7rem !important; }
    .table th { font-size: .78rem; letter-spacing: 0; }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /* شبكة أمان لكل جدولٍ نسي كاتبُه حاوية التمرير (دليل الخدمات مثلاً):
       يمرّر داخل جسم بطاقته بدل أن يُقصّ. :has مدعومة في متصفحات الجوال
       الحالية؛ وحيث لا تُدعم يبقى السلوك كما كان — لا أسوأ. */
    .main-content .card-body:has(> .table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
}


/* ==========================================================================
   6) أشرطة التبويبات تمرَّر أفقياً لا تُكسَر إلى صفوف
   ==========================================================================
   في ملف العميل ستة تبويبات: عند 360 كانت تلتفّ إلى ستة صفوف بارتفاع 237px —
   ثلث الشاشة قبل أن يبدأ المحتوى، ولا يبقى للعميل نفسه شيء.
   الشريط الممرَّر أفقياً هو النمط المعروف في التطبيقات: التبويبات تبقى صفاً
   واحداً، ويُسحب الشريط بالإصبع.
   ========================================================================== */
@media (max-width: 991.98px) {
    .main-content .nav-tabs,
    .main-content .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* فايرفوكس */
        -ms-overflow-style: none;
    }
    /* شريط تمرير مرئي فوق التبويبات يقضم مساحتها ويشوّه الحدّ السفلي */
    .main-content .nav-tabs::-webkit-scrollbar,
    .main-content .nav-pills::-webkit-scrollbar { display: none; }

    .main-content .nav-tabs > .nav-item,
    .main-content .nav-pills > .nav-item { flex: 0 0 auto; }

    .main-content .nav-tabs .nav-link,
    .main-content .nav-pills .nav-link { white-space: nowrap; }
}


/* ==========================================================================
   7) أهداف اللمس — 44 بكسلاً هو الحدّ الأدنى المتعارف عليه للإصبع
   ==========================================================================
   قِسنا: 18 من 19 زراً في مكتبة العملاء تحت 44px، و10 من 12 في ملف العميل.
   الفرق بين 40 و44 ليس تجميلاً: هو الفرق بين نقرةٍ تصيب وأخرى تفتح القائمة
   المجاورة.
   ========================================================================== */
@media (max-width: 991.98px) {
    .main-content .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;   /* نفس محاذاة الزرّ الافتراضية في بوستراب */
    }

    /* الروابط التبويبية: flex لا inline-flex، وبلا توسيط.
       inline-flex كان يقلّص رابطاً في قائمةٍ عمودية إلى عرض نصّه بدل عرض
       السطر، والتوسيط كان يزحزح نصوص القوائم العمودية إلى المنتصف — وكلاهما
       تغييرُ شكلٍ لم يُطلَب. المطلوب الارتفاع وحده. */
    .main-content .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    /* زرٌّ بعرض كامل يحتاج flex لا inline-flex وإلا انكمش إلى عرض نصّه */
    .main-content .btn.w-100,
    .main-content .btn.d-block,
    .main-content .btn.btn-block { display: flex; }

    /* الأزرار الدائرية تبقى دائرية: الارتفاع وحده يجعلها بيضاوية */
    .main-content .btn.rounded-circle {
        min-width: 44px;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .dropdown-menu .dropdown-item { min-height: 44px; display: flex; align-items: center; }
}


/* ==========================================================================
   8) صفّ الإجراءات السريعة — شبكة عمودين لا أربعة صفوف
   ==========================================================================
   «مهمة جديدة / اجتماع جديد / صفقة جديدة / فاتورة جديدة» كانت أربعة أزرار
   كلٌّ في سطر (191px من الارتفاع) لأن كلاً منها يطلب ~145px والشاشة 282px.
   شبكةٌ من عمودين متساويين تُنزلها إلى صفّين (96px) وتجعل كل زرٍّ بعرضٍ
   واحد — أسهل في الإصابة وأهدأ للعين من أطوالٍ مختلفة.
   ========================================================================== */
@media (max-width: 575.98px) {
    .erp-action-row {
        display: grid !important;          /* يغلب display:flex!important من d-flex */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem !important;
    }
    .erp-action-row > .btn {
        width: 100%;
        min-height: 44px;
        display: flex;
        justify-content: center;
    }

    /* زرّ الإجراء الرئيسي في ترويسة الصفحة: بعرض الشاشة بدل أن يُحشر
       بجانب العنوان فينكسر نصُّه سطرين ويصير 124×67 */
    .erp-page-cta { width: 100%; justify-content: center; }

    /* زرّا ترويسة ملف العميل («كشف الحساب المالي» و«عودة للمكتبة»): كلٌّ
       بعرض السطر كاملاً.

       جرّبنا قسمة السطر بينهما (156px لكلٍّ) فانكسر نصّ الأول إلى ثلاثة
       أسطر وصار الزرّ 93px ارتفاعاً — والصفّان الكاملان يكلّفان نفس
       الارتفاع تقريباً (96px) مع سطرٍ واحد لكل زرّ وهدفِ لمسٍ أوسع. */
    .erp-header-actions { width: 100%; flex-wrap: wrap; }
    .erp-header-actions > .btn { flex: 1 1 100%; min-height: 44px; }
}


/* ==========================================================================
   9) لمسةٌ لا تحويم — التحويم على شاشة لمس يعلق
   ==========================================================================
   :hover على الجوال يُفعَّل عند اللمس ويبقى عالقاً حتى تُلمس نقطة أخرى.
   فبطاقةٌ تُرفع 4px وصفٌّ يتمدّد يظلّان كذلك بعد رفع الإصبع — يبدو عطلاً.
   ========================================================================== */
@media (max-width: 991.98px) {
    .card:hover { transform: none; }
    .table tbody tr:hover { transform: none; box-shadow: none; }
    .table-hover tbody tr:hover td { background-color: transparent !important; }
    .btn:hover:not(.btn-primary) { transform: none; box-shadow: none; }
    .btn-primary:hover { transform: none; }
    .sidebar .nav-link:hover,
    .sidebar-link:hover { transform: none !important; }
}