/* ==========================================================================
 * 骑骑养车 ERP · 多端响应式适配（手机 / 平板）
 * --------------------------------------------------------------------------
 * 为什么单独一个文件：
 *   style.css 是「桌面优先」的骨架（70px 图标栏 + 232px 子菜单 + 宽表格 + 4 列表单）。
 *   手机/平板要改的是「同一批选择器在窄屏下怎么排」，与桌面骨架是两件事。
 *   分开放的好处：改窄屏不会碰到桌面样式，回滚只需删掉本文件 + index.html 一行引用。
 *   引入顺序上本文件在 style.css 之后，同优先级下后者生效，正好用来覆盖。
 *
 * 三档断点：
 *   手机   ≤ 767px   隐藏左侧图标栏，改底部主导航（拇指可达）；子菜单收进「更多」九宫格
 *   平板   768–1199  保留图标栏，子菜单改浮层（推开表格宽度的问题就没了）
 *   桌面   ≥ 1200px  维持原样（style.css 负责）
 *
 * 为什么手机上限卡在 767：
 *   手机横屏（iPhone 14 Pro 852×393）与 iPad 竖屏（768×1024）都得落在「表格能看」的那一档。
 *   768 起交给平板档，所以手机档卡在 767 —— 两档边界不留缝。
 * ========================================================================== */

/* ============================== 通用修正（与断点无关） */

/* 横屏时禁止 iOS 自动放大字号（表格密集的页面尤其明显） */
html { -webkit-text-size-adjust: 100%; }

/* toast 堆叠修正：
 * 原 .toast 自己就是 position:fixed + left:50% + top:24px，
 * 「保存成功」和「同步失败」同时冒出来时，两条会叠在同一个位置互相盖住。
 * 改成「容器负责定位、子项静态排列」，多条自然纵向排开。 */
#toasts {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%);
  z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; max-width: 92vw;
}
.toast { position: static; left: auto; top: auto; transform: none; }

/* ============================== 底部主导航（手机） */
.mtab { display: none; }

/* ============================== 「更多」页：九宫格（手机） */
.more-sec { background: #fff; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.more-sec-h {
  padding: 12px 12px 8px; font-size: 13.5px; font-weight: 600; color: #22303f;
  display: flex; align-items: center; gap: 6px;
}
.more-sec-h em { font-style: normal; font-size: 11.5px; color: #b6bcc4; font-weight: 400; margin-left: auto; }
.more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 2px 4px 12px; }
.more-cell {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 2px;
  border-radius: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.more-cell:active { background: #f2f7ff; }
.more-cell .ic {
  width: 38px; height: 38px; border-radius: 10px; background: #eef5ff; color: var(--blue);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.more-cell span {
  font-size: 11px; color: #4a5a6a; text-align: center; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.more-empty { padding: 40px 0; text-align: center; color: #b6bcc4; font-size: 13px; }

/* 功能搜索：93 项在手机上翻菜单太慢，直接按名字过滤 */
.more-search {
  display: flex; align-items: center; gap: 7px; background: #f2f4f7;
  border-radius: 8px; padding: 0 10px; height: 40px; margin: 2px 0 12px;
}
.more-search svg { color: #98a3b0; flex-shrink: 0; }
.more-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; height: 38px;
  font-size: 16px; padding: 0; outline: none; color: var(--text);
}
.more-search .x { color: #98a3b0; padding: 4px 6px; cursor: pointer; font-size: 13px; }
.more-search .x:hover { color: var(--red); }

/* 表格横滑提示：手机上表格普遍比屏幕宽，能滑不代表用户知道能滑。
   列表第一次渲染时由 mobile.js 检测，超宽才挂出来；用户滑动一次就自动收起。 */
.scroll-hint {
  display: none; align-items: center; gap: 6px; font-size: 12px;
  color: #4a7fbd; background: #f2f7ff; border: 1px solid #dbeaff;
  border-radius: 6px; padding: 7px 10px; margin-bottom: 8px;
}
.scroll-hint::before { content: '↔'; font-size: 13px; }
@media (max-width: 767px) { .scroll-hint.on { display: flex; } }

/* 「装到桌面当 App 用」引导条 */
.pwa-install {
  display: flex; align-items: center; gap: 9px; background: #eef7ff;
  border: 1px solid #cfe4ff; border-radius: 8px; padding: 10px 12px 10px 11px;
  margin-bottom: 12px; position: relative;
}
.pwa-install .pi-ic {
  width: 34px; height: 34px; border-radius: 9px; background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pwa-install .pi-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pwa-install .pi-txt b { font-size: 13px; color: #1b5fa8; font-weight: 600; }
.pwa-install .pi-txt span { font-size: 11.5px; color: #6b8bab; line-height: 1.45; }
.pwa-install .pi-go { flex-shrink: 0; }
.pwa-install .pi-x {
  position: absolute; right: 4px; top: 4px; color: #9db6cd; font-size: 12px;
  cursor: pointer; padding: 3px 6px; line-height: 1;
}

/* 宽屏下万一打开这两个移动端页面（桌面浏览器手动访问 #/m/more），
   4 列会撑得过宽，改用 6 列并收窄搜索框 */
@media (min-width: 768px) {
  .more-grid { grid-template-columns: repeat(6, 1fr); }
  .more-search { max-width: 420px; }
}

/* ============================== 平板：768 – 1199px
 * 平板保留左侧图标栏（大屏有位置，一眼看到 7 个模块比藏在「更多」里快），
 * 但子菜单从「推开内容」改成「浮层」—— 232px 在 768 宽上占掉三成，
 * 表格本来就要横滑，再被挤一下几乎没法看。 */
@media (min-width: 768px) and (max-width: 1199px) {
  .rail { width: 62px; flex: 0 0 62px; }
  .rail .logo { width: 46px; height: 46px; }
  .rail-item { height: 58px; }
  .rail-item svg { width: 20px; height: 20px; }
  .rail-item span { font-size: 11.5px; }

  /* 子菜单：浮层，不占内容宽度 */
  .flyout {
    position: fixed; left: 62px; top: 0; bottom: 0; width: 236px;
    box-shadow: 4px 0 20px rgba(0, 0, 0, .14); z-index: 45;
  }
  /* 浮层压住内容时，点内容区即关闭（由 mobile.js 绑定） */
  .flyout-mask {
    position: fixed; inset: 0; left: 62px; z-index: 44;
    background: rgba(0, 0, 0, .06);
  }

  .content { padding: 10px; }

  /* KPI 与汇总：4 列在 768 宽上每个只有 170px，数字要换行，改 2 列 */
  .kpis { flex-direction: column; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .kpi:nth-child(2n) { border-right: 0; }
  .sumgrid { grid-template-columns: repeat(4, 1fr); gap: 10px 0; }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid .f.wide { grid-column: span 2; }

  /* 弹窗：宽弹窗别顶满，留出边距好点关闭 */
  .modal.wide { width: 92vw; }
  .modal.xwide { width: 96vw; }

  /* 触控尺寸：手指比鼠标粗，按钮与输入框都要大一号 */
  .btn { height: 36px; }
  .inp, .sel { height: 36px; }
  .act { padding: 4px 9px; line-height: 20px; }
  .pager .pg { min-width: 34px; height: 34px; }
  .items-tb input, .items-tb select { height: 34px; }
  .items-tb .rowop i { width: 24px; height: 24px; font-size: 14px; }

  /* 表格：允许横滑，不裁切。原 .grid 是 overflow:hidden，窄屏上右边的列直接消失 */
  .grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.tb { min-width: max-content; }
  .pk-tbl { overflow-x: auto; }
  .pk-tbl table { min-width: max-content; }
}

/* ============================== 手机：≤ 767px */
@media (max-width: 767px) {

  /* ---------- 主框架：图标栏换成底部栏 ---------- */
  /* 100dvh 而不是 100vh：iOS 的 100vh 把地址栏高度算进去，
     页面底部会被顶出屏幕，底部导航正好压在那里看不见。 */
  #app { height: 100vh; height: 100dvh; }
  .rail { display: none; }
  .flyout { display: none !important; }   /* 手机上由「更多」页接管 */
  .main { flex: 1; min-width: 0; }

  .content {
    padding: 8px 8px calc(66px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  /* ---------- 顶部栏：只留最要紧的 ---------- */
  .topbar {
    height: auto; min-height: 46px; flex-wrap: wrap; padding: 6px 10px; gap: 4px 8px;
  }
  .topbar .expire, .topbar .sep { display: none; }   /* 到期日期/分隔线在手机上纯占位 */
  .topbar .shop { font-size: 13.5px; }
  .topbar .home-btn { width: 32px; height: 32px; }
  .topbar .right { gap: 12px; font-size: 13px; padding: 4px 0; }
  .topbar .right a { padding: 5px 2px; }             /* 加大点击热区 */

  /* ---------- 多标签条：压扁 + 可横滑 ---------- */
  .tabbar { height: 38px; flex: 0 0 38px; }
  .tabbar .navbtn { width: 32px; }
  .tab { padding: 0 11px; font-size: 12.5px; }
  .tab .x { padding: 5px 3px; font-size: 13px; }     /* ✕ 太细，加大热区 */

  /* ---------- 卡片 / KPI ---------- */
  .card { padding: 12px; margin-bottom: 10px; }
  .card-h { font-size: 13.5px; margin-bottom: 10px; }

  .kpis { flex-direction: column; gap: 10px; }
  .kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi { padding: 10px 8px; }
  .kpi:nth-child(2n) { border-right: 0; }
  .kpi .v { font-size: 19px; }
  .kpi .l { font-size: 11.5px; }
  .kpi-pend { grid-template-columns: repeat(2, 1fr); }
  .kpi-pend .kpi { border-right: 1px solid #f5f5f5; }
  .kpi-pend .kpi:nth-child(3n) { border-right: 1px solid #f5f5f5; }
  .kpi-pend .kpi:nth-child(2n) { border-right: 0; }
  .kpi-pend .v { font-size: 17px; }

  .sumgrid { grid-template-columns: repeat(3, 1fr); gap: 10px 0; }
  .sumgrid .v { font-size: 15px; }
  .sumgrid .l { font-size: 11px; }

  /* ---------- 快捷入口：大按钮占整行，小按钮两列 ---------- */
  .quick { gap: 8px; }
  .q-big { width: 100%; height: 76px; padding: 12px 16px; }
  .q-big b { font-size: 16px; }
  .q-sm { flex: 1 1 calc(50% - 4px); min-width: 0; height: 46px; justify-content: center; }

  /* ---------- 表格：能横滑，不裁切 ----------
   * 原 .grid 是 overflow:hidden —— 手机上第 4 列之后直接看不到，
   * 而且没有任何滚动提示，人会以为「这个表就这几列」。
   * 加 max-content 让表格按内容撑开，容器负责横滑。 */
  .grid { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; }
  table.tb { min-width: max-content; }
  table.tb th { padding: 9px 9px; font-size: 12.5px; }
  table.tb td { padding: 9px 9px; font-size: 12.5px; }
  table.tb .ell { max-width: 190px; }
  .items-tb { min-width: max-content; }
  .items-tb th { padding: 7px 6px; font-size: 12px; }
  .items-tb td { padding: 5px 5px; }
  .items-tb input, .items-tb select { height: 38px; font-size: 16px; }
  .items-tb .rowop i { width: 28px; height: 28px; font-size: 16px; }

  /* 行内操作按钮（.acts .act）：原设计 18px 高，是给鼠标点的；
     手指按下去会把相邻的操作一起点到，必须加大到 30px 以上。 */
  .acts { gap: 6px; }
  .act { padding: 5px 10px; font-size: 12.5px; line-height: 20px; }

  /* ---------- 查询条件栏 / 工具栏 ---------- */
  .toolbar { padding: 8px 10px; gap: 6px; }
  .toolbar .sp { display: none; }                    /* 手机上不需要撑开，让按钮自然换行 */
  .btn { height: 40px; padding: 0 13px; font-size: 14px; }
  .btn.mini { height: 32px; padding: 0 10px; font-size: 13px; }
  .inp, .sel { height: 40px; font-size: 16px; min-width: 0; }   /* 16px 以下 iOS 会自动放大整个页面 */
  .field { width: 100%; flex-wrap: wrap; }
  .field > label { flex: 0 0 auto; }
  .field .inp, .field .sel { flex: 1; }
  .chk { padding: 6px 0; }
  .chk input { width: 18px; height: 18px; }

  .cond-bar { padding: 8px 10px; }
  .cond-row, .cond-more { gap: 6px; }
  .cond-row .inp, .cond-more .inp, .cond-row .sel, .cond-more .sel { flex: 1 1 128px; min-width: 0; }
  .cond-bar .sp { display: none; }

  /* ---------- 表单：单列 ---------- */
  .form-grid { grid-template-columns: 1fr !important; gap: 10px; }
  .form-grid .f.wide, .form-grid .f.full { grid-column: 1 / -1; }
  .form-grid .f input, .form-grid .f select { height: 42px; font-size: 16px; }
  .form-grid .f textarea { height: 76px; font-size: 16px; }

  /* 保存条吸底：手机表单长，滚到底才看见「保存」很容易漏点 */
  .save-bar {
    position: sticky; bottom: 0; z-index: 5; background: #fff;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); gap: 10px;
    box-shadow: 0 -6px 16px rgba(0, 0, 0, .05); margin-bottom: -8px;
  }
  .save-bar .btn { flex: 1; height: 46px; justify-content: center; font-size: 15px; }

  .sum-bar { gap: 10px 16px; }
  .sum-bar .item { font-size: 12.5px; }
  .sum-bar .item b { font-size: 14.5px; }
  .items-bar { padding: 8px 10px 4px; gap: 8px; }
  .items-bar .sp { display: none; }

  /* ---------- 弹窗：底部抽屉 ---------- */
  .mask { align-items: flex-end; padding: 0; }
  .modal, .modal.wide, .modal.xwide {
    width: 100%; max-width: 100%; max-height: 92dvh;
    border-radius: 14px 14px 0 0;
  }
  .modal-h { padding: 12px 16px; flex-shrink: 0; }
  .modal-h .x { font-size: 20px; padding: 4px 8px; line-height: 1; }
  .modal-b { padding: 12px 14px; -webkit-overflow-scrolling: touch; }
  .modal-f {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    gap: 10px; flex-shrink: 0;
  }
  .modal-f .btn { flex: 1; height: 46px; justify-content: center; font-size: 15px; }

  /* ---------- 商品选择器 ---------- */
  .pk-filter { flex-wrap: wrap; gap: 8px; }
  .pk-filter .inp { flex: 1 1 100%; }
  .pk-filter select { flex: 1 1 calc(50% - 4px); height: 40px; font-size: 16px; }
  .pk-count { flex: 1 1 100%; text-align: right; }
  .pk-tree { padding: 6px 8px; }
  .pk-lb { flex: 0 0 46px; font-size: 11.5px; }
  .pk-chips { gap: 5px; }
  .chip { padding: 6px 11px; font-size: 12.5px; }
  .pk-tbl { max-height: 50dvh; }
  .pk-tbl table { min-width: max-content; }
  .pk-tbl td.pk-name { max-width: 170px; }
  .pk-tbl .atag { max-width: 96px; }

  /* ---------- 分页 ---------- */
  .pager { justify-content: center; gap: 5px; padding: 10px 8px; flex-wrap: wrap; }
  .pager .pg { min-width: 36px; height: 36px; }

  /* ---------- 下拉菜单（批量操作等） ---------- */
  /* 桌面端是 absolute 挂在按钮下，手机上按钮靠近右边缘时菜单会被切掉；
     改成 fixed 贴底铺开，既不会溢出，也正好落在拇指区。 */
  .pop {
    position: fixed; left: 10px; right: 10px; top: auto;
    bottom: calc(10px + env(safe-area-inset-bottom)); min-width: 0;
    border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  }
  .pop a { padding: 12px 16px; font-size: 14.5px; }

  /* ---------- 栏位设置 / 列设置 ---------- */
  .colset-list li { padding: 9px 10px; }
  .colset-list li .colset-op b { width: 30px; height: 30px; line-height: 28px; }

  /* ---------- 图表：保持可读，允许横滑 ----------
   * 首页趋势图是按 1060×190 画的桌面宽幅 SVG。等比缩到 350px 宽后，
   * 里面的 11px 刻度文字只有 3.6px，等于看不见。
   * 所以不缩，改成容器横滑 —— 手指左右拖看完整趋势，刻度保持原尺寸清晰。 */
  .chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chart-wrap > svg { min-width: 700px; }
  .legend { justify-content: flex-start; flex-wrap: wrap; gap: 10px; }

  /* ---------- 登录页 ---------- */
  .login-card { width: 100%; margin: 0 14px; padding: 26px 20px 22px; }
  .login-card h1 { font-size: 19px; }
  .login-card input { height: 46px; font-size: 16px; }
  .login-card button { height: 48px; font-size: 16px; }

  /* ---------- 提示条 ---------- */
  #verbar {
    left: 10px; right: 10px; transform: none; border-radius: 10px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    justify-content: space-between; padding: 11px 14px;
  }
  #verbar a { padding: 4px 2px; }

  /* ---------- 底部主导航 ---------- */
  .mtab {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--line);
    padding: 3px 0 calc(3px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .07);
  }
  .mtab-item {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; padding: 4px 2px; min-height: 52px;
    color: #8a94a0; cursor: pointer; position: relative;
    -webkit-tap-highlight-color: transparent; user-select: none;
  }
  .mtab-item svg { width: 22px; height: 22px; }
  .mtab-item span { font-size: 10.5px; line-height: 1.2; }
  .mtab-item.on { color: var(--blue); }
  .mtab-item.on span { font-weight: 600; }
  .mtab-item.on::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 24px; height: 2.5px; border-radius: 0 0 3px 3px; background: var(--blue);
  }
  .mtab-item:active { background: #f7fbff; }

  /* ---------- 「更多」页 ---------- */
  .more-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================== 窄屏手机（≤ 380px，iPhone SE / 小屏安卓）
 * 4 列九宫格在 320–375px 上每个格子只剩 80px，两字标题就要换行；
 * 降到 3 列，宽度换给可读性。 */
@media (max-width: 380px) {
  .more-grid { grid-template-columns: repeat(3, 1fr); }
  .more-cell span { font-size: 10.5px; }
  .mtab-item span { font-size: 10px; }
}

/* ============================== 手机横屏：纵向空间被压扁
 * 底部栏 58px 在 393px 高的横屏里占掉 15%，压到 46px；
 * 顶栏也收紧，让表格多一行可见。 */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .content { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
  .mtab-item { min-height: 42px; flex-direction: row; gap: 5px; padding: 3px 2px; }
  .mtab-item svg { width: 17px; height: 17px; }
  .mtab-item span { font-size: 11px; }
  .mtab-item.on::before { display: none; }
  .topbar { min-height: 40px; padding: 4px 10px; }
  .tabbar { height: 34px; flex: 0 0 34px; }
}

/* ============================== 触屏设备（不限宽度，如 iPad Pro / Surface）
 * 鼠标设备有 hover 预览，触屏没有 —— 光标移上去才出现的操作在触屏上等于不存在。 */
@media (hover: none) and (pointer: coarse) {
  /* 输入框字号兜底 —— 这一段是给 iPad 补的。
   * iOS Safari 的规则是「输入框字号 < 16px 就把整个页面放大」，而桌面样式
   * (style.css) 把 .inp/.sel/登录框都定成 13px。手机断点 (max-width:767px) 里
   * 已经统一改成 16px 了，但**平板落在 768–1199px 区间、拿的是桌面字号**，
   * 于是 iPad 上点任何一个输入框都会整页放大，输完还要手动缩回去。
   * 所以这里按「是否触屏设备」兜底、而不是按宽度 —— iPad mini 到 iPad Pro
   * (768 / 820 / 1024 / 1180 / 1366) 全部覆盖，也不影响桌面鼠标环境。
   * 用 :not() 排掉勾选框：它们的尺寸由 width/height 定，字号无意义。 */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    font-size: 16px;
  }

  /* 悬停才显示的操作，触屏上常显 */
  .items-tb .act, .act { opacity: 1; }
  /* 去掉点击时的灰色高亮块，改用背景色反馈 */
  .btn, .act, .tab, .rail-item, .chip, .pg { -webkit-tap-highlight-color: transparent; }
  .btn:active, .btn.pri:active { background: #eef4fd; }
  .btn.pri:active { background: var(--blue-d); }
}

/* ============================== 已安装为 App（PWA standalone）
 * 从主屏幕图标启动时没有浏览器地址栏，顶部直接顶到状态栏 —— 要自己让出安全区。
 * 浏览器里访问时不加这段，免得白留一条空。 */
@media (display-mode: standalone) {
  .topbar { padding-top: calc(6px + env(safe-area-inset-top)); }
  .rail { padding-top: calc(8px + env(safe-area-inset-top)); }
  #login { padding-top: env(safe-area-inset-top); }
  /* 已装成 App 就不再提示「添加到主屏幕」 */
  .pwa-install { display: none !important; }
}