/* ============================================================================
   ERP_Responsive.css — لایه‌ی ریسپانسیو مشترک سامانه
   PLACE AT: دامنه ERP مستأجر/public_html/ERP_Responsive.css
   ----------------------------------------------------------------------------
   چرا این فایل هست:
   `Style.css` مشترک ۲۵ کیلوبایت است و **صفر مدیاکوئری** دارد. از ۳۵ صفحه‌ی
   سامانه، ۲۵ تا هیچ مدیاکوئری‌ای ندارند و ۱۰ تای باقی‌مانده با ۲۰ بریک‌پوینت
   خودسر (۳۸۰ تا ۱۶۰۰) کار می‌کنند. یعنی «ریسپانسیو بودن» تا امروز تصادفی بود.

   ⚠ این فایل باید **آخرین** استایل هر صفحه باشد — بعد از بلوک <style> درون‌خطی.
     هر صفحه ۱ تا ۵۲ کیلوبایت CSS درون‌خطی دارد؛ اگر این فایل قبل از آن‌ها لود
     شود، هیچ قاعده‌ای از اینجا برنده نمی‌شود.

   ⚠⚠ زوم: **روی گوشی نیست، روی دسکتاپ هست.** این جمله تا ۱۵ شهریور ۱۴۰۵
     این‌جا نوشته بود «سامانه زوم ندارد؛ عددی که می‌بینی همان است که
     می‌نویسی» — و **غلط بود**. اندازه‌گیریِ همان روز روی
     app.mohaseb365.com با عرضِ ۳۷۵: ‏`html { zoom: 0.9 }`، نسبتِ دقیقِ
     ۰٫۹۰۰۰. یعنی هر عددی که در کلِ CSS موبایل نوشته شده بود، ۱۰٪ کوچک‌تر
     رندر می‌شد و کفِ لمسِ ۴۴ روی صفحه ۳۹٫۶ بود.

     گذارنده‌اش `CDN/gd_ui.js` است (تابعِ density، پیش‌فرض ۰٫۹ برای
     نمایشگرِ ۱۳ اینچی). همان‌جا زیرِ ۷۶۸ خاموش شد، پس:

       · زیرِ ۷۶۸ → زوم ندارد. عددی که می‌نویسی همان است که دیده می‌شود.
       · از ۷۶۸ به بالا → `zoom: 0.9` هست. عددِ روی صفحه = عددِ CSS × ۰٫۹،
         و مدیاکوئری از زوم تبعیت نمی‌کند (با `innerWidth` می‌سنجد).

     ⚠ پس اگر روزی عددی این‌جا «کوچک‌تر از چیزی که نوشتی» دیده شد، اول
       `getComputedStyle(document.documentElement).zoom` را بسنج.

   چهار دسته‌ی دستگاه:

       نام    از      دستگاه
       ----   -----   -------------------------------------------
       (پایه) 0       ★ موبایل — گوشی عمودی
       sm     640     گوشی بزرگ / افقی
       md     768     ★ تبلت
       lg     1024    تبلت افقی — پله‌ی کمکی، ریل اینجا باز می‌شود
       xl     1280    ★ لپ‌تاپ ۱۳ و ۱۴ اینچ
       2xl    1600    ★ نمایشگر بزرگ

   فلسفه: این فایل چیزی را «طراحی» نمی‌کند. فقط کارهایی را می‌کند که در هر
   ۳۵ صفحه یکسان‌اند و بدون دانستن نام کلاس‌های ماژول قابل انجام‌اند — جدولی
   که صفحه را پاره می‌کند، ورودی‌ای که iOS رویش زوم می‌کند، دکمه‌ای که با
   انگشت زده نمی‌شود، و پنلی که عرض ثابت ۱۲۰۰ پیکسل دارد.
   تصمیم‌های چیدمانی هر ماژول در خود همان ماژول می‌ماند.
   ============================================================================ */

:root {
    --erpr-bp-sm:  640px;   /* سند مرجع — متغیر CSS داخل @media کار نمی‌کند */
    --erpr-bp-md:  768px;
    --erpr-bp-lg:  1024px;
    --erpr-bp-xl:  1280px;
    --erpr-bp-2xl: 1600px;

    --erpr-gutter-phone:  12px;
    --erpr-gutter-tablet: 16px;
    /* حداقل هدف لمسی — ۴۴ پیکسلِ **روی صفحه**. از ۷۶۸ به بالا gd_ui.js روی
       <html> ‏zoom می‌گذارد و `--erpr-zoom` را هم؛ بدونِ تقسیم، ۴۴ روی تبلت
       ۳۹٫۶ دیده می‌شد. متغیر روی همان <html> است، پس این‌جا حل می‌شود و هر
       مصرف‌کننده (بند ۴ و ۴.۱ و ERP/erp.css) خودکار درست می‌شود. */
    --erpr-tap:           calc(44px / var(--erpr-zoom, 1));

    /* ⚠ نشانه‌ی «این ورقه واقعاً لود شد».
       دو بار — یک‌بار برای Orders و یک‌بار برای POS — ابزارِ سنجش صفحه را
       بدونِ همین فایل اندازه گرفت و عددِ خیالی داد. عدد که غلط باشد، اصلاحِ
       غلط پشتش می‌آید. هر سنجه‌ای باید اول این متغیر را بخواند: اگر خالی
       بود، صفحه سنجیده نشده — نه سالم است نه خراب. */
    --erpr-loaded: 1;
}

/* ============================================================================
   ۱. گاردهای همیشگی — در هر عرضی درست‌اند
   ========================================================================== */

/* رسانه هیچ‌وقت از ظرفش بیرون نزند. بدون این، یک تصویر ۱۲۰۰ پیکسلی کل صفحه را
   روی گوشی پاره می‌کند و کاربر فکر می‌کند «سایت خراب است». */
.erp-rs img,
.erp-rs svg:not([width]),
.erp-rs video,
.erp-rs canvas,
.erp-rs iframe { max-width: 100%; }

.erp-rs img,
.erp-rs video { height: auto; }

/* متن طولانی بدون فاصله (کد کالا، آدرس، توکن) ستون را باز می‌کند. */
.erp-rs .oui-card,
.erp-rs .oui-tile,
.erp-rs .oui-field { min-width: 0; }

/* ⚠⚠ مهم‌ترین قاعده‌ی این فایل.
   یک آیتم فلکس به‌طور پیش‌فرض `min-width: auto` دارد، یعنی حاضر نیست کوچک‌تر
   از محتوایش شود. اگر داخلش یک ظرفِ اسکرول باشد، به‌جای اینکه ظرف اسکرول کند،
   خودِ آیتم کش می‌آید و کلِ صفحه را پاره می‌کند — و ظرف اسکرول هیچ‌وقت فعال
   نمی‌شود.

   در POS دقیقاً همین بود: `main.flex-1` تا ۱۱۵۴ پیکسل باز شده بود چون جدولش
   `min-width: 1200px` داشت. اول min-width را روی خودِ ظرف اسکرول گذاشتم و هیچ
   اثری نداشت؛ مقصر یک سطح بالاتر بود.

   در هر عرضی درست است، نه فقط موبایل: آیتمی که کوچک نمی‌شود، روی ۱۲۸۰ هم
   همان‌قدر باگ است، فقط آنجا محتوا اتفاقی جا می‌شود. */
.erp-rs main,
.erp-rs .flex-1 { min-width: 0; }

/* ============================================================================
   ۲. جدول — بزرگ‌ترین قاتل روی موبایل
   ۲۲ صفحه از ۳۵ جدول دارند و فقط ۲ صفحه آن را داخل یک ظرف اسکرول‌شونده
   گذاشته‌اند. بقیه روی گوشی صفحه را افقی پاره می‌کنند.
   ========================================================================== */

/* الگوهای موجود پروژه؛ اینجا رسمی می‌شوند تا ماژول جدید هم همین را بنویسد.
   ⚠ min-width: 0 حیاتی است. یک ظرفِ اسکرول که فرزندِ یک flex/grid باشد،
   به‌طور پیش‌فرض min-width: auto دارد و به‌جای اسکرول کردن، تا اندازه‌ی
   محتوایش کش می‌آید و کلِ صفحه را پاره می‌کند. دقیقاً همان اتفاقی که در POS
   با جدولِ min-width:1200px افتاده بود. */
.erp-rs .tbl-scroll,
/* ⚠ ۱۴۰۵/۰۵/۲۵ — فهرست بالا فقط دو اسم کلاس داشت و ماژول‌های دیگر اسم
   خودشان را گذاشته بودند: sms-table-wrap، cs-table-wrap، و overflow-x-auto
   تیلویند. نتیجه این بود که همان باگ در SMS و سئو و سفارش‌ها زنده مانده بود:
   جدول با سرصفحه‌های نشکن، ظرفِ اسکرول را پهن می‌کرد و ظرف هم چون فرزند یک
   grid/flex بود و min-width:auto داشت، به‌جای اسکرول کردن کش می‌آمد و کلِ سند
   را روی گوشی افقی می‌کرد (۳۳۱ و ۱۹۱ و ۹۱ پیکسل سرریز، اندازه‌گیری‌شده).

   انتخابگرِ زیررشته‌ای عمداً است: هر ماژولی که ظرفش را «...table-wrap» صدا
   بزند خودکار پوشش می‌گیرد و لازم نیست این فایل هر بار ویرایش شود.

   min-width:0 روی خودِ ظرف کافی نیست؛ زنجیره‌ی والدها هم باید بتواند کوچک
   شود، به همین دلیل والدهای مستقیمِ فلکس/گرید هم پایین پوشش داده شده‌اند. */
.erp-rs [class*="table-wrap"],
.erp-rs .overflow-x-auto {
    overflow-x: auto;
    min-width: 0;
    /* ⚠ width:100% لازم است و max-width:100% کافی نیست.
       ظرفِ اسکرول تا وقتی عرضِ «قطعی» نداشته باشد، اندازه‌ی min-content
       محتوایش را به والد گزارش می‌کند و والد را پهن می‌کند — یعنی خودش
       اسکرول می‌خورد ولی صفحه را هم پهن کرده. با width:100% عرضش از والد
       گرفته می‌شود و دیگر چیزی به بالا منتقل نمی‌شود.
       اندازه‌گیری‌شده: ظرف ۵۱۰ پیکسل بود با محتوای ۵۶۷ روی صفحه‌ی ۳۷۵. */
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.erp-rs .table-responsive-x,
.erp-rs .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    min-width: 0;
}

/* فالبک برای جدولی که ظرف ندارد.
   ⚠ چرا display:block روی خود <table> و نه چیز دیگر: بدون تغییر مارک‌آپ،
     تنها راهی است که یک جدولِ بی‌ظرف را اسکرول‌پذیر می‌کند. مرورگر داخلش یک
     جعبه‌ی جدول ناشناس می‌سازد، پس هم‌ترازی ستون‌ها حفظ می‌شود.
   ⚠ فقط تا تبلت. روی دسکتاپ جدول باید همان table بماند تا width:100% کار کند. */
@media (max-width: 1023px) {
    .erp-rs table:not(.erp-keep-table) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* ستون‌ها روی گوشی نباید بشکنند؛ اسکرول بهتر از متن له‌شده است. */
    .erp-rs table:not(.erp-keep-table) th,
    .erp-rs table:not(.erp-keep-table) td { white-space: nowrap; }
    .erp-rs table.erp-wrap-cells th,
    .erp-rs table.erp-wrap-cells td { white-space: normal; }
}

/* ============================================================================
   ۳. فرم و ورودی
   ========================================================================== */

/* ⚠ روی iOS اگر اندازه‌ی متن ورودی زیر ۱۶px باشد، صفحه هنگام فوکوس زوم می‌کند
   و دیگر برنمی‌گردد. شرط pointer: coarse گوشی و تبلت هر دو را می‌گیرد؛ شرط
   عرض هم فالبک مرورگرهایی است که pointer را پشتیبانی نمی‌کنند. */
@media (max-width: 1023px), (pointer: coarse) {
    /* ⚠ ۱۴ شهریور ۱۴۰۵ — چرا !important، با اینکه بقیه‌ی این فایل از آن پرهیز
       می‌کند: چون رقیب خودش !important است. `Sale_Invoices.view.php` خط ۵۰
       نوشته `input, select { font-size: 12px !important; }` و صفحه‌های دیگر
       اندازه را درونِ `style=""` می‌گذارند. بدونِ این، قاعده‌ی زیر روی همان
       صفحه‌هایی بازنده است که بیشترین ورودی را دارند — یعنی دقیقاً جایی که
       زوم‌شدنِ iOS بیشتر آزار می‌دهد.
       وزنِ انتخابگر (0,3,1) از (0,0,1) بیشتر است، پس بینِ دو !important هم
       این یکی می‌برد.
       ⚠ ۲۷ شهریور ۱۴۰۵ — کف ۱۶ پیکسلِ **روی صفحه** است، نه در CSS. از ۷۶۸ به
       بالا `gd_ui.js` روی <html> ‏zoom:0.9 می‌گذارد و `16px` خام ۱۴٫۴ دیده
       می‌شد. همان تابع `--erpr-zoom` را هم می‌گذارد و این‌جا بر آن تقسیم
       می‌شود (۱۷٫۷۸ × ۰٫۹ = ۱۶). صفحه‌ای که gd_ui ندارد زوم هم ندارد و
       عقب‌نشینیِ ۱ درست است.
       قربانیِ اصلی آیفونِ افقی است (عرضِ ۸۴۴ تا ۹۳۲، پس زوم دارد): WebKit
       اندازه‌ی «پس از zoom» را با ۱۶ می‌سنجد. آیپد روی فوکوس اصلاً بزرگ
       نمی‌کند، ولی متنِ ۱۴٫۴ آن‌جا هم زیرِ کفِ خواناییِ فرم است.
       ← Memory/mohaseb365-zoom-eats-the-touch-floor.md */
    .erp-rs input:not([type="checkbox"]):not([type="radio"]),
    .erp-rs select,
    .erp-rs textarea { font-size: calc(16px / var(--erpr-zoom, 1)) !important; }
}

/* گرید فرم روی گوشی یک‌ستونی. ماژول‌ها grid-template-columns خودشان را دارند،
   پس این با !important می‌آید — و فقط تا ۷۶۷، جایی که دو ستون واقعاً جا نمی‌شود. */
@media (max-width: 767px) {
    .erp-rs .modal-grid,
    .erp-rs .oui-form-grid,
    .erp-rs .field-row { grid-template-columns: 1fr !important; }
}

/* ============================================================================
   ۴. هدف لمسی
   روی دستگاه لمسی، دکمه‌ی ۳۲ پیکسلی یعنی سه بار تلاش برای یک کلیک.
   ========================================================================== */
/* ⚠ فقط ارتفاع. یک بار min-width هم گذاشته شد و نوار ابزار POS را ۹۶ پیکسل
   عریض‌تر کرد — شش دکمه‌ی متنی کنار هم، هرکدام اجباراً ۴۴ پیکسل، ردیف را از
   ویوپورت بیرون زد. عرضِ دکمه‌ی متنی را محتوایش تعیین می‌کند؛ فقط دکمه‌ی
   آیکونی که متن ندارد به کف عرض نیاز دارد. */
/* ⚠ شرط عرض هم لازم است، نه فقط pointer: coarse. اولین نسخه فقط coarse داشت و
   هیچ اثری نکرد؛ همان اشتباهی که برای ورودی‌ها نشده بود. یک ویوپورت ۳۷۵
   پیکسلی گوشی است، چه مرورگر pointer را درست گزارش بدهد چه ندهد. */
@media (max-width: 1023px), (pointer: coarse) {
    .erp-rs .oui-btn,
    .erp-rs .btn,
    .erp-rs button { min-height: var(--erpr-tap); }

    .erp-rs .btn-icon,
    .erp-rs .oui-icon-btn { min-width: var(--erpr-tap); }

    /* نوار ابزاری که جا نمی‌شود باید بشکند، نه اینکه صفحه را پاره کند. */
    .erp-rs header,
    .erp-rs .oui-toolbar,
    .erp-rs .toolbar { flex-wrap: wrap; }
    /* دکمه‌ی کوچک داخل ردیف جدول استثناست — اطرافش فضا هست و بزرگ‌کردنش
       ردیف را می‌شکند. به‌جایش ناحیه‌ی لمسی را با padding مجازی بزرگ می‌کنیم. */
    .erp-rs td .oui-btn-sm,
    .erp-rs td .btn-sm {
        min-height: 32px;
        min-width: 32px;
        position: relative;
    }
    .erp-rs td .oui-btn-sm::after,
    .erp-rs td .btn-sm::after {
        content: "";
        position: absolute;
        inset: -6px;
    }
}

/* ============================================================================
   ۴.۱ کفِ لمسی بدون دست زدن به تراکمِ ماژول‌ها
   ----------------------------------------------------------------------------
   قاعده‌ی بالا فقط `min-height` می‌گذارد و ماژول‌هایی که عمداً چگال‌اند آن را
   پس می‌گیرند: `Income.mobile.css` چیپ‌ها را ۳۶ و ۳۸ می‌کند، `Expenses` هم.
   آن تصمیم‌ها غلط نیستند — یک نوارِ فیلترِ ۴۴ پیکسلی روی گوشی نصفِ صفحه را
   می‌خورد. غلط این است که ناحیه‌ی لمسی هم با ظاهر کوچک بماند.

   پس ظاهر را رها می‌کنیم و **ناحیه‌ی لمس** را بزرگ می‌کنیم: یک لایه‌ی نامرئیِ
   وسط‌چین که دستِ‌کم ۴۴×۴۴ است. چون `position: absolute` است، در چیدمان هیچ
   جایی نمی‌گیرد و عرضِ نوار ابزار عوض نمی‌شود — همان چیزی که یک‌بار با
   `min-width` امتحان شد و نوارِ POS را ۹۶ پیکسل پهن کرد.

   ⚠ نه `pointer-events: none`: کلِ فایده همین است که کلیک را بگیرد. لایه
     فرزندِ خودِ دکمه است، پس رویدادش به همان دکمه می‌رسد.

   ⚠ چرا `:where()` برای `position`: بعضی دکمه‌ها خودشان `position: absolute`
     دارند (`.gd-pweye` روی صفحه‌ی ورودِ اپ). اگر این قاعده وزن داشته باشد
     آن‌ها را به `relative` برمی‌گرداند و از جایشان می‌کَند. با `:where()` وزن
     صفر می‌شود، پس هر تصمیمِ صریحِ ماژول برنده است و این فقط جای خالی را
     پر می‌کند.

   ⚠ اسپینرِ حالتِ لودینگ (`.is-loading::after`, `.pa-loading::after`) وزنِ
     بیشتری دارد و دست‌نخورده می‌ماند — سنجیده شد، هر ۲۵ مورد.

   همین الگو از قبل در `Design_System/oui-filterbar.css` بود (`inset: -13px`)؛
   اینجا فقط از یک ماژول به قاعده‌ی سامانه ارتقا پیدا می‌کند.
   ========================================================================== */
@media (max-width: 1023px), (pointer: coarse) {
    :where(.erp-rs button,
           .erp-rs .btn,
           .erp-rs .oui-btn,
           .erp-rs [role="button"],
           .erp-rs a.btn) { position: relative; }

    .erp-rs button::after,
    .erp-rs .btn::after,
    .erp-rs .oui-btn::after,
    .erp-rs [role="button"]::after,
    .erp-rs a.btn::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        min-width: var(--erpr-tap);
        min-height: var(--erpr-tap);
        /* پشتِ محتوای خودِ دکمه بماند و روی چیزی که z-index دارد نیفتد. */
        z-index: 0;
        border-radius: inherit;
    }

    /* دکمه‌ای که واقعاً نباید ناحیه‌اش بزرگ شود (کنارِ دکمه‌ی دیگر، فاصله‌ی
       کمتر از ۸ پیکسل) خودش را علامت بزند. */
    .erp-rs .erp-no-tap-grow::after { display: none; }
}

/* ============================================================================
   ۵. مودال و کشو
   روی گوشی، مودالِ وسط‌چینِ با عرض ثابت یا بیرون می‌زند یا آنقدر کوچک است که
   فرمش خوانده نمی‌شود. الگوی درست روی گوشی «شیت پایینی» است.
   ========================================================================== */
@media (max-width: 767px) {
    .erp-rs .oui-modal,
    .erp-rs .veh-modal,
    .erp-rs .modal-content {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        width: auto !important;
        max-width: none !important;
        /* ⚠⚠ `vh` روی مرورگرِ گوشی ارتفاعِ **بزرگ** را می‌شمارد — یعنی
           ناحیه‌ای که زیرِ نوارِ آدرس می‌رود هم حساب می‌شود. پس ۹۰vh
           روی گوشیِ واقعی یعنی بخشی از کشو دیده نمی‌شود و کاربر
           می‌گوید «نصفه باز می‌شود» (۱۵ شهریور ۱۴۰۵).
           `dvh` همین را حل می‌کند. خطِ `vh` عمداً مانده: مرورگری که
           `dvh` ندارد خطِ دوم را نامعتبر می‌شمارد و همان ۹۰vh را نگه می‌دارد.
           این روی هر مودالِ ERP اثر دارد، نه فقط دفتر درآمد. */
        max-height: 90vh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 20px 20px 0 0 !important;
        display: flex;
        flex-direction: column;
    }
    .erp-rs .modal-body,
    .erp-rs .veh-modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
    }
    /* نوار دکمه‌ها بچسبد پایین، وگرنه «ذخیره» زیر تا خوردن فرم گم می‌شود. */
    .erp-rs .modal-foot,
    .erp-rs .veh-modal-foot {
        position: sticky;
        bottom: 0;
        background: inherit;
        flex-wrap: wrap;
    }
    .erp-rs .modal-foot > *,
    .erp-rs .veh-modal-foot > * { flex: 1 1 auto; }
}

/* ============================================================================
   ۶. عرض‌های ثابت
   ده صفحه عرض ثابت ≥۳۰۰px دارند؛ بدترینشان POS با ۱۲۰۰ و
   Product_Introduction با ۱۱۰۰. روی گوشی هر کدامشان صفحه را پاره می‌کند.

   ⚠ چرا !important: این عرض‌ها اغلب style درون‌خطی‌اند و استایل درون‌خطی از
     شیت معمولی قوی‌تر است. `max-width` فقط سقف می‌گذارد و چیزی را کوچک‌تر از
     محتوایش نمی‌کند، پس امن است.
   ========================================================================== */
@media (max-width: 1023px) {
    .erp-rs .oui-card,
    .erp-rs .oui-tile,
    .erp-rs .oui-panel,
    .erp-rs .card { max-width: 100% !important; }
}

/* ============================================================================
   ۶.۱ ردیف‌هایی که نمی‌شکنند
   روی ۳۷۵ پیکسل، یک ردیفِ flex با `<div style="width:220px">` و
   `<div style="width:110px">` کنار هم، ۶۲۵ پیکسل می‌شود و کل صفحه را می‌کشد.
   نه عنصری «عریض» است و نه چیزی در CSS غلط — فقط جمعشان جا نمی‌شود.

   ⚠ چرا سلکتور زیررشته‌ای: نام کلاس‌ها در ۳۵ ماژول یکسان نیست
   (`cal-bar`، `cs-topbar-inner`، `head-actions`، `flex-between`, …). گرفتنِ
   قرارداد نام‌گذاری از گرفتنِ تک‌تک نام‌ها مقاوم‌تر است، و `flex-wrap` روی
   عنصری که flex نیست بی‌اثر است — پس هزینه‌ی خطای مثبت صفر است.
   ========================================================================== */
@media (max-width: 767px) {
    .erp-rs header,
    .erp-rs nav,
    .erp-rs [class*="bar"],
    .erp-rs [class*="toolbar"],
    .erp-rs [class*="actions"],
    .erp-rs [class*="head"],
    .erp-rs [class*="filter"],
    .erp-rs [class*="tabs"],
    .erp-rs [class*="between"],
    .erp-rs .oui-wrap,
    .erp-rs .flex { flex-wrap: wrap; }

    /* و فرزندانشان باید اجازه‌ی کوچک شدن داشته باشند، وگرنه wrap هم نجاتشان
       نمی‌دهد — همان min-width: auto آیتم فلکس، یک سطح پایین‌تر. */
    .erp-rs header > *,
    .erp-rs nav > *,
    .erp-rs [class*="bar"] > *,
    .erp-rs [class*="actions"] > *,
    .erp-rs [class*="head"] > *,
    .erp-rs [class*="between"] > *,
    .erp-rs .flex > * { min-width: 0; }

    /* ردیفی که واقعاً نباید بشکند، خودش را علامت بزند. */
    .erp-rs .erp-keep-row { flex-wrap: nowrap !important; }

    /* عرض ثابتِ درون‌خطی روی گوشی سقف می‌خورد. max-width چیزی را کوچک‌تر از
       محتوایش نمی‌کند، فقط اجازه می‌دهد در ظرف باریک جا شود یا بشکند. */
    .erp-rs [style*="width:"] { max-width: 100% !important; }
}

/* ============================================================================
   ۷. کمکی‌ها — تا ماژول‌ها بریک‌پوینت خودسر ننویسند
   ========================================================================== */
.erp-rs .erp-only-phone  { display: none; }
.erp-rs .erp-from-md,
.erp-rs .erp-from-lg,
.erp-rs .erp-from-xl     { display: none; }

@media (max-width: 767px) {
    .erp-rs .erp-only-phone { display: revert; }
    .erp-rs .erp-hide-phone { display: none !important; }
    /* ستون‌های کناری روی گوشی زیر محتوا می‌روند، نه کنارش */
    .erp-rs .erp-stack-phone { display: block !important; }
    .erp-rs .erp-stack-phone > * { width: auto !important; }
}
@media (min-width: 768px)  { .erp-rs .erp-from-md { display: revert; } }
@media (min-width: 1024px) { .erp-rs .erp-from-lg { display: revert; } }
@media (min-width: 1280px) { .erp-rs .erp-from-xl { display: revert; } }

/* ============================================================================
   ۸. فاصله‌ی لبه روی گوشی
   ۲۴ پیکسل padding روی صفحه‌ی ۳۷۵ پیکسلی یعنی ۱۳٪ عرض صفحه هدر می‌رود.
   ========================================================================== */
@media (max-width: 639px) {
    .erp-rs .p-4  { padding: var(--erpr-gutter-phone) !important; }
    .erp-rs .px-4 { padding-inline: var(--erpr-gutter-phone) !important; }
}

/* ============================================================================
   ۹. چاپ — جدول‌ها نباید اسکرول‌شونده چاپ شوند
   ========================================================================== */
@media print {
    .erp-rs table { display: table !important; overflow: visible !important; }
    .erp-rs .tbl-scroll { overflow: visible !important; }
    .erp-rs .erp-no-print { display: none !important; }
}

/* ----------------------------------------------------------------------------
   ریشه‌ی مشترکِ تقریباً هر سرریز افقی: min-width: auto
   ----------------------------------------------------------------------------
   هر آیتم فلکس و هر آیتم گرید به‌طور پیش‌فرض `min-width: auto` دارد، یعنی
   حاضر نیست کوچک‌تر از عرضِ min-content محتوایش شود. یک جدول با سرصفحه‌ی
   نشکن، یا یک عنوان بلند، همین‌جا کلِ ستون را پهن می‌کند و چون والدش هم
   همین قاعده را دارد، پهنی تا خودِ <body> بالا می‌رود. نتیجه‌اش سندی است
   ۹۸۴ پیکسلی روی صفحه‌ی ۳۷۵ پیکسلی، بدون اینکه هیچ عنصری پهن‌تر از ۴۰۰
   پیکسل باشد — به همین دلیل با نگاه کردن به «پهن‌ترین عنصر» پیدا نمی‌شود.

   :where() عمداً است: وزن انتخابگر را صفر می‌کند، پس هر صفحه‌ای که واقعاً
   به min-width نیاز دارد با یک قاعده‌ی معمولی آن را پس می‌گیرد.

   فقط تا تبلت. روی دسکتاپ فضا هست و این قاعده لازم نیست.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .erp-rs :where(div, section, main, article, aside, header, footer, form, nav, ul, ol, li) {
        min-width: 0;
    }
}