/* دکمهٔ همبرگر — فقط زیر ۷۶۸px نمایان می‌شود */
.mob-menu-btn{display:none;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border:none;background:transparent;border-radius:8px;cursor:pointer;color:#374151;}
.mob-menu-btn:hover{background:#f3f4f6;}
/* Overlay پشت Drawer سایدبار */
#mob-sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:240;}

@media(max-width:767px){
  /* ── ۱) سایدبار → Drawer ── */
  .mob-menu-btn{display:flex;}
  .hdr{padding:0 8px;gap:6px;}
  .hdr-logo{gap:0;font-size:0;}
  .hdr-logo .logo-badge{width:26px;height:26px;}
  .hdr-history-wrap{display:none;}
  .hdr-search{max-width:none;flex:1;min-width:0;}
  .hdr-search input{padding:6px 28px 6px 8px;}
  #g-search-drop{width:calc(100vw - 16px)!important;max-width:340px;}
  .hdr-username{display:none;}
  .sidebar{
    position:fixed;top:48px;bottom:0;right:0;
    width:80%;max-width:300px;min-width:0;
    transform:translateX(100%);
    transition:transform .22s ease;
    z-index:250;
    box-shadow:-6px 0 24px rgba(0,0,0,.18);
  }
  body.mob-sidebar-open .sidebar{transform:translateX(0);}
  body.mob-sidebar-open #mob-sidebar-overlay{display:block;}
  .snav{padding:12px 16px;font-size:13.5px;min-height:44px;}
  .snav span:last-child{display:inline!important;}
  .main{padding:12px;}
  .layout{height:calc(100vh - 48px);}

  /* ── ۲) فرم‌های چندستونه → تک‌ستونه ── */
  .m-f2,.m-f2-acc,.disc-grid,.fin-sub-grid{grid-template-columns:1fr;}
  .m-f2 .full,.m-f2-acc .full{grid-column:span 1;}
  /* بسیاری از فرم‌ها (نماینده/مشتری، تراکنش، شکایت و...) گرید دوستونه/سه‌ستونهٔ خود را
     مستقیماً با style اینلاین می‌سازند نه با کلاس مشترک؛ به‌جای ویرایش تک‌تک آن‌ها، مقادیر
     رایج grid-template-columns نامساوی (فرم) و مساوی ۳ تا ۵ ستونه (شبیه KPI) را عمومی
     هدف می‌گیریم. گرید تقویم (repeat(7,1fr)) عمداً دست‌نخورده می‌ماند. */
  div[style*="grid-template-columns:1fr 1fr"],div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:2fr 1fr"],div[style*="grid-template-columns: 2fr 1fr"],
  div[style*="grid-template-columns:1fr 210px"],div[style*="grid-template-columns: 1fr 210px"],
  div[style*="grid-template-columns:2fr 1.2fr"],div[style*="grid-template-columns: 2fr 1.2fr"]{
    grid-template-columns:1fr!important;
  }
  div[style*="grid-template-columns:repeat(3,1fr)"],div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns:repeat(4,1fr)"],div[style*="grid-template-columns: repeat(4, 1fr)"],
  div[style*="grid-template-columns:repeat(5,1fr)"],div[style*="grid-template-columns: repeat(5, 1fr)"]{
    grid-template-columns:repeat(2,1fr)!important;
  }

  /* ── ۵) حداقل اندازهٔ لمسی ۴۴px برای کنترل‌های تعاملی ──
     چون اغلب دکمه‌های ریز آیکونی در این پروژه با style اینلاین سایز
     می‌گیرند، اینجا !important لازم است (فقط همین‌جا، فقط زیر ۷۶۸px). */
  button,.btn-g,.btn-out,.inp,select,textarea,
  input:not([type=checkbox]):not([type=radio]):not([type=range]){
    min-height:44px!important;
  }
  input[type=checkbox],input[type=radio]{width:18px;height:18px;}

  /* ── ۶) مودال‌ها تقریباً تمام‌صفحه ── */
  .m-ov,.tm2-ov,.factory-ov,.decline-ov{padding:0;align-items:stretch;}
  .m-bx,.tm2-bx{
    max-width:100%!important;width:100%;height:100%;max-height:100%;
    border-radius:0;padding:16px;
  }
  /* علاوه بر مودال‌های کلاس‌دار بالا، تعداد زیادی مودال دیگر (نماینده/مشتری، یادداشت،
     جلسه و...) کاملاً با style اینلاین ساخته می‌شوند و کلاس مشترک ندارند. به‌جای دست‌کاری
     تک‌تک آن‌ها، همان الگوی ثابتشان (overlay تمام‌صفحهٔ نیمه‌شفاف مشکی با flex وسط‌چین) را
     با یک selector عمومی هدف می‌گیریم — بدون اینکه به لودینگ/صفحهٔ ورود (که پس‌زمینهٔ
     rgba(0,0,0..) ندارند) دست بزنیم. */
  /* دو حالت باید پوشش داده شود: styleِ نوشته‌شده مستقیم در HTML (بدون فاصله، مثل
     "inset:0") و styleِ ست‌شده توسط جاوااسکریپت (el.style.cssText=...) که مرورگر آن را
     هنگام serialize کردن با فاصله می‌نویسد (مثل "inset: 0px"، "background: rgba(0, 0, 0"). */
  div[style*="background:rgba(0,0,0"][style*="inset:0"],
  div[style*="background: rgba(0, 0, 0"][style*="inset: 0"]{padding:0!important;}
  div[style*="background:rgba(0,0,0"][style*="inset:0"] > div:first-child,
  div[style*="background: rgba(0, 0, 0"][style*="inset: 0"] > div:first-child{
    width:100%!important;max-width:100%!important;
    height:100%!important;max-height:100%!important;
    border-radius:0!important;
  }

  /* ── ۷) فاصله‌ها/فونت‌ها/عرض عناصر عمومی ── */
  .ph{flex-direction:column;align-items:stretch;gap:8px;}
  .ph-ttl h1{font-size:15.5px;}
  .btn-row{flex-direction:column;align-items:stretch;}
  .btn-row .btn-g,.btn-row .btn-out{justify-content:center;}
  .dg-toolbar,.rep-toolbar,.task-fbar{flex-direction:column;align-items:stretch;}
  .dg-search-wrap,.fil-inp-wrap,.fil-inp,.dg-search,.dg-fil,.fil-sel{width:100%;min-width:0;}
  .dg-count-txt{margin-right:0;text-align:center;}

  /* ── پروفایل نماینده/مشتری (پرونده مشتری) — لایوت سه‌ستونی inline-style با کلاس‌های
     hook که کنار همان style اصلی اضافه شدند (بدون حذف style دسکتاپ) به تک‌ستونه تبدیل
     می‌شود؛ به‌جای اسکرول‌های داخلی جداگانه، کل صفحه به‌صورت طبیعی اسکرول می‌کند. */
  .rd-outer{flex-direction:column!important;height:auto!important;align-items:stretch!important;min-width:0!important;width:100%!important;}
  .rd-left-col{width:100%!important;height:auto!important;min-width:0!important;}
  .rd-stats-panel{flex-grow:0!important;max-height:320px;min-width:0!important;}
  .rd-right-area{flex-direction:column!important;height:auto!important;overflow:visible!important;min-width:0!important;}
  .rd-tab-panel{height:auto!important;overflow:visible!important;min-width:0!important;}
  .rd-tab-content{overflow-y:visible!important;min-width:0!important;}
  .rd-activity-col{width:100%!important;height:auto!important;min-width:0!important;}
  .rd-activity-list{max-height:320px;min-width:0!important;}
  .rd-outer *{min-width:0;}

  /* ── ماژول نمونه فروشگاه‌ها — لایوت اصلی (لیست نمایندگان + جدول نمونه‌ها) تک‌ستونه
     می‌شود. جدول اصلی نمونه‌ها (۱۶ ستون، پاپ‌آور، چک‌باکس) به کارت تبدیل نمی‌شود —
     طبق الزام #3 فقط با اسکرول افقی (که همین الان هم دارد) نمایش داده می‌شود. */
  #ss-tab-assignments{flex-direction:column!important;height:auto!important;min-width:0!important;}
  #ss-tab-assignments *{min-width:0;}
  .ss-rep-sidebar{width:100%!important;min-width:0!important;border-left:none!important;border-bottom:1px solid #e5e7eb;max-height:260px;}
  .ss-sample-main{width:100%!important;}
  #ss-sample-table-wrap{max-height:70vh;}

  /* ── ۳-الف) شبکهٔ KPIهای رایج → تک‌ستونه/دوستونه ── */
  .kpi-grid,.sale-kpi-row,.fin-kpi-grid,.prod-kpi-row,.db-kpi-row,.ss-kpi-grid{
    grid-template-columns:repeat(2,1fr);
  }
  /* کارت‌های آمارِ تولید جمله‌اند نه یک عدد — دو ستون جمله را می‌شکند، پس تک‌ستونه. */
  .prod-stat-row{grid-template-columns:1fr;}
  /* گرید با repeat(N,1fr) به‌طور پیش‌فرض هر ستون را حداقل به‌اندازهٔ محتوای بی‌شکستِ آن
     (min-content) نگه می‌دارد — دقیقاً همان باگ min-width:auto در فلکس‌باکس. اگر محتوای
     یک کارت KPI بدون شکست خط باشد، کل گرید از عرض صفحه بیرون می‌زند. */
  .kpi-grid>*,.sale-kpi-row>*,.fin-kpi-grid>*,.prod-kpi-row>*,.db-kpi-row>*,.ss-kpi-grid>*{min-width:0;}
  .cr3,.cr3b,.db-row3{grid-template-columns:1fr;}

  /* ── ایمنی پیش‌فرض برای هر جدولی که هنوز کارت نشده: حداقل اسکرول افقی سالم بماند ── */
  .dg-wrap,.task-tbl-wrap,.task-v2-wrap,.fin-tbl-wrap,.prod-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

  /* ── ۳) جدول‌های اولویت‌دار → کارت (فقط جدول‌هایی که کلاس resp-tbl گرفته‌اند) ──
     تکنیک استاندارد CSS-only: هدر پنهان می‌شود، هر <tr> یک کارت کامل می‌شود، هر <td>
     یک ردیف افقی «برچسب: مقدار» با استفاده از data-label می‌سازد. */
  /* .task-tbl (زیرتب‌های پروفایل نماینده + ماژول شکایات) از قبل جدول‌های ساده و کم‌ستونی
     هستند؛ چون یک کلاس مشترک دارند، همان الگوی resp-tbl را عمومی (بدون نیاز به افزودن
     کلاس به تک‌تک‌شان) رویشان اعمال می‌کنیم. */
  .resp-tbl,.task-tbl{min-width:0!important;}
  .resp-tbl thead,.task-tbl thead{display:none;}
  .resp-tbl,.resp-tbl tbody,.task-tbl,.task-tbl tbody{display:block;width:100%;}
  .resp-tbl tr,.task-tbl tr{display:block;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px;margin-bottom:10px;}
  .resp-tbl tr:nth-child(even) td,.task-tbl tr:nth-child(even) td{background:transparent;}
  .resp-tbl td,.task-tbl td{display:flex;align-items:center;justify-content:space-between;gap:10px;border:none!important;padding:7px 2px;text-align:left;background:transparent!important;}
  .resp-tbl td[data-label]::before,.task-tbl td[data-label]::before{content:attr(data-label);font-weight:600;color:#6b7280;flex-shrink:0;font-size:11px;}
  .resp-tbl td.mob-hide,.task-tbl td.mob-hide{display:none;}
  .resp-tbl td.resp-actions,.task-tbl td.resp-actions{justify-content:center;}

  /* نوار اعلان شناور یادآوری وظیفه (تماماً inline-style ساخته می‌شود) — فقط عرضش را به
     صفحهٔ موبایل محدود می‌کنیم تا نیمی از صفحه/دکمهٔ همبرگر را نپوشاند؛ موقعیت top و
     منطق نمایش/بستنش دست‌نخورده می‌ماند. */
  .tm-reminder-toast{left:8px!important;right:8px!important;max-width:none!important;}
  .tm-reminder-toast div[style*="font-size:20px"]{font-size:16px!important;}
}