/* ============================================================
   观澜 · 管理控制台  ——  样式系统
   设计语言：水墨留白 + 玉色点睛，克制而大气
   ============================================================ */

:root {
  /* 墨色侧边栏 */
  --ink-900: #0b201e;
  --ink-800: #0f2a26;
  --ink-700: #163d37;
  --ink-line: rgba(255, 255, 255, 0.08);

  /* 纸感内容区 */
  --paper: #f5f3ee;
  --surface: #ffffff;
  --border: #e9e4d8;
  --border-soft: #f0ece2;

  /* 文本 */
  --text-strong: #14201e;
  --text: #46544f;
  --text-mute: #8a948f;

  /* 品牌点缀 */
  --jade: #1f8a70;
  --jade-deep: #166b56;
  --jade-soft: #e3f1ec;
  --amber: #d99a4e;
  --amber-soft: #f7ecd9;
  --blue: #3a6ea5;
  --blue-soft: #e6eef6;
  --cinnabar: #c75d3c;
  --cinnabar-soft: #f6e3db;
  /* 图表第五色（成本结构等五/六大类场景） */
  --teal: #4f9d8f;
  --teal-soft: #e6f2ef;

  --shadow-sm: 0 1px 2px rgba(20, 32, 30, 0.04), 0 2px 8px rgba(20, 32, 30, 0.05);
  --shadow-md: 0 6px 24px rgba(20, 32, 30, 0.08);
  --radius: 16px;
  --radius-sm: 10px;
  --sidebar-w: 256px;
  --sidebar-mini: 76px;
  --topbar-h: 68px;
  /* 内容区左右安全留白：全站统一，保证任何视口下都不贴浏览器边缘 */
  --gutter: 32px;

  --font-serif: "Noto Serif SC", "Songti SC", serif;
  --font-sans: "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Space Grotesk", var(--font-sans);
}

[data-theme="dark"] {
  --ink-900: #0a1715;
  --ink-800: #0d201d;
  --ink-700: #143029;
  --paper: #0e1715;
  --surface: #15211f;
  --border: #243530;
  --border-soft: #1c2b27;
  --text-strong: #eef2f0;
  --text: #b3c0bb;
  --text-mute: #7c8a85;
  --jade-soft: #16342c;
  --amber-soft: #2e2614;
  --blue-soft: #16283a;
  --cinnabar-soft: #2e1c15;
  --teal: #6fb5a6;
  --teal-soft: #17302b;
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.6;
}

::selection { background: var(--jade); color: #fff; }

/* ===================== 侧边栏 ===================== */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: linear-gradient(165deg, var(--ink-900), var(--ink-800) 60%, var(--ink-700));
  color: #cfdad6;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  z-index: 1040;
  transition: width .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 22px;
  color: #fff;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--jade), var(--jade-deep));
  color: #fff;
  flex: none;
  box-shadow: 0 6px 16px rgba(31,138,112,.4);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.brand-text strong { font-family: var(--font-serif); font-size: 19px; font-weight: 700; letter-spacing: 2px; }
.brand-text small { font-size: 11px; color: #8fa39c; letter-spacing: 1px; }

.sidebar__nav { flex: 1; overflow-y: auto; margin-top: 6px; }
.sidebar__nav::-webkit-scrollbar { width: 4px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: var(--ink-line); border-radius: 4px; }

/* 侧栏分区：默认展开、可点击收起的分组标题（带细分隔线，与菜单项层次分明） */
.nav-label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #7e948d;
  text-transform: uppercase;
  margin: 12px 12px 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.07);
  white-space: nowrap;
}
.sidebar__nav > .nav-label:first-of-type { border-top: none; margin-top: 8px; padding-top: 0; }
.nav-label:hover { color: #cfe0db; }
.nav-label .nav-caret { margin-left: auto; font-size: .85rem; opacity: .65; transition: transform .2s ease; }
.nav-label.is-collapsed .nav-caret { transform: rotate(-90deg); }
.nav-group.is-collapsed { display: none; }

/* 系统设置 — 基础字典维护（可增删的标签 editor） */
.dict-block { padding: 16px 0; border-top: 1px solid var(--border-soft); }
.dict-block:first-child { border-top: none; padding-top: 0; }
.dict-block > .field { margin-bottom: 10px; }
.tag-editor { display: flex; flex-direction: column; gap: 10px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 99px; line-height: 1;
  background: var(--jade-soft, rgba(31,138,112,.12));
  color: var(--jade-deep, #1f8a70);
  font-size: 12.5px; font-weight: 500;
}
.chip__del { cursor: pointer; border: none; background: none; padding: 0; color: inherit; opacity: .55; font-size: 13px; line-height: 1; transition: opacity .15s; }
.chip__del:hover { opacity: 1; }
.tag-add { display: flex; gap: 8px; }
.tag-add__input {
  flex: 1; max-width: 300px; padding: 8px 12px;
  border: 1px solid var(--border-soft); border-radius: 9px;
  background: var(--surface); color: var(--text-strong);
  font-size: 13.5px; font-family: var(--font-sans); outline: none; transition: border-color .15s;
}
.tag-add__input:focus { border-color: var(--jade); }
@media (max-width: 575px) { .tag-add { flex-direction: column; } .tag-add__input { max-width: none; } }
.nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 12px;
  margin: 3px 0;
  border-radius: 11px;
  color: #b6c5c0;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.nav-item i { font-size: 17px; flex: none; width: 22px; text-align: center; }
.nav-item span:not(.nav-badge) { flex: 1; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active {
  background: linear-gradient(100deg, rgba(31,138,112,.92), rgba(31,138,112,.55));
  color: #fff;
  box-shadow: 0 6px 16px rgba(31,138,112,.3);
}
.nav-item.active::before {
  content: ""; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 0 4px 4px 0; background: var(--jade);
}
.nav-badge {
  background: var(--cinnabar); color: #fff; font-size: 11px;
  padding: 1px 7px; border-radius: 999px; font-weight: 600;
}

.sidebar__foot { padding-top: 14px; border-top: 1px solid var(--ink-line); }
.usage { padding: 4px 8px; font-size: 12px; }
.usage__head { display: flex; justify-content: space-between; color: #cdd9d4; margin-bottom: 7px; }
.usage__pct { color: var(--amber); font-weight: 600; }
.usage__bar { height: 6px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; }
.usage__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--jade), var(--amber)); border-radius: 99px; }
.usage small { color: #7e938c; display: block; margin-top: 6px; white-space: nowrap; }

/* 折叠为迷你侧边栏（仅桌面） */
body.sidebar-mini .sidebar { width: var(--sidebar-mini); }
body.sidebar-mini .brand-text,
body.sidebar-mini .nav-label,
body.sidebar-mini .nav-item span:not(.nav-badge),
body.sidebar-mini .usage small,
body.sidebar-mini .usage__head { display: none; }
body.sidebar-mini .sidebar__brand { justify-content: center; padding: 6px 0 22px; }
body.sidebar-mini .nav-item { justify-content: center; padding: 12px 0; }
body.sidebar-mini .nav-badge { position: absolute; top: 4px; right: 14px; }
body.sidebar-mini .usage { padding: 4px 0; text-align: center; }

/* ===================== 主区域 ===================== */
.shell { margin-left: var(--sidebar-w); transition: margin-left .28s cubic-bezier(.22,1,.36,1); }
body.sidebar-mini .shell { margin-left: var(--sidebar-mini); }

.topbar {
  position: sticky; top: 0; z-index: 1030;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar__left { display: flex; align-items: center; gap: 16px; }

.icon-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface); color: var(--text);
  font-size: 17px; cursor: pointer; position: relative;
  transition: .2s;
}
.icon-btn:hover { color: var(--jade); border-color: var(--jade); transform: translateY(-1px); }
.icon-btn.has-dot .dot {
  position: absolute; top: 9px; right: 10px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cinnabar); border: 2px solid var(--surface);
}

.breadcrumb-nav { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-mute); }
.crumb-root { font-family: var(--font-serif); font-weight: 600; color: var(--text); }
.breadcrumb-nav .bi-chevron-right { font-size: 11px; }
.crumb-current { color: var(--text-strong); font-weight: 600; }

.topbar__search {
  flex: 1; max-width: 440px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 9px 14px; color: var(--text-mute);
  transition: .2s;
}
.topbar__search:focus-within { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); }
.topbar__search input { flex: 1; border: none; outline: none; background: none; color: var(--text-strong); font-size: 13px; font-family: var(--font-sans); }
.topbar__search kbd {
  font-family: var(--font-num); font-size: 11px; color: var(--text-mute);
  border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px;
}

.topbar__right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px 5px 5px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); transition: .2s;
}
.user-chip:hover { border-color: var(--jade); }
.avatar {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 600;
  background: linear-gradient(140deg, var(--ink-700), var(--jade-deep));
  font-family: var(--font-serif);
}
.user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.user-meta strong { color: var(--text-strong); font-size: 13px; }
.user-meta small { color: var(--text-mute); font-size: 11px; }
.user-chip .bi-chevron-down { color: var(--text-mute); font-size: 12px; }
.user-chip[aria-expanded="true"] { border-color: var(--jade); }
.user-chip[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

/* ===================== 用户下拉菜单（工厂代码 / 退出系统） =====================
   全站 banner 统一：挂在 .user-chip 内绝对定位，交互见 nav.js */
.user-chip { position: relative; }
.user-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 1040;
  min-width: 236px; padding: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.user-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.user-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: none; border-radius: 8px;
  background: none; color: var(--text); font-family: var(--font-sans); font-size: 13px;
  text-align: left; cursor: pointer; transition: .15s;
}
.user-menu__item:hover, .user-menu__item:focus-visible {
  background: var(--jade-soft); color: var(--jade-deep); outline: none;
}
.user-menu__item > .bi { font-size: 15px; color: var(--text-mute); flex: none; transition: .15s; }
.user-menu__item:hover > .bi, .user-menu__item:focus-visible > .bi { color: var(--jade); }
.user-menu__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.user-menu__label { font-size: 13px; color: var(--text-strong); }
.user-menu__value { font-family: var(--font-num); font-size: 12px; color: var(--jade); letter-spacing: .02em; }
.user-menu__note { margin: -2px 0 4px 34px; font-size: 11px; color: var(--text-mute); }
.user-menu__sep { height: 1px; margin: 4px 2px; background: var(--border-soft); }
.user-menu__item--danger:hover, .user-menu__item--danger:focus-visible {
  background: var(--cinnabar-soft); color: var(--cinnabar);
}
.user-menu__item--danger:hover > .bi, .user-menu__item--danger:focus-visible > .bi { color: var(--cinnabar); }

/* ===================== 内容 ===================== */
/* 内容区：限宽并在剩余空间内居中 —— 宽屏下左右留白均衡，不贴侧边栏也不贴右边缘 */
.content {
  padding: 30px var(--gutter) 48px;
  width: 100%;
  max-width: calc(1440px + var(--gutter) * 2);
  margin: 0 auto;
}

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 26px; flex-wrap: wrap;
}
.page-title { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--text-strong); margin: 0; letter-spacing: 1px; }
.page-sub { margin: 6px 0 0; color: var(--text-mute); font-size: 13.5px; }
.page-actions { display: flex; gap: 10px; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 11px; font-weight: 500; font-size: 13px;
  cursor: pointer; border: 1px solid transparent; transition: .2s; font-family: var(--font-sans);
}
.btn-primary-c { background: var(--jade); color: #fff; box-shadow: 0 4px 14px rgba(31,138,112,.3); }
.btn-primary-c:hover { background: var(--jade-deep); transform: translateY(-1px); }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--jade); color: var(--jade); }
.btn-sm { padding: 5px 12px; font-size: 12.5px; border-radius: 9px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* KPI */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; }
.kpi-card {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm);
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
  position: relative; overflow: hidden;
}
.kpi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.kpi-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kpi-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; }
.ico-jade { background: var(--jade-soft); color: var(--jade); }
.ico-amber { background: var(--amber-soft); color: var(--amber); }
.ico-blue { background: var(--blue-soft); color: var(--blue); }
.ico-cinnabar { background: var(--cinnabar-soft); color: var(--cinnabar); }
.kpi-trend { font-family: var(--font-num); font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; }
.kpi-trend.up { color: var(--jade); background: var(--jade-soft); }
.kpi-trend.down { color: var(--cinnabar); background: var(--cinnabar-soft); }
.kpi-label { margin: 0; color: var(--text-mute); font-size: 13px; }
.kpi-value { margin: 4px 0 0; font-family: var(--font-num); font-size: 26px; font-weight: 700; color: var(--text-strong); letter-spacing: .5px; }
.spark { margin-top: 14px; width: 100% !important; height: 38px !important; }

/* 面板 */
.panel-grid { display: grid; gap: 18px; margin-bottom: 22px; }
.panel-grid:not(.panel-grid--2) { grid-template-columns: 1.9fr 1fr; }
.panel-grid--2 { grid-template-columns: 1.6fr 1fr; }
.panel {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border-soft);
}
.panel__title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--text-strong); margin: 0; }
.panel__sub { margin: 3px 0 0; font-size: 12px; color: var(--text-mute); }
.panel__body { padding: 20px 22px; }
.panel__body.flush { padding: 0; }

.seg { display: inline-flex; background: var(--paper); border-radius: 10px; padding: 3px; gap: 2px; }
.seg-btn { border: none; background: none; padding: 6px 14px; border-radius: 8px; font-size: 12.5px; color: var(--text-mute); cursor: pointer; font-family: var(--font-sans); transition: .2s; }
.seg-btn.active { background: var(--surface); color: var(--jade); box-shadow: var(--shadow-sm); font-weight: 600; }

.doughnut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.doughnut-wrap canvas { max-width: 180px; max-height: 180px; }
.legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 140px; }
.legend li { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 13px; color: var(--text); }
.legend .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend .lv { margin-left: auto; font-family: var(--font-num); color: var(--text-strong); font-weight: 600; }

/* 表格 */
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th {
  text-align: left; padding: 14px 22px; color: var(--text-mute); font-weight: 500;
  font-size: 12px; letter-spacing: .5px; border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface) 70%, var(--paper));
  white-space: nowrap;
}
.data-table td { padding: 14px 22px; border-bottom: 1px solid var(--border-soft); color: var(--text); white-space: nowrap; }
.data-table tbody tr { transition: background .15s; }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--jade) 5%, transparent); }
.data-table tbody tr:last-child td { border-bottom: none; }
.mono { font-family: var(--font-num); color: var(--text-strong); }
.muted { color: var(--text-mute); }

.tag { display: inline-block; padding: 3px 11px; border-radius: 99px; font-size: 12px; font-weight: 500; }
.tag-ok { background: var(--jade-soft); color: var(--jade-deep); }
.tag-warn { background: var(--amber-soft); color: #a9762b; }
.tag-info { background: var(--blue-soft); color: var(--blue); }
.tag-bad { background: var(--cinnabar-soft); color: var(--cinnabar); }
.tag-muted { background: var(--border-soft); color: var(--text-mute); }
.tag-qc { background: var(--blue-soft); color: var(--blue); font-family: var(--font-num); letter-spacing: .3px; }
.stat-bar-wrap { width: 130px; height: 8px; border-radius: 99px; background: var(--border-soft); overflow: hidden; }
.stat-bar { height: 100%; border-radius: 99px; background: var(--jade); }
.stat-bar-wrap .stat-bar { min-width: 4px; }

.row-link { color: var(--jade); text-decoration: none; font-weight: 500; }
.row-link:hover { text-decoration: underline; }
.link-more { color: var(--jade); text-decoration: none; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.link-more:hover { gap: 8px; transition: gap .2s; }

/* 动态流 */
.feed { list-style: none; margin: 0; padding: 0; }
.feed__item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--border-soft); }
.feed__item:last-child { border-bottom: none; }
.feed__dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; }
.dot-jade { background: var(--jade); } .dot-amber { background: var(--amber); }
.dot-blue { background: var(--blue); } .dot-cinnabar { background: var(--cinnabar); }
.feed__item div { font-size: 13.5px; color: var(--text); }
.feed__item strong { color: var(--text-strong); }
.feed__item time { display: block; font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }

/* 空状态 */
.empty-state { text-align: center; padding: 72px 20px; color: var(--text-mute); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); }
.empty-state i { font-size: 44px; color: var(--jade); opacity: .7; }
.empty-state h3 { font-family: var(--font-serif); color: var(--text-strong); margin: 16px 0 6px; font-size: 19px; }
.empty-state p { margin: 0; font-size: 13.5px; }

/* 表单 */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }

/* 权限矩阵 */
.perm-matrix th, .perm-matrix td { text-align: center; }
.perm-matrix th:first-child, .perm-matrix td:first-child { text-align: left; }
.perm-matrix .ok { color: var(--jade); font-weight: 700; }
.perm-matrix td:not(.ok):not(:first-child) { color: var(--text-mute); }

/* 授权信息 */
.license-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.license-item { display: flex; flex-direction: column; gap: 6px; }
.license-item--full { grid-column: 1 / -1; }
.license-item > span { font-size: 12.5px; color: var(--text-mute); }
.license-item > strong { font-size: 15px; color: var(--text-strong); font-weight: 600; }
.license-item code { background: var(--paper); padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); font-family: var(--font-num); color: var(--text-strong); }
.license-item input { border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; background: var(--paper); color: var(--text-strong); outline: none; font-family: var(--font-sans); }
.license-item input:focus { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); background: var(--surface); }
.field span { font-size: 12.5px; color: var(--text); font-weight: 500; }
.field input, .field textarea {
  border: 1px solid var(--border); border-radius: 11px; padding: 10px 13px;
  font-family: var(--font-sans); font-size: 13.5px; color: var(--text-strong);
  background: var(--paper); outline: none; transition: .2s; resize: vertical;
}
.field input:focus, .field textarea:focus { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); background: var(--surface); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* 视图切换 */
.view { display: none; animation: rise .4s cubic-bezier(.22,1,.36,1); }
.view.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 移动端遮罩 */
.scrim { position: fixed; inset: 0; background: rgba(10,20,18,.5); backdrop-filter: blur(2px); z-index: 1035; }

/* ===================== 响应式 ===================== */
@media (max-width: 1199px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
  :root { --sidebar-w: 256px; }
  .sidebar { transform: translateX(-100%); width: var(--sidebar-w) !important; }
  body.sidebar-open .sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.4); }
  body.sidebar-mini .sidebar { width: var(--sidebar-w) !important; }
  body.sidebar-mini .brand-text,
  body.sidebar-mini .nav-label,
  body.sidebar-mini .nav-item span:not(.nav-badge),
  body.sidebar-mini .usage small,
  body.sidebar-mini .usage__head { display: revert; }
  body.sidebar-mini .sidebar__brand,
  body.sidebar-mini .nav-item { justify-content: flex-start; padding: revert; }
  .shell, body.sidebar-mini .shell { margin-left: 0; }
  .panel-grid:not(.panel-grid--2), .panel-grid--2 { grid-template-columns: 1fr; }
  .topbar__search { display: none; }
}
@media (max-width: 575px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .content { padding: 20px 16px 40px; }
  .topbar { padding: 0 16px; }
  .user-meta { display: none; }
  .page-title { font-size: 23px; }
  .form-grid { grid-template-columns: 1fr; }
  .license-grid { grid-template-columns: 1fr; }
}

/* ===================== 登录页 ===================== */
.auth { min-height: 100vh; display: flex; }

.auth-aside {
  position: relative; flex: 0 0 46%; max-width: 560px;
  background: linear-gradient(165deg, var(--ink-900), var(--ink-800) 60%, var(--ink-700));
  color: #eef2f0; padding: 56px 52px; display: flex; flex-direction: column;
  overflow: hidden;
}
.auth-aside::after {
  content: ""; position: absolute; right: -130px; bottom: -130px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, rgba(31,138,112,.35), transparent 70%);
}
.auth-aside::before {
  content: ""; position: absolute; left: -90px; top: -90px;
  width: 280px; height: 280px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.07);
}
.auth-brand { display: flex; align-items: center; gap: 12px; z-index: 1; }
.auth-brand .brand-mark { color: var(--jade); display: inline-flex; }
.auth-brand .brand-text strong { font-family: var(--font-serif); font-size: 20px; font-weight: 700; letter-spacing: 2px; color: #fff; display: block; line-height: 1.2; }
.auth-brand .brand-text small { font-size: 12.5px; color: rgba(255,255,255,.6); letter-spacing: 1px; }

.auth-hero { margin-top: auto; z-index: 1; }
.auth-hero h1 { font-family: var(--font-serif); font-weight: 700; font-size: 38px; line-height: 1.34; color: #fff; margin: 0 0 16px; }
.auth-hero h1 em { font-style: normal; color: var(--amber); }
.auth-hero p { color: rgba(255,255,255,.72); font-size: 14.5px; line-height: 1.85; max-width: 380px; margin: 0; }
.auth-points { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 16px; }
.auth-points li { display: flex; align-items: center; gap: 13px; color: rgba(255,255,255,.85); font-size: 14px; }
.auth-points i { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(31,138,112,.18); color: var(--jade); font-size: 16px; }
.auth-foot { margin-top: 40px; z-index: 1; font-size: 12.5px; color: rgba(255,255,255,.45); }

.auth-main { flex: 1; background: var(--paper); display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-card {
  width: 100%; max-width: 400px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 40px 38px;
  animation: rise .5s cubic-bezier(.22,1,.36,1);
}
.auth-card__head { text-align: center; margin-bottom: 30px; }
.auth-logo {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(140deg, var(--jade), var(--jade-deep));
  display: grid; place-items: center; color: #fff; font-size: 22px; margin: 0 auto 16px;
  box-shadow: 0 8px 22px rgba(31,138,112,.32);
}
.auth-card__head h2 { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--text-strong); margin: 0 0 6px; }
.auth-card__head p { font-size: 13px; color: var(--text-mute); margin: 0; }

.auth-field { position: relative; display: block; margin-bottom: 18px; }
.auth-field > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-mute); font-size: 16px; pointer-events: none; }
.auth-field input {
  width: 100%; border: 1px solid var(--border); border-radius: 11px;
  padding: 13px 14px 13px 42px; font-family: var(--font-sans); font-size: 14px;
  color: var(--text-strong); background: var(--paper); outline: none; transition: .2s;
}
.auth-field input:focus { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); background: var(--surface); }
.auth-field input::placeholder { color: var(--text-mute); }
.auth-hint { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--text-mute); margin: -6px 0 16px; }
.auth-hint i { flex: none; font-size: 13px; color: var(--amber); margin-top: 1px; }

.auth-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 22px; font-size: 13px; }
.auth-check { display: flex; align-items: center; gap: 7px; color: var(--text); cursor: pointer; }
.auth-check input { width: 15px; height: 15px; accent-color: var(--jade); }
.auth-link { color: var(--jade); text-decoration: none; font-weight: 500; }
.auth-link:hover { color: var(--jade-deep); text-decoration: underline; }

.auth-submit { width: 100%; justify-content: center; padding: 12px; font-size: 14.5px; border-radius: 11px; letter-spacing: 2px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--text-mute); font-size: 12.5px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-alt { display: flex; gap: 10px; }
.auth-alt .btn { flex: 1; justify-content: center; }
.auth-footnote { text-align: center; margin: 22px 0 0; font-size: 12.5px; color: var(--text-mute); }

@media (max-width: 860px) {
  .auth { flex-direction: column; }
  .auth-aside { flex: none; max-width: none; padding: 38px 28px; }
  .auth-hero { margin-top: 30px; }
  .auth-hero h1 { font-size: 28px; }
  .auth-hero p { font-size: 13.5px; }
  .auth-points { margin-top: 24px; }
  .auth-foot { margin-top: 28px; }
  .auth-main { padding: 32px 20px; }
}
@media (max-width: 575px) {
  .auth-aside { padding: 30px 22px; }
  .auth-card { padding: 30px 24px; }
  .auth-points { display: none; }
}

/* ===================== 客户档案（增量） ===================== */
/* 保证 hidden 属性在自带 display 的组件类（如 .btn）上依然生效 */
[hidden] { display: none !important; }

/* 检索与筛选工具条 */
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.toolbar__spacer { flex: 1; min-width: 0; }
.toolbar__search {
  flex: 1 1 240px; max-width: 320px;
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 11px; padding: 8px 13px; color: var(--text-mute);
  transition: border-color .2s, box-shadow .2s;
}
.toolbar__search:focus-within { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); }
.toolbar__search input {
  flex: 1; min-width: 0; border: none; outline: none; background: none;
  color: var(--text-strong); font-size: 13px; font-family: var(--font-sans);
}
.toolbar__search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.select-c {
  border: 1px solid var(--border); border-radius: 11px; padding: 8px 12px;
  background: var(--paper); color: var(--text-strong);
  font-size: 13px; font-family: var(--font-sans); outline: none;
  min-width: 126px; transition: border-color .2s, box-shadow .2s, background .2s;
}
.select-c:focus { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); background: var(--surface); }
.select-c:disabled { opacity: .72; cursor: not-allowed; background: var(--border-soft); }

/* 面板右上角提示 */
.panel__note { font-size: 12px; color: var(--text-mute); }

/* KPI 补充 */
.kpi-unit { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text-mute); margin-left: 4px; }
.kpi-note {
  font-family: var(--font-num); font-size: 12px; color: var(--text-mute);
  background: var(--border-soft); padding: 3px 9px; border-radius: 99px;
}
/* 趋势：红涨绿跌（中国制造业语境） */
.kpi-trend.trend-up { color: var(--cinnabar); background: var(--cinnabar-soft); }
.kpi-trend.trend-down { color: var(--jade); background: var(--jade-soft); }

/* 表格：排序表头与单元格副信息 */
.data-table th.sortable { cursor: pointer; user-select: none; transition: color .2s; }
.data-table th.sortable:hover { color: var(--jade); }
.data-table th.sorted { color: var(--text-strong); }
.sort-ico { font-size: 11px; margin-left: 4px; opacity: .45; }
.data-table th.sorted .sort-ico { opacity: 1; color: var(--jade); }
.cell-main { display: block; color: var(--text-strong); font-weight: 500; }
.cell-sub { display: block; font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }
.row-link--danger { color: var(--cinnabar); }
.row-link--danger:hover { color: var(--cinnabar); }

/* 分页 */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 22px; border-top: 1px solid var(--border-soft);
}
.pager__info { font-size: 12.5px; color: var(--text-mute); }
.pager__pages { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pager-btn {
  min-width: 32px; height: 32px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 9px; font-size: 12.5px; font-family: var(--font-num);
  cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
.pager-btn:hover:not(:disabled) { border-color: var(--jade); color: var(--jade); }
.pager-btn:disabled { opacity: .45; cursor: not-allowed; }
.pager-btn.active { background: var(--jade); border-color: var(--jade); color: #fff; font-weight: 600; }
.pager__ellipsis { color: var(--text-mute); padding: 0 2px; }

/* 弹窗（Bootstrap Modal 主题化） */
.modal-lg { max-width: 780px; }
.modal-content {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.modal-header { padding: 18px 22px; border-bottom: 1px solid var(--border-soft); }
.modal-body { padding: 20px 22px; }
.modal-footer { padding: 14px 22px; border-top: 1px solid var(--border-soft); justify-content: space-between; }
.modal-footer .form-actions { margin-top: 0; }
.modal-title { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--text-strong); }
.modal-body .form-grid { gap: 16px 18px; }

/* 表单校验 */
.req { color: var(--cinnabar); font-style: normal; margin-left: 2px; }
.field-err { display: none; font-size: 11.5px; color: var(--cinnabar); }
.field.has-error .field-err { display: block; }
/* 字段常态说明（非错误态）：用于注明复制口径等交互约定 */
.field-hint { display: block; font-size: 11.5px; color: var(--text-mute); margin-top: 4px; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--cinnabar); }
.field input:disabled, .field textarea:disabled {
  opacity: .75; cursor: not-allowed; background: var(--border-soft); box-shadow: none;
}
.form-tip { font-size: 12.5px; color: var(--text-mute); }
.form-tip.is-error { color: var(--cinnabar); }

/* 轻量操作提示 */
.toast-c {
  position: fixed; right: 24px; bottom: 24px; z-index: 1080;
  display: flex; align-items: center; gap: 10px;
  max-width: 360px; padding: 12px 18px;
  border-radius: 12px; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
  font-size: 13.5px; color: var(--text-strong);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1);
}
.toast-c.show { opacity: 1; transform: none; }
.toast-c i { font-size: 17px; color: var(--jade); flex: none; }
.toast-c.is-warn i { color: var(--amber); }

/* 深色主题适配 */
[data-theme="dark"] .select-c { color-scheme: dark; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(1.4); opacity: .75; }
[data-theme="dark"] .modal-backdrop.show { opacity: .62; }
[data-theme="dark"] .field input:disabled,
[data-theme="dark"] .field textarea:disabled { opacity: .8; }

@media (max-width: 767px) {
  .pager { justify-content: center; }
  .toolbar__search { max-width: none; flex-basis: 100%; }
  .toast-c { right: 16px; left: 16px; bottom: 16px; max-width: none; }
}

/* ==== 模具档案（增量） ==== */
/* 寿命进度条：正常玉色 / 临期琥珀 / 超限朱红，与 KPI 配色保持一致 */
.life-bar {
  display: inline-block; vertical-align: middle;
  width: 88px; height: 6px; margin-right: 8px;
  border-radius: 99px; background: var(--border-soft); overflow: hidden;
}
.life-bar > i {
  display: block; height: 100%; border-radius: 99px;
  background: var(--jade); transition: width .3s cubic-bezier(.22,1,.36,1);
}
.life-bar.is-warn > i { background: var(--amber); }
.life-bar.is-bad > i { background: var(--cinnabar); }
.life-text { font-size: 12.5px; color: var(--text); }

[data-theme="dark"] .life-bar { background: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .life-text { color: var(--text); }

/* ============================================================
   自适应与留白（全站修订）
   目标：所有视口下内容均不贴浏览器边缘，且不产生横向溢出
   ============================================================ */

/* 1) 基础防溢出：媒体与表格不允许撑破容器；禁用 iOS 横屏字体自动放大 */
html { -webkit-text-size-adjust: 100%; }
img, svg, canvas, video, table { max-width: 100%; }
body { overflow-x: hidden; }
.topbar__left, .topbar__right, .page-head > div, .panel__head > div { min-width: 0; }
.page-title, .page-sub, .panel__title, .panel__sub { overflow-wrap: anywhere; }

/* 2) 面板头：标题与右侧提示在窄屏自动换行，避免互相挤压 */
.panel__head { flex-wrap: wrap; gap: 10px 16px; }
.panel__head > .panel__note { margin-left: auto; }

/* 3) 状态快切：按钮过多时换行，不再撑出面板 */
.seg { flex-wrap: wrap; max-width: 100%; }

/* 4) 表格：横向滚动容器补 iOS 惯性滚动 */
.table-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* 5) 移动端抽屉：限宽避免小屏被侧边栏占满，打开时锁定背景滚动 */
@media (max-width: 991px) {
  .sidebar { max-width: 84vw; }
  body.sidebar-open { overflow: hidden; }
}

/* 6) 留白分级：视口越宽留白越大，越窄越紧凑，但始终保持安全边距 */
@media (min-width: 1600px) { :root { --gutter: 40px; } }
@media (max-width: 1199px) { :root { --gutter: 28px; } }
@media (max-width: 991px) {
  :root { --gutter: 24px; }
  .content { padding-top: 24px; padding-bottom: 40px; }
  .page-head { align-items: flex-start; }
  .page-actions { flex-wrap: wrap; }
  .toolbar { gap: 10px; }
  .toolbar__search { flex: 1 1 200px; }
  .select-c { flex: 1 1 140px; min-width: 120px; }
}
@media (max-width: 767px) {
  .data-table th, .data-table td { padding: 12px 14px; }
  .panel__head { padding: 16px 16px; }
  .panel__body { padding: 16px; }
  .pager { padding: 12px 16px; }
  .empty-state { padding: 48px 16px; }
  .modal-dialog { margin: 16px; }
  .modal-header { padding: 16px 16px; }
  .modal-body { padding: 16px; }
  .modal-footer {
    flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px;
  }
  .modal-footer .form-actions { justify-content: space-between; }
  .modal-footer .form-actions .btn { flex: 1; justify-content: center; }
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .license-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  :root { --gutter: 16px; }
  .content { padding-top: 20px; padding-bottom: 32px; }
  .page-title { font-size: 22px; }
  .kpi-card { padding: 18px; }
  .kpi-value { font-size: 24px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; justify-content: center; }
  .toolbar__search, .select-c { flex: 1 1 100%; max-width: none; }
  .seg { width: 100%; }
  .seg-btn { flex: 1; padding: 6px 8px; }
  .doughnut-wrap { justify-content: center; }
}
@media (max-width: 420px) {
  /* 极窄屏：面包屑只保留当前页，给顶栏腾出空间 */
  .breadcrumb-nav .crumb-root,
  .breadcrumb-nav .bi-chevron-right { display: none; }
  .user-chip { padding: 4px; border: none; background: none; }
  .user-chip .bi-chevron-down { display: none; }
}

/* 7) 打印：隐藏侧边栏与顶栏，内容占满宽度 */
@media print {
  .sidebar, .topbar, .scrim, .page-actions, .pager, .toolbar { display: none !important; }
  .shell { margin-left: 0; }
  .content { max-width: none; padding: 0; }
  .panel, .kpi-card { break-inside: avoid; box-shadow: none; }
}

/* ===================== 登录页（自适应修订） ===================== */
.auth { min-height: 100vh; }
@supports (min-height: 100dvh) { .auth { min-height: 100dvh; } }
.auth-aside { padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 52px); }
.auth-hero h1 { font-size: clamp(26px, 3.2vw, 38px); }
.auth-main { padding: clamp(28px, 4vw, 40px) var(--gutter); }

@media (max-width: 860px) {
  /* 竖排时压缩品牌区，保证登录表单落在首屏可见范围内 */
  .auth-aside { padding: 26px var(--gutter); }
  .auth-hero { margin-top: 22px; }
  .auth-hero h1 { font-size: 24px; margin-bottom: 10px; }
  .auth-hero p { display: none; }
  .auth-points { margin-top: 20px; gap: 12px; }
  .auth-foot { margin-top: 20px; }
}
@media (max-width: 575px) {
  .auth-aside { padding: 22px var(--gutter); }
  .auth-card { padding: 28px 20px; }
  .auth-card__head { margin-bottom: 22px; }
  .auth-alt { flex-direction: column; }
}

/* 8) 表格操作列：链接不折行，避免宽屏下"停用"被挤到第二行 */
.data-table .row-actions { flex-wrap: nowrap; }

/* 9) 表格自适应收缩：表头与副信息允许换行、窄容器收紧内边距、进度条缩短 */
.data-table th { white-space: normal; vertical-align: middle; }
.data-table .cell-sub { white-space: normal; }
@media (max-width: 1500px) {
  .data-table th, .data-table td { padding: 13px 16px; }
  .life-bar { width: 64px; }
}
@media (max-width: 1199px) {
  .data-table th, .data-table td { padding: 12px 14px; }
}

/* 10) 表头：桌面上不换行（换行点由 HTML 中的 <br> 精确控制，避免"模具分/类"式词内断裂）；
      移动端放宽为可换行，减少横向滚动量 */
.data-table th { white-space: nowrap; }
@media (max-width: 767px) { .data-table th { white-space: normal; } }

/* 11) 细粒度适配：降低动效偏好、移动端安全区（刘海 / 手势条）、手机横屏低高度 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@supports (padding: max(0px)) {
  .toast-c { bottom: max(20px, env(safe-area-inset-bottom, 0px)); }
  .sidebar { padding-left: max(16px, env(safe-area-inset-left, 0px)); }
  .content, .auth-main { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
}
@media (max-height: 480px) and (orientation: landscape) {
  :root { --topbar-h: 56px; }
  .content { padding-top: 16px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .sidebar { padding-top: 14px; padding-bottom: 14px; }
}

/* 12) 移动端 KPI 卡片略作紧凑，减少首屏滚动距离 */
@media (max-width: 575px) {
  .kpi-card__top { margin-bottom: 10px; }
  .kpi-ico { width: 38px; height: 38px; font-size: 17px; }
  .kpi-note { font-size: 11.5px; padding: 2px 8px; }
}

/* ==== 产品档案（增量） ==== */
/* 负毛利率：朱红标注，与 KPI 的 cinnabar 语义一致 */
.cell-neg { color: var(--cinnabar); font-weight: 600; }
[data-theme="dark"] .cell-neg { color: #e5836a; }

/* ==== 费用档案（增量） ==== */
/* 空值占位（如百分比费用的计量单位）：弱化显示，避免与真实数据混淆 */
.cell-mute { color: var(--text-mute); }
[data-theme="dark"] .cell-mute { color: var(--text-mute); }
/* 弹窗内被联动禁用的字段：显式置灰，提示当前计费方式下无需填写 */
.form-grid select:disabled,
.form-grid input:disabled { opacity: .55; cursor: not-allowed; }

/* ==== 工艺档案（增量） ==== */
/* 复选框字段：让"是否停用"与标签横向排列，不被两列栅格压窄 */
.field--check { display: flex; align-items: center; gap: .5rem; }
.field--check input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--jade); flex: 0 0 auto; }
.field--check span { font-weight: 500; color: var(--text-1); }
[data-theme="dark"] .field--check span { color: var(--text-1); }

/* ==== 加工路线（增量） ==== */
/* 五列 KPI：默认 5 列，随视口逐步降到 3 / 2 / 1 列 */
.kpi-grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1399px) { .kpi-grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1199px) { .kpi-grid--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .kpi-grid--5 { grid-template-columns: 1fr; } }

/* 更宽的弹窗：工序明细子表列数较多 */
.modal-xl { max-width: 1120px; }
@media (max-width: 1199px) { .modal-xl { max-width: 960px; } }

/* 操作列四项（查看 / 编辑 / 复制 / 停用）允许换行，避免撑破表格 */
.data-table .row-actions.row-actions--4 { flex-wrap: wrap; gap: 4px 10px; }

/* 复制行：下拉与按钮同一行，按钮不换行 */
.copy-row { display: flex; align-items: center; gap: 8px; }
.copy-row .select-c { flex: 1 1 auto; min-width: 0; }
.copy-row .btn { flex: 0 0 auto; white-space: nowrap; }

/* 工序明细子表 */
.line-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.line-tip { font-size: 11.5px; font-weight: 400; color: var(--text-mute); }
.route-lines { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.route-lines__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.route-lines__foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border-top: 1px solid var(--border-soft); background: var(--paper);
}
.route-lines__hint { font-size: 11.5px; color: var(--text-mute); }

.data-table--lines { min-width: 1040px; }
.data-table--lines th, .data-table--lines td { padding: 9px 10px; font-size: 12.5px; white-space: nowrap; }
.data-table--lines thead th { background: var(--paper); font-size: 12px; }
.data-table--lines .col-no  { width: 56px; }
.data-table--lines .col-proc { width: 230px; white-space: normal; }
.data-table--lines .col-mach { width: 170px; white-space: normal; }
.data-table--lines .col-num { width: 92px; text-align: right; }
.data-table--lines .col-act { width: 62px; text-align: center; }

/* 子表控件：紧凑输入 / 下拉，与 .field 内的控件风格保持一致 */
.route-lines .select-c,
.route-lines .line-input {
  width: 100%; padding: 6px 8px; font-size: 12.5px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--paper); color: var(--text-strong);
  font-family: var(--font-sans); outline: none; transition: .2s;
}
.route-lines .line-input { text-align: right; font-family: var(--font-num); }
.route-lines .select-c:focus,
.route-lines .line-input:focus { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); background: var(--surface); }
.route-lines .select-c:disabled,
.route-lines .line-input:disabled { opacity: .55; cursor: not-allowed; background: var(--border-soft); }
.data-table--lines .btn-del {
  border: none; background: none; padding: 0; font-size: 12.5px; cursor: pointer;
}
.data-table--lines .btn-del:disabled { opacity: .5; cursor: not-allowed; }

/* 产量试算区 */
.calc-box {
  border: 1px dashed var(--border); border-radius: var(--radius);
  background: var(--paper); padding: 14px 16px;
}
.calc-box__head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; font-weight: 600; color: var(--text-strong); margin-bottom: 12px;
}
.calc-box__head i { color: var(--jade); font-size: 15px; }
.calc-box__head small { font-weight: 400; font-size: 11.5px; color: var(--text-mute); }
.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.calc-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border-soft);
}
.calc-item > span { font-size: 11.5px; color: var(--text-mute); }
.calc-item > strong { font-size: 16px; font-weight: 700; color: var(--text-strong); }
.calc-item--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.calc-inline { display: inline-flex; align-items: center; gap: 8px; }
.calc-inline input {
  width: 120px; padding: 6px 10px; font-size: 12.5px; font-family: var(--font-num);
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
  color: var(--text-strong); outline: none; transition: .2s;
}
.calc-inline input:focus { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); }
.calc-inline input:disabled { opacity: .55; cursor: not-allowed; background: var(--border-soft); }
.calc-inline i { color: var(--text-mute); font-size: 12px; }
.calc-inline strong { font-size: 15px; color: var(--jade-deep); }

@media (max-width: 767px) {
  .calc-grid { grid-template-columns: repeat(2, 1fr); }
  .route-lines__foot { padding: 10px; }
}
@media (max-width: 575px) {
  .calc-grid { grid-template-columns: 1fr; }
}

/* ==== 产品BOM（增量） ==== */
/* 三格汇总：材料项数 / 材料成本 / 未指定工艺项数 */
.calc-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { .calc-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .calc-grid--3 { grid-template-columns: 1fr; } }

/* 未指定工艺：琥珀色弱化强调，提示后续需由后端分配投料工序 */
.cell-warn { color: var(--amber); font-weight: 600; }
[data-theme="dark"] .cell-warn { color: #e0a94a; }

/* 列表附件角标：回形针 + 数量 */
.attach-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 99px;
  background: var(--border-soft); color: var(--text-mute);
  font-family: var(--font-num); font-size: 12px;
}
.attach-chip i { font-size: 12px; }

/* 附件上传区 */
.attach-box { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.attach-box__bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 1px solid var(--border-soft);
}
.attach-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.attach-btn { margin: 0; cursor: pointer; }
.attach-btn.is-disabled { opacity: .5; pointer-events: none; }
.attach-box__count { font-family: var(--font-num); font-size: 12px; color: var(--text-mute); }
.attach-box__hint {
  margin: 0; padding: 8px 12px; border-top: 1px solid var(--border-soft);
  font-size: 11.5px; color: var(--text-mute); background: var(--paper);
}

.attach-list { list-style: none; margin: 0; padding: 6px 0; max-height: 188px; overflow-y: auto; }
.attach-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; font-size: 12.5px; color: var(--text-strong);
}
.attach-item + .attach-item { border-top: 1px dashed var(--border-soft); }
.attach-item__ico { flex: none; font-size: 15px; color: var(--blue); }
.attach-item__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.attach-item__size { flex: none; font-size: 12px; color: var(--text-mute); }
.attach-item__del {
  flex: none; border: none; background: none; padding: 2px 4px;
  color: var(--cinnabar); font-size: 12px; cursor: pointer; line-height: 1;
}
.attach-item__del:disabled { opacity: .5; cursor: not-allowed; }
.attach-empty { padding: 10px 12px; font-size: 12px; color: var(--text-mute); }

/* 材料明细子表：列数较路线多，加宽最小宽度并横向滚动 */
.data-table--bom { min-width: 1180px; }
.data-table--bom .col-mat    { width: 210px; white-space: normal; }
.data-table--bom .col-spec   { width: 120px; }
.data-table--bom .col-unit   { width: 62px; }
.data-table--bom .col-proc   { width: 176px; white-space: normal; }
.data-table--bom .col-remark { width: 120px; }
.data-table--bom .inp-spec,
.data-table--bom .inp-unit,
.data-table--bom .inp-remark { text-align: left; font-family: var(--font-sans); }

/* ==== 产品BOM：资料选择器（增量） ==== */
/* 可点击搜索框：替代原产品 / 材料下拉，选项多时便于模糊查找 */
.pick-box {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-width: 0; text-align: left;
  border: 1px solid var(--border); border-radius: 11px; padding: 8px 12px;
  background: var(--paper); color: var(--text-strong);
  font-size: 13px; font-family: var(--font-sans);
  cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s;
}
.pick-box:hover { border-color: var(--jade); }
.pick-box:focus-visible { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); outline: none; }
.pick-box:disabled { opacity: .72; cursor: not-allowed; background: var(--border-soft); }
.pick-box__ico { flex: none; font-size: 12px; color: var(--text-mute); }
.pick-box__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-box__text.is-empty { color: var(--text-mute); }
.pick-box__arrow { flex: none; font-size: 11px; color: var(--text-mute); }

/* 明细行内的搜索框：填满材料单元格 */
.pick-box--line { padding: 6px 10px; font-size: 12.5px; }

/* 隐藏的值容器：Bootstrap reboot 会设 select{display:block}，此处显式压制 */
select[hidden] { display: none !important; }

/* 选择器弹窗：搜索区 */
.pick-search {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 14px; background: var(--paper);
}
.pick-search:focus-within { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); }
.pick-search > i { flex: none; font-size: 13px; color: var(--text-mute); }
.pick-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: none;
  color: var(--text-strong); font-size: 14px; font-family: var(--font-sans);
}
.pick-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.pick-search kbd {
  flex: none; font-family: var(--font-num); font-size: 11px; color: var(--text-mute);
  border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px;
}

/* 结果计数 */
.pick-count { margin: 10px 2px 6px; font-size: 12px; color: var(--text-mute); font-family: var(--font-num); }

/* 结果列表 */
.pick-list {
  list-style: none; margin: 0; padding: 0;
  max-height: 46vh; overflow-y: auto;
  border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface);
}
.pick-item {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px;
  padding: 9px 12px; cursor: pointer;
}
.pick-item + .pick-item { border-top: 1px solid var(--border-soft); }
.pick-item:hover { background: var(--border-soft); }
.pick-item.is-active { background: var(--jade-soft); }
.pick-item__code { font-size: 12.5px; font-weight: 600; color: var(--jade-deep); }
.pick-item__name { font-size: 13px; color: var(--text-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-item__meta {
  grid-column: 1 / -1; font-size: 11.5px; color: var(--text-mute);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 关键词高亮 */
.pick-item mark { background: var(--amber-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.pick-item.is-active mark { background: var(--amber); color: #fff; }
.pick-empty { padding: 24px 12px; text-align: center; font-size: 12.5px; color: var(--text-mute); }

/* 弹窗底部键盘提示 */
.pick-foot { justify-content: center; }
.pick-kbd { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-mute); }
.pick-kbd kbd {
  font-family: var(--font-num); font-size: 11px; color: var(--text-mute);
  border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; background: var(--surface);
}

/* 暗色主题适配 */
[data-theme="dark"] .pick-item__code { color: #58bda3; }
[data-theme="dark"] .pick-item.is-active { background: var(--jade-soft); }
[data-theme="dark"] .pick-item mark { background: var(--amber-soft); color: var(--text-strong); }
[data-theme="dark"] .pick-item.is-active mark { background: var(--amber); color: #1a1408; }

@media (max-width: 575px) {
  .pick-list { max-height: 52vh; }
  .pick-item { padding: 10px 12px; }
}

/* ==== 客户询价（增量） ==== */
/* 五格汇总：产品项数 / 总数量 / 预计金额 / 最短交期 / 最早要求交货日 */
.calc-grid--inq { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1399px) { .calc-grid--inq { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1199px) { .calc-grid--inq { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .calc-grid--inq { grid-template-columns: 1fr; } }

/* 询价产品明细子表：列宽与紧凑控件 */
.data-table--inq { min-width: 1020px; }
.data-table--inq th, .data-table--inq td { padding: 9px 10px; font-size: 12.5px; white-space: nowrap; }
.data-table--inq thead th { background: var(--paper); font-size: 12px; }
.data-table--inq .col-no    { width: 56px; }
.data-table--inq .col-prod  { width: 220px; white-space: normal; }
.data-table--inq .col-qty   { width: 96px; }
.data-table--inq .col-price { width: 116px; }
.data-table--inq .col-days  { width: 92px; }
.data-table--inq .col-due   { width: 108px; }
.data-table--inq .col-amt   { width: 116px; text-align: right; }
.data-table--inq .col-act   { width: 62px; text-align: center; }
.data-table--inq .inp-num {
  width: 100%; padding: 6px 8px; font-size: 12.5px; font-family: var(--font-num);
  text-align: right; border-radius: 9px;
  border: 1px solid var(--border); background: var(--paper); color: var(--text-strong);
  outline: none; transition: .2s;
}
.data-table--inq .inp-num:focus { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); background: var(--surface); }
.data-table--inq .inp-num:disabled { opacity: .55; cursor: not-allowed; background: var(--border-soft); }
.data-table--inq .sel-prod:disabled { opacity: .55; cursor: not-allowed; background: var(--border-soft); }

/* 明细行操作区：添加一行按钮 + 行级错误提示 */
.line-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 10px;
}
.line-actions .field-err { flex: 1 1 auto; min-width: 200px; }
/* 报价明细：转入按钮置于明细表上方 */
.line-actions--top { margin-top: 0; margin-bottom: 8px; }

/* 报价汇总：来源项跨整行 */
.calc-item--span2 { grid-column: 1 / -1; }

/* ==== 报价管理（增量） ==== */
/* 报价明细子表：4 数据列（产品/数量/单价/行金额）+ 行号 + 操作 */
.data-table--quote { min-width: 860px; }
.data-table--quote th, .data-table--quote td { padding: 9px 10px; font-size: 12.5px; white-space: nowrap; }
.data-table--quote thead th { background: var(--paper); font-size: 12px; }
.data-table--quote .col-no    { width: 56px; }
.data-table--quote .col-prod  { width: 240px; white-space: normal; }
.data-table--quote .col-qty   { width: 104px; }
.data-table--quote .col-price { width: 132px; }
.data-table--quote .col-amt   { width: 132px; text-align: right; }
.data-table--quote .col-act   { width: 62px; text-align: center; }
.data-table--quote .inp-num {
  width: 100%; padding: 6px 8px; font-size: 12.5px; font-family: var(--font-num);
  text-align: right; border-radius: 9px;
  border: 1px solid var(--border); background: var(--paper); color: var(--text-strong);
  outline: none; transition: .2s;
}
.data-table--quote .inp-num:focus { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); background: var(--surface); }
.data-table--quote .inp-num:disabled { opacity: .55; cursor: not-allowed; background: var(--border-soft); }
.data-table--quote .sel-prod:disabled { opacity: .55; cursor: not-allowed; background: var(--border-soft); }

/* ==== 标准核算（增量） ==== */
/* 双卡片栅格：产品BOM / 工装治具 并排 */
.panel-grid--cost2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 991px) { .panel-grid--cost2 { grid-template-columns: 1fr; } }

/* 客户询价信息：三列键值对 */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 28px; }
.info-item { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.info-item > span { font-size: 12px; color: var(--text-mute); }
.info-item > strong { font-size: 13.5px; font-weight: 600; color: var(--text-strong); word-break: break-all; }
@media (max-width: 767px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .info-grid { grid-template-columns: 1fr; } }

/* 询价产品行高亮：当前核算对象 */
.data-table tbody tr.is-active { background: color-mix(in srgb, var(--jade) 8%, transparent); }
.data-table tbody tr.is-active td { color: var(--text-strong); font-weight: 600; }

/* 核算卡片表格：紧凑行高 + 数字列右对齐 + 合计行 */
.data-table--cost { min-width: 720px; }
.data-table--cost th, .data-table--cost td { padding: 9px 14px; font-size: 12.5px; white-space: nowrap; }
.data-table--cost thead th { background: var(--paper); font-size: 12px; }
.data-table--cost td.num, .data-table--cost th.num { text-align: right; font-family: var(--font-num); }
.data-table--cost tbody td.num { color: var(--text-strong); }
.data-table--cost tfoot td {
  padding: 10px 14px; font-size: 12.5px; font-weight: 700; color: var(--text-strong);
  background: var(--paper); border-top: 1px solid var(--border); white-space: nowrap;
}
.data-table--cost tfoot td.num { text-align: right; font-family: var(--font-num); color: var(--jade-deep); }

/* 成本结构：环形图 + 占比表 */
.cost-struct { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.cost-struct__chart { position: relative; width: 200px; height: 200px; flex: none; }
.cost-struct__chart canvas { max-width: 200px; max-height: 200px; }
.cost-struct__center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.cost-struct__center small { display: block; text-align: center; font-size: 11px; color: var(--text-mute); }
.cost-struct__center strong { display: block; text-align: center; font-family: var(--font-num); font-size: 19px; font-weight: 700; color: var(--text-strong); margin-top: 2px; }
.struct-table { flex: 1; min-width: 320px; }
.struct-table .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.struct-table .st-src { font-size: 11.5px; color: var(--text-mute); }

/* 利润区（单独展示，不并入五卡片） */
.profit-band {
  border: 1px solid var(--border); border-left: 4px solid var(--jade);
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm);
  padding: 22px 24px; margin-bottom: 22px;
}
.profit-band__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.profit-band__head h2 { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--text-strong); margin: 0; }
.profit-band__head .panel__note { margin-left: auto; }
.profit-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.profit-item { background: var(--paper); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.profit-item > span { font-size: 12px; color: var(--text-mute); }
.profit-item > strong { font-family: var(--font-num); font-size: 20px; font-weight: 700; color: var(--text-strong); }
.profit-item > small { font-size: 11.5px; color: var(--text-mute); }
.profit-item--main { background: var(--jade-soft); border: 1px solid color-mix(in srgb, var(--jade) 35%, transparent); }
.profit-item--main > span { color: var(--jade-deep); font-weight: 600; }
.profit-item--main > strong { color: var(--jade-deep); font-size: 26px; }
.profit-note { margin: 14px 0 0; font-size: 12.5px; color: var(--text-mute); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1199px) { .profit-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px)  { .profit-grid { grid-template-columns: repeat(2, 1fr); } }

/* 核算单切换条（一张核算单 = 询价单中的一个产品行） */
.cost-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.cost-toolbar__label { font-size: 13px; font-weight: 600; color: var(--text-strong); display: inline-flex; align-items: center; gap: 7px; }
.cost-toolbar__label i { color: var(--jade); }
.cost-toolbar .panel__note { flex: 1 1 auto; }

/* 页标题旁的核算单号 */
.page-code { font-family: var(--font-num); font-size: 15px; font-weight: 600; color: var(--jade); background: var(--jade-soft); border-radius: 8px; padding: 3px 10px; margin-left: 10px; vertical-align: middle; letter-spacing: .5px; }

/* 单产品核算提示条 */
.sheet-only { margin-top: 16px; display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.7; color: var(--text); background: var(--jade-soft); border-radius: var(--radius-sm); padding: 10px 14px; }
.sheet-only > i { color: var(--jade); font-size: 14px; line-height: 1.7; flex: none; }
.sheet-only b { color: var(--jade-deep); font-weight: 600; }

/* ============================================================
   标准核算（重构增量）  ——  六步向导式核算单
   类名统一 cs- 前缀，沿用既有 CSS 变量与主题，不引入新配色
   ============================================================ */

/* 0) 区块垂直间距：全局统一 14px，首块与 page-head 之间 12px */
#view-costing .page-head { margin-bottom: 12px; }
.cs-actionbar, .cs-baseinfo, .cs-stepbar, .cs-tabs { margin-bottom: 14px; }

/* 1) 操作条：新增 / 速查 / 复制 / 删除 / 保存 / 打印 */
.cs-actionbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 10px 16px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.cs-actionbar .panel__note { flex: 1 1 220px; min-width: 0; }
.cs-actionbar .btn { white-space: nowrap; }

/* 2) 基本信息面板：标题居中 + 4 列 × 4 行轻量只读网格（无输入框外观） */
.cs-baseinfo { margin-bottom: 14px; }
.cs-baseinfo__head { justify-content: center; padding: 14px 22px; border-bottom: 1px solid var(--border-soft); }
.cs-baseinfo__head .panel__title { text-align: center; }
.cs-baseinfo .panel__body { padding: 16px 22px; }
.cs-baseinfo__grid { grid-template-columns: repeat(4, 1fr); gap: 10px 24px; }
.cs-baseinfo .info-item { gap: 2px; }
.cs-baseinfo .info-item > span { font-size: 12px; line-height: 1.4; color: var(--text-mute); }
/* 轻量只读：去掉边框 / 底色 / 内阴影，只保留标签 + 值的两行网格 */
.cs-baseinfo .info-item > strong {
  padding: 0; border: none; border-radius: 0; background: none; box-shadow: none;
  font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--text-strong);
  word-break: break-all;
}
.cs-baseinfo__note { margin: 12px 0 0; font-size: 12px; color: var(--text-mute); }
.cs-baseinfo__note .mono { font-size: 12px; }
@media (max-width: 1199px) { .cs-baseinfo__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .cs-baseinfo__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .cs-baseinfo__grid { grid-template-columns: 1fr; } }

/* 3) 六步向导条：切角/箭头分段，激活段玉色高亮 */
.cs-stepbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.cs-stepbar__steps { display: flex; flex-wrap: nowrap; gap: 0; flex: 1 1 auto; min-width: 0; }
.cs-step {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; flex: 1 1 0; min-width: 0; padding: 8px 20px; overflow: hidden;
  border: 1px solid var(--border); border-right: none;
  background: var(--surface); color: var(--text-mute);
  font-family: var(--font-sans); font-size: 13px; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  transition: background .2s, color .2s;
}
.cs-step + .cs-step {
  margin-left: -6px;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
}
.cs-step:last-child {
  border-right: 1px solid var(--border);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}
.cs-step__no { font-size: 11px; letter-spacing: 1px; opacity: .85; white-space: nowrap; }
.cs-step__label {
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.cs-step:hover { color: var(--jade); background: var(--jade-soft); }
.cs-step.is-active {
  background: linear-gradient(100deg, var(--jade), var(--jade-deep));
  border-color: var(--jade); color: #fff;
  box-shadow: 0 4px 12px rgba(31, 138, 112, .28);
}
.cs-step.is-active .cs-step__no { opacity: .9; }
/* 步条右侧：单据状态 */
.cs-stepbar__status {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  padding: 7px 14px; border: 1px solid var(--border-soft); border-radius: 11px;
  background: var(--surface); font-size: 12.5px; color: var(--text-mute);
}

/* 4) 页签栏：轻量下划线式（弱化，避免与步骤条形成两套重导航） */
.cs-tabs {
  display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.cs-tab {
  padding: 8px 18px; margin-bottom: -1px;
  border: none; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: var(--text-mute);
  font-family: var(--font-sans); font-size: 13px; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.cs-tab:hover { color: var(--jade); }
.cs-tab.is-active {
  background: none; border-bottom-color: var(--jade);
  color: var(--jade-deep); font-weight: 700;
}

/* 5) 行内录入条：挂载在面板标题栏之后，作为面板内的录入子条 */
.cs-addbar {
  margin: 0; padding: 12px 22px;
  background: var(--paper); border: 0; border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
}
.cs-addbar__inner { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.cs-addbar__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cs-addbar__field > span { font-size: 12px; color: var(--text-mute); white-space: nowrap; }
.cs-addbar input,
.cs-addbar select {
  width: 100%; min-width: 108px;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px;
  font-family: var(--font-sans); font-size: 13px; color: var(--text-strong);
  background: var(--surface); outline: none; transition: .2s;
}
.cs-addbar input[type="number"] { font-family: var(--font-num); }
.cs-addbar input:focus,
.cs-addbar select:focus { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); }
.cs-addbar input[readonly] { background: var(--border-soft); color: var(--text); cursor: not-allowed; }
.cs-addbar__btn { flex: none; }

/* 6) 明细行删除按钮 */
.cs-del {
  display: inline-flex; align-items: center; gap: 5px;
  border: none; background: none; padding: 0; margin: 0;
  color: var(--cinnabar); font-size: 12.5px; font-family: var(--font-sans);
  cursor: pointer; white-space: nowrap; transition: color .2s;
}
.cs-del:hover { color: #a3422a; text-decoration: underline; }
.data-table--cost .col-act { width: 68px; text-align: center; }

/* 7) 最终价格面板：沿用 .profit-band 视觉 */
.cs-price-band { margin-bottom: 0; padding: 0; border: none; box-shadow: none; background: none; }
.cs-price-target {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 14px;
  background: var(--paper); border: 1px solid var(--border-soft); border-radius: 12px;
}
.cs-price-target > label { font-size: 12.5px; font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.cs-price-target input {
  width: 140px; padding: 8px 11px; font-family: var(--font-num); font-size: 13px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text-strong); outline: none; transition: .2s;
}
.cs-price-target input:focus { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); }
.cs-price-target .panel__note { flex: 1 1 200px; }

/* 8) 步骤面板容器 */
.cs-panes > .panel { margin-bottom: 16px; }

/* 9) 说明文字精简：三处长说明统一 12px muted，宽屏下强制单行 */
@media (min-width: 992px) {
  #csActionBar .panel__note,
  #csObjBar .panel__note,
  #view-costing .page-sub { font-size: 12px; white-space: nowrap; }
}

/* 10) 响应式：窄屏去掉切角与负边距，改为圆角按钮并允许横向排布 */
@media (max-width: 991px) {
  .cs-stepbar__steps { flex-wrap: wrap; gap: 4px; }
  .cs-step { flex: 1 1 150px; }
}
@media (max-width: 767px) {
  .cs-step,
  .cs-step + .cs-step,
  .cs-step:last-child {
    clip-path: none; margin-left: 0; border: 1px solid var(--border); border-radius: 10px;
  }
  .cs-step { flex: 1 1 calc(50% - 4px); padding: 8px 12px; min-width: 0; }
  .cs-stepbar__status { width: 100%; justify-content: center; }
  .cs-tab { flex: 1 1 calc(33.333% - 6px); padding: 8px 10px; text-align: center; }
  .cs-addbar { padding: 12px 16px; }
  .cs-addbar__field { flex: 1 1 calc(50% - 12px); }
  .cs-addbar__btn { width: 100%; justify-content: center; }
}
@media (max-width: 575px) {
  .cs-step { flex: 1 1 100%; }
  .cs-tab { flex: 1 1 calc(50% - 6px); }
  .cs-addbar__field { flex: 1 1 100%; }
  .cs-actionbar .btn { flex: 1 1 calc(33.333% - 10px); justify-content: center; }
}

/* 10) 打印：操作条、步骤条与页签不出现在纸质底稿上 */
@media print {
  .cs-actionbar, .cs-stepbar, .cs-tabs, .cs-addbar, .cost-toolbar { display: none !important; }
}

/* 11) 速查入口强化：操作条「速查」按钮 + 基本信息「分析单号」后的内联图标 */
.cs-actionbar .cs-act-strong {
  background: var(--jade-soft);
  border-color: color-mix(in srgb, var(--jade) 45%, transparent);
  color: var(--jade-deep); font-weight: 600;
}
.cs-actionbar .cs-act-strong:hover { background: var(--jade); border-color: var(--jade); color: #fff; }
.cs-lookup-mini {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; margin-left: 6px; padding: 0;
  border: 1px solid color-mix(in srgb, var(--jade) 45%, transparent); border-radius: 7px;
  background: var(--jade-soft); color: var(--jade-deep);
  font-size: 11px; line-height: 1; cursor: pointer; vertical-align: middle; transition: .2s;
}
.cs-lookup-mini:hover { background: var(--jade); color: #fff; }

/* 12) 料号选择器：只读输入框 + 「选择」小按钮（点击二者均打开材料档案弹窗） */
.cs-pick { display: flex; align-items: stretch; gap: 6px; }
.cs-pick input { flex: 1 1 auto; min-width: 0; }
.cs-pick input[readonly] { cursor: pointer; }
.cs-pick__btn {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--jade-deep);
  font-size: 12.5px; font-family: var(--font-sans); cursor: pointer;
  white-space: nowrap; transition: .2s;
}
.cs-pick__btn:hover { border-color: var(--jade); background: var(--jade-soft); }

/* 13) 弹窗内选择表（核算单速查 / 材料档案） */
.cs-pick-table { min-width: 560px; }
.cs-pick-table tbody tr { cursor: pointer; }
.cs-pick-table tbody tr.is-active { background: color-mix(in srgb, var(--jade) 8%, transparent); }
.cs-open {
  border: none; background: none; padding: 0; margin: 0;
  color: var(--jade); font-size: 12.5px; font-family: var(--font-sans);
  cursor: pointer; white-space: nowrap;
}
.cs-open:hover { text-decoration: underline; }
.cs-open:disabled { color: var(--text-mute); cursor: default; text-decoration: none; }
/* 选择表中不可选中的行（费用状态非「启用」） */
.cs-pick-table tbody tr.is-off { cursor: not-allowed; opacity: .55; }
.cs-pick-table tbody tr.is-off:hover { background: none; }

/* 14) 最终价格：目标单价 / 毛利率 / 利润额 三向联动输入 */
.cs-price-target { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.cs-price-input { display: flex; flex-direction: column; gap: 5px; }
.cs-price-input label { font-size: 12px; color: var(--text-mute); white-space: nowrap; }
.cs-price-input input {
  width: 132px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 11px; font-family: var(--font-num); font-size: 13px;
  color: var(--text-strong); background: var(--surface); outline: none; transition: .2s;
}
.cs-price-input input:focus { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); }
.cs-price-input small { font-size: 11px; color: var(--text-mute); }

/* 15) 成本结构：利润行 / 汇总行 / 圆心副行 */
.cost-struct__center em {
  display: block; margin-top: 2px; font-style: normal;
  font-size: 11.5px; color: var(--text-mute); font-family: var(--font-sans);
}
.cs-struct-sum {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--border);
  font-size: 12.5px; color: var(--text); line-height: 1.7;
}
.cs-struct-sum b { font-family: var(--font-num); color: var(--text-strong); }
.cs-struct-sum b.is-pos { color: var(--jade-deep); }
.cs-struct-sum b.is-neg { color: var(--cinnabar); }
#csStructTable tbody tr.is-profit td { background: color-mix(in srgb, var(--jade) 6%, transparent); }
#csStructTable td.is-neg { color: var(--cinnabar); }

/* 16) 产品BOM：使用工艺标签 + 摘要列 */
.cs-proc { font-size: 11.5px; padding: 3px 8px; white-space: nowrap; }
.cs-note {
  max-width: 260px; color: var(--text-mute); font-size: 12.5px; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
th.col-note { width: 240px; }
/* 录入条里的摘要输入：只加宽「字段容器」，宽度不能加在 input 上
   —— .cs-addbar__field 是 flex-direction:column，写在 input 上的 flex-basis 会沿纵向生效，把输入框撑高 */
.cs-addbar__field:has(.cs-note-input) { flex: 1 1 300px; }
.cs-addbar .cs-note-input { width: 100%; }

/* ========== 14) 新增核算单：空白态基本信息（仅分析日期 / 分析单号可改） ========== */
.cs-baseinfo .info-item > strong .cs-todo { color: var(--text-mute); font-weight: 400; letter-spacing: 1px; }
.cs-new-no { display: inline-flex; align-items: center; }
.cs-new-no input {
  width: 132px; padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--jade) 45%, transparent); border-radius: 8px;
  background: var(--surface); color: var(--text-strong);
  font-family: var(--font-mono, "Space Grotesk", monospace); font-size: 13px; letter-spacing: .4px;
}
.cs-new-no input:focus { outline: none; border-color: var(--jade); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jade) 18%, transparent); }
#csBaseInfo input[type="date"] {
  width: 138px; padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--jade) 45%, transparent); border-radius: 8px;
  background: var(--surface); color: var(--text-strong);
  font-family: var(--font-mono, "Space Grotesk", monospace); font-size: 13px;
}
#csBaseInfo input[type="date"]:focus { outline: none; border-color: var(--jade); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jade) 18%, transparent); }

/* 选中询价单后的渐进绑定：16 个字段逐条淡入（JS 逐条写 animation-delay） */
@keyframes csBindIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.cs-baseinfo__grid.is-binding .info-item { animation: csBindIn .5s cubic-bezier(.22,.61,.36,1) both; }
.cs-baseinfo__note.is-binding { animation: csBindIn .5s cubic-bezier(.22,.61,.36,1) both; animation-delay: 1000ms; }

/* 空白态：最终价格三个联动输入与「恢复默认」禁用 */
.cs-price-target input:disabled, .cs-price-target button:disabled { opacity: .5; cursor: not-allowed; }

/* ============================================================
   加工单（独立页面 workorders.html）
   ============================================================ */
/* 单据头三栏布局：宽屏 3 列，中屏 2 列，窄屏 1 列 */
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 单据工具栏：吸顶，滚动单据时保持可见（与引用的图片工具栏作用一致） */
.wo-docbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--shadow-sm);
  position: sticky; top: calc(var(--topbar-h) + 10px); z-index: 30;
}
.wo-docbar__title { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--text-strong); }
.wo-docbar__spacer { flex: 1 1 auto; }
.wo-docbar__sep { width: 1px; height: 20px; background: var(--border); }

/* 台账完成进度条 */
.wo-prog { display: flex; align-items: center; gap: 8px; min-width: 132px; }
.wo-prog__bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--border-soft); overflow: hidden; }
.wo-prog__bar i { display: block; height: 100%; border-radius: 999px; background: var(--jade); transition: width .3s; }
.wo-prog__bar.is-low i { background: var(--amber); }
.wo-prog__bar.is-done i { background: var(--jade-deep); }
.wo-prog__txt { flex: none; font-size: 12px; color: var(--text-mute); }

/* 工艺路线子表 */
.data-table--wo { min-width: 1012px; }
.data-table--wo th, .data-table--wo td { padding: 9px 10px; font-size: 12.5px; white-space: nowrap; }
.data-table--wo thead th { background: var(--paper); font-size: 12px; }
.data-table--wo .col-no   { width: 52px; }
.data-table--wo .col-proc { width: 200px; white-space: normal; }
.data-table--wo .col-mach { width: 180px; white-space: normal; }
.data-table--wo .col-dept { width: 112px; }
.data-table--wo .col-num  { width: 84px; text-align: right; }
.data-table--wo .col-st   { width: 88px; }

/* 原料明细子表：列最多，加宽最小宽度并横向滚动 */
.data-table--womat { min-width: 1102px; }
.data-table--womat th, .data-table--womat td { padding: 9px 10px; font-size: 12.5px; white-space: nowrap; }
.data-table--womat thead th { background: var(--paper); font-size: 12px; }
.data-table--womat .col-no   { width: 52px; }
.data-table--womat .col-mat  { width: 190px; white-space: normal; }
.data-table--womat .col-spec { width: 112px; }
.data-table--womat .col-wh   { width: 100px; }
.data-table--womat .col-unit { width: 62px; }
.data-table--womat .col-num  { width: 82px; text-align: right; }
.data-table--womat .inp-num {
  width: 100%; padding: 6px 8px; font-size: 12.5px; font-family: var(--font-num);
  text-align: right; border-radius: 9px;
  border: 1px solid var(--border); background: var(--paper); color: var(--text-strong);
  outline: none; transition: .2s;
}
.data-table--womat .inp-num:focus { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); background: var(--surface); }
/* 缺料预警：应发数高于可用库存的行整行淡红底 */
.data-table--womat tr.is-short { background: color-mix(in srgb, var(--cinnabar-soft) 55%, transparent); }
.cell-short { color: var(--cinnabar); font-weight: 600; }

/* ---- 明细行内编辑：控件 / 行操作 / 新增行 ---- */
.inp-cell {
  width: 100%; padding: 5px 7px; font-size: 12.5px; font-family: var(--font-sans);
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--paper); color: var(--text-strong);
  outline: none; transition: .2s;
}
/* 数字框去掉上下箭头：右侧箭头会挤掉一位数字（如 1260 显示成 126） */
.inp-cell[type="number"]::-webkit-outer-spin-button,
.inp-cell[type="number"]::-webkit-inner-spin-button,
.inp-num::-webkit-outer-spin-button,
.inp-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.inp-cell[type="number"], .inp-num { -moz-appearance: textfield; appearance: textfield; }
select.inp-cell { cursor: pointer; }
.inp-cell.num { text-align: right; font-family: var(--font-num); }
.inp-cell:focus { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); background: var(--surface); }
/* 只读态：控件褪成纯文本，避免误以为可改 */
.inp-cell:disabled { opacity: 1; cursor: default; background: none; border-color: transparent; color: var(--text-strong); }
select.inp-cell:disabled { -webkit-appearance: none; appearance: none; }
.inp-cell.is-invalid { border-color: var(--cinnabar); background: var(--cinnabar-soft); }

/* 行内物料选择触发器：点击弹出物料选择窗口（替代原先的下拉框） */
.mat-pick {
  display: flex; align-items: baseline; gap: 2px 8px; flex-wrap: wrap;
  width: 100%; min-width: 0; text-align: left;
  padding: 5px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--paper);
  font-size: 12.5px; font-family: var(--font-sans); color: var(--text-strong);
  cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s;
}
.mat-pick:hover { border-color: var(--jade); background: var(--surface); }
.mat-pick:focus-visible { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); outline: none; }
.mat-pick__name { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-pick__code { font-family: var(--font-num); font-size: 11.5px; color: var(--text-mute); }
.mat-pick__ico { margin-left: auto; font-size: 11px; color: var(--text-mute); }
/* 未选物料：虚线占位，明确提示可点 */
.mat-pick--empty { border-style: dashed; color: var(--text-mute); font-weight: 400; }
.mat-pick--empty .mat-pick__ico { margin-left: 0; }
.mat-pick.is-invalid { border-color: var(--cinnabar); background: var(--cinnabar-soft); }
.mat-pick:disabled { opacity: 1; cursor: default; background: none; border-color: transparent; }
/* 操作列固定贴右：明细表很宽，横向滚动时操作按钮始终可点 */
.data-table .col-act { width: 98px; }
.data-table--wo .col-act, .data-table--womat .col-act {
  position: sticky; right: 0; z-index: 2;
  background: var(--surface);
  box-shadow: -8px 0 10px -10px color-mix(in srgb, var(--text-strong) 55%, transparent);
}
.data-table--wo thead .col-act, .data-table--womat thead .col-act { background: var(--paper); }
.data-table--womat tr.is-short .col-act { background: color-mix(in srgb, var(--cinnabar-soft) 55%, var(--surface)); }
.wo-rowact { display: inline-flex; gap: 2px; }
.wo-rowact button {
  border: none; background: none; padding: 4px 6px; border-radius: 7px;
  color: var(--text-mute); cursor: pointer; line-height: 1; font-size: 13px; transition: .18s;
}
.wo-rowact button:hover { background: var(--jade-soft); color: var(--jade-deep); }
.wo-rowact button[data-act="del"]:hover { background: var(--cinnabar-soft); color: var(--cinnabar); }
.wo-rowact button:disabled { opacity: .3; cursor: not-allowed; background: none; }
.wo-addbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px dashed var(--border-soft);
  background: color-mix(in srgb, var(--paper) 45%, transparent);
}
.wo-addbar__hint { font-size: 12px; color: var(--text-mute); }

/* 单据汇总条：吸底常驻，明细区再长也能随时看到成本合计 */
.wo-sum {
  display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap;
  padding: 10px 16px; margin-top: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 -8px 22px -14px color-mix(in srgb, var(--text-strong) 45%, transparent);
  position: sticky; bottom: 0; z-index: 26;
  font-size: 12.5px; color: var(--text-mute);
}
.wo-sum__item { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.wo-sum__item b { font-family: var(--font-num); font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.wo-sum__item--major b { font-size: 15px; color: var(--jade); }
.wo-sum__spacer { flex: 1 1 auto; }
.kpi-unit { font-size: 14px; font-weight: 400; color: var(--text-mute); }

/* 明细区精简空状态 */
.empty-state--slim { padding: 36px 20px; border: none; background: none; }
.empty-state--slim i { font-size: 30px; }
.empty-state--slim h3 { font-size: 15px; margin: 10px 0 4px; }
.empty-state--slim p { font-size: 12.5px; }

/* ---- 明细区可折叠：点标题栏整块收起，摘要仍可见 ---- */
.seg--sm .seg-btn { padding: 5px 10px; font-size: 12px; }
.wo-panel__head { cursor: pointer; user-select: none; }
.wo-panel__head:hover .panel__title { color: var(--jade-deep); }
.wo-panel__head:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; border-radius: var(--radius-sm); }
.wo-panel__arrow {
  display: inline-block; font-size: 11px; margin-left: 4px; color: var(--text-mute);
  transition: transform .18s ease;
}
.wo-panel.is-collapsed .wo-panel__arrow { transform: rotate(-90deg); }
/* 折叠时用作者样式 display:none 覆盖 JS 对 .panel__body 的 hidden 控制 */
.wo-panel.is-collapsed > .panel__body { display: none; }
.wo-panel.is-collapsed > .wo-addbar { display: none; }
.wo-panel.is-collapsed .panel__head { border-bottom-color: transparent; }

/* ---- 卡片模式：把明细子表重排为卡片网格（窄屏自动启用，宽屏可手动切换） ---- */
.is-card .table-scroll { overflow: visible; }
.is-card .data-table { min-width: 0; }
.is-card .data-table thead { display: none; }
.is-card .data-table tbody {
  display: grid; gap: 12px; padding: 12px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
/* 原料字段更多，卡片再宽一点避免折行过密 */
.is-card .data-table--womat tbody { grid-template-columns: repeat(auto-fill, minmax(336px, 1fr)); }
.is-card .data-table tr {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.is-card .data-table td {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0; border: 0; white-space: normal; text-align: left; font-size: 12.5px;
}
/* 列头在卡片里变成左侧行标签（由 JS 渲染的 data-label 提供） */
.is-card .data-table td::before {
  content: attr(data-label); flex: none;
  font-size: 11.5px; color: var(--text-mute);
}
/* 序号行作为卡片标题（「工序 10」/「项次 1」），带虚线分隔 */
.is-card .data-table .col-no {
  grid-column: 1 / -1; justify-content: flex-start; gap: 6px;
  font-weight: 700; color: var(--jade-deep);
  border-bottom: 1px dashed var(--border-soft);
  padding-bottom: 7px; margin-bottom: 3px;
}
.is-card .data-table .col-no::before { font-size: 11.5px; font-weight: 400; }
/* 名称行：占满整行，主名 + 编码纵向排布 */
.is-card .data-table .col-proc,
.is-card .data-table .col-mat {
  grid-column: 1 / -1; flex-direction: column; align-items: flex-start; gap: 2px;
}
.is-card .data-table .col-proc::before,
.is-card .data-table .col-mat::before { display: none; }
/* 设备 / 规格内容较长，独占整行避免与标签挤在一格里 */
.is-card .data-table .col-mach,
.is-card .data-table .col-spec { grid-column: 1 / -1; }
.is-card .data-table .col-mach { flex-direction: column; align-items: flex-start; gap: 0; }
.is-card .data-table .cell-main { font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
/* 卡片里主副信息纵向堆叠，不再横向挤成一团 */
.is-card .data-table .cell-sub { display: block; }
.is-card .data-table .tag { white-space: nowrap; }
.is-card .data-table .inp-num { max-width: 132px; }
/* 表格模式下的固定列宽在卡片网格里会把单元格压成窄条，需还原为自适应 */
.is-card .data-table td { width: auto; }
/* 卡片里控件宽度交由 flex 分配：width:100% 会连同标签一起算宽而被裁字 */
.is-card .data-table .inp-cell,
.is-card .data-table .inp-num {
  width: auto; flex: 1 1 auto; min-width: 0; max-width: none;
}
/* 卡片里物料触发器同样交回 flex 分配，并把品名与编码上下堆叠 */
.is-card .data-table .mat-pick { width: auto; flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: flex-start; }
.is-card .data-table .mat-pick__ico { margin-left: 0; }
.is-card .data-table td[data-label="实发数"] .inp-num { max-width: none; }
/* 卡片里操作区独占一行、右对齐（取消贴右固定） */
.is-card .data-table td.col-act {
  grid-column: 1 / -1; justify-content: flex-end;
  position: static; box-shadow: none; background: transparent;
  border-top: 1px dashed var(--border-soft); padding-top: 8px; margin-top: 2px;
}
.is-card .data-table td.col-act::before { display: none; }
.is-card .data-table--womat tr.is-short {
  border-color: color-mix(in srgb, var(--cinnabar) 45%, var(--border));
  background: color-mix(in srgb, var(--cinnabar-soft) 38%, var(--surface));
}

/* ===================== 报工单（reportworks.html） ===================== */

/* 行内选择触发器（人员 / 设备）：与物料触发器同构，原生 CSS 无 @extend 故复制一份 */
.cell-pick {
  display: flex; align-items: baseline; gap: 2px 8px; flex-wrap: wrap;
  width: 100%; min-width: 0; text-align: left;
  padding: 5px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--paper);
  font-size: 12.5px; font-family: var(--font-sans); color: var(--text-strong);
  cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s;
}
.cell-pick:hover { border-color: var(--jade); background: var(--surface); }
.cell-pick:focus-visible { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); outline: none; }
.cell-pick__name { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-pick__code { font-family: var(--font-num); font-size: 11.5px; color: var(--text-mute); }
.cell-pick__ico { margin-left: auto; font-size: 11px; color: var(--text-mute); }
.cell-pick--empty { border-style: dashed; color: var(--text-mute); font-weight: 400; }
.cell-pick--empty .cell-pick__ico { margin-left: 0; }
.cell-pick.is-invalid { border-color: var(--cinnabar); background: var(--cinnabar-soft); }
.cell-pick:disabled { opacity: 1; cursor: default; background: none; border-color: transparent; }

/* 来源工序信息：只读字段网格，报工前先确认「报的是哪张单的哪道工序」 */
/* 用 auto-fill：空轨道保留，字段宽度不随数量变化，两行标签始终对齐 */
.rw-src {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px 20px;
}
.rw-src__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rw-src__label { font-size: 11.5px; color: var(--text-mute); }
/* 值允许折到第二行：早前用 nowrap + 省略号，导致「报工工序 / 工作中心」这类长值被截断成「工序 10 · 激光切…」 */
.rw-src__value {
  font-size: 13.5px; font-weight: 600; color: var(--text-strong);
  white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
}
.rw-src__sub { font-size: 11.5px; font-weight: 400; color: var(--text-mute); }

/* 人机与产出：报工核心录入区，用大卡片突出「人 / 机 / 工时 / 良品 / 不良」 */
.rw-group + .rw-group { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-soft); }
.rw-group__title {
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--text-mute);
}
.rw-group__title i { font-size: 13px; color: var(--jade); }
/* 用 auto-fill：人员 / 设备两组只有 3 项，auto-fit 会把空轨道折叠、卡片被拉宽，
   与「工时 / 产出数量」的 5 列对不齐；auto-fill 保留轨道，四组列宽一致 */
.rw-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 12px; }
/* 超宽屏把录入卡片压回 5 列，避免 auto-fit 拉出 7 列、卡片又宽又空 */
@media (min-width: 1500px) {
  .rw-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.rw-metric {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  padding: 11px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--paper);
}
.rw-metric--readonly { background: color-mix(in srgb, var(--paper) 40%, transparent); }
.rw-metric--accent { border-color: color-mix(in srgb, var(--jade) 42%, var(--border)); }
.rw-metric__label { display: flex; align-items: baseline; gap: 5px; font-size: 11.5px; color: var(--text-mute); }
.rw-metric__label em { color: var(--cinnabar); font-style: normal; }
.rw-metric__value { font-family: var(--font-num); font-size: 19px; font-weight: 600; color: var(--text-strong); line-height: 1.25; }
.rw-metric__value small { font-size: 11.5px; font-weight: 400; color: var(--text-mute); margin-left: 3px; }
.rw-metric__value--jade { color: var(--jade); }
.rw-metric__value--warn { color: var(--cinnabar); }
.rw-metric__note { font-size: 11px; color: var(--text-mute); }
.rw-metric .inp-cell, .rw-metric .cell-pick { font-size: 13px; }

/* 报工单选择窗口：单号与产品名 / 编码与规格分行展示，避免挤在一行难以辨认 */
#rwWoModal .pick-item__main, #rwProcModal .pick-item__main,
#rwEmpModal .pick-item__main, #rwMachModal .pick-item__main {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
#rwWoModal .pick-item__title, #rwProcModal .pick-item__title,
#rwEmpModal .pick-item__title, #rwMachModal .pick-item__title { font-weight: 600; }

/* 报工单台账表格：列多达 11 列，收窄内边距并给每列明确宽度，
   否则会沿用基础表格的宽松内边距把表格撑到容器之外（操作列被挤出可视区） */
.data-table--rw { min-width: 1166px; }
.data-table--rw th, .data-table--rw td { padding: 10px 10px; font-size: 12.5px; }
.data-table--rw thead th { background: var(--paper); font-size: 11.5px; }
.data-table--rw th { white-space: nowrap; }
.data-table--rw .tag { padding: 3px 8px; font-size: 11.5px; }
/* 主副信息两行紧凑排布，避免第三行把行高撑到 80px 以上 */
.data-table--rw .cell-main { line-height: 1.3; }
.data-table--rw .cell-sub { margin-top: 1px; line-height: 1.25; white-space: nowrap; }
.data-table--rw .col-code { width: 110px; }
.data-table--rw .col-wo  { width: 140px; white-space: normal; }
.data-table--rw .col-wo .cell-sub { white-space: normal; }
.data-table--rw .col-proc { width: 106px; white-space: normal; }
.data-table--rw .col-emp { width: 96px; white-space: normal; }
.data-table--rw .col-mach { width: 94px; white-space: normal; }
.data-table--rw .col-num { width: 82px; text-align: right; }
.data-table--rw .col-qty { width: 60px; text-align: right; }
.data-table--rw .col-date { width: 76px; }
/* 检验数量区校验提示（检验数 / 合格数 / 明细项，含报工可检数超限提示） */
.rw-qty-err { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.rw-qty-err .field-err:empty { display: none; }

.data-table--rw .col-qc  { width: 120px; white-space: normal; }
.data-table--rw .col-qc .cell-sub { white-space: normal; }
.data-table--rw .col-st  { width: 82px; }
.data-table--rw .row-actions { flex-wrap: nowrap; gap: 8px; }
/* 状态 + 操作两列贴右常驻：窄容器横向滚动时也不会被挤出可视区
   （早前只固定操作列，横向滚动时会把相邻的「状态」压住看不见） */
.data-table--rw .col-st {
  position: sticky; right: 142px; z-index: 2;
  background: var(--surface);
}
.data-table--rw .col-act {
  width: 142px; position: sticky; right: 0; z-index: 2;
  background: var(--surface);
  box-shadow: -8px 0 10px -10px color-mix(in srgb, var(--text-strong) 55%, transparent);
}
.data-table--rw thead .col-st, .data-table--rw thead .col-act { background: var(--paper); }
.data-table--rw tbody tr:hover .col-st, .data-table--rw tbody tr:hover .col-act {
  background: color-mix(in srgb, var(--jade) 5%, var(--surface));
}
.rw-rate { font-family: var(--font-num); font-size: 12px; }
.rw-rate--warn { color: var(--cinnabar); font-weight: 600; }
.rw-rate--ok { color: var(--jade); }

/* 不良明细表：单据页内嵌的小明细表，跟随单据内容列宽（比加工单 1012px 的 --wo 更窄）。
   不良原因 / 备注允许折行，使表格可在 1280 / 1200 等常见宽度下不出现横向滚动条。 */
.data-table--rwdef { min-width: 860px; }
.data-table--rwdef th, .data-table--rwdef td { padding: 9px 10px; font-size: 12.5px; }
.data-table--rwdef thead th { background: var(--paper); font-size: 12px; white-space: nowrap; }
.data-table--rwdef .col-no   { width: 52px; }
.data-table--rwdef .col-num  { width: 84px; text-align: right; }
.data-table--rwdef .col-dept { width: 112px; white-space: nowrap; }
.data-table--rwdef .col-reason, .data-table--rwdef .col-note { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; vertical-align: top; }
.data-table--rwdef .col-act {
  width: 98px; position: sticky; right: 0; z-index: 2; background: var(--surface);
}
.data-table--rwdef thead .col-act { background: var(--paper); }
.data-table--rwdef tbody tr:hover .col-act { background: color-mix(in srgb, var(--jade) 5%, var(--surface)); }

/* 五列 KPI：尽量保持一行五列，避免 1366 / 1280 常见笔记本宽度下折成 3+2 的参差感 */
@media (min-width: 1240px) { .kpi-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1239px) and (min-width: 992px) { .kpi-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) and (min-width: 576px) { .kpi-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 720px) {
  .rw-metrics { grid-template-columns: 1fr; }
  .rw-src { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .form-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .form-grid--3 { grid-template-columns: 1fr; }
  .wo-docbar { position: static; }
  .wo-sum { gap: 8px 14px; position: static; }
  .is-card .data-table tbody { grid-template-columns: 1fr; padding: 10px; }
}

/* ===== 检验单：台账表 ===== */
.data-table--insp { min-width: 1050px; }
.data-table--insp th, .data-table--insp td { padding: 10px 10px; font-size: 12.5px; }
.data-table--insp thead th { background: var(--paper); font-size: 11.5px; }
.data-table--insp th { white-space: nowrap; }
.data-table--insp .tag { padding: 3px 8px; font-size: 11.5px; }
.data-table--insp .cell-main { line-height: 1.3; }
.data-table--insp .cell-sub { margin-top: 1px; line-height: 1.25; white-space: nowrap; }
.data-table--insp .col-code { width: 110px; }
.data-table--insp .col-wo { width: 150px; white-space: normal; }
.data-table--insp .col-wo .cell-sub { white-space: normal; }
.data-table--insp .col-proc { width: 120px; white-space: normal; }
.data-table--insp .col-type { width: 96px; }
.data-table--insp .col-num { width: 78px; text-align: right; }
.data-table--insp .col-judge { width: 92px; }
.data-table--insp .col-st {
  width: 92px; position: sticky; right: 142px; z-index: 2; background: var(--surface);
}
.data-table--insp .col-act {
  width: 142px; position: sticky; right: 0; z-index: 2; background: var(--surface);
  box-shadow: -8px 0 10px -10px color-mix(in srgb, var(--text-strong) 55%, transparent);
}
.data-table--insp thead .col-st, .data-table--insp thead .col-act { background: var(--paper); }
.data-table--insp tbody tr:hover .col-st, .data-table--insp tbody tr:hover .col-act {
  background: color-mix(in srgb, var(--jade) 5%, var(--surface));
}

/* ===== 检验单：检验数据明细子表（核心录入区） ===== */
.data-table--insp-lines { min-width: 960px; }
.data-table--insp-lines th, .data-table--insp-lines td { padding: 8px 8px; font-size: 12.5px; vertical-align: middle; }
.data-table--insp-lines thead th { background: var(--paper); font-size: 11.5px; white-space: nowrap; }
.data-table--insp-lines .col-no { width: 52px; text-align: center; }
.data-table--insp-lines .col-item { width: 150px; }
.data-table--insp-lines .col-spec { width: 150px; }
.data-table--insp-lines .col-val { width: 140px; }
.data-table--insp-lines .col-unit { width: 64px; }
.data-table--insp-lines .col-tol { width: 90px; }
.data-table--insp-lines .col-judge { width: 92px; }
.data-table--insp-lines .col-note { width: 120px; }
.data-table--insp-lines .col-act { width: 64px; text-align: center; }

/* ===== 数据分析页：图表布局 ===== */
.an-charts { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 1200px) { .an-charts { grid-template-columns: 1fr; } }
.chart-box { position: relative; width: 100%; }
.chart-box--tall { height: 300px; }
.chart-box--donut { flex: 1 1 220px; min-width: 200px; height: 240px; }
.an-donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.an-donut__legend { flex: 1 1 200px; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.an-donut__legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.an-donut__legend .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.an-donut__legend .lv { margin-left: auto; font-family: var(--font-num); color: var(--text-strong); font-weight: 600; }

/* ===== 软件授权页 ===== */
.lic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.lic-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lic-item--wide { grid-column: 1 / -1; }
.lic-item__label { font-size: 12.5px; color: var(--text-mute); min-width: 64px; }
.lic-item__value { font-weight: 600; color: var(--text-strong); }
.lic-usage { margin-top: 20px; max-width: 420px; }
.lic-usage__head { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-mute); margin-bottom: 6px; }
.lic-usage .usage__pct { font-family: var(--font-num); font-weight: 700; color: var(--text-strong); }
.lic-activate { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.lic-activate .field { flex: 1 1 320px; }
.lic-activate .btn { margin-top: 24px; }

/* ===== 修改密码页 ===== */
.pw-panel { max-width: 620px; }
.pw-panel .panel__body form { display: grid; gap: 20px; }
.pw-strength { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.pw-strength__bars { display: flex; gap: 4px; }
.pw-strength__bars i { width: 46px; height: 5px; border-radius: 3px; background: var(--border); transition: background .2s; }
.pw-strength__bars i.is-on { background: var(--amber); }
.pw-strength__bars i.is-on.is-max { background: var(--jade); }
.pw-strength__text { font-size: 11.5px; color: var(--text-mute); }
.pw-rules { list-style: none; display: flex; gap: 18px; flex-wrap: wrap; margin: 0; padding: 0; }
.pw-rules li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-mute); }
.pw-rules li i { font-size: 13px; }
.pw-rules li.is-ok { color: var(--jade); }
.pw-rules li.is-ok i::before { content: "\F26B"; }   /* bi-check-circle-fill */
.pw-actions { margin-top: 4px; }
@media (max-width: 768px) {
  .lic-grid { grid-template-columns: 1fr; }
  .pw-strength__bars i { width: 36px; }
}

/* ===== 报表单号 → 单据链接 ===== */
/* 明细报表中的单号可点击，跳转到对应单据画面 */
.doc-link {
  color: var(--jade);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dashed currentColor;
  cursor: pointer;
}
.doc-link:hover { color: var(--cinnabar); border-bottom-style: solid; }
.doc-link:visited { color: var(--jade); }

/* 从报表带 ?no= 跳转后，高亮定位到的单据行 */
tr.row-flash { animation: rowFlash 1.8s ease-out; }
tr.row-flash > td:first-child { box-shadow: inset 3px 0 0 var(--jade); }
@keyframes rowFlash {
  0%   { background: rgba(31, 157, 122, .20); }
  100% { background: transparent; }
}