/* 三端通用样式：基础重置 + 通用组件（按钮/表格/表单/弹层/提示） */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background: #f5f6fa;
  color: #333;
  font-size: 14px;
}

/* 收银端整体：**点哪儿都只响应点击，不落文本光标、也不出选中块**。
   现象：点表格文字/标签/商品名时会闪一个编辑光标（个别内核与兼容模式浏览器
   默认可点文本会落光标），看着像故障。
   为什么写在 body 这一层：这是**一整端的交互习惯**（收银端是应用不是文档），
   逐个元素列会一直漏 —— 之前就只改了收银台那一屏，别的页面照样闪。
   -webkit- / -ms- 前缀不能省：360、QQ 等兼容模式内核仍只认带前缀的写法。
   caret-color: transparent 是兜底：浏览器开了「光标浏览」(F7) 时 user-select 拦不住光标，
   只有改光标颜色能让它不可见。
   ⚠️ 下面**必须**给输入控件单独放开，否则搜索框/表单里选不中、改不了字。 */
body {
  user-select: none; -webkit-user-select: none; -ms-user-select: none;
  caret-color: transparent;
}
/* 要选字、要光标的地方单独放开（输入控件、以及小票上要复制单号的区域） */
input, textarea, .receipt-print {
  user-select: text; -webkit-user-select: text; -ms-user-select: text;
  caret-color: auto;
}

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 18px; border: none; border-radius: 6px;
  font-size: 14px; cursor: pointer; transition: opacity .15s;
  background: #4a7cf7; color: #fff; white-space: nowrap;
}
.btn:hover { opacity: .85; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: #4a7cf7; color: #fff; }
.btn-success { background: #22a06b; color: #fff; }
.btn-danger { background: #e5484d; color: #fff; }
.btn-ghost { background: #fff; color: #555; border: 1px solid #d5d9e0; }
.btn-sm { padding: 4px 10px; font-size: 13px; border-radius: 4px; }
.btn-lg { padding: 12px 30px; font-size: 16px; border-radius: 8px; }
.btn-block { width: 100%; }

/* 表单 */
.input, .select, .textarea {
  width: 100%; padding: 8px 12px; border: 1px solid #d5d9e0;
  border-radius: 6px; font-size: 14px; outline: none; background: #fff;
}
/* 表格单元格里的输入框（数量、进货价、实盘数）：**上下留白收一半**。
   默认的 8px 会让格子高出一大截 —— 实测盘点表的行高 55px，而同一页的库存列表只有 38px，
   两张表挨着看就是"盘点表被撑胖了"（用户 2026-09-20 提的）。
   横向上也收一点：单元格本身已有 12px 内边距，再叠 12px 太浪费。
   另外数字输入框自带上下箭头（占 ~14px），所以**写死宽度时要按"位数 + 箭头"留够**：
   实盘数 4 位数只给 70px 会被箭头挤掉后一位（用户实测撞到）。 */
.input-sm { padding: 3px 6px; }
.input:focus, .select:focus, .textarea:focus { border-color: #4a7cf7; }
.label { display: block; margin-bottom: 6px; color: #666; font-size: 13px; }
.form-row { margin-bottom: 14px; }

/* 表格 */
.table { width: 100%; border-collapse: collapse; background: #fff; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eef0f3; font-size: 13px; }
.table th { background: #f8f9fb; color: #666; font-weight: 600; white-space: nowrap; }
.table tr:hover td { background: #f7faff; }
.table .num { text-align: right; }

/* 「行高统一」（2026-09-23 用户定，方向是**统一增高**）。
   为什么需要：同一张表里，**有按钮的行是 48px、没按钮的只有 38~41px** ——
   `.btn-sm` 是 inline-flex + 上下各 4px padding，行盒天生比一行纯文字高约 7px。
   于是「操作记录」（只有入库/调拨行带「详情」按钮）、「员工管理」（只有非管理员行
   带按钮）同一张表里两种行高；翻页时每页总高度不一样，整页会跳。
   48px 就是"一行里放一颗 .btn-sm 按钮"的高度（13px 字 + 上下 4px padding + 边框），
   取它等于让**没有按钮的行补齐到有按钮的行**。
   ⚠️ `height` 在表格里是**最小高度**：内容换行成两行的行仍会比 48px 高。
   这条只负责"把偏矮的行补齐"，不负责压住会换行的长内容 —— 要让长文本也恒定
   得靠截断（`.cell-clip`）；而商品名那类按约定本就该换行（见 stock.js 的说明），
   所以这里**不能**用 white-space:nowrap 一刀切。 */
.table tbody td { height: 48px; }

/* 「表格里有输入框」的表：列宽锁死，打字时格子不许动（2026-09-20 用户提的）。
   不锁会怎样：`.table` 是 width:100% + 浏览器默认的自动列宽，左右又顶着容器宽度 ——
   格子里的内容一变长（数量从 1 敲成 8888888、进价多个零），浏览器就得**重新分配所有列宽**，
   于是整张表都在动（实测入库表：167/167/288/167/167/167 → 133/215/199/182/274/122）。
   入库存货是照着小票一位一位敲数字的，格子跟着动很容易看串行、敲错格。

   判据（**什么时候该加 `table-fixed`**）：这张表里有人要下手打字的 `<input>` / `<select>`
   就加 —— 内容是自动出来的（金额、单号、状态）不会因为打字而变化，也就不会带动列宽。

   写法：**其余列全写死像素，只留一列「可伸缩」不给宽度** —— 固定布局下
   **没写宽度的列拿到的就是剩余宽度**（拿商品名这种长短不一的文本列去伸缩）。
   实测（600px 的表、另两列各 100px）：
     · 那一列不写宽度 → 399 / 100 / 100  ← 正确，剩余的全给了它
     · 那一列写 `width:100%` → 同样 399 / 100 / 100（等效，但语义绕，选不写）
     · 那一列写 `width:0` → 67 / 266 / 266 ← **错**！浏览器把它当"最小内容宽度"，
       剩余宽度平分给了另外两列（这个坑实测踩过，别再用 width:0）
   商品名那列用 `class="flex-wrap"` 并**写死宽度**（220px ≈ 15 个汉字，
   2026-09-20 用户定）：长了换行显示、不截断，但**不许无限变宽**。
   ⚠️ 别把它当"吃掉剩余宽度"的可伸缩列 —— 那样在宽屏上会拉出几百像素的空白
   （用户实测反馈"入库单和调拨单太宽了，商品名那里不用留这么宽"）。
   ⚠️ 也别指望"全都写死宽度"就能让表格收窄：`table-layout: fixed` 下浏览器会按各列
   给定的**比例**把列拉满 `width:100%`，多出来的宽度仍然会分给所有列。
   要让表格真的变窄，得让 table 自己不满宽（`width:max-content`），那是另一回事。 */
/* 列宽必须能**同时**满足三件事（2026-09-20 反复试出来的，别只改一半）：
   ① 打字时格子不动 → 只有 `table-layout: fixed` 做得到。自动布局试过：商品列随内容
      从 412px 变到 385px，"敲数字列会动"的老毛病又回来了。
   ② 表格要填满卡片 → 表格宽度保持 `.table` 的 `width:100%`。试过 `width:max-content`
      （按内容定宽、表只有 932px）：用户立刻发现"明细表格比总体宽度小了很多"，
      表头灰底到右边就断，表格像浮在卡片里的一块。
   ③ 商品列别太宽 → 因为①+②，浏览器会按各列给定宽度的**比例**把余量摊给每一列，
      所以**各列宽度要配成"加起来 ≈ 整表宽度（约 1124px）"**，商品列 240px 才会
      原样显示（配小了会被摊大：曾出现 220px 被摊成 362px；配大了要横向滚动）。
   ⚠️ 换列/加列时记得重算这组宽度（入库补 340px 让每列都够用，其余表按内容配）。

   **弹窗里的明细表另有一套更省事的做法**（2026-09-20 定，见 inbound-detail.js）：
   给弹窗写死 `width`（不能只用 min-width —— 那样弹窗宽度会被表格内容反过来撑开，
   实测 680px 的弹窗被撑到 1229px），再让「列宽加起来 = 弹窗宽 − 左右内边距」，
   列宽就 1:1 原样生效、不用配那个比例。 */
.table-fixed { table-layout: fixed; }
.table-fixed .fx { overflow-wrap: anywhere; }   /* 超长商品名（连成一个长串）也能断开 */

/* 卡片 */
.card { background: #fff; border-radius: 10px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }

/* 弹层 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal { background: #fff; border-radius: 12px; min-width: 420px; max-width: 90vw; max-height: 88vh; overflow: auto; }
.modal-head { padding: 16px 20px; border-bottom: 1px solid #eef0f3; font-size: 16px; font-weight: 600; display: flex; justify-content: space-between; }
.modal-body { padding: 20px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid #eef0f3; text-align: right; }
.modal-close { cursor: pointer; color: #999; font-size: 18px; }
.modal-close:hover { color: #333; }

/* 提示 */
.toast {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%) translateY(-20px);
  background: #333; color: #fff; padding: 10px 22px; border-radius: 8px;
  opacity: 0; transition: all .25s; z-index: 999; font-size: 14px; max-width: 80vw;
}
.toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-ok { background: #22a06b; }

/* 空状态 */
.empty { text-align: center; color: #aaa; padding: 40px 0; font-size: 14px; }

/* 分页 */
.pager { display: flex; align-items: center; gap: 8px; margin-top: 14px; justify-content: flex-end; font-size: 13px; color: #666; }

/* 滚动条 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #ccd2da; border-radius: 3px; }