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

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

   ⚠⚠ سامانه زوم ندارد. برخلاف فروشگاه که از ۱۰۲۴ به بالا `zoom: 0.8` می‌خورد و
     عدد «واقعی» با «مجازی» فرق می‌کند، اینجا هر دو یکی‌اند. عددی که می‌بینی
     همان است که می‌نویسی. کاشی‌های داشبورد عمداً برای ۱۰۰٪ تنظیم شده‌اند.
     پس ضریب ۰٫۸ را اینجا اعمال **نکن**.

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

       نام    از      دستگاه
       ----   -----   -------------------------------------------
       (پایه) 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;
    --erpr-tap:           44px;   /* حداقل هدف لمسی */
}

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

/* رسانه هیچ‌وقت از ظرفش بیرون نزند. بدون این، یک تصویر ۱۲۰۰ پیکسلی کل صفحه را
   روی گوشی پاره می‌کند و کاربر فکر می‌کند «سایت خراب است». */
.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) {
    .erp-rs input:not([type="checkbox"]):not([type="radio"]),
    .erp-rs select,
    .erp-rs textarea { font-size: 16px; }
}

/* گرید فرم روی گوشی یک‌ستونی. ماژول‌ها 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;
    }
}

/* ============================================================================
   ۵. مودال و کشو
   روی گوشی، مودالِ وسط‌چینِ با عرض ثابت یا بیرون می‌زند یا آنقدر کوچک است که
   فرمش خوانده نمی‌شود. الگوی درست روی گوشی «شیت پایینی» است.
   ========================================================================== */
@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;
        max-height: 90vh !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;
    }
}