/* نسخهٔ موبایل و تبلت: منوی همبرگری، بدون سرریز افقی. بعد از theme.css بارگذاری می‌شود. */
.nav-toggle, .nav-burger { display: none; }

@media (max-width: 900px) {
  body { overflow-x: hidden; }
  /* علت کوچک‌شدن صفحه در گوشی: ستون 1fr با محتوای منو بزرگ می‌شد */
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; }
  .main { min-width: 0; padding: 14px 12px 40px; }

  .sidebar {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 6px 10px; height: auto; overflow: visible;
    padding: 8px 12px; position: sticky; top: 0; z-index: 30;
  }
  .brand { order: 1; padding: 2px 4px; }
  .brand span { display: flex; }
  .brand img.brand-mark { height: 32px; }
  .side-user { order: 2; margin: 0 auto 0 0; padding: 0; border: 0; flex: none; background: transparent; position: static; gap: 4px; }
  .avatar { display: grid; width: 34px; height: 34px; }
  .icon-btn { padding: 12px; }

  .nav-toggle { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .nav-burger {
    order: 3; display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 12px; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .10);
  }
  .nav-burger span, .nav-burger span::before, .nav-burger span::after {
    display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .2s, background .2s;
  }
  .nav-burger span { position: relative; }
  .nav-burger span::before, .nav-burger span::after { content: ""; position: absolute; left: 0; }
  .nav-burger span::before { top: -7px; }
  .nav-burger span::after { top: 7px; }
  .nav-toggle:checked + .nav-burger span { background: transparent; }
  .nav-toggle:checked + .nav-burger span::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked + .nav-burger span::after { transform: translateY(-7px) rotate(-45deg); }
  .nav-toggle:focus-visible + .nav-burger { outline: 3px solid #3ddc9b; outline-offset: 2px; }

  .side-nav {
    order: 4; flex: 0 0 100%; display: none; flex-direction: column; gap: 0;
    max-height: calc(100vh - 74px); overflow-x: hidden; overflow-y: auto;
    padding: 6px 0 10px; border-top: 1px solid rgba(255, 255, 255, .16);
  }
  .nav-toggle:checked ~ .side-nav { display: flex; }
  .side-nav a { white-space: normal; padding: 13px 12px; font-size: 16px; }
  .side-nav a .icon { display: block; }
  .nav-label { display: block; margin: 12px 12px 4px; }

  /* محتوا */
  .page-head h1, .card h1, .main h1 { font-size: 21px; }
  .card { padding: 14px; margin-top: 12px; }
  .stat-row, .stat-row.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat, .stat-row.compact .stat { padding: 12px; }
  .stat-value, .stat-row.compact .stat-value { font-size: 24px; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
  th, td { padding: 9px 10px; font-size: 14px; }
  .reject-form input[type=text] { width: 120px; }
  .result-bar { align-items: stretch; }
  .btn, button { max-width: 100%; }
}

@media (max-width: 860px) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .logo { height: 110px; }
  .login-card { padding: 24px 20px; }
}

/* جدول‌های پهن: داخل خودشان اسکرول شوند، نه اینکه کل صفحه را عریض کنند */
@media (max-width: 900px) {
  .main { overflow-x: hidden; }
  .main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { display: table; }
  .main img, .main svg, .main pre { max-width: 100%; }
}

/* ===== گوشی: جدول‌ها به شکل کارت ===== */
@media (max-width: 640px) {
  .table-wrap.is-stack-wrap { border: 0; overflow: visible; margin: 8px 0 0; }
  table.is-stack { display: block; overflow: visible; width: 100%; }
  table.is-stack thead { display: none; }
  table.is-stack tbody, table.is-stack tfoot { display: block; }
  table.is-stack tr {
    display: block; margin: 0 0 10px; padding: 4px 14px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px;
  }
  table.is-stack tbody tr:hover { background: var(--surface); }
  table.is-stack td, table.is-stack th {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
    padding: 9px 0; border-bottom: 1px dashed var(--line); background: transparent;
    white-space: normal; text-align: start; font-size: 15px;
  }
  table.is-stack tr > :last-child { border-bottom: 0; }
  table.is-stack td[data-label]:not([data-label=""])::before {
    content: attr(data-label); flex: none; color: var(--muted); font-size: 13px; font-weight: 700;
  }
  table.is-stack .row-actions, table.is-stack .actions { white-space: normal; }
  table.is-stack .row-actions form, table.is-stack .actions form { margin: 0; }
  table.is-stack .reject-form { flex-wrap: wrap; margin: 0; width: 100%; }
  table.is-stack .reject-form input[type=text] { width: 100%; flex: 1 1 140px; }
  table.is-stack .btn-sm, table.is-stack .btn-small { padding: 8px 14px; font-size: 14px; }
  table.is-stack tfoot tr { background: var(--surface-2); }
}