/* ============================================================
   移动端优化（阶段 5.3 / 验收标准：375px 不横向溢出、表格横滚、触控 ≥40px）
   仅在窄屏生效，桌面端不受影响。
   ============================================================ */
@media (max-width: 768px) {
  /* 触控目标最小尺寸：按钮 / 侧边栏链接 / 标签 / 切换 */
  .btn,
  .btn-sm,
  button,
  .side-link,
  .admin-link,
  .toggle,
  .tab,
  a.chip,
  .chip {
    min-height: 40px;
  }
  .btn-sm {
    min-height: 36px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* 表单控件：触控友好 + 16px 字号防 iOS 自动缩放 */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  select,
  textarea,
  .form-input,
  .form-select,
  .form-textarea {
    min-height: 40px;
    font-size: 16px;
  }

  /* 表格横滚容器：由 common.js 自动包裹未包裹的 .table，也可手工使用 */
  .table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 保证列不被压扁，超出则横滚（符合「表格可横滚」要求） */
  .table-wrap table.table {
    min-width: 640px;
  }

  /* 防止长文本 / 图片撑破视口 */
  img,
  svg,
  video,
  canvas {
    max-width: 100%;
    height: auto;
  }

  /* 卡片内边距收紧，给核心内容更多空间 */
  .card,
  .stat-card {
    padding: 14px !important;
  }

  /* 弹层在小屏尽量占满，便于操作 */
  .modal-box,
  .dialog,
  .dialog-box {
    width: 92% !important;
    max-width: 92% !important;
  }

  /* 顶部主导航间距收窄 */
  header .px-6,
  .header .px-6 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 480px) {
  main,
  .main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .px-4,
  .px-6 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .stat-card .num {
    font-size: 22px !important;
  }
}

/* 窄屏通用防溢出补充 */
input, select, textarea { max-width: 100%; }
a, p, h1, h2, h3, h4, td, th, span { overflow-wrap: break-word; word-wrap: break-word; }
.flex, .grid { min-width: 0; }