body { margin: 0; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; background: #f5f7fa; color: #1f2937; }
#app { min-height: 100vh; }
.muted { color: #909399; font-size: 12px; }
.mb { margin-bottom: 14px; }
.sec-title { font-weight: 600; margin: 16px 0 10px; font-size: 14px; }
* { box-sizing: border-box; }

/* 登录 */
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: linear-gradient(135deg, #2b5876, #4e4376); }
.login-box { width: 360px; padding: 28px; background: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.2); }
.login-box h2 { margin: 0 0 4px; font-size: 20px; }
.login-box .sub { color: #909399; font-size: 12px; margin: 0 0 18px; }
.demo-accounts { margin-top: 18px; font-size: 12px; color: #909399; }

/* 布局 */
.layout { min-height: 100vh; }
.topbar { display: flex; align-items: center; gap: 20px; background: #fff; border-bottom: 1px solid #e4e7ed;
  height: 60px; padding: 0 16px; position: sticky; top: 0; z-index: 10; }
.brand { font-weight: 700; font-size: 16px; white-space: nowrap; }
.nav { flex: 1; border-bottom: none; }
.me { display: flex; align-items: center; white-space: nowrap; }
.who { font-weight: 600; margin-right: 6px; }
/* 别用 Element Plus 默认的 flex:1 + overflow:auto：.layout 只有 min-height:100vh
   而没有确定高度，el-main 会被撑成"整屏减顶栏"，内容被关进 main 内部滚动；
   而那个滚动条贴在 main 的内边距里，还只在鼠标悬停时才浮现 —— 用户看不到滚动条，
   就以为最后几行被"挡住"了（用户管理少一个账号就是这么被报上来的）。
   改成让内容撑开整页、用窗口滚动条，顶栏再用 sticky 钉住。 */
.el-main { flex: 1 1 auto; overflow: visible; padding: 14px; }
.filters { margin-bottom: 12px; }
.board .el-table__row { cursor: pointer; }
.user-page { margin-top: 14px; justify-content: flex-end; }
.user-page .el-pagination__total { margin-right: auto; }

/* 工序状态条 */
.bars { display: flex; flex-wrap: wrap; gap: 4px; }
.bar { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px;
  background: #ecf5ff; border: 1px solid #d9ecff; font-size: 12px; white-space: nowrap; }
.bar.done { background: #f0f9eb; border-color: #e1f3d8; }
.bar.wait { background: #fafafa; border-color: #ebeef5; color: #a8abb2; }
.bar-name { font-weight: 600; }
.bar-text { color: #606266; }

/* 日志 */
.log-act { font-weight: 600; }
.log-remark { color: #606266; font-size: 12px; }

/* ============ 扫码报工（手机优先） ============ */
.scan-page { max-width: 640px; margin: 0 auto; padding: 10px 10px 96px; }
.scan-head { background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.scan-no { font-size: 20px; font-weight: 700; letter-spacing: .5px; }
.scan-meta { color: #606266; font-size: 14px; margin: 6px 0 10px; line-height: 1.5; }
.scan-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.proc-card { background: #fff; border-radius: 12px; padding: 14px; margin-top: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06); border-left: 5px solid transparent; }
.proc-card.focus { border-left-color: #409EFF; background: #f5faff; }
.proc-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.proc-nums { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: #606266; margin-bottom: 12px; }
.proc-nums b { font-size: 17px; color: #1f2937; margin-left: 3px; }
.proc-nums .warn { color: #E6A23C; font-weight: 600; }
.scan-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: #fff; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06); font-size: 13px; }
.scan-who .who { font-weight: 700; margin-right: 2px; }
.proc-bar { position: relative; height: 22px; border-radius: 11px; background: #f0f2f5;
  overflow: hidden; margin-bottom: 12px; }
.proc-bar-in { position: absolute; left: 0; top: 0; bottom: 0; background: #67c23a; border-radius: 11px; }
.proc-bar-text { position: absolute; left: 10px; top: 0; line-height: 22px; font-size: 12px; color: #303133; }
.proc-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.proc-acts .el-button { height: 46px; font-size: 15px; padding: 0 16px; margin-left: 0; }
.scan-foot { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid #e4e7ed;
  padding: 8px 12px; display: flex; gap: 10px; z-index: 100; }
.scan-foot .el-button { flex: 1; height: 46px; font-size: 15px; margin-left: 0; }

/* 报工数字键盘 */
.pad-drawer .el-drawer__body { padding: 6px 14px 18px; }
.pad-qty { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 2px 0 14px; }
.pad-num { font-size: 46px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: center; }
.pad-max { color: #909399; font-size: 16px; }
.pad-quick { display: flex; gap: 8px; margin-bottom: 10px; }
.pad-quick .el-button { flex: 1; height: 42px; font-size: 15px; margin-left: 0; }
.pad-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pad-keys .el-button { height: 56px; font-size: 24px; font-weight: 600; margin-left: 0; }
.pad-ok { width: 100%; height: 52px; font-size: 18px; margin-top: 14px; margin-left: 0; }
.pad-line { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pad-line .el-button { height: 56px; font-size: 18px; margin-left: 0; }
.pad-type { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.pad-type .el-button { height: 48px; font-size: 16px; margin-left: 0; }
.pad-field { margin-bottom: 12px; }

/* ============ 二维码显示 + 右键复制（不再提供打印） ============ */
.qr-inline { text-align: center; }
.qr-inline svg { width: 180px; height: 180px; }
.qr-box { text-align: center; }
.qr-box svg { width: 220px; height: 220px; }
.qr-box-no { font-size: 16px; font-weight: 700; }
.qr-box-cust { font-size: 13px; margin: 2px 0; }
.qr-box-meta { color: #909399; font-size: 12px; line-height: 1.6; margin-bottom: 6px; }

.qr-copyable { display: inline-block; cursor: context-menu; line-height: 0; background: #fff; }
.qr-copyable svg { display: block; width: 180px; height: 180px; }
.qr-copyable img { display: block; width: 180px; height: 180px; image-rendering: pixelated; }
.qr-box .qr-copyable img { width: 220px; height: 220px; }

/* 二维码右键菜单 */
.qr-menu {
  position: fixed; z-index: 3000; min-width: 170px; background: #fff;
  border: 1px solid #e4e7ed; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.16);
  padding: 4px 0; font-size: 13px;
}
.qr-menu-title { padding: 5px 12px; color: #909399; font-size: 12px; border-bottom: 1px solid #f0f2f5; }
.qr-menu-item { padding: 8px 14px; cursor: pointer; color: #303133; }
.qr-menu-item:hover { background: #ecf5ff; color: #409eff; }
.qr-menu-tip { padding: 6px 12px; color: #a8abb2; font-size: 11px; line-height: 1.5; border-top: 1px solid #f0f2f5; }

@media (max-width: 768px) {
  .topbar { height: auto; flex-wrap: wrap; padding: 8px; gap: 8px; }
  .brand { width: 100%; }
  .el-main { padding: 8px; }
  .bar { font-size: 11px; }
}

/* ================= 备注（独立多条，可带图） ================= */
/* 备注是"一条一条独立"的记录，所以每条给一层浅色底 + 左侧蓝边，视觉上分得开 */
.remark-list { display: flex; flex-direction: column; gap: 8px; }
.remark-item { border: 1px solid #ebeef5; border-left: 3px solid #409eff; border-radius: 6px;
  padding: 8px 10px; background: #fafcff; }
.remark-head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.remark-author { font-weight: 600; color: #303133; }
.remark-time { color: #909399; }
.remark-del { margin-left: auto; }
.remark-text { margin-top: 5px; font-size: 13px; color: #303133;
  white-space: pre-wrap; word-break: break-word; }
.remark-imgs { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px; }
.remark-thumb { width: 84px; height: 84px; border-radius: 5px; overflow: hidden; background: #f0f2f5; }
.remark-thumb-wait { display: flex; align-items: center; justify-content: center;
  color: #c0c4cc; font-size: 12px; }

/* 添加备注抽屉（底部弹出，手机上也好按） */
.rc-drawer .el-drawer__body { padding: 8px 16px 20px; }
.rc { display: flex; flex-direction: column; gap: 12px; }
.rc-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rc-file { display: none; }                  /* 真正的 <input type=file> 藏起来，用按钮触发 */
.rc-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-cell { position: relative; width: 96px; height: 96px; border-radius: 6px; overflow: hidden;
  background: #f0f2f5; border: 1px solid #ebeef5; }
.rc-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-del { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; line-height: 18px;
  text-align: center; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 15px; cursor: pointer; user-select: none; }
.rc-del:hover { background: rgba(0, 0, 0, .78); }
.rc-ok { width: 100%; height: 50px; font-size: 17px; margin-top: 4px; margin-left: 0; }

/* ================= 三维组合查询 ================= */
.q-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.q-item { flex: 1; min-width: 110px; background: #fff; border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.q-item b { display: block; font-size: 22px; color: #303133; line-height: 1.2; }
.q-item span { font-size: 12px; color: #909399; }
.q-item.danger b { color: #f56c6c; }
.q-item.warn b { color: #e6a23c; }
.q-bar { display: inline-block; width: 78px; height: 8px; background: #f0f2f5;
  border-radius: 4px; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.q-bar-in { height: 100%; background: #67c23a; border-radius: 4px; }

/* ================= 车间大屏（深色，给电视看） ================= */
.screen-page { height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: #0b1220; color: #e5eaf3; padding: 12px 16px 20px; }
.screen-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.screen-title { font-size: 26px; font-weight: 800; letter-spacing: 2px; color: #fff; }
.screen-clock { color: #8fa0bd; font-size: 14px; }
.screen-ops { margin-left: auto; display: flex; gap: 8px; }
.screen-muted { color: #7d8aa3; padding: 10px; font-size: 14px; }
.screen-muted.ok-text { color: #67c23c; }
.screen-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }

.screen-kpis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; }
.screen-kpis .kpi { background: #141c2e; border-radius: 12px; padding: 7px 6px; text-align: center;
  border: 1px solid #1f2a40; }
.kpi-num { font-size: 22px; font-weight: 800; color: #fff; line-height: 1.0; }
.kpi-lab { font-size: 11px; color: #8fa0bd; margin-top: 2px; }
.kpi.ok .kpi-num { color: #67c23c; }
.kpi.warn .kpi-num { color: #e6a23c; }
.kpi.danger .kpi-num { color: #f56c6c; }

.screen-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
/* 右侧整块留给「最近动态」，在制订单放左边。
   左边要放 8 列（加急/产品/客户/工序 + 4 个数字），右边 7 列，两边都得有肉 */
.screen-cols2 { flex: 1; min-height: 50vh; display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; align-items: stretch; }
.screen-card { background: #141c2e; border: 1px solid #1f2a40; border-radius: 12px; padding: 9px 12px;
  display: flex; flex-direction: column; min-height: 0; }
.screen-card .card-title { font-size: 14px; font-weight: 700; color: #cdd8ea; margin-bottom: 7px; }

/* 固定轨道网格：工序名 / 进度条 / 待在完数字 / 缺料 / 返工，各列始终对齐同一竖线 */
.proc-row { display: grid; align-items: center;
  grid-template-columns: 84px minmax(0, 1fr) 150px auto auto;
  gap: 6px; padding: 3px 0; border-bottom: 1px solid #1b2438; font-size: 12px; }
.proc-row:last-child { border-bottom: none; }
/* 一行里的数字用等宽字形，位数不同也不会左右晃 */
.screen-page { font-variant-numeric: tabular-nums; }
.proc-name { width: 84px; color: #fff; font-weight: 600; }
.screen-card .bar { min-width: 0; height: 12px; background: #1b2438; border-radius: 6px; overflow: hidden; }
.screen-card .bar-in { height: 100%; background: #409eff; border-radius: 6px; }
.screen-card .bar-in.warn { background: #e6a23c; }
.screen-card .bar-in.ok { background: #67c23c; }
.proc-num { width: 150px; color: #8fa0bd; font-size: 11px; text-align: right; white-space: nowrap; }
.tag-red { color: #f56c6c; font-size: 12px; }
.tag-yellow { color: #e6a23c; font-size: 12px; }

/* 工序积压改为三行两列网格（去掉进度条，只留 待/在/完 数字，更省高度、和右侧 SMT 线别等高） */
.proc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; flex: 1; align-content: space-between; }
.proc-cell { background: #1b2438; border: 1px solid #26314a; border-radius: 6px; padding: 5px 8px; }
.proc-cell-name { color: #fff; font-weight: 600; font-size: 12px; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proc-cell-nums { display: flex; gap: 9px; color: #8fa0bd; font-size: 11px; }
.proc-cell-nums b { color: #fff; font-size: 13px; margin-left: 1px; }
.proc-cell-tags { margin-top: 2px; display: flex; gap: 4px; }

/* 在制订单：8 列网格（加急位/产品/客户/工序/总/齐料/生产中/已交），
   产品名与客户名长度差异大 → 用可压缩的 fr 轨道 + 省略号；右侧四个数字各占一列，行行对齐 */
.order-row { display: grid; align-items: center;
  grid-template-columns: 56px minmax(0, 1.5fr) minmax(0, 1fr) 76px
                         repeat(4, minmax(0, 1fr));
  gap: 8px; padding: 5px 0; border-bottom: 1px solid #1b2438; font-size: 14px; }
.order-row:last-child { border-bottom: none; }
.order-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-row .urgent-tag { width: 56px; }
.order-prod { color: #fff; font-weight: 600; }
.order-cust { color: #cdd8ea; }
.order-proc { color: #8fa0bd; font-size: 13px; text-align: center; }
.order-pct { text-align: right; color: #fff; }
.order-num { text-align: right; color: #8fa0bd; font-size: 12px; }
.order-num b { color: #fff; font-size: 16px; margin-left: 3px; }
/* 在制订单 / 最近动态：占满卡片剩余高度，订单多时内部滚动而非截断 */
.order-scroll, .recent-scroll { flex: 1; min-height: 0; overflow-y: auto; margin-top: 6px; }
.order-scroll::-webkit-scrollbar, .recent-scroll::-webkit-scrollbar { width: 6px; }
.order-scroll::-webkit-scrollbar-thumb, .recent-scroll::-webkit-scrollbar-thumb { background: #2a3650; border-radius: 3px; }
/* 在制订单分类轮播 */
.cat-chips { margin-left: 10px; display: inline-flex; flex-wrap: wrap; gap: 6px; }
.cat-chip { font-size: 12px; font-weight: 400; color: #8fa0bd; background: #1b2438;
  border: 1px solid #26314a; border-radius: 10px; padding: 2px 8px; cursor: pointer; }
.cat-chip:hover { color: #cdd8ea; border-color: #409eff; }
.cat-chip.on { color: #fff; background: #409eff; border-color: #409eff; }
.cat-title { color: #409eff; font-size: 13px; margin: 2px 0 6px; }
/* 最近动态：固定 7 条轨道（时间/动作/产品/客户/工序/数量/操作人），
   产品名与客户名长度差异大，所以这两列用可压缩的 fr 轨道 + 省略号，
   其余列给固定宽度，保证每一行的列都落在同一条竖线上 */
.recent-row { display: grid; align-items: center;
  grid-template-columns: 62px 74px minmax(0, 1.6fr) minmax(0, 1.1fr)
                         62px 54px minmax(0, 64px);
  gap: 8px; padding: 5px 0; border-bottom: 1px solid #1b2438; font-size: 14px; }
.recent-row:last-child { border-bottom: none; }
.recent-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-time { color: #8fa0bd; font-size: 13px; }
.recent-act { color: #67c23c; text-align: center; }
.recent-prod { color: #fff; font-weight: 600; }
.recent-cust { color: #cdd8ea; }
.recent-proc { color: #8fa0bd; font-size: 13px; text-align: center; }
.recent-qty { color: #e6a23c; text-align: right; }
.recent-who { color: #8fa0bd; font-size: 12px; text-align: right; }

@media (max-width: 1400px) {
  .screen-page { height: auto; min-height: 100vh; overflow: visible; }
  .screen-body { display: block; }
  .screen-cols2 { display: block; }
  .screen-card { display: block; }
  .order-scroll, .recent-scroll { max-height: 60vh; }
  .screen-kpis { grid-template-columns: repeat(4, 1fr); }
  .screen-cols { grid-template-columns: 1fr 1fr; }
}