/* ============================================================
   焦距网络流水线中心 · 移动端适配样式
   仅对窄屏 (<=768px) 生效，桌面端 (layout-Cdb4QKjY.css / template.css)
   完全不受影响。本文件由 <head> 中最末的 <link> 加载，
   配合 !important 覆盖各页面内联 <style> 与框架的固定宽度。
   ============================================================ */

@media (max-width: 768px) {

  /* 兜底：禁止整页横向滚动（个别固定宽度元素造成的溢出） */
  html, body { overflow-x: hidden !important; }

  /* 容器：去掉固定 max-width，改为满宽 + 安全内边距 */
  .container,
  .wrap,
  .page,
  .content,
  .main {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* 顶栏收紧 */
  .topbar,
  .navbar,
  .app-bar {
    padding-left: 12px !important;
    padding-right: 12px !important;
    height: auto !important;
    min-height: 50px !important;
  }
  .topbar .title,
  .app-bar .title { font-size: 15px !important; }

  /* 工具栏纵向堆叠、控件撑满 */
  .toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .toolbar .spacer { display: none !important; }
  .toolbar > *,
  .toolbar input,
  .toolbar select,
  .toolbar button { width: 100% !important; flex: 1 1 auto !important; }

  /* 表单控件：全宽 + 16px 字号（防止 iOS 聚焦自动缩放）+ 更大触控区 */
  input,
  select,
  textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }
  input[type="checkbox"],
  input[type="radio"] { width: auto !important; min-width: auto !important; }

  /* 按钮：加大触控目标 */
  .btn {
    min-height: 40px !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    width: auto !important;
  }
  .btn.sm { min-height: 36px !important; }
  .toolbar .btn,
  .actions .btn,
  .modal-f .btn { width: 100% !important; margin: 4px 0 !important; }

  /* 表格：横向滚动（避免挤压/溢出） */
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-collapse: collapse !important;
  }
  th, td {
    white-space: nowrap !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  td.ops { white-space: nowrap !important; }

  /* 卡片/面板圆角与间距收紧 */
  .card,
  .panel {
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  /* 栅格：统一单列 */
  .card-grid,
  .grid,
  [class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* 弹窗：改为全屏抽屉式，避免溢出 */
  .modal-mask {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 20px 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .modal-h { font-size: 17px !important; }
  .modal-f { flex-direction: column !important; }
  .modal-f .btn { width: 100% !important; }

  /* 登录卡片自适应 */
  .login-wrap { padding: 16px !important; }
  .login-card { width: 100% !important; max-width: 360px !important; }

  /* 分页/操作栏居中换行 */
  .pager,
  .pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    row-gap: 8px !important;
  }

  /* 图片自适应 */
  img { max-width: 100% !important; height: auto !important; }

  /* 文本微调 */
  body { font-size: 14px !important; line-height: 1.5 !important; }
  h1, .h1 { font-size: 22px !important; }
  h2, .h2 { font-size: 19px !important; }
  h3, .h3 { font-size: 17px !important; }

  /* 布局类框架的固定侧栏在手机上取消定宽 */
  .advantages-layout,
  .filter-sidebar,
  [class*="sidebar"] {
    grid-template-columns: 1fr !important;
    flex: 1 1 auto !important;
    max-width: 100% !important;
  }
}

/* 超小屏进一步收紧 */
@media (max-width: 480px) {
  body { font-size: 13px !important; }
  .container,
  .wrap,
  .content { padding-left: 10px !important; padding-right: 10px !important; }
  th, td { padding: 9px 10px !important; font-size: 12.5px !important; }
}
