/* ============================================================
   星曜 ERP / MES —— 样式表
   浅色企业风格，无任何外部依赖
   ============================================================ */

:root {
  --bg: #f5f7fa;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --border: #e8edf4;
  --border-2: #eef2f7;
  --text: #1e293b;
  --text-2: #475569;
  --muted: #8794a8;
  --primary: #2563eb;
  --primary-d: #1d4ed8;
  --primary-l: #eef4ff;
  --teal: #0d9488;
  --amber: #d97706;
  --red: #dc2626;
  --green: #16a34a;
  --purple: #7c3aed;
  --radius: 12px;
  --radius-s: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .05);
  --shadow-lg: 0 12px 40px rgba(16, 24, 40, .16);
  --sidebar-w: 232px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
::-webkit-scrollbar-track { background: transparent; }

/* ================= 骨架 ================= */
#app { height: 100%; }
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: minmax(0, 1fr); height: 100%; overflow: hidden; }
.shell.collapsed { grid-template-columns: 56px 1fr; }

/* -------- 侧边栏 -------- */
.sidebar {
  background: #ffffff;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
}
.brand {
  height: 56px; flex: 0 0 56px; display: flex; align-items: center; gap: 9px;
  padding: 0 14px; border-bottom: 1px solid var(--border-2); overflow: hidden;
}
/* 品牌角标 = 商标图（_dev/_mk_brand_logo.py 产出）。
   图自带深蓝底 + 发光徽记，故**去掉原来的蓝色渐变底与投影**，否则会在图外围
   多出一圈蓝边、和图上底色对不上。object-fit 保证非正方形时也不变形。 */
.brand .logo {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px;
  object-fit: cover; display: block;
  background: #0b1c46;   /* 图未加载完时的兜底底色，接近商标底色避免闪白 */
}
.brand .tt { line-height: 1.15; overflow: hidden; }
.brand .tt b { display: block; font-size: 13.5px; white-space: nowrap; }
.brand .tt span { font-size: 10.5px; color: var(--muted); white-space: nowrap; letter-spacing: .5px; }
.collapsed .brand .tt { display: none; }

.menu { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 8px 10px 20px; }
.menu::-webkit-scrollbar { width: 6px; }
.menu::-webkit-scrollbar-thumb { background: #cfd8e3; border-radius: 3px; }
.menu::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.menu::-webkit-scrollbar-track { background: transparent; }
.menu-group > .gt {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px; margin-top: 4px;
  font-size: 14px; color: var(--text-2); font-weight: 600; cursor: pointer;
  user-select: none; border-radius: var(--radius-s);
}
.menu-group > .gt:hover { background: var(--panel-2); }
.menu-group > .gt .gt-ic { width: 21px; text-align: center; font-size: 16px; line-height: 1; filter: saturate(.9); }
.menu-group > .gi { display: none; }
.menu-group.open > .gi { display: block; }
.collapsed .menu-group > .gt { justify-content: center; padding: 8px 0; }
.collapsed .menu-group > .gt .gt-label { display: none; }

.mi {
  display: flex; align-items: center; gap: 8px;
  margin: 1px 0 1px 14px; padding: 7px 10px 7px 12px; color: var(--text-2); cursor: pointer;
  border-radius: var(--radius-s); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-size: 12.8px;
  border-left: 2px solid transparent; position: relative;
}
.mi::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #cbd5e1; flex: 0 0 5px; }
.mi:hover { background: var(--panel-2); color: var(--text); }
.mi.active { background: var(--primary-l); color: var(--primary); border-left-color: var(--primary); font-weight: 600; }
.mi.active::before { background: var(--primary); }
.collapsed .mi { margin-left: 0; justify-content: center; }
.collapsed .mi .mt { display: none; }
.menu-group.active > .gt { background: var(--primary-l); color: var(--primary); }
.menu-group.active > .gt .gt-ic { filter: none; }

/* -------- 侧栏悬停面板 --------
   面板必须 position:fixed 且挂在 body 上：.menu 是 overflow-y:auto 的滚动
   容器，若用 absolute 定位会被它裁掉（滚动区外的部分直接不可见）。
   定位由 app.js 按 .gt 的 rect 实时计算。 */
.navpanel {
  position: fixed; z-index: 900; display: none;
  min-width: 380px; max-width: 640px;
  max-height: calc(100vh - 20px); overflow-y: auto;
  background: #fff; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg);
  padding: 14px 20px 18px;
}
.navpanel.show { display: block; }
.navpanel .np-title {
  font-size: 16px; font-weight: 700; color: var(--text);
  padding: 0 0 10px 22px; border-bottom: 1px solid var(--border-2);
}
.navpanel .np-sec { padding-top: 13px; }
.navpanel .np-h {
  display: flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 7px;
}
.navpanel .np-h svg { flex: 0 0 15px; color: var(--text-2); }
.navpanel .np-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 10px; row-gap: 1px; padding-left: 22px;
}
.navpanel .np-i {
  display: block; padding: 6px 10px; border-radius: var(--radius-s);
  font-size: 13.8px; color: var(--text-2); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.navpanel .np-i:hover { background: var(--panel-2); color: var(--primary); }
.navpanel .np-i.active { background: var(--primary-l); color: var(--primary); font-weight: 600; }

/* -------- 主区 -------- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.topbar {
  height: 56px; flex: 0 0 56px; background: #fff; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
}
.icon-btn {
  width: 30px; height: 30px; border-radius: var(--radius-s); border: 1px solid transparent;
  background: transparent; cursor: pointer; color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.icon-btn:hover { background: var(--panel-2); border-color: var(--border); }
.crumb { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.crumb b { color: var(--text); font-size: 15px; font-weight: 600; }
.topbar .spacer { flex: 1; }
.top-search {
  width: 240px; height: 30px; border: 1px solid var(--border); border-radius: 15px;
  padding: 0 12px; background: var(--panel-2); outline: none;
}
.top-search:focus { border-color: var(--primary); background: #fff; }
.who { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid var(--border); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--primary);
  color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(37, 99, 235, .3);
}
.who .nm { line-height: 1.2; }
.who .nm b { display: block; font-size: 12.5px; }
.who .nm span { font-size: 10.5px; color: var(--muted); }

/* -------- 顶部页签栏 -------- */
.tabbar {
  flex: 0 0 34px; height: 34px; display: flex; align-items: flex-end; gap: 2px;
  padding: 0 10px; background: var(--panel-2); border-bottom: 1px solid var(--border);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.tabbar::-webkit-scrollbar { height: 4px; }
.tabbar::-webkit-scrollbar-thumb { background: #d3dce8; border-radius: 2px; }
.tabbar:empty { display: none; }
.ptab {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px; height: 28px;
  max-width: 180px; padding: 0 12px; border: 1px solid transparent; border-bottom: none;
  border-radius: 7px 7px 0 0; cursor: pointer; user-select: none;
  font-size: 12.5px; color: var(--text-2); white-space: nowrap;
}
.ptab:hover { background: #eef2f8; color: var(--text); }
.ptab .pt-dot { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; flex: 0 0 6px; }
.ptab .pt-pin { font-size: 11px; line-height: 1; }
.ptab .pt-tt { overflow: hidden; text-overflow: ellipsis; }
.ptab.active {
  background: #fff; border-color: var(--border); color: var(--primary);
  font-weight: 600; box-shadow: 0 -2px 6px rgba(15, 23, 42, .04);
}
.ptab.active .pt-dot { background: var(--primary); }
.ptab.pinned { max-width: 200px; }
.ptab-menu {
  position: fixed; z-index: 950; min-width: 132px; padding: 4px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-lg); font-size: 12.5px;
}
.ptab-mi {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: 6px; color: var(--text-2); cursor: pointer;
}
.ptab-mi .ic { font-size: 11px; width: 14px; text-align: center; }
.ptab-mi:hover { background: var(--panel-2); color: var(--text); }
.ptab-mi.danger, .ptab-mi.danger:hover { color: #dc2626; }

.content { flex: 1 1 0; min-height: 0; overflow: auto; padding: 16px; overscroll-behavior: contain; }
.content.plain { padding: 0; }

/* ================= 通用组件 ================= */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card + .card { margin-top: 14px; }
.card-hd {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-bottom: 1px solid var(--border-2);
}
.card-hd h3 { margin: 0; font-size: 14px; font-weight: 600; }
.card-hd .spacer { flex: 1; }
.card-bd { padding: 14px; }
.card-bd.tight { padding: 0; }

.toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--border-2); background: var(--panel);
}
.toolbar .spacer { flex: 1; }

/* ---------- 列表页左侧类别树面板（按类别查询） ---------- */
.list-split { display: flex; align-items: stretch; min-width: 0; }
.list-split > .card-bd { flex: 1 1 auto; min-width: 0; }
.cat-panel {
  flex: 0 0 228px; width: 228px; padding: 8px 6px 12px;
  border-right: 1px solid var(--border-2); background: var(--panel-2);
}
.cat-panel .cp-hd { display: flex; align-items: center; gap: 8px; padding: 2px 8px 9px; }
.cat-panel .cp-hd b { font-size: 13px; font-weight: 600; }
.cat-panel .cp-hd .spacer { flex: 1; }
.cat-panel .cp-link { font-size: 12px; cursor: pointer; }
.cat-panel .cp-link:hover { text-decoration: underline; }
.cat-panel .cp-body { max-height: 62vh; overflow: auto; }
.cat-panel .cat-node {
  display: flex; align-items: center; gap: 4px; padding: 5px 8px;
  border-radius: 6px; font-size: 13px; color: var(--text-2); cursor: pointer;
  white-space: nowrap; user-select: none;
}
.cat-panel .cat-node:hover { background: #eef2f8; color: var(--text); }
.cat-panel .cat-node.on { background: var(--primary-l); color: var(--primary); font-weight: 600; }
.cat-panel .cat-node .cn-tgl { width: 13px; text-align: center; color: #94a3b8; font-size: 11px; }
.cat-panel .cat-node .cn-ic { font-size: 12px; filter: saturate(.9); }
.cat-panel .cat-node .cn-nm { overflow: hidden; text-overflow: ellipsis; }
.cat-panel .cat-node .cn-ct { margin-left: auto; font-size: 11px; color: var(--muted); }
.cat-panel .cat-node.on .cn-ct { color: var(--primary); }

/* ---------- 生产任务作业台（四页签 / 双行工具条 / 任务树 / 排产看板） ---------- */
/* 作业台自带工具条与分栏，内容区不再留内边距 */
.card-bd.pt-pad0 { padding: 0; }
.pt-page { display: flex; flex-direction: column; min-width: 0; }
.pt-filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 14px 9px; background: var(--panel);
}
.pt-filters .spacer { flex: 1; }
.pt-adv {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; background: #fbfcfe;
  border-top: 1px dashed var(--border); border-bottom: 1px solid var(--border-2);
}
.pt-adv .lbl { font-size: 12px; color: var(--muted); }
.pt-actions {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 6px 8px; background: #f7f9fc;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.pt-actions .spacer { flex: 1; }
.pt-gridbar {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: #fffbe8; border-bottom: 1px solid #fde68a; color: #92400e;
}
.pt-gridbar .spacer { flex: 1; }
.pt-hint {
  display: flex; align-items: center; gap: 8px; margin: 12px 12px 0;
  padding: 9px 12px; border-radius: var(--radius-s); font-size: 12.5px;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
}
.pt-hint .ic { font-size: 14px; }
.pt-selbar {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: var(--primary-l); border-bottom: 1px solid #dbe6fb; font-size: 12.5px;
  color: var(--text-2);
}
.pt-selbar .spacer { flex: 1; }
.pt-body { min-width: 0; }
.pt-kpi { margin: 12px 12px 0; }
.sch-card { margin: 12px 12px 0; }
.sch-bd { padding: 4px 0 6px; }
.ckline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-2); white-space: nowrap; cursor: pointer;
}
/* 操作条上的图标按钮（灰底文字按钮，与设计稿一致） */
.abtn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border: 0; border-radius: 5px; background: transparent;
  color: var(--text-2); font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.abtn:hover { background: #e8eef7; color: var(--primary); }
.abtn .ic { font-size: 13px; opacity: .85; line-height: 1; }
.bdg {
  display: inline-block; margin-left: 5px; padding: 0 5px; min-width: 16px;
  border-radius: 8px; background: var(--red); color: #fff;
  font-size: 10.5px; line-height: 15px; text-align: center; font-weight: 600;
}
.abtn .bdg { background: #ef4444; }
/* 下拉面板（展开 / 批量操作 / 更多） */
.dd-panel {
  position: fixed; z-index: 4000; min-width: 168px; padding: 5px;
  background: #fff; border: 1px solid var(--border); border-radius: 9px;
  box-shadow: var(--shadow-lg);
}
.dd-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: 5px; font-size: 12.5px; color: var(--text-2); cursor: pointer;
}
.dd-item:hover { background: var(--primary-l); color: var(--primary); }
.dd-item .dd-ic { font-size: 13px; opacity: .8; width: 15px; text-align: center; }
.dd-item.danger { color: var(--red); }
.dd-item.danger:hover { background: #fdeaea; color: var(--red); }
.dd-div { height: 1px; margin: 4px 6px; background: var(--border); }
/* 任务树 */
table.dt tr.tv-row.lv1 { background: var(--panel-2); font-weight: 600; }
table.dt tr.tv-row.lv1 td { border-bottom-color: #dde5f0; }
table.dt tr.tv-row.lv2:hover, table.dt tr.tv-row.lv3:hover { background: #f7f9fc; }
table.dt tr.tv-row.lv3 td { color: var(--text-2); font-size: 12.2px; }
.tv-name { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tv-tgl { display: inline-block; width: 14px; text-align: center; color: #94a3b8; font-size: 11px; }
.tv-ic { font-size: 12px; filter: saturate(.9); }
/* 排产看板时间条 */
.sch-row {
  display: flex; align-items: center; gap: 12px;
  padding: 5px 14px; border-bottom: 1px dashed var(--border-2);
}
.sch-row:last-child { border-bottom: 0; }
.sch-row[data-id] { cursor: pointer; }
.sch-row[data-id]:hover { background: #f7f9fc; }
.sch-head { background: var(--panel-2); border-bottom: 1px solid var(--border); font-size: 11.5px; color: var(--muted); }
.sch-l { flex: 0 0 268px; width: 268px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sch-l b { font-size: 12.5px; font-weight: 600; }
.sch-l .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-r { flex: 0 0 86px; width: 86px; text-align: center; }
.sch-track {
  position: relative; flex: 1 1 auto; min-width: 200px; height: 22px;
  background: repeating-linear-gradient(90deg, #f4f7fb 0, #f4f7fb 11px, #eef2f8 11px, #eef2f8 12px);
  border-radius: 4px;
}
.sch-track-hd {
  height: 18px; background: none; border-radius: 0;
}
.sch-track-hd .sl, .sch-track-hd .sr { position: absolute; top: 0; }
.sch-track-hd .sl { left: 2px; }
.sch-track-hd .sr { right: 2px; }
.sch-bar {
  position: absolute; top: 4px; height: 14px; border-radius: 4px;
  background: var(--primary); color: #fff; font-size: 10px; line-height: 14px;
  overflow: hidden; padding: 0 5px; white-space: nowrap; min-width: 12px;
  box-shadow: 0 1px 2px rgba(37, 99, 235, .25);
}
.sch-bar.run { background: var(--teal); box-shadow: 0 1px 2px rgba(13, 148, 136, .25); }
.sch-bar.done { background: var(--green); box-shadow: 0 1px 2px rgba(22, 163, 74, .25); }
.sch-bar.late { background: var(--red); box-shadow: 0 1px 2px rgba(220, 38, 38, .25); }
.sch-bar .sl { float: left; }
.sch-bar .sr { float: right; }
.sch-today { position: absolute; top: 0; bottom: 0; width: 1px; background: #ef4444; }
.sch-today::after {
  content: '今'; position: absolute; top: -3px; left: 2px;
  font-size: 9.5px; color: #ef4444; line-height: 1;
}
/* 表格化（可编辑网格） */
table.dt.grid td { padding: 4px 6px; }
table.dt.grid .input.cell, table.dt.grid .select.cell { height: 26px; width: 100%; padding: 0 6px; font-size: 12.5px; }
table.dt.grid td.mono { font-family: Consolas, monospace; }

.btn {
  height: 30px; padding: 0 13px; border-radius: var(--radius-s);
  border: 1px solid var(--border); background: #fff; color: var(--text-2);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; transition: .13s; font-size: 12.5px;
}
.btn:hover { border-color: #c3cfe0; color: var(--text); background: var(--panel-2); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-d); border-color: var(--primary-d); color: #fff; }
.btn-teal { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-teal:hover { background: #0f766e; border-color: #0f766e; color: #fff; }
.btn-amber { background: var(--amber); border-color: var(--amber); color: #fff; }
.btn-amber:hover { background: #b45309; border-color: #b45309; color: #fff; }
.btn-danger { background: #fff; border-color: #fca5a5; color: var(--red); }
.btn-danger:hover { background: #fef2f2; border-color: #f87171; color: var(--red); }
.btn-sm { height: 25px; padding: 0 9px; font-size: 12px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.input, .select, textarea.input {
  height: 30px; border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: 0 9px; background: #fff; outline: none; min-width: 0; transition: .13s;
}
textarea.input { height: auto; padding: 6px 9px; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus, textarea.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }
.input[readonly] { background: var(--panel-2); color: var(--text-2); }
.lbl { font-size: 12px; color: var(--muted); white-space: nowrap; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-s); overflow: hidden; }
.seg button { border: 0; background: #fff; padding: 0 12px; height: 28px; cursor: pointer; color: var(--text-2); font-size: 12.5px; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.on { background: var(--primary); color: #fff; }

/* -------- 标签/状态 -------- */
.tag {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px;
  border-radius: 10px; font-size: 11.5px; white-space: nowrap;
  background: #f1f5f9; color: var(--text-2); border: 1px solid transparent;
}
.tag.blue { background: #eff6ff; color: #1d4ed8; }
.tag.green { background: #ecfdf5; color: #047857; }
.tag.amber { background: #fffbeb; color: #b45309; }
.tag.red { background: #fef2f2; color: #b91c1c; }
.tag.gray { background: #f3f4f6; color: #4b5563; }
.tag.purple { background: #f5f3ff; color: #6d28d9; }
.tag.teal { background: #f0fdfa; color: #0f766e; }

/* -------- 表格 -------- */
.tw { width: 100%; overflow: auto; }
table.dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
table.dt th {
  position: sticky; top: 0; z-index: 2; background: #f7f9fc; text-align: left;
  font-weight: 600; color: var(--text-2); padding: 9px 12px; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
table.dt td { padding: 8px 12px; border-bottom: 1px solid var(--border-2); white-space: nowrap; }
table.dt tbody tr:hover td { background: #f9fbfe; }
table.dt tbody tr.sel td { background: #eff6ff; }
table.dt td.num, table.dt th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dt td.ctr, table.dt th.ctr { text-align: center; }
table.dt td.ops { white-space: nowrap; }
table.dt td.ops a { margin-right: 9px; cursor: pointer; font-size: 12.5px; }
table.dt td.ops a.dg { color: var(--red); }
table.dt td.ops a.apr { color: var(--green); font-weight: 600; }
table.dt td.ops a.chg { color: var(--purple); }

/* ---------------------------------------------------------- 状态变更选择器 */
.sf-head { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.sf-head b { color: var(--text); font-size: 13px; }
.sf-pick { display: flex; flex-direction: column; gap: 5px; }
.sf-opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; text-align: left; font-size: 13px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: #fff; color: var(--text); transition: .13s;
}
.sf-opt:hover { border-color: var(--primary, #3b82f6); background: var(--panel-2); }
.sf-opt.cur { cursor: default; background: var(--panel-2); color: var(--muted); border-style: dashed; }
.sf-opt.cur:hover { border-color: var(--border); background: var(--panel-2); }
.sf-now { margin-left: auto; font-size: 11px; padding: 1px 6px; border-radius: 8px; background: var(--panel-3, #e2e8f0); }
.sf-arrow { margin-left: auto; font-style: normal; color: var(--muted); font-size: 15px; }
.sf-opt.cur .sf-arrow { display: none; }
table.dt tfoot td { background: #f7f9fc; font-weight: 600; border-top: 1px solid var(--border); }
.dt-empty { padding: 44px 0; text-align: center; color: var(--muted); }
.dt-empty .ic { font-size: 30px; opacity: .35; display: block; margin-bottom: 8px; }
.cell-2l { line-height: 1.25; }
.cell-2l small { color: var(--muted); display: block; font-size: 11px; }
.ellip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }

.pager { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--muted); font-size: 12.5px; }
.pager .spacer { flex: 1; }
.pager button {
  min-width: 26px; height: 26px; border: 1px solid var(--border); background: #fff;
  border-radius: 5px; cursor: pointer; color: var(--text-2);
}
.pager button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.pager button[disabled] { opacity: .45; cursor: not-allowed; }

/* -------- 弹窗 -------- */
.mask {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .42); z-index: 900;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px;
  overflow: auto; animation: fade .14s ease;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop { from { opacity: 0; transform: translateY(-10px) scale(.99) } to { opacity: 1; transform: none } }
.modal {
  background: #fff; border-radius: 10px; box-shadow: var(--shadow-lg);
  width: 620px; max-width: 100%; animation: pop .16s ease; display: flex; flex-direction: column;
  max-height: calc(100vh - 80px);
}
.modal.w760 { width: 760px; } .modal.w900 { width: 900px; } .modal.w1080 { width: 1080px; } .modal.w1280 { width: 1280px; }
.modal-hd { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border-2); }
.modal-hd h3 { margin: 0; font-size: 15px; }
.modal-hd .spacer { flex: 1; }
.modal-bd { padding: 16px 18px; overflow: auto; flex: 1; }
.modal-ft { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--border-2); background: var(--panel-2); border-radius: 0 0 10px 10px; }

/* -------- 表单 -------- */
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.fgrid.c1 { grid-template-columns: 1fr; }
.fgrid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fitem { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fitem.span2 { grid-column: span 2; }
.fitem.span3 { grid-column: span 3; }
.fitem > label { font-size: 12.5px; color: var(--text-2); }
.fitem > label .req { color: var(--red); margin-left: 2px; }
.fitem .hint { font-size: 11px; color: var(--muted); }
.fsec { grid-column: 1 / -1; margin: 8px 0 2px; padding-bottom: 6px; border-bottom: 1px dashed var(--border); font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.fsec:first-child { margin-top: 0; }
.ref-pick { display: flex; gap: 6px; }
.ref-pick .input { flex: 1; cursor: pointer; background: #fff; }
.readonly-val { height: 30px; display: flex; align-items: center; color: var(--text-2); }

.lines-hd { display: flex; align-items: center; gap: 8px; margin: 16px 0 6px; }
.lines-hd b { font-size: 13px; }
table.lt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; border: 1px solid var(--border); border-radius: var(--radius-s); overflow: hidden; }
table.lt th { background: #f7f9fc; padding: 7px 8px; font-weight: 600; color: var(--text-2); border-bottom: 1px solid var(--border); white-space: nowrap; text-align: left; }
table.lt td { padding: 4px 6px; border-bottom: 1px solid var(--border-2); }
table.lt tr:last-child td { border-bottom: 0; }
table.lt .input, table.lt .select { height: 26px; width: 100%; border-color: transparent; background: transparent; }
table.lt .input:hover, table.lt .select:hover { border-color: var(--border); background: #fff; }
table.lt .input:focus, table.lt .select:focus { border-color: var(--primary); background: #fff; }
table.lt td.num .input { text-align: right; }
table.lt .del { color: var(--red); cursor: pointer; font-size: 14px; }

/* -------- 提示 -------- */
#toasts { position: fixed; top: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: var(--radius-s); box-shadow: var(--shadow); padding: 10px 14px;
  min-width: 220px; max-width: 380px; animation: pop .18s ease; font-size: 12.8px;
}
.toast.ok { border-left-color: var(--green); }
.toast.warn { border-left-color: var(--amber); }
.toast.err { border-left-color: var(--red); }
.toast b { display: block; margin-bottom: 2px; }

/* -------- KPI -------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.kpi {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 15px 18px; position: relative; overflow: hidden;
}
.kpi .k-t { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kpi .k-v { font-size: 27px; font-weight: 700; margin-top: 7px; font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
.kpi .k-v small { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 3px; }
.kpi .k-s { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
/* 看板 KPI 子行按参考图：上升绿 / 下降红 */
.kpi .k-s .up { color: var(--green); font-weight: 600; }
.kpi .k-s .dn { color: var(--red); font-weight: 600; }
.kpi::after { content: ''; position: absolute; right: -20px; top: -20px; width: 70px; height: 70px; border-radius: 50%; background: var(--primary-l); opacity: .55; }
.kpi.c-teal::after { background: #f0fdfa; } .kpi.c-amber::after { background: #fffbeb; }
.kpi.c-purple::after { background: #f5f3ff; } .kpi.c-red::after { background: #fef2f2; }
.kpi.c-green::after { background: #ecfdf5; }
.kpi-grid.k3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1180px) { .kpi-grid.k3 { grid-template-columns: repeat(2, 1fr); } }

/* -------- 页头（看板页） -------- */
.page-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head .ph-title { font-size: 22px; font-weight: 700; letter-spacing: -.3px; }
.page-head .ph-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.page-head .ph-acts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.date-chip {
  height: 32px; display: inline-flex; align-items: center; padding: 0 13px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-s);
  font-size: 12.5px; color: var(--text-2); box-shadow: var(--shadow);
}

/* -------- 告警列表 -------- */
.alert-list { display: flex; flex-direction: column; }
.alert-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 2px;
  border-bottom: 1px solid var(--border-2); font-size: 12.8px;
}
.alert-item:last-child { border-bottom: 0; }
.alert-item .al-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.alert-item .al-dot.red { background: var(--red); box-shadow: 0 0 0 3px #fee2e2; }
.alert-item .al-dot.amber { background: #f59e0b; box-shadow: 0 0 0 3px #fef3c7; }
.alert-item .al-dot.blue { background: var(--primary); box-shadow: 0 0 0 3px var(--primary-l); }
.alert-item .al-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-item .al-txt small { color: var(--muted); margin-left: 6px; font-size: 11.5px; }
.alert-item .al-tag { flex: 0 0 auto; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-21 { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.grid-12 { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; }
@media (max-width: 1180px) { .grid2, .grid3, .grid-21, .grid-12 { grid-template-columns: 1fr; } }

/* -------- 进度条 -------- */
.bar { height: 7px; border-radius: 4px; background: #eef2f7; overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; background: var(--primary); border-radius: 4px; transition: width .3s; }
.bar.g > i { background: var(--green); } .bar.a > i { background: var(--amber); } .bar.r > i { background: var(--red); }
.bar-wrap { display: flex; align-items: center; gap: 8px; }
.bar-wrap span { font-size: 11.5px; color: var(--muted); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

/* -------- Tabs -------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 14px; background: #fff; }
.tabs button {
  border: 0; background: transparent; padding: 11px 14px; cursor: pointer;
  color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 13px;
}
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* -------- 图表 -------- */
.chart-box { width: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--text-2); }
.legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; }

/* -------- 描述列表 -------- */
.dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border-2); border: 1px solid var(--border-2); border-radius: var(--radius-s); overflow: hidden; }
.dl.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dl.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dl > div { background: #fff; padding: 9px 12px; min-width: 0; }
.dl > div .k { font-size: 11.5px; color: var(--muted); }
.dl > div .v { margin-top: 3px; word-break: break-all; }

/* -------- 树 -------- */
.tree { font-size: 12.8px; }
.tree ul { list-style: none; margin: 0; padding-left: 18px; position: relative; }
.tree > ul { padding-left: 0; }
.tree li { position: relative; padding: 2px 0; }
.tree ul ul::before { content: ''; position: absolute; left: 4px; top: 0; bottom: 10px; border-left: 1px dashed #d6dfeb; }
.tnode { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 5px; cursor: pointer; }
.tnode:hover { background: var(--panel-2); }
.tnode .sw { width: 12px; color: var(--muted); font-size: 10px; }
.tnode .cd { font-family: Consolas, monospace; color: var(--purple); font-size: 12px; }

/* ---------------------------------------------------------- 登录
   2026-10-17 起登录页样式**不在这里**：登录页的标记 + CSS 全部内联在
   index.html 的 <style> 里（自包含 —— 首屏不等 1.4MB 业务 JS、不等本文件
   就能画出登录页；全页唯一图片是 79KB 的 img/logo-icon.png）。
   改登录页视觉请改 index.html 的那段 <style>，别在这里加（会两处漂移）。
   旧版深色科技风（3MB 的 img/login-bg.jpg + 551KB 的 img/login-logo.png）
   已整体弃用，两个位图文件仍留在 img/ 下但页面不再引用。 */

/* ---------------------------------------------------------- 生产进度 · 工序进度条 */
/* 悬停浮层（列表行/进度列悬停时弹出）与页面内嵌面板共用同一套结构 */
.prog-tip {
  position: fixed; z-index: 2100; display: none;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.prog-tip.on { display: block; }
.prog-board { background: #fcfdff; border: 1px solid var(--border-2); border-radius: 10px; overflow: hidden; }

.pt-hd {
  padding: 10px 14px; text-align: center; font-weight: 600; font-size: 13.5px;
  color: var(--text); background: var(--panel); border-bottom: 1px solid var(--border-2);
}
.pt-bd { padding: 16px 13px 4px; overflow-x: auto; overflow-y: hidden; }
.pt-ft {
  margin-top: 12px; padding: 8px 14px; text-align: center;
  font-size: 11.5px; color: var(--muted); background: var(--panel-2);
  border-top: 1px solid var(--border-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.psteps { display: flex; align-items: flex-start; justify-content: center; width: max-content; margin: 0 auto; }
.pconn { flex: 0 0 26px; width: 26px; height: 2px; margin-top: 31px; background: #d7dee9; border-radius: 2px; }
.pstep { flex: 0 0 auto; width: 118px; padding: 0 2px; text-align: center; }
.pstep .ring {
  width: 62px; height: 62px; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #cbd5e1; background: var(--panel);
  font-size: 13px; font-weight: 600; color: #9aa7b8; font-variant-numeric: tabular-nums;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.pstep .qty { margin-top: 9px; font-size: 12.5px; color: #9aa7b8; font-variant-numeric: tabular-nums; }
.pstep .nm { margin-top: 4px; font-size: 12px; color: #9aa7b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstep .ring:hover { transform: translateY(-1px); }
.pstep.done .ring { border-color: #9dc0f2; background: #f7faff; color: var(--primary); }
.pstep.run .ring { border-color: var(--primary); background: #f2f7ff; color: var(--primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, .07); }
.pstep.done .qty, .pstep.done .nm, .pstep.run .qty, .pstep.run .nm { color: var(--primary); }
.psteps.dense .pstep { width: 96px; }
.psteps.dense .pconn { flex: 0 0 12px; width: 12px; margin-top: 27px; }
.psteps.dense .pstep .ring { width: 54px; height: 54px; font-size: 12px; }

/* 列表内嵌迷你工序点阵 */
.pmini { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.pmini i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #cbd5e1; background: #fff; display: inline-block; }
.pmini i.done { background: var(--primary); border-color: var(--primary); }
.pmini i.run { background: #dbeafe; border-color: var(--primary); }
[data-prog] { cursor: help; }
table.dt tbody tr.on td { background: #eff6ff; }

/* -------- 报工工作台 -------- */
.wb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.wb-bar-l { display: flex; align-items: center; gap: 14px; }
.wb-win { font-size: 13px; padding: 4px 12px; border-radius: 20px; font-weight: 600; }
.wb-win.on { background: #e7f6ec; color: #15803d; }
.wb-win.off { background: #fde8e8; color: #c0392b; }
.wb-scan { background: #f7faff; border: 1px dashed #c5d6f2; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.wb-scan-hd { font-weight: 600; font-size: 13px; margin-bottom: 10px; color: #1f3a6b; }
.wb-scan-row { display: flex; flex-wrap: wrap; gap: 12px; }
.wb-fld { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.wb-scan-row .wb-fld { flex: 1 1 200px; }
/* 用户码 = 输入框 + 检索按钮 */
.wb-in-row { display: flex; gap: 6px; }
.wb-in-row .input { flex: 1 1 auto; min-width: 0; }
.wb-in-row .btn { flex: 0 0 auto; white-space: nowrap; padding: 0 12px; }
.wb-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.wb-big .wb-sel, .wb-big .wb-in, .wb-big .wb-num { font-size: 16px; padding: 11px 12px; height: auto; }
.wb-num { text-align: right; font-variant-numeric: tabular-nums; }
.wb-ops { display: flex; gap: 14px; margin-top: 18px; }
.wb-submit { flex: 1; font-size: 18px; font-weight: 700; padding: 14px 20px; background: var(--primary); color: #fff; border: none; border-radius: 10px; }
.wb-submit:hover { filter: brightness(1.05); }
.wb-submit.disabled, .wb-submit:disabled { background: #c2cbd8; cursor: not-allowed; }
.wb-clear { flex: 0 0 130px; font-size: 16px; font-weight: 600; padding: 14px 20px; background: #eef1f6; color: #475569; border: 1px solid #d4dae3; border-radius: 10px; }
.wb-clear:hover { background: #e4e8ef; }
.wb-msg { margin-top: 14px; min-height: 20px; font-size: 13.5px; }
.wb-msg.ok { color: #15803d; }
.wb-colcfg { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 8px 0; }
.wb-colitem { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #334155; }
.wb-card .card-hd h3 { color: var(--primary); }

/* -------- 其他 -------- */
.muted { color: var(--muted); }
.small { font-size: 11.5px; }
.mono { font-family: Consolas, Monaco, monospace; }
.right { text-align: right; } .center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt8 { margin-top: 8px; } .mt14 { margin-top: 14px; } .mt20 { margin-top: 20px; }
.mb8 { margin-bottom: 8px; } .mb14 { margin-bottom: 14px; }
.up { color: var(--red); } .dn { color: var(--green); }
.hl { background: #fff7cc; border-radius: 2px; padding: 0 2px; }
.empty-hint { padding: 30px; text-align: center; color: var(--muted); }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* 自定义报表：指标分组选择 */
.cat-box { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--panel); }
.cat-box .cat-t { font-weight: 600; font-size: 12.5px; margin-bottom: 8px; color: var(--text); display: flex; align-items: center; gap: 4px; }
.ck-inline { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 0; color: var(--text-2); cursor: pointer; }
.ck-inline:hover { color: var(--text); }
.ck-inline input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; accent-color: var(--primary); }

::-webkit-scrollbar-corner { background: transparent; }
@media print {
  .sidebar, .topbar, .tabbar, .toolbar, .modal-ft { display: none !important; }
  .shell { grid-template-columns: 1fr; }
  .content { overflow: visible; }
}

/* ---------- 列表：编号超链接 ---------- */
a.lnk { color: var(--primary); cursor: pointer; }
a.lnk:hover { text-decoration: underline; }

/* ---------- BOM 明细维护页（五级 BOM + 工艺路线） ---------- */
.bd-page { display: flex; flex-direction: column; gap: 10px; }
.bd-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); flex-wrap: wrap;
}
.bd-bar .bd-ic { margin-right: 4px; font-size: 11px; opacity: .75; }
.bd-bar .bd-close { color: var(--text-2); }
.bd-bar .bd-close:hover { color: var(--primary); border-color: var(--primary); }
.bd-bar .bd-drop { display: inline-flex; align-items: center; gap: 4px; }
.bd-caret { font-size: 10px; opacity: .7; }
.bd-bar .btn.on { background: var(--primary-l); color: var(--primary); border-color: var(--primary); }

.bd-main .tabs { padding: 0 12px; }
.bd-body { padding: 12px 14px 16px; }

/* 单据头 */
.bd-head-bd { padding: 12px 14px; }
.bd-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 18px; }
.bd-kv { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 12.5px; }
.bd-kv .k { color: var(--muted); flex: 0 0 62px; text-align: right; }
.bd-kv .v {
  color: var(--text); font-weight: 600; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bd-head-more { text-align: center; margin-top: 8px; }
.bd-more { font-size: 12px; color: var(--primary); cursor: pointer; }
.bd-more:hover { text-decoration: underline; }

/* 物料清单：子工具条 / 行操作条 */
.bd-sub, .bd-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--panel-2);
  border: 1px solid var(--border-2); border-radius: var(--radius-s); margin-bottom: 8px;
}
.bd-actions { background: var(--panel); }
.bd-sub .spacer, .bd-actions .spacer { flex: 1; }
.bd-sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
.bd-adv { display: flex; align-items: center; gap: 12px; padding: 6px 10px; margin-bottom: 8px; background: #fbfdff; border: 1px dashed var(--border); border-radius: var(--radius-s); }
.bd-ck { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.bd-ck input { accent-color: var(--primary); }

/* 五级树表 */
.bd-tw { max-height: 62vh; overflow: auto; }
table.bd-tree th { white-space: nowrap; }
table.bd-tree tbody tr { cursor: pointer; }
table.bd-tree tbody tr:hover { background: #f8fbff; }
table.bd-tree tbody tr.on { background: var(--primary-l); }
.bd-code { white-space: nowrap; }
.bd-tgl { display: inline-block; width: 14px; color: var(--muted); cursor: pointer; user-select: none; }
.bd-tgl:hover { color: var(--primary); }
.bd-tgl.ph { cursor: default; }
.bd-ind { white-space: nowrap; }
.bd-sub-tag {
  display: inline-block; margin-left: 6px; padding: 0 5px; font-size: 10.5px;
  color: var(--teal); background: #e6fffa; border: 1px solid #b2f5ea; border-radius: 4px;
}
.bd-ops { max-width: 190px; }
.bd-pchip {
  display: inline-block; margin: 1px 3px 1px 0; padding: 0 6px; font-size: 11px;
  color: var(--text-2); background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  white-space: nowrap;
}

/* 工艺路线：左说明 / 中画布 / 右参数面板 */
.bf-page { display: grid; grid-template-columns: 190px minmax(0, 1fr) 306px; gap: 12px; align-items: start; }
.bf-left { font-size: 12.5px; }
.bf-chk { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); cursor: pointer; }
.bf-chk input { accent-color: var(--primary); }
.bf-hint { margin-top: 8px; padding: 8px 10px; color: var(--muted); font-size: 11.5px; line-height: 1.7; background: var(--panel-2); border: 1px solid var(--border-2); border-radius: var(--radius-s); }
.bf-link { margin-top: 8px; padding: 8px 10px; font-size: 12px; color: var(--teal); background: #e6fffa; border: 1px solid #b2f5ea; border-radius: var(--radius-s); }

.bf-cbar {
  display: flex; align-items: center; gap: 4px; padding: 5px 8px;
  background: var(--panel-2); border: 1px solid var(--border-2); border-bottom: 0;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
}
.bf-tool {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px;
  padding: 0 7px; font-size: 12px; color: var(--text-2); cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px; user-select: none;
}
.bf-tool:hover { color: var(--primary); border-color: var(--primary); }
.bf-cbar .spacer { flex: 1; }
.bf-zoom { font-size: 11.5px; color: var(--muted); margin-left: 4px; }
.bf-canvas {
  height: 340px; overflow: auto; position: relative;
  border: 1px solid var(--border-2); border-radius: 0 0 var(--radius-s) var(--radius-s);
  background-color: #fcfdff;
  background-image: radial-gradient(#dfe7f2 1px, transparent 1px);
  background-size: 16px 16px;
}
.bf-stage { position: relative; transform-origin: 0 0; min-width: 100%; min-height: 100%; }
.bf-node {
  position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 5px 10px; color: #fff; border-radius: 8px; cursor: pointer; overflow: hidden;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .18); border: 2px solid transparent;
}
.bf-node.on { border-color: #0f172a; box-shadow: 0 0 0 3px rgba(15, 23, 42, .18); }
.bf-node .bf-nnm { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-node .bf-nsub { font-size: 10.5px; opacity: .9; }
.bf-node .bf-nic { position: absolute; right: 6px; top: 4px; font-size: 11px; opacity: .75; }
.bf-link-line { position: absolute; height: 2px; background: #c7d5e8; }
.bf-arrow { position: absolute; color: #94a8c4; font-size: 13px; }
.bf-empty { padding: 60px 10px; text-align: center; color: var(--muted); font-size: 12.5px; }

.bf-right { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-s); }
.bf-ptabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 8px 0; border-bottom: 1px solid var(--border-2); }
.bf-ptabs button {
  border: 0; background: transparent; cursor: pointer; padding: 5px 8px; font-size: 12.5px;
  color: var(--muted); border-bottom: 2px solid transparent;
}
.bf-ptabs button.on { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }
.bf-pbody { padding: 10px; max-height: 400px; overflow: auto; }
.bf-form .fgrid { grid-template-columns: 1fr; }
.bf-form .fitem { margin-bottom: 9px; }
.bf-form .fitem > label { font-size: 12px; color: var(--text-2); }
.bf-form input[type="color"] { width: 100%; height: 30px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); }
.bf-unit { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); text-align: right; }
.bf-mat table.lt th { font-size: 11.5px; }
.bf-mat table.lt td { font-size: 12px; }

/* 历史变更时间线 */
.bd-tl { position: relative; padding-left: 18px; }
.bd-tl::before { content: ''; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 1px; background: var(--border); }
.bd-tl-item { position: relative; padding: 0 0 12px; }
.bd-tl-dot {
  position: absolute; left: -17px; top: 4px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 3px var(--primary-l);
}
.bd-tl-hd { display: flex; align-items: baseline; gap: 10px; }
.bd-tl-hd b { font-size: 12.5px; }
table.bd-tree tbody tr.bd-mother { background: #f6faff; cursor: default; }
table.bd-tree tbody tr.bd-mother:hover { background: #f6faff; }
table.bd-tree tbody tr.bd-mother td { border-bottom: 1px solid var(--border); }

/* ============================================================
   财务管理 → 总账（2026-10-03 新增）
   凭证录入的金额「分位网格」、账簿表头、期间选择器、期末结账月历
   ============================================================ */

/* -------- 期间选择器（各账簿页共用） -------- */
.gl-period { display: flex; align-items: center; gap: 6px; }
.gl-period .pv {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 108px; height: 28px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--panel); font-weight: 600; color: var(--text);
}
.gl-period button { height: 28px; }
.gl-cur { font-size: 11.5px; color: var(--muted); }

/* -------- 凭证录入 -------- */
.vch-hd { position: relative; padding: 6px 2px 2px; }
.vch-hd .row1 { display: flex; align-items: center; gap: 14px; }
.vch-hd .f { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.vch-hd .f .input, .vch-hd .f .select { height: 28px; }
.vch-hd .f .input.sm { width: 62px; }
.vch-title { text-align: center; margin: 2px 0 2px; }
.vch-title b { font-size: 17px; letter-spacing: 3px; font-weight: 700; }
.vch-title .pd { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.vch-right { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.vch-wrap { border: 1px solid var(--border); border-radius: var(--radius-s); overflow: hidden; }
table.vch { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.vch th, table.vch td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 12.5px; }
table.vch th { background: var(--panel-2); color: var(--primary); font-weight: 600; height: 30px; }
table.vch th:last-child, table.vch td:last-child { border-right: 0; }
table.vch tbody tr:last-child td { border-bottom: 0; }
table.vch td { height: 32px; padding: 0; }
table.vch td.c-sum, table.vch td.c-acct, table.vch td.c-amt { padding: 0 2px; }
table.vch input.cell-in, table.vch select.cell-in {
  width: 100%; height: 30px; border: 0; background: transparent; outline: none; padding: 0 6px; font-size: 12.5px;
}
table.vch input.cell-in:focus { background: #f4f8ff; }
/* 会计科目单元格：名称 + 辅助核算芯片 */
.vch-acct { display: flex; align-items: center; gap: 4px; padding: 0 4px; }
.vch-acct .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.vch-acct .nm.ph { color: var(--muted); }
.vch-aux {
  flex: 0 0 auto; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; padding: 1px 6px; border-radius: 9px; cursor: pointer;
  background: var(--primary-l); color: var(--primary); border: 1px solid #d5e3ff;
}
.vch-aux.empty { background: #fff7e6; color: var(--amber); border-color: #ffe1ac; }
/* 分位金额网格：14 道竖线对应 千 百 十 亿 千 百 十 万 千 百 十 元 角 分 */
.digit { position: relative; height: 30px; }
.digit::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background: repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px 6.6667%);
}
.digit input {
  position: relative; width: 100%; height: 30px; border: 0; background: transparent; outline: none;
  text-align: right; padding: 0 6px 0 4px; font-family: Consolas, Menlo, monospace; font-size: 12.5px;
}
.digit input:focus { background: rgba(37, 99, 235, .05); }
table.vch thead tr.dg th.dgc { padding: 0; height: 22px; }
table.vch thead tr.dg th.dgc span { display: inline-block; width: 6.6667%; text-align: center; font-weight: 400; color: var(--muted); font-size: 11px; }
table.vch thead tr.dg th.dgc span.w1 { width: 13.3334%; }
table.vch tr.total td { background: #fffaf0; font-weight: 600; height: 34px; padding: 0 8px; }
.vch-ops { width: 34px; text-align: center; }
.vch-ops a { color: var(--red); cursor: pointer; font-size: 13px; }
.vch-ft { display: flex; align-items: center; gap: 10px; padding: 8px 2px 2px; font-size: 12.5px; color: var(--text-2); }
.vch-ft .diff { color: var(--red); font-weight: 600; }
.vch-ft .diff.ok { color: var(--green); font-weight: 400; }

/* -------- 账簿表 -------- */
table.dt.gl th.grp { text-align: center; background: #eef4ff; }
table.dt.gl td.num, table.dt.gl th.num { text-align: right; font-family: Consolas, Menlo, monospace; }
table.dt.gl td.zero { color: var(--muted); }
.gl-dir { display: inline-block; min-width: 16px; }
.gl-dir.b { color: var(--primary); }
.gl-dir.c { color: var(--amber); }
.gl-dir.p { color: var(--muted); }
table.dt.gl tr.grp-row td { background: var(--panel-2); font-weight: 600; }
table.dt.gl tr.sum-row td { background: #fffaf0; font-weight: 600; }
.gl-toggle { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2); }

/* -------- 核算项目表左树 -------- */
.gl-aux-l { border-right: 1px solid var(--border); padding-right: 8px; }
.gl-aux-l .gp { font-weight: 600; color: var(--text-2); padding: 5px 6px; font-size: 12px; }
.gl-aux-l .it { padding: 5px 6px 5px 18px; border-radius: 6px; cursor: pointer; font-size: 12.5px; }
.gl-aux-l .it:hover { background: #f4f8ff; }
.gl-aux-l .it.on { background: var(--primary-l); color: var(--primary); font-weight: 600; }

/* -------- 期末结账月历 -------- */
.gl-yearbar { display: flex; align-items: center; gap: 10px; }
.gl-yearbar .yv { font-size: 15px; font-weight: 700; min-width: 56px; text-align: center; }
.gl-months { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.gl-month {
  border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--panel);
  padding: 12px 10px; text-align: center; cursor: pointer; transition: all .13s;
}
.gl-month:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(37, 99, 235, .1); }
.gl-month.on { border-color: var(--primary); background: var(--primary-l); }
.gl-month b { display: block; font-size: 14px; margin-bottom: 7px; }
.gl-month .st {
  display: inline-block; font-size: 11.5px; padding: 1px 9px; border-radius: 10px;
  border: 1px solid var(--border); color: var(--muted);
}
.gl-month .st.closed { color: var(--green); border-color: #b7e4c7; background: #f1fbf4; }
.gl-month .st.cur { color: var(--primary); border-color: #cfdefd; background: var(--primary-l); font-weight: 600; }
.gl-checks { display: grid; gap: 6px; }
.gl-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; }
.gl-check .ic { flex: 0 0 auto; width: 16px; text-align: center; }
.gl-check.ok .ic { color: var(--green); }
.gl-check.no .ic { color: var(--red); }
.gl-check .dt { color: var(--muted); font-size: 11.5px; }

/* ============================================================
   人资管理 → 人资导航门户页（2026-10-17 新增，hr_page.js）
   左：人资子导航；中：人资提醒计数卡 + 人资一体化流程图 + 我的导航；
   右：人资报表 / 人资列表竖排面板
   ============================================================ */
.hr-wrap { display: flex; flex-direction: column; gap: 12px; }
/* 人资子模块页（侧栏二级导航 9 项 → P.hrModule「规划中」页） */
.hr-mod-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.hr-mod-hd h3 { margin: 0; font-size: 17px; }
.hr-mod-p { margin: 6px 0 10px; font-size: 13px; line-height: 1.8; }
.hr-mod-sub { margin: 18px 0 4px; }
.hr-mod-sub b { font-size: 13px; }
.hr-mod-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hr-mod-chip {
  border: 1px solid var(--border); background: var(--panel-2); border-radius: 14px;
  padding: 5px 14px; font-size: 12.5px; color: var(--text-2); cursor: pointer;
  transition: all .13s;
}
.hr-mod-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-l); }
.hr-mod-ft { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.hr-main { flex: 1; min-width: 0; }
.hr-sec { margin-bottom: 14px; }
.hr-sec-hd { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; margin: 2px 2px 10px; }
.hr-sec-hd i { font-style: normal; color: var(--primary); font-size: 13px; }
/* 人资提醒：计数卡 */
.hr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: 10px; }
.hr-card {
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: linear-gradient(180deg, #f4f8ff, #edf3ff);
  padding: 12px 12px 10px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  transition: box-shadow .13s, transform .13s, border-color .13s;
}
.hr-card:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(37, 99, 235, .12); transform: translateY(-1px); }
.hr-card b { font-size: 24px; font-weight: 700; color: #334155; line-height: 1.15; }
.hr-card span { font-size: 12px; color: var(--text-2); }
/* 中部：流程图 + 右侧竖排面板 */
.hr-mid { display: flex; gap: 14px; align-items: flex-start; }
.hr-flowbox {
  flex: 1; min-width: 0; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px 18px;
}
.hr-sidepanels { flex: 0 0 216px; width: 216px; display: flex; flex-direction: column; gap: 14px; }
.hr-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.hr-panel-hd { font-size: 13px; font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--border-2); background: var(--panel-2); }
.hr-panel-bd { padding: 6px 8px 8px; display: flex; flex-direction: column; }
.hr-plink {
  border: 0; background: none; text-align: left; cursor: pointer;
  padding: 7px 8px; border-radius: 6px; font-size: 12.5px; color: var(--text-2);
}
.hr-plink:hover { background: var(--primary-l); color: var(--primary); }
/* 人资一体化：顶部 4 个基础入口 */
.hr-bases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.hr-base {
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  border: 1px dashed var(--border); border-radius: var(--radius-s); background: var(--panel-2);
  padding: 10px 6px; font-size: 12.5px; color: var(--text-2); transition: all .13s;
}
.hr-base i { font-style: normal; font-size: 22px; }
.hr-base:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-l); border-style: solid; }
/* 人资一体化：五级流程
   ⚠ .hr-stage 是 div 外壳（内部主按钮与子入口按钮为兄弟节点，禁嵌套 button）；
     大流程（人事一体化页签）改为纵向：每阶段一行，子入口靠右。 */
.hr-flow { display: flex; align-items: stretch; gap: 6px; }
.hr-arrow { display: flex; align-items: center; color: #b6c6e2; font-size: 14px; }
.hr-stage {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--panel);
  padding: 12px 8px 10px; transition: border-color .13s, box-shadow .13s;
}
.hr-stage:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(37, 99, 235, .12); }
.hr-stage-main {
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%;
}
.hr-stage-main i {
  font-style: normal; font-size: 22px; width: 44px; height: 44px; line-height: 44px;
  text-align: center; border-radius: 12px; background: var(--primary-l);
}
.hr-stage-main b { font-size: 13px; }
/* 大流程：纵向五行，箭头朝下
   （2026-10-17：阶段内的子功能按钮已移入侧栏悬停面板，.hr-stage-subs / .hr-sub 一并删除；
     环节说明文字已从大流程右侧移到「人资管理」页签五级流程卡的卡片底部） */
.hr-flow.big { flex-direction: column; gap: 4px; }
.hr-flow.big .hr-arrow { justify-content: center; transform: rotate(90deg); padding: 1px 0; }
.hr-flow.big .hr-stage { flex-direction: row; align-items: center; gap: 14px; padding: 11px 16px; }
/* 大流程：说明文字移走后，整行作为可点击的导航行（主按钮撑满、行尾加 ‹ 指示） */
.hr-flow.big .hr-stage-main { flex-direction: row; flex: 1; width: auto; gap: 10px; }
.hr-stage-go { margin-left: auto; color: #c3cfe0; font-size: 20px; line-height: 1; }
/* 环节说明（纯文字，不可点）：位于每张流程卡底部，虚线分隔、居中小字
   （2026-10-17 按用户要求从「人事一体化」大流程右侧移到这里）
   ⚠ 按「 → 」拆成多个 nowrap 片段（箭头跟在前一步末尾），只在步骤之间换行 ——
     否则窄卡里「简历筛选」会被断成「简历筛 / 选」，或箭头孤零零落在行首。 */
.hr-stage-desc {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1px 7px; margin: 10px 2px 0; padding-top: 8px;
  border-top: 1px dashed var(--border-2);
  font-size: 11.5px; line-height: 1.5; color: var(--muted);
  letter-spacing: .2px; text-align: center;
}
.hr-stage-desc b { font-weight: 400; white-space: nowrap; }
/* 我的导航：12 个快捷磁贴 */
.hr-quick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.hr-qt {
  display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--panel);
  padding: 14px 6px 12px; font-size: 12.5px; color: var(--text-2); transition: all .13s;
}
.hr-qt i {
  font-style: normal; font-size: 22px; width: 46px; height: 46px; line-height: 46px;
  text-align: center; border-radius: 12px; color: #fff;
}
.hr-qt.g i { background: linear-gradient(180deg, #34c76f, #22a85c); }
.hr-qt.b i { background: linear-gradient(180deg, #4f92f5, #2f6bd8); }
.hr-qt.p i { background: linear-gradient(180deg, #9d7bf5, #7c3aed); }
.hr-qt:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(37, 99, 235, .12); transform: translateY(-1px); }
/* 门户页导语（位于「人资管理」页签卡片顶部；2026-10-17 按用户要求从「人事一体化」页签移来） */
.hr-tip { margin: 0 2px 14px; font-size: 12.5px; line-height: 1.8; }
/* 模块简介弹窗 */
.hr-intro-st { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hr-intro-p { margin: 4px 0 8px; line-height: 1.7; }
.hr-intro-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.hr-intro-list li { display: flex; gap: 8px; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.hr-intro-list i { font-style: normal; color: var(--primary); font-size: 8px; line-height: 2.2; }
/* 窄屏兜底：流程图与右面板竖排、磁贴 4 列 */
@media (max-width: 1100px) {
  .hr-mid { flex-direction: column; }
  .hr-sidepanels { flex: 1; width: auto; flex-direction: row; }
  .hr-panel { flex: 1; }
  .hr-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   生产管理 → 生产导航门户页（2026-10-17 新增，prod_nav_page.js）
   与 hr_page.js 的差异：**无左侧子导航栏**。布局为
   「顶部标题条（chip + 刷新/全屏）+ 左主区 + 右侧竖排面板」。
   结构类（卡片/流程/磁贴/面板）复用 .hr-* ，这里只写骨架。
   ============================================================ */
.pn-wrap { display: flex; flex-direction: column; gap: 14px; }
.pn-topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px 14px;
}
.pn-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 700; color: var(--primary);
  background: var(--primary-l); border-radius: var(--radius-s);
  padding: 6px 14px;
}
.pn-topbtns { display: inline-flex; gap: 6px; }
.pn-btn {
  width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel-2); color: var(--text-2); font-size: 15px; cursor: pointer;
  transition: all .13s; line-height: 1;
}
.pn-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-l); }
.pn-cols { display: flex; gap: 14px; align-items: flex-start; }
.pn-main { flex: 1; min-width: 0; }
.pn-side { flex: 0 0 216px; width: 216px; display: flex; flex-direction: column; gap: 14px; }
/* 窄屏兜底：右面板横排、磁贴 4 列 */
@media (max-width: 1100px) {
  .pn-cols { flex-direction: column; }
  .pn-side { flex: 1; width: auto; flex-direction: row; }
  .pn-side .hr-panel { flex: 1; }
}

/* ============================================================
   财务/销售/库存/采购/研发导航门户页（2026-10-17 新增，nav_pages.js）
   五页共用引擎，复用 .hr-* 结构类（卡片/流程/磁贴/面板），
   这里只写与 prod_nav_page.js 的差异部分：
     · .np-quick —— auto-fill 列数（磁贴 8~20 个自适应，宽屏多列）
     · .hr-qt.o  —— 橙色磁贴（设计稿我的导航第 3 种底色）
   ============================================================ */
.np-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.hr-qt.o i { background: linear-gradient(180deg, #ffa940, #f57c1f); }
/* 窄屏兜底：磁贴最小 88px */
@media (max-width: 1100px) {
  .np-quick { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}

/* ============================================================
   BI 大屏（2026-10-17 新增；生产 6 个看板 + 主页「经营看板」共用这一套）
   ------------------------------------------------------------
   两个使用方：
     prod_bi_page.js  → 生产管理 6 个看板（车间一体化/生产实时/订单/派工/车间状态/委外）
     pages_dash.js    → 主页 · 统计分析的「经营看板」（原 BI 看板，2026-10-17 更名）
   单一主题（2026-10-17 二次调整，按用户要求统一「车间一体化」的 BI 大屏）：
     .bi-dark  上述全部页面使用（深蓝大屏）。
               原 .bi-live（深红）与 .bi-light（浅色）两套主题**已废弃删除**，
               新增大屏一律 bi-page + bi-dark，不要回流浅色/深红。
   类名契约（改这一侧必须同步 prod_bi_page.js / pages_dash.js，反之亦然）：
     .bi-page.bi-dark > .bi-head(.bi-title/.bi-clock) + .bi-body
     .bi-kpis > .bi-kpi(.kp1~kp4 四宫格 / .s1~.s6 统计块)
     .bi-stat3 / .bi-warn / .bi-ws-grid / .bi-2col / .bi-grid2 / .bi-3col / .bi-col-stack
     .bi-panel(.bi-panel-hd/.bi-panel-bd/.bi-note) / .bi-scroll / .bi-live-box
     .bi-seg / .bi-tabs / .bi-fbar / .bi-rate / .bi-empty
   深色主题的离线 SVG 图表用属性选择器反色（grid 线/轴标签/条形底轨），
   不改 core.js 的图表库本身。
   ============================================================ */
.bi-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.bi-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--panel);
}
.bi-title { font-size: 17px; font-weight: 700; letter-spacing: 1px; }
.bi-clock { margin-left: auto; font-size: 12px; color: var(--muted); }
.bi-clock b { font-variant-numeric: tabular-nums; font-weight: 600; }
.bi-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px; }

/* ---------- 面板（浅色默认） ---------- */
.bi-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.bi-panel + .bi-panel, .bi-kpis + .bi-panel, .bi-tabs + .bi-fbar { margin-top: 0; }
.bi-ws-l .bi-panel + .bi-panel, .bi-ws-c .bi-panel + .bi-panel, .bi-ws-r .bi-panel + .bi-panel { margin-top: 12px; }
.bi-panel-hd { display: flex; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--border-2); font-size: 13.5px; font-weight: 600; color: var(--text); }
.bi-panel-hd .spacer { flex: 1; }
.bi-hd-x { font-size: 11.5px; font-weight: 400; color: var(--muted); }
.bi-panel-bd { padding: 12px 14px; }
.bi-note { padding: 0 14px 10px; font-size: 11px; color: var(--muted); }
.bi-empty { padding: 42px 0; text-align: center; color: var(--muted); font-size: 12px; }

/* ---------- KPI 行 ---------- */
.bi-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.bi-kpi {
  position: relative; display: flex; align-items: center; gap: 12px;
  border-radius: 12px; padding: 15px 18px; color: #fff; overflow: hidden;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .12);
}
.bi-kpi i { font-size: 25px; font-style: normal; opacity: .92; line-height: 1; }
.bi-kpi-m { min-width: 0; }
.bi-kpi-m b { display: block; font-size: 12.5px; font-weight: 500; opacity: .94; }
.bi-kpi-m span { display: block; font-size: 26px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.bi-kpi-m span b { font-size: 26px; font-weight: 700; opacity: 1; }
.bi-kpi-m small { display: block; font-size: 11px; opacity: .82; margin-top: 3px; }
.bi-kpi.kp1 { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }
.bi-kpi.kp2 { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.bi-kpi.kp3 { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.bi-kpi.kp4 { background: linear-gradient(135deg, #d97706, #f59e0b); }
@media (max-width: 1100px) { .bi-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 布局 ---------- */
.bi-ws-grid { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(430px, 1.75fr) minmax(230px, 1fr); gap: 14px; align-items: start; }
.bi-2col, .bi-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.bi-stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bi-warn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
@media (max-width: 1280px) {
  .bi-ws-grid { grid-template-columns: 1fr 1fr; }
  .bi-ws-c { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 860px) {
  .bi-ws-grid, .bi-2col, .bi-grid2, .bi-stat3, .bi-warn { grid-template-columns: 1fr; }
}

/* ---------- 滚动表格 / 实时表 ---------- */
.bi-scroll { max-height: 300px; overflow: auto; }
.bi-scroll table.dt th { position: sticky; top: 0; z-index: 1; }
.bi-live-body { padding: 0; display: flex; flex-direction: column; }
.bi-live-box { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0 4px; }
.bi-live-box table.dt th { position: sticky; top: 0; z-index: 1; }
.bi-live-tb { font-size: 12.5px; }
.bi-live-foot { flex: 0 0 auto; padding: 8px 18px; font-size: 11.5px; border-top: 1px solid; }

/* ---------- 分段切换 / 页签 / 筛选条 ---------- */
.bi-seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 2px; gap: 2px; }
.bi-seg button { border: 0; background: none; padding: 5px 14px; border-radius: 6px; cursor: pointer; font-size: 12.5px; color: var(--text-2); transition: all .12s; }
.bi-seg button:hover { color: var(--primary); }
.bi-seg button.on { background: var(--primary); color: #fff; font-weight: 600; }
.bi-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.bi-tabs button { border: 0; background: none; padding: 8px 18px; font-size: 13.5px; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.bi-tabs button.on { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }
.bi-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; box-shadow: var(--shadow); }
.bi-fbar input[type="date"], .bi-fbar select { height: 32px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; background: var(--panel); color: var(--text); font-size: 12.5px; }
.bi-fbar select { min-width: 116px; }
.bi-fsep { color: var(--muted); }

/* ---------- 达成率徽标 ---------- */
.bi-rate { font-weight: 600; font-variant-numeric: tabular-nums; }
.bi-rate.ok { color: var(--green); }
.bi-rate.mid { color: var(--amber); }
.bi-rate.zero { color: var(--muted); }

/* ============================================================
   深蓝主题：6 个 BI 看板（车间一体化 / 生产实时 / 订单 / 派工 / 车间状态 / 委外）
   ============================================================ */
.bi-dark { background: linear-gradient(165deg, #071232 0%, #0b1e42 52%, #091634 100%); }
.bi-dark .bi-head { border-bottom: 1px solid rgba(70, 130, 230, .3); background: rgba(7, 18, 50, .55); }
.bi-dark .bi-title { color: #eaf2ff; text-shadow: 0 0 16px rgba(96, 165, 250, .5); }
.bi-dark .bi-clock { color: #93b4e6; }
.bi-dark .bi-clock b { color: #d5e6ff; }
.bi-dark .bi-panel { background: rgba(13, 31, 64, .72); border: 1px solid rgba(70, 130, 230, .28); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(120, 170, 255, .07); }
.bi-dark .bi-panel-hd { color: #d6e6ff; border-bottom: 1px solid rgba(70, 130, 230, .22); }
.bi-dark .bi-hd-x { color: #8fb0dd; }
.bi-dark .bi-note { color: #7d9cc9; }
.bi-dark .bi-empty { color: #7d9cc9; }
.bi-dark table.dt th { background: #10234b; color: #bcd6fb; border-bottom: 1px solid rgba(70, 130, 230, .35); }
.bi-dark table.dt td { color: #dce8f9; border-bottom: 1px solid rgba(120, 150, 200, .14); }
.bi-dark table.dt tbody tr:hover td { background: rgba(59, 130, 246, .16); }
.bi-dark .legend { color: #b9cff2; }
.bi-dark .bi-rate.ok { color: #4ade80; }
.bi-dark .bi-rate.mid { color: #fbbf24; }
.bi-dark .bi-rate.zero { color: #9aa9c4; }
/* 统计块（.s1~.s6）：深色底 + 左侧彩色 accent */
.bi-dark .bi-kpi { background: rgba(17, 38, 78, .6); border: 1px solid rgba(70, 130, 230, .3); box-shadow: none; color: #dbe7fa; border-left-width: 3px; }
.bi-dark .bi-kpi-m b { color: #a9c3e8; }
.bi-dark .bi-kpi.s1 { border-left-color: #60a5fa; } .bi-dark .bi-kpi.s1 i { color: #60a5fa; }
.bi-dark .bi-kpi.s2 { border-left-color: #22d3ee; } .bi-dark .bi-kpi.s2 i { color: #22d3ee; }
.bi-dark .bi-kpi.s3 { border-left-color: #fbbf24; } .bi-dark .bi-kpi.s3 i { color: #fbbf24; }
.bi-dark .bi-kpi.s4 { border-left-color: #4ade80; } .bi-dark .bi-kpi.s4 i { color: #4ade80; }
.bi-dark .bi-kpi.s5 { border-left-color: #c084fc; } .bi-dark .bi-kpi.s5 i { color: #c084fc; }
.bi-dark .bi-kpi.s6 { border-left-color: #f87171; } .bi-dark .bi-kpi.s6 i { color: #f87171; }
/* 预警卡 */
.bi-dark .bi-warn-i { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: rgba(17, 38, 78, .6); border: 1px solid rgba(70, 130, 230, .3); }
.bi-dark .bi-warn-i i { font-size: 20px; font-style: normal; }
.bi-dark .bi-warn-i b { display: block; font-size: 12px; color: #b9cff2; font-weight: 500; }
.bi-dark .bi-warn-i span { display: block; font-size: 14px; font-weight: 700; margin-top: 2px; }
.bi-dark .bi-warn-i.ok span { color: #4ade80; }
.bi-dark .bi-warn-i.warn span { color: #fbbf24; }
.bi-dark .bi-warn-i.danger span { color: #f87171; }
.bi-dark .bi-seg { background: rgba(10, 24, 54, .8); border-color: rgba(70, 130, 230, .3); }
.bi-dark .bi-seg button { color: #a9c3e8; }
.bi-dark .bi-seg button.on { background: #2563eb; color: #fff; }
/* 离线 SVG 图表反色：网格线淡出、轴标签变亮、条形底轨变暗 */
.bi-dark .chart-box svg line[stroke="#eef2f7"] { stroke: rgba(148, 163, 184, .22); }
.bi-dark .chart-box svg text[fill="#94a3b8"] { fill: #9fb4d8; }
.bi-dark .chart-box svg text[fill="#475569"] { fill: #c8d8f2; }
.bi-dark .chart-box svg rect[fill="#f1f5f9"] { fill: rgba(148, 163, 184, .16); }
/* 环形图镂空圆 + 环心数字 / 仪表盘读数：图表库写死 #fff / #1e293b（浅底专用），
   深色底上必须反色，否则是「白洞 + 黑字」。①②③ 三处颜色都要同步，别只改一处。 */
.bi-dark .chart-box svg circle[fill="#fff"] { fill: #0d1f40; }
.bi-dark .chart-box svg text[fill="#1e293b"] { fill: #eaf2ff; }
/* 大屏时钟的日期段（时间数字由 .bi-clock b 控制） */
.bi-dark .bi-clock { display: flex; align-items: baseline; gap: 8px; }
.bi-dark .bi-clock span { font-size: 11.5px; color: #8fb0dd; }

/* ---------- 三栏网格 / 栏内竖排（经营看板用；生产看板也可复用） ---------- */
.bi-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.bi-col-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* 经营看板「经营结构」：两张环形图竖排，各自拿满整栏宽度（图例不换行） */
.bi-jy-stack { display: flex; flex-direction: column; gap: 10px; }
.bi-jy-stack .chart-box { gap: 12px; }
@media (max-width: 1280px) { .bi-3col { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .bi-3col { grid-template-columns: 1fr; } }
@media (max-width: 1280px) { .bi-3col .bi-col-stack { grid-column: 1 / -1; flex-direction: row; } }
@media (max-width: 860px) { .bi-3col .bi-col-stack { flex-direction: column; } }

/* ---------- 四宫格 KPI（订单/派工/车间状态/委外）在深蓝底上的左边条 + 图标色 ---------- */
.bi-dark .bi-kpi.kp1 { border-left-color: #a78bfa; } .bi-dark .bi-kpi.kp1 i { color: #a78bfa; }
.bi-dark .bi-kpi.kp2 { border-left-color: #60a5fa; } .bi-dark .bi-kpi.kp2 i { color: #60a5fa; }
.bi-dark .bi-kpi.kp3 { border-left-color: #22d3ee; } .bi-dark .bi-kpi.kp3 i { color: #22d3ee; }
.bi-dark .bi-kpi.kp4 { border-left-color: #fbbf24; } .bi-dark .bi-kpi.kp4 i { color: #fbbf24; }

/* ---------- 实时表 / 筛选条 / 页签 / 进度条 / 状态标签（深蓝底适配） ---------- */
.bi-dark .bi-live-foot { color: #9fb4d8; border-top-color: rgba(70, 130, 230, .22); background: rgba(7, 18, 50, .55); }
.bi-dark .bi-fbar { background: rgba(13, 31, 64, .72); border: 1px solid rgba(70, 130, 230, .28); box-shadow: none; }
.bi-dark .bi-fbar input[type="date"], .bi-dark .bi-fbar select {
  background: rgba(10, 24, 54, .85); border: 1px solid rgba(70, 130, 230, .32); color: #dbe7fa;
}
.bi-dark .bi-fbar input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.78) sepia(.25) saturate(4) hue-rotate(190deg); }
.bi-dark .bi-fsep { color: #7d9cc9; }
.bi-dark .bi-tabs { border-bottom: 1px solid rgba(70, 130, 230, .28); }
.bi-dark .bi-tabs button { color: #a9c3e8; }
.bi-dark .bi-tabs button:hover { color: #dbe7fa; }
.bi-dark .bi-tabs button.on { color: #93c5fd; border-bottom-color: #38bdf8; }
.bi-dark .bar { background: rgba(148, 163, 184, .22); }
.bi-dark .bar-wrap span { color: #9fb4d8; }
.bi-dark .tag { background: rgba(148, 163, 184, .16); color: #dbe7fa; }
.bi-dark .tag.blue { background: rgba(59, 130, 246, .22); color: #93c5fd; }
.bi-dark .tag.green { background: rgba(16, 185, 129, .20); color: #6ee7b7; }
.bi-dark .tag.amber { background: rgba(245, 158, 11, .20); color: #fcd34d; }
.bi-dark .tag.red { background: rgba(239, 68, 68, .20); color: #fca5a5; }
.bi-dark .tag.purple { background: rgba(139, 92, 246, .22); color: #c4b5fd; }
.bi-dark .tag.teal { background: rgba(20, 184, 166, .20); color: #5eead4; }
/* 滚动容器在深蓝底上的细滚动条（大屏观感，不抢眼） */
.bi-dark .bi-scroll::-webkit-scrollbar, .bi-dark .bi-live-box::-webkit-scrollbar { width: 6px; height: 6px; }
.bi-dark .bi-scroll::-webkit-scrollbar-thumb, .bi-dark .bi-live-box::-webkit-scrollbar-thumb { background: rgba(96, 165, 250, .35); border-radius: 3px; }
.bi-dark .bi-scroll::-webkit-scrollbar-track, .bi-dark .bi-live-box::-webkit-scrollbar-track { background: transparent; }

/* ---------- 大屏铺满：四宫格（车间状态）面板撑到底部，图表在剩余空间内垂直居中 ----------
   宽屏下 .bi-body 变 flex 列 → .bi-grid2 flex:1 → 面板 flex:1 → 图表占满剩余高度。
   两栏看板（订单/派工/委外）保持自然高度：表格数据只有几行时拉满整屏反而空得难看，
   也让面板脚注紧贴表格（不甩到屏幕最底部）。
   窄屏（≤860px）退回自然高度，避免卡片被拉成一条。 */
.bi-grow { flex: 1 1 auto; min-height: 140px; max-height: 360px; }
@media (min-width: 861px) {
  .bi-dark .bi-body { display: flex; flex-direction: column; }
  .bi-dark .bi-body > .bi-grid2 { flex: 1 1 auto; min-height: 0; }
  /* 网格行必须是 1fr 才会把剩余高度分给卡片（默认 auto 行 + align-items:start → 卡片只有内容高度） */
  /* 行高 minmax(300px,1fr)：屏幕够高时铺满，不够高时保底 300px（图表不被压扁，靠 .bi-body 滚动） */
  .bi-dark .bi-body > .bi-grid2 { align-items: stretch; grid-template-rows: repeat(2, minmax(300px, 1fr)); }
  .bi-dark .bi-grid2 > .bi-panel { display: flex; flex-direction: column; min-height: 0; }
  .bi-dark .bi-grid2 > .bi-panel > .bi-panel-bd { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .bi-dark .bi-grid2 > .bi-panel > .bi-panel-bd > .chart-box { flex: 1 1 auto; align-items: center; }
}
@media (max-width: 860px) {
  .bi-grow { flex: 0 0 auto; max-height: 360px; }
}

/* 经营看板涨跌色：跟随全局 .up(红涨) / .dn(绿跌) 口径，深色底上提亮一档 */
.bi-dark .bi-rate.up { color: #f87171; }
.bi-dark .bi-rate.dn { color: #4ade80; }

/* ============================================================
   主页 → 系统架构（2026-10-17 新增，sys_arch_page.js）
   ------------------------------------------------------------
   设计稿：左侧业务域竖排（图标+名称），右侧功能节点用箭头串成流程；
   卡片风格参考「白底圆角卡 + 浅蓝图标块 + 名称」的门户磁贴（同 .hr-qt 口径）。
   结构类：.sa-wrap/.sa-topbar/.sa-chip/.sa-hint/.sa-board/.sa-row/
           .sa-rail/.sa-body/.sa-line/.sa-card/.sa-arrow/.sa-extra/.sa-mini/.sa-note
   注意：节点是 <button>，卡片内**不得**再嵌按钮（浏览器会打散 DOM）。
   ============================================================ */
.sa-wrap { display: flex; flex-direction: column; gap: 14px; }
.sa-topbar {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px 14px;
}
.sa-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 700; color: var(--primary);
  background: var(--primary-l); border-radius: var(--radius-s);
  padding: 6px 14px; white-space: nowrap;
}
.sa-hint { font-size: 12.5px; color: var(--muted); }
.sa-topbar .pn-btn { margin-left: auto; }

.sa-board {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px 12px;
}
.sa-row {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 13px 0; border-top: 1px dashed var(--border-2);
}
.sa-row:first-child { border-top: 0; padding-top: 4px; }
/* 左：业务域（图标方块 + 名称 + 节点数） */
.sa-rail {
  position: relative; flex: 0 0 92px; width: 92px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: linear-gradient(180deg, #f2f7ff, #e9f1ff);
  border: 1px solid #dde8fb; border-radius: 12px;
  padding: 12px 6px 9px;
}
.sa-rail i {
  font-style: normal; font-size: 19px; width: 40px; height: 40px; line-height: 40px;
  text-align: center; background: #fff; border-radius: 11px;
  box-shadow: 0 1px 3px rgba(37, 99, 235, .14);
}
.sa-rail b { font-size: 13px; color: #1d4ed8; font-weight: 700; }
.sa-rail em { font-style: normal; font-size: 11px; color: #8fa0bb; }
/* 业务域之间的竖向虚线（设计稿的层间连接线） */
.sa-rail::after {
  content: ''; position: absolute; left: 50%; bottom: -15px; height: 14px;
  border-left: 1px dashed #c7d7ef;
}
.sa-row:last-child .sa-rail::after { display: none; }
/* 右：节点流 */
.sa-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sa-line { display: flex; align-items: stretch; flex-wrap: wrap; gap: 7px 4px; }
/* 卡片弹性填满行宽（设计稿②的卡片是宽卡：图标居中 + 名称在下）。
   flex:1 1 0 + max-width 保证每行铺满又不至于把 5 张卡拉成巨型方块；
   min-width 是窄屏换行门槛。 */
.sa-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  flex: 1 1 0; min-width: 80px; max-width: 172px; padding: 9px 6px 8px;
  border: 1px solid #e7edf7; border-radius: 10px; background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  cursor: pointer; transition: border-color .13s, box-shadow .13s, transform .13s;
}
.sa-card i {
  font-style: normal; font-size: 16px; width: 32px; height: 32px; line-height: 32px;
  text-align: center; background: #eef4ff; border-radius: 10px;
}
.sa-card span { font-size: 12px; line-height: 1.2; color: var(--text-2); white-space: nowrap; }
.sa-card:hover {
  border-color: #bcd3fb; box-shadow: 0 6px 16px rgba(37, 99, 235, .14); transform: translateY(-1px);
}
.sa-card:hover i { background: #dfeaff; }
/* 规划中节点：虚线卡 + 灰图标，视觉上弱于已上线节点 */
.sa-card.plan { border-style: dashed; border-color: #e3e9f3; background: #fcfdff; }
.sa-card.plan i { background: #f3f6fb; }
.sa-card.plan span { color: #93a1b6; }
.sa-arrow { color: #b3c4dc; font-size: 14px; line-height: 1; }
/* 「关联」一行：虚线胶囊（侧向协同节点，不属于主流程顺序） */
.sa-extra { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sa-extra-t {
  font-size: 11.5px; color: var(--muted); letter-spacing: 1px;
  border: 1px dashed #dfe7f3; border-radius: 999px; padding: 3px 10px; background: #fafcff;
}
.sa-mini {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px dashed #dfe7f3; border-radius: 999px; background: #fbfcff;
  padding: 4px 12px 4px 5px; font-size: 12px; color: var(--text-2);
  transition: border-color .13s, color .13s, background .13s;
}
.sa-mini i {
  font-style: normal; font-size: 13px; width: 22px; height: 22px; line-height: 22px;
  text-align: center; background: #eef4ff; border-radius: 7px;
}
.sa-mini:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-l); }
.sa-mini.plan { color: #93a1b6; }
.sa-mini.plan i { background: #f3f6fb; }
/* 底部图例 */
.sa-note {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px;
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border-2);
  font-size: 11.5px; color: var(--text-2);
}
.sa-note span { display: inline-flex; align-items: center; gap: 6px; }
.sa-dot {
  width: 9px; height: 9px; border-radius: 3px; display: inline-block;
  border: 1px solid #bcd3fb; background: #eef4ff;
}
.sa-dot.plan { border-style: dashed; border-color: #dbe3ef; background: #f6f8fc; }
/* 窄屏收窄：弹性卡的「主尺寸」是 flex-basis，改 width 无效，必须压 max-width */
@media (max-width: 1280px) {
  .sa-card { max-width: 118px; }
  .sa-card span { font-size: 11.5px; }
}
@media (max-width: 1100px) {
  .sa-row { gap: 12px; }
  .sa-rail { flex: 0 0 78px; width: 78px; padding: 10px 4px 8px; }
  .sa-card { max-width: 104px; min-width: 74px; }
  .sa-hint { display: none; }
}

/* ============================================================
   通用过滤视图 / 导航设置（2026-10-17 新增，view_pages.js）
   ------------------------------------------------------------
   .fv-tip —— 视图口径说明（同一张表的多个视图需要自证筛选口径）
   .ns-*   —— 导航设置页：左「可选功能」勾选 / 右「我的导航」排序
   ============================================================ */
.fv-tip {
  margin: 0 0 10px; padding: 7px 12px; border-left: 3px solid var(--primary);
  background: var(--primary-l); border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: 12px; color: var(--text-2); line-height: 1.6;
}
.ns-wrap { display: flex; gap: 14px; align-items: flex-start; }
.ns-col {
  flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.ns-hd {
  padding: 10px 14px; font-size: 13px; font-weight: 700;
  border-bottom: 1px solid var(--border-2); background: var(--panel-2);
}
.ns-list { padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 420px; overflow: auto; }
.ns-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--panel);
  padding: 8px 10px; font-size: 12.5px; color: var(--text-2); transition: all .13s;
}
.ns-item:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-l); }
.ns-item.on { border-color: var(--primary); background: var(--primary-l); color: var(--primary); }
.ns-item i { font-style: normal; font-size: 12px; opacity: .7; }
.ns-picked { padding: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow: auto; }
.ns-pk {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--panel-2); font-size: 12.5px;
}
.ns-pk > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-mv, .ns-rm {
  width: 26px; height: 24px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); color: var(--text-2); cursor: pointer; line-height: 1;
}
.ns-mv:hover, .ns-rm:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-l); }
.ns-rm:hover { border-color: var(--red); color: var(--red); background: #fef2f2; }
.ns-empty { padding: 24px 12px; text-align: center; color: var(--muted); font-size: 12.5px; }
.ns-ft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 1100px) { .ns-wrap { flex-direction: column; } }

/* 项目管理看板（view_pages.js P.projectBoard）
   ⚠ 不能复用 .ns-list（导航设置备注选列表，minmax 150px）——项目卡需要 260px 起，
      否则项目名/预算/进度挤成一团。 */
.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 12px; }
@media (max-width: 1100px) { .pj-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.pj-card {
  border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--panel);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.pj-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pj-hd b { font-size: 13px; }
.pj-sub { font-size: 11.5px; }
.pj-bar { height: 6px; border-radius: 4px; background: #eef2f7; overflow: hidden; }
.pj-bar i { display: block; height: 100%; background: linear-gradient(90deg, #4f92f5, #2f6bd8); }
.pj-card .btn { align-self: flex-start; padding: 3px 10px; font-size: 12px; }