/* استایل جامع واکنش‌گرا (Mobile & Tablet View) برای تمام صفحات پورتال جاستیتیا */
@media (max-width: 768px) {
  body {
    font-size: 14px !important;
    line-height: 1.7 !important;
    overflow-x: hidden !important;
  }
  .wrap {
    padding-inline: 12px !important;
    padding-block: 16px 44px !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  h1 {
    font-size: 1.42rem !important;
    line-height: 1.45 !important;
  }
  h2 {
    font-size: 1.1rem !important;
  }
  header.top {
    gap: 10px !important;
    padding-block-end: 14px !important;
  }
  /* نوار پیوند بالای صفحات در موبایل به صورت دکمه‌های قابل لمس و اسکرول‌پذیر افقی */
  .sib {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding-bottom: 6px !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
  }
  .sib a, .sib b {
    background: var(--sheet) !important;
    border: 1px solid var(--rule) !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
  }
  .sib b {
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
  }
  /* شمارنده‌های آماری بالای صفحات به صورت کارت‌های ۲ ستونی در موبایل */
  .counts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .counts > span {
    background: var(--sheet) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    font-size: 0.82rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  .counts b {
    font-size: 1.1rem !important;
  }
  /* فرم‌ها، فیلترها و کنترل‌ها در موبایل به صورت تمام‌عرض و استاندارد لمسی */
  .controls, .tray-row, .row, #addModForm, #userForm, #skillForm {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .controls input[type="search"],
  .controls select,
  .field input,
  .field select,
  .field textarea,
  input[type="text"],
  input[type="password"],
  select,
  textarea {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important; /* جلوگیری از زوم ناخواسته مرورگر موبایل */
  }
  .btn, label.btn {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  /* دکمه‌های کوچک داخل ردیف‌های منابع در کتابخانه و DNA */
  .actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .actions .btn.small, .actions a {
    width: 100% !important;
    min-height: 38px !important;
    font-size: 0.82rem !important;
    padding: 6px 8px !important;
    justify-content: center !important;
    text-align: center !important;
    border: 1px solid var(--rule) !important;
    border-radius: 6px !important;
    background: var(--sheet) !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .panel, .tray, .export, .sub, .infobox, .linkbox, .waitbox {
    padding: 14px 12px !important;
    border-radius: 10px !important;
  }
  .grid2, .infobox .ig, .grid-cards {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* زبانه‌های پرونده نشریه در DNA با اسکرول افقی نرم در موبایل */
  .tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 4px !important;
    padding-bottom: 2px !important;
  }
  .tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
    font-size: 0.86rem !important;
  }
  /* جدول مشخصات DNA در موبایل تک‌ستونی شود */
  .metrics {
    grid-template-columns: 1fr !important;
  }
  .metrics > div:nth-child(2) {
    border-top: 1px solid var(--rule) !important;
  }
  .metrics .ml {
    border-top: 1px solid var(--rule) !important;
    font-weight: 700 !important;
  }
  /* اسکرول افقی نرم برای تمام جداول در صفحات لاگ، هزینه و پنل ادمین */
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    border: 1px solid var(--rule) !important;
    border-radius: 8px !important;
  }
  th, td {
    padding: 8px 10px !important;
    font-size: 0.82rem !important;
  }
  /* نمایش فیش‌ها و پیش‌نمایش PDF در موبایل */
  .note {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .pdfview {
    height: 55vh !important;
  }
  .timeline {
    padding-inline-start: 10px !important;
  }
}