/* ==========================================================
   移动端 H5 样式（基于 base.css 变量）
   约定：底部固定操作条适配 env(safe-area-inset-bottom)；
        输入框 font-size >= 16px 防 iOS 自动缩放；
        数字键盘用 inputmode="decimal"。
   ========================================================== */

body.m-body {
  padding-bottom: 62px;
  background: var(--c-bg);
}

.m-page {
  min-height: 100vh;
}

/* ---------- 顶部条 ---------- */
.m-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  background: linear-gradient(180deg, var(--c-primary) 0%, #1565C0 100%);
  color: #fff;
}

.m-header__title {
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}

.m-header__sub {
  margin-top: 2px;
  font-size: 12px;
  text-align: center;
  color: rgba(255, 255, 255, .82);
}

.m-header__user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.m-header__name {
  font-size: 16px;
  font-weight: 600;
}

.m-header__meta {
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255, 255, 255, .85);
}

.m-header__date {
  text-align: right;
  font-size: 12px;
  color: rgba(255, 255, 255, .85);
}

/* ---------- 区块 ---------- */
.m-section {
  margin: 12px;
}

.m-section__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
}

.m-section__title .more {
  font-size: 12px;
  font-weight: 400;
  color: var(--c-text-sub);
}

.m-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  margin-bottom: 10px;
}

.m-card:active {
  background: #FAFBFC;
}

.m-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
}

.m-card__row + .m-card__row {
  margin-top: 6px;
}

.m-card__label {
  color: var(--c-text-sub);
  font-size: 13px;
}

.m-card__value {
  font-weight: 500;
}

/* ---------- 卡片结构（报产页多机台卡片复用） ---------- */
.m-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-border);
  font-size: 14px;
  font-weight: 600;
}

.m-card__body {
  padding-top: 8px;
}

.m-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--c-border);
  font-size: 13px;
  color: var(--c-text-sub);
}

.m-card__error {
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: #FFEBEE;
  color: var(--c-danger);
  font-size: 12px;
}

.m-batch-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: #E3F2FD;
  color: var(--c-primary-dark);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ---------- 首页信息区（姓名 / 班次 / 工序 / 日期） ---------- */
.m-info {
  margin: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.m-info__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
  font-size: 14px;
}

.m-info__row + .m-info__row {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--c-border);
}

.m-info__label {
  flex: none;
  color: var(--c-text-sub);
  font-size: 13px;
}

.m-info__value {
  font-weight: 500;
  text-align: right;
}

/* 班次互斥按钮（选中态与 .m-shift__item.is-active 一致） */
.m-shift-btn {
  min-width: 56px;
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid var(--c-primary);
  border-radius: 15px;
  background: #fff;
  color: var(--c-primary);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s ease;
}

.m-shift-btn + .m-shift-btn {
  margin-left: 6px;
}

.m-shift-btn.is-active {
  background: var(--c-primary);
  color: #fff;
  font-weight: 600;
}

/* ---------- 首页扫一扫大按钮 ---------- */
.m-scan {
  margin: 18px auto 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.m-scan__btn {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(160deg, #2196F3 0%, var(--c-primary) 60%, var(--c-primary-dark) 100%);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 10px 24px rgba(25, 118, 210, .32);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.m-scan__btn:active {
  transform: scale(.97);
}

.m-scan__icon {
  font-size: 40px;
  line-height: 1;
}

.m-scan__hint {
  font-size: 13px;
  color: var(--c-text-sub);
  text-align: center;
  padding: 0 24px;
}

/* ---------- 数据方块 ---------- */
.m-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.m-stat {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 8px;
  text-align: center;
}

.m-stat__value {
  font-size: 18px;
  font-weight: 600;
  color: var(--c-primary-dark);
  font-variant-numeric: tabular-nums;
}

.m-stat__label {
  margin-top: 2px;
  font-size: 12px;
  color: var(--c-text-sub);
}

/* ---------- 机台卡片 ---------- */
.m-device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.m-device:active {
  background: #F7F9FB;
}

.m-device__code {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.m-device__name {
  font-size: 12px;
  color: var(--c-text-sub);
}

.m-device__process {
  font-size: 12px;
  color: var(--c-primary);
}

/* ---------- 报产页信息条 ---------- */
.m-info-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  margin: 12px;
}

.m-info-bar__item {
  min-width: 0;
}

.m-info-bar__label {
  font-size: 12px;
  color: var(--c-text-sub);
}

.m-info-bar__value {
  font-size: 15px;
  font-weight: 600;
}

/* ---------- 班次切换 ---------- */
.m-shift {
  display: inline-flex;
  border: 1px solid var(--c-primary);
  border-radius: 16px;
  overflow: hidden;
}

.m-shift__item {
  min-width: 46px;
  padding: 3px 10px;
  border: none;
  background: #fff;
  color: var(--c-primary);
  font-size: 13px;
  cursor: pointer;
}

.m-shift__item + .m-shift__item {
  border-left: 1px solid var(--c-primary);
}

.m-shift__item.is-active {
  background: var(--c-primary);
  color: #fff;
}

/* ---------- 明细卡片 ---------- */
.m-coil {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  margin-bottom: 10px;
}

.m-coil__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}

.m-coil__del {
  border: none;
  background: transparent;
  color: var(--c-danger);
  font-size: 13px;
  cursor: pointer;
}

.m-coil__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 12px;
}

/* ---------- 底部固定操作条 ---------- */
.m-footbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .05);
}

.m-footbar__sum {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--c-text-sub);
}

.m-footbar__sum b {
  color: var(--c-text);
  font-size: 14px;
}

.m-footbar .btn {
  min-width: 92px;
}

/* 报产页同时存在「操作条 + 底部 Tab」时操作条上移，避免互相遮挡 */
.m-footbar--above-tab {
  bottom: calc(52px + env(safe-area-inset-bottom));
}

body.m-body.has-footbar {
  padding-bottom: calc(114px + env(safe-area-inset-bottom));
}

/* ---------- 底部 Tab ---------- */
.m-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  border-top: 1px solid var(--c-border);
}

.m-tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 52px;
  color: var(--c-text-sub);
  font-size: 11px;
}

.m-tabbar__item span {
  font-size: 18px;
  line-height: 1;
}

.m-tabbar__item.is-active {
  color: var(--c-primary);
}

/* ---------- 折叠面板 ---------- */
.m-collapse {
  margin: 12px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.m-collapse__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.m-collapse__arrow {
  transition: transform .2s ease;
  color: var(--c-text-sub);
  font-size: 12px;
}

.m-collapse.is-open .m-collapse__arrow {
  transform: rotate(90deg);
}

.m-collapse__body {
  padding: 0 14px 14px;
  border-top: 1px solid var(--c-border);
  padding-top: 12px;
}

.m-collapse:not(.is-open) .m-collapse__body {
  display: none;
}

/* ---------- 移动端表单定制 ---------- */
body.m-body .input {
  min-height: 42px;
  font-size: 16px;
  /* 防 iOS 聚焦缩放 */
  padding: 8px 10px;
}

body.m-body .input--select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #9CA3AF 50%), linear-gradient(135deg, #9CA3AF 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

body.m-body .form-item__label {
  font-size: 13px;
}

body.m-body .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

body.m-body .btn {
  min-height: 42px;
  font-size: 15px;
}

body.m-body .btn--sm {
  min-height: 30px;
  font-size: 13px;
}

/* ---------- 列表 ---------- */
.m-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.m-list__main {
  min-width: 0;
  flex: 1;
}

.m-list__title {
  font-size: 14px;
  font-weight: 500;
}

.m-list__sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--c-text-sub);
}

.m-list__extra {
  text-align: right;
  font-size: 13px;
}

/* ---------- 筛选条 ---------- */
.m-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid var(--c-border);
}

.m-filter .input {
  min-height: 36px;
  font-size: 14px;
}

/* ---------- 详情表 ---------- */
.m-detail {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  margin: 12px;
}

.m-detail__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--c-border);
  font-size: 14px;
}

.m-detail__row:last-child {
  border-bottom: none;
}

.m-detail__label {
  color: var(--c-text-sub);
  flex: none;
  width: 96px;
}

.m-detail__value {
  flex: 1;
  text-align: right;
  word-break: break-all;
}

/* ===== 应用内扫码浮层（m-scan.js 动态创建） ===== */
.qr-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
}

.qr-overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  background: var(--c-primary, #1976D2);
}

.qr-overlay__title {
  font-size: 16px;
  font-weight: 600;
}

.qr-overlay__close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 20px;
  line-height: 1;
}

.qr-overlay__reader {
  flex: 1;
  overflow: hidden;
  background: #000;
}

.qr-overlay__reader video,
.qr-overlay__reader img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.qr-overlay__hint {
  padding: 12px 16px;
  font-size: 13px;
  text-align: center;
  color: rgba(255, 255, 255, .9);
  background: #000;
}

.qr-overlay__foot {
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  background: #000;
}

/* ===== 新版本提示条（Service Worker） ===== */
.sw-update {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(60px + env(safe-area-inset-bottom));
  z-index: 2800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius, 8px);
  background: rgba(25, 118, 210, .96);
  color: #fff;
  font-size: 14px;
  box-shadow: var(--shadow, 0 1px 3px rgba(0, 0, 0, .08));
}

.sw-update__btn {
  flex: none;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 13px;
}

@media (min-width: 640px) {
  body.m-body {
    max-width: 480px;
    margin: 0 auto;
  }

  .m-tabbar,
  .m-footbar,
  .m-footbar--above-tab {
    max-width: 480px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
  }

  .m-footbar--above-tab {
    bottom: calc(52px + env(safe-area-inset-bottom));
  }
}

/* ===== 水箱拉丝机改版：序号 / 交接盘 / 改手（docs/08 · A06） ===== */

/* 卡头：序号徽标 + 交接/改手标签 + 大号开关 */
.m-coil__head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.m-coil__head-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.m-coil__index {
  font-size: 13px;
  font-weight: 600;
}

/* 序号徽标：系统派发、只读，用等宽与底色强调"不是我填的" */
.m-coil__seq {
  display: inline-block;
  min-width: 48px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(25, 118, 210, .1);
  color: var(--c-primary, #1976D2);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .5px;
}

.m-coil__tags {
  display: inline-flex;
  gap: 4px;
}

.m-coil__tags:empty {
  display: none;
}

/* 交接=蓝 #1976D2，改手=橙 #ED6C02（设计 §7.5） */
.tag--handover {
  background: rgba(25, 118, 210, .12);
  border: 1px solid rgba(25, 118, 210, .35);
  color: #1976D2;
}

/* 已改手：醒目橙（老板要求"确认后必须看得见"） */
.tag--rework {
  background: rgba(237, 108, 2, .14);
  border: 1px solid #ED6C02;
  color: #ED6C02;
  font-weight: 600;
}

/* 未改手：中性灰，始终显示（让工人知道"这盘没改手"而不是"看不见状态"） */
.tag--rework-off {
  background: #F5F5F5;
  border: 1px solid #E0E0E0;
  color: #9E9E9E;
}

/* 戴手套可点：所有行内操作按钮 ≥44px */
.m-coil__del {
  min-height: 44px;
  padding: 0 6px;
  font-size: 14px;
}

.m-coil__switch {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--c-border, #E0E0E0);
  border-radius: 999px;
  background: #fff;
  color: var(--c-text-sub, #757575);
  font-size: 14px;
  cursor: pointer;
}

.m-coil__switch.is-on {
  background: rgba(25, 118, 210, .12);
  border-color: #1976D2;
  color: #1976D2;
  font-weight: 600;
}

/* 服务端派发字段（default_mode='server'）：灰底、无聚焦态，工人不可改 */
.form-item--server .input,
.input--server {
  background: #F5F5F5;
  color: #616161;
  cursor: not-allowed;
}

.form-item--server .switch__input:disabled {
  opacity: .75;
}

/* 改手弹窗 / 接续盘选择器：大按钮 + 大点击区 */
.coil-confirm__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}

.coil-confirm__foot {
  display: flex;
  gap: 10px;
}

.coil-confirm__btn {
  flex: 1;
  min-height: 52px;
  font-size: 16px;
}

.coil-picker__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 52vh;
  overflow-y: auto;
}

.coil-picker__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--c-border, #E0E0E0);
  border-radius: var(--radius, 8px);
  background: #fff;
  cursor: pointer;
}

.coil-picker__item.is-active {
  border-color: #1976D2;
  background: rgba(25, 118, 210, .08);
}

.coil-picker__radio {
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--c-border, #E0E0E0);
  border-radius: 50%;
}

.coil-picker__item.is-active .coil-picker__radio {
  border-color: #1976D2;
  box-shadow: inset 0 0 0 4px #1976D2;
}

.coil-picker__main {
  flex: 1;
  min-width: 0;
}

.coil-picker__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
}

.coil-picker__sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--c-text-sub, #757575);
}

#seq-next-tip.is-error {
  color: var(--c-danger, #D32F2F);
  font-weight: 600;
}

/* ==========================================================
   模态弹层（public/m/js/m-modal.js）

   ⚠️ 踩坑记录（2026-10-09，真实故障）：
     `.a-modal-mask` / `.a-modal` / `.a-modal__head|body|foot` 这套类名原先
     **只定义在 admin.css 里**，而移动端页面只引 base.css + mobile.css，
     压根没加载 admin.css。于是 m-app.js / m-coil-ui.js append 到 body 的
     遮罩是**零样式**的普通 div —— 没有 position:fixed、没有背景、没有层级，
     只能按文档流排到页面最末尾。现场表现就是：点「选择机台」「改手」后
     面板出现在**页面最底部**，上半屏大片空白，还被底部操作栏和 tabbar 压住。
     本段即修复，**勿删**；删除会让问题二/四原样复发。

   层级约定（与 mobile.css 既有值对齐）：
     底部操作栏 .m-footbar = 30 / tabbar = 40 / 遮罩 = 2000 / toast = 3000。
     遮罩必须高于前两者（否则被盖住），且低于 toast（否则连错误提示都看不见）。
   ========================================================== */

.a-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .45);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.a-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  /* 老板要求：卡片不超过 76vh，内容多时卡片内部滚动，不把页面顶下去 */
  max-height: 76vh;
  border-radius: 12px;
  background: var(--c-card, #FFFFFF);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, .12));
  overflow: hidden;
}

.a-modal--sm {
  max-width: 380px;
}

.a-modal--md {
  max-width: 420px;
}

.a-modal--lg {
  max-width: 480px;
}

.a-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: none;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border, #E5E7EB);
  font-size: 16px;
  font-weight: 600;
}

.a-modal__close {
  flex: none;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--c-text-sub, #6B7280);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.a-modal__body {
  flex: 1 1 auto;
  padding: 14px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.a-modal__foot {
  display: flex;
  gap: 10px;
  flex: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-border, #E5E7EB);
  background: var(--c-card, #FFFFFF);
}