@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f4f6fb;
  --card:#ffffff;
  --border:#e6e9f2;
  --text:#1f2430;
  --muted:#7a8199;
  --primary:#4f6df5;
  --primary-dark:#3b54d6;
  --primary-light:#eef1ff;
  --success:#1fb17a;
  --success-light:#e7f9f1;
  --warning:#f5a623;
  --warning-light:#fff5e5;
  --danger:#f2545b;
  --danger-light:#fdeceb;
  --radius:14px;
  --shadow:0 2px 10px rgba(31,36,48,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Vazirmatn', Tahoma, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  direction:rtl;
  font-size:16.5px;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
input,select,textarea{font-family:inherit;font-size:16px}

/* فاز ۴۵ — آیتم ۲: ریسپانسیوکردن اندازهٔ فونت پایه در بازهٔ تبلت/دسکتاپ (نه موبایل — بریک‌پوینت موبایل
   ۷۶۰px پایین‌تر در همین فایل مقدار ثابت خودش را دارد و مستقل باقی می‌ماند) تا روی لپ‌تاپ‌های با عرض
   کمتر (مثلاً ۱۲۸۰px) متن/باکس‌ها کمی جمع‌وجورتر و روی مانیتورهای عریض کمی بزرگ‌تر (تا همان سقف قبلی) دیده شوند */
@media (min-width:761px){
  body{font-size:clamp(14px, 0.85vw + 4px, 16.5px)}
}

#root{min-height:100vh}

/* ---------- Auth screen ---------- */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#4f6df5 0%,#7b5cf0 100%);
  padding:20px;
}
.auth-card{
  background:var(--card);
  border-radius:20px;
  padding:38px 34px;
  width:100%;
  max-width:380px;
  box-shadow:0 20px 50px rgba(30,30,60,.25);
}
.auth-logo{
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,var(--primary),#7b5cf0);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:24px;margin-bottom:16px;
}
.auth-logo-img{
  width:72px;height:72px;object-fit:contain;margin-bottom:16px;
}
.auth-card h1{font-size:22px;margin:0 0 4px}
.auth-card p.sub{color:var(--muted);margin:0 0 24px;font-size:15.5px}
.field{margin-bottom:16px}
.field label{display:block;margin-bottom:6px;font-size:15px;color:var(--muted);font-weight:500}
.field input,.field select,.field textarea{
  width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;
  outline:none;transition:.15s;background:#fbfbfe;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);background:#fff}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;border-radius:10px;border:none;cursor:pointer;
  font-weight:600;font-size:16px;transition:.15s;
}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-block{width:100%}
.btn-outline{background:#fff;border:1.5px solid var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.btn-danger-outline{background:#fff;border:1.5px solid var(--danger);color:var(--danger)}
.btn-danger-outline:hover{background:var(--danger);color:#fff}
.btn-sm{padding:6px 12px;font-size:14.5px;border-radius:8px}
.link-btn{background:none;border:none;color:var(--primary);cursor:pointer;padding:0;font-weight:600}
.link-btn:hover{text-decoration:underline}
.error-box{background:var(--danger-light);color:var(--danger);padding:10px 12px;border-radius:10px;font-size:15px;margin-bottom:14px}
.hint-box{background:var(--primary-light);color:var(--primary-dark);padding:10px 12px;border-radius:10px;font-size:14.5px;margin-top:16px}

/* ---------- App shell ---------- */
/* سایدبار پوزیشن استاتیک دارد و هرگز اسکرول نمی‌شود — فقط ناحیه محتوای اصلی («میز کار»، .main) قابل اسکرول است */
.shell{display:flex;height:100vh;overflow:hidden}
/* فاز ۳۴ — آیتم ۲: نوار وضعیت آنلاین/آفلاین (.presence-bar) ثابت در پایین کل صفحه (ارتفاع ۳۲px) روی
   ارتفاع کامل ۱۰۰vh سایدبار می‌نشیند و دکمه «تماس آزمایشی» (آخرین آیتم sidebar-footer) را می‌پوشاند —
   با کم‌کردن همان ۳۲px از ارتفاع سایدبار، محتوای آن همیشه بالای نوار وضعیت باقی می‌ماند */
.sidebar{
  width:230px;height:calc(100vh - 32px);background:#191d33;color:#fff;flex-shrink:0;
  display:flex;flex-direction:column;padding:20px 14px;overflow-y:auto;
}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:0 6px 22px;font-weight:800;font-size:19px}
.sidebar .brand .logo{
  width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--primary),#7b5cf0);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.sidebar .brand .brand-logo{
  width:32px;height:32px;object-fit:contain;border-radius:8px;background:#fff;padding:2px;flex-shrink:0;
}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;
  color:#c4c7dd;font-weight:500;margin-bottom:2px;cursor:pointer;
}
.nav-item .ic{width:20px;text-align:center;font-size:18px}
.nav-item:hover{background:#262a45;color:#fff}
.nav-item.active{background:var(--primary);color:#fff}
/* فاز ۴۳ — آیتم ۱۱: منوی ناوبری قابل‌بازشدن/جمع‌شدن (مثلاً «مدیریت CRM») */
.nav-group-toggle{width:100%;border:none;background:none;font:inherit;text-align:inherit}
.nav-group-chevron{margin-inline-start:auto;transition:transform .15s ease;font-size:12px}
.nav-group.open .nav-group-chevron{transform:rotate(180deg)}
.nav-group-children{display:flex;flex-direction:column;padding-inline-start:14px;margin-bottom:2px}
/* فاز ۴۹ — رفع باگ «منوی مدیریت CRM بسته نمی‌ماند»: چون `.nav-group-children{display:flex}` یک قانون CSS
   نویسنده (author) است، طبق قواعد کسکید همیشه بر استایل پیش‌فرض مرورگر برای ویژگی `hidden` (که یک قانون
   user-agent با اولویت پایین‌تر است: `[hidden]{display:none}`) غالب می‌شود — صرف‌نظر از specificity. نتیجه:
   بلافاصله پس از پایان انیمیشن بستن (UI.animateAccordion در ui.js)، وقتی `max-height` اینلاین پاک و
   `hidden=true` ست می‌شود، عنصر به‌جای واقعاً مخفی‌شدن به `display:flex` با ارتفاع کامل برمی‌گشت — یعنی
   منو بلافاصله بعد از «بسته‌شدن» دوباره باز به‌نظر می‌رسید. این قانون صریح `[hidden]` را با اولویت بالاتر
   از قانون بالا قرار می‌دهد تا واقعاً مخفی شود. */
.nav-group-children[hidden]{display:none}
.nav-subitem{padding-inline-start:22px;font-size:14px}
.sidebar-footer{padding-top:10px}
.user-chip{display:flex;align-items:center;gap:10px;padding:8px 6px}
.user-chip .avatar,.avatar{
  width:34px;height:34px;border-radius:50%;background:var(--primary-light);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;
  overflow:hidden;
}
.avatar.avatar-has-img{background:none}
.avatar.avatar-has-img img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.user-chip .name{font-size:15px;font-weight:600;color:#fff}
.user-chip .role{font-size:13px;color:#9296b3}
.logout-link{display:block;font-size:14.5px;color:#9296b3;padding:6px}
.logout-link:hover{color:#fff}

/* فاز ۳۱ — آیتم ۳: کادر تاریخ/ساعت دقیق. فاز ۵۰ — آیتم ۵: جای این کادر با منوی پروفایل (.user-menu) عوض
   شد؛ اکنون این کادر بعد از user-menu می‌آید، پس margin-top:auto (چسباندن این دو به پایین سایدبار) به
   .user-menu (که اکنون اول است) منتقل شد. */
.sidebar-datetime-box{
  background:linear-gradient(135deg,#2b2f4d,#1f2340);border:1px solid #363b5e;border-radius:12px;
  padding:10px 12px;text-align:center;margin-bottom:10px;
}
.sidebar-datetime-time{
  font-size:19px;font-weight:800;color:#fff;letter-spacing:.5px;
  background:linear-gradient(90deg,#7b5cf0,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.sidebar-datetime-date{font-size:12px;color:#9296b3;margin-top:3px}

/* فاز ۲۶ — آیتم ۲: منوی کشویی هاور/کلیک روی چیپ نام کاربر (پروفایل، وضعیت، خروج) */
.user-menu{position:relative;padding-top:14px;border-top:1px solid #2b2f4d;margin-top:auto}
.user-menu-trigger{
  width:100%;background:none;border:none;cursor:pointer;border-radius:10px;text-align:right;font:inherit;
}
.user-menu-trigger:hover{background:#262a45}
.user-menu-dropdown{
  position:absolute;bottom:calc(100% + 6px);right:0;left:0;background:#1d2038;border:1px solid #2b2f4d;
  border-radius:12px;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s,transform .15s,visibility .15s;
  z-index:40;
}
.user-menu:hover .user-menu-dropdown,.user-menu-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.user-menu-item{
  display:block;width:100%;text-align:right;background:none;border:none;color:#e3e5f5;font-size:14px;
  padding:9px 10px;border-radius:8px;cursor:pointer;font:inherit;
}
.user-menu-item:hover{background:#262a45;color:#fff}
.user-menu-section-label{font-size:12px;color:#8489a8;padding:8px 10px 2px}
.user-menu-divider{height:1px;background:#2b2f4d;margin:6px 2px}
.user-menu-dropdown .presence-selector{padding:2px 4px}

/* فاز ۲۶ — آیتم ۳: مودال پروفایل کاربری */
.profile-modal-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.profile-modal-head .avatar{width:56px;height:56px;font-size:22px}
.profile-modal-name{font-size:17px;font-weight:700}
.profile-modal-role{font-size:13.5px;color:var(--muted);margin-top:2px}
.profile-modal-email{font-size:13px;color:var(--muted);margin-top:2px}
.perm-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12.5px;font-weight:600}
.perm-badge.perm-none{background:#f1f2f6;color:#8a8fa8}
.perm-badge.perm-view{background:#fff3cd;color:#8a6d1a}
.perm-badge.perm-edit{background:#d9f4e5;color:#1a7a4a}

/* فاز ۲۶ — آیتم ۵: صفحه قفل هنگام «پشت میز نیستم»/«آفلاین» */
.shell.lock-blur{filter:blur(6px);pointer-events:none;user-select:none}
.lock-screen-overlay{
  position:fixed;inset:0;background:rgba(15,17,32,.55);display:flex;align-items:center;justify-content:center;
  z-index:9999;
}
.lock-screen-card{
  background:#fff;border-radius:16px;padding:30px 26px;width:min(340px,92vw);text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.lock-screen-card .avatar{width:60px;height:60px;font-size:24px;margin:0 auto 12px}
.lock-screen-name{font-size:16px;font-weight:700;margin-bottom:4px}
.lock-screen-sub{font-size:13px;color:var(--muted);margin-bottom:16px}
.lock-screen-card input[type="password"]{
  width:100%;padding:11px 12px;border:1px solid #dcdfec;border-radius:10px;font-size:14px;margin-bottom:10px;
  box-sizing:border-box;
}
.lock-screen-error{color:var(--danger);font-size:13px;min-height:18px;margin-bottom:6px}

.main{flex:1;min-width:0;padding:26px 30px;max-width:100%;height:100vh;overflow-y:auto}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.topbar h2{margin:0;font-size:23px}
.topbar .actions{display:flex;gap:10px}

/* ---------- Stat cards ---------- */
/* فاز ۲۳: عرض کمینهٔ ستون‌ها و اندازهٔ فونت با clamp() به‌طور نرم با عرض صفحه هماهنگ می‌شوند (به‌جای اندازهٔ
   ثابت که روی گوشی هم بیش‌ازحد بزرگ می‌ماند و هم گاهی باعث سرریز/فشرده‌شدن متن می‌شد) */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(140px,40vw,190px),1fr));gap:clamp(10px,2vw,16px);margin-bottom:24px}
.stat-card{background:var(--card);border-radius:var(--radius);padding:clamp(13px,2.2vw,18px);box-shadow:var(--shadow);min-width:0}
.stat-card .label{color:var(--muted);font-size:clamp(12.5px,2.6vw,14.5px);margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-card .value{font-size:clamp(19px,4.5vw,26px);font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-card .value small{font-size:.6em;font-weight:500;color:var(--muted)}
.stat-card.accent-primary{border-inline-start:4px solid var(--primary)}
.stat-card.accent-success{border-inline-start:4px solid var(--success)}
.stat-card.accent-warning{border-inline-start:4px solid var(--warning)}
.stat-card.accent-danger{border-inline-start:4px solid var(--danger)}

.grid-2{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

.panel{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.panel h3{margin:0 0 14px;font-size:17.5px}
.panel-list{list-style:none;margin:0;padding:0}
.panel-list li{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:15.5px}
.panel-list li:last-child{border-bottom:none}
.muted{color:var(--muted)}

/* فاز ۳۵ — آیتم ۱: حذف آیکن اسپینر بالا/پایین پیش‌فرض مرورگر از تمام فیلدهای عددی (باکس‌های قیمت/مبلغ) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type="number"]{-moz-appearance:textfield}

/* فاز ۳۵ — آیتم‌های ۵/۶: سابقه خرید تامین‌کننده به‌صورت جدول ستونی شبیه فاکتور (بدون دکمه حذف) */
/* فاز ۴۲ — آیتم ۶: بایگانی تصاویر تاییدیه تحویل */
.delivery-photos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.delivery-photo-card{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff}
.delivery-photo-card img{width:100%;height:140px;object-fit:cover;cursor:pointer;display:block}
.delivery-photo-meta{padding:8px 10px;font-size:13px}
.supplier-purchase-table{width:100%;border-collapse:collapse;font-size:13.5px}
.supplier-purchase-table th{text-align:right;padding:8px 10px;border-bottom:2px solid var(--border);color:var(--muted);font-weight:600;white-space:nowrap}
.supplier-purchase-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.supplier-purchase-price-cell{font-weight:700;white-space:nowrap}
.supplier-purchase-price-change{color:var(--danger);font-weight:600;font-size:12px;white-space:nowrap}

/* ---------- Table ---------- */
/* فاز ۲۲: overflow:hidden قبلی روی صفحه‌های باریک (موبایل) باعث می‌شد ستون‌های اضافی جدول به‌طور نامرئی
   قطع شوند، نه اسکرول‌پذیر — با overflow-x:auto اکنون جدول‌های عریض روی موبایل به‌صورت افقی اسکرول می‌شوند */
.table-wrap{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 16px;text-align:right;font-size:15.5px}
thead th{background:#fafbff;color:var(--muted);font-weight:600;font-size:14.5px;border-bottom:1px solid var(--border)}
tbody tr{border-bottom:1px solid var(--border)}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:#fafbff}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.tag{display:inline-block;background:var(--primary-light);color:var(--primary-dark);padding:2px 9px;border-radius:100px;font-size:13.5px;font-weight:600}
.searchbar{position:relative;max-width:280px}
.searchbar input{padding-inline-start:34px}
.searchbar .ic{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--muted)}

/* ---------- Kanban ---------- */
/* فاز ۴۵ — آیتم ۲: قبلاً ستون‌های کانبان همیشه عرض ثابت ۲۷۵px داشتند و با ≥۵ ستون روی هر صفحه‌ای
   به‌جز مانیتورهای خیلی عریض، اسکرول افقی لازم می‌شد. اکنون به‌طور پیش‌فرض (دسکتاپ/تبلت) ستون‌ها
   با flex به‌طور مساوی جمع عرض موجود (بدون اسکرول افقی) را پر می‌کنند؛ رفتار قدیمی عرض‌ثابت+اسکرول
   فقط در بریک‌پوینت موبایل (پایین‌تر در همین فایل) بازمی‌گردد، چون در گوشی جا دادن ۵+ ستون در یک عرض
   ثابت غیرممکن/غیرخوانا است.
*/
.kanban{display:flex;gap:14px;padding-bottom:10px}
.kanban-col{
  background:#eef0f8;border-radius:var(--radius);flex:1 1 0;min-width:0;
  padding:12px;display:flex;flex-direction:column;
}
/* سربرگ ستون کانبان — یک نوار مستقل و مسطح، جدا از محتوای ستون، کاملاً راست‌چین:
   عدد ردیف (تعداد کارت) در سمت راست عنوان قرار می‌گیرد، سپس متن عنوان */
.kanban-col-head{
  display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:8px;
  margin:0 0 12px 0;padding:9px 12px;border-radius:10px;
  background:#dfe2f0;color:#333a5c;text-align:right;
}
.kanban-col-head .title{font-weight:700;font-size:14.5px;order:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kanban-col-head .count{
  order:1;flex-shrink:0;background:#fff;border-radius:100px;min-width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:#4f6df5;
}
.kanban-col-head.is-won{background:var(--success);color:#fff}
.kanban-col-head.is-won .count{color:var(--success)}
.kanban-col-head.is-lost{background:var(--danger);color:#fff}
.kanban-col-head.is-lost .count{color:var(--danger)}
.kanban-col-head.is-inquiry{background:#f5c518;color:#3a2e00}
.kanban-col-head.is-inquiry .count{color:#3a2e00}
/* فاز ۳۶ — آیتم ۳: کل ستون «استعلام» (نه فقط سربرگ آن) باید از سایر ستون‌های پایپ‌لاین متمایز باشد */
.kanban-col.is-inquiry-col{background:#fdf6d8;border:1px solid #f0dfa0}
.kanban-cards{display:flex;flex-direction:column;gap:16px}
.deal-card{
  background:#fff;border-radius:11px;padding:12px;box-shadow:0 1px 4px rgba(0,0,0,.06);cursor:grab;
  border:1px solid transparent;position:relative;
}
.deal-card:hover{border-color:var(--primary)}
.deal-card.dragging{opacity:.4}
/* فاز ۴۸ — آیتم ۴: کارت‌هایی که شمارش معکوس ۲۴ساعتهٔ «تایید کارشناس فروش» فعال دارند، با سربرگ قرمز از بقیه متمایز می‌شوند */
.deal-card.deal-card-24h-countdown{border-top:5px solid var(--danger);border-color:var(--danger)}
.deal-card.deal-card-24h-countdown:hover{border-color:var(--danger)}
.deal-card .title{font-weight:700;font-size:clamp(12.5px,1.4vw,15px);margin-bottom:6px;overflow-wrap:break-word}
.deal-card .amount{color:var(--success);font-weight:700;font-size:clamp(12.5px,1.4vw,15px);margin-bottom:6px}
.deal-card .contact{
  color:var(--muted);font-size:clamp(11.5px,1.2vw,14px);display:flex;align-items:center;gap:4px;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.deal-card-actions{display:flex;align-items:center;gap:8px;margin-top:10px}
/* ۴ دکمه اکشن کارت معامله (افزودن فعالیت، افزودن یادداشت، آپلود بیجک، ارجاع) — همگی یک شکل و اندازه، فقط رنگ متفاوت */
.deal-card-icon-btn{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  color:#fff;border:2px solid #fff;font-size:15px;line-height:1;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25);transition:filter .15s,transform .15s;
}
.deal-card-icon-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.deal-card-add-activity{background:var(--danger);font-size:18px}
.deal-card-add-note{background:#6366f1}
.deal-card-upload-slip{background:var(--warning)}
.deal-card-execute{background:var(--success)}
.kanban-col.drag-over{outline:2px dashed var(--primary);outline-offset:-4px}

.stage-pill{padding:3px 10px;border-radius:100px;font-size:13.5px;font-weight:600}
.stage-new{background:#e8ecff;color:#4f6df5}
.stage-contacted{background:#fff3d9;color:#c98a00}
.stage-proposal{background:#e3f2ff;color:#0d84d1}
.stage-negotiation{background:#f3e8ff;color:#8b3fe8}
.stage-won{background:var(--success-light);color:var(--success)}
.stage-lost{background:var(--danger-light);color:var(--danger)}

/* ---------- Tasks ---------- */
.task-row{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border)}
.task-row:last-child{border-bottom:none}
.task-check{
  width:20px;height:20px;border-radius:6px;border:2px solid var(--border);flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;margin-top:1px;color:#fff;font-size:14px;
}
.task-check.done{background:var(--success);border-color:var(--success)}
.task-row.done .task-title{text-decoration:line-through;color:var(--muted)}
.task-title{font-weight:600;font-size:15.5px}
.task-meta{font-size:14px;color:var(--muted);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
.due-overdue{color:var(--danger);font-weight:600}
.due-today{color:var(--warning);font-weight:600}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(20,22,40,.45);display:flex;align-items:center;justify-content:center;
  z-index:100;padding:20px;
}
/* فاز ۴۱ — آیتم ۶: مودال روی مودال (stacked) — همان ظاهر modal-overlay اما z-index بالاتر از لایت‌باکس
   تا بتواند روی یک مودال دیگر که همان لحظه باز است (مثل «اطلاعات معامله») بدون بستن آن نمایش داده شود */
.stacked-modal-overlay{
  position:fixed;inset:0;background:rgba(20,22,40,.55);display:flex;align-items:center;justify-content:center;
  z-index:500;padding:20px;
}
.modal{position:relative;background:#fff;border-radius:16px;padding:26px;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
/* فاز ۳۵ — آیتم ۳: تغییر نرم ارتفاع مودال هنگام تعویض تب (به‌جای پرش ناگهانی) — کلاس موقت حین انیمیشن،
   چون در حالت عادی نمی‌خواهیم اسکرول/تغییر اندازهٔ عادی محتوا هم انیمیت شود */
.modal.modal-animating-height{transition:height .22s ease}
/* مودال معامله (شامل تب افزودن محصول) — حداقل ۶۰٪ عریض‌تر از مودال معمولی، ریسپانسیو */
.modal-wide{max-width:760px}
.deal-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px;padding-left:40px}
.deal-header-row h3{margin:0}
.deal-created-at{font-size:12.5px;color:var(--muted);text-align:left;white-space:nowrap;padding-top:3px}
.deal-activity-row{
  display:flex;align-items:center;gap:8px;padding:9px 6px;border-bottom:1px solid var(--border);
  cursor:pointer;font-size:13.5px;transition:background .15s;
}
.deal-activity-row:hover{background:#f7f8fc}
.deal-activity-row:last-child{border-bottom:none}
.deal-activity-row.done .deal-activity-title{text-decoration:line-through;color:var(--muted)}
.deal-activity-icon{flex:0 0 auto}
.deal-activity-title{flex:1}
.deal-activity-date{flex:0 0 auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
/* فاز ۲۴: پیوست فایل عمومی معامله (تب فعالیت‌ها) */
.deal-attachment-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 6px;border-bottom:1px solid var(--border);font-size:13px;
}
.deal-attachment-row:last-child{border-bottom:none}
.deal-attachment-icon{flex:0 0 auto;font-size:16px}
.deal-attachment-name{flex:1;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deal-attachment-meta{font-size:11.5px;white-space:nowrap}
.deal-slip-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--border);
  font-size:13px;
}
.deal-slip-row:last-child{border-bottom:none}
.deal-slip-row a{color:var(--primary);font-weight:600}
/* فاز ۲۳: پیش‌نمایش کوچک بیجک در تاریخچه — کلیک برای باز شدن در لایت‌باکس بزرگ */
img.deal-slip-thumb{
  width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--border);cursor:pointer;flex-shrink:0;
  background:#f2f3f8;
}
img.deal-slip-thumb:hover{border-color:var(--primary)}
.deal-slip-row-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:160px}
#deal-form input:disabled, #deal-form select:disabled, #deal-form textarea:disabled{
  background:#f2f3f8;color:var(--muted);cursor:not-allowed;opacity:.85;
}
#deal-form button:disabled{display:none}
/* فاز ۴۱ — آیتم ۴: باکس مجزای «مرحله فعلی» حذف و به یک برچسب کوچک کنار «تاریخ ایجاد» تبدیل شد */
.deal-current-stage-inline{
  display:inline-block;margin-inline-start:10px;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600;
  background:#eaf2ff;color:#1a5fb4;border:1px solid #b9d3f7;white-space:nowrap;
}
/* فاز ۴۳ — آیتم ۹: بنر هشدار قفل ویرایش هم‌زمان معامله — وقتی کاربر دیگری زودتر همین معامله را باز کرده */
.deal-lock-banner{
  background:#fff4e5;border:1px solid #f5c97a;color:#8a5a00;border-radius:10px;padding:10px 14px;
  margin-bottom:14px;font-size:14px;font-weight:600;
}
.deal-supplier-section{border-top:1px dashed var(--border);margin-top:16px;padding-top:14px}
.deal-supplier-section h4{margin:0 0 10px;font-size:14.5px;color:var(--muted)}
/* فاز ۳۳ — آیتم ۶: تلفیق تب‌های «اطلاعات معامله» و «افزودن محصول» — سطر افزودن قلم جدید (جستجو/تعداد/قیمت/دکمه) در یک خط */
.li-add-row{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.li-add-row .li-add-search{flex:3;min-width:200px}
.li-add-row input#li-qty{flex:1;min-width:80px}
.li-add-row input#li-price{flex:1;min-width:110px}
.li-add-row .btn{flex-shrink:0;align-self:stretch}
@media (max-width:600px){
  .li-add-row{flex-direction:column}
  .li-add-row .li-add-search,.li-add-row input#li-qty,.li-add-row input#li-price,.li-add-row .btn{width:100%}
}
/* فاز ۳۳ — آیتم‌های ۱/۳: سربرگ «تامین‌کنندگان» به‌صورت جدول با ستون‌های مجزا (محصول/تعداد/تامین‌کننده/قیمت) */
.li-suppliers-table{width:100%;border-collapse:collapse;font-size:14px}
.li-suppliers-table thead th{
  text-align:right;color:var(--muted);font-weight:600;font-size:12.5px;padding:6px 8px;
  border-bottom:1px solid var(--border);
}
.li-suppliers-table thead th:nth-child(2){text-align:center}
.li-suppliers-table td{padding:8px;vertical-align:middle;border-bottom:1px solid var(--border)}
.li-suppliers-table tr:last-child td{border-bottom:none}
.li-supplier-name{min-width:140px}
.li-supplier-qty{text-align:center;white-space:nowrap;color:var(--muted)}
/* فاز ۳۴ — آیتم ۱: قبلاً select/input این جدول هیچ استایلی جز عرض نداشتند (خیلی خشک/ابتدایی به‌نظر می‌رسیدند)؛
   اکنون دقیقاً همان ظاهر فیلدهای بخش «افزودن قلم جدید» (.field input/select در style.css) را می‌گیرند */
.li-suppliers-table select,.li-suppliers-table input{
  width:100%;min-width:130px;box-sizing:border-box;
  padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;
  outline:none;transition:.15s;background:#fbfbfe;font-size:14px;
}
.li-suppliers-table select:focus,.li-suppliers-table input:focus{border-color:var(--primary);background:#fff}
.li-suppliers-table select:disabled,.li-suppliers-table input:disabled{background:#f1f1f4;color:var(--muted);cursor:not-allowed}
.li-supplier-price{height:auto;line-height:1.2}
/* فاز ۵۰ — آیتم ۶: نشان بصری قرمز روی «قیمت نهایی» تا زمانی که خالی است (الزامی) */
.li-final-price-required{border-color:var(--danger) !important;background:#fff5f5 !important}
.li-supplier-row-required td{background:#fff5f5}
.li-supplier-row-required .li-supplier-select{border-color:var(--danger)}
.li-supplier-required-badge{
  display:inline-block;margin-inline-start:6px;font-size:11px;color:#fff;background:var(--danger);
  border-radius:6px;padding:2px 6px;white-space:nowrap;
}
@media (max-width:700px){
  .li-suppliers-table,.li-suppliers-table thead,.li-suppliers-table tbody,.li-suppliers-table tr,.li-suppliers-table td{display:block;width:100%}
  .li-suppliers-table thead{display:none}
  .li-suppliers-table tr{border-bottom:1px solid var(--border);padding:8px 0;margin-bottom:6px}
  .li-suppliers-table td{border-bottom:none;padding:4px 0}
}
/* فاز ۳۳ — آیتم ۵: کادر تاییدیهٔ امضای قبلاً ثبت‌شده (به‌جای نمایش دوبارهٔ کادر خالی برای کشیدن امضا) */
.signature-confirmed-box{
  display:flex;align-items:center;gap:10px;background:#f0fbf3;border:1px solid #bfe8c9;border-radius:10px;
  padding:12px 14px;font-size:14px;color:#1f7a3d;
}
.signature-confirmed-icon{font-size:18px}
.signature-confirmed-box .link-btn{margin-inline-start:auto}
.modal h3{margin:0 0 18px;font-size:19px}
.modal-actions{display:flex;gap:10px;margin-top:20px;justify-content:flex-end}
.close-x{position:absolute;top:16px;left:16px;cursor:pointer;color:var(--muted);font-size:20px;background:none;border:none}
/* فاز ۲۴: دکمه «بازگشت» در پاپ‌آپ‌های تودرتو — کنار دکمه ✕ (که همیشه در گوشه بالا-چپ مودال است) */
.modal-back-btn{
  position:absolute;top:16px;left:46px;cursor:pointer;color:var(--muted);font-size:13.5px;background:none;
  border:none;display:flex;align-items:center;gap:4px;padding:2px 4px;border-radius:6px;
}
.modal-back-btn:hover{background:#f2f3f8;color:var(--text)}

/* ---------- لایت‌باکس پیش‌نمایش تصویر/ویدئو (فاز ۲۳) ---------- */
.lightbox-overlay{
  position:fixed;inset:0;background:rgba(10,11,20,.88);display:flex;align-items:center;justify-content:center;
  z-index:400;padding:30px;
}
.lightbox-media{max-width:100%;max-height:90vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-close{
  position:absolute;top:18px;left:18px;background:rgba(255,255,255,.12);border:none;color:#fff;
  width:38px;height:38px;border-radius:50%;font-size:18px;cursor:pointer;
}
.lightbox-close:hover{background:rgba(255,255,255,.22)}
.lightbox-download{
  position:absolute;top:18px;left:66px;background:rgba(255,255,255,.12);color:#fff;
  width:38px;height:38px;border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.lightbox-download:hover{background:rgba(255,255,255,.22)}

.empty-state{text-align:center;padding:50px 20px;color:var(--muted)}
.empty-state .big{font-size:36px;margin-bottom:10px}

.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:#1f2430;color:#fff;padding:11px 20px;border-radius:10px;font-size:15.5px;z-index:200;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}

.two-col-form{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}


/* ---------- ویجت شناور تماس سریع (در همه صفحات) ---------- */
.call-dialer{position:static}
/* دکمه و پنل هرکدام به‌طور مستقل fixed هستند (نه فرزند فلکس مشترک) تا باز/بسته‌شدن پنل هرگز روی
   موقعیت دکمه اثر نگذارد؛ فقط CallDialer.setPopupOpen() آن‌ها را (هماهنگ با پاپ‌آپ تماس ورودی) جابه‌جا می‌کند. */
.call-dialer-btn{
  position:fixed;bottom:56px;left:24px;z-index:151;
  width:52px;height:52px;border-radius:50%;border:none;background:var(--primary);color:#fff;font-size:24px;
  cursor:pointer;box-shadow:0 10px 26px rgba(79,109,245,.4);transition:left .2s,bottom .2s;
}
.call-dialer-btn:hover{filter:brightness(1.05)}
.call-dialer-panel{
  position:fixed;bottom:120px;left:24px;z-index:150;transition:left .2s,bottom .2s;
  background:#fff;border-radius:14px;box-shadow:0 16px 44px rgba(20,22,40,.22);padding:18px;width:260px;
}
.call-dialer-panel h4{margin:0 0 12px;font-size:16px}
.call-dialer-panel select,.call-dialer-panel input{
  width:100%;border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:10px;font-family:inherit;font-size:15px;
}

/* ---------- ویجت شناور تماس سریع به‌شکل صفحه‌کلید ---------- */
.cd-panel{width:300px;max-width:calc(100vw - 48px);max-height:82vh;overflow-y:auto}
.cd-tabs{display:flex;gap:8px;margin-bottom:12px}
.cd-tab-btn{
  flex:1;border:1px solid var(--border);background:#fafbff;border-radius:9px;padding:9px 6px;font-family:inherit;
  font-size:13px;cursor:pointer;transition:background .15s;
}
.cd-tab-btn:hover{background:#f2f3f8}
.cd-tab-btn.active{background:var(--primary-light);border-color:var(--primary);color:var(--primary-dark);font-weight:700}
.cd-display{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.cd-display input{
  flex:1;border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-family:inherit;font-size:17px;
  text-align:center;letter-spacing:1px;
}
.cd-backspace{
  width:38px;height:38px;flex:0 0 auto;border:1px solid var(--border);border-radius:8px;background:#fafbff;
  cursor:pointer;font-size:16px;
}
.cd-backspace:hover{background:#f2f3f8}
/* صفحه‌کلید شماره‌گیری همیشه باید مانند تلفن واقعی چیده شود (۱‑۲‑۳ در سطر اول، از چپ به راست)
   صرف‌نظر از جهت راست‌به‌چپ کل برنامه — وگرنه گرید با dir=rtl ترتیب را برعکس می‌کند (۳‑۲‑۱) */
.cd-keypad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;direction:ltr}
.cd-key{
  padding:13px 0;border:1px solid var(--border);border-radius:10px;background:#fafbff;font-size:18px;font-weight:600;
  cursor:pointer;transition:background .15s;
}
.cd-key:hover{background:var(--primary-light);border-color:var(--primary)}
.cd-back-btn{
  background:none;border:none;color:var(--primary-dark);font-size:13.5px;cursor:pointer;padding:0 0 10px;font-family:inherit;
}
.cd-list-search input{
  width:100%;border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:8px;font-family:inherit;font-size:14px;
}
.cd-list{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.cd-list-item{
  display:flex;align-items:center;gap:8px;padding:8px 6px;border-radius:8px;cursor:pointer;transition:background .15s;
}
.cd-list-item:hover{background:#f2f3f8}
.cd-list-item-name{flex:1;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-list-item-phone{font-size:12.5px;color:var(--muted);white-space:nowrap}
.cd-list-call-btn{flex:0 0 auto;padding:5px 10px !important;font-size:14px}
.cd-history-box{border-top:1px dashed var(--border);margin-top:12px;padding-top:10px}
.cd-history-box h5{margin:0 0 8px;font-size:13px;color:var(--muted);font-weight:700}
.cd-history-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:150px;overflow-y:auto}
.cd-history-item{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:4px 6px;border-radius:6px;transition:background .15s}
.cd-history-item[data-phone]:not([data-phone=""]){cursor:pointer}
.cd-history-item[data-phone]:not([data-phone=""]):hover{background:#f2f3f8}
.cd-history-dir{flex:0 0 auto}
.cd-history-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.cd-history-status{flex:0 0 auto;color:var(--muted);font-size:11.5px}

/* ---------- پاپ‌آپ تماس ورودی (اتصال VoIP) ---------- */
/* فاز ۲۷ — آیتم ۶: پاپ‌آپ از یک کارت شناور گوشه صفحه به یک سایدبار تمام‌ارتفاع باز/بسته‌شونده از سمت چپ
   تبدیل شد. کوچک‌کردن (minimize) اکنون کل سایدبار را با انیمیشن به بیرون صفحه می‌برد (کلاس .collapsed) و
   یک آیکون شناور گرد (#call-popup-reopen-btn، جدا در JS ساخته می‌شود) برای بازکردن مجدد ظاهر می‌شود. */
.call-popup{
  position:fixed;top:0;left:0;bottom:0;z-index:180;width:440px;max-width:calc(100vw - 24px);height:100vh;
  overflow-y:auto;background:#fff;border-radius:0 16px 16px 0;box-shadow:8px 0 50px rgba(0,0,0,.3);
  border:3px solid transparent;border-left:none;display:flex;flex-direction:column;
  transform:translateX(0);transition:transform .25s ease;
}
.call-popup.collapsed{transform:translateX(-100%)}
.call-popup.ringing{animation:call-ring-pulse 1.1s ease-in-out infinite}
.call-popup.answered{border-color:var(--success)}
.call-popup.on-hold{border-color:var(--warning)}
.call-popup-reopen-btn{
  /* فاز ۳۹ — آیتم ۲: قبلاً top:20px بود و روی دکمه‌های شناور «+ استعلام جدید»/«+ پیش‌فاکتور» بالای ستون‌های
     کانبان می‌نشست؛ ۵۰ پیکسل پایین‌تر آمد تا هم‌پوشانی نداشته باشند */
  position:fixed;top:70px;left:16px;z-index:181;width:56px;height:56px;border-radius:50%;
  background:var(--success);color:#fff;border:none;box-shadow:0 12px 30px rgba(0,0,0,.32);
  font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.call-popup-reopen-btn.ringing{animation:call-ring-pulse 1.1s ease-in-out infinite}
@keyframes call-ring-pulse{
  0%{border-color:var(--success);box-shadow:0 20px 60px rgba(0,0,0,.3),0 0 0 0 rgba(31,177,122,.5)}
  70%{border-color:var(--success);box-shadow:0 20px 60px rgba(0,0,0,.3),0 0 0 10px rgba(31,177,122,0)}
  100%{border-color:var(--success);box-shadow:0 20px 60px rgba(0,0,0,.3),0 0 0 0 rgba(31,177,122,0)}
}
.call-popup-actions{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.call-popup-row-primary{display:flex;gap:8px}
.call-popup-row-primary .btn{flex:1;padding:12px 14px;font-size:16px}
.call-popup-row-secondary{display:flex;gap:8px}
.call-popup-row-secondary .btn{flex:1}
.call-popup-head{
  display:flex;align-items:center;gap:10px;justify-content:space-between;background:var(--primary);color:#fff;
  padding:18px 22px;border-radius:0 13px 0 0;font-weight:700;font-size:19px;flex:0 0 auto;
}
.call-popup-head span:first-child{flex:1}
.call-popup-head-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.call-popup-queue-badge{
  background:rgba(255,255,255,.22);border-radius:100px;padding:3px 10px;font-size:13px;font-weight:600;white-space:nowrap;
}
.call-popup-timer{
  background:rgba(255,255,255,.22);border-radius:100px;padding:3px 12px;font-size:13.5px;font-weight:700;
  white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:0.5px;
}
/* فاز ۲۸ — آیتم ۷: دکمه بستن با فاصله واضح از دکمه مینیمایز پیدا می‌شود (margin-inline-start:auto آن را به
   انتهای ردیف می‌چسباند) تا خطر اشتباه‌گرفتن دو دکمه با هم کمتر شود */
.call-popup-close{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;margin-inline-start:auto;padding-inline-start:14px}
.call-popup-body{padding:20px 22px;flex:1 1 auto;overflow-y:auto}
.call-popup-row{font-size:17px;margin-bottom:9px}
.call-popup-body h5{font-size:16px;margin:18px 0 9px;color:var(--muted)}
.call-popup-list{list-style:none;padding:0;margin:0;font-size:16px;display:flex;flex-direction:column;gap:7px}
.call-transfer-box{
  display:flex;flex-direction:column;gap:4px;margin-top:6px;padding:8px;border:1px solid var(--border);border-radius:10px;
  background:#fafafd;
}
.call-transfer-search{
  border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:13.5px;font-family:inherit;
  margin-bottom:4px;flex:0 0 auto;
}
#call-transfer-list{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto}
.call-transfer-item{
  text-align:right;background:none;border:none;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14.5px;font-family:inherit;
}
.call-transfer-item:hover{background:#eef0fb}

/* فاز ۲۸ — آیتم ۷ (جای‌گذاری قبلی، جایگزین شد در فاز ۳۹): آیکون فلش کنار عبارت «در حال مکالمه» در ردیف هدر */
/* فاز ۳۹ — آیتم ۱: طبق بازخورد کاربر، دکمه جمع‌کردن از داخل ردیف هدر (که با متن عنوان/تایمر شلوغ بود) به
   یک «دستگیرهٔ لبه» گرد منتقل شد — دقیقاً روی گوشهٔ گرد سمت راست پنل (مرز بین سایدبار و بقیهٔ صفحه)، نیمی
   داخل پنل و نیمی بیرون از آن. چون `.call-popup` خودش overflow-y:auto دارد (که طبق مشخصات CSS باعث می‌شود
   overflow-x هم به‌طور ضمنی کلیپ‌شونده شود)، این دکمه دیگر فرزند پاپ‌آپ نیست — با JS (callpopup.js:
   showMinimizeTab/positionMinimizeTab) مستقیماً روی body با position:fixed ساخته و موقعیت‌دهی می‌شود، دقیقاً
   مثل #call-popup-reopen-btn. آیکون به‌جای فلش راست (➜، که معنای «باز شدن» می‌داد) اکنون فلش چپ (←) است:
   همان جهتی که پنل با جمع‌شدن حرکت می‌کند (به‌سمت لبهٔ چپ صفحه) — یعنی آیکون خودِ عمل جمع‌کردن را نشان
   می‌دهد، نه بازکردن. */
.call-popup-minimize-tab{
  position:fixed;top:18px;z-index:182;
  width:34px;height:34px;border-radius:50%;
  background:var(--primary);border:2px solid #fff;color:#fff;font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(20,22,40,.35);
}
.call-popup-minimize-tab:hover{filter:brightness(1.08)}
.badge-role{font-size:13px;padding:2px 8px;border-radius:100px;background:var(--primary-light);color:var(--primary-dark);font-weight:600}
.badge-role.admin{background:var(--warning-light);color:#a86a00}

/* ---------- انتخاب‌گر تاریخ شمسی ---------- */
.jalali-date-field{position:relative;display:flex;align-items:center}
.jalali-date-display{
  width:100%;border:1px solid var(--border);border-radius:8px;padding:8px 30px 8px 12px;
  font-family:inherit;font-size:15.5px;cursor:pointer;background:#fff;
}
.jalali-date-clear{
  position:absolute;left:8px;top:50%;transform:translateY(-50%);background:none;border:none;
  color:var(--muted);cursor:pointer;font-size:15px;padding:2px 4px;line-height:1;
}
.jalali-date-clear:hover{color:var(--danger)}
/* فاز ۴۵: حالت غیرفعال (فقط‌خواندنی) فیلد تاریخ شمسی — برای کاربرانی که فقط دسترسی محدود دارند */
.jalali-date-field-disabled .jalali-date-field{pointer-events:none;opacity:.6}
.jalali-date-field-disabled .jalali-date-clear{display:none !important}
.jalali-popup{
  z-index:2000;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.18);
  border:1px solid var(--border);padding:10px;width:240px;
}
.jalali-popup-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.jalali-popup-title{font-weight:700;font-size:15px}
.jalali-nav{background:none;border:none;cursor:pointer;font-size:15px;color:var(--muted);padding:4px 8px;border-radius:6px}
.jalali-nav:hover{background:#f2f3f8;color:var(--text)}
.jalali-popup-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:13px;color:var(--muted);margin-bottom:4px}
.jalali-popup-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.jalali-cell{
  border:none;background:none;padding:6px 0;border-radius:8px;cursor:pointer;font-size:14.5px;text-align:center;
}
.jalali-cell:not(.empty):hover{background:#f2f3f8}
.product-search-results{
  position:absolute;top:100%;right:0;left:0;z-index:50;background:#fff;border-radius:10px;
  box-shadow:0 8px 30px rgba(0,0,0,.18);border:1px solid var(--border);max-height:220px;overflow-y:auto;margin-top:4px;
}
.product-search-item{padding:8px 12px;cursor:pointer;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--border)}
.product-search-item:last-child{border-bottom:none}
.product-search-item:hover{background:#f2f3f8}
.product-search-item.active{background:var(--primary-light,#eef0f8)}
.product-search-item-name{font-size:14.5px;font-weight:600}
.product-search-item-meta{font-size:12.5px;color:var(--muted)}
.product-search-empty{padding:10px 12px;font-size:13px;color:var(--muted)}
/* فاز ۵۰ — آیتم ۴: پاپ‌آپ انتخاب محصول درختی (انبار → دسته‌بندی → محصول) */
.product-tree-list{max-height:min(60vh,420px);overflow-y:auto;display:flex;flex-direction:column;gap:6px;margin-top:10px}
.product-tree-item{
  display:flex;justify-content:space-between;align-items:center;width:100%;text-align:right;
  padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;background:#fbfbfe;cursor:pointer;font-size:14.5px;
}
.product-tree-item:hover{background:#f2f3f8;border-color:var(--primary)}
/* فاز ۵۱ — آیتم ۴: فهرست محصولات هر دسته اکنون به‌صورت جدول ستون‌بندی‌شده (قیمت/موجودی مجزا) است */
.product-tree-table{border-collapse:collapse}
.product-tree-table th{text-align:center;font-size:13px;color:var(--muted);padding:6px 4px;border-bottom:1.5px solid var(--border)}
.product-tree-table th:first-child{text-align:right}
.product-tree-table td{padding:8px 6px;text-align:center;border-bottom:1px solid var(--border);font-size:14px}
.product-tree-table td:first-child{text-align:right}
.product-tree-table tr.product-tree-product:hover{background:#f2f3f8}
#tree-product-search{
  width:100%;box-sizing:border-box;padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;
}
.jalali-cell.today{font-weight:700;color:var(--primary)}
.jalali-cell.selected{background:var(--primary);color:#fff}
.jalali-popup-footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px;border-top:1px solid var(--border);padding-top:6px}

/* ---------- ارجاع معامله به واحد (دکمه اجرا + منوی آبشاری) ---------- */
/* منوی آبشاری دکمه اجرا — با موقعیت fixed زیر دکمه باز می‌شود تا واحد مقصد ارجاع انتخاب شود */
.deal-execute-dropdown{
  position:fixed;z-index:200;min-width:200px;background:#fff;border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 32px rgba(20,22,40,.24);padding:6px;display:flex;flex-direction:column;gap:2px;
}
.deal-execute-dropdown-title{font-size:12px;color:var(--muted);font-weight:700;padding:6px 8px 4px}
.deal-execute-dropdown-item{
  border:none;border-radius:8px;padding:9px 10px;background:transparent;cursor:pointer;
  font-size:14px;text-align:right;display:flex;align-items:center;justify-content:space-between;color:var(--text);
}
.deal-execute-dropdown-item:hover{background:#f2f3f8}
.deal-execute-dropdown-item.active{background:var(--primary-light,#eef0f8);font-weight:700;color:var(--primary-dark,var(--primary))}
/* فاز ۳۷: گزینه‌های ستونی که کاربر جاری اجازهٔ انتقال معامله به آن‌ها را ندارد */
.deal-execute-dropdown-item.disabled{color:var(--muted);cursor:not-allowed;opacity:.55}
.deal-execute-dropdown-item.disabled:hover{background:transparent}
.deal-execute-dropdown-close{
  border:none;border-top:1px solid var(--border);margin-top:4px;padding:9px 10px;background:transparent;cursor:pointer;
  font-size:13px;text-align:center;color:var(--muted);border-radius:0 0 8px 8px;
}

/* فاز ۴۱ — آیتم ۱۰: ارجاع پیام پیام‌رسان به چند نفر یا یک گروه از پیش‌تعریف‌شده */
/* فاز ۴۴ — آیتم ۴: قبلاً این نشان به‌صورت یک آیتم هم‌ردیف با آیکون 👤 داخل دکمه رندر می‌شد — چون
   `[hidden]` پیش‌فرض مرورگر (specificity پایین) توسط این کلاس (specificity بالاتر) شکست می‌خورد، حتی وقتی
   شمارش صفر بود و ویژگی hidden ست شده بود، باز هم نمایش داده می‌شد و هم آیکون را از وسط دکمه به کنار می‌راند.
   اکنون یک نشان کوچک گرد در گوشهٔ دکمه (position:absolute) است — هم قانون hidden صریحاً بازگردانده شد، هم
   چون از جریان عادی خارج است دیگر مرکز آیکون را به هم نمی‌زند. */
.chat-refer-count{
  position:absolute;top:-4px;left:-4px;z-index:1;pointer-events:none;
  display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:50%;
  background:var(--primary);color:#fff;font-size:11px;font-weight:700;padding:0 4px;
  box-shadow:0 0 0 2px #fff;
}
.chat-refer-count[hidden]{display:none}
/* فاز ۴۵ — آیتم ۳: پاپ‌آپ ارجاع پیام کمی باریک‌تر شد (۲۶۰px به‌جای ۳۲۰px) و ۴ دکمهٔ گروه اکنون با
   یک گرید ۴ستونهٔ ثابت (نه flex-wrap که با متن فارسی بلندتر مثل «حسابداری» به سطر دوم می‌شکست و همین
   شکستن سطر باعث می‌شد ارتفاع کل پاپ‌آپ زیاد شود و فهرست اعضا نیاز به اسکرول پیدا کند) همیشه در یک
   ردیف کنار هم قرار می‌گیرند؛ اگر متن یک دکمه در این عرض جا نشود، به‌جای شکستن ردیف، خودِ متن با
   line-height کوچک داخل همان دکمه به دو خط می‌شکند. */
.chat-refer-popover{
  position:fixed;z-index:220;width:260px;max-height:360px;overflow-y:auto;overflow-x:hidden;background:#fff;border:1px solid var(--border);
  border-radius:12px;box-shadow:0 12px 32px rgba(20,22,40,.24);padding:10px;
}
.chat-refer-popover-title{font-size:12.5px;color:var(--muted);font-weight:700;margin-bottom:6px}
.chat-refer-groups{
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:10px;padding-bottom:10px;
  border-bottom:1px dashed var(--border);
}
.chat-refer-group-btn{
  padding:5px 2px;font-size:10.5px;line-height:1.2;white-space:normal;word-break:break-word;
  min-width:0;text-align:center;
}
.chat-refer-users-list{display:flex;flex-direction:column;gap:2px;max-height:190px;overflow-y:auto}
.chat-refer-user-row{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:6px;font-size:13.5px;cursor:pointer}
.chat-refer-user-row:hover{background:#f2f3f8}
.chat-refer-user-row input{width:auto}
.chat-refer-popover-actions{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:8px;border-top:1px solid var(--border)}
.deal-execute-dropdown-close:hover{background:#f2f3f8;color:var(--text)}
.slip-file-picker{display:flex;flex-direction:column;gap:10px}
.slip-file-picker-buttons{display:flex;gap:8px;flex-wrap:wrap}
.slip-file-name{font-size:13px;color:var(--muted)}
.slip-preview-box{
  width:100%;max-width:220px;height:150px;border:1px dashed var(--border);border-radius:10px;
  overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fafbff;
}
.slip-preview-box img{width:100%;height:100%;object-fit:contain}
.warehouse-badge{
  display:inline-flex;align-items:center;gap:2px;font-size:11.5px;margin-inline-start:8px;padding:2px 8px;
  border-radius:100px;background:#fff4e5;color:#b7791f;font-weight:700;
}
.deal-referred-badge{
  display:inline-flex;align-items:center;gap:3px;font-size:12.5px;margin-top:4px;padding:2px 8px;
  border-radius:100px;background:#eef0f8;color:var(--primary-dark,var(--primary));font-weight:600;
}
.action-log-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.action-log-item{display:flex;align-items:center;gap:10px;padding:11px 6px;border-bottom:1px solid var(--border)}
.action-log-item:last-child{border-bottom:none}
.action-log-icon{font-size:16px;flex:0 0 auto}
.action-log-desc{flex:1;font-size:14px;color:var(--text)}
.action-log-time{font-size:12px;color:var(--muted);flex:0 0 auto;white-space:nowrap}
.deal-card-referral-header{
  font-size:12px;color:#a4310f;background:#fff3ec;border:1px solid #ffd8c2;border-radius:8px;
  padding:4px 8px;margin-bottom:8px;line-height:1.6;
}
.deal-card-referral-header b{color:#d92d20}
.deal-card-activity-icons{display:flex;gap:5px;font-size:15px;margin-top:4px}
.deal-latest-note{
  margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);
  font-size:12.5px;color:var(--muted);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* فاز ۴۱ — آیتم ۱: هشدار «سفارش دیگر همین مشتری هنوز در مراحل قبل است» روی کارت ستون واحد ارسال */
.deal-card-warning{
  margin-top:8px;padding:6px 8px;border-radius:8px;font-size:12px;font-weight:600;line-height:1.5;
  background:#fff4e5;color:#b54708;border:1px solid #fedf89;
}
/* همان هشدار، نسخهٔ بزرگ‌تر داخل سربرگ «ارسال» مودال معامله */
.deal-shipping-warning-box{
  margin-bottom:14px;padding:11px 14px;border-radius:10px;font-size:13.5px;line-height:1.8;
  background:#fff4e5;color:#b54708;border:1px solid #fedf89;
}
.deal-shipping-warning-box ul{margin:6px 0 0;padding-inline-start:20px}
/* گروه‌بندی کارت‌های ارجاع‌شده به یک واحد، به‌صورت زیرمجموعه در همان ستون مرحله */
.kanban-department-group{
  border:1px dashed var(--border);border-radius:12px;padding:10px;margin-top:4px;background:#f7f8fc;
}
.kanban-department-group-head{
  display:flex;align-items:center;justify-content:space-between;font-size:13.5px;font-weight:700;
  color:var(--primary-dark,var(--primary));margin-bottom:10px;padding:0 2px;
}
.kanban-department-group-head .count{background:#fff;border-radius:100px;padding:1px 9px;font-size:12.5px;color:var(--muted);font-weight:600}
.kanban-department-group-cards{display:flex;flex-direction:column;gap:14px}
.role-card{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:14px;background:#fbfbfe}
.role-card:last-child{margin-bottom:0}
/* فاز ۴۳ — آیتم ۲: سربرگ «نقش‌ها و دسترسی‌ها» آکاردئونی — بسته شروع می‌شود و با کلیک روی سربرگ باز/بسته می‌شود */
.role-card-header:hover{background:#f2f3f8;border-radius:8px}
.role-card-chevron{display:inline-block;font-size:12px;color:var(--muted);margin-left:4px}
.role-card.open .role-card-chevron{color:var(--primary)}

/* ---------- ماتریس دسترسی نقش‌ها ---------- */
.perm-matrix{width:100%;border-collapse:collapse;font-size:14.5px}
.perm-matrix th,.perm-matrix td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:center}
.perm-matrix th:first-child,.perm-matrix td:first-child{text-align:right}
.perm-matrix select{border:1px solid var(--border);border-radius:6px;padding:3px 6px;font-size:14px}

/* ---------- چت رسمی اعضای تیم ---------- */
.deals-body{display:block}
.deals-body .kanban{width:100%}
/* گروه عنوان تاپ‌بار «داشبورد فروش» + دکمهٔ آخرین درخواست‌های داخلی — پنل به‌شکل دراپ‌داون
   دقیقاً هم‌تراز و از سمت راستِ همین گروه باز می‌شود (position:relative روی گروه، absolute روی پنل)
   تا هم‌ردیف عنوان «داشبورد فروش» بماند و دیگر روی سایدبار یا لبهٔ صفحه فیکس نشود. */
.topbar-title-group{position:relative;display:flex;align-items:center;gap:10px}
.chat-summary-toggle{
  position:relative;border:1px solid var(--border);background:#fff;border-radius:10px;
  width:38px;height:38px;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.chat-summary-toggle:hover{background:#f3f4fb}
.chat-summary-badge{
  position:absolute;top:-6px;left:-6px;background:#d92d20;color:#fff;border-radius:999px;
  font-size:10.5px;line-height:1;padding:3px 5px;min-width:16px;text-align:center;font-weight:700;
}
.chat-summary-panel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:140;
  width:33vw;max-width:420px;min-width:300px;max-height:60vh;
  display:flex;flex-direction:column;
  background:#fff;border-radius:14px;box-shadow:0 16px 44px rgba(20,22,40,.22);padding:18px;
}
.chat-summary-panel[hidden]{display:none}
.chat-summary-panel h3{flex:0 0 auto;padding-left:26px}
.chat-summary-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:3px;background:#fafbff;border-radius:10px;padding:8px}
.chat-summary-msg{display:flex;flex-direction:column;gap:2px;padding:8px 9px;border-radius:8px;cursor:pointer;transition:background .15s}
.chat-summary-msg:hover{background:#eef1ff}
.chat-summary-msg-line{font-size:13.5px;color:var(--text);line-height:1.6;word-break:break-word}
.chat-summary-referred-to{color:#d92d20;font-weight:700}
.chat-summary-time{font-size:11px;color:var(--muted)}
@media (max-width:900px){
  .chat-summary-panel{width:calc(100vw - 48px);max-width:none;height:300px;right:0;left:auto}
}

/* فاز ۲۶ — آیتم ۱: کادر اطلاع‌رسانی اکنون هم‌ردیف عنوان «داشبورد فروش» است (نه زیر آن) و کل ردیف تاپ‌بار
   ۱۰۰٪ عرض را پر می‌کند — قبلاً (فاز ۲۵) یک باکس مجزا زیر تاپ‌بار بود */
.topbar-with-announcement{flex-wrap:nowrap;width:100%}
.topbar-with-announcement .topbar-title-group{flex:0 0 auto}
.topbar-with-announcement .actions{flex:0 0 auto}
.announcement-inline-wrap{flex:1 1 auto;min-width:0}
.announcement-inline-wrap:empty{display:none}
@media (max-width:900px){
  .topbar-with-announcement{flex-wrap:wrap}
  .announcement-inline-wrap{flex:1 1 100%;order:3}
}

/* کادر اطلاع‌رسانی مدیران (بازطراحی فاز ۲۷): طبق درخواست کاربر، ارتفاع این نوار باید دقیقاً با دکمه
   «+ معامله جدید» (کلاس .btn، ارتفاع ≈۴۲px) یکسان باشد؛ پس اکنون یک نوار تک‌خطی فشرده است که فقط آخرین
   اطلاعیه را (کوتاه‌شده با ellipsis) نشان می‌دهد — فهرست کامل در مودال جداگانه و افزودن در دراپ‌داون
   شناور (بدون تأثیر بر ارتفاع نوار) در دسترس است. */
.announcement-banner{
  height:42px;box-sizing:border-box;background:#fff1f0;border:1.5px solid #f6c3c0;border-radius:10px;
  padding:0 14px;margin:0;display:flex;align-items:center;gap:10px;position:relative;overflow:visible;
}
.announcement-banner-icon{flex:0 0 auto;font-size:15px}
.announcement-banner-current{
  flex:1 1 auto;min-width:0;font-weight:700;color:var(--danger);font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.announcement-banner-current.muted{font-weight:500;color:var(--muted)}
/* فاز ۳۱ — آیتم ۲: افکت تایپ برای پیام‌های اضطراری — یک مکان‌نمای چشمک‌زن انتهای متن */
.announcement-banner-current.announcement-typing::after{
  content:'▍';display:inline-block;margin-inline-start:2px;animation:announcement-cursor-blink 1s step-start infinite;
}
@keyframes announcement-cursor-blink{50%{opacity:0}}
.announcement-banner-count-btn{
  flex:0 0 auto;background:#fff;border:1px solid #f6c3c0;color:var(--danger);border-radius:20px;
  padding:3px 10px;font-size:12px;cursor:pointer;white-space:nowrap;font-family:inherit;
}
.announcement-banner-count-btn:hover{background:#ffe3e1}
.announcement-add-anchor{position:relative;flex:0 0 auto}
.announcement-banner-add-btn{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--danger);background:#fff;color:var(--danger);
  font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
}
.announcement-banner-add-btn:hover{background:var(--danger);color:#fff}
.announcement-add-box{
  position:absolute;top:calc(100% + 8px);left:0;z-index:50;box-sizing:border-box;
  display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--border);border-radius:10px;
  padding:12px;width:min(340px,80vw);box-shadow:0 12px 30px rgba(0,0,0,.15);
}
.announcement-add-box[hidden]{display:none}
.announcement-add-box textarea{width:100%;resize:vertical;box-sizing:border-box}
.announcement-add-row{display:flex;align-items:center;justify-content:space-between;font-size:13px}

/* مودال فهرست کامل اطلاعیه‌ها (فاز ۲۷) */
.announcement-modal-list{max-height:50vh;overflow-y:auto;margin:12px 0;display:flex;flex-direction:column;gap:10px}
.announcement-modal-item{padding:10px;border:1px solid var(--border);border-radius:10px}
.announcement-modal-text{font-weight:700;color:var(--danger);font-size:14.5px;line-height:1.7;word-break:break-word}
.announcement-modal-meta{font-size:11.5px;margin-top:6px;display:flex;align-items:center;gap:8px}
@media (max-width:600px){
  .announcement-banner-current{font-size:13px}
}
.chat-layout{display:flex;gap:18px;height:calc(100vh - 190px);min-height:460px}
.chat-channels{
  width:220px;flex:0 0 auto;background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:12px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;
}
.chat-channels-title{font-size:12.5px;color:var(--muted);font-weight:700;padding:2px 6px 8px}
.chat-channel-btn{
  text-align:right;background:none;border:none;border-radius:9px;padding:11px 12px;cursor:pointer;
  font-size:15px;font-family:inherit;color:var(--text);
}
.chat-channel-btn:hover{background:#f2f3f8}
.chat-channel-btn.active{background:var(--primary-light);color:var(--primary-dark);font-weight:700}
/* فاز ۴۹ — چت خصوصی (PV): هر دکمهٔ گفت‌وگو یک ردیف عنوان + یک ردیف کوچک پیش‌نمایش آخرین پیام دارد */
#chat-pv-list{display:flex;flex-direction:column;gap:4px}
.chat-pv-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;overflow:hidden}
.chat-pv-preview{font-size:11.5px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-main{
  flex:1;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:12px;
  overflow:hidden;min-width:0;
}
.chat-main-head{
  padding:16px 20px;border-bottom:1px solid var(--border);font-weight:700;font-size:17px;background:#fafbff;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
/* فاز ۴۲ — آیتم ۴: جستجوی پیام‌رسان */
.chat-search-results{max-height:340px;overflow-y:auto;margin-top:10px}
.chat-search-result-item{
  padding:10px 12px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;cursor:pointer;font-size:13.5px;
}
.chat-search-result-item:hover{background:#f7f8fc}
.chat-search-result-meta{font-size:12px;color:var(--muted);margin-bottom:4px}
.chat-messages{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.chat-msg{display:flex}
.chat-msg.mine{justify-content:flex-start}
.chat-msg-bubble{
  max-width:70%;background:#f2f3f8;border-radius:12px;padding:10px 14px;
}
.chat-msg.mine .chat-msg-bubble{background:var(--primary-light)}
.chat-msg-head{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.chat-msg-sender{font-weight:700;font-size:14px}
.chat-msg-time{font-size:12px;color:var(--muted)}
.chat-msg-body{font-size:15px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.chat-msg-referred{margin-top:6px;font-size:12.5px;color:var(--primary-dark);font-weight:600}
.chat-composer{border-top:1px solid var(--border);padding:14px 20px;background:#fafbff}
.chat-composer textarea{
  width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-family:inherit;
  font-size:15px;resize:vertical;margin-bottom:10px;
}
.chat-composer-row{display:flex;gap:10px;align-items:center}
.chat-composer-row select{flex:1;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-family:inherit;font-size:14.5px}

/* فاز ۲۳: ردیف هر کانال در نوار کناری پیام‌رسان (به‌همراه دکمه ویرایش نام برای مدیر پروژه) */
.chat-channel-row{display:flex;align-items:center;gap:2px}
.chat-channel-row .chat-channel-btn{flex:1;min-width:0}
.chat-channel-edit{
  background:none;border:none;cursor:pointer;font-size:14px;color:var(--muted);padding:6px;border-radius:8px;flex:0 0 auto;
}
.chat-channel-edit:hover{background:#f2f3f8}

/* فاز ۲۴: پنل کوچک انتخاب ایموجی، بالای دکمه 😊 در کادر نوشتن پیام */
.chat-emoji-anchor{position:relative}
/* فاز ۴۲ — آیتم ۱: موقعیت (top/left/right/bottom) اکنون با positionFloatingPanel در جاوااسکریپت و به‌صورت
   fixed محاسبه می‌شود تا هرگز بیرون از صفحه گم نشود؛ اینجا فقط ظاهر ثابت پنل باقی مانده است */
.chat-emoji-panel{
  background:#fff;border:1px solid var(--border);
  border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:8px;display:grid;
  grid-template-columns:repeat(6,1fr);gap:2px;width:220px;z-index:220;
}
.chat-emoji-item{background:none;border:none;font-size:19px;line-height:1;padding:6px;border-radius:8px;cursor:pointer}
.chat-emoji-item:hover{background:#f2f3f8}

/* فاز ۲۳: پیش‌نمایش پیوست تصویر/ویدئو داخل حباب پیام، به‌سبک تلگرام — کلیک برای نمایش بزرگ (لایت‌باکس) */
.chat-msg-attachment{position:relative;cursor:pointer;border-radius:10px;overflow:hidden;margin-bottom:6px;max-width:260px}
.chat-msg-media{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:10px}
.chat-msg-attachment-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;pointer-events:none;
}

/* فاز ۲۳: نوار پیش‌نمایش پیوست انتخاب‌شده، پیش از ارسال پیام */
.chat-attachment-preview{padding:0 20px;background:#fafbff}
.chat-pending-attachment{
  display:flex;align-items:center;gap:10px;padding:8px 10px;background:#fff;border:1px solid var(--border);
  border-radius:10px;margin-bottom:10px;
}
.chat-pending-thumb{width:44px;height:44px;object-fit:cover;border-radius:8px;flex:0 0 auto;background:#eee}
.chat-pending-name{flex:1;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-pending-remove{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;flex:0 0 auto}
.chat-pending-remove:hover{color:var(--danger,#d33)}
.chat-pending-icon{width:44px;height:44px;border-radius:8px;flex:0 0 auto;background:#eee;display:flex;align-items:center;justify-content:center;font-size:20px}

/* فاز ۲۶ — آیتم ۷: پیام صوتی و فایل عمومی در حباب پیام */
.chat-msg-audio{margin-bottom:6px}
.chat-msg-audio audio{max-width:260px;width:100%}
.chat-msg-file{
  display:flex;align-items:center;gap:8px;padding:9px 12px;background:#fff;border:1px solid var(--border);
  border-radius:10px;margin-bottom:6px;max-width:260px;text-decoration:none;color:var(--text,#222);
}
.chat-msg-file:hover{background:#f7f8fc}
.chat-msg-file-icon{font-size:18px;flex:0 0 auto}
.chat-msg-file-name{flex:1;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-msg-file-dl{flex:0 0 auto;color:var(--muted)}
#chat-mic-btn.recording{background:var(--danger);color:#fff;border-color:var(--danger)}

/* فاز ۲۶ — آیتم ۸: پیام حذف‌شده، برچسب ویرایش‌شده، و دکمه‌های ویرایش/حذف روی هر پیام */
.chat-msg-deleted{opacity:.65}
.chat-msg-deleted-text{color:var(--muted);font-style:italic}
.chat-msg-edited{font-size:11.5px;color:var(--muted);font-weight:400}
.chat-msg-actions{display:flex;gap:4px;margin-top:6px;opacity:0;transition:opacity .15s}
.chat-msg-bubble:hover .chat-msg-actions{opacity:1}
.chat-msg-action-btn{background:none;border:none;cursor:pointer;font-size:13px;padding:3px 6px;border-radius:6px;color:var(--muted)}
.chat-msg-action-btn:hover{background:rgba(0,0,0,.06)}
.chat-msg-edit-box textarea{
  width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:8px;padding:8px;font-family:inherit;
  font-size:14.5px;resize:vertical;
}
.chat-msg-edit-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}

/* فاز ۲۶ — آیتم ۹: مودال سابقه فعالیت‌های پیام‌رسان (فقط مدیرعامل/مدیر پروژه) */
.chat-activity-log-list{max-height:50vh;overflow-y:auto;margin:12px 0}
.chat-activity-log-item{padding:9px 4px;border-bottom:1px solid var(--border)}
.chat-activity-log-item:last-child{border-bottom:none}
.chat-activity-log-desc{font-size:13.5px}
.chat-activity-log-meta{font-size:12px;margin-top:2px}

/* فاز ۲۱ — آیتم ۵: هایلایت پیام هدف پس از کلیک روی کارت اعلان ارجاع چت */
@keyframes chat-msg-highlight-flash{
  0%,100%{background:transparent}
  30%,70%{background:var(--warning-light)}
}
.chat-msg-highlight .chat-msg-bubble{animation:chat-msg-highlight-flash 2.5s ease-in-out}

/* ---------- فاز ۲۸ — آیتم ۱: ریپلای (راست‌کلیک / سوایپ روی پیام) ---------- */
.chat-msg-bubble{transition:transform .18s ease}
.chat-msg-bubble.swiping{transition:none}
.chat-msg-reply-quote{
  background:rgba(0,0,0,.05);border-inline-start:3px solid var(--primary);border-radius:6px;
  padding:5px 9px;margin-bottom:6px;cursor:pointer;font-size:12.5px;display:flex;flex-direction:column;gap:1px;
}
.chat-msg-reply-quote:hover{background:rgba(0,0,0,.09)}
.chat-msg-reply-sender{font-weight:700;color:var(--primary-dark)}
.chat-msg-reply-text{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.chat-msg-context-menu{
  position:fixed;z-index:200;background:#fff;border:1px solid var(--border);border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.2);padding:4px;min-width:120px;
}
.chat-msg-context-item{
  display:block;width:100%;text-align:right;background:none;border:none;padding:9px 12px;font-size:13.5px;
  border-radius:7px;cursor:pointer;font-family:inherit;color:var(--text);
}
.chat-msg-context-item:hover{background:#f2f3f8}
.chat-reply-preview{padding:0 20px;background:#fafbff}
.chat-reply-preview-box{
  display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:1px solid var(--border);
  border-inline-start:3px solid var(--primary);border-radius:10px;padding:8px 12px;margin-bottom:10px;
}
.chat-reply-preview-text{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:12.5px}
.chat-reply-preview-title{font-weight:700;color:var(--primary-dark)}
.chat-reply-preview-body{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-reply-preview-cancel{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;flex:0 0 auto}
.chat-reply-preview-cancel:hover{color:var(--danger,#d33)}

/* ---------- فاز ۲۸ — آیتم ۲: آیکون قابل‌انتخاب کانال ---------- */
.chat-icon-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.chat-icon-pick-btn{
  background:#fff;border:1px solid var(--border);border-radius:9px;font-size:19px;padding:8px 0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.chat-icon-pick-btn:hover{background:#f2f3f8}
.chat-icon-pick-btn.active{border-color:var(--primary);background:var(--primary-light)}

/* ---------- فاز ۲۸ — آیتم ۳: نشان و پاپ‌آور «دیده‌شده» ---------- */
.chat-msg-seen-btn{
  margin-inline-start:auto;background:none;border:none;cursor:pointer;font-size:12px;color:var(--muted);
  display:inline-flex;align-items:center;gap:3px;padding:3px 6px;border-radius:6px;
}
.chat-msg-seen-btn:hover{background:rgba(0,0,0,.06)}
.chat-msg-seen-count{font-size:11.5px;font-weight:700}
.chat-seen-popover{
  position:absolute;z-index:200;background:#fff;border:1px solid var(--border);border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.2);padding:10px 12px;min-width:180px;max-width:260px;
}
.chat-seen-title{font-size:12.5px;font-weight:700;margin-bottom:6px}
.chat-seen-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;padding:3px 0}

/* ---------- فاز ۲۸ — آیتم ۴: دکمه ایموجی درست کنار کادر نوشتن پیام (نه پایین در ردیف دیگر دکمه‌ها) ---------- */
/* فاز ۴۳ — آیتم ۵و۶: طبق درخواست صریح کاربر، گرید ۲×۲ فاز ۴۲ کنار گذاشته شد — همهٔ دکمه‌ها (ایموجی/ارجاع/ویس/
   آپلود/ارسال) اکنون در یک ردیف افقی، با سبک/اندازهٔ یکسان و دقیقاً هم‌ارتفاع با باکس تایپ پیام (۴۵px) قرار دارند. */
.chat-input-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.chat-input-row textarea{margin-bottom:0;flex:1;height:45px;max-height:45px;resize:none;overflow-y:auto}
.chat-composer-action-btn{
  width:45px;height:45px;padding:0;display:flex;align-items:center;justify-content:center;font-size:17px;border-radius:10px;
  flex:0 0 auto;
}
/* فاز ۴۴ — آیتم ۴: باکس دکمهٔ ارجاع کمی عریض‌تر از بقیهٔ دکمه‌های ۴۵px شد تا هم آیکون کاملاً وسط‌چین
   بماند و هم نشان گوشه (چون absolute است) با لبهٔ دکمه تداخل نکند */
.chat-refer-anchor{position:relative;width:52px;height:45px;flex:0 0 auto}
.chat-refer-anchor .chat-composer-action-btn{width:100%;height:100%;position:relative}
.chat-send-btn-grid{
  flex:0 0 auto;height:45px;padding:0 16px;display:flex;align-items:center;justify-content:center;font-size:15px;border-radius:10px;
}

/* ---------- فاز ۲۸ — آیتم ۵: دکمه ضبط صدا (فاز ۴۳: هم‌سبک/هم‌اندازه با بقیهٔ دکمه‌های کادر، نه دیگر دایره‌ای) ---------- */
.chat-mic-btn{
  width:45px;height:45px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--text);
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative;font-size:16px;
  padding:0;
}
.chat-mic-btn:hover{background:#f2f3f8}
.chat-mic-btn.recording{background:var(--danger);border-color:var(--danger);color:#fff;animation:chat-mic-pulse 1.2s ease-in-out infinite}
.chat-mic-timer{
  position:absolute;bottom:calc(100% + 6px);right:50%;transform:translateX(50%);background:var(--danger);color:#fff;
  font-size:11px;padding:2px 7px;border-radius:20px;white-space:nowrap;
}
@keyframes chat-mic-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(220,53,69,.45)}
  50%{box-shadow:0 0 0 8px rgba(220,53,69,0)}
}

/* ---------- فاز ۲۸ — آیتم ۹: کاهش امکان انتخاب/کپی متن در کل برنامه (به‌جز فیلدهای ورودی و ناحیه پیام‌رسان) ----------
   این یک بازدارنده سطح رابط کاربری است، نه یک قفل امنیتی واقعی — جزئیات کامل و صادقانه در public/js/security.js
   و در CLAUDE.md («موارد باز») مستند شده است. */
.security-select-guard{user-select:none}
.security-select-guard input,
.security-select-guard textarea,
.security-select-guard select,
.security-select-guard [contenteditable="true"],
.security-select-guard .chat-msg-bubble,
.security-select-guard [data-allow-copy]{user-select:text}

/* ---------- کارت‌های اعلان زنده «چت رسمی پرسنل» (فاز ۲۱ — آیتم ۵) ---------- */
.chat-notify-stack{
  position:fixed;bottom:56px;right:24px;z-index:170;display:flex;flex-direction:column-reverse;gap:10px;
  width:320px;max-width:calc(100vw - 48px);
}
.chat-notify-card{
  background:#fff;border-radius:14px;box-shadow:0 16px 44px rgba(0,0,0,.22);border:1px solid var(--border);
  padding:12px 14px;animation:chat-notify-in .25s ease-out;
}
@keyframes chat-notify-in{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.chat-notify-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:700;font-size:14px;margin-bottom:4px}
.chat-notify-close{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;line-height:1;padding:0 2px}
.chat-notify-channel{font-size:12px;margin-bottom:6px}
.chat-notify-body{
  font-size:14px;line-height:1.5;cursor:pointer;background:#f7f8fc;border-radius:8px;padding:8px 10px;margin-bottom:8px;
  white-space:pre-wrap;word-break:break-word;
}
.chat-notify-body:hover{background:var(--primary-light)}
.chat-notify-reply-row{display:flex;gap:6px}
.chat-notify-reply-input{
  flex:1;border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-family:inherit;font-size:13.5px;
}

/* ---------- کارت‌های اعلان زنده واریزی جدید برای «مدیر عامل» (فاز ۲۴) — دقیقاً هم‌سبک chat-notify ---------- */
.deposit-alert-stack{
  position:fixed;bottom:56px;left:24px;z-index:170;display:flex;flex-direction:column-reverse;gap:10px;
  width:320px;max-width:calc(100vw - 48px);
}
.deposit-alert-card{
  background:#fff;border-radius:14px;box-shadow:0 16px 44px rgba(0,0,0,.22);border:1px solid var(--border);
  padding:12px 14px;animation:chat-notify-in .25s ease-out;
}
.deposit-alert-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:700;font-size:14px;margin-bottom:6px}
.deposit-alert-close{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;line-height:1;padding:0 2px}
.deposit-alert-body{font-size:13.5px;line-height:1.6;margin-bottom:10px}
.deposit-alert-actions{display:flex;gap:6px;flex-wrap:wrap}
.deposit-receipt-thumb{width:44px;height:44px;object-fit:cover;border-radius:6px;cursor:pointer;border:1px solid var(--border)}

/* ---------- فاز ۲۹ — آیتم ۶: پنل جستجوی پیشرفته مشتریان/تامین‌کنندگان (شهر/استان/محصول خریداری‌شده) ---------- */
.adv-search-panel{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 14px;align-items:end;
  background:var(--bg-alt,#f7f8fa);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:14px;
}
.adv-search-panel .field{margin-bottom:0}

/* ---------- فاز ۲۹ — آیتم ۲: فیلتر پیشرفته سربرگ محصولات تنظیمات ---------- */
.products-adv-filter{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 14px;
  background:var(--bg-alt,#f7f8fa);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:14px;
}
.products-adv-filter .field{margin-bottom:0}
.products-adv-actions{display:flex;gap:8px;align-items:flex-end}

/* ---------- فاز ۲۹ — آیتم ۱: اعلان تایید/رد واریزی برای تیم حسابداری (مستقل از کارت مدیرعامل) ---------- */
.accounting-notify-stack{bottom:104px}
/* فاز ۳۴ — آیتم ۸: کارت اعلان ارجاع معامله به واحد دیگر، هم‌سبک با کارت‌های اعلان بالا اما با یک offset مجزا
   تا با آن‌ها (که ممکن است هم‌زمان برای همان کاربر باز باشند) هم‌پوشانی نداشته باشد، و نوار رنگی نارنجی متمایز */
.referral-notify-stack{bottom:152px}
.referral-notify-card{border-inline-start:4px solid var(--warning, #f2a93b)}
.accounting-notify-confirmed{border-inline-start:4px solid var(--success,#2fae66)}
.accounting-notify-rejected{border-inline-start:4px solid var(--danger)}

@media (max-width:480px){
  .deposit-alert-stack{right:12px;left:12px;width:auto}
}

/* ---------- فاز ۳۰ — بنر پیشنهاد فعال‌سازی Web Push واقعی (مدیرعامل/حسابداری) ---------- */
.push-subscribe-banner{
  position:fixed;bottom:0;right:0;left:0;z-index:190;background:#1f2937;color:#fff;
  padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  box-shadow:0 -8px 24px rgba(0,0,0,.18);font-size:13.5px;
}
.push-subscribe-banner .push-subscribe-actions{display:flex;gap:8px;flex-shrink:0}
@media (max-width:480px){
  .push-subscribe-banner{flex-direction:column;align-items:stretch;text-align:center}
}

/* ---------- منوی موبایل (فاز ۲۲): در سایدبار افقی موبایل، به‌جای سایدبار فوتر پنهان‌شده (که دسترسی به
   خروج از حساب/تماس آزمایشی را از بین می‌برد)، یک دکمه «⋮» یک منوی کشویی کوچک باز می‌کند */
.mobile-menu-btn{display:none}
.mobile-menu-dropdown[hidden]{display:none}

/* فاز ۴۸ — آیتم ۱۳: نکتهٔ صادقانه برای فازهای بعد — این بریک‌پوینت با تست هدلس CDP روی چند اندازهٔ رایج
   تبلت (۷۶۸×۱۰۲۴، ۱۰۲۴×۷۶۸، ۸۰۰×۱۲۸۰، هم به‌صورت portrait/landscape) بررسی شد و در آن تست‌ها هیچ اسکرول
   افقی واقعی در سطح کل صفحه (document.documentElement.scrollWidth) دیده نشد — یعنی احتمالاً محدودیت
   واقعی گزارش‌شدهٔ کاربر مربوط به رفتار مرورگر/دستگاه خاص او بوده که در این محیط sandbox (بدون تبلت واقعی)
   قابل بازتولید نبود. با این حال، مشکل واقعی دیگری *در همین بازه* تایید شد: با سایدبار ثابت ۲۳۰ پیکسلی
   (که فقط زیر ۷۶۰ پیکسل به نوار افقی تبدیل می‌شود)، در عرض‌های تبلت (۷۶۱ تا ۱۰۲۴ پیکسل) کانبان ۷ستونه با
   `flex:1 1 0` مجبور می‌شود همهٔ ستون‌ها را به عرضی بسیار باریک (گاهی زیر ۷۰px) فشرده کند — که دقیقاً با
   شکایت کاربر («اندازهٔ باکس‌ها ... زیبا نیست») همخوانی دارد، حتی اگر کل صفحه اسکرول افقی نداشته باشد.
   راه‌حل: دقیقاً مثل الگوی موبایل (فاز ۴۵)، اما با عرض ستون مناسب‌تر برای تبلت (نه موبایل)، به کانبان
   اجازهٔ اسکرول افقی *فقط در همان ناحیه* داده می‌شود تا ستون‌ها عرض خوانا و یکنواخت (۲۲۰px) داشته باشند —
   این یک اسکرول افقی «طراحی‌شده و محدود به یک ناحیه» است (الگوی رایج و پذیرفته‌شدهٔ کانبان‌بردها در تبلت)،
   نه اسکرول افقی کل صفحه که کاربر از آن شکایت داشت. سایدبار هم کمی جمع‌وجورتر شد تا فضای بیشتری به محتوا برسد.
*/
@media (min-width:761px) and (max-width:1024px){
  .sidebar{width:188px;padding:16px 10px}
  .sidebar .brand{font-size:16px;padding:0 4px 16px}
  .nav-item{padding:9px 10px;font-size:14.5px}
  .main{padding:18px 20px}
  .kanban{overflow-x:auto}
  .kanban-col{flex:0 0 220px;min-width:220px;max-width:220px}
}
@media (min-width:761px) and (max-width:900px){
  .two-col-form{grid-template-columns:1fr}
}

@media (max-width:760px){
  .shell{flex-direction:column;height:100vh}
  .sidebar{width:100%;height:auto;flex-direction:row;align-items:center;overflow-x:auto;overflow-y:hidden;padding:10px 12px;gap:8px}
  .sidebar .brand{padding:0 8px 0 0;flex-shrink:0;font-size:16px}
  .sidebar .brand .brand-logo{width:28px;height:28px}
  /* فاز ۲۲: قبلاً #nav-items هیچ display صریحی نداشت، پس آیتم‌های ناوبری به‌جای یک ردیف افقی، به‌صورت
     یک ستون بلند و فشرده داخل ردیف سایدبار روی هم انباشته می‌شدند — اکنون خودش هم یک ردیف افقی اسکرول‌پذیر است */
  #nav-items{display:flex;gap:4px;flex:1;overflow-x:auto;min-width:0}
  .nav-item{white-space:nowrap;flex:0 0 auto;padding:9px 10px}
  .nav-item .ic{font-size:16px}
  /* فاز ۴۳ — آیتم ۱۱: در نوار افقی موبایل، گروه ناوبری و زیرمنوهای بازشدهٔ آن هم به‌صورت افقی/کنارهم بمانند */
  .nav-group{display:flex;align-items:center;flex:0 0 auto}
  .nav-group-toggle{white-space:nowrap;padding:9px 10px}
  .nav-group-children{flex-direction:row;padding-inline-start:0}
  .nav-subitem{padding-inline-start:12px}
  .sidebar-footer{display:none}
  .user-menu{display:none}
  .sidebar-datetime-box{display:none}
  .mobile-menu-btn{
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    width:38px;height:38px;border-radius:10px;background:#262a45;color:#fff;border:none;font-size:20px;cursor:pointer;
  }
  .mobile-menu-btn:hover{background:#31365a}
  .mobile-menu-dropdown{
    position:fixed;top:64px;left:12px;right:auto;width:230px;max-width:calc(100vw - 24px);
    background:#191d33;border-radius:14px;padding:16px 14px;z-index:300;box-shadow:0 20px 50px rgba(0,0,0,.4);
  }
  .mobile-menu-dropdown .user-chip{padding:6px 4px 14px;border-bottom:1px solid #2b2f4d;margin-bottom:12px}
  .mobile-menu-dropdown #mobile-profile-btn{margin-bottom:10px}
  .mobile-menu-dropdown #mobile-test-call-btn{margin-bottom:10px}
  .mobile-menu-dropdown .logout-link{margin-top:0}
  .main{padding:16px;height:auto;flex:1;overflow-y:auto}
  .grid-2{grid-template-columns:1fr}
  .two-col-form{grid-template-columns:1fr}
  table{min-width:540px}

  /* فاز ۴۵ — آیتم ۲: فقط در موبایل رفتار قدیمی «عرض ثابت هر ستون + اسکرول افقی کل بورد» بازمی‌گردد —
     در این عرض، فشرده‌کردن ۵+ ستون کانبان در یک عرض متغیر باعث غیرقابل‌خواندن‌شدن کامل متن می‌شود */
  .kanban{overflow-x:auto}
  .kanban-col{flex:0 0 auto;min-width:250px;max-width:250px}

  /* چت رسمی پرسنل: به‌جای دو ستون کنار هم (که روی موبایل عملاً هر دو بسیار فشرده می‌شدند)، فهرست
     کانال‌ها به یک نوار افقی اسکرول‌پذیر بالای صفحهٔ چت تبدیل می‌شود و بدنه چت زیر آن قرار می‌گیرد */
  .chat-layout{flex-direction:column;height:calc(100vh - 150px);min-height:380px;gap:10px}
  .chat-channels{width:100%;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:8px;gap:4px}
  .chat-channels-title{display:none}
  .chat-channel-btn{white-space:nowrap;flex:0 0 auto;padding:8px 12px}
  .chat-msg-bubble{max-width:88%}
}

/* ---------- تنظیمات ریز برای گوشی‌های خیلی باریک (فاز ۲۲) ---------- */
@media (max-width:480px){
  body{font-size:15.5px}
  .main{padding:12px}
  .topbar h2{font-size:20px}
  .modal-overlay{padding:0}
  .modal{border-radius:16px 16px 0 0;max-width:100%;max-height:94vh;padding:20px 16px;align-self:flex-end}
  .modal-wide{max-width:100%}
  .kanban-col{min-width:250px;max-width:250px}
  .call-popup{width:calc(100vw - 24px);left:0;border-radius:0 12px 12px 0}
  .call-popup-reopen-btn{top:auto;bottom:16px;left:12px}
  .call-popup-head{padding:14px 16px;font-size:16px}
  .call-popup-body{padding:14px 16px}
  .chat-notify-stack{right:12px;left:12px;width:auto}
  .deal-header-row{padding-left:32px}
  .stat-grid{grid-template-columns:1fr 1fr}
  .presence-bar{padding:5px 10px;gap:8px}
  .presence-bar-chip{font-size:11.5px}
}

/* ---------- نوار وضعیت آنلاین/آفلاین/پشت‌میز-نیستم کاربران، پایین کل صفحه (فاز ۲۵) ---------- */
.presence-bar{
  position:fixed;bottom:0;right:0;left:0;z-index:90;
  background:#1f2430;color:#d7dae6;padding:6px 16px;
  display:flex;align-items:center;gap:14px;overflow-x:auto;white-space:nowrap;
  font-size:12.5px;height:32px;box-sizing:border-box;box-shadow:0 -2px 10px rgba(0,0,0,.12);
}
.presence-bar-chip{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}

/* ---------- انتخابگر وضعیت خودِ کاربر (نوار کناری / منوی موبایل — فاز ۲۵) ---------- */
.presence-selector{display:flex;flex-direction:column;gap:4px;margin:10px 0}
/* فاز ۲۷ — آیتم ۳: چون این دکمه‌ها گاهی روی پس‌زمینه تیره (منوی کاربر/منوی موبایل) قرار می‌گیرند، بدون
   پس‌زمینه اختصاصی با متن تیره روی زمینه تیره ناخوانا می‌شدند — اکنون همیشه یک پس‌زمینه ثابت دارند:
   دکمه «آنلاین» سبز و دکمه‌های «پشت میز نیستم»/«آفلاین» سفید، صرف‌نظر از تیره/روشن بودن زمینه اطراف */
.presence-selector-btn{
  display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);border-radius:8px;
  padding:5px 9px;font-size:12.5px;color:var(--text);cursor:pointer;font-family:inherit;text-align:right;
}
.presence-selector-btn[data-presence-status="online"]{background:#d9f4e5;border-color:#8fd9ae;color:#0d6b3a}
.presence-selector-btn.active{border-color:var(--primary);font-weight:600;box-shadow:0 0 0 1px var(--primary) inset}
.presence-selector-btn[data-presence-status="online"].active{border-color:#1a7a4a;box-shadow:0 0 0 1px #1a7a4a inset}

/* فضای اضافه در پایین ناحیه اصلی تا محتوا زیر نوار وضعیت پنهان نشود */
.main{padding-bottom:40px}