/* mb360 — تنسيقات مخصّصة. يُحمَّل من assets_helper.php. حذفه = تراجع كامل. */

/* RESP-003 — تجاوز أفقيّ 15px في شاشتين.
   صفّ Bootstrap له هوامش أفقية سالبة 15px يمتصّها حاوٍ ذو حشو مماثل. وفي
   هاتين الشاشتين يقع `.row` مباشرةً داخل `.content` الذي لا يضيف حشواً عند
   العرض الصغير، فيصير عرض العمود 390px داخل نافذة 360px.
   القاعدة مقيّدة بصنفَي الجسم: تعديل `.row` عامّاً كان سيمسّ 279 مساراً. */
@media (max-width: 800px) {
    body.purchase_order        > #wrapper .content > .row,
    body.construction_cashflow > #wrapper .content > .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* الحالة المركّبة: عنصر واحد يحمل `row` و`content` معاً — فهو الحاوي
       الأعلى وهوامشه السالبة لا يمتصّها شيء. قِيس على purchase/vendor_items
       عند newdream: عرضه 390 عند left −15. المحدِّق دقيق (الصنفان معاً) فلا
       يمسّ `.row` عادياً ولا `.content` عادياً. */
    .content.row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* RESP-004 — محتوى عريض بلا حاوٍ يتمرّر.
   قِيس على 375px: عشرات من شاشات الإنشاءات تدفع الصفحة أفقياً حتى 584px.
   والتشخيص من الشجرة: العنصر المتجاوز جدول أو شبكة، وكل أسلافه
   overflow-x: visible — أي لا حاوٍ يتمرّر. ولا تصيب شاشات Perfex الأساسية
   لأن جداولها يلفّها dataTables_wrapper وهو يتمرّر داخل صندوقه.

   قيود تعلّمتُها بالقياس لا بالافتراض:
     · لا يُشترَط `.content` أباً — ai_reminder يضع جدوله خارج غلاف المحتوى.
     · لا يُشترَط صنف `.table` — بعضها بأصناف مخصّصة مثل rules-table.
     · `max-width: 100%` شرط لازم مع overflow-x: بدونه يتمدّد العنصر بعرض
       محتواه فلا يعمل التمرير أصلاً.
     · الحاوية الشبكية اسمها `*-row` لا `*-grid`: pm-row · cp-row · co-row.
       و`[class*="-row"]` **لا يطابق** `.row` الأساسي في Bootstrap لأنه بلا
       شرطة — فالتعميم آمن، ولا يفعل أكثر من إتاحة التمرير داخل الصندوق.

   وعند العرض الصغير فقط؛ سطح المكتب لا يُمَسّ. */
@media (max-width: 800px) {
    table:not(.dataTable):not(.mb360-table) {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    [class*="-row"],
    [class*="-grid"],
    [class*="summary"],
    [class*="-cards"],
    [class*="-table"]:not(.dataTable):not(.mb360-table) {
        max-width: 100%;
        overflow-x: auto;
    }

    /* RESP-005 — حاوية flex لا تلتفّ فتخرج عناصرها.
       قِيست: form في payroll/commissions (ابنه عند left يتجاوز 199) و
       perfexdashboard-actions-wrap (410) و broker_report/duplicates (155).
       `flex-wrap` بلا أثر على عنصر ليس flex أصلاً، فالقاعدة آمنة. */
    form,
    [class*="-actions"],
    [class*="actions-"],
    .tw-flex,
    [class*="tw-flex"],
    [style*="display:flex"],
    [style*="display: flex"] {
        flex-wrap: wrap;
    }

    /* قائمة bootstrap-select بعرض ثابت تتجاوز الحاوية */
    .bootstrap-select,
    .bootstrap-select > .dropdown-toggle {
        max-width: 100%;
    }

    /* RESP-006 — نصّ طويل بلا فواصل يمنع الالتفاف.
       قِيس: `code` عرضه 466 داخل form-group عرضه 280 في wa_notifications،
       و`strong` عرضه 401 داخل alert عرضه 330 في construction_external_users.
       كسر الكلمة الطويلة لا يغيّر شيئاً في النصّ العادي. */
    code,
    pre,
    small,
    .alert,
    .text-muted {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* RESP-008 — رسم بياني بعرض بكسليّ ثابت.
       `<canvas>` تُرسَم بعرض محدَّد من JS (350px) داخل عمود عرضه 280 —
       قِيس على propertybase/propertybase_reports عند newdream.
       `max-width` وحده يكفي: المكتبات ترسم داخل الصندوق المتاح. */
    canvas {
        max-width: 100%;
    }

    /* شبكة بأسماء لا تتبع النمط: matrix في risk_register */
    .matrix {
        max-width: 100%;
        overflow-x: auto;
    }

    /* input-group يتمدّد أعرض من أبيه (331 داخل 280 في custom_links).
       `max-width` وحده لا يكفي: العنصر `display:table` يتمدّد بمحتواه فوق
       الحدّ، و`table-layout: fixed` هو ما يُلزمه. */
    .input-group {
        max-width: 100%;
        table-layout: fixed;
    }

    /* ولا يكفيان: الخليّة `input-group-addon` بنصّ طويل (305px) تفرض اتّساع
       الجدول فوق الحدّ. كسر نصّها يخفّف ولا يُنهي. */
    .input-group-addon {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* RESP-007 — `custom_links`: الخليّة تحمل رابط الأساس كاملاً
       (`https://www.mb360.app/<slug>/ps/`) — سلسلة بلا فواصل داخل خليّة جدول
       تتحجّم بمحتواها، فتقاوم `max-width` و`table-layout: fixed` و
       `overflow-wrap` معاً: تحجيم الجداول يحسب **أدنى عرض للمحتوى**.

       الحلّ الوحيد الحاسم: إخراج المجموعة من التخطيط الجدوليّ إلى كتل
       متراصّة رأسياً. مقيّد بصنف جسم هذه الشاشة وحدها — فلا يمسّ أي
       `input-group` آخر في النظام. */
    body.custom_links .input-group,
    body.custom_links .input-group > .input-group-addon,
    body.custom_links .input-group > .form-control {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    body.custom_links .input-group > .input-group-addon {
        word-break: break-all;
        border-radius: 4px 4px 0 0;
        border-bottom: 0;
        text-align: start;
    }

    body.custom_links .input-group > .form-control {
        border-radius: 0 0 4px 4px;
    }

    /* شبكة بنمط سطريّ بلا صنف — شاشتا عمولات الوسطاء */
    [style*="display:grid"],
    [style*="display: grid"] {
        max-width: 100%;
        overflow-x: auto;
    }
}