/* =====================================================================
   RFQ Core — Enterprise Design System  (v20.0 "Graphite & Copper")
   Single source of truth for the whole UI.
   Do NOT add page-level <style> blocks; extend this file instead.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------- */
:root {
  /* brand */
  --copper:        #b8703c;
  --copper-hover:  #a25f30;
  --copper-dark:   #8a4f27;
  --copper-soft:   #f7ede4;
  --copper-soft-2: #fbf6f1;

  --brand:        var(--copper);
  --brand-hover:  var(--copper-hover);
  --brand-dark:   var(--copper-dark);
  --brand-soft:   var(--copper-soft);
  --brand-soft-2: var(--copper-soft-2);

  /* navigation rail — light in day mode */
  --nav:          #ffffff;
  --nav-2:        #faf8f6;
  --nav-fg:       #000000;
  --nav-fg-dim:   #8b93a1;
  --nav-fg-strong: #1a1d22;
  --nav-border:   #e4e0d9;
  --nav-overlay:        rgba(20,22,26,.05);
  --nav-overlay-strong: rgba(20,22,26,.09);
  --nav-count-bg:       rgba(20,22,26,.08);
  --navy:         var(--nav);

  /* surfaces */
  --bg:           #f6f4f1;
  --surface:      #ffffff;
  --surface-2:    #faf8f6;
  --surface-3:    #f2efea;
  --text:         #1a1d22;
  --text-strong:  #0e1114;
  --muted:        #6d737e;
  --border:       #e4e0d9;
  --border-soft:  #eeebe5;

  /* semantic */
  --success:      #2f7d5b;
  --success-soft: #e8f3ee;
  --warning:      #a9791b;
  --warning-soft: #fbf1dd;
  --danger:       #b23a2c;
  --danger-soft:  #fbecea;
  --info:         #33608e;
  --info-soft:    #e9f0f7;

  /* radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-full: 999px;
  --radius: var(--r-lg);
  --radius-sm: var(--r-md);

  /* spacing scale (4pt) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  /* elevation */
  --shadow-sm: 0 1px 2px rgba(20,22,26,.05);
  --shadow:    0 2px 6px rgba(20,22,26,.06), 0 1px 2px rgba(20,22,26,.04);
  --shadow-md: 0 6px 20px rgba(20,22,26,.08);
  --shadow-lg: 0 18px 48px rgba(20,22,26,.14);
  --focus:     0 0 0 3px rgba(184,112,60,.22);

  /* type */
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13.5px; --fs-md: 15px;
  --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 27px;

  /* layout */
  --rail-w: 236px;
  --rail-w-collapsed: 60px;
  --header-h: 56px;

  --ease: cubic-bezier(.2,.7,.3,1);
}

:root { color-scheme: light; }

body.theme-dark,
html.theme-dark body {
  color-scheme: dark;
  /* brand is lifted in dark mode so copper keeps AA contrast on graphite */
  --copper:        #d08a52;
  --copper-hover:  #dd9a63;
  --copper-dark:   #e6b189;
  --copper-soft:   #33210f;
  --copper-soft-2: #1d1712;

  /* brand aliases must be re-declared here: var() indirection from :root
     resolves against :root values, so overriding --copper alone is not enough */
  --brand:        #d08a52;
  --brand-hover:  #dd9a63;
  --brand-dark:   #e6b189;
  --brand-soft:   #33210f;
  --brand-soft-2: #1d1712;

  --bg:           #0e1114;
  --surface:      #171a1f;
  /* رنگ سفارشیِ منوی ایمیل (تنظیمات ظاهر) فقط برای حالت روشن است — این مقدار
     با همان specificity رول تم تیره، آن سفارشی‌سازی را در حالت تیره خنثی می‌کند. */
  --mail-sidebar-bg: #171a1f;
  --surface-2:    #1c2027;
  --surface-3:    #22272f;
  --text:         #e8e6e2;
  --text-strong:  #ffffff;
  --muted:        #a3abb7;
  --border:       #2f353e;
  --border-soft:  #262b33;
  --nav:          #0b0d10;
  --nav-2:        #14171c;
  --nav-fg:       #d4d8df;
  --nav-fg-dim:   #8b93a1;
  --nav-fg-strong: #ffffff;
  --nav-border:   rgba(255,255,255,.07);
  --nav-overlay:        rgba(255,255,255,.07);
  --nav-overlay-strong: rgba(255,255,255,.12);
  --nav-count-bg:       rgba(255,255,255,.12);

  --success:      #4fae83;
  --success-soft: #14261f;
  --warning:      #d3a84b;
  --warning-soft: #2a2110;
  --danger:       #e2705f;
  --danger-soft:  #2b1512;
  --info:         #6ba3d8;
  --info-soft:    #101c28;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow:    0 2px 8px rgba(0,0,0,.45);
  --shadow-md: 0 8px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 20px 52px rgba(0,0,0,.6);
  --focus:     0 0 0 3px rgba(208,138,82,.28);
}


/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body, button, input, select, textarea, table {
  font-family: Vazirmatn, Tahoma, ui-sans-serif, system-ui, sans-serif;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { margin: 0; color: var(--text-strong); letter-spacing: -.01em; font-weight: 700; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }
p { margin: 0 0 var(--s-3); }
hr { border: 0; border-top: 1px solid var(--border-soft); margin: var(--s-4) 0; }
::selection { background: rgba(184,112,60,.18); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
button, summary, [role="button"], .btn, .rfq-rail-item, .rfq-icon-btn { cursor: pointer; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 35%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 55%, transparent); background-clip: content-box; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.text-muted, .muted { color: var(--muted) !important; }
.text-brand { color: var(--brand) !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.tabular, .num, .mono { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------
   3. App shell — topbar
   --------------------------------------------------------------- */
.rfq-top {
  position: sticky; top: 0; z-index: 45;
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-4);
  margin-inline-start: var(--rail-w);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border-soft);
  transition: margin .2s var(--ease);
}
body.rail-collapsed .rfq-top { margin-inline-start: var(--rail-w-collapsed); }

.rfq-top-brand { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }
.rfq-top-brand .mark {
  width: 32px; height: 32px; border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--copper), var(--copper-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 3px 10px rgba(184,112,60,.32);
}
.rfq-top-brand .name { font-weight: 700; font-size: var(--fs-base); color: var(--text-strong); white-space: nowrap; line-height: 1.25; }
.rfq-top-brand .name small { display: block; font-size: 10px; font-weight: 500; color: var(--muted); }

.rfq-top-search { flex: 1; max-width: 460px; margin-inline: auto; position: relative; }
.rfq-top-search input {
  width: 100%; height: 36px; border-radius: var(--r-lg);
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--border); background: var(--surface-2);
  padding-inline: 14px; font-size: var(--fs-sm); color: var(--text);
  transition: .15s var(--ease);
}
.rfq-top-search input::placeholder { color: var(--muted); }
.rfq-top-search input:focus { outline: none; background: var(--surface); border-color: var(--brand); box-shadow: var(--focus); }
.rfq-top-search input::-webkit-search-decoration,
.rfq-top-search input::-webkit-search-cancel-button,
.rfq-top-search input::-webkit-search-results-button,
.rfq-top-search input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; }
.rfq-top-search .ico { display: none; }
/* M32 (رفعِ باگ «دایره‌ی افتاده داخلِ باکسِ جستجو»): این SVG (آیکونِ ذره‌بین،
   یک circle برای عدسی + یک path برای دسته) هیچ‌وقت fill:none نداشت، پس
   مرورگر با fill پیش‌فرضِ SVG (سیاه/توپر) رندرش می‌کرد — یعنی عدسیِ ذره‌بین
   (circle با شعاعِ ۸) به‌جای یک حلقه، یک دایره‌ی توپر می‌شد؛ خطِ دسته هم چون
   مساحت ندارد با fill عملاً نامرئی بود، پس فقط همان دایره‌ی توپر دیده
   می‌شد. یک پچِ بعدی (اینجا حذف شد، قبلاً پایین‌ترِ همین فایل با !important
   بود) fill/stroke را جدا اصلاح می‌کرد ولی چون stroke-width/linecap/linejoin
   نداشت، نتیجه نیمه‌کاره می‌ماند. حالا این آیکون دقیقاً هم‌الگو با بقیه‌ی
   آیکون‌های همین فایل (مثلاً .rfq-icon-btn svg، خط ۲۴۰) کامل تعریف شده. */
.rfq-top-search .ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rfq-top-search kbd {
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: var(--muted); border: 1px solid var(--border);
  border-radius: var(--r-xs); padding: 1px 5px; background: var(--surface);
}
.rfq-top-actions { display: flex; align-items: center; gap: var(--s-1); margin-inline-start: auto; }

.rfq-icon-btn {
  width: 34px; height: 34px; border-radius: var(--r-full); border: 0;
  background: transparent; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: .15s var(--ease); position: relative;
}
.rfq-icon-btn:hover { background: var(--brand-soft); color: var(--brand-dark); }
.rfq-icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rfq-icon-btn .dot {
  position: absolute; top: 6px; inset-inline-end: 7px; width: 7px; height: 7px;
  border-radius: 999px; background: var(--danger); border: 2px solid var(--surface);
}

/* user menu */
.rfq-user-menu { position: relative; }
.rfq-user-avatar-btn {
  width: 34px; height: 34px; border-radius: var(--r-full); border: 0; padding: 0;
  background: var(--brand-soft); color: var(--brand-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-sm); overflow: hidden;
  box-shadow: 0 0 0 1px var(--border);
}
.rfq-user-avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
.rfq-user-dropdown {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 216px; padding: 6px; z-index: 90;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: .16s var(--ease);
}
.rfq-user-dropdown.open { opacity: 1; visibility: visible; transform: none; }
.rfq-user-drop-head { padding: 8px 10px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong); border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; }
.rfq-user-drop-head small { display: block; font-weight: 500; color: var(--muted); font-size: var(--fs-xs); }
.rfq-user-dropdown a, .rfq-user-dropdown button {
  display: flex; align-items: center; gap: var(--s-2); width: 100%;
  text-align: start; border: 0; background: transparent;
  padding: 9px 10px; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text); border-radius: var(--r-sm); font-family: inherit;
}
.rfq-user-dropdown a:hover, .rfq-user-dropdown button:hover { background: var(--brand-soft); color: var(--brand-dark); }
.rfq-user-dropdown .danger, .rfq-user-dropdown form:last-child button { color: var(--danger); }
.rfq-user-dropdown .danger:hover, .rfq-user-dropdown form:last-child button:hover { background: var(--danger-soft); color: var(--danger); }

/* ---------------------------------------------------------------
   4. App shell — sidebar rail
   --------------------------------------------------------------- */
.rfq-shell { margin-inline-start: var(--rail-w); min-height: calc(100vh - var(--header-h)); transition: margin .2s var(--ease); }
body.rail-collapsed .rfq-shell { margin-inline-start: var(--rail-w-collapsed); }

.rfq-rail {
  position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 60;
  width: var(--rail-w); height: 100vh;
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--s-3) 10px var(--s-2);
  background: var(--nav); color: var(--nav-fg);
  border-inline-end: 1px solid var(--nav-border);
  overflow-x: hidden; overflow-y: auto;
  transition: width .2s var(--ease), transform .2s var(--ease);
}
body.rail-collapsed .rfq-rail { width: var(--rail-w-collapsed); padding-inline: 10px; align-items: center; }

.rfq-rail-brand {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 6px 8px var(--s-3); margin-bottom: 6px;
  border-bottom: 1px solid var(--nav-border);
}
.rfq-rail-brand .mark {
  width: 30px; height: 30px; border-radius: var(--r-sm); flex-shrink: 0;
  background: linear-gradient(150deg, var(--copper), var(--copper-dark)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800;
}
.rfq-rail-brand .txt { font-size: var(--fs-sm); font-weight: 700; color: var(--nav-fg-strong); white-space: nowrap; overflow: hidden; }
.rfq-rail-brand .txt small { display: block; font-weight: 500; font-size: 10px; color: var(--nav-fg-dim); }
body.rail-collapsed .rfq-rail-brand .txt { display: none; }

.rfq-rail-group {
  padding: var(--s-4) 10px 4px; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--nav-fg-dim);
  white-space: nowrap;
}
body.rail-collapsed .rfq-rail-group { display: none; }
.rfq-rail-sep { height: 1px; background: var(--nav-border); margin: var(--s-2) 4px; }

.rfq-rail-item {
  position: relative;
  min-height: 27px; width: 100%; border-radius: var(--r-md);
  display: flex; align-items: center; gap: 10px; padding: 5px 10px;
  color: var(--nav-fg); font-size: var(--fs-sm); font-weight: 600;
  white-space: nowrap; transition: .14s var(--ease);
}
.rfq-rail-item .sym { flex-shrink: 0; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.rfq-rail-item .sym svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rfq-rail-item .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.rfq-rail-item .count {
  font-size: 10px; font-weight: 700; background: var(--nav-count-bg);
  color: var(--nav-fg-strong); border-radius: var(--r-full); padding: 1px 7px;
}
.rfq-rail-item:hover { background: var(--nav-overlay); color: var(--nav-fg-strong); }
.rfq-rail-item.active { background: rgba(184,112,60,.18); color: var(--nav-fg-strong); }
.rfq-rail-item.active::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 999px; background: var(--copper);
}
body.rail-collapsed .rfq-rail-item { width: 40px; height: 40px; padding: 0; justify-content: center; }
body.rail-collapsed .rfq-rail-item .lbl,
body.rail-collapsed .rfq-rail-item .count { display: none; }
/* tooltip when collapsed */
body.rail-collapsed .rfq-rail-item::after {
  content: attr(data-tip);
  position: absolute; inset-inline-start: calc(100% + 10px); top: 50%; transform: translateY(-50%) scale(.96);
  background: var(--nav-2); color: #fff; font-size: var(--fs-xs); font-weight: 600;
  padding: 5px 9px; border-radius: var(--r-sm); white-space: nowrap;
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: .14s var(--ease); z-index: 80;
}
body.rail-collapsed .rfq-rail-item:hover::after { opacity: 1; transform: translateY(-50%) scale(1); }

.rfq-rail-footer { margin-top: auto; padding-top: var(--s-2); border-top: 1px solid var(--nav-border); display: flex; }
.rfq-rail-toggle {
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--nav-overlay); color: var(--nav-fg);
  border: 1px solid var(--nav-border);
  display: flex; align-items: center; justify-content: center; margin-inline-start: auto;
}
.rfq-rail-toggle:hover { background: var(--nav-overlay-strong); color: var(--nav-fg-strong); }
.rfq-rail-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
[dir="rtl"] .rfq-rail-toggle svg { transform: scaleX(-1); }
body.rail-collapsed .rfq-rail-toggle svg { transform: scaleX(-1); }
[dir="rtl"] body.rail-collapsed .rfq-rail-toggle svg { transform: none; }

.rfq-scrim {
  position: fixed; inset: 0; z-index: 55; background: rgba(12,14,17,.5);
  opacity: 0; visibility: hidden; transition: .2s var(--ease);
}
body.mobile-nav-open .rfq-scrim { opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------
   5. Page header, content, tabs
   --------------------------------------------------------------- */
.rfq-workspace { display: flex; flex-direction: column; min-width: 0; }

.rfq-record-header {
  background: var(--surface); border-bottom: 1px solid var(--border-soft);
  padding: var(--s-4) var(--s-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
}
.rfq-record-meta { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.rfq-record-icon {
  width: 40px; height: 40px; border-radius: var(--r-md); flex-shrink: 0;
  background: var(--brand-soft); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
}
.rfq-record-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rfq-record-title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; }
.rfq-record-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

/* Every button in the record header reads as one family: same height,
   same radius/weight, and the system's brand-orange palette — a solid
   fill for the primary action, a soft orange fill for everything else,
   and soft red only for destructive actions. This also neutralises
   legacy ad-hoc styling (bare .btn-ghost, inline color on delete links)
   without having to touch every page that builds a header. */
.rfq-record-actions > .btn,
.rfq-record-actions > a.btn,
.rfq-record-actions form > .btn {
  height: 38px; padding: 0 16px; border-radius: var(--r-md); font-weight: 600;
}
.rfq-record-actions > .btn-ghost,
.rfq-record-actions > a.btn-ghost,
.rfq-record-actions form > .btn-ghost {
  background: var(--brand); color: #fff !important;
}
.rfq-record-actions > .btn-ghost:hover,
.rfq-record-actions > a.btn-ghost:hover,
.rfq-record-actions form > .btn-ghost:hover {
  background: var(--brand-hover);
}
/* legacy delete buttons styled with an inline color= instead of a
   proper danger class — normalise them to .btn-danger-soft's look */
.rfq-record-actions > .btn[style^="color:"],
.rfq-record-actions form > .btn[style^="color:"] {
  background: var(--danger-soft) !important; color: var(--danger) !important;
}
.rfq-record-actions > .btn[style^="color:"]:hover,
.rfq-record-actions form > .btn[style^="color:"]:hover {
  background: color-mix(in srgb, var(--danger-soft) 80%, var(--danger) 10%) !important;
}

.rfq-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 2px; }
.rfq-breadcrumb a { color: var(--muted); }
.rfq-breadcrumb a:hover { color: var(--brand); }
.rfq-breadcrumb .sep { opacity: .5; }

.rfq-highlights {
  background: var(--surface); border-bottom: 1px solid var(--border-soft);
  padding: var(--s-3) var(--s-5);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-4);
}
.rfq-content { padding: var(--s-4); margin-top: 0; display: flex; flex-direction: column; gap: var(--s-4); }
@media (max-width: 640px) { .rfq-content { padding: var(--s-3); } }

.rfq-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.rfq-page-title { font-size: var(--fs-lg); font-weight: 700; display: flex; align-items: center; gap: var(--s-2); }
.rfq-page-count { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-full); padding: 1px 9px; }
.rfq-page-sub { font-size: var(--fs-sm); color: var(--muted); margin: 2px 0 0; }
.rfq-page-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

.rfq-object-bar { background: var(--surface); border-bottom: 1px solid var(--border-soft); padding: var(--s-3) var(--s-5) 0; }
.rfq-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border-soft); }
.rfq-tabs::-webkit-scrollbar { display: none; }
.rfq-tab {
  padding: 9px 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; white-space: nowrap; transition: .15s var(--ease);
}
.rfq-tab:hover { color: var(--text); background: var(--surface-2); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.rfq-tab.active { color: var(--brand-dark); border-bottom-color: var(--brand); }

/* ---------------------------------------------------------------
   6. Buttons
   --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: var(--r-md);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600; line-height: 1;
  border: 1px solid transparent; background: var(--surface); color: var(--text);
  transition: .15s var(--ease); white-space: nowrap; text-decoration: none;
}
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn:active { transform: translateY(.5px); }
.btn:disabled, .btn.is-disabled { opacity: .55; pointer-events: none; }

.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(138,79,39,.28); }
.btn-primary:hover { background: var(--brand-hover); color: #fff; }

.btn-secondary, .btn-outline {
  background: var(--surface); color: var(--text); border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover, .btn-outline:hover { background: var(--surface-2); border-color: var(--muted); color: var(--text); }

.btn-soft { background: var(--brand-soft); color: var(--brand-dark); }
.btn-soft:hover { background: color-mix(in srgb, var(--brand-soft) 70%, var(--brand) 12%); color: var(--brand-dark); }

.btn-ghost { background: var(--brand); color: #fff !important; box-shadow: 0 1px 2px rgba(138,79,39,.28); }
.btn-ghost:hover { background: var(--brand-hover); color: #fff !important; }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 85%, #000); color: #fff; }

.btn-danger-soft { background: var(--danger-soft); color: var(--danger); }
.btn-danger-soft:hover { background: color-mix(in srgb, var(--danger-soft) 80%, var(--danger) 10%); }

.btn-sm { height: 30px; padding: 0 10px; font-size: var(--fs-xs); border-radius: var(--r-sm); }
.btn-lg { height: 42px; padding: 0 20px; font-size: var(--fs-base); border-radius: var(--r-lg); }
.btn-icon { width: 34px; padding: 0; }
.btn-block { width: 100%; }

/* لینکِ فقط-آیکون بدون هیچ پس‌زمینه/حاشیه‌ای — برای دکمه‌های دانلودِ Word/PDF
   که کاربر خواسته فقط خودِ آیکون دیده شود، نه چهارچوبِ btn. */
.icon-link { display: inline-flex; align-items: center; justify-content: center; line-height: 0; padding: 2px; }
.icon-link:hover { opacity: .72; }

.btn-group { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.btn-group .btn { border-radius: 0; border: 0; box-shadow: none; background: transparent; }
.btn-group .btn + .btn { border-inline-start: 1px solid var(--border); }
.btn-group .btn.active { background: var(--brand-soft); color: var(--brand-dark); }

/* ---------------------------------------------------------------
   7. Forms
   --------------------------------------------------------------- */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=tel], input[type=url], input[type=date],
input[type=time], input[type=datetime-local], input[type=month], textarea,
.input, .filter-input, .form-control {
  width: 100%; min-height: 38px; padding: 8px 12px;
  font-family: inherit; font-size: var(--fs-sm); color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: .15s var(--ease); appearance: none;
}
textarea { min-height: 96px; line-height: 1.7; resize: vertical; }
/* select must stay single-line compact (iOS listbox bug) */
select {
  width: 100%;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 32px 0 12px !important;
  line-height: 40px !important;
  font-family: inherit; font-size: var(--fs-sm); color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d737e' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-size: 16px;
  background-position: left 10px center;
  overflow: hidden !important;
}
[dir="ltr"] select { background-position: right 10px center; padding-inline-start: 12px; padding-inline-end: 32px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; min-height: 0; accent-color: var(--brand); }
input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: var(--danger); }

.field { display: block; margin-bottom: var(--s-4); }
.field-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin-bottom: 6px; }
.field-label .req { color: var(--danger); margin-inline-start: 3px; }
.field-help { font-size: var(--fs-xs); color: var(--muted); margin-top: 5px; }
.field-error { font-size: var(--fs-xs); color: var(--danger); margin-top: 5px; font-weight: 600; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--s-4); }
.form-section { border-top: 1px solid var(--border-soft); padding-top: var(--s-4); margin-top: var(--s-2); }
.form-section-title { font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong); margin-bottom: var(--s-3); }
.form-actions {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding-top: var(--s-4); margin-top: var(--s-2); border-top: 1px solid var(--border-soft);
}
.file-input-wrap input[type=file] {
  width: 100%; padding: 10px 12px; border: 1px dashed var(--border);
  border-radius: var(--r-md); background: var(--surface-2); font-family: inherit; font-size: var(--fs-sm);
}
.jdp-input { direction: ltr; text-align: center; }

/* legacy tailwind-ish form markup normalisation */
.card input.border, .card select.border, .card textarea.border { border-color: var(--border) !important; }

/* ---------------------------------------------------------------
   7b. Even 4-column forms (.form-grid4)
   The page area is split into 4 equal-width columns; every input,
   select and dropdown lines up to the same width. A field spans
   more columns only via an explicit .f-span2/.f-span3/.f-full class
   (used for the description/textarea fields).
   --------------------------------------------------------------- */
.form-grid4 {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}
.form-grid4 > .f       { grid-column: span 1; display: flex; flex-direction: column; min-width: 0; }
.form-grid4 > .f-span2 { grid-column: span 2; display: flex; flex-direction: column; min-width: 0; }
.form-grid4 > .f-span3 { grid-column: span 3; display: flex; flex-direction: column; min-width: 0; }
.form-grid4 > .f-full  { grid-column: 1 / -1; display: flex; flex-direction: column; min-width: 0; }

.form-grid4 .f-label {
  display: block; font-size: 11.5px; font-weight: 600;
  color: var(--muted); margin-bottom: 5px; white-space: nowrap;
}
.form-grid4 .f-label .req { color: var(--danger); margin-inline-start: 2px; }
.form-grid4 .f-help { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }

/* every input/select in the grid gets identical height/width so
   columns line up regardless of what the field holds */
.form-grid4 input:not([type=checkbox]):not([type=radio]):not([type=file]),
.form-grid4 textarea {
  width: 100%; min-height: 36px; padding: 7px 10px;
  font-family: inherit; font-size: var(--fs-sm); color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  transition: .15s var(--ease); appearance: none; box-sizing: border-box;
}
.form-grid4 textarea { min-height: 90px; line-height: 1.6; resize: vertical; }
.form-grid4 select {
  width: 100%;
  height: 36px !important; min-height: 36px !important; max-height: 36px !important;
  padding: 0 26px 0 10px !important; line-height: 36px !important;
  font-family: inherit; font-size: var(--fs-sm); color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  box-sizing: border-box; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d737e' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-size: 13px; background-position: left 8px center;
  overflow: hidden !important;
}
[dir="ltr"] .form-grid4 select { background-position: right 8px center; padding-inline-start: 10px; padding-inline-end: 26px; }
.form-grid4 select[multiple] {
  height: auto !important; min-height: 100px !important; max-height: none !important;
  line-height: 1.8 !important; padding: 6px 10px !important; background-image: none;
}
.form-grid4 input:focus, .form-grid4 select:focus, .form-grid4 textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--focus);
}
.form-grid4 input.is-invalid, .form-grid4 select.is-invalid, .form-grid4 textarea.is-invalid { border-color: var(--danger); }

.form-grid4 .form-section-sm {
  grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--text-strong);
  border-top: 1px dashed var(--border-soft); padding-top: var(--s-3); margin-top: var(--s-1);
  display: flex; align-items: center; gap: 6px;
}
.form-grid4 .form-section-sm:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.form-actions-sm {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding-top: var(--s-4); margin-top: var(--s-4); border-top: 1px solid var(--border-soft);
}

/* ---------------------------------------------------------------
   7c. Tag picker chips (.tag-picker)
   Selectable pill buttons in each tag's own color, replacing the
   plain multi-select listbox. A hidden checkbox drives the state.
   --------------------------------------------------------------- */
.tag-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-chip {
  --tc: var(--brand);
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 700; line-height: 1.3;
  cursor: pointer; user-select: none;
  border: 1.5px solid color-mix(in srgb, var(--tc) 42%, transparent);
  background: color-mix(in srgb, var(--tc) 11%, var(--surface));
  color: var(--tc);
  transition: .14s var(--ease);
}
.tag-chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.tag-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tc); flex-shrink: 0; transition: .14s var(--ease); }
.tag-chip:hover { filter: brightness(0.97); }
.tag-chip:has(input:checked) {
  background: var(--tc); color: #fff; border-color: var(--tc); box-shadow: var(--shadow-sm);
}
.tag-chip:has(input:checked) .dot { background: #fff; }
.tag-chip:has(input:focus-visible) { outline: none; box-shadow: var(--focus); }
.tag-picker-empty { font-size: var(--fs-xs); color: var(--muted); }

/* ---------------------------------------------------------------
   7d. Assignee picker (.assignee-picker)
   Avatar chips for multi-select of colleagues, same hidden-checkbox
   pattern as .tag-picker — toggle by click, no JS needed.
   --------------------------------------------------------------- */
.assignee-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.assignee-chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border-radius: 50%; cursor: pointer; user-select: none;
  border: 2px solid transparent; transition: .14s var(--ease);
}
.assignee-chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.assignee-chip .ava {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; background: var(--brand-soft); color: var(--brand-dark);
}
.assignee-chip .ava img { width: 100%; height: 100%; object-fit: cover; }
.assignee-chip .tick {
  display: none; position: absolute; bottom: -2px; inset-inline-end: -2px;
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 900;
  align-items: center; justify-content: center; border: 2px solid var(--surface);
}
.assignee-chip:hover { border-color: var(--brand); }
.assignee-chip:has(input:checked) {
  border-color: var(--brand);
}
.assignee-chip:has(input:checked) .tick { display: flex; }
.assignee-chip:has(input:focus-visible) { outline: none; box-shadow: var(--focus); }

/* case show page: tab bar + 50/50 row layouts (used by cases/show.blade.php) */
.case-tab-btn {
  padding: 8px 18px; border: 0; background: transparent; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; transition: .14s var(--ease);
}
.case-tab-btn:hover { background: var(--surface); color: var(--text); }
.case-tab-btn.active { background: var(--surface); color: var(--brand-dark); box-shadow: var(--shadow-sm); }
@media (max-width: 768px) {
  .case-tabs-bar { gap: 2px !important; padding: 3px !important; }
  .case-tabs-bar .case-tab-btn { padding: 7px 6px; font-size: 11.5px; flex: 1 1 0; text-align: center; }
}
.case-row-50 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: start; }
@media (max-width: 900px) { .case-row-50 { grid-template-columns: 1fr; } }
/* variant: both columns stretch to the same (tallest) height, and the
   card inside each column stretches to fill its column — used where two
   unrelated-height boxes sit side by side and should still read as a row */
.case-row-50.row-stretch { align-items: stretch; }
.case-row-50.row-stretch > div { display: flex; flex-direction: column; }
.case-row-50.row-stretch > div > .card:only-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.case-row-50.row-stretch > div > .card:only-child > .card-b { flex: 1 1 auto; }
/* پیام‌های ساده (bg-white rounded-lg...) هم مثل .card رفتار کنند، وقتی
   تنها فرزند ستون‌اند (مثلاً صفحه‌ی نمایش سند) — اگر چند باکس پشت‌سرهم
   (foreach) در یک ستون باشند، هیچ‌کدام :only-child نیستند، پس دست‌نخورده
   می‌مانند و به‌صورت طبیعی زیر هم چیده می‌شوند */
.case-row-50.row-stretch > div > div:only-child { flex: 1 1 auto; display: flex; flex-direction: column; }
/* 70/30 split (right column wider) — settings pages like Users:
   existing-list box first-in-DOM (right, in RTL) gets 70%, the
   create/side-form box second-in-DOM (left) gets 30% */
.case-row-70-30 { display: grid; grid-template-columns: 7fr 3fr; gap: var(--s-4); align-items: start; }
@media (max-width: 900px) { .case-row-70-30 { grid-template-columns: 1fr; } }
/* سه‌ستونه: اسناد سیستمی/اسناد پیوست دستی (هرکدام ۴۰٪) + پیوست سند و آپلود
   (۲۰٪) — اولین/دومین/سومین div در DOM به‌ترتیب راست/وسط/چپ (RTL). */
.case-row-40-40-20 { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: var(--s-4); align-items: start; }
@media (max-width: 1100px) { .case-row-40-40-20 { grid-template-columns: 1fr 1fr; } .case-row-40-40-20 > div:last-child { grid-column: 1 / -1; } }
@media (max-width: 700px) { .case-row-40-40-20 { grid-template-columns: 1fr; } .case-row-40-40-20 > div:last-child { grid-column: auto; } }
/* M37 (درخواست کاربر): همان variant «row-stretch» بالا (خط ۷۰۱-۷۰۹)، فقط
   برای نسبتِ ۷۰/۳۰ — صفحه‌ی نمایشِ سند از این استفاده می‌کند (کارتِ فایل/
   دکمه‌ها راست و ۷۰٪، کارتِ خلاصه‌ی شماره/نوع/پرونده چپ و ۳۰٪). */
.case-row-70-30.row-stretch { align-items: stretch; }
.case-row-70-30.row-stretch > div { display: flex; flex-direction: column; }
.case-row-70-30.row-stretch > div > .card:only-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.case-row-70-30.row-stretch > div > .card:only-child > .card-b { flex: 1 1 auto; }
.case-row-70-30.row-stretch > div > div:only-child { flex: 1 1 auto; display: flex; flex-direction: column; }

/* collapsible settings sections (tags/custom-fields groups, pipeline transition rules) */
details.settings-collapse > summary { cursor: pointer; list-style: none; }
details.settings-collapse > summary::-webkit-details-marker { display: none; }
details.settings-collapse > summary::after { content: '\25BE'; float: left; color: var(--muted); transition: transform .14s var(--ease); }
details.settings-collapse[open] > summary::after { transform: rotate(180deg); }

/* small/medium monitors: before dropping all the way to one column,
   go to two even columns so the form still reads as a grid instead of
   being squeezed into the 4-column layout designed for wide screens. */
@media (max-width: 1180px) and (min-width: 768px) {
  .form-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid4 > .f-span3 { grid-column: 1 / -1; }
}

/* mobile: same breakpoint as the rest of the site (767px). Everything
   drops to a single column and controls grow back to comfortable
   touch size — 16px font stops iOS auto-zoom-on-focus. */
@media (max-width: 767px) {
  /* قانون فوق (.form-grid4) فقط فرم‌های ایجاد/ویرایش رو پوشش می‌داد؛ چون
     زیر ۱۶px باعث زوم خودکار سافاری/کروم روی موبایل موقع فوکوس می‌شه، این
     قانون عمومی همه‌ی ورودی‌ها — فیلترها، منوها (سلکت/دراپ‌داون)، و
     دیت‌پیکرهای شمسی — رو هم پوشش می‌ده تا زوم ناخواسته حذف بشه. */
  input:not([type=checkbox]):not([type=radio]),
  select, textarea, .filter-input, .form-control {
    font-size: 16px !important;
  }

  .form-grid4 { grid-template-columns: 1fr !important; gap: var(--s-3); }
  .form-grid4 > .f, .form-grid4 > .f-span2, .form-grid4 > .f-span3, .form-grid4 > .f-full {
    grid-column: 1 / -1 !important;
  }

  .form-grid4 input:not([type=checkbox]):not([type=radio]):not([type=file]),
  .form-grid4 textarea {
    min-height: 44px; padding: 10px 12px; font-size: 16px; border-radius: var(--r-md);
  }
  .form-grid4 textarea { min-height: 96px; }
  .form-grid4 input[type=file] { min-height: 44px; }

  .form-grid4 select {
    height: 44px !important; min-height: 44px !important; max-height: 44px !important;
    line-height: 44px !important; padding: 0 30px 0 12px !important; font-size: 16px;
    border-radius: var(--r-md); background-size: 15px; background-position: left 10px center;
  }
  [dir="ltr"] .form-grid4 select { background-position: right 10px center; padding-inline-start: 12px; padding-inline-end: 30px; }

  .form-grid4 .f-label { font-size: 13px; white-space: normal; }
  .form-grid4 .form-section-sm { font-size: 12.5px; padding-top: var(--s-3); }

  .tag-chip { padding: 8px 14px; font-size: 13px; }

  /* save/cancel become full-width, thumb-friendly buttons like the
     rest of the app's mobile action rows */
  .form-actions-sm { gap: var(--s-2); }
  .form-actions-sm .btn { flex: 1 1 calc(50% - var(--s-2)); justify-content: center; min-height: 44px; }
}

/* ---------------------------------------------------------------
   8. Cards & panels
   --------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong);
  border-bottom: 1px solid var(--border-soft); background: var(--surface);
}
.card-b { padding: 0 var(--s-4); }
.card-b.pad0, .card-b .pad0, .pad0 { padding: 0 !important; }
.card-f { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border-soft); background: var(--surface-2); }
.card-hover { transition: .16s var(--ease); }
.card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.panel { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: var(--s-3); }

/* KPI / stat */
/* ---- KPI cards: equal columns, equal heights, aligned baselines ---- */
.grid-stats {
  display: grid;
  grid-template-columns: repeat(var(--kpi-cols, 4), minmax(0, 1fr));
  gap: var(--s-3);
  align-items: stretch;
  margin-bottom: var(--s-4);
}
/* وقتی .grid-stats فقط یک باکس داره (مثل گزارش‌هایی که فقط یک شاخص کل
   دارن)، آن باکس باید کل عرض ردیف رو بگیره، نه فقط عرض یک ستون از گرید
   چندستونی. */
.grid-stats > *:only-child { grid-column: 1 / -1; }
.grid-stats.kpi-3 { --kpi-cols: 3; }
.grid-stats.kpi-5 { --kpi-cols: 5; }
.grid-stats.kpi-6 { --kpi-cols: 6; }
@media (min-width: 1500px) { .grid-stats.kpi-6 { --kpi-cols: 6; } }
@media (max-width: 1280px) { .grid-stats { --kpi-cols: 4 !important; } }
@media (max-width: 1000px) { .grid-stats { --kpi-cols: 3 !important; } }
@media (max-width: 767px)  { .grid-stats { --kpi-cols: 2 !important; gap: var(--s-2); } }

.stat {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 2px;
  min-height: 104px;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: var(--s-4) var(--s-4) var(--s-3); box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden; min-width: 0;
  transition: box-shadow .16s var(--ease), transform .16s var(--ease), border-color .16s var(--ease);
}
.stat:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--border); }
.stat .lbl {
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted); letter-spacing: .01em;
  line-height: 1.5; min-height: 2.1em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.stat .num {
  font-size: clamp(20px, 2.1vw, 28px); font-weight: 800; color: var(--text-strong);
  line-height: 1.15; margin-top: auto; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em;
}
.stat .sub, .stat .trend {
  font-size: var(--fs-xs); margin-top: 3px; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat .sub { color: var(--muted); }
.stat .trend { font-weight: 700; }
.stat .trend.up { color: var(--success); }
.stat .trend.down { color: var(--danger); }
.stat::after {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px;
  background: var(--stat-accent, var(--brand)); opacity: 1;
}
.stat:hover::after { opacity: 1; }
@media (max-width: 767px) {
  .stat { min-height: 88px; padding: var(--s-3); }
  .stat .num { font-size: var(--fs-xl); }
  .stat .lbl { -webkit-line-clamp: 2; }
}


.rfq-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-4); }
.rfq-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); }
.detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: var(--s-4); align-items: start; }
@media (max-width: 1100px) { .detail-layout { grid-template-columns: 1fr; } }

/* key/value rows */
.field-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: 7px 0; border-bottom: 1px dashed var(--border-soft); }
.field-row:last-child { border-bottom: 0; }
.field-row .lbl { font-size: 13px; color: var(--muted); font-weight: 600; flex-shrink: 0; }
.field-row .val { font-size: 13px; font-weight: 600; color: var(--text); text-align: end; }

.rel-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 10px var(--s-4); border-bottom: 1px solid var(--border-soft); }
.rel-item:last-child { border-bottom: 0; }
.rel-item:hover { background: var(--surface-2); }
.chk-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border); background: var(--surface); flex-shrink: 0; cursor: pointer; position: relative; padding: 0; transition: .12s var(--ease); }
.chk-box:hover { border-color: var(--brand); }
.chk-box.checked { background: var(--brand); border-color: var(--brand); }
.chk-box.checked::after { content: ''; position: absolute; inset: 0; margin: auto; width: 10px; height: 7px; border-inline-start: 2px solid #fff; border-block-end: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.rel-meta { font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------
   9. Tables
   --------------------------------------------------------------- */
.data-table-wrap { overflow: hidden; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.tbl thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2); color: var(--muted);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
  text-align: start; padding: 10px var(--s-3); white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.tbl thead th a { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.tbl tbody td { padding: 11px var(--s-3); border-bottom: 1px solid var(--border-soft); color: var(--text); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .12s var(--ease); }
.tbl tbody tr:hover { background: var(--surface-2); }
/* ردیف جمع گزارش‌ها — روی دسکتاپ سه‌برابر ارتفاع معمولی (با افزایش
   padding عمودی، نه فقط عرض خطوط)، تا از بقیه‌ی ردیف‌ها متمایز و برجسته باشه. */
@media (min-width: 768px) {
  .rpt-total-row > td { padding-block: 33px !important; }
}
.tbl tbody tr.is-selected { background: var(--brand-soft); }
.tbl .num, .tbl .amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.tbl-scroll { overflow-x: auto; }
.tbl-compact tbody td { padding: 7px var(--s-3); }

.table-toolbar {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border-soft); background: var(--surface);
}
.table-toolbar .spacer { margin-inline-start: auto; }

.filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; align-content: flex-start;
  padding: var(--s-3); background: var(--surface);
  border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.filter-input { width: auto; min-width: 150px; height: 34px; min-height: 34px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand-dark);
  font-size: var(--fs-xs); font-weight: 700;
}
.filter-chip button { border: 0; background: transparent; color: inherit; font-size: 13px; line-height: 1; }

/* pagination */
.pagination, nav[role="navigation"] .pagination { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pagination a, .pagination span, .page-link {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  border: 1px solid var(--border-soft); background: var(--surface);
}
.pagination a:hover { border-color: var(--brand); color: var(--brand); }
.pagination .active span, .pagination .active a { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------------------------------------------------------------
   10. Badges, chips, status
   --------------------------------------------------------------- */
.badge, .chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.7;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border-soft);
  white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .75; }
.badge-plain::before, .chip-plain::before { display: none; }
.chip-ok, .badge-ok, .badge-success { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 22%, transparent); }
.chip-warn, .badge-warn, .badge-warning { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 22%, transparent); }
.chip-danger, .badge-danger, .badge-error { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.badge-info, .chip-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.badge-brand, .chip-brand { background: var(--brand-soft); color: var(--brand-dark); border-color: color-mix(in srgb, var(--brand) 25%, transparent); }
.badge-muted { background: var(--surface-2); color: var(--muted); }

.priority-high { color: var(--danger); }
.priority-mid { color: var(--warning); }
.priority-low { color: var(--muted); }

.avatar {
  width: 28px; height: 28px; border-radius: var(--r-full); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: var(--fs-xs); font-weight: 700; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 44px; height: 44px; font-size: var(--fs-base); }

/* ---------------------------------------------------------------
   11. Alerts & toasts
   --------------------------------------------------------------- */
.alert {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 600; border: 1px solid transparent;
}
.alert ul { margin: 0; padding-inline-start: 18px; font-weight: 500; }
.alert-close {
  flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: currentColor; opacity: .7; cursor: pointer;
  font-size: 18px; line-height: 1; border-radius: 999px; padding: 0;
}
.alert-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.alert-success { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 20%, transparent); }
.alert-error, .alert-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 20%, transparent); }
.alert-warning { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 20%, transparent); }
.alert-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 20%, transparent); }

.rfq-toast-stack { position: fixed; bottom: 20px; inset-inline-start: 20px; z-index: 120; display: flex; flex-direction: column; gap: var(--s-2); }
.rfq-toast {
  padding: 11px var(--s-4); border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--shadow-lg);
  max-width: min(380px, 90vw); background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-inline-start: 3px solid var(--brand);
  animation: toastIn .24s var(--ease);
}
.rfq-toast-success { border-inline-start-color: var(--success); color: var(--success); background: var(--success-soft); }
.rfq-toast-error { border-inline-start-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------
   12. Empty / loading states
   --------------------------------------------------------------- */
.empty-state {
  text-align: center; padding: var(--s-10) var(--s-5); color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; box-sizing: border-box;
}
.empty-ico {
  width: 52px; height: 52px; border-radius: var(--r-lg); margin-bottom: var(--s-2);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.empty-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.empty-title { font-weight: 700; color: var(--text-strong); font-size: var(--fs-md); }
.empty-desc { font-size: var(--fs-sm); max-width: 380px; }

.skeleton-wrap { display: flex; flex-direction: column; gap: 10px; padding: var(--s-2) 0; }
.skeleton-line, .skeleton {
  height: 12px; border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border-soft) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.3s ease infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.spinner {
  width: 16px; height: 16px; border-radius: 999px;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor; animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------
   13. Modal / drawer / dropdown / tooltip
   --------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 110; background: rgba(12,14,17,.5);
  display: flex; align-items: center; justify-content: center; padding: var(--s-4);
  animation: fadeIn .16s var(--ease);
}
.modal-backdrop[hidden] {
  display: none !important;
}
.modal {
  width: 100%; max-width: 520px; background: var(--surface);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden;
  animation: modalIn .2s var(--ease);
}
.modal-h { padding: var(--s-4); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font-weight: 700; }
.modal-b { padding: var(--s-4); max-height: 65vh; overflow-y: auto; }
.modal-f { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border-soft); background: var(--surface-2); display: flex; gap: var(--s-2); justify-content: flex-end; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.drawer {
  position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 115;
  width: min(480px, 100vw); background: var(--surface);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  animation: drawerIn .22s var(--ease);
}
@keyframes drawerIn { from { transform: translateX(var(--drawer-from, 100%)); } to { transform: none; } }
[dir="rtl"] .drawer { --drawer-from: -100%; }
.drawer-h { padding: var(--s-4); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; font-weight: 700; }
.drawer-b { padding: var(--s-4); overflow-y: auto; flex: 1; }
.drawer-f { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border-soft); display: flex; gap: var(--s-2); justify-content: flex-end; }

.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; min-width: 190px; padding: 5px; z-index: 70;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: .15s var(--ease);
}
.dropdown-menu.open, .dropdown[open] .dropdown-menu { opacity: 1; visibility: visible; transform: none; }
.dropdown-menu a, .dropdown-menu button {
  display: flex; align-items: center; gap: var(--s-2); width: 100%; text-align: start;
  padding: 8px 10px; border: 0; background: transparent; font-family: inherit;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text); border-radius: var(--r-sm);
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--brand-soft); color: var(--brand-dark); }
.dropdown-menu .sep { height: 1px; background: var(--border-soft); margin: 4px 0; }
.dropdown-menu .danger { color: var(--danger); }

/* پنلِ فیلترِ ترلویی — عمداً کامپوننتِ/کلاس‌بندیِ جدا از .dropdown-menu (نه
   ارث‌بری)، چون رفتارِ بسته‌شدنش فرق می‌کنه (کلیکِ چک‌باکسِ داخلی نباید ببندتش)
   و display:none/flex استفاده می‌کنه (نه opacity/visibility) تا وقتی بسته‌ست
   هیچ باکسِ نامرئی‌ای رویِ صفحه نمونه — همون باگِ اسکرولِ ناخواسته‌ای که با
   .dropdown-menu دوبار (docs-list-card, approved-vendors-card) پیش اومد. */
.filter-panel-root { position: relative; display: inline-block; margin-inline-start: auto; flex-shrink: 0; }
@media (min-width: 900px) {
  /* when a row has both a delete button and a filter button, push the
     PAIR together to the left — delete stays right next to filter,
     instead of filter alone landing at the far edge of the row */
  .rfq-filters-search:has(.filter-panel-root) .bulk-apply-btn { margin-inline-start: auto !important; }
  .rfq-filters-search:has(.filter-panel-root) .filter-panel-root { margin-inline-start: 0 !important; }
  /* pages with no filter panel (contacts, organizations): push delete
     alone to the far left of the row */
  .rfq-filters-search:not(:has(.filter-panel-root)) .bulk-apply-btn { margin-inline-start: auto !important; }
}
@media (max-width: 899px) {
  /* mobile: 20px gap between the search button and the delete button,
     taken out of the search field's width (flex:1 auto-shrinks) */
  .bulk-apply-btn { margin-inline-start: 16px !important; }
}
.filter-panel {
  display: none; flex-direction: column; gap: 20px;
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 70;
  width: 320px; max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 12px;
}
.filter-panel-root.open .filter-panel { display: flex; }
.filter-panel-group {
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border-soft);
}
.filter-panel-group:last-child { padding-bottom: 0; border-bottom: 0; }
.filter-panel-group-title { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); margin-top: 6px; }
.filter-panel-checks { display: flex; flex-direction: column; gap: 8px; }
.filter-panel-check {
  display: flex; align-items: center; gap: 8px; line-height: 1;
  font-size: 13px; font-weight: 600; cursor: pointer; user-select: none;
}
.filter-panel-check input {
  margin: 0; flex-shrink: 0; width: 15px; height: 15px; vertical-align: middle;
}
.filter-panel-check span { display: inline-flex; align-items: center; }
.filter-panel .assignee-chip .ava { width: 28px; height: 28px; font-size: 11px; }
.filter-panel .assignee-chip .tick { width: 14px; height: 14px; font-size: 9px; }
.filter-panel-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  position: sticky; bottom: -12px; margin: 0 -12px -12px; padding: 8px 12px;
  background: var(--surface); border-top: 1px solid var(--border-soft);
}

[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); inset-inline-start: 50%;
  transform: translateX(50%); background: var(--nav-2); color: #fff; font-size: var(--fs-xs);
  padding: 4px 8px; border-radius: var(--r-sm); white-space: nowrap; z-index: 100; box-shadow: var(--shadow-md);
}
[dir="ltr"] [data-tooltip]:hover::after { transform: translateX(-50%); }

/* ---------------------------------------------------------------
   14. Timeline / activity / comments
   --------------------------------------------------------------- */
.timeline { position: relative; padding-inline-start: var(--s-5); }
.timeline::before { content: ""; position: absolute; inset-inline-start: 17px; top: 6px; bottom: 6px; width: 2px; background: var(--border-soft); }
.timeline-item { position: relative; display: flex; gap: var(--s-3); padding: var(--s-3) 0; }
.timeline-avatar, .timeline-dot {
  width: 34px; height: 34px; border-radius: var(--r-full); flex-shrink: 0; z-index: 1;
  background: var(--brand-soft); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-xs); box-shadow: 0 0 0 3px var(--surface);
}
.timeline-avatar.call { background: var(--success-soft); color: var(--success); }
.timeline-avatar.call.call-out { background: var(--info-soft); color: var(--info); }
.timeline-avatar.call.call-in { background: var(--success-soft); color: var(--success); }
.timeline-avatar.email { background: var(--info-soft); color: var(--info); }
.timeline-avatar.status { background: var(--warning-soft); color: var(--warning); }
.timeline-content { flex: 1; min-width: 0; }
.timeline-title { font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong); }
.timeline-meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.timeline-body { font-size: var(--fs-sm); margin-top: 5px; white-space: pre-wrap; text-align: justify; margin-left:20px;}
.timeline-card { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 10px 12px; margin-top: 6px; }
.call-card { background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success) 20%, transparent); border-radius: var(--r-md); padding: 10px 12px; margin-top: 6px; }
.call-card .call-title { font-weight: 700; color: var(--success); font-size: var(--fs-xs); margin-bottom: 4px; }
/* تماس خروجی = آبی، تماس ورودی = سبز (پیش‌فرض بالا) */
.call-card.call-out { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 20%, transparent); }
.call-card.call-out .call-title { color: var(--info); }
.call-card.call-in { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 20%, transparent); }
.call-card.call-in .call-title { color: var(--success); }

/* ویرایش/حذف کامنت — فقط با هاور روی خودِ آیتم دیده می‌شود */
.act-actions { display: flex; gap: 10px; margin-top: 6px; }
.act-actions button { background: none; border: 0; padding: 0; font-size: var(--fs-xs); color: var(--muted); cursor: pointer; }
.act-actions button:hover { color: var(--brand); text-decoration: underline; }
.act-actions form button:hover { color: var(--danger); }
.act-edit-form { margin-top: 6px; }

.activity-feed-item { padding: 10px var(--s-4); border-bottom: 1px solid var(--border-soft); display: flex; gap: 10px; align-items: flex-start; }
.activity-feed-item:last-child { border-bottom: 0; }
.activity-feed-item:hover { background: var(--surface-2); }
.feed-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--brand); margin-top: 7px; flex-shrink: 0; }

/* ---------------------------------------------------------------
   15. Kanban
   --------------------------------------------------------------- */
.kanban-board { display: flex; gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-3); align-items: flex-start; }
.kanban-col {
  flex: 0 0 288px; background: var(--surface-2);
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  display: flex; flex-direction: column; max-height: calc(100vh - 220px);
}
.kanban-col-h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: 10px var(--s-3); border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-sm); font-weight: 700; position: sticky; top: 0; background: var(--surface-2);
  border-radius: var(--radius) var(--radius) 0 0;
}
.kanban-col-h .count { font-size: var(--fs-xs); color: var(--muted); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-full); padding: 0 8px; }
.kanban-col-b { padding: var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); overflow-y: auto; min-height: 80px; }
.kanban-col.drag-over { border-color: var(--brand); background: var(--brand-soft-2); }
.kanban-card {
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md);
  padding: 10px var(--s-3); box-shadow: var(--shadow-sm); cursor: grab; transition: .14s var(--ease);
}
.kanban-card:hover { box-shadow: var(--shadow-md); border-color: var(--border); transform: translateY(-1px); }
.kanban-card.dragging { opacity: .5; transform: rotate(1.2deg); }
.kanban-card-title { font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong); }
.kanban-card-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.kanban-card-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); align-items: center; }
.kanban-card-meta span { background: var(--surface-2); border: 1px solid var(--border-soft); padding: 1px 7px; border-radius: var(--r-xs); font-weight: 600; }

/* ---------------------------------------------------------------
   16. Charts (CSS bars)
   --------------------------------------------------------------- */
.chart-bars { display: flex; flex-direction: column; gap: 10px; }
.chart-row { display: flex; align-items: center; gap: 10px; }
.chart-label { width: 128px; flex-shrink: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-track { flex: 1; height: 9px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; }
.chart-fill { height: 100%; background: linear-gradient(90deg, var(--copper-dark), var(--copper)); border-radius: var(--r-full); min-width: 3px; transition: width .5s var(--ease); }
.chart-val { min-width: 34px; text-align: end; font-weight: 700; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------
   17. Settings / secondary nav
   --------------------------------------------------------------- */
.settings-layout, .email-layout { display: grid; grid-template-columns: 232px minmax(0,1fr); gap: var(--s-4); align-items: start; }
@media (max-width: 900px) { .settings-layout, .email-layout { grid-template-columns: 1fr; } }
.settings-nav-group { padding: var(--s-3) var(--s-4) 4px; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.settings-nav-item {
  display: flex; align-items: center; gap: var(--s-2); padding: 9px var(--s-4);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text); position: relative;
  border-bottom: 1px solid var(--border-soft);
}
.settings-nav-item:hover { background: var(--surface-2); color: var(--brand-dark); }
.settings-nav-item.active { background: var(--brand-soft); color: var(--brand-dark); }
.settings-nav-item.active::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); }

.wq-side-item { display: flex; align-items: center; gap: var(--s-2); padding: 9px var(--s-3); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.wq-side-item:hover, .wq-side-item.active { background: var(--brand-soft); color: var(--brand-dark); }
.wq-side-label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; padding: var(--s-3) var(--s-3) 4px; }
.wq-count { margin-inline-start: auto; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.wq-ico { width: 18px; height: 18px; display: inline-flex; }

/* ---------------------------------------------------------------
   18. Mobile
   --------------------------------------------------------------- */
.data-table-mobile { display: none; }
.data-table-desktop { display: block; overflow-x: auto; }
.mobile-list-card { display: block; padding: 12px var(--s-4); border-bottom: 1px solid var(--border-soft); color: inherit; }
.mobile-list-card:hover { background: var(--surface-2); }
.rfq-bottom-nav { display: none; }

@media (max-width: 767px) {
  :root { --header-h: 52px; }
  .data-table-desktop { display: none !important; }
  .data-table-mobile { display: block !important; }
  .rfq-top, .rfq-shell { margin-inline-start: 0 !important; }
  .rfq-rail {
    transform: translateX(var(--rail-off, 100%));
    box-shadow: var(--shadow-lg);
  }
  [dir="ltr"] .rfq-rail { --rail-off: -100%; }
  body.mobile-nav-open .rfq-rail { transform: none; }
  body.rail-collapsed .rfq-rail { width: var(--rail-w); padding-inline: 10px; align-items: stretch; }
  body.rail-collapsed .rfq-rail-item { width: 100%; height: auto; padding: 7px 10px; justify-content: flex-start; }
  body.rail-collapsed .rfq-rail-item .lbl { display: block; }
  body.rail-collapsed .rfq-rail-brand .txt { display: block; }
  .rfq-record-header { padding: var(--s-3) var(--s-4); }
  .rfq-content { padding-bottom: 76px; }
  .rfq-top-search { display: none; }
  .desktop-only-action { display: none !important; }
  .rfq-bottom-nav {
    position: fixed; bottom: 0; inset-inline: 0; z-index: 50;
    display: flex; justify-content: space-around; align-items: stretch;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-soft); padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .rfq-bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 2px; font-size: 10px; font-weight: 600; color: var(--muted); border-radius: var(--r-sm);
  }
  .rfq-bottom-nav a svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .rfq-bottom-nav a.active { color: var(--brand); }
  .sticky-actions {
    position: sticky; bottom: 64px; z-index: 30;
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
    padding: var(--s-2); display: flex; gap: var(--s-2); box-shadow: var(--shadow-md);
  }
  .kanban-col { flex-basis: 84vw; }
  .rfq-grid-2, .rfq-grid-3, .form-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   19. Print
   --------------------------------------------------------------- */
@media print {
  .rfq-rail, .rfq-top, .rfq-bottom-nav, .rfq-record-actions, .filter-bar, .table-toolbar { display: none !important; }
  .rfq-shell { margin: 0 !important; }
  .card { box-shadow: none; border-color: #ddd; }
  body { background: #fff; }
}

/* ---------------------------------------------------------------
   20. Legacy shims — old markup keeps working with new tokens
   --------------------------------------------------------------- */
.bg-white { background: var(--surface) !important; }
.bg-gray-50, .bg-gray-100 { background: var(--surface-2) !important; }
.bg-gray-200 { background: var(--border-soft) !important; }
.text-gray-500, .text-gray-600, .text-slate-500, .text-slate-600 { color: var(--muted) !important; }
.text-gray-700, .text-gray-800, .text-gray-900 { color: var(--text) !important; }
.text-red-600, .text-red-700 { color: var(--danger) !important; }
.text-green-600, .text-green-700 { color: var(--success) !important; }
.text-blue-600, .text-blue-700 { color: var(--info) !important; }
.bg-blue-600 { background: var(--brand) !important; }
.bg-red-600 { background: var(--danger) !important; }
.bg-green-600 { background: var(--success) !important; }
.border { border-color: var(--border) !important; }
.shadow { box-shadow: var(--shadow-sm) !important; }
.rounded, .rounded-lg, .rounded-xl { border-radius: var(--r-md) !important; }

/* ---------------------------------------------------------------
   21. Pipeline path (dashboard / case status stepper)
   --------------------------------------------------------------- */
.path {
  display: flex; gap: 3px; overflow-x: auto; padding: 2px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  scrollbar-width: thin;
}
.path-step {
  flex: 1 0 auto; min-width: 104px; text-align: center;
  padding: 9px 14px; font-size: var(--fs-xs); font-weight: 600;
  color: var(--muted); background: var(--surface-2);
  border-radius: var(--r-sm); position: relative; white-space: nowrap;
}
.path-step.has { background: var(--brand-soft); color: var(--brand-dark); }
.path-step.current, .path-step.active { background: var(--brand); color: #fff; }

/* activity composer (case detail) */
.act-composer {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3); background: var(--surface-2);
  border: 1px solid var(--border-soft); border-radius: var(--r-md);
}
.act-composer textarea { background: var(--surface); }
.act-composer .row { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }

/* integrations / cloud panels */
.cloud-panel {
  padding: var(--s-4); border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-sm);
}

/* section title inside content */
.page-section-title {
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong);
  display: flex; align-items: center; gap: var(--s-2); margin: var(--s-2) 0;
}
.soft-divider { height: 1px; background: var(--border-soft); margin: var(--s-3) 0; }
.status-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; background: var(--muted); }
.status-dot.ok { background: var(--success); }
.status-dot.warn { background: var(--warning); }
.status-dot.danger { background: var(--danger); }

/* language switch */
.lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-full); overflow: hidden; height: 30px; }
.lang-switch button { border: 0; background: transparent; padding: 0 10px; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); font-family: inherit; }
.lang-switch button.active { background: var(--brand); color: #fff; }

/* ---------------------------------------------------------------
   22. Authentication (split screen)
   --------------------------------------------------------------- */
.auth-body { margin: 0; min-height: 100vh; background: var(--bg); }
.auth-split { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.auth-aside {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(184,112,60,.28), transparent 60%),
    linear-gradient(180deg, #1b1f26, #101317);
  color: #e9e6e2; padding: var(--s-8) var(--s-10);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth-aside::after {
  content: ""; position: absolute; inset-inline-end: -120px; bottom: -140px;
  width: 380px; height: 380px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 40px rgba(255,255,255,.03);
}
.auth-aside-top { display: flex; align-items: center; gap: var(--s-3); position: relative; z-index: 1; }
.auth-mark {
  width: 46px; height: 46px; border-radius: var(--r-md); flex-shrink: 0;
  background: linear-gradient(150deg, var(--copper), var(--copper-dark)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
  box-shadow: 0 8px 22px rgba(184,112,60,.35);
}
.auth-mark-sm { width: 42px; height: 42px; margin-bottom: var(--s-4); }
.auth-brand { font-weight: 700; font-size: var(--fs-md); color: #fff; }
.auth-brand-sub { font-size: var(--fs-xs); color: rgba(255,255,255,.6); }
.auth-aside-body { position: relative; z-index: 1; max-width: 460px; }
.auth-aside-body h2 { font-size: var(--fs-2xl); color: #fff; line-height: 1.45; }
.auth-aside-body p { color: rgba(255,255,255,.66); font-size: var(--fs-base); margin-top: var(--s-3); }
.auth-points { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: flex; flex-direction: column; gap: 10px; }
.auth-points li { position: relative; padding-inline-start: 22px; font-size: var(--fs-sm); color: rgba(255,255,255,.78); }
.auth-points li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 999px; background: var(--copper);
}
.auth-aside-foot { position: relative; z-index: 1; font-size: var(--fs-xs); color: rgba(255,255,255,.4); }

.auth-form-side { display: flex; align-items: center; justify-content: center; padding: var(--s-6); }
.auth-card { width: 100%; max-width: 384px; }
.auth-card h1 { font-size: var(--fs-xl); }
.auth-sub { color: var(--muted); font-size: var(--fs-sm); margin: 6px 0 var(--s-6); }
.auth-remember { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s-4); }
.auth-note { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s-5); line-height: 1.8; }

@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; min-height: 100dvh; }
  .auth-aside { display: none; }
  /* 100vh در مرورگرهای موبایل معمولاً ارتفاعِ «بدونِ نوار آدرس» را حساب
     می‌کند؛ چون نوار آدرس در بارگذاریِ اول هنوز روی صفحه است، همین باعث
     می‌شد این باکس از فضای واقعاً دیده‌شده بلندتر باشد و یک اسکرول عمودیِ
     کوچکِ ناخواسته بیفتد. 100dvh (ارتفاعِ واقعیِ دیده‌شده) این را رفع می‌کند؛
     در مرورگرهای بدون پشتیبانی dvh، همان min-height:100vh قبلی فعال می‌ماند. */
  .auth-form-side { min-height: 100vh; min-height: 100dvh; padding: var(--s-4); }
}

/* ---------------------------------------------------------------
   23. Responsive hardening (mobile + tablet)
   Loaded last so it wins over section-level rules.
   --------------------------------------------------------------- */

/* generic grids used across all views */
.rfq-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-4); }
.rfq-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); }
.rfq-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); }
.rfq-grid-rowform { display: grid; grid-template-columns: auto minmax(0,1fr) minmax(0,1fr); gap: var(--s-2); align-items: center; }
.rfq-grid-stagerow { display: grid; grid-template-columns: 70px minmax(0,1.4fr) 120px auto auto auto; gap: var(--s-2); align-items: center; }

/* text/flex overflow safety: long Persian names must truncate, not push layout */
.rfq-shell, .rfq-content, .card, .card-b, .rfq-grid-2 > *, .rfq-grid-3 > *, .detail-layout > * { min-width: 0; }
.truncate-1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* any table stays readable by scrolling horizontally instead of squashing */
.table-wrap, .tbl-scroll, .data-table-desktop { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------- tablet ------------------------- */
@media (max-width: 1024px) {
  .rfq-grid-stagerow { grid-template-columns: 60px minmax(0,1fr) 100px auto auto auto; }
  .detail-layout { grid-template-columns: 1fr; }
  .settings-layout, .email-layout, .wq-layout { grid-template-columns: 200px minmax(0,1fr); }
  .kanban-col { flex-basis: 264px; }
  .kanban-wrap { height: auto; min-height: 0; }
  #kanban-board { overflow-x: auto; }
  .rfq-top-search { max-width: 220px; }
  .dash-tasks-row { grid-template-columns: 1fr; }
  /* filter bars stretch their controls instead of leaving stranded inputs */
  .filter-bar, .table-toolbar { flex-wrap: wrap; align-items: stretch; }
  .filter-bar > *, .table-toolbar > * { flex: 1 1 200px; min-width: 0; }
  .filter-bar > .btn, .table-toolbar > .btn { flex: 0 0 auto; }
  .filter-bar input, .filter-bar select, .table-toolbar input, .table-toolbar select { width: 100%; }
  /* KPI columns are handled by --kpi-cols above */
}

/* --------------------- phones / small tablets --------------------- */
@media (max-width: 900px) {
  .settings-layout, .email-layout, .wq-layout { grid-template-columns: 1fr !important; }
  .settings-nav, .wq-side { position: relative !important; top: 0 !important; max-height: none !important; }
  /* settings/workqueue side nav becomes a horizontal scroller */
  .settings-nav .card-b, .settings-nav > .card { display: flex; overflow-x: auto; }
  .settings-nav-item { border-bottom: 0; border-inline-end: 1px solid var(--border-soft); white-space: nowrap; }
  .settings-nav-item.active::before { inset-inline-start: 0; inset-inline-end: 0; top: auto; bottom: 0; width: auto; height: 3px; }
  .wq-side .card-b { display: flex; gap: 6px; overflow-x: auto; }
  .wq-side-item { white-space: nowrap; }
  .wq-side-label { display: none; }

  /* every table scrolls horizontally rather than overflowing the card;
     thead/tbody/tr must stay in ONE table layout context (not split into
     independent per-row tables) or column widths stop lining up with the
     header on narrow screens. Report pages that wrap a plain table in an
     "overflow-hidden" card need that overflow turned into a horizontal
     scroll too, or their columns just get cropped instead of scrolling. */
  table.tbl:not(.dash-recent-cases-mobile), .card table:not(.dash-recent-cases-mobile), .overflow-hidden table:not(.dash-recent-cases-mobile) {
    display: table !important;
    min-width: 620px;
  }
  .tbl:not(.dash-recent-cases-mobile), .card:has(table):not(:has(.dash-recent-cases-mobile)), .overflow-hidden:has(table) {
    display: block;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    min-width: 0;
  }

  /* report result tables: stack as cards instead of scrolling horizontally
     (data-label on each <td> is injected by JS in layouts/app.blade.php) */
  table.rpt-stack, .card table.rpt-stack, .overflow-hidden table.rpt-stack {
    display: block !important; width: 100% !important; min-width: 0 !important;
  }
  .rpt-stack.tbl, .card:has(table.rpt-stack), .overflow-hidden:has(table.rpt-stack) {
    overflow-x: visible !important;
  }
  table.rpt-stack thead { display: none; }
  table.rpt-stack tbody { display: block; width: 100%; }
  /* هر رکورد (tr) یک گرید دوستونی (عنوان/مقدار) است — ستون‌بندی مشترکِ
     tr باعث می‌شه عنوان‌ها همه به یک لبه و مقدارها همه به یک ستون (نه لبه‌ی
     دورِ کارت) ردیف بشن، برخلافِ حالتِ قبلی که هر <td> یک flex مستقلِ خودش
     بود و ستون‌بندی‌شون با هم هم‌تراز نمی‌شد. */
  table.rpt-stack tr {
    display: grid; grid-template-columns: max-content 1fr; column-gap: calc(var(--s-3) * 3);
    width: 100%; margin-bottom: var(--s-3); border: 1px solid var(--border-soft);
    border-radius: var(--r-md); padding: 4px var(--s-3); background: var(--surface);
  }
  table.rpt-stack td {
    display: grid; grid-template-columns: subgrid; grid-column: 1 / 3; align-items: flex-start;
    justify-items: start;
    padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px;
    white-space: normal; word-break: break-word; text-align: start;
  }
  table.rpt-stack td:last-child { border-bottom: 0; }
  table.rpt-stack td[data-label]::before {
    content: attr(data-label); grid-column: 1; font-weight: 700; color: var(--muted); text-align: start;
  }

  /* bulk-action select+button sit inline after the search button;
     let this row wrap onto its own line on narrow screens with a small
     gap instead of overflowing or leaving a big vertical gap. */
  .rfq-filters-search { flex-wrap: wrap !important; row-gap: 6px !important; }
}

@media (max-width: 767px) {
  :root { --s-page: var(--s-3); }

  /* one column everywhere by default */
  .rfq-grid-2, .rfq-grid-3, .rfq-grid-auto, .rfq-grid-rowform, .form-grid,
  .rfq-form-grid, .auto-form-grid, .rfq-sec-grid, .rfq-users-grid,
  .grid-cols-2, .grid-cols-3, .grid-cols-4, .case-desc-tags-grid { grid-template-columns: 1fr !important; }
  .rfq-grid-stagerow { grid-template-columns: 64px minmax(0,1fr) 1fr; }
  .rfq-grid-stagerow > :nth-child(n+4) { grid-column: span 1; }

  /* page header: title block shrinks, actions wrap under it */
  .rfq-page-head, .rfq-record-header {
    display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-3);
  }
  .rfq-page-head .rfq-page-title, .rfq-record-header h1 { font-size: var(--fs-lg); overflow-wrap: anywhere; }
  .rfq-page-actions, .rfq-record-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .rfq-page-actions > .btn, .rfq-record-actions > .btn,
  .rfq-page-actions > form > .btn { flex: 1 1 calc(50% - var(--s-2)); justify-content: center; min-width: 130px; }
  .rfq-page-actions > .btn:first-child, .rfq-record-actions > .btn:first-child { flex-basis: 100%; }

  /* filter bars: full-width stacked controls, no clipping */
  .filter-bar, .table-toolbar { flex-direction: column; align-items: stretch; align-content: flex-start; gap: var(--s-2); height: auto; }
  .filter-bar > *, .table-toolbar > * { width: 100%; min-width: 0; flex: 0 0 auto; }
  .filter-bar .btn, .table-toolbar .btn { justify-content: center; }
  /* فیلتر تاریخ گزارش‌ها: هر ردیف (برچسب+باکس) خودش هم داخلی flex است — روی
     موبایل نباید کشیده/فاصله‌دار شود، همان ارتفاع طبیعی محتوایش کافی است. */
  .jalali-filter-bar > span { margin-inline-start: 0 !important; flex-shrink: 0; }
  .jalali-filter-bar .btn { margin-inline-start: 0 !important; }
  select, input, textarea { max-width: 100%; }

  /* stats: 2-up instead of 1-up so the fold stays useful */
  /* KPI columns are handled by --kpi-cols above */
  /* stat padding handled in KPI section */
  .stat .num { font-size: var(--fs-xl); }

  /* tabs & pipeline steppers scroll horizontally */
  .rfq-tabs, .path { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .rfq-tabs::-webkit-scrollbar, .path::-webkit-scrollbar { display: none; }
  .rfq-tab { white-space: nowrap; }
  .path-step { min-width: 92px; font-size: 10px; padding: 8px 10px; }

  /* modals & drawers go full-bleed */
  .modal-backdrop .modal { width: 100% !important; max-width: 100% !important; max-height: 92vh; border-radius: var(--radius) var(--radius) 0 0; margin-top: auto; }
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .rfq-drawer { width: 100% !important; max-width: 100% !important; }

  /* جدول اقساط دریافتی: روی موبایل دو ستونش مخفی می‌شن (hide-on-mobile)،
     پس min-width ثابت نسخه‌ی دسکتاپ دیگه لازم نیست و فقط باعث اسکرول
     افقی بی‌مورد می‌شد. */
  .payments-tbl { table-layout: auto !important; min-width: 0 !important; width: 100% !important; }
  .rfq-menu, .dropdown-menu { min-width: 200px; max-width: calc(100vw - 24px); }

  /* charts keep a usable height */
  canvas { max-width: 100% !important; }
  .chart-wrap, .chart-box { height: 220px; }

  /* calendar: month grid scrolls instead of collapsing */
  .grid-cols-7 { grid-template-columns: repeat(7, minmax(40px, 1fr)) !important; }
  .cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* forms: comfortable touch targets, no iOS zoom */
  input, textarea { font-size: 16px; min-height: 44px; }
  select { font-size: 16px; height: 40px !important; min-height: 40px !important; max-height: 40px !important; }
  textarea { min-height: 88px; }
  .btn { min-height: 42px; }
  .btn-sm { min-height: 34px; }

  /* dashboard rows */
  .dash-tasks-row, .dash-row { grid-template-columns: 1fr !important; }

  /* kanban becomes a snap carousel */
  #kanban-board { scroll-snap-type: x mandatory; }
  .kanban-col { flex-basis: 86vw; scroll-snap-align: start; max-height: 70vh; }

  /* long ids/emails/urls never blow out a card */
  .card-b, .mobile-list-card, td, dd { overflow-wrap: anywhere; }
}

@media (max-width: 359px) {
  /* KPI stays 2-up on the narrowest phones */
  .rfq-grid-stagerow { grid-template-columns: 1fr; }
  .rfq-page-actions > .btn, .rfq-record-actions > .btn { width: 100%; }
}

/* detail field rows: label above value on narrow screens */
@media (max-width: 767px) {
  .field-row { flex-direction: column; align-items: stretch; gap: 2px; }
  .field-row .val { text-align: start; overflow-wrap: anywhere; }
  .field-row > span:empty { display: none; }
  .card-b .space-y-2 > * , .card-b .space-y-3 > * { min-width: 0; }
  /* full-width submit rows in every form */
  form .flex.gap-2 > .btn, form .flex.flex-wrap.gap-2 > .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------------------------------------------------------------
   22. Unified page grammar
   Every page follows the same rhythm: page head → KPI row → cards.
   These rules make legacy/hand-rolled markup inherit that grammar
   so no screen looks "different" from the rest.
   --------------------------------------------------------------- */
.rfq-content > * + * { margin-top: 0; }
.rfq-content > .card + .card,
.rfq-content > .rfq-grid-2 + .rfq-grid-2 { margin-top: 0; }
.rfq-content > form > * + * { margin-top: `var(--s-4); }

/* headings written straight into a page adopt the shared type scale */
.rfq-content h1, .rfq-content h2 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; }
.rfq-content h3 { font-size: var(--fs-md); font-weight: 700; }
.rfq-content h4 { font-size: var(--fs-base); font-weight: 700; }
.rfq-content h1 + *, .rfq-content h2 + *, .rfq-content h3 + * { margin-top: var(--s-3); }

/* hand-rolled "white box" wrappers get the canonical card treatment */
.rfq-content > .bg-white,
.rfq-content > div > .bg-white,
.panel, .box, .section-box {
  background: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* one consistent form language everywhere (components + legacy markup) */
.rfq-content label,
.rfq-content .form-label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); display: block; margin-bottom: 4px; }
.rfq-content input:not([type=checkbox]):not([type=radio]):not([type=file]),
.rfq-content select,
.rfq-content textarea {
  width: 100%; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 8px 11px; font-size: var(--fs-base); font-family: inherit;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.rfq-content input:focus, .rfq-content select:focus, .rfq-content textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--focus);
}
.rfq-content input::placeholder, .rfq-content textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.rfq-content input[disabled], .rfq-content select[disabled], .rfq-content textarea[disabled] {
  background: var(--surface-2); color: var(--muted); cursor: not-allowed;
}
.rfq-content table:not(.tbl) {
  width: 100%; border-collapse: collapse; font-size: var(--fs-base);
}
.rfq-content table:not(.tbl) th {
  text-align: start; font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
  background: var(--surface-2); padding: 9px 12px; border-bottom: 1px solid var(--border-soft);
}
.rfq-content table:not(.tbl) td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }

/* ---------------------------------------------------------------
   23. Dark-mode hardening
   Legacy Tailwind utilities and inline light colors are re-mapped
   to tokens so both themes stay correct and readable.
   --------------------------------------------------------------- */
.bg-white, .bg-gray-50, .bg-gray-100, .bg-slate-50, .bg-slate-100 { color: var(--text) !important; }
.bg-gray-50, .bg-gray-100, .bg-slate-50, .bg-slate-100 { background: var(--surface-2) !important; }
.bg-gray-200, .bg-slate-200 { background: var(--border-soft) !important; }
.bg-gray-700, .bg-gray-800, .bg-gray-900, .bg-slate-700, .bg-slate-800, .bg-slate-900 { background: var(--nav-2) !important; color: var(--nav-fg) !important; }
.text-gray-300, .text-gray-400, .text-slate-300, .text-slate-400 { color: var(--muted) !important; }
.text-black { color: var(--text-strong) !important; }
.border-gray-100, .border-gray-200, .border-slate-100, .border-slate-200 { border-color: var(--border-soft) !important; }
.border-gray-300, .border-gray-400, .border-slate-300 { border-color: var(--border) !important; }
.bg-red-50, .bg-rose-50 { background: var(--danger-soft) !important; }
.bg-green-50, .bg-emerald-50 { background: var(--success-soft) !important; }
.bg-yellow-50, .bg-amber-50 { background: var(--warning-soft) !important; }
.bg-blue-50, .bg-sky-50, .bg-indigo-50 { background: var(--info-soft) !important; }
.text-yellow-600, .text-yellow-700, .text-amber-600, .text-amber-700 { color: var(--warning) !important; }
.shadow-md, .shadow-lg { box-shadow: var(--shadow-md) !important; }

body.theme-dark img:not([src*=".svg"]) { filter: brightness(.94) contrast(1.02); }
body.theme-dark .tbl thead th { background: var(--surface-2); }
body.theme-dark .tbl tbody tr:hover { background: var(--surface-3, var(--surface-2)); }
body.theme-dark .badge, body.theme-dark .chip { border-color: var(--border); }
body.theme-dark .btn-soft { background: var(--brand-soft); color: var(--brand-dark); }
body.theme-dark .path-step.has { color: var(--copper-dark); }
body.theme-dark .auth-shell, body.theme-dark .auth-panel { background: var(--surface); }
body.theme-dark ::selection { background: rgba(208,138,82,.28); }
body.theme-dark .card, body.theme-dark .stat, body.theme-dark .cloud-panel { border-color: var(--border-soft); }
body.theme-dark .rfq-top { background: color-mix(in srgb, var(--surface) 82%, transparent); }
body.theme-dark .skeleton { background: linear-gradient(90deg, var(--surface-2), var(--surface-3, var(--border-soft)), var(--surface-2)); }
body.theme-dark hr, body.theme-dark .soft-divider { background: var(--border-soft); border-color: var(--border-soft); }

/* ---------------------------------------------------------------
   24. Page modules (moved out of per-view <style> blocks so every
   screen is styled from this single source of truth)
   --------------------------------------------------------------- */
/* shared 2-column form grid used by create/edit/settings screens */
.rfq-form-grid, .auto-form-grid, .rfq-sec-grid, .rfq-users-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4);
}
.rfq-form-grid > .full, .auto-form-grid > .full { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .rfq-form-grid, .auto-form-grid, .rfq-sec-grid, .rfq-users-grid { grid-template-columns: 1fr; }
}

/* settings shell */
.settings-nav { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow: auto; }
.settings-main { min-width: 0; }
@media (max-width: 900px) { .settings-nav { position: relative; top: 0; max-height: none; } }

/* work queue shell */
.wq-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: var(--s-4); align-items: start; min-height: 60vh; }
.wq-side-label { display: flex; align-items: center; gap: var(--s-2); }
.wq-count {
  min-width: 22px; height: 22px; border-radius: var(--r-full);
  background: var(--brand-soft-2); color: var(--brand-dark);
  font-size: var(--fs-xs); font-weight: 800; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.wq-side-item.active .wq-count { background: var(--brand); color: #fff; }

/* kanban board */
.kanban-wrap { display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 480px; }
#kanban-board { display: flex; gap: var(--s-3); overflow-x: auto; overflow-y: hidden; flex: 1; align-items: stretch; padding-bottom: var(--s-2); }
.kanban-col {
  flex: 0 0 300px; display: flex; flex-direction: column;
  background: var(--brand-soft-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: var(--s-3); height: 100%; max-height: 100%;
}
.column-dropzone { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-2); }
.case-card.dragging { opacity: .45; }
.column-dropzone.drag-over { outline: 2px dashed var(--brand); outline-offset: 2px; }
#kanban-board.kanban-panning { cursor: grabbing; user-select: none; }
#kanban-board.kanban-panning * { cursor: grabbing !important; user-select: none !important; }
#kanbanToast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: #fff; padding: 10px 18px; border-radius: var(--r-md);
  font-size: var(--fs-base); font-weight: 700; z-index: 9999; display: none;
  box-shadow: var(--shadow-md);
}
#kanbanToast.err { background: var(--danger); }

/* jalali datepicker */
.jdp-container, .jalali-datepicker { font-family: Vazirmatn, Tahoma, sans-serif !important; }
input.jdp { direction: ltr; text-align: center; font-variant-numeric: normal; }
.hidden { display: none !important; }
.grid-stats > .stat:only-child { max-width: 340px; }

/* ========== Mobile UX patch v20.4 ========== */
.filter-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.filter-row-grow {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 0 12px;
  font-size: 13px;
  font-family: inherit;
}
.filter-row-select {
  flex: 0 1 auto;
  max-width: 38%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 0 8px;
  font-size: 12px;
  font-family: inherit;
}
.filter-row .btn { flex: 0 0 auto; height: 40px; white-space: nowrap; }

.list-cards { display: flex; flex-direction: column; }
.list-card {
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
  color: inherit;
}
.list-card:last-child { border-bottom: 0; }
.list-card:active, .list-card:hover { background: var(--surface-2); }
.list-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.list-card-id { font-weight: 700; color: var(--brand); font-size: 13px; }
.list-card-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.list-card-meta { font-size: 12px; color: var(--muted); }

@media (max-width: 768px) {
  .hide-on-mobile { display: none !important; }
  .path.hide-on-mobile { display: none !important; }

  /* دکمه‌های اکشن: همه در یک ردیف، عرض مساوی، ارتفاع کم */
  .rfq-page-actions,
  .rfq-record-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100%;
  }
  .rfq-page-actions > .btn,
  .rfq-record-actions > .btn,
  .rfq-page-actions > a.btn,
  .rfq-record-actions > a.btn,
  .rfq-page-actions > form,
  .rfq-record-actions > form {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    flex-basis: 0 !important;
    justify-content: center;
    height: 40px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rfq-page-actions > form > .btn,
  .rfq-record-actions > form > .btn {
    width: 100%;
    height: 40px !important;
    /* .btn { min-height: 42px } (پایین‌ترِ همین فایل) از height:40px بلندتر
       بود و باعث می‌شد ۲px از پایینِ دکمه‌ای که داخلِ form است (مثلِ «حذف»)
       بریده/نامرئی به‌نظر برسد — چون خودِ <form> که این دکمه توش نشسته
       دقیقاً ۴۰px بود ولی دکمه به‌خاطرِ min-height کمی از آن بلندتر می‌شد. */
    min-height: 40px !important;
  }

  .filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .filter-row-select { max-width: 120px; font-size: 11px; }

  /* تنظیمات: منوی افقی اسکرول‌شونده به‌جای ستون بلند */
  .settings-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .settings-nav {
    position: relative !important;
    top: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .settings-nav .card-b {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding: 10px !important;
  }
  .settings-nav-group { display: none !important; }
  .settings-nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
    border-radius: 999px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    border: 1px solid var(--border);
    background: var(--surface-2);
  }
  .settings-nav-item.active {
    background: var(--brand-soft) !important;
    color: var(--brand-dark) !important;
    border-color: transparent;
  }
  .settings-nav .card-h { display: none; }

  /* صف کاری موبایل */
  .wq-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .wq-side {
    position: relative !important;
    width: 100% !important;
    max-height: none !important;
  }
  .wq-side-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .wq-side-item {
    flex: 0 0 auto;
    min-width: 140px;
    border-radius: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 12px;
  }
  .wq-side-item.active {
    border-color: var(--brand);
    background: var(--brand-soft);
  }
}

.hide-on-desktop { display: none !important; }
@media (max-width: 768px) {
  .hide-on-desktop { display: block !important; }
  .hide-on-mobile-nav { display: none !important; }
}

.wq-tabs-scroll { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 768px) {
  .wq-tabs-scroll {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
  }
  .wq-tabs-scroll .wq-side-item {
    flex: 0 0 auto;
    min-width: 150px;
  }
}

/* v20.5 filter compact */
.filter-stack { width: 100%; }
.filter-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100%;
}
.filter-row-grow, .filter-row .filter-row-grow {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: 40px !important;
  min-height: 40px !important;
  font-size: 14px !important;
}
.filter-row-select, .filter-row select {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: 40px !important;
  min-height: 40px !important;
  font-size: 12px !important;
  padding: 0 8px !important;
}
.filter-row .btn, .filter-row button {
  flex: 0 0 auto !important;
  height: 40px !important;
  min-height: 40px !important;
  width: auto !important;
}
/* report date-range filter: از تاریخ / تا تاریخ / دکمه‌ی اجرا همیشه در یک
   ردیف کنار هم بمانند — حتی در نمای موبایل (به‌جای پشتِ سرِ هم چیده شدن)؛
   در عرض خیلی باریک به‌جای شکستنِ ردیف، اسکرولِ افقی می‌خورد. */
.filter-bar.rpt-date-row,
.filter-bar.rpt-inline-row {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
}
.filter-bar.rpt-date-row > *,
.filter-bar.rpt-inline-row > * {
  width: auto !important;
  flex: 0 0 auto !important;
}
.filter-bar.rpt-date-row input,
.filter-bar.rpt-date-row .filter-input,
.filter-bar.rpt-inline-row input,
.filter-bar.rpt-inline-row .filter-input {
  width: 90px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding-inline: 6px !important;
  font-size: 12px !important;
}
@media (max-width: 480px) {
  .filter-bar.rpt-date-row,
  .filter-bar.rpt-inline-row { gap: 4px !important; padding: 8px !important; }
  .filter-bar.rpt-date-row label,
  .filter-bar.rpt-inline-row label { font-size: 11px !important; }
  .filter-bar.rpt-date-row input,
  .filter-bar.rpt-date-row .filter-input,
  .filter-bar.rpt-inline-row input,
  .filter-bar.rpt-inline-row .filter-input { width: 80px !important; }
}
@media (max-width: 767px) {
  /* روی موبایل کل باکس (از تاریخ/تا تاریخ/دکمه) وسط صفحه نمایش داده بشه،
     نه چسبیده به یک طرف. */
  .filter-bar.rpt-date-row { justify-content: center !important; }
}

@media (max-width: 768px) {
  .filter-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  /* legacy filter-bar: force children not full-height monsters */
  .filter-bar > input,
  .filter-bar > select,
  .filter-bar > .filter-input {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    font-size: 14px !important;
  }
  .filter-bar > select {
    /* status select was huge because of size attribute? */
    size: 1 !important;
  }
  select.filter-input, select.filter-row-select {
    appearance: auto;
    -webkit-appearance: menulist;
    background-image: none;
  }
  /* page action buttons equal */
  .rfq-page-actions > .btn:first-child,
  .rfq-record-actions > .btn:first-child {
    flex-basis: 0 !important;
  }
}

/* Work queue redesign v20.6 */
.wq-page { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.wq-controls { width: 100%; }
.wq-period-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.wq-period-label {
  font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap;
}
.wq-period-row select {
  flex: 1; height: 40px; min-height: 40px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 0 10px; font-family: inherit; font-size: 13px;
}
.wq-tab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 900px) {
  .wq-tab-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.wq-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  text-decoration: none;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  min-height: 44px;
}
.wq-tab.active {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-dark);
  box-shadow: 0 0 0 1px var(--brand);
}
.wq-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; font-size: 11px; font-weight: 800;
  background: rgba(0,0,0,.06); color: inherit;
}
.wq-tab.active .wq-tab-count { background: rgba(184,112,60,.2); }
.wq-main { width: 100%; min-width: 0; overflow: hidden; }
.wq-main .card-b { width: 100%; }
.data-table-mobile { display: none; }
.data-table-desktop { display: block; }
@media (max-width: 768px) {
  .data-table-desktop { display: none !important; }
  .data-table-mobile { display: block !important; }
  .wq-tab-label { font-size: 12px; line-height: 1.3; }
  .wq-main { min-height: 200px; }
}

/* ===== Unified filters v20.7 ===== */
.rfq-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; width: 100%; }
.rfq-filters-search, .rfq-filters-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%;
}
.rfq-f-input {
  flex: 1 1 140px; min-width: 0; height: 40px !important; min-height: 40px !important; max-height: 40px !important;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 0 12px; font-size: 14px !important; font-family: inherit; box-sizing: border-box;
}
.rfq-f-select {
  flex: 0 0 auto; width: auto; max-width: 70vw;
  height: 40px !important; min-height: 40px !important; max-height: 40px !important;
  border-radius: 10px; border: 1px solid var(--border); background-color: var(--surface); color: var(--text);
  padding: 0 30px 0 12px !important; font-size: 12px !important; font-family: inherit; box-sizing: border-box;
  text-align: right; text-align-last: right;
  -webkit-appearance: none !important; appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d737e' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-size: 12px; background-position: left 5px center;
}
[dir="ltr"] .rfq-f-select {
  text-align: left; text-align-last: left;
  padding: 0 12px 0 30px !important; background-position: right 5px center;
}
.rfq-f-btn { flex: 0 0 auto !important; height: 40px !important; min-height: 40px !important; width: auto !important; white-space: nowrap; }
@media (min-width: 900px) {
  .rfq-filters { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .rfq-filters-search { flex: 1 1 240px; }
  .rfq-filters-meta { flex: 2 1 360px; flex-wrap: wrap; }
  .rfq-f-select { max-width: none; }
  /* same search-field width on every page (matches the contacts page) */
  .rfq-filters-search .rfq-f-input { flex: 0 1 240px !important; }
}
@media (max-width: 899px) {
  .rfq-filters-search { flex-wrap: nowrap; }
  .rfq-filters-meta { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .settings-mobile-select, .settings-mobile-select .card-b, select.settings-mobile-dd {
    width: 100% !important; max-width: 100% !important; display: block !important; box-sizing: border-box !important;
  }
  select.settings-mobile-dd { height: 44px !important; min-height: 44px !important; }
}

/* ===== select listbox kill switch v20.8 ===== */
select.filter-row-select,
select.filter-input,
.rfq-filters select:not(.rfq-f-select),
.filter-bar select,
.filter-row select {
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  line-height: 40px !important;
  overflow: hidden !important;
  size: 1 !important;
}
/* rfq-f-select keeps its own custom arrow + right-aligned text (see above),
   so it must NOT get the native menulist arrow back here */
select.rfq-f-select {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  line-height: 40px !important;
  overflow: hidden !important;
}
/* Safari/iOS: prevent expanded select look */
select.rfq-f-select:not(:focus) {
  height: 40px !important;
}
@media (max-width: 899px) {
  .rfq-filters-meta {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    overflow: visible !important;
  }
  .rfq-filters-meta .rfq-f-select {
    width: 100% !important;
    max-width: 100% !important;
  }
  .rfq-filters-meta .rfq-f-btn {
    grid-column: 1 / -1;
    width: 100% !important;
  }
  .rfq-filters-search {
    display: flex !important;
    flex-wrap: nowrap !important;
  }
}


/* ===== v20.9 SELECT HARD CAP (iOS) ===== */
select, select.rfq-f-select, select.filter-input, .rfq-content select {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  line-height: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  vertical-align: middle;
}
select[size], select[size="0"], select[size="1"] {
  height: 40px !important;
  max-height: 40px !important;
}
/* never multi-line select */
select:not([multiple]) {
  size: 1;
}


/* ===== v20.11 desktop/mobile polish ===== */

/* Calendar without Tailwind */
.cal-mobile-only { display: block; }
.cal-desktop-only { display: none !important; }
@media (min-width: 900px) {
  .cal-mobile-only { display: none !important; }
  .cal-desktop-only { display: block !important; }
  .cal-desktop-only.cal-nav-actions { display: inline-flex !important; align-items: center; gap: 8px; flex-wrap: wrap; }
}
.cal-nav-actions { align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-mobile-only.cal-nav-actions { display: flex; }
.cal-month-head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--muted);
}
.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.cal-month-grid > div {
  min-height: 88px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 6px;
  background: var(--surface);
  font-size: 12px;
}

/* desktop week view: 7 columns side by side */
.cal-week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-3); }
.cal-week-col { border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; min-height: calc(100vh - 260px); display: flex; flex-direction: column; }
.cal-week-col.is-fri { background: var(--danger-soft); }
.cal-week-col.is-today { box-shadow: 0 0 0 2px var(--brand) inset; }
.cal-week-col-head { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s-2); border-bottom: 1px solid var(--border-soft); font-size: 12px; font-weight: 700; color: var(--muted); }
.cal-week-col.is-fri .cal-week-col-head { color: var(--danger); }
.cal-week-col-head strong { font-size: 18px; color: var(--text-strong); }
.cal-week-col-body { padding: var(--s-2); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cal-task-pill { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--brand-soft-2); border: 1px solid var(--border-soft); font-size: 12px; font-weight: 600; color: var(--brand-dark); }
.cal-task-pill small { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.cal-empty { font-size: 12px; color: var(--muted); padding: var(--s-2) 0; text-align: center; }

/* desktop day view */
.cal-day-view { border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--surface); max-width: 560px; min-height: calc(100vh - 260px); display: flex; flex-direction: column; }
.cal-day-view-body { flex: 1; }
.cal-day-view.is-fri .cal-day-view-head { color: var(--danger); }
.cal-day-view-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border-bottom: 1px solid var(--border-soft); font-weight: 700; color: var(--muted); }
.cal-day-view-head strong { font-size: 16px; color: var(--text-strong); }
.cal-day-view-body { padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
.cal-task-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); background: var(--brand-soft-2); border: 1px solid var(--border-soft); font-size: 13px; font-weight: 600; color: var(--brand-dark); }
.cal-task-row small { font-size: 11.5px; font-weight: 500; color: var(--muted); }

/* mobile week list: real spacing between day cards */
.cal-mobile-week-list { display: flex; flex-direction: column; gap: var(--s-3); }

/* mobile day view: full-height single-day list (matches desktop's .cal-day-view but fills the mobile viewport) */
.cal-mobile-day-view { min-height: calc(100vh - var(--header-h) - 160px); display: flex; flex-direction: column; }
.cal-mobile-day-view-body { flex: 1; display: flex; flex-direction: column; gap: var(--s-2); }

/* بج‌های دسته‌بندی رویدادهای تقویم — رنگ پس‌زمینه و حاشیه ثابته، رنگ متن
   در تم تیره روشن‌تر می‌شه تا روی پس‌زمینه تیره هم خوانا بمونه (این کلاس‌ها
   بعد از .cal-task-pill/.cal-task-row اومدن تا با specificity برابر، رنگ
   پیش‌فرض اون‌ها رو override کنن). */
.cal-badge-task { background:#eab30822; border-color:#eab30855; color:#a16207; }
.cal-badge-case { background:#16a34a22; border-color:#16a34a55; color:#15803d; }
.cal-badge-meeting { background:#3b82f622; border-color:#3b82f655; color:#1d4ed8; }
.cal-badge-followup { background:#ec489922; border-color:#ec489955; color:#be185d; }
.cal-badge-cert { background:#d9770622; border-color:#d9770655; color:#92400e; }
.cal-badge-overdue { background:#ef444422; border-color:#ef444455; color:#b91c1c; }

body.theme-dark .cal-badge-task, html.theme-dark .cal-badge-task { color:#fde047; }
body.theme-dark .cal-badge-case, html.theme-dark .cal-badge-case { color:#4ade80; }
body.theme-dark .cal-badge-meeting, html.theme-dark .cal-badge-meeting { color:#93c5fd; }
body.theme-dark .cal-badge-followup, html.theme-dark .cal-badge-followup { color:#f9a8d4; }
body.theme-dark .cal-badge-cert, html.theme-dark .cal-badge-cert { color:#fdba74; }
body.theme-dark .cal-badge-overdue, html.theme-dark .cal-badge-overdue { color:#fca5a5; }

/* Filters desktop: one row, select width = content */
@media (min-width: 900px) {
  .rfq-filters {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .rfq-filters-search {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 180px !important;
    max-width: 42% !important;
    flex-wrap: nowrap !important;
  }
  .rfq-filters-meta {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  .rfq-f-select {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .rfq-f-btn {
    width: auto !important;
    flex: 0 0 auto !important;
  }
}

/* Mobile: filter button not full width next to select */
@media (max-width: 899px) {
  .rfq-filters-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: auto !important;
  }
  .rfq-filters-meta .rfq-f-select {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 55vw !important;
  }
  .rfq-filters-meta .rfq-f-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    grid-column: auto !important;
  }
}

/* Users table: header row + rows share the same grid so columns line up.
   نکته: .user-table-head قبلاً خودش مستقیماً grid بود ولی .user-row-actions
   (دکمه‌های ویرایش/حذف) هم عرضی از خودِ ردیف می‌گرفت که هدر برایش جا نگه
   نمی‌داشت — یعنی گریدِ ۳‌ستونیِ هدر روی عرضِ کاملِ ردیف حساب می‌شد ولی
   گریدِ ۳‌ستونیِ هر ردیف روی عرض‌ِ کمتر (منهایِ عرضِ اکشن‌ها) — همین باعثِ
   ناهم‌ترازیِ ستون‌ها می‌شد. حالا هدر هم دقیقاً همون ساختارِ فلکس (main + یک
   spacer به‌اندازه‌ی اکشن‌ها) را دارد تا هر دو روی عرضِ یکسان محاسبه شوند. */
.user-table-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  font-size: 11px; font-weight: 700; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.user-row-main {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1fr);
  gap: 12px;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
}
.user-row-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-row-email { font-size: 12px; color: var(--muted); direction: ltr; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.user-row-roles { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.user-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
.user-table-head-actions-spacer { flex-shrink: 0; visibility: hidden; display: flex; gap: 4px; }
.user-table-head .user-row-main span:nth-child(2), .user-table-head .user-row-main span:nth-child(3) { text-align: center; }
@media (max-width: 640px) {
  .user-table-head { display: none; }
  .user-row { flex-wrap: wrap; }
  .user-row-main { grid-template-columns: 1fr; gap: 4px; }
  .user-row-email { text-align: center; }
}

/* Templates layout 70/30 — RTL: first column is right */
.tpl-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: var(--s-4);
  align-items: start;
}
/* If DOM still has list first, reorder: form first in visual RTL right */
.tpl-layout {
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
}
/* RTL: list (30%) on left visual end, create (70%) on right — in RTL first column is right so put create first in DOM if possible.
   With DOM list then create: assign areas */
.tpl-layout .tpl-list { grid-column: 1; }
.tpl-layout .tpl-create { grid-column: 2; }
html[dir="rtl"] .tpl-layout {
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
}
html[dir="rtl"] .tpl-layout .tpl-create { grid-column: 1; }
html[dir="rtl"] .tpl-layout .tpl-list { grid-column: 2; }
@media (max-width: 900px) {
  .tpl-layout { grid-template-columns: 1fr !important; }
  .tpl-layout .tpl-list, .tpl-layout .tpl-create { grid-column: auto !important; }
}

/* Settings main full width on mobile */
@media (max-width: 899px) {
  .settings-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .settings-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .settings-main > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .settings-mobile-select { width: 100% !important; }
}

/* Backup cloud card same width as siblings */
.settings-main .rfq-grid-2,
.settings-main .backup-grid {
  grid-template-columns: 1fr !important;
}
@media (min-width: 900px) {
  .settings-main .backup-equal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
  }
}


/* ===== v20.12 polish ===== */
/* filters wrap onto a second row instead of scrolling horizontally */
.rfq-filters-meta { flex-wrap: wrap !important; overflow-x: visible !important; row-gap: 6px !important; }
.rfq-filters { margin-top: 0 !important; }
.rfq-filters-search, .rfq-filters-meta { margin-top: 0 !important; padding-top: 0 !important; }
@media (min-width: 900px) {
  .rfq-filters {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
  }
  /* RTL: search on the right (start), filters on the left (end) */
  .rfq-filters-search {
    order: 1;
    margin: 0 !important;
    max-width: 40%;
  }
  .rfq-filters-meta {
    order: 2;
    margin: 0 !important;
    margin-inline-start: auto !important; /* push to left in RTL = end */
    justify-content: flex-end;
  }
}

/* v20.23: force cases/tasks filter row into one line, no matter what
   earlier rules in this file do — fixes the meta select group rendering
   detached below the table on desktop. */
@media (min-width: 900px) {
  #tasksFilters, #casesFilters, #mdCasesFilters, #contactsFilters, #orgsFilters, #documentsFilters {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
  }
  #tasksFilters > .rfq-filters-search, #casesFilters > .rfq-filters-search, #mdCasesFilters > .rfq-filters-search,
  #contactsFilters > .rfq-filters-search, #orgsFilters > .rfq-filters-search, #documentsFilters > .rfq-filters-search {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    max-width: none !important;
    width: 100% !important;
    align-items: center !important;
    gap: 8px !important;
    order: 1 !important;
  }
  #tasksFilters > .rfq-filters-meta, #casesFilters > .rfq-filters-meta {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    margin-inline-start: 0 !important;
    align-items: center !important;
    gap: 8px !important;
    order: 2 !important;
  }
}

.pipeline-form-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 0.7fr) auto;
  gap: 10px;
  align-items: end;
}
@media (max-width: 900px) {
  .pipeline-form-row { grid-template-columns: 1fr !important; }
}

/* Industries 70/30 RTL */
.ind-layout {
  display: grid;
  gap: var(--s-4);
  align-items: start;
}
html[dir="rtl"] .ind-layout {
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
}
html[dir="rtl"] .ind-layout .ind-list { grid-column: 1; }
html[dir="rtl"] .ind-layout .ind-add { grid-column: 2; }
html:not([dir="rtl"]) .ind-layout {
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
}
@media (max-width: 900px) {
  .ind-layout { grid-template-columns: 1fr !important; }
  .ind-layout .ind-list, .ind-layout .ind-add { grid-column: auto !important; }
}

/* Templates top-align */
.tpl-layout {
  align-items: start !important;
}
.tpl-layout > .card {
  align-self: start !important;
  margin-top: 0 !important;
}
.tpl-layout .card-h {
  min-height: 44px;
}
/* create-template box now sits BELOW the existing-templates box, not beside it */
.tpl-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--s-4);
}
.tpl-layout .tpl-list, .tpl-layout .tpl-create { grid-column: auto !important; width: 100%; }

/* hide empty highlights */
.rfq-highlights:empty { display: none !important; }


/* ===== v20.13 ===== */
.task-edit-page { width: 100%; max-width: none !important; margin: 0 !important; }
.task-edit-page .card, .task-edit-page form { width: 100%; max-width: none; }

.rtl-fields, .rtl-fields .field-row, .rtl-fields .lbl, .rtl-fields .val {
  text-align: right !important;
  direction: rtl;
}
.field-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  text-align: right;
  direction: rtl;
}
.field-row .lbl { color: var(--muted); font-size: 13px; font-weight: 600; text-align: right; }
.field-row .val { font-size: 13px; text-align: right; word-break: break-word; }

.org-show-grid { grid-template-columns: 1fr 1fr !important; }
@media (max-width: 900px) { .org-show-grid { grid-template-columns: 1fr !important; } }

.org-show-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "about contacts";
  gap: var(--s-4);
  align-items: start;
}
@media (max-width: 900px) {
  .org-show-layout { grid-template-columns: 1fr !important; }
}

/* multi-select tags must NOT be capped to 40px */
select[multiple], select.tag-multiselect {
  height: auto !important;
  min-height: 140px !important;
  max-height: none !important;
  line-height: 1.4 !important;
  padding: 8px !important;
  overflow: auto !important;
  -webkit-appearance: listbox !important;
  appearance: auto !important;
}

/* Mobile filters: ONE full-width row, no horizontal scroll */
@media (max-width: 899px) {
  .rfq-filters {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  /* the filter panel is absolutely-positioned and taller than the row —
     the row's own overflow:hidden (kept to avoid horizontal scroll while
     closed) must not clip it once it's open, or the panel becomes
     invisible/unclickable on mobile (kanban pages hit this). */
  .rfq-filters:has(.filter-panel-root.open) {
    overflow: visible !important;
  }
  .rfq-filters-search,
  .rfq-filters-meta {
    display: contents !important; /* flatten into one row */
  }
  .rfq-f-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  .rfq-f-select {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 28vw !important;
    font-size: 11px !important;
  }
  .rfq-f-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}


/* ===== v20.19 dashboard trend charts full-width row ===== */
.dash-charts-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 16px;
  margin-bottom: 0;
  align-items: stretch;
  box-sizing: border-box;
}
.dash-charts-row > .card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  grid-column: auto !important;
}
.dash-charts-row > .card .card-b {
  width: 100%;
}
@media (max-width: 900px) {
  .dash-charts-row {
    grid-template-columns: 1fr !important;
  }
}


/* ===== v20.22: cases/tasks/docs mobile = 2 rows only ===== */
@media (max-width: 899px) {
  .rfq-filters.rfq-filters-stack {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
  }
  /* undo global display:contents for these pages */
  .rfq-filters-stack > .rfq-filters-search,
  .rfq-filters-stack > .rfq-filters-meta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 4px !important;
    overflow-x: visible !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }
  .rfq-filters-stack .rfq-f-input {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  .rfq-filters-stack .rfq-filters-search .rfq-f-select,
  .rfq-filters-stack .rfq-filters-meta .rfq-f-select {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    font-size: 11.5px !important;
    padding-inline: 6px !important;
  }
  .rfq-filters-stack .rfq-f-btn,
  .rfq-filters-stack .bulk-apply-btn {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    padding-inline: 8px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* ===== v20.25: configurable dashboard layout ===== */
.dash-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px; width: 100%; }
.dash-flow-item {
  flex: 1 1 calc(var(--dfw, 50%) - 20px);
  max-width: calc(var(--dfw, 50%) - 0.01px);
  min-width: 0;
  display: flex;
  box-sizing: border-box;
}
.dash-flow-item > .card, .dash-flow-item > .x-card, .dash-flow-item > div { width: 100%; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; }
.dash-flow-item .card-b { flex: 1 1 auto; min-width: 0; }
.dash-flow-item .card-h { flex-wrap: wrap; gap: 8px; }
.chart-menu-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
@media (max-width: 1158px) {
  .chart-menu-wrap { width: 30px; height: 30px; }
  .chart-menu-wrap select {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
  }
  .chart-menu-wrap::after {
    content: '⋮'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 700; color: var(--muted); pointer-events: none;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  }
}
.dash-flow-item .card-b > * { max-width: 100%; }
.dash-flow-item table.tbl { min-width: 0; }
/* below this width the rail eats too much of the viewport for the % widths to make sense — stack full-width */
@media (max-width: 900px) {
  .dash-flow-item { flex-basis: 100% !important; max-width: 100% !important; }
}

/* settings > dashboard layout manager */
.dash-layout-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border-soft); border-radius: var(--r-md);
  background: var(--surface); margin-bottom: 8px; cursor: move;
}
.dash-layout-row.dragging { opacity: .4; }
.dash-layout-handle { color: var(--muted); font-size: 16px; flex-shrink: 0; }
.dash-layout-label { flex: 1; font-weight: 600; font-size: 13px; }
.dash-layout-widths { display: flex; gap: 4px; flex-wrap: wrap; flex-shrink: 0; }
.dash-w-btn {
  height: 30px; padding: 0 10px; font-size: 11.5px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer;
}
.dash-w-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.dash-layout-preview-box { width: var(--pw, 50%); max-width: 60px; height: 8px; border-radius: 4px; background: var(--brand); flex-shrink: 0; }
@media (max-width: 600px) {
  .dash-layout-row { flex-wrap: wrap; }
  .dash-layout-widths { width: 100%; justify-content: flex-start; margin-inline-start: 26px; }
}

/* ===== v20.24 UI polish ===== */
.dash-trend-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  margin: 16px 0;
  box-sizing: border-box;
}
.dash-trend-pair > .card {
  width: 100%;
  min-width: 0;
  margin: 0;
}
@media (max-width: 900px) {
  .dash-trend-pair {
    grid-template-columns: 1fr !important;
  }
  .dash-trend-pair > .card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* remove extra top gap above pipeline + recent cases */
.dash-top-grid { margin-top: 0 !important; padding-top: 0 !important; }
.grid-stats { margin-bottom: 12px; }

/* desktop search: align to start (right in RTL), no center, no kbd circle */
.rfq-top-search {
  margin-inline: 0 !important;
  margin-inline-end: auto !important;
  flex: 1 1 auto;
  max-width: 420px;
}
.rfq-top-search kbd { display: none !important; }

/* pagination always visible (no Tailwind .hidden trap) */
.rfq-pagination-nav, .rfq-pagination {
  display: block !important;
  width: 100%;
  margin-top: 12px;
}
.rfq-pagination-inner {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.rfq-page-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
  font-family: inherit;
}
.rfq-page-btn.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 700;
}
.rfq-page-btn.is-disabled {
  opacity: .45;
  pointer-events: none;
}
/* neutralize Laravel Tailwind pagination leftovers */
nav[role="navigation"] .hidden { display: flex !important; flex-wrap: wrap; gap: 4px; }
nav[role="navigation"] .sm\:hidden { display: none !important; }

.mobile-list-card {
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.mobile-list-card:active { background: var(--brand-soft); }


/* ===== v20.26 trend full-width row ===== */
.dash-trend-pair {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 16px 0 !important;
  clear: both !important;
  grid-column: 1 / -1 !important;
}
.dash-trend-pair > .card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
}
/* never let parent grid shrink trend children */
.rfq-grid-2 > .dash-trend-pair {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}
@media (max-width: 900px) {
  .dash-trend-pair {
    grid-template-columns: 1fr !important;
  }
}


/* v20.27 hard 50% */
.dash-trend-pair {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
}
.rfq-content > .dash-trend-pair,
.rfq-main .dash-trend-pair {
  width: 100% !important;
}
@media (max-width: 900px) {
  .dash-trend-pair {
    grid-template-columns: 1fr !important;
  }
}


/* ===== v20.29 dashboard layout order ===== */
.dash-trend-pair {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 16px 0 !important;
}
.dash-charts-3 {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 16px 0 !important;
}
.dash-charts-3 > .card { min-width: 0; margin: 0; }
.dash-activity-full { width: 100% !important; }
.activity-feed-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.activity-feed-cols .activity-feed-item {
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
  border-inline-end: 1px solid var(--border);
}
.activity-feed-cols .activity-feed-item:nth-child(3n) {
  border-inline-end: none;
}
@media (max-width: 1100px) {
  .dash-charts-3 { grid-template-columns: 1fr 1fr !important; }
  .activity-feed-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-feed-cols .activity-feed-item:nth-child(3n) { border-inline-end: 1px solid var(--border); }
  .activity-feed-cols .activity-feed-item:nth-child(2n) { border-inline-end: none; }
}
@media (max-width: 900px) {
  .dash-trend-pair,
  .dash-charts-3,
  .activity-feed-cols {
    grid-template-columns: 1fr !important;
  }
  .activity-feed-cols .activity-feed-item {
    border-inline-end: none !important;
  }
}


/* ===== v20.31 KPI tones + activity list rows ===== */
.grid-stats.kpi-7 { --kpi-cols: 7; }
@media (max-width: 1400px) { .grid-stats.kpi-7 { --kpi-cols: 4 !important; } }
@media (max-width: 900px)  { .grid-stats.kpi-7 { --kpi-cols: 2 !important; } }

.stat::after {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 0 !important;
  top: 0 !important; bottom: 0 !important;
  width: 4px !important;
  opacity: 1 !important;
  background: var(--stat-accent, var(--brand)) !important;
}
.stat-tone-open   { --stat-accent: #2563eb; }      /* آبی — پرونده باز */
.stat-tone-success{ --stat-accent: #16a34a; }      /* سبز — برنده */
.stat-tone-danger { --stat-accent: #dc2626; }      /* قرمز — معوق / بازنده */
.stat-tone-due    { --stat-accent: #d97706; }      /* نارنجی — سررسید */
.stat-tone-recv   { --stat-accent: #7c3aed; }      /* بنفش — مطالبات باز */
.stat-tone-rate   { --stat-accent: #0d9488; }      /* teal — نرخ برد */
.stat-tone-total  { --stat-accent: #64748b; }      /* خاکستری — کل */
.stat-tone-default{ --stat-accent: var(--brand); }
.stat-tone-brand  { --stat-accent: var(--brand); }
.stat-tone-warning{ --stat-accent: #d97706; }

/* فعالیت‌های اخیر: هر آیتم یک ردیف تمام‌عرض */
.activity-feed-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.activity-feed-list .activity-feed-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  border-inline-end: none !important;
  box-sizing: border-box;
}
.activity-feed-list .activity-feed-item:last-child {
  border-bottom: none;
}


/* ===== v20.32 ===== */
.grid-stats.kpi-8 { --kpi-cols: 4 !important; }
@media (max-width: 767px) { .grid-stats.kpi-8 { --kpi-cols: 2 !important; } }
.rfq-top-search kbd { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; overflow: hidden !important; }
/* M32: این قانون به تعریفِ اصلیِ .rfq-top-search .ico svg (بالای همین فایل)
   منتقل و کامل شد — نسخه‌ی جدا و ناقصِ این‌جا حذف شد تا دو تعریفِ پراکنده
   برای یک selector نماند. */
.dash-recent-cases th:last-child, .dash-recent-cases td:last-child { text-align: left !important; }
.activity-table { width: 100%; }


/* ===== Calendar dark/light ===== */
.cal-day {
  min-height: 88px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  background: var(--surface);
  color: var(--text);
}
.cal-day-fri {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 25%, var(--border));
}
.cal-day-today {
  box-shadow: 0 0 0 2px var(--brand);
}
.cal-day-num {
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--text-strong);
}
.cal-day-num-fri {
  color: var(--danger) !important;
}
.cal-head {
  background: var(--surface-2, var(--brand-soft-2));
  color: var(--muted);
}
.cal-head-fri {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  color: var(--danger);
}
.cal-day-empty {
  background: var(--surface-2, color-mix(in srgb, var(--muted) 8%, var(--surface)));
}
body.theme-dark .cal-day-num,
html.theme-dark body .cal-day-num {
  color: #f3f4f6 !important;
}
body.theme-dark .cal-day-num-fri,
html.theme-dark body .cal-day-num-fri {
  color: #fca5a5 !important;
}
body.theme-dark .cal-day:not(.cal-day-fri) {
  background: var(--surface);
  border-color: var(--border);
}


/* جلوگیری از اسکرول افقی جدول در داشبورد */
  .dash-top-grid .tbl { display: none !important; }
@media (min-width: 768px) {
  .data-table-desktop { display: block; }
  .data-table-mobile { display: none !important; }
}

/* آخرین پرونده‌ها موبایل: عنوان + سازمان در یک سلول */
.dash-recent-title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-strong);
  word-break: break-word;
}
.dash-recent-org {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.3;
}
.dash-recent-cases-mobile {
  width: 100%;
  table-layout: fixed;
}
.dash-recent-cases-mobile th,
.dash-recent-cases-mobile td {
  padding: 10px 8px;
  vertical-align: top;
}
.dash-recent-cases-mobile .badge,
.dash-recent-cases-mobile [class*="status"] {
  white-space: nowrap;
  font-size: 11px;
}
@media (max-width: 767px) {
  .data-table-desktop { display: none !important; }
  /* اصلاحِ واقعیِ باگ (تأییدشده با تستِ مجزا): نوشتنِ overflow-y:visible
     کنارِ overflow-x:hidden کافی نیست — طبقِ خودِ اسپکِ CSS، وقتی این دو با
     هم فرق دارن، مقدارِ 'visible' به 'auto' تبدیل می‌شه (نه اینکه واقعاً
     visible بمونه)! یعنی نسخه‌ی قبلیِ همین فیکس («overflow-x:hidden;
     overflow-y:visible») دقیقاً همون اسکرولِ ناخواسته رو تضمین می‌کرد. تنها
     راهِ واقعی این‌ه که overflow-x اصلاً hidden نباشه (هر دو یکسان/visible
     بمونن) — محافظتِ در برابرِ سرریزِ افقی از طریقِ min-width:0/overflow-wrap
     روی خودِ محتوای کارت‌ها انجام می‌شه، نه اینجا. */
  .data-table-mobile { display: block !important; overflow: visible; }
  .dash-recent-cases-mobile { display: table !important; width: 100%; }
  /* .docs-list-card یک overflow:hidden ثابت (inline) دارد که برای کلیپ‌کردن
     گوشه‌های گرد جدول دسکتاپ لازم است — روی موبایل همین باعث می‌شد فهرست
     کارت‌ها به‌جای رشد طبیعی صفحه، داخل خودش اسکرول عمودی جداگانه بگیرد.

     ریشه‌ی واقعیِ ادامه‌داشتنِ همین باگ بعد از این فیکس (پیدا شده با تستِ
     مجزا رویِ CSSOM واقعیِ صفحه): یه قاعده‌ی سراسریِ دیگه هست —
     «.card:has(table):not(:has(.dash-recent-cases-mobile)) { overflow-x:
     auto !important }» — که specificityـش (0,2,1) از این قاعده (0,1,0)
     بیشتره؛ چون .docs-list-card همیشه یه <table> دسکتاپیِ مخفی (display:none)
     داخلش داره، اون قاعده هنوزم match می‌شه (:has() به visibility کاری نداره)
     و overflow-x رو auto!important می‌کنه. این یعنی overflow-x و overflow-y
     دوباره با هم فرق پیدا می‌کنن → طبقِ همون کوئرکِ CSS بالا، overflow-y هم
     خودکار auto می‌شه و اسکرولِ ناخواسته برمی‌گرده. راه‌حل: specificityِ
     همین سطر رو با تکرارِ کلاس از (0,2,1) هم بیشتر می‌کنیم تا قطعی برنده باشه. */
  .docs-list-card.docs-list-card.docs-list-card { overflow: visible !important; }
}
@media (min-width: 768px) {
  .data-table-desktop { display: block; }
  .data-table-mobile { display: none !important; }
}

/* M21: فهرست اسناد — کارت جدول همیشه تا انتهای صفحه کشیده شود (مثل الگوی
   .cal-week-col/.cal-day-view: همان offset استاندارد ۲۶۰px برای هدر+فیلترهای
   بالای صفحه)، نه فقط به اندازه‌ی محتوای واقعی‌اش — حتی وقتی فهرست کوتاه است. */
@media (min-width: 769px) {
  .docs-list-card { min-height: calc(100vh - 260px); }
}

/* M23 (اصلاح M30، بعد از گزارش کاربر که هنوز یک اسکرولِ ناخواسته در سمت چپِ
   جدول دیده می‌شد): تلاشِ قبلی برای رفعِ این باگ (overflow-y: visible) واقعاً
   کار نمی‌کرد — طبق مشخصاتِ رسمیِ CSS (MDN/CSSWG: "computed value... با
   visible/clip محاسبه‌شده به‌صورتِ auto/hidden، اگر یکی از overflow-x یا
   overflow-y چیزی غیر از visible/clip باشد")، وقتی overflow-x برابر auto
   است، مقدارِ overflow-y even اگر صریحاً visible نوشته شود، مرورگر آن را
   خودکار به auto تبدیل می‌کند — یعنی خط قبلی عملاً بی‌اثر بود و همان
   اسکرول‌بارِ عمودیِ ناخواسته (که در RTL سمتِ چپ ظاهر می‌شود) باقی می‌ماند.
   مقدارِ hidden این تبدیلِ خودکار را ندارد، پس واقعاً جلوی اسکرولِ عمودیِ
   داخلی را می‌گیرد؛ چون هیچ height/max-height ثابتی روی این باکس نیست (فقط
   min-height)، محتوا هنوز طبیعتاً باکس را بلندتر می‌کند — فقط دیگر اسکرولِ
   داخلیِ جدا نمی‌سازد. اسکرولِ افقی (برای صفحه‌های باریک) دست‌نخورده می‌ماند. */
.docs-list-card .data-table-desktop { overflow-x: auto; overflow-y: hidden; }

/* همان باگ (overflow-x: auto روی .data-table-desktop خودکار overflow-y را هم
   auto می‌کند) روی فهرستِ وندورهای تاییدشده هم دیده شد — چون منوی «گزینه‌ها»یِ
   کشویی (x-dropdown) حتی وقتی بسته است یک باکسِ نامرئیِ absolute زیرِ آخرین
   ردیفِ جدول دارد که همین اسکرولِ ناخواسته را در دسکتاپ (نه فقط موبایل) هم
   برمی‌انگیزد. راه‌حل مشابه: overflow-y صریحاً hidden. */
.approved-vendors-card .data-table-desktop { overflow-x: auto; overflow-y: hidden; }

/* .card { overflow: hidden } (برایِ گردکردنِ گوشه‌هایِ جدول/تصویر) پنلِ
   بازشوی <x-searchable-select> (که برخلافِ x-dropdown، اسکریپتِ «باز کردنِ
   موقتِ overflowِ اجداد» رو نداره) رو می‌بره — باکسِ ادغامِ سازمان توش هیچ
   جدول/تصویری نداره که نیاز به کلیپ داشته باشه، پس اینجا overflow کاملاً باز می‌مونه. */
.org-merge-card.org-merge-card { overflow: visible !important; }

/* همان باگ، این‌بار روی فهرستِ پرتال‌هایِ کارفرمایان — بعد از افزودنِ منویِ
   «گزینه‌ها»یِ ویرایش (x-dropdown) به هر ردیف. */
.client-portals-card .data-table-desktop { overflow-x: auto; overflow-y: hidden; }

/* «صندوق ایمیل من» — چیدمان سه‌ستونه‌ی Gmail-مانند (پوشه‌ها | فهرست پیام | پنل خواندن).
   ارتفاع دقیقاً از متغیرهای واقعی لایوت (--header-h) محاسبه می‌شود، نه یک عدد حدسی —
   .rfq-shell-fill فقط روی مسیرهای mail.* توسط لایوت اضافه می‌شود (بدون اثر روی بقیه‌ی صفحات). */
.rfq-shell-fill { display: flex; flex-direction: column; height: calc(100vh - var(--header-h)); min-height: 0; }
.rfq-shell-fill .rfq-workspace { flex: 1; min-height: 0; }
.rfq-shell-fill .rfq-content { flex: 1; min-height: 0; }
.rfq-shell-fill .rfq-content > *:not(.mail-shell) { flex-shrink: 0; }

.mail-shell {
  display: flex; gap: var(--s-3); align-items: stretch; flex: 1; min-height: 0;
}
.mail-sidebar {
  flex: 0 0 210px; display: flex; flex-direction: column; gap: var(--s-2);
  background: var(--mail-sidebar-bg, var(--surface)); border: 1px solid var(--border-soft); border-radius: var(--r-md);
  padding: var(--s-3); overflow-y: auto;
}
.mail-account-switcher select {
  width: 100%; padding: 6px 8px; border-radius: var(--r-md);
  border: 1px solid var(--border-soft); background: var(--surface-2); font-size: 12px;
}
.mail-search-form input {
  width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: var(--r-md);
  border: 1px solid var(--border-soft); background: var(--surface-2); font-size: 12px; color: inherit;
}
/* دکمه‌ی «ایمیل جدید» داخل سایدبار (زیرِ باکسِ جستجو) فقط در نمای دسکتاپ دیده می‌شه؛
   دکمه‌ی بالای صفحه (hide-on-desktop) برایِ موبایل نگه داشته شده تا دوتایی نشه. */
.mail-compose-btn { width: 100%; margin: var(--s-2) 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.mail-folder-list { display: flex; flex-direction: column; gap: 2px; }
.mail-folder-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-md); font-size: 13px; font-weight: 600;
  color: inherit; text-decoration: none;
}
.mail-folder-item .lbl { flex: 1; }
.mail-folder-item:hover { background: var(--surface-2); }
.mail-folder-item.active { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.mail-folder-item .count { font-size: 11px; color: var(--muted); font-weight: 700; }
.mail-folder-item.active .count { color: var(--brand); }

.mail-list {
  flex: 0 0 auto; width: 330px; min-width: 220px; max-width: 640px; overflow-y: auto; min-height: 0;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md);
  display: flex; flex-direction: column;
}
.mail-resizer {
  flex: 0 0 6px; width: 6px; cursor: col-resize; position: relative; border-radius: var(--r-md);
}
.mail-resizer::after {
  content: ''; position: absolute; top: 8px; bottom: 8px; inset-inline-start: 2px; width: 2px;
  border-radius: 999px; background: var(--border-soft);
}
.mail-resizer:hover::after, .mail-resizer:active::after { background: var(--brand); }
.mail-list-toolbar {
  display: flex; align-items: center; gap: var(--s-2);
  padding-block: var(--s-2); padding-inline-start: 0; padding-inline-end: var(--s-3);
  border-bottom: 1px solid var(--border-soft); flex-shrink: 0;
}
.mail-bulk-actions { display: flex; gap: 2px; }
.mail-selected-count { font-size: 11px; color: var(--muted); }
.mail-list-pager { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.mail-list-pager-range { font-size: 11px; color: var(--muted); margin-inline-end: 4px; white-space: nowrap; }
.mail-list-rows { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; }
/* چیدمان با CSS Grid (نه flex) — چون چک‌باکس باید دقیقاً هم‌ردیف با «عنوان»
   (ردیف ۲) باشد و تاریخ/برچسب‌ها هم دقیقاً هم‌ردیف با «فرستنده»/«عنوان» خودشان،
   بدون حدس‌زدنِ margin — با grid-row صریح این تراز همیشه دقیق می‌ماند. سه
   ستون: چک‌باکس(۴۴px) | محتوای اصلی(۱fr) | تاریخ/برچسب(۱۲۰px، عرض ثابت تا با
   هوور که آیکون‌های عملیات جای تاریخ را می‌گیرند، عرض عنوان تکان نخورد). */
/* grid-template-rows با مقدار ثابت (نه auto) عمداً است: وقتی .mail-list-item
   (که سه خط داخلی‌اش را دارد) روی هر سه ردیف span می‌شود، الگوریتم auto-sizing
   گرید سایز هر ردیف را از ترکیب این آیتمِ spanning و بقیه‌ی سیبلینگ‌های تک‌ردیفی
   حدس می‌زند که همیشه دقیق نیست؛ با ارتفاع ثابت ۲۰px (که با ارتفاع واقعی خط
   فرستنده/عنوان یکی است)، تراز صددرصد تضمین می‌شود. padding هم از خودِ
   .mail-list-item برداشته و به کانتینر منتقل شده تا همه‌ی بچه‌ها (چک‌باکس،
   لینک، تاریخ/برچسب) از y=0 یکسان شروع شوند. */
.mail-list-row {
  display: grid; grid-template-columns: 44px 1fr 120px; grid-template-rows: 20px 20px auto;
  width: 100%; border-bottom: 1px solid var(--border-soft);
  padding-block: var(--s-3); padding-inline-end: var(--s-3);
}
.mail-list-row:hover { background: var(--surface-2); }
.mail-list-row.active { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.mail-list-row.selected { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.mail-list-row.unread .mail-list-sender,
.mail-list-row.unread .mail-list-title-row { font-weight: 800; }
.mail-list-checkbox {
  grid-column: 1; grid-row: 2; align-self: center; justify-self: center;
  display: flex; align-items: center; justify-content: center; margin: 0; cursor: pointer;
}
.mail-list-checkbox input { margin: 0; }
/* در نوار بالای فهرست (خارج از گرید ردیف‌ها): چک‌باکس دقیقاً هم‌اندازه‌ی
   آیکون‌های ۳۲px دیگر است تا با align-items:center نوار، خودکار هم‌تراز شود
   — بدون هیچ margin دستی که با هر تغییر دوباره به‌هم می‌ریخت. */
.mail-list-toolbar .mail-list-checkbox {
    width: 32px;
    height: 32px;
    margin-right: 15px;
    padding-top: 10px;
}
.mail-list-item {
  grid-column: 2; grid-row: 1 / 4; display: block; padding: 0; min-width: 0;
  text-decoration: none; color: inherit;
  background: none; border: 0; font: inherit; text-align: inherit; cursor: pointer;
}
.mail-list-sender-row { display: flex; align-items: center; height: 20px; }
.mail-list-sender { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-list-date { font-size: 11px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.mail-list-title-row {
  font-size: 13px; height: 20px; display: flex; align-items: center; gap: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-list-snippet { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-list-star.is-starred { color: #e0a72a; flex-shrink: 0; }
.mail-list-pagination { padding: var(--s-2); border-top: 1px solid var(--border-soft); }

/* ردیف ۱، ستون ۳: تاریخ ↔ آیکون‌های عملیات با هوور (خارج از <a> تا فرم‌های
   ستاره/آرشیو/حذف داخل لینک تودرتو نشوند). هر دو با position:absolute روی هم
   می‌نشینند تا با تعویض حالت، عرض این ستون (و در نتیجه عرض عنوان) تکان نخورد. */
.mail-list-r1-meta { grid-column: 3; grid-row: 1; position: relative; height: 20px; }
.mail-list-r1-meta .mail-list-date { position: absolute; inset-inline-end: 0; top: 0; }
.mail-list-row-actions {
  position: absolute; inset-inline-end: 0; top: -3px;
  display: flex; gap: 2px; opacity: 0; visibility: hidden; transition: opacity .12s var(--ease);
}
.mail-list-row:hover .mail-list-r1-meta .mail-list-date { opacity: 0; visibility: hidden; }
.mail-list-row:hover .mail-list-row-actions { opacity: 1; visibility: visible; }
.mail-list-row-actions .icon-action-btn { width: 26px; height: 26px; }

/* ردیف ۲، ستون ۳: برچسب پرونده + آیکون پیوست (سمت چپ، هم‌ردیف با عنوان) */
.mail-list-r2-meta { grid-column: 3; grid-row: 2; display: flex; align-items: center; justify-content: flex-end; gap: 4px; height: 20px; color: var(--muted); }

.mail-reading-pane {
  flex: 1; min-width: 0; overflow-y: auto; min-height: 0; overflow-x: hidden;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md);
  padding: var(--s-4);
}
/* نوار بالای پنل خواندن دقیقاً هم‌ارتفاع با نوار بالای فهرست باشد — با margin
   منفی از padding خودِ پنل بیرون کشیده می‌شود تا مثل فهرست، فقط padding کوچک
   خودش را داشته باشد، نه padding بزرگ‌تر پنل. */
.mail-reading-pane > .mail-list-toolbar {
  margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-3);
  padding-inline: var(--s-3);
}
.mail-reading-head { border-bottom: 1px solid var(--border-soft); padding-bottom: var(--s-3); margin-bottom: var(--s-3); }
.mail-reading-subject { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.mail-reading-from { font-weight: 600; color: inherit; font-size: 13px; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mail-reading-to { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mail-reading-actions { display: flex; gap: 4px; }
.mail-reading-date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mail-back-btn { display: none; }
.mail-reading-body { font-size: 14px; line-height: 1.8; }
/* overflow:hidden قبلاً روی خودِ .mail-thread-item بود — اگر محاسبه‌ی ارتفاع
   iframe (مثلاً به‌خاطر تصویر دیرلودشده) هر لحظه کوتاه‌تر از واقع می‌افتاد،
   باقی‌مانده‌ی ایمیل به‌جای دیده‌شدن، همین‌جا بی‌صدا کلیپ می‌شد؛ حالا overflow
   فقط روی هدر برای گردکردن گوشه‌ی بالا اعمال می‌شود، نه کل کارت. */
.mail-thread-item { border-bottom: 1px solid var(--border-soft); }
.mail-thread-item:last-child { border-bottom: 0; }

/* آواتار دایره‌ای رنگ برند — برای هر دو حالت باز/بسته */
.gmail-avatar {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff;
  font-size: 14px; font-weight: 700;
}
.gmail-avatar.sm { width: 28px; height: 28px; font-size: 12px; }

/* ردیف فشرده (بسته) — فقط یک خط: آواتار + فرستنده + خلاصه + تاریخ/ستاره، مثل جیمیل */
.gmail-msg-collapsed-row { display: flex; align-items: center; gap: 8px; padding: 6px 14px; }
.mail-thread-item.expanded .gmail-msg-collapsed-row { display: none; }
.gmail-msg-collapsed {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  background: none; border: 0; font: inherit; text-align: inherit; cursor: pointer; color: inherit; padding: 4px 0;
}
.gmail-msg-collapsed-sender { font-weight: 700; font-size: 13px; flex-shrink: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmail-msg-collapsed-snippet { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gmail-msg-collapsed-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.gmail-msg-collapsed-meta .mail-list-date { font-size: 11px; }

/* هدر کامل (باز) — آواتار + فرستنده/ایمیل + تاریخ + اقدامات، بعد خط «به:» */
.mail-thread-item.collapsed .gmail-msg-head,
.mail-thread-item.collapsed .mail-thread-item-body { display: none; }
.gmail-msg-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 6px; }
.gmail-msg-head-main { flex: 1; min-width: 0; }
.gmail-msg-head-top { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.gmail-msg-sender { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmail-msg-sender-email { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gmail-msg-head-right { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; flex-shrink: 0; }
.gmail-msg-actions { display: flex; gap: 2px; }
.gmail-msg-to { font-size: 12px; color: var(--muted); margin-top: 3px; }
.mail-thread-item-body { padding: 0 14px 14px; }

/* اکاردئون ساده‌ی صفحه‌ی ویرایش اکانت ایمیل (details/summary بومی — بدون JS) */
.mail-account-section { border: 1px solid var(--border-soft); border-radius: var(--r-md); margin-bottom: var(--s-3); overflow: hidden; }
.mail-account-section > summary {
  list-style: none; cursor: pointer; padding: 12px 14px; font-weight: 700; font-size: 13px;
  background: var(--surface-2); display: flex; align-items: center; justify-content: space-between;
}
.mail-account-section > summary::-webkit-details-marker { display: none; }
.mail-account-section > summary::after {
  content: ''; width: 9px; height: 9px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s var(--ease); flex-shrink: 0;
}
.mail-account-section[open] > summary::after { transform: rotate(-135deg); }
.mail-account-section[open] > summary { border-bottom: 1px solid var(--border-soft); }
.mail-account-section-body { padding: 14px; }
.mail-account-section-body > .rfq-grid-2:first-child { margin-top: 0; }
.mail-case-link {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-md);
  padding: 8px 12px; margin-bottom: var(--s-3);
}
.mail-case-link a { color: var(--brand); font-weight: 700; text-decoration: none; }
.mail-case-suggestion { color: var(--muted); }
.mail-case-link-search { margin-bottom: var(--s-3); }
.mail-case-link-search input {
  width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: var(--r-md);
  border: 1px solid var(--border-soft); background: var(--surface-2); font-size: 12px; color: inherit;
}
.mail-attachment-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; margin: 4px 6px 0 0;
  border: 1px solid var(--border-soft); border-radius: var(--r-md); font-size: 12px; background: var(--surface-2);
  text-decoration: none; color: inherit;
}

/* پاپ‌آپ «ثبت مخاطب سازمان» از روی ایمیل دریافتی با فرستنده‌ی ناشناس */
.mail-modal-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(12,14,17,.5);
  display: flex; align-items: center; justify-content: center;
}
.mail-modal {
  width: 420px; max-width: calc(100vw - 32px); max-height: 85vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md);
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.mail-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-soft); font-weight: 700;
}
.mail-modal-body { padding: 16px; }
.mail-modal-actions { display: flex; gap: 8px; margin-top: 8px; }

.icon-action-btn {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 999px; border: 0; background: transparent; color: var(--muted); cursor: pointer;
}
.icon-action-btn:hover { background: var(--surface-2); color: var(--text, inherit); }
.icon-action-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }

/* پاپ‌آپ Compose — دقیقاً مثل جیمیل: پنجره‌ی شناور گوشه‌ی صفحه، نه ناوبری به صفحه‌ی جدا */
.compose-popup {
  position: fixed; bottom: 0; inset-inline-end: 24px; width: 480px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md) var(--r-md) 0 0;
  box-shadow: 0 8px 30px rgba(0,0,0,.3); z-index: 200; display: flex; flex-direction: column;
  max-height: 70vh; overflow: hidden;
}
.compose-popup.maximized { inset: 24px; width: auto; max-width: none; max-height: none; border-radius: var(--r-md); }
/* دکمه‌ی «⋮» در پایین‌ترین ردیفِ پاپ‌آپ است — منوی معمولیِ رو‌به‌پایین بیرون از
   overflow:hidden پاپ‌آپ می‌افتاد و گزینه‌هایش دیده/کلیک نمی‌شدند؛ اینجا رو‌به‌بالا باز می‌شود. */
.compose-footer .dropdown-menu { top: auto; bottom: calc(100% + 6px); }
.compose-popup.minimized .compose-popup-body { display: none; }
/* مینیمایز باید همیشه به یک نوار عنوان کوچک جمع شود — حتی اگر قبلش ماگزیمایز
   بوده باشد (وگرنه inset:24px بالا همچنان کل صفحه را اشغال می‌کرد و به‌نظر
   می‌رسید دکمه‌ی کوچک‌کردن اثری ندارد). */
.compose-popup.minimized.maximized {
  inset: auto; bottom: 0; inset-inline-end: 24px; top: auto;
  width: 480px; max-width: calc(100vw - 32px); height: auto; border-radius: var(--r-md) var(--r-md) 0 0;
}
.compose-popup-header {
  display: flex; justify-content: space-between; align-items: center; padding: 10px 14px;
  background: var(--surface-2); border-bottom: 1px solid var(--border-soft); cursor: pointer;
  font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.compose-popup-controls { display: flex; gap: 2px; }
.compose-popup-controls button {
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  background: transparent; border: 0; color: var(--muted); cursor: pointer; border-radius: 4px;
}
.compose-popup-controls button:hover { background: var(--surface-3); color: var(--text, inherit); }
.compose-popup-controls .dash { width: 10px; height: 2px; background: currentColor; display: block; }
.compose-popup-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.compose-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.compose-row { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-bottom: 1px solid var(--border-soft); font-size: 13px; flex-shrink: 0; }
.compose-row label { color: var(--muted); flex-shrink: 0; }
.compose-input { flex: 1; border: 0; background: transparent; font-size: 13px; padding: 4px 0; outline: none; color: inherit; min-width: 0; }
/* select عمومی سایت height/padding/line-height را !important تنظیم می‌کند
   (برای منوهای معمولی) که با استایل تخت compose-input (بدون important)
   قابل بازنویسی نیست — همین باعث می‌شد ردیف «از» با ارتفاع/پدینگ ناجور و
   بدون هم‌ترازی با بقیه‌ی ردیف‌های Compose نمایش داده شود. */
select.compose-input {
  height: auto !important; min-height: 0 !important; max-height: none !important;
  line-height: normal !important; padding: 4px 0 !important; overflow: visible !important;
  background-image: none !important; border-radius: 0 !important;
}
.compose-subject { font-weight: 600; }
.compose-ccbcc-toggle { background: none; border: 0; color: var(--muted); font-size: 12px; cursor: pointer; flex-shrink: 0; }
.compose-body-wrap { flex: 1; min-height: 0; display: flex; }
.compose-body { flex: 1; border: 0; outline: none; resize: none; padding: 14px; font-size: 13px; font-family: inherit; background: transparent; color: inherit; line-height: 1.7; }
/* TinyMCE بعد از جایگزینیِ textarea، عرض/ارتفاعش را از فلکس والد به ارث
   نمی‌برد (پیش‌فرض بر مبنای محتوا سایز می‌گیرد) — همین باعث می‌شد فقط یک
   جعبه‌ی کوچک بالا-راست بنشیند، نه کل فضای پاپ‌آپ (مخصوصاً در حالت ماگزیمایز). */
.compose-body-wrap .tox-tinymce { flex: 1; width: 100% !important; height: 100% !important; }
.compose-footer { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--border-soft); flex-shrink: 0; }
.compose-send { border-radius: 999px; }
.compose-icon-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: none; border: 0; color: var(--muted); cursor: pointer; border-radius: 999px; }
.compose-icon-btn:hover { background: var(--surface-2); }
.compose-case-panel { padding: 10px 14px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 6px; }
.compose-case-results { display: flex; flex-direction: column; gap: 2px; max-height: 120px; overflow-y: auto; }
.compose-case-result { padding: 6px 8px; font-size: 12px; border-radius: var(--r-md); cursor: pointer; }
.compose-case-result:hover { background: var(--surface-2); }
.compose-case-attachments { display: flex; flex-direction: column; gap: 4px; max-height: 120px; overflow-y: auto; }
.compose-case-item { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.compose-file-chips { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mail-folder-select { display: none; }

@media (max-width: 900px) {
  .rfq-shell-fill { height: auto; }
  .mail-shell { flex-direction: column; }
  .mail-sidebar, .mail-list, .mail-reading-pane { flex: none; max-height: none; width: auto !important; }
  .mail-resizer { display: none; }
  .compose-popup { inset-inline-end: 0; width: 100%; max-width: 100%; }

  /* پوشه‌ها به‌صورت یک دراپ‌دان جمع‌وجور به‌جای فهرست عمودی بلند */
  .mail-folder-list { display: none; }
  .mail-folder-select { display: block; width: 100%; padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--border-soft); background: var(--surface-2); font-size: 13px; margin-top: var(--s-2); }

  /* حالت خواندن: فقط پنل خواندن دیده شود؛ حالت فهرست: فقط سایدبار+فهرست */
  .mail-back-btn { display: inline-flex; }
  .mail-compose-btn { display: none; }
  .mail-reading-pane > .mail-list-toolbar { flex-wrap: wrap; row-gap: 6px; }
  .mail-shell:not(.is-reading) .mail-reading-pane { display: none; }
  .mail-shell.is-reading .mail-sidebar,
  .mail-shell.is-reading .mail-list { display: none; }
}

/* ===== fileicon.css v0.1.1 | MIT License | github.com/picturepan2/fileicon.css
   (عیناً، برای آیکونِ Word/Excel/PDF — رنگ و برچسب از data-type گرفته می‌شود) ===== */
.file-icon {
  font-family: Arial, Tahoma, sans-serif;
  font-weight: 300;
  display: inline-block;
  width: 24px;
  height: 32px;
  background: #018fef;
  position: relative;
  border-radius: 2px;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  overflow: hidden;
  line-height: 1;
}
.file-icon::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-bottom-left-radius: 2px;
  border-width: 5px;
  border-style: solid;
  border-color: #fff #fff rgba(255,255,255,.35) rgba(255,255,255,.35);
}
.file-icon::after {
  display: block;
  content: attr(data-type);
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  text-transform: lowercase;
  text-align: center;
  width: 100%;
  padding: 4px 0;
  white-space: nowrap;
  overflow: hidden;
}
/* گوشه‌ی تاشده‌ی سفید توی حالتِ تاریک اصلاً خوب نمی‌نشست — توی حالتِ تاریک
   کاملاً حذفش می‌کنیم (سایه‌ی تیره‌ی ظریف به‌جاش) تا هیچ سفیدی نمونه. */
body.theme-dark .file-icon::before {
  border-color: rgba(0,0,0,.18) rgba(0,0,0,.18) rgba(0,0,0,.32) rgba(0,0,0,.32);
}
.file-icon-xs { width: 12px; height: 16px; border-radius: 2px; }
.file-icon-xs::before { border-bottom-left-radius: 1px; border-width: 3px; }
.file-icon-xs::after {
  content: "";
  border-bottom: 2px solid rgba(255,255,255,.45);
  width: auto; left: 2px; right: 2px; bottom: 3px;
}
.file-icon-sm { width: 18px; height: 24px; border-radius: 2px; }
.file-icon-sm::before { border-bottom-left-radius: 2px; border-width: 4px; }
.file-icon-sm::after { font-size: 8.5px; font-weight: 700; padding: 2px 0; }
.file-icon-lg { width: 48px; height: 64px; border-radius: 3px; }
.file-icon-lg::before { border-bottom-left-radius: 2px; border-width: 8px; }
.file-icon-lg::after { font-size: 16px; padding: 4px 6px; }
.file-icon-xl { width: 96px; height: 128px; border-radius: 4px; }
.file-icon-xl::before { border-bottom-left-radius: 4px; border-width: 16px; }
.file-icon-xl::after { font-size: 24px; padding: 4px 10px; }
.file-icon[data-type=zip], .file-icon[data-type=rar] { background: #acacac; }
.file-icon[data-type^=doc] { background: #307cf1; }
.file-icon[data-type^=xls] { background: #0f9d58; }
.file-icon[data-type^=ppt] { background: #d24726; }
.file-icon[data-type=pdf] { background: #e13d34; }
.file-icon[data-type=txt] { background: #5eb533; }

/* منوی خودکارِ منشن (@) در گفتگوی داخلیِ پرونده — عمداً position:fixed و
   append‌شده به body (نه به فرم) چون کارتِ اطرافش overflow:hidden داره و
   یک منویِ absolute داخلِ اون همیشه از پایینِ کارت قطع می‌شد. */
.case-mention-menu {
  position: fixed; z-index: 1000;
  max-height: 220px; overflow-y: auto;
  background: var(--card-bg, #fff); border: 1px solid var(--border, #ddd);
  border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.case-mention-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; cursor: pointer; font-size: 12px;
}
.case-mention-item:hover, .case-mention-item:focus { background: var(--hover-bg, rgba(0,0,0,.05)); }
.case-mention-name { font-weight: 700; }
.case-mention-email { color: var(--muted, #888); font-size: 11px; }
body.theme-dark .case-mention-menu { background: #1e2230; border-color: #333a4d; }
body.theme-dark .case-mention-item:hover { background: rgba(255,255,255,.06); }

/* هایلایتِ منشن‌های "@نام" داخلِ متنِ پیام‌های گفتگو */
.chat-mention { color: var(--brand); font-weight: 700; }

/* ردیفِ هر پیامِ گفتگو: متن در سمتِ راست (شروعِ RTL)، آیکون‌های ویرایش/حذف
   در سمتِ چپ — همیشه نمایش داده می‌شن (نه فقط با هاور، چون روی موبایل هاور
   معنی نداره). */
.chat-msg-row { display: flex; align-items: flex-start; gap: 8px; }
.chat-msg-main { flex: 1 1 auto; min-width: 0; }
.chat-msg-icons { display: flex; gap: 4px; flex-shrink: 0; }
.chat-icon-btn {
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: .15s var(--ease);
}
.chat-icon-btn svg { width: 14px; height: 14px; }
.chat-icon-btn:hover { background: var(--brand-soft); color: var(--brand-dark); }
.chat-icon-btn-danger:hover { background: rgba(220,38,38,.12); color: var(--danger); }