/* ==========================================================================
 * WMS-Lite 移动端 H5 适配样式（纯增量，桌面端零影响）
 *
 * 设计约束：
 *   1. 除 `.mobile-tabbar` / `#bind-page` 两个「本次新增元素」的基础样式外，
 *      所有规则一律包在 @media (max-width:768px) 内，绝不覆盖桌面样式。
 *   2. 本文件在 index.html 中「晚于 style.css」引入，等特异性时后者优先，
 *      因此仅在需要压过页面 JS 写死的「行内样式」时才使用 !important。
 *   3. 绝不覆盖由 JS 动态切换的 display（如 .app / #login-page / [data-perm]），
 *      否则会破坏登录态切换与权限显隐逻辑。
 * ========================================================================== */

/* ---------- 新增元素基础态（桌面端：底部 Tab 栏永久隐藏） ---------- */
.mobile-tabbar { display: none; }

/* ---------- 微信绑定页 /bind（桌面/移动通用，由 JS 切 display:flex） ---------- */
#bind-page {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
  padding: 16px;
}
#bind-page .bind-sub {
  font-size: 13px;
  color: var(--tx2);
  margin: -12px 0 20px;
  line-height: 1.6;
}
#bind-page .bind-msg {
  font-size: 13px;
  margin-top: 10px;
  min-height: 18px;
}
#bind-page .bind-msg.err { color: var(--err); }
#bind-page .bind-msg.ok  { color: var(--ok); }

/* ==========================================================================
 * 移动端断点：<= 768px
 * ========================================================================== */
@media (max-width: 768px) {

  /* ---------- 1. 外壳：桌面侧栏收成 48px 顶栏，主区让位给顶栏/底栏 ---------- */
  /* 注意：不改 .app 的 display（JS 用行内 display 控制登录态显隐）。 */
  .app {
    padding-left: 0 !important;
  }

  /* 侧栏由「左侧 210px 竖栏」变为「顶部 48px 横栏」：
     导航树整体隐藏（导航改由底部 Tab 承载），仅保留 Logo 与用户/退出，
     以免移动端无处退出登录。 */
  .sidebar {
    width: auto !important;
    right: 0;
    height: 48px !important;
    flex-direction: row !important;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  }
  .sidebar h1 {
    flex: 1;
    min-width: 0;
    height: 48px;
    font-size: 15px;
    border-bottom: none;
    background: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sidebar .nav {
    display: none !important;   /* 桌面侧栏导航树在移动端隐藏 */
  }
  .sidebar-user {
    flex: 0 0 auto;
    width: auto;
    height: 48px;
    padding: 0 12px;
    border-top: none;
    background: transparent;
    gap: 8px;
  }
  .sidebar-user .username {
    flex: 0 1 auto;
    max-width: 84px;
    margin-right: 0;
    font-size: 12px;
  }
  .sidebar-user .logout-btn {
    min-height: 32px;
    padding: 4px 8px;
    white-space: nowrap;
  }

  /* 主内容区：顶部避开 48px 顶栏，底部避开 56px Tab 栏（含 iPhone 安全区）。
     先写不含 env() 的兜底值，再用 env() 覆盖：若浏览器不认识 env()，
     整条声明会被丢弃而回落到兜底值，不会出现底部内容被 Tab 栏盖住。 */
  .main {
    padding: 60px 12px 76px;
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  /* ---------- 2. 底部固定 Tab 栏 ---------- */
  /* 显隐说明：整条栏在移动端显示；单个入口的显隐由 applyRoleVisibility()
     依据 [data-perm] 写行内 display 控制，与桌面 nav 完全同一套逻辑。 */
  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;                                        /* 不支持 env() 时的兜底 */
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #ffffff;
    border-top: 1px solid var(--bd);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
    z-index: 60;
  }
  .mobile-tabbar a {
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;             /* 触屏友好：整格可点 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    font-size: 11px;
    line-height: 1.2;
    color: var(--tx2);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s;
  }
  .mobile-tabbar a .tab-icon {
    width: 20px;
    height: 20px;
    stroke-width: 2;
  }
  .mobile-tabbar a.active { color: var(--c1); }          /* 主题色 #4f46e5 */
  .mobile-tabbar a:active { background: #f1f5f9; }
  .mobile-tabbar a .tab-text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---------- 3. 触屏友好：输入框 / 按钮 ---------- */
  /* font-size:16px 是 iOS Safari 不触发「聚焦自动放大」的最小值，
     需 !important 压过页面里写死的 font-size:12/13px 行内样式。 */
  .main input:not([type="checkbox"]):not([type="radio"]),
  .main select,
  .main textarea,
  .modal input:not([type="checkbox"]):not([type="radio"]),
  .modal select,
  .modal textarea,
  .login-form input,
  #bind-page input {
    min-height: 44px !important;
    font-size: 16px !important;
    width: 100%;
  }
  .main textarea,
  .modal textarea {
    min-height: 88px !important;
  }

  .btn,
  .btn-sm,
  .login-form .login-btn {
    min-height: 44px;
    font-size: 14px;
    padding: 10px 16px;
  }
  .btn-sm {
    padding: 8px 12px;
    font-size: 13px;
  }

  /* ---------- 4. 表单/筛选：单列堆叠 + 大点击区 ---------- */
  /* 覆盖 inventory.js / operation.js 里写死的 min-width:140px 等行内样式，
     使「入库 / 出库 / 库存查询 / 调拨 / 库位调整」在窄屏一律单列。 */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .form-group {
    width: 100% !important;
    min-width: 0 !important;
  }
  .form-group label {
    font-size: 13px;
  }

  .filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
  }
  .filter-bar > * {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* 筛选栏里的「查询 / 清除」按钮组：等分铺满一行 */
  .filter-bar .btn {
    flex: 1 1 0;
    justify-content: center;
  }
  /* 「&nbsp;」占位 label 在移动端无意义，收掉其高度 */
  .filter-bar .form-group > div[style*="flex"] {
    display: flex !important;
    gap: 8px;
    width: 100%;
  }

  /* 页面内联 flex 行（如入库页搜索行、库位调整页筛选行）统一允许换行堆叠 */
  .main > div[style*="flex"],
  .card > div[style*="flex"] {
    flex-wrap: wrap !important;
  }
  /* 入库页 #ti-kw 之类 flex:1 的裸输入框，独占一行 */
  .main > div[style*="flex"] > input,
  .card > div[style*="flex"] > input {
    flex: 1 1 100% !important;
  }

  /* 页头：标题与操作按钮上下堆叠，按钮铺开便于点按 */
  .page-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
    margin-bottom: 14px;
  }
  .page-header h2 {
    font-size: 18px;
  }
  .page-header > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px;
  }
  .page-header .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* ---------- 5. 表格：横向滚动，不挤压不换行 ---------- */
  .card {
    overflow-x: auto !important;          /* 压过 style.css 的 overflow:hidden */
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    margin-bottom: 14px;
  }
  .card > div[style*="overflow"] {
    -webkit-overflow-scrolling: touch;
  }
  .card table {
    min-width: 640px;                     /* 低于此宽度即出现横向滚动条 */
  }
  .card .sgrid {
    min-width: 0;                         /* 货架可视化网格自适应，不参与横滚 */
  }
  th, td {
    padding: 9px 12px;
    font-size: 12.5px;
  }
  .card-header {
    padding: 12px 14px;
    font-size: 14px;
  }

  /* ---------- 6. 统计卡 / 弹窗 / 登录卡 ---------- */
  .stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  .stat-card { padding: 14px; }
  .stat-card .value { font-size: 22px; }

  /* showModal() 用行内样式写死 width/maxWidth，必须 !important 才能压过 */
  .modal {
    width: 94vw !important;
    max-width: 94vw !important;
    max-height: 88vh;
    padding: 18px 16px;
    border-radius: 12px;
  }
  .modal h3 { font-size: 16px; }
  .modal-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .modal-actions .btn {
    flex: 1 1 120px;
    justify-content: center;
  }

  .login-card {
    width: 100% !important;
    max-width: 360px;
    padding: 28px 20px;
  }
  .login-card h1 { font-size: 18px; }

  /* ---------- 7. 表单多列 grid 降列 + 流向独占行 + Dashboard 紧凑化 ----------
     v1+v2 合并：仅针对 operation.js / dashboard.js 行内写死的 grid 做窄屏降列，
     纯视觉调整，不碰任何 .js 逻辑。所有选择器均带 !important 以压过行内 style。 */

  /* 7a. Dashboard hero-card 紧凑化（顶部留白过多） */
  .hero-card {
    padding: 16px 18px !important;
    border-radius: 14px !important;
  }
  .hero-title    { font-size: 17px !important; }
  .hero-subtitle { font-size: 13px !important; }
  .hero-date     { font-size: 12px !important; margin-top: 4px !important; }

  /* 7b. Dashboard 统计卡间距优化（数字/图标/网格 gap） */
  .dash-grid   { gap: 12px !important; }
  .stat-value  { font-size: 24px !important; }
  .stat-icon   {
    width: 40px !important; height: 40px !important;
    font-size: 20px !important; margin-bottom: 8px !important;
  }

  /* 7c. 三列 grid → 两列；第 3 个子元素（流向字段 / 查询按钮）独占整行
     ⚠️ 必须用 :not() 排除四列 grid —— [style*="...1fr 1fr 1fr"] 是子串匹配，
     会误命中 "1fr 1fr 1fr 1fr"（产品明细行），导致 nth-child(3)=生产日期 被强制跨整行。 */
  .modal [style*="grid-template-columns:1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]),
  .main  [style*="grid-template-columns:1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]) {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .modal [style*="grid-template-columns:1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]) > *:nth-child(3),
  .main  [style*="grid-template-columns:1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]) > *:nth-child(3) {
    grid-column: 1 / -1 !important;
  }
  /* 7c-fix. 三列 grid 降两列后，form-group 也需复位 width */
  .modal [style*="grid-template-columns:1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]) .form-group,
  .main  [style*="grid-template-columns:1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]) .form-group {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0%;
  }

  /* 7d. 产品明细四列 grid → 两列（品名/规格 | 生产日期/批次） */
  .modal [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  .main  [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  .modal [style*="grid-template-columns: 1fr 1fr 1fr 1fr"],
  .main  [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  /* 7d-fix. 关键：覆盖全局 .form-group{width:100%!important}，让 grid 子项真正并排 */
  .modal [style*="grid-template-columns:1fr 1fr 1fr 1fr"] .form-group,
  .main  [style*="grid-template-columns:1fr 1fr 1fr 1fr"] .form-group,
  .modal [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] .form-group,
  .main  [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] .form-group {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0%;
  }

  /* 7e. 待入库/每库位 两列+auto → 两列并行（hint 文字跨整行） */
  .modal [style*="grid-template-columns:1fr 1fr auto"],
  .main  [style*="grid-template-columns:1fr 1fr auto"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .modal [style*="grid-template-columns:1fr 1fr auto"] > *:nth-child(3),
  .main  [style*="grid-template-columns:1fr 1fr auto"] > *:nth-child(3) {
    grid-column: 1 / -1 !important;
  }
  /* 7e-fix. 两列+auto grid 内 form-group 复位 */
  .modal [style*="grid-template-columns:1fr 1fr auto"] .form-group,
  .main  [style*="grid-template-columns:1fr 1fr auto"] .form-group {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0%;
  }

  /* 7f. 卡片间呼吸感微调（下方太紧凑） */
  .card { margin-bottom: 16px !important; }

  /* 7g. Dashboard 核心指标卡 → 2×2 网格（原 auto-fit 在窄屏退化成单列堆叠） */
  .dash-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .dash-stats .stat-value { font-size: 20px !important; }
  .dash-stats .stat-label { font-size: 12px !important; }
  .dash-stats .stat-trend { font-size: 11px !important; }
  .dash-stats .stat-icon {
    width: 36px !important; height: 36px !important; font-size: 18px !important; margin-bottom: 6px !important;
  }

  /* 7h. Dashboard 两列并排区（今日出入库|本月概览、本年累计|平台分布）
        精准匹配 dash-grid 内的行内 "1fr 1fr" → 强制单列上下堆叠 */
  .dash-grid [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* 7i. 出库「库存分布」**主界面**表格 → 横向滚动（5列：日期/批次/仓库/库存/操作放不下）
     ⚠ v7 关键修正 —— 主界面与子界面共用同一个容器，不能靠容器 id 区分：
        operation.js 中 `#to-dist-list` / `#eto-dist-list` 这个 div（L1058 创建）会被
        4 处 innerHTML **原地替换内容**：
          · L1159 _searchInv()   → 主界面「库存分布」表（需要横滑）
          · L1346 toFastOut()    → 子界面「快速出库」（不横滑）
          · L1578 toSelGroup()   → 子界面「手动选库位」（不横滑）
          · L1760 etoSelGroup()  → 编辑态子界面「选库位」（不横滑）
        即 `[id$="-dist-list"]` 与 `[id^="to-dist-list"]` 命中的是**同一个元素**，
        旧 7n 的 `[id^="to-dist-list"] table` 因排在后面且同特异性，把主界面表的
        min-width 也压成 0 → 主界面不再横滑（本次问题3 的真正根因）。
        唯一可靠的区分点是表格自身：主界面表内联样式带 `table-layout:fixed`，
        三个子界面表都不带。属性选择器读的是 **style 属性字符串**，
        因此即便后续覆盖 computed table-layout 也不影响匹配。 */
  [id$="-dist-list"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  [id$="-dist-list"] > table[style*="table-layout:fixed"] {
    min-width: 560px !important;   /* > 容器宽度即产生溢出，由容器 overflow-x 承担横滑 */
    width: 100% !important;
  }
  /* 表头保持单行；单元格内容（仓库列的库位徽标）仍按 fixed 的 35% 列宽正常换行 */
  [id$="-dist-list"] > table[style*="table-layout:fixed"] th {
    white-space: nowrap !important;
  }

  /* 7j. 新建入库·立体库 生成明细行表格 → 横向滚动（5列：#/库位/件数/状态/操作在窄屏放不下） */
  [id$="-lines"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  [id$="-lines"] table {
    min-width: 460px !important;
  }

  /* 7k. 新建出库 操作按钮（快速出库/手动选库位）→ 水平并排自适应，不再竖向分散 */
  .ob-act-btns {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center;
  }
  .ob-act-btns .btn {
    flex: 1 1 auto;
    min-width: 84px;
    font-size: 12px !important;
    padding: 5px 6px !important;
  }

  /* 7l. pile-section（平面库：入库件数+单托数量+上下叠加）flex 子项 form-group 复位 */
  [id$="-pile-section"] .form-group {
    width: auto !important;
    min-width: 0 !important;
  }
  [id$="-pile-section"] > div {
    flex-wrap: nowrap !important;
  }

  /* 7m. 出入库列表表格：取消 sticky 锁定首尾列，改为整体横向滑动 */
  .inbound-table .sticky-left,
  .inbound-table .sticky-right,
  .outbound-table .sticky-left,
  .outbound-table .sticky-right {
    position: static !important;
  }
  .inbound-table,
  .outbound-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .inbound-table table,
  .outbound-table table {
    min-width: 600px !important;
  }

  /* 7n. 出库「快速出库 / 手动选库位」**子界面**表格：字段少（2~3列），不需要横滑。
     与 7i 的关系：两条规则靠「表格有无内联 table-layout:fixed」互斥匹配，
     结构上不可能同时命中同一个 <table>，因此与书写顺序、特异性无关，永不打架。
       · 主界面表  #xx-dist-list > table[style*="table-layout:fixed"]  → 7i（min-width:560px，横滑）
       · 子界面表  #xx-dist-list > table:not([...fixed])               → 7n（min-width:0，不横滑）
       · 子界面里嵌在 div 内的表（如 #to-fast-preview 分配预览）        → 7n（同样不横滑）
     注意：这里**不再动容器的 overflow-x**。容器 overflow-x 由 7i 统一设为 auto，
     子界面因内容不溢出而自然不出现横向滚动条 —— 这比旧写法更可靠：
     旧的 `overflow-x:visible` 配上容器行内的 `overflow-y:auto`，按 CSS 规范
     visible 会被强制计算成 auto，本就没有真正生效过。 */
  [id$="-dist-list"] > table:not([style*="table-layout:fixed"]),
  [id$="-dist-list"] > div table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: auto !important;
  }

  /* ---------- 7o. 按钮文字强制单行，不因 flex 挤压折行导致按钮变形 ---------- */

  /* 7o. 文字本身不换行（问题1「+ 增加一行」、问题2「取消 / 确认入库」） */
  .btn,
  .btn-sm {
    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  /* 7o-1. 仅 nowrap 不够：按钮若仍被 flex 压缩，文字会溢出按钮框，看着照样"变形"。
           故对两处肇事 flex 行补「按钮不参与压缩」。
           问题1：operation.js L426 —— `+ 增加一行` 与其后那段长说明文字同处一个
           `display:flex` 行，长文本把按钮挤扁。让按钮保持固有宽度，说明文字换行。 */
  [id$="-lines"] > div[style*="flex"] {
    flex-wrap: wrap !important;
  }
  [id$="-lines"] > div[style*="flex"] > .btn {
    flex: 0 0 auto !important;
  }

  /* 7o-2. 问题2：operation.js L129/L1064 弹窗底部汇总条
           `合计：N 件` + `[取消][确认入库]`，用 justify-content:space-between 排布。
           窄屏总宽不够时按钮组被压缩 → 按钮文字折行变形。
           这里只加 flex-wrap：按规范换行判定用的是子项**未被压缩的**假定尺寸，
           所以空间不足时按钮组会整体换到下一行并保持固有宽度，而不是被压扁；
           空间够时 wrap 不产生任何视觉变化 —— 对其余弹窗内的 space-between 行零影响。 */
  .modal div[style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 8px;
  }

  /* 7p. 平台调拨弹窗移动端适配（源/目标平台 + 查找物料/已选物料 窄屏堆叠） */
  /* 7p-1. 源平台/目标平台 两列 grid → 单列堆叠。
     调拨弹窗写死 "grid-template-columns:1fr 1fr"（冒号后无空格），与 7h 的
     "grid-template-columns: 1fr 1fr"（有空格）是不同子串，互不命中；
     用 :not() 排除 3/4 列网格，避免误伤 modal 内其它 grid。 */
  .modal [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  .main  [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]) {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* 7p-2. 查找物料 / 已选物料 左右 flex → 上下堆叠；容器 min-height 复位，
     两个子面板各占整行并给最小高度保证可点/可滚。 */
  .modal [style*="min-height:420px"] {
    flex-direction: column !important;
    gap: 12px !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }
  .modal [style*="min-height:420px"] > div {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 160px !important;
  }
  /* 7p-3. 左面板内"品名+规格+查询"行允许换行，避免窄屏挤压 */
  .modal [style*="display:flex;gap:8px;margin-bottom:10px"] {
    flex-wrap: wrap !important;
  }
  .modal [style*="display:flex;gap:8px;margin-bottom:10px"] > .form-group {
    flex: 1 1 45% !important;
    min-width: 0 !important;
  }

  /* 全局 toast 在窄屏改为顶部居中，避免遮挡右上角操作。
     showToast() 用 cssText 写死 top/right，故必须 !important。 */
  #global-toast {
    left: 12px !important;
    right: 12px !important;
    top: 60px !important;
    justify-content: center !important;
  }
}