/* 汉堡按钮：桌面不显示（窄屏规则里会打开） */
.side-toggle { display: none; }

/* 甬标 MES+ · 电脑界面的**手机适配层**（2026-10-20）
   ────────────────────────────────────────────────────────────────────────────
   为什么要有这个文件：
   用户口径「按现在功能一模一样配置出来 H5 页面，包含所有操作功能」——
   电脑端有 80 个页面、几百个操作，逐个在手机端重写既不可能也不该做。
   正确做法是：**手机也能打开完整的电脑界面**（同一个 SPA、同一套功能），
   只补一层窄屏样式，让小屏上能正常点、正常看：侧边栏变抽屉、顶栏可横向滑、
   表格横向滚动、弹窗全屏、按钮加大。

   ⚠ 只在宽度 ≤ 860px 时生效，桌面浏览器完全不受影响。
   ⚠ 这个文件不实现任何业务，只调整布局与可点区域。 */

@media (max-width: 860px) {
  /* ---------- 骨架：顶栏收窄、内容铺满 ---------- */
  .hdr { padding: 0 8px; gap: 6px; }
  .hdr-brand { gap: 6px; }
  .hdr-name { display: none; }
  .hdr-clock { display: none; }
  .hdr-right { gap: 6px; }
  .hdr-btn { padding: 5px 9px; font-size: 12px; }
  /* 顶部模块导航：横向滚动，手指左右滑 */
  .hdr-nav { display: flex; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hdr-nav::-webkit-scrollbar { display: none; }
  .hdr-nav > * { flex: none; white-space: nowrap; }
  .tabsbar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabsbar::-webkit-scrollbar { display: none; }
  .tabsbar > * { flex: none; white-space: nowrap; }

  /* ---------- 侧边栏：改成抽屉，平时收起 ---------- */
  .main { position: relative; }
  .side {
    position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: 250px !important;
    transform: translateX(-102%); transition: transform .2s ease-out;
    box-shadow: 2px 0 14px rgba(16, 24, 40, .18); overflow-y: auto;
    padding-top: 10px;
  }
  /* ⚠ app.css 在 ≤1200px 就把侧栏压成 52px 只留图标、隐藏文字（.side-item span.tx / .side-group），
     手机上沿用会变成「一列图标」完全看不懂 → 这里把它们复位成完整文字菜单。 */
  .side .side-item { justify-content: flex-start !important; padding: 9px 14px !important; }
  .side .side-item span.tx { display: inline !important; }
  .side .side-group { display: block !important; }
  .app.side-open .side { transform: none; }
  /* 抽屉打开时的遮罩（点一下关闭） */
  .app.side-open::after {
    content: ''; position: fixed; inset: 0; z-index: 55; background: rgba(17, 24, 39, .38);
  }
  /* 汉堡按钮：手机上才显示（桌面默认 display:none，避免多出来一个按钮） */
  .side-toggle { display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 30px; font-size: 17px; border-radius: 8px; border: none;
    background: rgba(255, 255, 255, .16); color: #fff; }

  /* ---------- 内容区与卡片 ---------- */
  .content { padding: 8px 8px 16px; }
  .card-hd { flex-wrap: wrap; gap: 6px; }
  .toolbar, .flex.wrap { flex-wrap: wrap; }
  .sec-title { margin: 6px 0 8px; }
  .foot { display: none; }
  /* KPI/看板卡片：手机上也保持两列（app.css 在 ≤820px 会全压成 1 列，一屏只能看一个数） */
  .grid2, .grid3, .grid4, .grid5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid6, .grid7 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* ---------- 表格：整块横向滚动，不再挤成一团 ---------- */
  .tb-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.tb { min-width: 720px; }
  table.tb th, table.tb td { white-space: nowrap; }
  /* 操作列按钮允许换行（手机上按钮多） */
  .ops { display: flex; flex-wrap: wrap; gap: 4px; }
  .ops .btn { padding: 2px 7px; font-size: 11.5px; }

  /* ---------- 弹窗：手机上全屏（电脑端弹窗类名：.mask > .dlg>.dlg-hd/.dlg-bd/.dlg-ft） ---------- */
  .mask { align-items: stretch !important; padding: 0 !important; }
  .dlg { width: 100% !important; max-width: none !important;
    height: 100% !important; max-height: none !important; border-radius: 0 !important;
    display: flex; flex-direction: column; }
  .dlg-bd { flex: 1; overflow: auto; padding: 10px !important; }
  .dlg-hd { position: sticky; top: 0; z-index: 2; }
  .dlg-ft { position: sticky; bottom: 0; z-index: 2; background: #fff; }
  /* 抽屉（详情）也铺满 */
  .drawer { width: 100% !important; max-width: none !important; }

  /* ---------- 表单与可点区域 ---------- */
  .fld > span { font-size: 12px; }
  input, select, textarea { font-size: 15px; }      /* 15px 防 iOS 聚焦自动放大 */
  .btn { padding: 7px 12px; }
  .kpi b { font-size: 20px; }

  /* 登录页：单列、铺满 */
  .login-wrap, .login-card { width: 100% !important; max-width: none !important; }
}

/* 手机上隐藏「电脑端才有意义」的提示文字（不影响功能） */
@media (max-width: 860px) {
  .only-desktop { display: none !important; }
}