/* 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)); }

/* ── 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; }