/* ============================================================
   mobile.css —— 移动端 / 手机自适应（响应式 H5）
   仅在窄屏（<=768px）生效，桌面端不受影响。
   在所有页面的 <style> 之后引入，确保覆盖页面内联样式。
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: rgba(0,0,0,.06); }

@media (max-width: 768px) {

  /* ---- 顶部导航 ---- */
  header { padding: 10px 14px !important; gap: 10px !important; }
  header h1 { font-size: 15px !important; }
  header a, header button, header #nav-user, header #upd, header #who { font-size: 12px !important; }

  /* ---- 容器内边距 ---- */
  .wrap, .view { padding: 12px !important; }
  .wrap { max-width: 100% !important; }

  /* ---- 一级标签（业务线） ---- */
  .l1 { padding: 0 10px !important; }
  .l1 button { padding: 12px 14px !important; font-size: 14px !important; }

  /* ---- 筛选/操作行：紧凑换行（不隐藏内容） ---- */
  .row { gap: 6px !important; margin-bottom: 8px !important; }
  .row .lbl { font-size: 12px !important; }
  .chip { font-size: 13px !important; padding: 5px 11px !important; }
  .chip.sm { font-size: 12px !important; padding: 4px 9px !important; }

  /* ---- 卡片网格 → 单列 ---- */
  .grid { grid-template-columns: 1fr !important; }

  /* ---- 统计卡 ---- */
  .cards { gap: 8px !important; margin-bottom: 10px !important; }
  .kpi { flex: 1 1 calc(50% - 8px); min-width: 0 !important; padding: 8px 12px !important; }
  .kpi .n { font-size: 20px !important; }
  .kpi .t { font-size: 11px !important; }

  /* ---- 输入控件：16px 防止 iOS 自动放大 ---- */
  input, select, textarea,
  input[type=search], input[type=text] { font-size: 16px !important; }
  input[type=search] { width: 100% !important; }

  /* ---- 表单两列 → 单列 ---- */
  .two { display: block !important; }
  .two > div { margin-bottom: 8px; }
  .two > div:last-child { margin-bottom: 0; }
  .form-row { grid-template-columns: 1fr !important; }

  /* ---- 弹窗 → 全屏 ---- */
  #mask { align-items: stretch !important; }
  .modal {
    width: 100% !important; max-width: 100% !important;
    height: 100% !important; max-height: 100% !important;
    border-radius: 0 !important; padding: 14px 14px 0 !important;
  }
  .modal .mhead { top: -14px !important; padding: 14px 0 8px !important; margin-top: -14px !important; }
  .modal .btns { padding: 12px 0 calc(16px + env(safe-area-inset-bottom)) !important; flex-wrap: wrap !important; }
  .btns { flex-wrap: wrap !important; }

  /* ---- 按钮更好点按 ---- */
  .btn { padding: 11px 16px !important; }
  .btn.mini { padding: 6px 10px !important; }

  /* ---- 表格：容器横向滚动 ---- */
  .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .modal table { font-size: 12px !important; }
  .modal table th, .modal table td { white-space: nowrap; padding: 6px 6px !important; }

  /* ---- 登录框 ---- */
  #login .box { width: calc(100% - 32px) !important; }

  /* ---- 流程/材料 ---- */
  .pst .nm { font-size: 13px !important; }
  .doc { font-size: 11px !important; }

  /* ---- 导出提示等行内说明：手机上换行显示，避免被截断 ---- */
  #stats div > span { display: block; margin-top: 6px !important; }

  /* ---- 操作按钮行：均匀排布，避免挤压 ---- */
  .row .btn { flex: 0 0 auto; }
}

/* ============================================================
   旧工作台（index.html / app.js，使用 style.css）的移动端布局
   ============================================================ */
@media (max-width: 768px) {
  body { flex-direction: column !important; }
  .side { width: 100% !important; flex-direction: row !important; }
  .brand { display: none !important; }
  .side nav { flex-direction: row !important; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px !important; gap: 6px !important; }
  .side nav button { flex: 0 0 auto; white-space: nowrap; font-size: 13px !important; padding: 8px 12px !important; }
  .side-foot { display: none !important; }
  .topbar { height: auto !important; padding: 10px 14px !important; flex-wrap: wrap; gap: 8px; }
  .topbar h1 { font-size: 16px !important; }
  .view { padding: 12px !important; }
  .cards { grid-template-columns: repeat(2, 1fr) !important; }
  .panel { padding: 12px !important; }
  .two { display: block !important; }
  .toast { right: 12px !important; left: 12px !important; bottom: 12px !important; }
}