/* ============================================================================
   ERP_Mobile_Table.css — کارتِ ردیفی (Row Card) روی گوشی
   PLACE AT: دامنه ERP مستأجر/ERP_Mobile_Table.css
   ----------------------------------------------------------------------------
   چرا این فایل هست:

   لایه‌ی قبلی (ERP_Responsive.css) جدولِ ۹ ستونی را روی گوشی «اسکرول‌پذیر»
   می‌کرد. یعنی باگ چیدمان تبدیل می‌شد به زحمتِ کاربر: انگشت‌کشیدنِ افقیِ کور
   برای پیدا کردن یک ستون. این فایل به‌جای کوچک‌کردن، **طراحی** می‌کند:

       هر ردیف = یک کارت
       خط ۱  : [چک‌باکس] [تصویر] نام ..................... [جزئیات ▾]
       خط ۲  : قیمت · وضعیت            ← فقط دو ستونِ کلیدی
       باز   : بقیه‌ی ستون‌ها به شکل «برچسب: مقدار» + ردیف عملیات

   ⚠⚠ قاعده‌ی بنیادی این لایه: **هیچ گره‌ای از DOM جابه‌جا یا کپی نمی‌شود.**
     PIM.js با `closest('#product-tbody tr')`، درگ‌واِندراپ روی `tr` و
     `querySelectorAll('td')[i]` کار می‌کند. هر راه‌حلی که سلول را از ردیف
     بیرون ببرد یا clone کند، این‌ها را بی‌صدا می‌شکند. اینجا فقط دو چیز اضافه
     می‌شود: یک صفت `data-emt` روی سلول‌های موجود، و یک دکمه داخل سلول اصلی.

   ⚠ چرا `nth-child` ممنوع است: PIM قبلاً ۱۵۰ خط CSS موبایل با
     `td:nth-child(9)` داشت و PIM_Approval که یک ستون وسط جدول تزریق می‌کند،
     همه‌ی شماره‌ها را یک واحد جابه‌جا می‌کرد. نقش سلول باید از **معنایش**
     بیاید نه از **شماره‌اش**. نقش‌ها را ERP_Mobile_Table.js می‌نویسد.

   ⚠ چرا `body.erp-rs` نه `.erp-rs`: ERP_Responsive.css قاعده‌ی
     `.erp-rs table:not(.erp-keep-table){display:block;overflow-x:auto}` دارد
     که specificity اش دقیقاً برابر `.erp-rs table.emt` است. با تکیه بر ترتیب
     بارگذاری، یک روز که کسی جای <link> ها را عوض کند همه‌چیز بی‌صدا برمی‌گردد
     به اسکرول افقی. `body.erp-rs` یک پله بالاتر است و به ترتیب کاری ندارد.

   ⚠ بالای ۷۶۷ این فایل هیچ کاری نمی‌کند — جدول همان جدول است.
   ============================================================================ */

:root {
    --emt-surface:   #ffffff;
    --emt-surface-2: #f8fafc;
    --emt-line:      #e2e8f0;
    --emt-text:      #0f172a;
    --emt-soft:      #64748b;
    --emt-accent:    #2563eb;
    --emt-accent-bg: #eff6ff;
    --emt-radius:    16px;
}

/* دکمه‌ی جزئیات روی دسکتاپ اصلاً وجود ندارد. JS آن را می‌سازد چون ممکن است
   کاربر پنجره را کوچک کند؛ ولی تا وقتی جدول جدول است، دیده نمی‌شود. */
.emt-more { display: none; }

@media (max-width: 767px) {

/* ============================================================================
   ۱. اسکلت — جدول از حالت جدول درمی‌آید
   ========================================================================== */

body.erp-rs table.emt {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;   /* اسکرول افقی دیگر لازم نیست */
    border-collapse: separate;
    border-spacing: 0;
    background: transparent !important;
}

/* سربرگ حذف می‌شود چون متنش به شکل برچسب داخل هر کارت تکرار شده است. */
body.erp-rs table.emt > thead { display: none; }

body.erp-rs table.emt > tbody,
body.erp-rs table.emt > tfoot { display: block; }

/* ظرفِ دورِ جدول دیگر نباید اسکرول افقی بدهد، وگرنه کارت‌ها داخل یک نوار
   باریک زندانی می‌شوند. */
body.erp-rs .emt-host { overflow-x: visible !important; }

/* ============================================================================
   ۲. کارت
   ========================================================================== */

body.erp-rs table.emt > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px !important;
    margin: 0 0 10px !important;
    background: var(--emt-surface);
    border: 1px solid var(--emt-line) !important;
    border-radius: var(--emt-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    color: var(--emt-text);
}

body.erp-rs table.emt > tbody > tr > td {
    display: flex;
    align-items: center;
    padding: 0 !important;
    border: 0 !important;
    text-align: right;
    white-space: normal;            /* لایه‌ی قبلی nowrap گذاشته بود */
    font-size: 13px;
    line-height: 1.7;
}

/* ردیفی که ستون‌هایش با سربرگ نمی‌خواند (پیام «داده‌ای نیست»، اسپینر،
   ردیفِ جمع با colspan) کارت نمی‌شود؛ همان‌طور که هست تمام‌عرض می‌ماند. */
body.erp-rs table.emt > tbody > tr[data-emt-skip] {
    display: block;
    text-align: center;
    background: transparent;
    border: 0 !important;
    box-shadow: none;
}
body.erp-rs table.emt > tbody > tr[data-emt-skip] > td { display: block; }

/* ============================================================================
   ۳. خط ۱ — چک‌باکس، تصویر، نام، دکمه‌ی جزئیات
   ========================================================================== */

/* ⚠ چک‌باکس سمت **چپ** کارت — خواسته‌ی صریح کاربر، و در RTL چپ یعنی
   inline-end. پس بالاترین order را می‌گیرد و با margin-inline-start:auto تا
   ته هل داده می‌شود. دکمه‌ی جزئیات دقیقاً سمت راستش می‌نشیند، چون داخل سلولِ
   نام است و به لبه‌ی inline-end همان سلول چسبیده. */
body.erp-rs table.emt td[data-emt="sel"] {
    order: 3;
    flex: 0 0 auto;
    margin-inline-start: auto;
}
body.erp-rs table.emt td[data-emt="sel"] input { width: 20px; height: 20px; }

/* ۴۸ و نه ۵۶: روی ۳۷۵ پیکسل هر پیکسلی که بندانگشتی می‌گیرد از عرضِ نام کم
   می‌شود، و نام تنها چیزی است که کاربر با آن ردیف را تشخیص می‌دهد. */
body.erp-rs table.emt td[data-emt="media"] { order: 1; flex: 0 0 48px; }
body.erp-rs table.emt td[data-emt="media"] img,
body.erp-rs table.emt td[data-emt="media"] > div {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    object-fit: cover;
    transform: none !important;     /* پیش‌نمایشِ hover روی گوشی چسبنده است */
}

/* ⚠ چرا padding-inline-end و دکمه‌ی absolute، نه flex:
   محتوای این سلول در ماژول‌های مختلف هرچیزی هست — یک div، سه span، متن با
   <br>. اگر سلول را flex کنم، چیدمان داخلیِ هر ماژول عوض می‌شود. با
   position:absolute هیچ‌چیزِ داخل سلول دست نمی‌خورد و فقط جای دکمه رزرو می‌شود.
   ⚠ inset-inline-end در RTL یعنی **چپ** — دکمه ته کارت می‌نشیند، نه روی نام. */
body.erp-rs table.emt td[data-emt="p1"] {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
    display: block;
    position: relative;
    padding-inline-end: 84px !important;
    font-weight: 700;
    font-size: 13.5px;
}

/* نام طولانی نباید در ۳ نقطه گم شود؛ روی کارت جا هست. */
body.erp-rs table.emt td[data-emt="p1"] .font-bold,
body.erp-rs table.emt td[data-emt="p1"] > div {
    display: block !important;
    max-width: none !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
}

body.erp-rs table.emt .emt-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: var(--emt-accent-bg);
    color: var(--emt-accent);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
body.erp-rs table.emt .emt-more::after {
    content: "▾";
    font-size: 10px;
    line-height: 1;
}
body.erp-rs table.emt tr.emt-open .emt-more::after { content: "▴"; }

/* ============================================================================
   ۴. خط ۲ — دو ستونِ کلیدی
   ========================================================================== */

/* شکستِ عمدی خط. بدون این، p2 کنار نام می‌چسبد و کارت شلوغ می‌شود. */
body.erp-rs table.emt > tbody > tr::before {
    content: "";
    order: 4;
    flex: 0 0 100%;
    height: 0;
}

body.erp-rs table.emt td[data-emt="p2"] { order: 5; }
body.erp-rs table.emt td[data-emt="p3"] { order: 6; }

body.erp-rs table.emt td[data-emt="p2"],
body.erp-rs table.emt td[data-emt="p3"] {
    flex: 0 0 auto;
    max-width: 100%;
    gap: 4px;
    font-size: 12px;
    color: var(--emt-soft);
}
body.erp-rs table.emt td[data-emt="p2"]::before,
body.erp-rs table.emt td[data-emt="p3"]::before {
    content: attr(data-emt-label) "‏:";
    color: var(--emt-soft);
    font-size: 11px;
    flex: 0 0 auto;
}
/* مقدارِ کلیدی پررنگ‌تر از برچسبش باشد، وگرنه چشم اول برچسب را می‌خواند. */
body.erp-rs table.emt td[data-emt="p2"] { color: var(--emt-text); font-weight: 700; }

/* ============================================================================
   ۵. ناحیه‌ی باز — بقیه‌ی ستون‌ها
   ========================================================================== */

body.erp-rs table.emt td[data-emt="rest"],
body.erp-rs table.emt td[data-emt="act"] { display: none; }

body.erp-rs table.emt tr.emt-open td[data-emt="rest"] {
    display: flex;
    order: 8;
    flex: 0 0 100%;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0 !important;
    border-top: 1px dashed var(--emt-line) !important;
    font-size: 12.5px;
}
body.erp-rs table.emt tr.emt-open td[data-emt="rest"]::before {
    content: attr(data-emt-label);
    flex: 0 0 auto;
    color: var(--emt-soft);
    font-size: 11.5px;
}
/* مقدار سمت چپ جمع شود و اگر بلند بود بشکند، نه اینکه کارت را پهن کند. */
body.erp-rs table.emt tr.emt-open td[data-emt="rest"] > * {
    min-width: 0;
    text-align: left;
}

body.erp-rs table.emt tr.emt-open td[data-emt="act"] {
    display: flex;
    order: 9;
    flex: 0 0 100%;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    padding-top: 10px !important;
    margin-top: 2px;
    border-top: 1px solid var(--emt-line) !important;
}
body.erp-rs table.emt tr.emt-open td[data-emt="act"] button,
body.erp-rs table.emt tr.emt-open td[data-emt="act"] a {
    min-height: 40px;
    min-width: 40px;
}

/* جدولی که با data-emt-actions="row" علامت خورده، عملیاتش همیشه روی کارت است.
   برای صفحه‌هایی مثل صف تأیید که کاربر پشت‌سرهم اقدام می‌کند. */
body.erp-rs table.emt[data-emt-actions="row"] td[data-emt="act"] {
    display: flex;
    order: 7;
    flex: 0 0 100%;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 8px !important;
    border-top: 1px solid var(--emt-line) !important;
}

/* سلولِ خالی که فقط «—» دارد، در ناحیه‌ی باز نویز است. */
body.erp-rs table.emt tr.emt-open td[data-emt="rest"][data-emt-empty] { opacity: .45; }

}   /* پایان @media (max-width: 767px) */

/* ============================================================================
   ۶. چاپ — کارت هرگز چاپ نمی‌شود
   کاربر ممکن است از گوشی «چاپ/PDF» بگیرد؛ آن خروجی باید جدول باشد.
   ========================================================================== */
@media print {
    .emt-more { display: none !important; }
    table.emt { display: table !important; }
    table.emt > thead { display: table-header-group !important; }
    table.emt > tbody { display: table-row-group !important; }
    table.emt > tbody > tr { display: table-row !important; }
    table.emt > tbody > tr > td { display: table-cell !important; }
}