/* === Mobile refined rules: compact up to 4 cols, scroll only for 5+; first col 14px, others 11px; wrap text === */
@media (max-width: 768px){
  /* default: compact (no scroll) */
  body .mtable-container{
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  body .mtable-container table.mtable{
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;      /* جمع‌وجور کردن ستون‌ها */
    border-collapse: collapse !important;
  }
  /* Typography */
  body .mtable-container table.mtable th:first-child,
  body .mtable-container table.mtable td:first-child{ font-size: 14px !important; }
  body .mtable-container table.mtable th:not(:first-child),
  body .mtable-container table.mtable td:not(:first-child){ font-size: 11px !important; }

  /* فاصله‌ها و شکست خطوط */
  body .mtable-container table.mtable th,
  body .mtable-container table.mtable td{
    line-height: 1.55 !important;
    padding: 8px 10px !important;
    white-space: normal !important;       /* جملات به خط بعد بروند */
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }

  /* ستون اول عریض‌تر اما بدون فضای خالی، اجازه چندخطی */
  body .mtable-container table.mtable th:first-child,
  body .mtable-container table.mtable td:first-child{
    font-weight: 700 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* وقتی 5+ ستون شد: فقط آن‌وقت اسکرول بده؛ ولی همچنان متن‌ها می‌شکنند */
  body .mtable-container.mtable--scroll{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: auto !important;
  }
  body .mtable-container.mtable--scroll table.mtable{
    width: auto !important;
    table-layout: auto !important;        /* اجازه عرض طبیعی */
  }

  /* حالت فشرده‌ی بدون اسکرول: نسبت ستون‌ها با colgroup کنترل می‌شود */
  body .mtable-container.mtable--compact table.mtable{
    table-layout: fixed !important;
  }

  /* کپشن */
  body table.mtable caption{
    font-size: clamp(15px, 2.4vw, 17px) !important;
    font-weight: 700 !important;
  }
}

@media (max-width: 768px){
  /* استایل عنوان دو خطه در سرستون‌ها */
  body .mtable-container table.mtable th .mtitle-line1{ font-weight: 700 !important; }
  body .mtable-container table.mtable th .mtitle-rest{ display: inline !important; }
  body .mtable-container table.mtable th br{ content: ""; }
}


/* Ensure wrapping even in scroll mode to avoid 'گشاد' ستون‌ها */
@media (max-width: 768px){
  body .mtable-container.mtable--scroll table.mtable th,
  body .mtable-container.mtable--scroll table.mtable td{
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
}


/* === Vertical compact & no inner scrollbars (mobile) === */
@media (max-width: 768px){
  body .mtable-container table.mtable{
    margin: 0 !important;
    border-spacing: 0 !important;
  }
  body .mtable-container table.mtable caption{
    margin: 0 0 8px 0 !important;
    padding-bottom: 6px !important;
  }
  body .mtable-container table.mtable th,
  body .mtable-container table.mtable td{
    vertical-align: middle !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    overflow: visible !important;          /* جلوگیری از اسکرول داخلی سلول */
    max-width: none !important;
  }
  /* حذف فواصل داخل محتوا */
  body .mtable-container table.mtable td p,
  body .mtable-container table.mtable td div,
  body .mtable-container table.mtable td ul,
  body .mtable-container table.mtable td ol{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  body .mtable-container table.mtable td > * + *{
    margin-top: 4px !important;            /* فاصله‌ی کم برای چند المان پشت‌سرهم */
  }
}


/* === Center align all table text on mobile === */
@media (max-width: 768px){
  body .mtable-container,
  body .mtable-container table.mtable{ margin-left:auto !important; margin-right:auto !important; }
  body .mtable-container table.mtable th,
  body .mtable-container table.mtable td{
    text-align: center !important;
  }
  body .mtable-container table.mtable caption{
    text-align: center !important;
  }
}


/* === Center alignment on ALL viewports (desktop + mobile) === */
body .mtable-container,
body .mtable-container table.mtable{
  margin-left: auto !important;
  margin-right: auto !important;
}
body .mtable-container table.mtable th,
body .mtable-container table.mtable td{
  text-align: center !important;
}
body .mtable-container table.mtable caption{
  text-align: center !important;
}