/* PDA 工位 UI 基线（覆盖层）。
 *
 * ⚠ 这个文件只做**视觉**调整：字号、触控区、对比度、间距、按压反馈。
 *   不改 display / position / grid 结构，不碰任何 DOM 和 JS ——
 *   现场作业系统，功能出问题的代价远大于界面好看一点。
 *   加在各页内联 <style> 之后加载，靠同权重后置覆盖。
 *
 * 为什么要调（不是审美问题，是现场用不了的问题）：
 *   · 手套操作 + 手持距离 60cm + 仓库顶灯逆光
 *   · 底部导航原来只有 ~30px 高，一天点几百次，误触率高
 *   · 11px 的说明文字在货架间根本看不清
 *   · 「规划中」磁贴 opacity .55 → 对比度掉到 2.7:1，低于 WCAG 4.5:1
 *
 * 参考：WCAG AA（对比 4.5:1）、Apple HIG（触控 44pt）、Material（间距 8dp）
 */

/* ── 1. 触控区：所有点得到的东西都补到 44px ───────────────────────
 * 只加 min-height 和垂直 padding，不动 display/position，
 * 所以不会改变任何布局流。 */
footer.nav {
  /* 全面屏手势条会盖住底部导航 —— 加安全区内边距 */
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
}
footer.nav a {
  min-height: 44px;
  display: flex;              /* 原来是块级；改 flex 才能垂直居中撑高的内容 */
  align-items: center;
  justify-content: center;
  gap: 6px;                   /* 图标和文字同行 —— 不能用 column：
                                 有的页面导航项带图标、有的不带（各页 HTML 本来就不一致），
                                 上下排列会让两种项的文字基线错开，一眼就看出来歪。 */
  font-size: 14px;            /* 13 → 14 */
  border-radius: 10px;
  transition: background .12s ease;
}
footer.nav a i[data-icon] { width: 18px; height: 18px; }
footer.nav a:active { background: var(--card-active, #f1f5f9); }

/* 顶部语言/退出这类小药丸按钮 */
header .lang-btn,
header .logout,
header .who {
  min-height: 40px;           /* 顶栏空间紧张，40 是能接受的下限（非高频） */
  display: inline-flex;
  align-items: center;
  font-size: 14px;
}

/* main 底部留白要跟着 footer 变高一起加，否则最后一行被导航盖住 */
main { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
/* ⚠ 上面这行会【覆盖页面自己写的 main{padding-bottom}】—— 本文件后加载，而两边都是
   main 元素选择器、特异性相同，后者胜。全站 18 个页面都在内联样式里写了自己的下边距，
   其中声明大于 84px 的那些（120px / 90px）实际一个都没生效。
   页面若有固定在底部的操作条（.binbar 之类），84px 挡不住，最后一行控件会被盖住、
   滚到底也露不出来。需要更多留白的页面请写 `body main{padding-bottom:...}` 提一级特异性，
   别在本文件里按页面开特例。已这么处理的：basket-putaway.html / receive.html / inbound-exception.html。 */

/* ── 2. 字号：把低于可读下限的提上来 ──────────────────────────
 * 不一刀切提到 16px —— 那会把两行截断的磁贴说明撑成三行、卡片高度全乱。
 * 提到「货架间能看清」的下限即可。 */
.tile .title      { font-size: 16px; }        /* 15 → 16 */
.tile .desc       { font-size: 13px; line-height: 1.4; }   /* 11 → 13 */
.tile .badge-row .badge { font-size: 12px; padding: 3px 9px; }  /* 10 → 12 */
header .badge     { font-size: 12px; padding: 4px 10px; }  /* 11 → 12 */
.section-h        { font-size: 12px; letter-spacing: .6px; }
.ver              { font-size: 12px; }

/* 字大了，磁贴要跟着长一点，否则两行说明会挤到边框 */
.tile      { min-height: 104px; padding: 14px; }
.tile.soon { min-height: 72px; }

/* ── 3. 对比度：WCAG AA 4.5:1 ────────────────────────────────
 * --muted #6b7280 在白底是 5.0:1，本身合格；
 * 问题出在叠了 opacity 的地方，有效对比会成倍衰减。 */
.tile.soon {
  opacity: 1;                 /* 原来 .55 → 有效对比 2.7:1，看不清 */
  background: var(--muted-bg, #f8fafc);
  border-style: dashed;       /* 用「虚线边框」表达「还没做」，而不是靠变淡 */
}
.tile.soon .title { color: #475569; }         /* 6.4:1 */
.tile.soon .icon  { color: #94a3b8; filter: none; }
/* 禁用态仍要能看清写的是什么 —— 只弱化交互暗示，不弱化信息 */
.tile.soon:active { transform: none; background: var(--muted-bg, #f8fafc); }

/* ── 4. 数字等宽：库存数/单号/计数在列表里不要跳 ────────────── */
.tile .badge-row .badge,
header .badge,
.num, .qty, .count, td, th {
  font-variant-numeric: tabular-nums;
}

/* ── 5. 键盘/读屏可达（PDA 有外接扫码枪和实体键盘的工位）────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent, #2563eb);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── 6. 按压反馈：手持设备没有 hover，必须有 active ────────────
 * 反馈要在 100ms 内出现，否则工人会以为没点上、连点两次。 */
.tile:active { transition-duration: .05s; }
button:active:not(:disabled),
.btn:active:not(:disabled) { transform: scale(.98); }

/* ── 7. 减少动效偏好 ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── 8. 窄屏（手持 PDA 多为 360~420px）───────────────────────
 * 两列磁贴在 360px 上每格只剩 ~165px，西语文案会挤成四行。
 * 窄屏改单列，一屏少看几个但每个都看得清。 */
@media (max-width: 420px) {
  .tile-grid { grid-template-columns: 1fr; gap: 8px; }
  .tile-grid.soon-grid { grid-template-columns: repeat(2, 1fr); }
  .tile { min-height: 88px; }
  main { padding-left: 10px; padding-right: 10px; }
}

/* 平板横屏（WS1/WS2/WS3 工位常接 10 寸平板）：两列太空，给三列 */
@media (min-width: 900px) {
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
  .tile-grid.soon-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── 9. 作业页：扫码框与内容宽度 ─────────────────────────────
 * 工位常接 10 寸平板甚至外接显示器，宽度一上去，
 * 扫码输入框被拉到 1100px+ —— 扫完一枪眼睛要横扫整屏才找得到光标和结果。
 * 给内容区一个阅读宽度上限并居中，跟一手拿枪一手扶设备的姿势匹配。 */
main { max-width: 880px; margin-inline: auto; width: 100%; }

/* 扫码输入是这套系统里最高频的控件，按 Apple HIG 的 44pt 下限给足 */
input[type="text"], input[type="search"], input[type="number"],
input:not([type]), select, textarea {
  min-height: 46px;
  font-size: 16px;            /* iOS 上 <16px 会触发聚焦自动放大，扫码时页面乱跳 */
}

/* 空状态：原来 12px 灰字贴在角落，像是加载失败而不是「本来就没有」 */
main > .empty, .empty, .none, .no-data {
  font-size: 14px;
  color: #64748b;             /* 4.9:1 */
  padding: 24px 12px;
  text-align: center;
}

/* 扫码/识别这类主操作按钮，触控区和输入框对齐 */
button, .btn { min-height: 44px; }

/* ── 5. 跨页视觉基线对齐（2026-09-11）───────────────────────────────
 * 各页的内联 <style> 是历史上一页一页写出来的，同一个东西有好几种写法：
 *   header h1 七种字号（14/16/17/18/19/20/22px）、卡片圆角五种（8/10/12/14/16px）、
 *   说明文字有的 10px 有的 11px。主页 home.html 是用户认可的基线，这里向它对齐。
 *
 * ⚠ 只改视觉，不改 display / position / grid，不碰 DOM 和 JS —— 同本文件开头的纪律。
 * ⚠ 本文件在各页内联 <style> **之后**加载，靠同权重后置覆盖，所以这里不用 !important。
 */

/* 标题：统一到主页的 20px/700。h1 本身不决定 header 实高 —— 撑高它的是里面最高的控件。
   ⚠ 这里原来写着「不会顶掉任何 sticky top 偏移」，那句话后来被证伪：
     触控区那一轮把注入的返回键定到 44px，header 从 56 长到 69，
     而 count-basket / pre-receive / basket-putaway 三页的 sticky 面板各自写死 56 / 65 / 65，
     结果面板顶部被 header 盖住 4~13px（2026-09-12 用户截图指出）。
     现在偏移改由 i18n.js 实测 header 高度写进 --pda-hdr，页面用 calc(var(--pda-hdr) + 4px)。
     ⇒ 以后往 header 里加控件不用再去追这些字面量，但也【不要】再往回写死值。 */
header h1 { font-size: 20px; font-weight: 700; letter-spacing: 0.3px; }

/* 正文字号下限。本文件开头就写着「11px 的说明文字在货架间根本看不清」，
   但那一版只提了几个具名类，各页自定义的说明类还散落着 10-11px。 */
.hint, .muted, .dec, .sub, .meta, .note, .desc, .tip,
.it .n, .task .nm, .bchip, .st, .badge, .chip {
  font-size: max(12px, 1em);
}

/* 卡片圆角：主页是 12px。8px 偏硬、14/16px 偏软，现场看是同一类东西却不一样圆。
   只收在 12-16px 这个区间内（craft floor 的建议），pill 类（999px）不受影响。 */
.card, .it, .box, .item, .ohdr, .opt, .tab, .warnbar, .binbar, .cam,
.back, .back-btn, .panel, .sec, .row-card {
  border-radius: 12px;
}

/* 校验提示的黄色态。此前 .hint 只有 ok / err 两态，
   「请先勾选要上架的行」这类校验提示只能借红色，语义偏重。
   黄底配深色字 —— 白字在 #f59e0b 上对比度仅 2.1:1，戴手套逆光看不清。 */
.hint.warn {
  background: #fef3c7;
  color: #78350f;
  border-color: #fcd34d;
}

/* 日期输入框：默认高度和字号跟左右的文本框对不齐（attendance / photos / ws3 都中招）。
   并进本文件原有的输入框规则里统一。 */
input[type="date"], input[type="datetime-local"], input[type="month"] {
  min-height: 46px;
  font-size: 16px;   /* iOS 上 <16px 会在聚焦时自动放大页面 */
}

/* ── 6. 按钮语义配色（2026-09-11）─────────────────────────────────
 * 各页历史上各写各的，同一类动作在不同页是不同颜色：
 *   「提交收货」绿、「完成拣货」蓝、「封板·推进待清点」蓝 —— 都是提交类主动作。
 *   摄像头按钮有 4 种写法：实心蓝 / 浅蓝 / 浅灰 / 内联 #eff6ff，
 *   最后那种挨着实心蓝的「查询」时看起来像禁用了（用户反馈）。
 *
 * 规则取自现有用法里占多数的那套，不是另起炉灶：
 *   绿 --ok      = 写操作、主动作（提交 / 执行 / 确认 / 开盘 / 登录）
 *   蓝 --accent  = 读操作与导航（查询 / 刷新 / 返回 / 切换）
 *   白底描边     = 取消 / 辅助 / 图标按钮
 *
 * ⚠ 只改颜色，不动 display / position / 尺寸，不碰 DOM 和 JS。
 */

/* 摄像头扫码：全站 13 页 24 个按钮，title 是唯一一致的抓手。
   ⚠ 选择器写成 [title="…"][title] 是为了提特异性到 (0,2,1)：
     return.html 和 ws2.html 给它套了页内的 .cam / .cam-open 类，(0,1,1) 会赢过
     单个属性选择器 (0,1,1) 中后写的那个——但它们在本文件之前加载，所以要更高一档。
     这么写不碰 DOM，比去各页改 class 安全。
   统一成白底 + 蓝描边 + 蓝图标的辅助样式 —— 它是输入框的附属动作，
   不该跟旁边的主按钮抢视觉，也不该浅到看着像禁用。 */
button[title="摄像头扫码"][title] {
  background: var(--card, #fff);
  border: 1px solid var(--accent, #2563eb);
  color: var(--accent, #2563eb);
  border-radius: 10px;
  min-width: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button[title="摄像头扫码"][title] i[data-icon] { width: 20px; height: 20px; }
button[title="摄像头扫码"][title]:active:not(:disabled) { background: var(--accent-bg, #eff6ff); }
/* 真禁用时才是灰的 —— 之前浅蓝底让「能点」和「不能点」看起来一样 */
button[title="摄像头扫码"][title]:disabled {
  background: #f1f5f9; border-color: var(--border, #e5e7eb); color: #94a3b8;
}

/* 提交类主动作补齐绿色：这几个是各页的「这一步做完」按钮，
   语义和已经是绿色的「提交收货 / 提交盘点 / 执行移库」同一类。
   用 id 精确命中，不误伤同页其它按钮。 */
/* 只收这两个：它们确实是本页「这一步做完」的终结动作，却是蓝色。
   inbound-exception 的「上报异常」没收 —— 它只是打开表单的入口，
   真正的提交是表单里的 #rsubmit，那个本来就是绿的，层级是对的。 */
#finishBtn,                 /* pick.html  完成拣货 */
#stageBtn {                 /* pre-receive.html  封板 · 推进待清点 */
  background: var(--ok, #16a34a);
  border-color: var(--ok, #16a34a);
  color: #fff;
}


/* ── 7. 未确认开通的入口（2026-09-11）──────────────────────────────
 * featGate 和 applyPerms 都在改同一个 style.display，形成竞态：
 *   applyPerms 对有权限的元素统一设 display=''  → 藏起来的入口被亮出来
 *   featGate 拿到 /api/tenant/info 再设回 none  → 又消失
 * 谁先到看网络，于是主页每次刷新磁贴数在 10/12/13/14/16 之间跳，
 * 最终结果都不一致，而且被亮出来的 /scan、/location-mgmt 在后端没有路由，
 * 点下去是 404 白页（2026-09-11 用户实测反馈）。
 *
 * 改用类来表达「还没确认开通」：!important 压得住 inline style，
 * featGate 只管加减这个类，applyPerms 照旧管权限那一维，两者不再互相覆盖。
 * 放在公共层而不是 home.html —— featGate 是全站跑的，别的页加了类也要有样式。
 */
.gated-off { display: none !important; }


/* ── 8. 入库优先级标签 ─────────────────────────────────────────────────────
   四档 P0~P3，档位由后端下发（见 backend/src/common/inbound-priority.ts），
   这里只管配色。别在页面里各自再写一份 .prio —— pre-receive.html 和
   count-basket.html 原本各有一份，且都只认 p1/p2 两档，P2-常规 和 P3-不急
   在手持机上一个标签都不显示，而 P2 正是默认档。 */
.prio{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;
      white-space:nowrap;vertical-align:middle;}
.prio.danger {background:#fee2e2;color:#b91c1c;}   /* P0 紧急 */
.prio.warning{background:#fef3c7;color:#b45309;}   /* P1 加急 */
.prio.info   {background:#e0e7ff;color:#3730a3;}   /* P2 常规 */
.prio.plain  {background:#e2e8f0;color:#475569;}   /* P3 不急 —— 11px 粗体在逆光下要够黑，原 #64748b/#f1f5f9 只有 4:1 */
.prio.none   {background:#f1f5f9;color:#94a3b8;}   /* 无优先级（空篮等哨兵） */

/* ── 9. 浏览器自带件 ──────────────────────────────────────────────────────
 * 选中高亮、光标、滚动条这些不是我们画的，但用户看得见，而浏览器默认值不属于
 * 任何设计系统 —— 一个蓝得发紫的选中块夹在这套灰蓝里，一眼就看得出是没人管过。
 * 这一节只改颜色，不改任何尺寸/布局。 */

/* 选中高亮。默认那个 #0000FF 系的蓝在本配色里过饱和，换成主色的浅色版，
   文字仍用深色保证选中状态下也读得清（白字在浅蓝上会糊）。 */
::selection      { background: #bfdbfe; color: #0f172a; }
::-moz-selection { background: #bfdbfe; color: #0f172a; }

/* 光标。默认黑色 —— 扫码枪打完一枪，工人要在一屏白底里找那根一像素的黑线。
   换成主色，跟聚焦描边同色，眼睛跟着同一个信号走。 */
input, textarea, select { caret-color: var(--accent, #2563eb); }

/* 滚动条。手持机上多是覆盖式滚动条看不见，但这些页面也在桌面浏览器里被用来
   看板/排查，那条默认的粗灰条跟界面毫无关系。只在支持的浏览器上变细、变淡。 */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
  border: 3px solid transparent;   /* 内缩，滑块看着比轨道细 */
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }

/* 数字对齐。单号、数量、库位这些天天要对着读，比例宽度下「1」比「8」窄一截，
   上下两行对不齐就得一个字一个字看。 */
input[type="search"], input[type="text"], input[type="number"], input[type="tel"],
.code, .mono, .num, .qty, .dec b, table td, table th {
  font-variant-numeric: tabular-nums;
}

/* ── 10. 语义色：白字压在上面时的对比度 ─────────────────────────────────
 * 每个页面的 :root 都定义了同一组 --ok / --warn / --err，而这三个既当按钮底色
 * （上面压白字）又当白底上的前景色。原值在白字下全部不达标：
 *     白字 on --ok  #16a34a = 3.30:1      白字 on --warn #ca8a04 = 2.94:1
 *     --err #dc2626 印在浅红药丸 #fee2e2 上 = 3.95:1
 * 都低于 4.5:1，而这是在仓库顶灯逆光下看的手持机。
 *
 * 本文件后加载、同为 :root 选择器 → 后者胜，一处改全站生效，不用动 35 个页面。
 * 只压暗，色相不动：绿还是绿、黄还是黄，现场认颜色的习惯不变。
 * 有的页面把危险色叫 --danger，两个名字都覆盖。 */
:root {
  --ok:     #15803d;   /* 白字 5.02:1（原 3.30） */
  --warn:   #a16207;   /* 白字 4.92:1（原 2.94） */
  --err:    #b91c1c;   /* 白字 6.47:1；浅红底上 4.86:1（原 3.95） */
  --danger: #b91c1c;
  /* 次要文字。原 #6b7280 在最常见的那几种浅色底（#f3f4f6 / #fef2f2 / #eff6ff）上
     是 4.39~4.44:1 —— 差 0.1 卡在线下。压到 #5f6673 全部过线，观感几乎无差别。 */
  --muted: #5f6673;
}

/* 表头灰：#6b7280 印在 #f3f4f6 上是 4.39:1，差一点点。压到 #4b5563 = 6.87:1。
   ⚠ 裸 th 会被页面的 `.xxx-table th` 压掉（类+元素 > 元素），所以这里也带一级类。
   页面里把颜色写死成十六进制的（不走 --muted 令牌）本文件够不着，只能逐个改。 */
th, table th, [class*="table"] th { color: #4b5563; }

/* 登录页那行提示（「忘记密码请联系管理员重置」）原来是 #94A3B8 = 2.56:1，
   16px 正文级别的字，等于印了个寂寞。 */
.tip { color: #64748b; }

/* ── 11. 补剩下的触控区 ─────────────────────────────────────────────────
 * 第 1 节补的是底部导航和主操作，这一节补审计扫出来的零散几处。
 *
 * ⚠ 刻意【不动】header .lang-btn 的 40px —— 第 1 节写明「顶栏空间紧张，40 是能
 *   接受的下限（非高频）」。那是当时权衡过的决定，不是漏网的缺陷。
 * ⚠ 也【不动】禁用态按钮的灰底灰字（ws2 保存提交）—— WCAG 明确豁免禁用控件，
 *   把它调亮反而看不出它是点不动的。 */

/* 返回按钮。agent / ws1 是 36×36、ws3 是 21×31、photos 只有 18×23 ——
   带手套点一个 18px 的「←」基本靠运气。跟 footer.nav a 同一套写法（第 1 节已有先例）。 */
.back-btn, a.back, .back {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 勾选框。原生 13×13，戴手套点不中。24px 是不把版面撑歪的前提下的上限；
   不去重构 label 的结构（那会动 display，超出本文件的职责边界）。 */
input[type="checkbox"], input[type="radio"] {
  width: 24px;
  height: 24px;
  accent-color: var(--accent, #2563eb);   /* 勾中时的颜色也归设计系统管 */
}

/* 下拉框。 */
select { min-height: 44px; }
/* 顶栏里的按 40px 走 —— 跟第 1 节给 .lang-btn 定的下限一致（顶栏空间紧张、非高频），
   不在这儿另立一个标准。home 的时区选择原来只有 28px，而它在工人每天开的第一屏上。
   带一级 header 提权：页面里写的是 `header .timezone-select{min-height:28px}`，
   裸 select 压不过它。 */
header select, header .timezone-select { min-height: 40px; }