/*!
 * S2_overview_layout.css — چیدمانِ صفحهٔ «تیکت‌ها» برای Zammad 7.1.3 (crm.persianway.co)
 * S2 overviews-page layout. DISPLAY ONLY — no Zammad file is edited.
 *
 * چه می‌کند / WHAT IT DOES
 *   ۱) ستونِ عمودیِ فهرستِ نماها (سمتِ کنارِ جدول) پنهان می‌شود.
 *   ۲) همان فهرست، به صورتِ نوارِ افقی در بالای صفحه نشان داده می‌شود.
 *   ۳) جدولِ تیکت‌ها تمامِ عرضِ صفحه را می‌گیرد.
 *   ۴) عنوانِ ستونِ اول جا می‌شود («شماره تیکت» به‌جای «#»، دو خطی اگر لازم شد).
 *
 * این یک چیدمانِ تازه نیست — همین چیدمان را خودِ Zammad دارد و فقط پشتِ یک
 * media query در عرضِ ۱۲۶۰ پیکسل قفل کرده. ما فقط قفل را برمی‌داریم:
 *   @media screen and (max-width:1260px){.overviews .sidebar{display:none}}
 *   @media screen and (max-width:1260px){.overview-header{display:flex}}
 * (هر دو، عیناً، در application-…css نسخهٔ ۷.۱.۳ هست.)
 * This is NOT a new layout. Zammad already ships it; it is merely gated at
 * 1260px. Everything below un-gates that same layout and repairs the three
 * things Zammad's own stylesheet gets wrong once it is on at every width.
 *
 * دامنه / SCOPE
 *   هر قاعده به .overviews محدود شده. .sidebar و .table-overview و .main در
 *   Zammad عمومی‌اند (زوم تیکت، ساختِ تیکت، دانش‌نامه، پنلِ مدیریت …) و یک
 *   قاعدهٔ بدونِ دامنه، کلِ سایت را خراب می‌کند. .overviews فقط روی همین صفحه است.
 *   EVERY rule is scoped to .overviews. Bare .sidebar / .main / .table-overview
 *   are global in Zammad (ticket zoom, ticket create, knowledge base, EVERY
 *   admin list page) — an unscoped rule here is a site-wide break, not a
 *   cosmetic one.
 *
 * راست‌به‌چپ / RTL
 *   هر قاعده‌ای که جهت دارد، جفتِ html[dir=rtl] خودش را دارد. Zammad برای
 *   .tabs-clone جفتِ RTL را جا انداخته؛ در بندِ ۳ جبران شده.
 *
 * نسخه: هر بار که این فایل عوض شد، ?v= در zz_s2_jalali.conf را یکی زیاد کنید.
 * bump ?v=N in zz_s2_jalali.conf on every edit (assets are served `expires max`).
 *
 * برداشتن / REMOVE:  sh /root/workspaces/S2_zammad/S2_jalali_undo.sh
 */

/* ═══════════════════════════════════════════════════════════════════════
   ۱. برداشتنِ قفلِ ۱۲۶۰ پیکسل  /  un-gate Zammad's own responsive layout
   ═══════════════════════════════════════════════════════════════════════
   :not(.hidden) عمدی است. navbar.coffee وقتی کاربر ۱ نما یا کمتر دارد به
   .overview-header کلاسِ .hidden می‌دهد. بدونِ این شرط، چنین کاربری هم نوارِ
   بالا را از دست می‌داد و هم ستونِ کناری را — یعنی هیچ راهِ جابه‌جایی بینِ نماها.
   :not(.hidden) is deliberate: navbar.coffee adds .hidden to .overview-header
   when a user has <=1 overview. The :has() guard makes hiding the sidebar
   CONDITIONAL on the horizontal strip actually being shown, so such a user can
   never end up with no overview navigation at all. If a browser lacks :has(),
   the sidebar simply stays visible — degraded, never broken. */
.overviews:has(> .main > .overview-header:not(.hidden)) > .sidebar {
  display: none;
}
.overviews > .main > .overview-header:not(.hidden) {
  display: flex;
}

/* ═══════════════════════════════════════════════════════════════════════
   ۲. ارتفاعِ نوار  /  let the strip breathe
   ═══════════════════════════════════════════════════════════════════════
   Zammad ارتفاع را روی 41px قفل کرده. با ۱۱ نمای فارسی، اگر نوار به خطِ دوم
   برود از کادر بیرون می‌زند و روی جدول می‌افتد. min-height همان ظاهر را
   نگه می‌دارد ولی سرریز نمی‌کند.
   Zammad hard-codes height:41px. Keep that as a MINIMUM so a second row can
   never overflow onto the table. Identical appearance while it fits one row. */
.overviews > .main > .overview-header {
  height: auto;
  min-height: 41px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ۳. رفعِ ایرادِ راست‌به‌چپِ خودِ Zammad  /  the RTL bug Zammad ships
   ═══════════════════════════════════════════════════════════════════════
   .js-tabsClone یک نسخهٔ نامرئیِ نوار است که فقط برای «اندازه‌گیری» ساخته می‌شود
   (opacity:0, position:absolute). Zammad برایش .overview-header .tabs-clone{right:0}
   نوشته و هیچ جفتِ html[dir=rtl] ندارد — بررسی شد، در کلِ CSS فقط همین یک قاعده
   برای tabs-clone وجود دارد. تا امروز بی‌ضرر بوده چون والدش display:none بود.
   حالا که نوار دیده می‌شود، در RTL این نسخهٔ نامرئی می‌تواند از لبه بیرون بزند و
   یک اسکرول‌بارِ افقیِ الکی بسازد.
   Zammad's ONLY tabs-clone rule is `.overview-header .tabs-clone{right:0}` with
   no html[dir=rtl] counterpart (verified across the whole shipped stylesheet).
   Harmless only while the parent was display:none. Pin it to the start edge. */
html[dir=rtl] .overviews > .main > .overview-header .tabs-clone {
  right: auto;
  left: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   ۴. نوارِ «انتخابِ گروهی»  /  re-seat the bulk-action bar
   ═══════════════════════════════════════════════════════════════════════
   .bulkAction با position:fixed و فاصلهٔ ۵۴۰ پیکسل چسبیده (۲۸۰ ستونِ کناری +
   ۲۶۰ منوی راستِ برنامه). ستونِ کناری رفته، پس ۲۸۰ پیکسل فاصلهٔ اضافه می‌ماند.
   اعدادِ زیر اختراعی نیست: عیناً همان چیزی است که خودِ Zammad در
   .bulkAction.no-sidebar دارد (left:260px / rtl right:260px / min-width:764px).
   These numbers are NOT invented — they are copied verbatim from Zammad's own
   `.bulkAction.no-sidebar` modifier, which exists in the shipped CSS for
   exactly this situation but is never applied on the overviews page.
   Specificity (0,2,0) + later in document order beats `.bulkAction` and the
   `@media (min-width:1260px){.bulkAction{left:540px}}` rule. */
@media screen and (min-width: 1260px) {
  .overviews .bulkAction { left: 260px; right: 0; }
  html[dir=rtl] .overviews .bulkAction { right: 260px; left: 0; }
}
/* زیرِ ۱۲۶۰ پیکسل هیچ override ی نداریم: خودِ Zammad آنجا ستونِ کناری را پنهان
   می‌کند و نوار را جابه‌جا می‌کند (و زیرِ ۷۶۷ برای موبایل هم قاعده دارد).
   نسخه‌ی قبلی این قاعده‌ها را در همه‌ی عرض‌ها می‌شکست. */

/* ═══════════════════════════════════════════════════════════════════════
   ۵. جا شدنِ «شماره تیکت» در ستونِ اول  /  make the renamed header fit
   ═══════════════════════════════════════════════════════════════════════
   عنوانِ ستون از «#» به «شماره تیکت» عوض شده (از راهِ ترجمهٔ خودِ Zammad، نه اینجا).
   آن ستون ۶۸ پیکسل است و Zammad همهٔ عنوان‌ها را تک‌خطی و با «…» می‌بُرد، پس
   «شماره تیکت» بریده می‌شد. اینجا فقط به همین یک عنوان اجازهٔ دو خطی شدن داده‌ایم.
   The header was renamed to «شماره تیکت» via Zammad's own Translation store.
   That column is 68px and Zammad truncates every header to one line with an
   ellipsis, so it would clip. Let THIS ONE header wrap instead.

   ⚠️ عمداً هیچ width اینجا ست نشده. عرضِ ستون‌ها را جاوااسکریپت به پیکسل حساب
   می‌کند طوری که جمعشان دقیقاً عرضِ جدول شود؛ با table-layout:fixed یک width
   اجباری آن جمع را به هم می‌زند و جدول را به اسکرولِ افقی می‌اندازد.
   DELIBERATELY no width here. setHeaderWidths() writes inline pixel widths that
   sum exactly to availableWidth; under table-layout:fixed, forcing one column
   breaks that sum and pushes the table into horizontal overflow.

   Specificity (0,4,1) beats Zammad's truncation rule
   `.table th:not(.noTruncate) .table-column-title` (0,3,1) with no !important. */
.overviews .table-overview th[data-column-key="number"] .table-column-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════════════════
   ۶. همه‌ی فهرست‌ها دیده شوند؛ منوی همبرگری فقط برای موبایل
   ═══════════════════════════════════════════════════════════════════════
   خواسته‌ی مالک: «همه آیتم‌ها رو همون جا نشون بده، نیاز نباشه منو رو بزنیم».
   Zammad در navbar.coffee:62-65 تا وقتی نوار جا نشود، آخرین تبِ دیده‌شده را
   .hide می‌کند و به‌جایش سطرِ متناظر را در منوی کشویی باز می‌کند. یعنی تب‌ها
   از DOM حذف نمی‌شوند، فقط کلاسِ .hide می‌گیرند — پس با CSS برمی‌گردند.
   نکته‌ی حیاتی: این قاعده‌ها فقط روی نوارِ واقعی (js-tabs) اعمال می‌شوند و
   هرگز روی .tabs-clone. آن نسخه‌ی نامرئی همان چیزی است که حلقه‌ی while با آن
   عرض را می‌سنجد؛ اگر آن را هم نمایان کنیم، شرطِ حلقه هیچ‌وقت برقرار نمی‌شود.
   Rules apply ONLY to .js-tabs, never to .tabs-clone — the clone is what the
   while-loop measures, and un-hiding it would make that loop never terminate. */
@media screen and (min-width: 900px) {
  .overviews > .main > .overview-header .js-tabs {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .overviews > .main > .overview-header .js-tabs > .tab.hide {
    display: flex !important;
  }
  /* دکمه‌ی همبرگری و منویش در دسکتاپ لازم نیست */
  .overviews > .main > .overview-header .js-tabs > .tab-dropdown,
  .overviews > .main > .overview-header .js-tabs > .js-dropdown {
    display: none !important;
  }
}
/* زیرِ ۹۰۰ پیکسل (موبایل/تبلت) رفتارِ خودِ Zammad دست‌نخورده می‌ماند:
   تب‌های اضافه پنهان و از راهِ همان همبرگری در دسترس‌اند. */

/* ═══════════════════════════════════════════════════════════════════════
   ۷. دو ردیفِ ۴تایی  /  exactly four per row
   ═══════════════════════════════════════════════════════════════════════
   خواسته‌ی مالک: «بیا دو ردیف ۴تایی کنیم». با ۸ نما یعنی ۴+۴ به‌جای ۵+۳.
   هر تب یک‌چهارمِ عرض می‌گیرد، پس تعدادِ نماها هر چه باشد همیشه ۴ در هر ردیف
   می‌نشیند. اسم‌های بلند با … کوتاه می‌شوند نه اینکه چیدمان را بشکنند.
   Each tab takes exactly 25% so the count per row stays 4 whatever the number
   of overviews; long Persian names ellipsize rather than break the grid. */
@media screen and (min-width: 900px) {
  .overviews > .main > .overview-header .js-tabs > .tab {
    flex: 0 0 25%;
    max-width: 25%;
    min-width: 0;
    box-sizing: border-box;
    justify-content: center;
  }
  .overviews > .main > .overview-header .js-tabs > .tab > .tab-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ۸. دکمه‌ی «گزینه‌ها» کنارِ عنوان، نه در گوشه‌ی دورافتاده
   ═══════════════════════════════════════════════════════════════════════
   خواسته‌ی مالک: «به جای اونجا بیار … بالا سرِ تیکت‌ها».
   Zammad با `margin-left:auto` (که در RTL می‌شود margin-right:auto) این دکمه را
   به لبه‌ی مقابلِ عنوان پرت می‌کند — zammad.scss:3355-3366. همان auto را خنثی
   می‌کنیم تا درست چسبیده به عنوانِ فهرست بنشیند، جایی که چشم اول آنجا می‌رود.
   Zammad throws this button to the far edge with an auto margin; neutralise it
   so it sits beside the overview title instead. */
.overviews .page-header > .page-header-meta,
.overviews .page-header > .page-header-title + .page-header-meta {
  margin-left: 0;
  margin-right: 12px;
  padding-left: 0;
  padding-right: 0;
}
html[dir=rtl] .overviews .page-header > .page-header-meta,
html[dir=rtl] .overviews .page-header > .page-header-title + .page-header-meta {
  margin-right: 0;
  margin-left: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ۹. تیکت‌های بازِ کاربر، جدا از منو  /  separate the open-ticket tabs
   ═══════════════════════════════════════════════════════════════════════
   خواسته‌ی مالک: «وقتی طرف تیکت‌های مختلف باز می‌کنه … باید عنوانی جدا بشه از
   منو سمت راست». امروز `.tasks-navigation` بدونِ هیچ عنوان یا جداکننده‌ای
   بلافاصله زیرِ منوی اصلی می‌نشیند، پس تیکت‌های بازِ کاربر با آیتم‌های ثابتِ
   منو قاطی می‌شوند و نوار «آشغال» به نظر می‌رسد.
   عنوان با ::before ساخته می‌شود — هیچ گره‌ای به DOM اضافه نمی‌کنیم، پس
   جاوااسکریپتِ Zammad که این ظرف را مدام دوباره می‌سازد دست‌نخورده می‌ماند.
   :empty هم هست تا وقتی هیچ تیکتِ بازی نیست، عنوانِ بی‌محتوا دیده نشود.
   Built with ::before so no DOM node is added — Zammad re-renders this
   container constantly and an injected element would be wiped. The :empty
   guard keeps the heading from showing when nothing is open. */
.navigation .tasks-navigation:not(:empty) {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid hsla(230, 4%, 84%, 0.16);
}
.navigation .tasks-navigation:not(:empty)::before {
  content: "تیکت‌های بازِ شما";
  display: block;
  padding: 4px 18px 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: hsla(230, 4%, 84%, 0.55);
  text-align: start;
}
/* در حالتِ جمع‌شده‌ی منو (فقط آیکون‌ها) عنوان جا نمی‌شود و باید مخفی بماند. */
#app.navigation-collapsed .navigation .tasks-navigation::before {
  display: none;
}