/* ===== 设计系统: 制造业 SRM 后台 (参考 SAP Ariba + 商越/甄云) ===== */
:root {
  /* 主色 — 艾拉芙喷雾拖把品牌绿 */
  --c-primary:        #15b8a6;
  --c-primary-dark:   #0f766e;
  --c-primary-light:  #ccfbf1;
  --c-primary-bg:     #effcf8;

  /* 侧边栏 — 与登录页一致的清爽品牌外壳 */
  --c-sidebar-bg:     #f4fff7;
  --c-sidebar-bg-2:   #d8f3df;
  --c-sidebar-text:   #29453d;
  --c-sidebar-text-2: #6d887c;
  --c-sidebar-hover:  rgba(21, 184, 166, 0.12);
  --c-sidebar-active-bg: #15b8a6;
  --c-sidebar-active-text: #ffffff;

  /* 中性 */
  --c-bg:             #f2fbf8;
  --c-card:           #ffffff;
  --c-border:         #e2e8f0;
  --c-border-strong:  #cbd5e1;
  --c-text:           #0f172a;
  --c-text-2:         #475569;
  --c-text-3:         #94a3b8;

  /* 状态 */
  --c-success:        #16a34a;
  --c-success-bg:     #dcfce7;
  --c-warning:        #ca8a04;
  --c-warning-bg:     #fef9c3;
  --c-danger:         #dc2626;
  --c-danger-bg:      #fee2e2;
  --c-info:           #0284c7;
  --c-info-bg:        #e0f2fe;
  --c-pending:        #6366f1;
  --c-pending-bg:     #e0e7ff;
  --c-neutral:        #475569;
  --c-neutral-bg:     #f1f5f9;

  /* 阴影 */
  --shadow-sm:        0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow:           0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:        0 4px 14px rgba(20, 83, 45, 0.08);
  --shadow-lg:        0 10px 28px rgba(20, 83, 45, 0.16);

  /* 半径 */
  --r-sm:             4px;
  --r:                6px;
  --r-md:             8px;
  --r-lg:             12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.72) 0 1px, transparent 1px 68px),
    linear-gradient(0deg, rgba(255,255,255,0.5) 0 1px, transparent 1px 68px),
    linear-gradient(135deg, #effdf7 0%, #e8f8ff 55%, #fff6e8 100%);
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  background: var(--c-neutral-bg); padding: 1px 6px;
  border-radius: var(--r-sm); font-size: 13px;
  font-family: "JetBrains Mono", Consolas, monospace;
}

/* ===== 应用整体布局: Sidebar + (TopBar + Main) ===== */
.app-shell {
  display: flex; min-height: 100vh;
}
.app-shell.no-sidebar {
  /* 登录页 */
  align-items: stretch; justify-content: center;
  background: #eef7f4;
}

/* ===== 侧边栏 ===== */
.sidebar {
  width: 220px; flex-shrink: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.76)),
    linear-gradient(160deg, #f7fff4 0%, #e4fff5 52%, #fff4df 100%);
  color: var(--c-sidebar-text);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  border-right: 1px solid var(--c-sidebar-bg-2);
  box-shadow: 12px 0 30px rgba(20, 83, 45, 0.08);
}
.sidebar-brand {
  padding: 20px 14px 16px;
  border-bottom: 1px solid var(--c-sidebar-bg-2);
  display: flex; align-items: center; gap: 10px;
}
.sidebar-brand .logo {
  width: 58px; height: 32px;
  background: linear-gradient(135deg, #15b8a6, #89c33d);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(21, 184, 166, 0.22);
}
.sidebar-brand .brand-text {
  display: flex; flex-direction: column;
}
.sidebar-brand .brand-name { color: #17463d; font-weight: 700; font-size: 15px; }
.sidebar-brand .brand-sub { color: var(--c-sidebar-text-2); font-size: 11px; }

.sidebar-nav {
  flex: 1; padding: 12px 8px; overflow-y: auto;
  display: flex; flex-direction: column;  /* M6.14: 让 .system-group margin-top:auto 把"系统"压底 */
}
/* M6.14 系统一级 toggle 固定在 sidebar 最底部 */
.sidebar-nav a.system-group { margin-top: auto; }
.sidebar-nav .group-label {
  padding: 12px 12px 6px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--c-sidebar-text-2);
}
.sidebar-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin: 1px 0;
  border-radius: var(--r);
  color: var(--c-sidebar-text);
  font-size: 14px; cursor: pointer;
  transition: background 0.1s, color 0.1s, box-shadow 0.1s;
}
/* 一级可折叠分组头 (供应商管理) - 带图标 + caret */
.sidebar-nav a.group-toggle .caret { font-size: 10px; opacity: 0.7; }
.sidebar-nav a.group-toggle:hover .caret { opacity: 1; }
/* 二级可折叠分组头 (供应商开发) - 无图标, 缩进 */
.sidebar-nav a.sub-group-toggle {
  padding-left: 32px; font-size: 13px;
  color: var(--c-sidebar-text-2);
}
.sidebar-nav a.sub-group-toggle .caret { font-size: 10px; opacity: 0.7; }
.sidebar-nav a.sub-group-toggle:hover { color: var(--c-sidebar-text); }
.sidebar-nav a.sub-group-toggle:hover .caret { opacity: 1; }
/* 一级 toggle 直接叶子 (供应商管理设置 → 初筛规则) - 无图标, 32px 缩进 */
.sidebar-nav a.sub-item { padding-left: 32px; }
/* 三级叶子项 (供应商开发 → 候选库 / 中转审核) - 无图标, 更深缩进 */
.sidebar-nav a.leaf-item { padding-left: 44px; }
.sidebar-nav a:hover { background: var(--c-sidebar-hover); text-decoration: none; }
.sidebar-nav a.active {
  background: linear-gradient(135deg, #15b8a6, #89c33d);
  color: var(--c-sidebar-active-text);
  box-shadow: 0 8px 18px rgba(21, 184, 166, 0.22);
}
.sidebar-nav a .nav-icon {
  width: 18px; text-align: center; font-size: 14px;
}

.sidebar-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--c-sidebar-bg-2);
  display: flex; align-items: center; gap: 10px;
}
.sidebar-foot .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #15b8a6, #89c33d); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}
.sidebar-foot .user-info { flex: 1; min-width: 0; }
.sidebar-foot .user-name { color: #17463d; font-size: 13px; font-weight: 600; }
.sidebar-foot .user-role { color: var(--c-sidebar-text-2); font-size: 11px; }
.sidebar-foot .logout-btn {
  background: rgba(255,255,255,0.6); border: 1px solid var(--c-sidebar-bg-2);
  color: var(--c-sidebar-text);
  padding: 4px 8px; font-size: 12px;
}
.sidebar-foot .logout-btn:hover {
  background: var(--c-sidebar-hover); border-color: var(--c-primary);
}

/* ===== 主区 ===== */
.main-wrap {
  flex: 1; display: flex; flex-direction: column;
  min-width: 0; /* 防 flex 子元素溢出 */
}
.topbar {
  height: 56px;
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid rgba(21, 184, 166, 0.16);
  backdrop-filter: blur(12px);
  display: flex; align-items: center;
  padding: 0 24px; gap: 16px;
}
.topbar .breadcrumb {
  display: flex; align-items: center; gap: 8px;
  color: var(--c-text-2); font-size: 14px;
}
.topbar .breadcrumb .sep { color: var(--c-text-3); }
.topbar .breadcrumb .current { color: var(--c-text); font-weight: 500; }
.topbar .top-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--c-text-2);
}

.main {
  flex: 1; padding: 20px 24px;
  overflow-y: auto;
}

/* ===== 卡片 ===== */
.card {
  background: var(--c-card);
  border: 1px solid rgba(21, 184, 166, 0.13);
  border-radius: var(--r-md);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.card.compact { padding: 14px 16px; }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.card-header h2, .card-header h3 { margin: 0; }
.card h2 { font-size: 16px; font-weight: 600; margin: 0 0 16px; }
.card h3 {
  font-size: 13px; font-weight: 600;
  color: var(--c-text-2);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin: 16px 0 10px;
}

/* ===== 页面标题区 ===== */
.page-title {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.page-title h1 { font-size: 22px; font-weight: 600; margin: 0; color: var(--c-text); }
.page-title .desc { color: var(--c-text-2); font-size: 13px; margin-top: 2px; }

/* ===== 表单 ===== */
input, select, textarea {
  padding: 7px 10px; font-size: 14px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r);
  background: #fff; color: var(--c-text);
  font-family: inherit;
  outline: none;
  transition: border-color 0.1s, box-shadow 0.1s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(21, 184, 166, 0.14);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--c-neutral-bg); cursor: not-allowed;
}
textarea { min-height: 64px; resize: vertical; font-family: inherit; }
label { font-size: 13px; color: var(--c-text-2); }
.required-star {
  color: var(--c-danger);
  font-weight: 700;
  display: inline;
  margin-left: 2px;
}
.freight-label-title {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.freight-field-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--c-text-2);
}
.freight-lookup-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  margin-bottom: 12px;
}
.freight-lookup-label {
  flex: 0 0 auto;
}
.freight-lookup-btn {
  height: 35px;
}
.freight-lookup-tip {
  display: inline-flex;
  align-items: center;
  height: 35px;
  white-space: nowrap;
}
.form-grid.sales-docs-entry-form label {
  display: block;
}
.form-grid.sales-docs-entry-form label > input,
.form-grid.sales-docs-entry-form label > select,
.form-grid.sales-docs-entry-form label > textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
}
.form-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px;
  margin: 12px 0;
}
.form-grid label {
  display: flex; flex-direction: column; gap: 4px;
}
.form-grid .full { grid-column: 1 / -1; }

/* ===== 按钮 ===== */
button, .btn {
  padding: 7px 14px; font-size: 14px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--c-primary); color: #fff;
  cursor: pointer; font-weight: 500;
  font-family: inherit;
  transition: background 0.1s, border-color 0.1s;
  display: inline-flex; align-items: center; gap: 6px;
}
button:hover, .btn:hover { background: var(--c-primary-dark); }
button:disabled, .btn:disabled {
  background: var(--c-text-3); cursor: not-allowed;
}
.btn-secondary {
  background: #fff; color: var(--c-text); border-color: var(--c-border-strong);
}
.btn-secondary:hover { background: var(--c-neutral-bg); border-color: var(--c-text-2); }
.btn-danger { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.btn-danger:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.btn-link {
  background: transparent; color: var(--c-primary);
  padding: 4px 8px; border: 0;
}
.btn-link:hover { background: var(--c-primary-bg); text-decoration: none; }
.btn-sm { padding: 4px 10px; font-size: 13px; white-space: nowrap; }
.btn-lg { padding: 10px 20px; font-size: 15px; }
.btn-block { width: 100%; justify-content: center; }

/* ===== 状态标签 ===== */
.status {
  display: inline-block;
  padding: 2px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
}
.status-default { background: var(--c-neutral-bg); color: var(--c-neutral); }
.status-info    { background: var(--c-info-bg); color: var(--c-info); }
.status-success { background: var(--c-success-bg); color: var(--c-success); }
.status-warning { background: var(--c-warning-bg); color: var(--c-warning); }
.status-danger  { background: var(--c-danger-bg); color: var(--c-danger); }
.status-pending { background: var(--c-pending-bg); color: var(--c-pending); }

/* ===== 表格 ===== */
.table-wrap {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-md); overflow: hidden;
}
/* F.9.5: 序时薄表格容器 — 固定高度 + 内部双向滚动 + 表头 sticky
   解决报工/工资/绩效页"数据多必须拉到最底才能看水平滚动条"的问题
   表头/水平滚动条始终在视窗内可见 */
.scroll-table-wrap {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  max-height: calc(100vh - 280px);
  overflow: auto;
  position: relative;
}
.scroll-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--c-neutral-bg);
}
.salary-page-nav {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 43px;
  margin: 0;
  padding: 7px 8px;
  font-size: 12px;
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.salary-page-nav + table thead th {
  top: 0;
}
/* 5/26 老板: 计划看板 (前道/总装) — flex column 布局, scroll 区自动占满 .main 内部
   关键: 让 .main 在 PlanBoardPage 期间不再 vertical 滚动, plan-board-root 接管 100% 高度
   避免 .main 滚动让 plan-board-scroll 底部超出视窗导致水平条看不见
   class 由 PlanBoardPage onMounted/onUnmounted JS 加/移除 (绕开 :has() 兼容性) */
.main.main-plan-board {
  overflow: hidden;
  height: calc(100vh - 56px);
  max-height: calc(100vh - 56px);
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* 6/16: 报工序时薄 (小件/总装/其他/装柜) 列表态撑满主区, 横向滚动条常驻视窗底 —
   .main 由 PieceWorksPage onMounted inline 接管为定高 flex column, 此处定义内部 flex 分配 */
.main.main-piece-report > * { flex: 0 0 auto; }
.main.main-piece-report > .piece-list-view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.main.main-piece-report > .piece-list-view > * { flex: 0 0 auto; }
.main.main-piece-report > .piece-list-view > .scroll-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;   /* 覆盖默认 max-height: calc(100vh-280px), 改由 flex 撑满 */
}
/* 6/16: 财务序时薄 (计件/计时/装柜工资 SalaryListPage) 同款撑满 — 分页栏在表格上方固定可见, 横条常驻视窗底 */
.main.main-piece-report > .salary-report-root {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.main.main-piece-report > .salary-report-root > * { flex: 0 0 auto; }
.main.main-piece-report > .salary-report-root > .scroll-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}
.plan-board-root {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.plan-board-root .page-title,
.plan-board-root > div:not(.plan-board-scroll) {
  flex: 0 0 auto;
}
.plan-board-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.plan-board-table-wrap {
  /* 子表格不再独立滚动, 直接展开按内容宽度, scroll 由外层 plan-board-scroll 承担 */
  position: relative;
}
.plan-board-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--c-neutral-bg);
}
.list-pager {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 0 0 8px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.list-pager select {
  padding: 5px 8px;
  margin: 0 4px;
}
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--c-border); }
th {
  background: var(--c-neutral-bg);
  font-weight: 600; color: var(--c-text-2);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em;
}
tbody tr:last-child td { border-bottom: 0; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--c-primary-bg); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.actions { text-align: right; white-space: nowrap; }

/* ===== 工具条 / 筛选 ===== */
.toolbar {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 12px; flex-wrap: wrap;
}
.toolbar input, .toolbar select { min-width: 180px; }
.toolbar .grow { flex: 1; }

/* 小件计件筛选栏: 允许换行 (撑不下时折到第二行, 避免裁切汇总) + 子项允许自定义宽度 */
.piece-toolbar { flex-wrap: wrap; row-gap: 8px; }
/* 强制换行符: 占满整行高 0, 让后面的操作按钮组固定落到第二行 (跟小件派工一致) */
.piece-toolbar .toolbar-break { flex-basis: 100%; height: 0; margin: 0; padding: 0; }
.piece-toolbar input, .piece-toolbar select { min-width: 0; }
.piece-toolbar label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.piece-toolbar .btn-icon,
.piece-toolbar .row-action-grp,
.piece-toolbar .bulk-action-grp {
  flex: 0 0 auto;
  white-space: nowrap;
}
.piece-toolbar .toolbar-summary {
  flex: 0 0 auto;
  margin-left: auto;   /* 撑不下换行时仍右对齐 */
  overflow: hidden;
  text-align: right;
  line-height: 1.25;
}
.piece-toolbar .toolbar-summary .selected-summary {
  display: block;
  color: var(--c-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.piece-toolbar .toolbar-summary .summary-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 空状态 ===== */
.empty {
  text-align: center; padding: 32px 16px;
  color: var(--c-text-3); font-size: 13px;
}
.empty .empty-icon {
  font-size: 32px; margin-bottom: 8px;
  color: var(--c-border-strong);
}
.empty .empty-title { color: var(--c-text-2); font-size: 14px; margin-bottom: 4px; }
.empty .empty-desc { color: var(--c-text-3); font-size: 12px; }

/* ===== 错误 / 提示 ===== */
.alert {
  padding: 10px 14px; border-radius: var(--r);
  font-size: 13px; margin: 12px 0;
  display: flex; align-items: flex-start; gap: 8px;
}
.alert-error   { background: var(--c-danger-bg); color: var(--c-danger); }
.alert-warning { background: var(--c-warning-bg); color: var(--c-warning); }
.alert-info    { background: var(--c-info-bg); color: var(--c-info); }
.alert-success { background: var(--c-success-bg); color: var(--c-success); }
.hint { color: var(--c-text-3); font-size: 12px; }
.err  { color: var(--c-danger); font-size: 13px; margin: 8px 0; }

/* ===== 仪表盘指标卡 ===== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.stat {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 16px;
  display: flex; flex-direction: column;
  border-left: 3px solid var(--c-primary);
}
.stat .stat-label {
  color: var(--c-text-2); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.stat .stat-value {
  color: var(--c-text); font-size: 28px; font-weight: 600;
  margin: 4px 0; font-variant-numeric: tabular-nums;
}
.stat .stat-sub {
  color: var(--c-text-3); font-size: 12px;
}
.stat.success { border-left-color: var(--c-success); }
.stat.warning { border-left-color: var(--c-warning); }
.stat.danger  { border-left-color: var(--c-danger); }
.stat.info    { border-left-color: var(--c-info); }
.stat.pending { border-left-color: var(--c-pending); }

/* ===== M6.11 Dashboard ===== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.kpi-card {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 16px;
  display: flex; flex-direction: column;
  border-left: 3px solid var(--c-primary);
  transition: box-shadow 0.12s, transform 0.12s, border-color 0.12s;
}
.kpi-card.clickable { cursor: pointer; }
.kpi-card.clickable:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
  border-color: var(--c-primary);
}
.kpi-card .kpi-label {
  color: var(--c-text-2); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.kpi-card .kpi-value {
  color: var(--c-text); font-size: 28px; font-weight: 600;
  margin: 4px 0; font-variant-numeric: tabular-nums;
}
.kpi-card .kpi-sub { color: var(--c-text-3); font-size: 12px; }
.kpi-card .kpi-drill {
  color: var(--c-primary); font-size: 12px; margin-top: 8px; opacity: 0;
  transition: opacity 0.12s;
}
.kpi-card.clickable:hover .kpi-drill { opacity: 1; }

.dash-row { display: grid; gap: 16px; margin-bottom: 16px; }
.dash-row-2 { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 980px) {
  .dash-row-2 { grid-template-columns: 1fr; }
}

/* 漏斗 */
.funnel { display: flex; flex-direction: column; gap: 8px; }
.funnel-row {
  display: grid; grid-template-columns: 130px 1fr 60px;
  align-items: center; gap: 12px;
  padding: 6px 4px; border-radius: var(--r);
  transition: background 0.1s;
}
.funnel-row.clickable { cursor: pointer; }
.funnel-row.clickable:hover { background: var(--c-neutral-bg); }
.funnel-label { font-size: 13px; color: var(--c-text-2); }
.funnel-bar-wrap {
  height: 22px; background: var(--c-neutral-bg);
  border-radius: var(--r); overflow: hidden;
}
.funnel-bar {
  height: 100%; min-width: 4px;
  background: linear-gradient(90deg, var(--c-primary), #6c7adf);
  border-radius: var(--r);
}
.funnel-count { text-align: right; font-size: 14px; }

/* 待办 / 预警 共享行样式 */
.todo-list, .alert-list { display: flex; flex-direction: column; gap: 6px; }
.todo-row, .alert-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r);
  background: var(--c-neutral-bg);
  border-left: 3px solid var(--c-info);
  transition: background 0.1s, transform 0.08s;
}
.todo-row.clickable, .alert-row.clickable { cursor: pointer; }
.todo-row.clickable:hover, .alert-row.clickable:hover { background: #eef0f5; transform: translateX(2px); }
.todo-row.sev-high,  .alert-row.sev-high  { border-left-color: var(--c-danger); }
.todo-row.sev-medium,.alert-row.sev-medium{ border-left-color: var(--c-warning); }
.todo-row.sev-low,   .alert-row.sev-low   { border-left-color: var(--c-info); }
.todo-text { flex: 1; display: flex; align-items: center; gap: 8px; }
.todo-label { color: var(--c-text); font-size: 13px; }
.todo-sev {
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  background: var(--c-neutral-bg); color: var(--c-text-2);
}
.todo-row.sev-high  .todo-sev { background: var(--c-danger-bg);  color: var(--c-danger); }
.todo-row.sev-medium .todo-sev{ background: var(--c-warning-bg); color: var(--c-warning); }
.todo-row.sev-low   .todo-sev { background: var(--c-info-bg);    color: var(--c-info); }
.todo-count { color: var(--c-text); font-size: 16px; font-weight: 600; }

.alert-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.alert-dot.sev-high   { background: var(--c-danger); }
.alert-dot.sev-medium { background: var(--c-warning); }
.alert-dot.sev-low    { background: var(--c-info); }
.alert-text { flex: 1; font-size: 13px; }
.alert-count { font-size: 14px; }

/* 最近动态 */
.activity-list { display: flex; flex-direction: column; }
.activity-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 4px; font-size: 13px;
  border-bottom: 1px dashed var(--c-border);
  transition: background 0.1s;
}
.activity-row:last-child { border-bottom: 0; }
.activity-row.clickable { cursor: pointer; }
.activity-row.clickable:hover { background: var(--c-neutral-bg); }
.activity-user { color: var(--c-text-2); min-width: 80px; font-size: 12px; }
.activity-action { color: var(--c-text); flex: 1; }
.activity-target { font-size: 12px; }
.activity-ts { font-size: 11px; }

/* 未来模块占位 */
.placeholder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.placeholder-card {
  background: var(--c-neutral-bg); border: 1px dashed var(--c-border);
  border-radius: var(--r-md); padding: 16px;
  position: relative; opacity: 0.85;
}
.placeholder-card .placeholder-title {
  font-size: 14px; font-weight: 600; color: var(--c-text-2); margin-bottom: 6px;
}
.placeholder-card .placeholder-desc { font-size: 12px; color: var(--c-text-3); line-height: 1.5; }
.placeholder-card .placeholder-tag {
  position: absolute; top: 12px; right: 12px;
  font-size: 10px; padding: 2px 8px; border-radius: 8px;
  background: #fff; color: var(--c-text-3); border: 1px solid var(--c-border);
}

/* ===== Supplier 360 摘要卡 ===== */
.supplier-summary {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 20px 24px;
  margin-bottom: 16px;
}
.supplier-summary .head {
  display: flex; align-items: flex-start; gap: 16px;
  margin-bottom: 16px;
}
.supplier-summary .avatar {
  width: 56px; height: 56px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 600; flex-shrink: 0;
}
.supplier-summary .info { flex: 1; min-width: 0; }
.supplier-summary .name {
  font-size: 18px; font-weight: 600; color: var(--c-text);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.supplier-summary .meta {
  margin-top: 6px; color: var(--c-text-2); font-size: 13px;
  display: flex; gap: 16px; flex-wrap: wrap;
}
.supplier-summary .meta .meta-item {
  display: flex; align-items: center; gap: 4px;
}
.supplier-summary .meta .meta-label { color: var(--c-text-3); }

/* ===== 流程进度条 ===== */
.flow-progress {
  display: flex; align-items: center;
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 16px 20px;
  margin-bottom: 16px;
  overflow-x: auto;
}
.flow-step {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; min-width: 90px; position: relative;
}
.flow-step .dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-neutral-bg); border: 2px solid var(--c-border-strong);
  color: var(--c-text-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  z-index: 1;
}
.flow-step .label {
  margin-top: 6px; font-size: 12px; color: var(--c-text-3);
  text-align: center; white-space: nowrap;
}
.flow-step.done .dot { background: var(--c-success); border-color: var(--c-success); color: #fff; }
.flow-step.done .label { color: var(--c-text-2); }
.flow-step.current .dot { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.flow-step.current .label { color: var(--c-primary); font-weight: 600; }
.flow-step.failed .dot  { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.flow-step.failed .label { color: var(--c-danger); font-weight: 600; }
.flow-step:not(:last-child)::after {
  content: ''; position: absolute;
  top: 14px; left: calc(50% + 14px); right: calc(-50% + 14px);
  height: 2px; background: var(--c-border-strong);
  z-index: 0;
}
.flow-step.done:not(:last-child)::after { background: var(--c-success); }

/* ===== Tab ===== */
.tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 16px; overflow-x: auto;
}
.tabs .tab {
  padding: 10px 16px; cursor: pointer;
  font-size: 14px; color: var(--c-text-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.1s, border-color 0.1s;
}
.tabs .tab:hover { color: var(--c-text); }
.tabs .tab.active {
  color: var(--c-primary); font-weight: 600;
  border-bottom-color: var(--c-primary);
}
.tabs .tab .badge {
  background: var(--c-neutral-bg); color: var(--c-text-2);
  padding: 1px 6px; border-radius: 10px;
  font-size: 11px; margin-left: 4px;
}
.tabs .tab.active .badge { background: var(--c-primary-bg); color: var(--c-primary); }

/* ===== 描述列表 ===== */
.dl-grid {
  display: grid; grid-template-columns: 120px 1fr; gap: 8px 20px;
  font-size: 14px;
}
.dl-grid dt { color: var(--c-text-2); font-size: 13px; }
.dl-grid dd { margin: 0; color: var(--c-text); word-break: break-all; }

/* ===== 候选库列表卡片样式 (替代单调表格) ===== */
.list-card {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 16px 20px;
  margin-bottom: 10px; cursor: pointer;
  transition: border-color 0.1s, box-shadow 0.1s;
}
.list-card:hover { border-color: var(--c-primary); box-shadow: var(--shadow); }
.list-card .row1 {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.list-card .name { font-weight: 600; color: var(--c-text); font-size: 15px; }
.list-card .meta {
  color: var(--c-text-2); font-size: 13px;
  display: flex; gap: 14px; flex-wrap: wrap;
}
.list-card .meta .sep { color: var(--c-text-3); }

/* ===== Pending K3 大卡片 ===== */
.pending-card {
  background: #fff; border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-pending);
  border-radius: var(--r-md); padding: 16px 20px;
  margin-bottom: 12px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; align-items: center;
}
.pending-card .body .name {
  font-size: 15px; font-weight: 600; color: var(--c-text);
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.pending-card .body .fnumber {
  font-family: "JetBrains Mono", Consolas, monospace;
  background: var(--c-primary-bg); color: var(--c-primary);
  padding: 1px 8px; border-radius: var(--r-sm);
  font-size: 13px;
}
.pending-card .body .meta {
  color: var(--c-text-2); font-size: 13px;
  display: flex; gap: 14px; flex-wrap: wrap;
}
.pending-card .download-btn {
  padding: 10px 18px; font-size: 14px;
  background: var(--c-primary); color: #fff;
  border-radius: var(--r); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.pending-card .download-btn:hover { background: var(--c-primary-dark); text-decoration: none; }

/* ===== 模态框 ===== */
.modal {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 24px;
}
.modal-mask {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 24px;
}
.modal-card {
  background: #fff; border-radius: var(--r-md);
  width: 100%; max-width: 720px; max-height: 88vh;
  overflow-y: auto; box-shadow: var(--shadow-lg);
}
.modal-card .modal-head {
  padding: 16px 20px; border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-card .modal-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.modal-card .modal-body { padding: 20px; }
.modal-card .modal-foot {
  padding: 12px 20px; border-top: 1px solid var(--c-border);
  display: flex; justify-content: flex-end; gap: 8px;
}
.modal-card .close-btn {
  background: transparent; color: var(--c-text-3);
  border: 0; padding: 4px 8px; font-size: 18px; cursor: pointer;
}
.modal-card .close-btn:hover { color: var(--c-text); }

.bind-code-box {
  margin: 16px 0 10px;
  padding: 18px;
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-neutral-bg);
  color: var(--c-text);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
}

/* ===== 登录页 ===== */
.login-experience {
  --login-accent: #0ea5a4;
  --login-accent-2: #f97316;
  --login-accent-soft: #d9fbf2;
  --login-accent-pale: #effcf8;
  --login-panel: rgba(255, 255, 255, 0.94);
  --login-panel-border: rgba(15, 118, 110, 0.18);
  --login-ink: #12312f;
  --login-muted: #526b68;
  --login-visual-text: #143a37;
  --login-floor: rgba(14, 165, 164, 0.24);
  --login-shadow: 0 26px 70px rgba(23, 78, 75, 0.16);
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  color: var(--login-ink);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.84) 0 1px, transparent 1px 68px),
    linear-gradient(0deg, rgba(255,255,255,0.62) 0 1px, transparent 1px 68px),
    linear-gradient(120deg, rgba(255,255,255,0.74), rgba(255,255,255,0.2)),
    linear-gradient(135deg, #e6fff6 0%, #d7efff 48%, #fff0df 100%);
}
.login-theme-night {
  --login-accent: #38bdf8;
  --login-accent-2: #fbbf24;
  --login-accent-soft: rgba(56, 189, 248, 0.16);
  --login-accent-pale: rgba(255, 255, 255, 0.08);
  --login-panel: rgba(11, 24, 36, 0.88);
  --login-panel-border: rgba(148, 216, 255, 0.22);
  --login-ink: #eef8ff;
  --login-muted: #a7bfd2;
  --login-visual-text: #e8f7ff;
  --login-floor: rgba(56, 189, 248, 0.25);
  --login-shadow: 0 26px 70px rgba(0, 0, 0, 0.34);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 72px),
    linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 72px),
    linear-gradient(120deg, rgba(20, 184, 166, 0.18), rgba(251, 191, 36, 0.12)),
    linear-gradient(135deg, #08111f 0%, #123044 52%, #2a2438 100%);
}
.login-theme-mascot {
  --login-accent: #15b8a6;
  --login-accent-2: #ff6b35;
  --login-accent-soft: #fff1b8;
  --login-accent-pale: #f2fff5;
  --login-panel: rgba(255, 255, 255, 0.95);
  --login-panel-border: rgba(255, 107, 53, 0.2);
  --login-ink: #2b1f18;
  --login-muted: #6c5b4f;
  --login-visual-text: #3d281a;
  --login-floor: rgba(21, 184, 166, 0.22);
  --login-shadow: 0 26px 70px rgba(115, 72, 28, 0.18);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.76) 0 1px, transparent 1px 66px),
    linear-gradient(0deg, rgba(255,255,255,0.52) 0 1px, transparent 1px 66px),
    linear-gradient(120deg, rgba(255,255,255,0.72), rgba(255,255,255,0.18)),
    linear-gradient(135deg, #fff5c8 0%, #dcfff1 48%, #ffe0dc 100%);
}
.login-stage {
  width: min(1180px, 100%);
  min-height: 660px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  align-items: stretch;
  gap: 28px;
}
.login-visual {
  position: relative;
  min-height: 590px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 42px 52px;
  color: var(--login-visual-text);
  overflow: hidden;
}
.login-kicker {
  position: absolute;
  top: 28px;
  left: 52px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}
.login-kicker .spark {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--login-accent-2);
  transform: rotate(45deg);
  box-shadow: 18px 8px 0 -3px var(--login-accent);
}
.mascot-wrap {
  width: min(620px, 100%);
  margin: 0 auto;
}
.avatar-visual {
  position: relative;
  width: min(560px, 100%);
  margin: 0 auto;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-visual::before {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 42%, rgba(255,255,255,0.95), rgba(255,255,255,0.24) 45%, transparent 68%),
    linear-gradient(135deg, rgba(125, 211, 252, 0.2), rgba(187, 247, 208, 0.22));
  filter: blur(2px);
}
.mop-reference-avatar {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 28px 26px rgba(20, 83, 45, 0.18));
}
.mop-mascot.legacy-mascot {
  display: none;
}
.mop-mascot {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 24px 24px rgba(20, 43, 39, 0.12));
}
.mop-mascot .splash-a { fill: var(--login-accent-soft); opacity: 0.9; }
.mop-mascot .splash-b { fill: rgba(255, 255, 255, 0.42); opacity: 0.9; }
.login-theme-night .mop-mascot .splash-b { fill: rgba(148, 216, 255, 0.12); }
.mop-mascot .bubble {
  fill: #fff;
  stroke: var(--login-accent);
  stroke-width: 3;
  opacity: 0.78;
}
.mop-mascot .mop-pole,
.mop-mascot .mop-pole-back,
.mop-mascot .mop-neck,
.mop-mascot .arm,
.mop-mascot .shine,
.mop-mascot .fiber,
.mop-mascot .spray-line,
.mop-mascot .handle-grip,
.mop-mascot .water-wave,
.mop-mascot .nozzle-tip,
.mop-mascot .nozzle-smile,
.mop-mascot .tiny-brow,
.mop-mascot .workbench-line,
.mop-mascot .floor-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mop-mascot .workbench-line {
  stroke: var(--login-floor);
  stroke-width: 8;
  opacity: 0.72;
}
.mop-mascot .mop-pole {
  stroke: var(--login-ink);
  stroke-width: 13;
}
.mop-mascot .mop-pole-back {
  stroke: rgba(255, 255, 255, 0.58);
  stroke-width: 22;
}
.mop-mascot .mop-handle-top,
.mop-mascot .spray-nozzle,
.mop-mascot .hand-trigger {
  fill: var(--login-accent-2);
  stroke: var(--login-ink);
  stroke-width: 7;
  stroke-linejoin: round;
}
.mop-mascot .handle-grip,
.mop-mascot .nozzle-tip {
  stroke: var(--login-ink);
  stroke-width: 8;
}
.mop-mascot .nozzle-smile {
  stroke: var(--login-ink);
  stroke-width: 5;
}
.mop-mascot .tiny-brow {
  stroke: var(--login-ink);
  stroke-width: 5;
  opacity: 0.65;
}
.mop-mascot .tank-socket {
  fill: none;
  stroke: var(--login-ink);
  stroke-width: 9;
  stroke-linecap: round;
}
.mop-mascot .mop-reservoir {
  fill: var(--login-accent);
  stroke: var(--login-ink);
  stroke-width: 8;
  stroke-linejoin: round;
}
.mop-mascot .mop-body {
  fill: var(--login-accent);
  stroke: var(--login-ink);
  stroke-width: 8;
  stroke-linejoin: round;
}
.mop-mascot .side-panel {
  fill: var(--login-accent-pale);
  stroke: var(--login-ink);
  stroke-width: 7;
  stroke-linejoin: round;
}
.mop-mascot .side-face {
  fill: var(--login-accent-pale);
  stroke: var(--login-ink);
  stroke-width: 7;
  stroke-linejoin: round;
}
.mop-mascot .belly-drop {
  fill: #fff;
  opacity: 0.9;
  stroke: var(--login-ink);
  stroke-width: 6;
  stroke-linejoin: round;
}
.mop-mascot .water-window {
  fill: #fff;
  opacity: 0.9;
}
.mop-mascot .water-wave {
  stroke: var(--login-accent);
  stroke-width: 6;
  opacity: 0.76;
}
.mop-mascot .mop-neck {
  stroke: var(--login-accent);
  stroke-width: 20;
}
.mop-mascot .mop-head {
  fill: #fff;
  stroke: var(--login-ink);
  stroke-width: 8;
  stroke-linejoin: round;
}
.mop-mascot .mop-pad {
  fill: var(--login-accent-soft);
  stroke: var(--login-ink);
  stroke-width: 7;
  stroke-linejoin: round;
}
.mop-mascot .spray-shadow { fill: rgba(15, 23, 42, 0.12); }
.mop-mascot .spray-line {
  stroke: var(--login-accent);
  stroke-width: 7;
}
.mop-mascot .droplet {
  fill: var(--login-accent);
  opacity: 0.74;
}
.mop-mascot .arm {
  stroke: var(--login-ink);
  stroke-width: 9;
}
.mop-mascot .mitten {
  fill: var(--login-accent-2);
  stroke: var(--login-ink);
  stroke-width: 6;
}
.mop-mascot .swivel-joint {
  fill: none;
  stroke: var(--login-accent-2);
  stroke-width: 8;
  stroke-linecap: round;
}
.mop-mascot .fiber {
  stroke: color-mix(in srgb, var(--login-ink), #fff 26%);
  stroke-width: 6;
}
.mop-mascot .eye { fill: var(--login-ink); }
.mop-mascot .eye-spark { fill: #fff; }
.mop-mascot .mop-cheek {
  fill: var(--login-accent-2);
  opacity: 0.46;
}
.mop-mascot .smile {
  fill: none;
  stroke: var(--login-ink);
  stroke-width: 6;
  stroke-linecap: round;
}
.mop-mascot .shine {
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 6;
}
.mop-mascot .floor-line {
  stroke: var(--login-floor);
  stroke-width: 10;
}
.visual-copy {
  max-width: 520px;
  margin: 12px auto 0;
  text-align: center;
}
.visual-copy h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: 0;
}
.visual-copy p {
  margin: 10px auto 0;
  max-width: 430px;
  color: var(--login-muted);
  font-size: 15px;
}
.login-panel {
  align-self: center;
  width: 100%;
  background: var(--login-panel);
  border: 1px solid var(--login-panel-border);
  border-radius: 8px;
  box-shadow: var(--login-shadow);
  padding: 34px;
  backdrop-filter: blur(12px);
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.login-brand .logo {
  width: 68px;
  height: 52px;
  border-radius: 8px;
  background: var(--login-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  white-space: nowrap;
  box-shadow: 0 12px 24px rgba(14, 165, 164, 0.22);
}
.login-brand h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0;
}
.login-brand .sub {
  margin-top: 5px;
  color: var(--login-muted);
  font-size: 13px;
}
.login-theme-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 22px;
}
.login-theme-picker button {
  border: 1px solid var(--login-panel-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--login-muted);
  padding: 9px 8px;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  column-gap: 7px;
  align-items: center;
}
.login-theme-night .login-theme-picker button {
  background: rgba(255, 255, 255, 0.06);
}
.login-theme-picker button span,
.login-theme-picker button b {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.login-theme-picker button span {
  font-size: 11px;
  grid-column: 2;
}
.login-theme-picker button b {
  color: var(--login-ink);
  font-size: 13px;
  margin-top: 1px;
  grid-column: 2;
}
.theme-swatch {
  grid-row: 1 / span 2;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  box-shadow: 0 0 0 1px var(--login-panel-border);
}
.swatch-mascot { background: linear-gradient(135deg, #15b8a6, #ff6b35); }
.swatch-fresh { background: linear-gradient(135deg, #0ea5a4, #7dd3fc); }
.swatch-night { background: linear-gradient(135deg, #38bdf8, #fbbf24); }
.login-theme-picker button.active {
  border-color: var(--login-accent);
  background: var(--login-accent-pale);
  color: var(--login-ink);
}
.login-panel form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.login-panel form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--login-ink);
  font-weight: 600;
}
.login-panel form input {
  width: 100%;
  border-color: var(--login-panel-border);
  background: rgba(255, 255, 255, 0.86);
  padding: 11px 12px;
  font-size: 14px;
}
.login-theme-night .login-panel form input {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.login-theme-night .login-panel form input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.login-submit {
  margin-top: 2px;
  padding: 11px 14px;
  font-size: 15px;
  background: var(--login-accent);
}
.login-submit:hover:not(:disabled) {
  background: color-mix(in srgb, var(--login-accent), #000 10%);
}
.login-help {
  margin: 16px 0 0;
  color: var(--login-muted);
  text-align: center;
  font-size: 12px;
}

@media (max-width: 920px) {
  .login-experience { padding: 20px; }
  .login-stage {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .login-visual {
    min-height: 320px;
    padding: 54px 20px 10px;
  }
  .login-kicker {
    left: 20px;
    top: 20px;
  }
  .mascot-wrap { max-width: 380px; }
  .visual-copy h2 { font-size: 26px; }
  .visual-copy p { font-size: 14px; }
  .login-panel {
    max-width: 480px;
    margin: 0 auto;
    padding: 24px;
  }
}
@media (max-width: 520px) {
  .login-experience { padding: 12px; }
  .login-visual {
    min-height: 250px;
    padding: 48px 6px 0;
  }
  .visual-copy h2 { font-size: 22px; }
  .visual-copy p { display: none; }
  .login-panel { padding: 20px; }
  .login-brand .logo {
    width: 62px;
    height: 46px;
    font-size: 15px;
  }
  .login-brand h1 { font-size: 23px; }
  .login-theme-picker {
    grid-template-columns: 1fr;
  }
  .login-theme-picker button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
  }
  .login-theme-picker button b { margin-top: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .spray-mop-character {
    transform-origin: 260px 230px;
    animation: mop-bob 4.8s ease-in-out infinite;
  }
  .spray-cloud .spray-line,
  .mop-mascot .droplet {
    animation: spray-pulse 1.8s ease-in-out infinite;
  }
  .left-spray .spray-line,
  .left-spray .droplet {
    animation-name: spray-left-pulse;
  }
  .mop-mascot .droplet.d2 { animation-delay: 0.25s; }
  .mop-mascot .droplet.d3 { animation-delay: 0.45s; }
  .mop-mascot .bubble {
    animation: bubble-float 5.6s ease-in-out infinite;
  }
  .mop-mascot .b2 { animation-delay: 0.6s; }
  .mop-mascot .b3 { animation-delay: 1.2s; }
  .mop-mascot .b4 { animation-delay: 1.8s; }
}
@keyframes mop-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(-1deg); }
}
@keyframes spray-pulse {
  0%, 100% { opacity: 0.52; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(5px); }
}
@keyframes spray-left-pulse {
  0%, 100% { opacity: 0.52; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(-5px); }
}
@keyframes bubble-float {
  0%, 100% { transform: translateY(0); opacity: 0.72; }
  50% { transform: translateY(-10px); opacity: 1; }
}

/* ===== 工具类 ===== */
.row { display: flex; gap: 12px; align-items: center; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.gap-sm { gap: 6px; }
.gap { gap: 12px; }
.gap-lg { gap: 20px; }
.muted { color: var(--c-text-3); }
.text-secondary { color: var(--c-text-2); }
.bold { font-weight: 600; }
.mono { font-family: "JetBrains Mono", Consolas, monospace; }
.mb-0 { margin-bottom: 0; }
.mt-md { margin-top: 16px; }
.flex-1 { flex: 1; }
.text-right { text-align: right; }

/* ===== M6.14 拜访评价记录卡片 ===== */
.visit-record {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #fafbfc;
}
.visit-record-head {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; margin-bottom: 8px;
}
.visit-record-head .visit-date  { color: var(--c-text-2); }
.visit-record-head .visit-total { color: var(--c-text); font-weight: 500; }
.visit-record-head .visit-tpl   { color: var(--c-text-3); margin-left: auto; font-size: 11px; }
.visit-record-body { font-size: 13px; }
.visit-record-body .visit-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-bottom: 8px; color: var(--c-text-2);
}
.visit-scores-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.visit-scores-table th, .visit-scores-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--c-border);
  text-align: left; vertical-align: middle;     /* M6.14: 数字与文字行垂直居中对齐 */
}
.visit-scores-table th { color: var(--c-text-2); font-weight: 500; background: #f8fafc; }
.visit-scores-table th.num,
.visit-scores-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.visit-scores-table tfoot td { background: #f1f5f9; font-weight: 500; }
/* M6.14: 评分表单专用 — input 紧凑宽度 + 错误状态 */
.visit-eval-form input[type="number"] { width: 92px; text-align: right; }
.visit-eval-form input[type="text"]   { width: 100%; }
.visit-eval-form input.input-error {
  border-color: var(--c-danger); background: #fef2f2;
}
.visit-eval-form .input-error-msg {
  display: block; margin-top: 4px;
  color: var(--c-danger); font-size: 11px;
}
button:disabled {
  opacity: 0.5; cursor: not-allowed;
}
.visit-summary { margin-top: 6px; color: var(--c-text-2); }
.visit-gate-hint {
  border: 1px dashed var(--c-border-strong);
  background: #fffbea;
  border-radius: var(--r-md);
  padding: 16px;
  margin-top: 12px;
  font-size: 14px;
}
.visit-gate-hint .visit-gate-status { margin-bottom: 8px; font-weight: 500; }
.visit-gate-hint .visit-gate-msg { color: var(--c-text); margin-bottom: 8px; }
.visit-gate-hint .visit-gate-help { font-size: 12px; }

/* ===== M6.15 拜访评价雷达图 (仅 v1 模板渲染) ===== */
.visit-radar {
  display: flex; align-items: center; gap: 24px;
  margin-top: 12px; padding: 12px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  flex-wrap: wrap;            /* 窄屏自动换行 */
}
.visit-radar-svg {
  width: 240px; max-width: 100%;
  height: auto;               /* 等比响应式 */
  flex-shrink: 0;
}
.visit-radar-svg .radar-grid {
  fill: rgba(99, 102, 241, 0.04);
  stroke: var(--c-border);
  stroke-width: 1;
}
.visit-radar-svg .radar-axis {
  stroke: var(--c-border-strong);
  stroke-width: 1;
}
.visit-radar-svg .radar-data {
  fill: rgba(37, 99, 235, 0.25);
  stroke: var(--c-primary);
  stroke-width: 2;
  stroke-linejoin: round;
}
.visit-radar-svg .radar-point {
  fill: var(--c-primary);
  stroke: #fff;
  stroke-width: 1.5;
}
.visit-radar-svg .radar-label {
  fill: var(--c-text-2);
  font-size: 11px;
  font-family: inherit;
}
.visit-radar-summary {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px;
}
.visit-radar-summary .visit-radar-total strong {
  font-size: 22px; color: var(--c-primary);
}
@media (max-width: 480px) {
  .visit-radar { gap: 12px; padding: 8px; }
  .visit-radar-svg { width: 100%; max-width: 280px; }
}

/* ===== M6.16 准入评估卡片 ===== */
.assessment-card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 16px;
  background: #fafbfc;
}
.assessment-head {
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-border);
  font-size: 14px;
}
.assessment-section { margin-top: 12px; }
.assessment-section h3 {
  font-size: 13px; color: var(--c-text-2);
  text-transform: none; letter-spacing: 0;
  margin: 8px 0;
}
.risk-list, .improve-list {
  list-style: none; padding: 0; margin: 0;
}
.risk-list li, .improve-list li {
  padding: 6px 0;
  border-bottom: 1px dashed var(--c-border);
  font-size: 13px;
}
.risk-list li:last-child, .improve-list li:last-child { border-bottom: none; }
.risk-list .status { margin-right: 8px; }
.basis-pre {
  font-size: 11px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  padding: 8px;
  margin-top: 6px;
  white-space: pre-wrap; word-break: break-all;
  color: var(--c-text-2);
  max-height: 240px; overflow-y: auto;
}
.assessment-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
}
/* M6.16 .btn-danger 已合并到上方主规则 (红底白字),
   原 L892 的 !important 覆盖与 L279 默认 background 冲突, 默认红底+红字不可见 */

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .sidebar { width: 64px; }
  .sidebar-brand { padding: 16px 3px; }
  .sidebar-brand .logo { width: 58px; font-size: 12px; }
  .sidebar-brand .brand-text,
  .sidebar-foot .user-info,
  .sidebar-nav a span:not(.nav-icon),
  .sidebar-nav .group-label { display: none; }
  .sidebar-nav a.sub-group-toggle,
  .sidebar-nav a.sub-item,
  .sidebar-nav a.leaf-item { padding-left: 12px; }
  .form-grid { grid-template-columns: 1fr; }
  .pending-card { grid-template-columns: 1fr; }
}

/* ===== M8 生产管理 ===== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  /* 不用 overflow:hidden — 行内浮层 (员工搜索下拉) 需要溢出 */
  font-size: 13px;
}
.data-table td { position: relative; }
.data-table th,
.data-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  vertical-align: middle;
}
.data-table th {
  background: var(--c-neutral-bg);
  font-weight: 600;
  color: var(--c-text-2);
  white-space: nowrap;
}
.data-table tbody tr:hover { background: var(--c-primary-bg); }
.data-table tbody tr:last-child td { border-bottom: 0; }

.freight-alloc-table {
  table-layout: fixed;
  min-width: 1380px;
}
col.freight-alloc-product-col { width: 520px; }
col.freight-alloc-qty-col { width: 110px; }
col.freight-alloc-unit-col { width: 130px; }
col.freight-alloc-budget-col { width: 150px; }
col.freight-alloc-status-col { width: 170px; }
col.freight-alloc-remark-col { width: 280px; }
col.freight-alloc-action-col { width: 60px; }
.freight-alloc-table th,
.freight-alloc-table td {
  padding: 9px 16px;
  text-align: center !important;
  vertical-align: middle;
}
.freight-alloc-table input,
.freight-alloc-table select {
  margin-left: auto;
  margin-right: auto;
  text-align: center !important;
}
.freight-alloc-table .freight-product-input {
  width: 100%;
  min-width: 0;
  font-size: 12px;
  line-height: 1.2;
  text-align: left !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.freight-alloc-status-cell { padding-left: 24px !important; }
.freight-alloc-remark-cell { padding-left: 28px !important; }
.freight-alloc-remark-cell input { width: 180px; }
.freight-unit-input {
  width: 96px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.freight-unit-readonly {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  min-height: 35px;
  padding: 7px 10px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.freight-budget-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  white-space: nowrap;
}
.freight-budget-readonly {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 82px;
  min-width: 82px;
  min-height: 32px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid #d7e1ee;
  border-radius: 6px;
  background: #f7fafc;
  color: #1f2937;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.freight-budget-readonly.empty {
  color: #94a3b8;
  font-weight: 500;
}
.freight-budget-source {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
}

.data-table th.sortable {
  cursor: pointer;
  user-select: none;
}
.data-table th.sortable:hover { background: var(--c-primary-bg); color: var(--c-primary-dark); }

.batch-report-qty-cell {
  text-align: right;
  white-space: nowrap;
}
.batch-report-qty-cell input {
  width: 76px;
  text-align: right;
  font-weight: 600;
}
.batch-report-limit-note {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 11px;
  white-space: nowrap;
}
.batch-report-over-badge {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 4px;
  border: 1px solid #f59e0b;
  border-radius: 3px;
  background: #fef3c7;
  color: #92400e;
  font-weight: 600;
  line-height: 1;
}

/* E.4.2: 序时薄列拉伸 + 列序拖动 (K3 风格) */
/* E.4.3: 字号缩小一号 (14 → 13) */
.piece-resizable th,
.piece-resizable td { font-size: 13px; }
.piece-resizable th.piece-th {
  position: relative;
  cursor: grab;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.piece-resizable th.piece-th.text-right { text-align: right; }
.piece-resizable th.piece-th.text-center { text-align: center; }
.piece-resizable td.text-right { text-align: right; }
.piece-resizable td.text-center { text-align: center; }
.piece-resizable th.piece-th.dragging { opacity: 0.4; }
.piece-resizable th.piece-th.drag-over {
  background: var(--c-primary-bg);
  box-shadow: inset -3px 0 0 var(--c-primary);
}
.col-resizer {
  position: absolute;
  top: 0;
  right: 0;            /* 原 -3px: 手柄半截在 th 外, 被 .piece-th 的 overflow:hidden 裁掉, 只剩 ~3px 几乎抓不到 → 列宽拉不动 */
  width: 10px;         /* 原 6px: 加大热区, 便于抓取拖拽 */
  height: 100%;
  cursor: col-resize;
  z-index: 6;
  user-select: none;
  pointer-events: auto;
  touch-action: none;
}
.piece-resizable th.piece-th:hover .col-resizer { background: var(--c-primary); opacity: 0.22; }  /* 悬停表头即露出列宽手柄, 便于发现可拖拽 */
.col-resizer:hover { background: var(--c-primary); opacity: 0.5; }
.piece-resizable td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.piece-resizable th.select-col,
.piece-resizable td.select-col {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  padding: 8px 6px;
  text-align: center;
  overflow: visible;
  text-overflow: clip;
}
/* E.4.3: 操作列 改/审/删 纵向叠列 (一列三按钮) */
.piece-resizable td.piece-action-col {
  padding: 4px 6px;
  overflow: visible;
  white-space: normal;
}
.piece-resizable td.piece-action-col .action-btn {
  display: block;
  width: 100%;
  margin: 2px 0;
  padding: 3px 6px;
  font-size: 12px;
  line-height: 1.2;
}
.piece-resizable td.salary-expense-cell {
  overflow: visible;
  padding: 5px 8px;
}
.salary-expense-select {
  display: block;
  width: 100%;
  min-width: 0;
  height: 34px;
  line-height: 32px;
  padding: 0 30px 0 10px;
  font-size: 13px;
  box-sizing: border-box;
}
/* E.5q/r/s: K3 风格网格 (老板 2026-05-16) — 白底 + 列纵线 + 外边框 + 单据组开始线; 单据内行间无横线 */
.piece-resizable {
  width: auto;                     /* 关键: 覆盖 .data-table 的 width:100%; 让 table-layout:fixed 严格按列宽渲染, 不把富余宽度摊给各列 → 列宽拖动 1:1 生效, 窄表 (后勤工资/成本分摊) 不再被拉伸吞掉拖动量 */
  background: #fff;
  border-collapse: collapse;
  border: 1px solid #cbd5e1;       /* 外边框 */
}
.piece-resizable thead th {
  background: #f8fafc;             /* 表头浅灰底 */
  border-right: 1px solid #e5e7eb; /* 列纵线 */
  border-bottom: 1px solid #cbd5e1;/* 表头下加粗分隔 */
}
.piece-resizable thead th:last-child { border-right: 0; }
.piece-resizable tbody td {
  background: #fff;
  border-right: 1px solid #e5e7eb; /* 列纵线 */
  border-bottom: 0;                /* 单据内行间无横线 (覆盖 .data-table 默认 1px) */
  border-top: 0;
}
.piece-resizable tbody td:last-child { border-right: 0; }
.piece-resizable tbody tr.bill-row-first td {
  border-top: 1px solid #cbd5e1;   /* 单据组上边线 */
}
.piece-resizable tbody tr.bill-row-last td {
  border-bottom: 1px solid #cbd5e1;/* 单据组下边线 — 形成完整方框 (老板 2026-05-16) */
}
/* 6/16: 单据编号单元格 — + 展开钮 / 单号 / 工序数 垂直居中, 水平跟随列对齐 (justifyContent 由模板绑定) */
.bill-no-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  vertical-align: middle;
}
.bill-expand-toggle {
  position: relative;
  display: inline-flex;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #f8fafc;
  color: var(--c-primary-dark);
  font-size: 0;            /* 6/16: 隐藏 +/- 字形, 改伪元素绘制保证方框正中 (字体字形会偏下) */
  cursor: pointer;
  vertical-align: middle;
}
/* +/− 用横竖两根杠绘制, 绝对居中, 与字体无关 */
.bill-expand-toggle::before,
.bill-expand-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 1px;
}
.bill-expand-toggle::before { width: 9px; height: 2px; transform: translate(-50%, -50%); }  /* 横杠 (始终有) */
.bill-expand-toggle::after  { width: 2px; height: 9px; transform: translate(-50%, -50%); }  /* 竖杠 (折叠态 = +) */
.bill-expand-toggle.is-open::after { display: none; }                                       /* 展开态 = 只剩横杠 − */
.bill-expand-toggle:hover {
  background: #eff6ff;
  border-color: var(--c-primary);
}
/* E.5s: 单行选中高亮 (不整组) — 老板 2026-05-16 要求每行可独立选 */
.piece-resizable tbody tr.is-selected td {
  background: #dbeafe !important;
  outline: 1px solid var(--c-primary);
  outline-offset: -1px;
}
.piece-resizable tbody tr:hover td {
  background: #eff6ff;
}
.piece-resizable tbody tr.is-selected:hover td {
  background: #bfdbfe !important;
}
.sales-docs-ledger-table tbody td,
.sales-docs-ledger-table tbody td .mono,
.sales-docs-ledger-table tbody td a.mono {
  font-family: inherit;
  font-size: 13px;
}
.sales-docs-ledger-table tbody td .status-pill {
  font-size: 13px;
}
.sales-freight-ledger-table tbody td,
.sales-freight-ledger-table tbody td .mono {
  font-family: inherit;
  font-size: 13px;
}
.sales-freight-ledger-table tbody td {
  vertical-align: middle;
  text-align: center;
}
.sales-freight-ledger-table tbody td.sales-freight-detail-cell {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.sales-freight-ledger-table .sales-freight-detail-line {
  display: inline-block;
  min-height: 20px;
  line-height: 20px;
  font-size: 13px;
  font-family: inherit;
}
.sales-freight-ledger-table .sales-freight-product-detail .sales-freight-detail-line {
  white-space: normal;
  word-break: break-all;
}
.sales-freight-ledger-table tbody td .status-pill {
  font-size: 13px;
}
.sales-freight-title-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sales-freight-title-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sales-freight-title-btn svg {
  flex: 0 0 auto;
  color: var(--c-primary-dark);
}
.sales-freight-tabs {
  margin-top: -2px;
  margin-bottom: 12px;
}
.sales-freight-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 12px;
  align-items: start;
}
.sales-freight-summary-card h2 {
  margin-bottom: 10px;
}
.sales-freight-summary-table th,
.sales-freight-summary-table td {
  font-family: inherit;
  font-size: 13px;
  text-align: center;
  vertical-align: middle;
}
.sales-freight-summary-table .mono {
  font-family: inherit;
  font-size: 13px;
}
.sales-freight-summary-customer {
  display: inline-block;
  max-width: 210px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  vertical-align: bottom;
}
/* F.7.1: 财务退回行标红 (报工/财务序时薄共用; 提醒报工主管修改) */
.piece-resizable tbody tr.row-rejected td,
.data-table tbody tr.row-rejected td {
  background: #fee2e2 !important;
}
/* L.1: 通用 data-table 行选中高亮 (派工序时薄等不用 piece-resizable 的页面) */
.data-table tbody tr.is-selected td {
  background: #dbeafe !important;
  outline: 1px solid var(--c-primary);
  outline-offset: -1px;
}
.data-table tbody tr.is-selected:hover td {
  background: #bfdbfe !important;
}
/* F.7.1: 录入界面 form 内退回行标红 + 高亮; 其他行 muted 表示不可改 */
.form-detail-center tbody tr.row-rejected-form td {
  background: #fee2e2;
  border-left: 3px solid var(--c-danger);
}
.form-detail-center tbody tr.row-rejected-form input,
.form-detail-center tbody tr.row-rejected-form select,
.form-detail-center tbody tr.row-rejected-form textarea {
  background: #fff;
  border-color: var(--c-danger);
}
/* F.7.2: 报工进度 — 弧状充电环 (手机充电图标风格; 微信小程序也将复用) */
.prog-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}
.prog-ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: relative;
  /* conic-gradient: 从 12 点位置顺时针绘弧; --prog-pct 0-100, --prog-color 绿/红 */
  background: conic-gradient(from -90deg,
                              var(--prog-color, #10b981) calc(var(--prog-pct, 0) * 1%),
                              #e5e7eb 0);
}
.prog-ring::before {
  /* 内白圆 — 形成"环"而非"饼" */
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
}
.prog-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--prog-color, #10b981);
  letter-spacing: -0.5px;
}
.prog-label {
  font-size: 10px;
  color: #047857;
  white-space: nowrap;
  line-height: 1.2;
  font-weight: 600;
}
.prog-label-placeholder {
  visibility: hidden;
}
.prog-label.fail { color: var(--c-danger); }
.prog-label.idle { color: #94a3b8; font-weight: normal; }

/* F.7.1: form 内一旦有红行, 其他行视觉 readonly (后端 guard 已拦保存; UX 提前提示) */
.form-detail-center.has-rejected-row tbody tr:not(.row-rejected-form) td {
  background: #f9fafb;
  opacity: 0.65;
}
.form-detail-center.has-rejected-row tbody tr:not(.row-rejected-form) input,
.form-detail-center.has-rejected-row tbody tr:not(.row-rejected-form) select,
.form-detail-center.has-rejected-row tbody tr:not(.row-rejected-form) textarea,
.form-detail-center.has-rejected-row tbody tr:not(.row-rejected-form) button {
  pointer-events: none;
  background: #f3f4f6 !important;
  cursor: not-allowed;
}
.piece-resizable tbody tr.row-rejected:hover td,
.data-table tbody tr.row-rejected:hover td {
  background: #fecaca !important;
}
.piece-resizable tbody tr.row-rejected.is-selected td,
.data-table tbody tr.row-rejected.is-selected td {
  background: #fca5a5 !important;
  outline: 1px solid var(--c-danger);
}
/* E.5g: 序时薄工具栏单据级按钮组 (改/复核/反审/删除/复制) */
.piece-toolbar .row-action-grp {
  display: inline-flex;
  gap: 4px;
  padding: 0 6px;
  margin: 0 4px;
  border-left: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
}
.piece-toolbar .bulk-action-grp {
  display: inline-flex;
  gap: 4px;
}
/* E.5l: 图标按钮 (SVG + 文字) — 按动作类型上色 */
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  height: 28px;
  font-size: 12px;
  line-height: 1;
  border-radius: 4px;
  border: 1px solid var(--c-border);
  background: var(--c-card);
  color: var(--c-text-2);
  cursor: pointer;
  transition: all 0.12s;
  user-select: none;
}
.btn-icon:hover:not(:disabled) {
  background: var(--c-primary-bg);
  border-color: var(--c-primary);
  color: var(--c-text-1);
}
.btn-icon:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-icon svg { flex-shrink: 0; pointer-events: none; }
.btn-icon-edit       svg { color: #2563eb; }            /* 蓝 — 修改 */
.btn-icon-check      svg { color: var(--c-success); }   /* 绿 — 复核 */
.btn-icon-uncheck    svg { color: var(--c-warning); }   /* 橙 — 反审 */
.btn-icon-delete     svg { color: var(--c-danger); }    /* 红 — 删除 */
.btn-icon-copy       svg { color: #2563eb; }            /* 蓝 — 复制 */
.btn-icon-bulk-check    { border-color: #86efac; background: #f0fdf4; }
.btn-icon-bulk-check svg { color: #16a34a; }
.btn-icon-bulk-check:hover:not(:disabled) { background: #dcfce7; border-color: #16a34a; }
.btn-icon-bulk-uncheck    { border-color: #fed7aa; background: #fff7ed; }
.btn-icon-bulk-uncheck svg { color: #ea580c; }
.btn-icon-bulk-uncheck:hover:not(:disabled) { background: #ffedd5; border-color: #ea580c; }
/* E.6.2: 工序管理操作按钮配色 (绿启用/橙停用/星金黄/蓝编辑/灰未标) */
.btn-icon-success    { border-color: #86efac; background: #f0fdf4; color: #16a34a; }
.btn-icon-success svg { color: #16a34a; }
.btn-icon-success:hover:not(:disabled) { background: #dcfce7; border-color: #16a34a; }
.btn-icon-warn       { border-color: #fed7aa; background: #fff7ed; color: #ea580c; }
.btn-icon-warn svg   { color: #ea580c; }
.btn-icon-warn:hover:not(:disabled) { background: #ffedd5; border-color: #ea580c; }
.btn-icon-primary    { border-color: #93c5fd; background: #eff6ff; color: #2563eb; }
.btn-icon-primary svg { color: #2563eb; }
.btn-icon-primary:hover:not(:disabled) { background: #dbeafe; border-color: #2563eb; }
.btn-icon-muted      { border-color: #e5e7eb; background: #f9fafb; color: #6b7280; }
.btn-icon-muted svg  { color: #9ca3af; }
.btn-icon-muted:hover:not(:disabled) { background: #f3f4f6; border-color: #9ca3af; color: #374151; }
/* 操作列按钮间距 */
.table-wrap td.actions { display: table-cell; }
.table-wrap td.actions .btn-icon { margin-right: 4px; }
.table-wrap td.actions .btn-icon:last-child { margin-right: 0; }
/* E.6.5: Excel 风格 sheet 切换 tab (启用/停用 双 sheet) */
.sheet-tabs {
  display: flex;
  border-bottom: 1px solid var(--c-border);
  background: #f1f5f9;
  padding: 0 8px;
}
.sheet-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  margin-right: 2px;
  font-size: 13px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background: transparent;
  color: var(--c-text-2);
  cursor: pointer;
  transition: all 0.12s;
  position: relative;
  top: 1px;
}
.sheet-tab:hover { background: rgba(255, 255, 255, 0.6); color: var(--c-text-1); }
.sheet-tab.active {
  background: #ffffff;
  border-color: var(--c-border);
  color: var(--c-primary-dark);
  font-weight: 600;
}
.sheet-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  background: var(--c-primary-bg);
  color: var(--c-primary-dark);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
}
.sheet-tab:not(.active) .sheet-tab-count { background: rgba(0, 0, 0, 0.06); color: var(--c-text-2); }
/* E.5m: 录入界面顶部审核状态条 (右侧) */
.form-bill-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.form-bill-head h2 { margin: 0; }
.bill-status-area {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 12px;
  white-space: nowrap;
}
.status-pill-pending { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.status-pill-checked { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.status-pill-danger { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.status-pill-readonly { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
/* E.5m: 编辑模式 + 已审核 → form 整体锁 (fieldset disabled), 灰底 + 不可点 */
fieldset.form-body-lock {
  border: 0;
  padding: 0;
  margin: 0;
}
fieldset.form-body-lock[disabled] input,
fieldset.form-body-lock[disabled] select,
fieldset.form-body-lock[disabled] textarea,
fieldset.form-body-lock[disabled] button {
  background-color: #f5f5f5 !important;
  cursor: not-allowed;
}
fieldset.form-body-lock[disabled] .emp-dropdown { display: none !important; }
.injection-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 18px;
}
.injection-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: var(--c-text-2);
}
.injection-form-field > span {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
}
.injection-form-field b {
  color: var(--c-danger);
  font-weight: 700;
}
.injection-form-field input,
.injection-form-field select,
.injection-form-field textarea {
  width: 100%;
  min-width: 0;
}
.injection-form-field textarea {
  min-height: 82px;
}
.injection-form-field-full {
  grid-column: 1 / -1;
}

/* 列设置 modal (K3 序时薄"表格设置"风格) */
.col-settings-mask {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(15, 23, 42, 0.4);
}
.col-settings-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background: var(--c-card);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  width: 360px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.col-settings-modal .modal-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-neutral-bg);
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
}
.col-settings-modal .modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.col-settings-modal .modal-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--c-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.col-settings-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}
.col-settings-item:hover { background: var(--c-primary-bg); }
.col-settings-item input[type="checkbox"] { margin: 0; width: 16px; height: 16px; cursor: pointer; }
/* E.5f: 列设置 K3 风格表格 (序号|字段名|显示|对齐方式) */
.col-settings-modal { width: 460px; }
.col-settings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.col-settings-table th,
.col-settings-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
}
.col-settings-table thead th {
  background: var(--c-neutral-bg);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}
.col-settings-table tbody tr:hover { background: var(--c-primary-bg); }
/* E.7.1/2/3: 序号 th + td 统一居中; width 加宽 36→56px 防"序号"两字溢出导致 th 跟 td 位置不一致 */
.col-settings-table th.cs-num,
.col-settings-table td.cs-num { width: 56px; min-width: 56px; text-align: center; color: var(--c-text-3); padding: 5px 4px; }
.col-settings-table th.cs-show,
.col-settings-table td.cs-show { width: 50px; text-align: center; padding: 5px 4px; }
.col-settings-table th.cs-align,
.col-settings-table td.cs-align { width: 110px; }
.col-settings-table td.cs-align select { width: 100%; padding: 2px 4px; font-size: 12px; }
.col-settings-table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; margin: 0; }

/* E.4.7/8: 物料清单 (K3 PPBOM) modal — 复用 modal-head/body/foot 三段式 */
.ppbom-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--c-card);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.ppbom-modal .modal-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-neutral-bg);
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
}
.ppbom-modal .modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.ppbom-modal .modal-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--c-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 修改单据 modal */
.edit-bill-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background: var(--c-card);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.edit-bill-modal .modal-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-neutral-bg);
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
}
.edit-bill-modal .modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.edit-bill-modal .modal-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--c-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.bom-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.bom-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--c-primary-bg);
  border: 1px solid var(--c-primary-light);
  border-radius: 16px;
  color: var(--c-primary-dark);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.bom-chip:hover { background: var(--c-primary-light); border-color: var(--c-primary); }
.bom-chip strong { color: var(--c-primary-dark); font-weight: 700; }

/* 工序行员工搜索下拉 (Phase E.3) */
.emp-picker {
  position: relative;
  width: 100%;
}
.emp-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  max-height: 240px;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
  margin-top: 2px;
}
.emp-item {
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--c-border);
}
.emp-item:last-child { border-bottom: 0; }
.emp-item:hover { background: var(--c-primary-bg); }
.emp-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--c-text-3);
  font-size: 16px;
  user-select: none;
  z-index: 2;
}
.emp-clear:hover { color: var(--c-danger); }

/* E.5ac: 录入界面明细表 (小件 + 总装) 表头 + 内容居中 */
table.form-detail-center thead th,
table.form-detail-center tbody td { text-align: center !important; vertical-align: middle; }
table.form-detail-center tbody td input,
table.form-detail-center tbody td select { text-align: center !important; }
/* 工资/合计等强调金额仍右对齐 (tfoot 合计行) */
table.form-detail-center tfoot td { text-align: right; }
table.form-detail-center tfoot td[colspan] { /* 居中按钮区由 inline style 控制 */ }

/* L.1: 小件派工序时薄 紧凑过滤条 + 工具栏 (单行, 跟小件报工序时薄风格一致) */
.filter-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  flex-wrap: wrap;
}
.filter-toolbar .inline-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--c-text-2);
  margin: 0;
}
.filter-toolbar .inline-label input { margin: 0; }
.filter-toolbar .input-with-icon {
  position: relative;
  display: inline-block;
}
.filter-toolbar .input-with-icon .ii-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--c-text-3);
  pointer-events: none;
}

/* L.2 (5/23): 计划看板 — 生产报工链接按钮组 (跨模块美化) */
.dispatch-pager {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 10px;
  flex-wrap: wrap;
}
.dispatch-pager-bottom {
  padding: 10px 0 0;
}
.dispatch-pager .muted {
  font-size: 12px;
  line-height: 1.4;
}

.report-link-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  min-width: 104px;
  padding: 2px 0;
}
.report-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 26px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  text-align: left;
  white-space: nowrap;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.report-link::before {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}
.report-link:hover {
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}
.report-link:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
}
.report-link:focus-visible {
  outline: 2px solid rgba(21, 184, 166, 0.35);
  outline-offset: 2px;
}
.report-link.link-dispatch {
  background: #F8FBFF;
  color: #1D4ED8;
  border-color: #BFDBFE;
}
.report-link.link-dispatch::before {
  content: "派";
  background: #2563EB;
}
.report-link.link-dispatch:hover {
  background: #EFF6FF;
  border-color: #60A5FA;
}
.report-link.link-piece {
  background: #F7FEFA;
  color: #15803D;
  border-color: #BBF7D0;
}
.report-link.link-piece::before {
  content: "报";
  background: #16A34A;
}
.report-link.link-piece:hover {
  background: #ECFDF5;
  border-color: #4ADE80;
}
.report-link.link-assembly {
  background: #FFFBEB;
  color: #B45309;
  border-color: #FDE68A;
}
.report-link.link-assembly::before {
  content: "总";
  background: #F59E0B;
}
.report-link.link-assembly:hover {
  background: #FEF3C7;
  border-color: #FBBF24;
}

/* ===== UPPH 仪表盘 (6/8) ===== */
.upph-line-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.upph-chip { font-size: 12px; color: #555; background: #f3f4f6; border-radius: 12px; padding: 3px 10px; }
.upph-subtitle { margin: 14px 0 4px; font-size: 14px; color: #1f2937; }
.upph-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.upph-table th, .upph-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #eef0f2; vertical-align: middle; }
.upph-table th { color: #6b7280; font-weight: 600; background: #fafbfc; }
.upph-progress { display: inline-flex; align-items: center; gap: 6px; min-width: 120px; }
.upph-progress > div { position: relative; flex: 1; height: 10px; background: #eef0f2; border-radius: 5px; overflow: hidden; }
.upph-progress-bar { position: absolute; left: 0; top: 0; height: 100%; background: #5B8FF9; border-radius: 5px; }
.upph-progress > span { font-size: 12px; color: #555; min-width: 36px; }
.upph-badge { display: inline-block; color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.dash-tabs { display: flex; gap: 4px; border-bottom: 2px solid #e5e7eb; margin-bottom: 16px; }
.dash-tab { background: none; border: none; padding: 10px 18px; font-size: 15px; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; font-weight: 500; }
.dash-tab:hover { color: #1f2937; }
.dash-tab.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }

/* M12: 现场考察照片 + 供应商3D报告 */
.visit-photo-block { margin-top: 10px; }
.visit-photo-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.visit-photo-upload { cursor: pointer; }
.visit-photo-upload input[type="file"] { display: none; }
.visit-photo-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.visit-photo-cell { position: relative; width: 110px; height: 82px; border: 1px solid #e5e6eb; border-radius: 6px; overflow: hidden; }
.visit-photo-cell img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.visit-photo-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; line-height: 16px; padding: 0; border: none; border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; cursor: pointer; font-size: 12px; }
.visit-photo-del:hover { background: rgba(220,38,38,0.8); }

/* ICP / 公安备案 页脚 (登录页底部亮号, 合规要求) */
.beian-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-size: 12px;
  line-height: 1.5;
  color: #6b7280;
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.beian-bar .beian-link {
  color: #6b7280;
  text-decoration: none;
}
.beian-bar .beian-link:hover { color: #15B8A6; text-decoration: underline; }