/* ============================================================
   CsgtecERP - Back-office Component Layer
   ------------------------------------------------------------
   规则（严格执行样式标准）：
   1. 本文件不得修改 style.css，必须在其之后加载。
   2. 禁止出现任何硬编码新色值。所有颜色一律 var() 引用
      style.css 的 Design Tokens 或由其派生。
   3. 圆角只用 --r-sm/--r/--r-md/--r-lg/--r-xl/--r-full
   4. 阴影只用 --shadow-sm/md/lg/xl/brand/brand-lg/glass
   5. 过渡只用 --t-fast/--t/--t-slow + --ease-out-expo/quart
   ============================================================ */

/* ===== Token 修补 + 后台语义扩展 =====
   注：style.css 中 .badge-primary / .btn-primary 引用了 var(--white)
   但 :root 未定义该变量，此处补齐，属缺陷修复而非规范变更。 */
:root {
    --white: #FFFFFF;

    /* 语义色：直接映射 style.css 已有的 code-* 色板，不新增颜色 */
    --ok: var(--code-green);
    --warn: var(--code-orange);
    --danger: var(--code-red);
    --info: var(--code-blue);
    --pending: var(--code-yellow);
    --special: var(--code-purple);

    /* 语义色的低透明度背景（由品牌/语义色派生） */
    --ok-bg: rgba(126, 232, 160, 0.1);
    --warn-bg: rgba(255, 166, 87, 0.1);
    --danger-bg: rgba(255, 123, 114, 0.1);
    --info-bg: rgba(121, 192, 255, 0.1);
    --pending-bg: rgba(227, 179, 65, 0.1);
    --special-bg: rgba(210, 168, 255, 0.1);
    --brand-bg: rgba(15, 82, 186, 0.1);
    --brand-bg-strong: rgba(15, 82, 186, 0.18);

    /* 后台布局尺寸 */
    --nav-w: 232px;
    --nav-w-mini: 64px;
    --top-h: 56px;
    --page-pad: 24px;

    /* 后台字体阶（比官网更紧凑，适配高密度表单） */
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs: 13px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 20px;

    --mono: 'JetBrains Mono', 'Fira Code', ui-monospace, Consolas, monospace;
}

/* ===== 后台基座 ===== */
body.erp {
    background: var(--bg-deep);
    font-size: var(--fs-md);
    line-height: 1.5;
    overflow: hidden;
}
body.erp * { scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; }
body.erp ::-webkit-scrollbar { width: 8px; height: 8px; }
body.erp ::-webkit-scrollbar-track { background: transparent; }
body.erp ::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: var(--r-full);
}
body.erp ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }

/* ============================================================
   登录页
   ============================================================ */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-deep);
    position: relative;
    overflow: hidden;
}
.login-page::before {
    content: '';
    position: absolute;
    width: 900px; height: 900px;
    top: -300px; right: -200px;
    background: radial-gradient(circle, rgba(15, 82, 186, 0.14) 0%, transparent 62%);
    pointer-events: none;
}
.login-page::after {
    content: '';
    position: absolute;
    width: 700px; height: 700px;
    bottom: -280px; left: -180px;
    background: radial-gradient(circle, rgba(64, 128, 232, 0.08) 0%, transparent 62%);
    pointer-events: none;
}
.login-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    padding: 40px;
    background: rgba(22, 27, 34, 0.78);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-glass);
}
.login-brand { text-align: center; margin-bottom: 32px; }
.login-mark {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    border-radius: var(--r-md);
    background: var(--grad-brand);
    box-shadow: var(--shadow-brand);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 900; color: var(--white);
    letter-spacing: -1px;
}
.login-title {
    font-size: 30px; font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}
.login-sub {
    font-size: var(--fs); color: var(--text-muted);
    margin-top: 6px; letter-spacing: 0.3px;
}
.login-error {
    display: none;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--danger-bg);
    border: 1px solid rgba(255, 123, 114, 0.25);
    border-radius: var(--r-sm);
    color: var(--danger);
    font-size: var(--fs);
}
.login-error.show { display: block; }
.login-foot {
    margin-top: 24px;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-dim);
}
.login-ver {
    margin-top: 4px;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-dim);
    opacity: 0.75;
    letter-spacing: 0.5px;
}

/* ============================================================
   应用外壳
   ============================================================ */
.erp-shell {
    display: grid;
    grid-template-columns: var(--nav-w) 1fr;
    grid-template-rows: var(--top-h) 1fr;
    grid-template-areas: "nav top" "nav main";
    height: 100vh;
    transition: grid-template-columns var(--t);
}
.erp-shell.mini { grid-template-columns: var(--nav-w-mini) 1fr; }

/* ---------- 侧边导航 ---------- */
.erp-nav {
    grid-area: nav;
    background: var(--bg-deep);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.nav-brand {
    height: var(--top-h);
    flex-shrink: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
}
.nav-mark {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: var(--r-sm);
    background: var(--grad-brand);
    box-shadow: var(--shadow-brand);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs); font-weight: 900; color: var(--white);
    letter-spacing: -0.5px;
}
.nav-name {
    font-size: var(--fs-md); font-weight: 700;
    color: var(--text-primary); letter-spacing: -0.3px;
    white-space: nowrap;
}
.nav-logo {
    height: 30px; width: auto; flex-shrink: 0;
    max-width: 100%;
    display: block;
}
/* 夜晚模式：logo 自动转为纯白色（任意图变纯白剪影，深色背景下清晰可见） */
[data-theme="dark"] .nav-logo { filter: brightness(0) invert(1); }
.erp-shell.mini .nav-name { display: none; }

.nav-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 0 20px; }
.nav-group { margin-bottom: 4px; }
.nav-group-title {
    padding: 12px 18px 6px;
    font-size: var(--fs);
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--text-secondary);
    text-transform: uppercase;
    white-space: nowrap;
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; user-select: none;
}
.nav-group-title .ng-caret { opacity: 0.7; transition: transform var(--t-fast); flex: none; }
/* 分组标题：中文与英文缩写保持一个空格的间距，避免被 letter-spacing 撑大 */
.nav-group-title .grp-label { display: inline-flex; align-items: baseline; min-width: 0; }
.nav-group-title .grp-label .grp-en { margin-left: 0.25em; }
/* 分组标题中的英文缩写（如 SMS/PMS/MES）调浅，仅用透明度派生，不引入新色值 */
.nav-group-title .grp-en { opacity: 0.55; letter-spacing: normal; }
.nav-group.collapsed .ng-caret { transform: rotate(-90deg); }
.nav-group.collapsed .nav-group-body { display: none; }
.erp-shell.mini .nav-group-title {
    padding: 12px 0 6px;
    text-align: center;
    font-size: 0;
}
.erp-shell.mini .nav-group-title::after {
    content: '';
    display: block;
    width: 20px; height: 1px;
    margin: 0 auto;
    background: var(--border-light);
}
.erp-shell.mini .nav-group-title .ng-caret { display: none; }
.erp-shell.mini .nav-group.collapsed .nav-group-body { display: block; }
.erp-shell.mini .nav-subgroup-title .sub-caret { display: none; }
.erp-shell.mini .nav-subgroup.collapsed .nav-subgroup-body { display: block; }

/* 二级分类（子分组）：在一级分组内再分组，标题样式与一级分组标题（nav-group-title）保持一致 */
.nav-subgroup { margin: 4px 14px; }
.nav-subgroup-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 10px 4px;
  font-size: var(--fs);
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.nav-subgroup-title > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sub-caret { flex-shrink: 0; opacity: 0.5; transition: transform 0.15s ease; }
.nav-subgroup.collapsed .sub-caret { transform: rotate(-90deg); }
.nav-subgroup.collapsed .nav-subgroup-body { display: none; }
.nav-subgroup .nav-item { margin-left: 0; margin-right: 0; }

.nav-item {
    display: flex; align-items: center; justify-content: flex-start; gap: 11px;
    height: 38px;
    margin: 1px 10px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--t-fast);
    position: relative;
    white-space: nowrap;
    text-align: left;
}
.nav-item i {
    width: 16px; flex-shrink: 0;
    font-size: var(--fs-md);
    text-align: center;
    transition: var(--t-fast);
}
.nav-item .ic { flex: 0 0 auto; width: 18px; text-align: center; }
.nav-item .nav-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}
.nav-item.active {
    background: var(--brand-bg-strong);
    color: var(--brand-light);
    font-weight: 600;
}
.nav-item.active i { color: var(--brand-light); }
.nav-item.active::before {
    content: '';
    position: absolute;
    left: -10px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 18px;
    background: var(--grad-brand);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.nav-badge {
    flex: none !important;
    margin-left: auto;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--r-full);
    background: var(--brand);
    color: var(--white);
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono);
}
/* 侧边栏待办/未读数量徽标（红色，参考钉钉/企微风格） */
.nav-count {
    flex: none !important;
    margin-left: auto;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: var(--r-full);
    background: var(--danger);
    color: var(--white);
    font-size: 10px; font-weight: 700;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono);
}
/* 未实装模块（stage != 1）置灰，点击进入"建设中"提示页 */
.nav-item[data-stage]:not([data-stage="1"]) { opacity: 0.5; }
.erp-shell.mini .nav-item { justify-content: center; padding: 0; margin: 1px 8px; }
.erp-shell.mini .nav-item .nav-label,
.erp-shell.mini .nav-badge,
.erp-shell.mini .nav-count { display: none; }

.nav-foot {
    flex-shrink: 0;
    padding: 10px;
    border-top: 1px solid var(--border);
}
.nav-collapse {
    width: 100%; height: 34px;
    border: none; border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--fs);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: var(--t-fast);
}
.nav-collapse:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); }
.erp-shell.mini .nav-collapse span { display: none; }

/* ---------- 顶栏 ---------- */
.erp-top {
    grid-area: top;
    background: rgba(15, 20, 25, 0.8);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px;
    z-index: 100;
}
.top-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.crumb {
    display: flex; align-items: center; gap: 7px;
    font-size: var(--fs); color: var(--text-muted);
    white-space: nowrap; overflow: hidden;
}
.crumb i { font-size: 9px; color: var(--text-dim); }
.crumb .crumb-now { color: var(--text-primary); font-weight: 600; }

.top-right { display: flex; align-items: center; gap: 8px; }
.top-btn {
    width: 34px; height: 34px;
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    color: var(--text-secondary);
    font-size: var(--fs-md);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: var(--t-fast);
    position: relative;
}
.top-btn:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}
.top-btn .dot-flag {
    position: absolute; top: 6px; right: 6px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 2px var(--bg-dark);
}

.top-user {
    display: flex; align-items: center; gap: 9px;
    height: 34px; padding: 0 10px 0 5px;
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: var(--t-fast);
}
.top-user:hover { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); }
.avatar {
    width: 24px; height: 24px; flex-shrink: 0;
    border-radius: var(--r-full);
    background: var(--grad-brand);
    color: var(--white);
    font-size: var(--fs-xs); font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.avatar-lg { width: 40px; height: 40px; font-size: var(--fs-md); }
.top-user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.top-user-name { font-size: var(--fs); font-weight: 600; color: var(--text-primary); }
.top-user-role { font-size: 10px; color: var(--text-muted); }

/* ---------- 主内容区 ---------- */
.erp-main {
    grid-area: main;
    overflow-y: auto;
    background: var(--bg-dark);
    padding: var(--page-pad);
}
.page { max-width: 100%; margin: 0 auto; animation: pageIn 0.4s var(--ease-out-expo); }
.executive-page {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.executive-page .kpi-grid { flex-shrink: 0; }
.executive-page > .field-row {
    flex: 1 1 0;
    min-height: 0;
}
.executive-page > .field-row:last-child { margin-bottom: 0; }
.executive-page .panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.executive-page .panel + .panel { margin-top: 0; }
.executive-page .panel-head { flex-shrink: 0; }
.executive-page .panel-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.executive-page .panel-body .panel-fill-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
}
.executive-page .panel-body .panel-fill-list > *:last-child { margin-bottom: 0 !important; }
.executive-page .panel-body .empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
@keyframes pageIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.page-title {
    font-size: var(--fs-xl); font-weight: 800;
    color: var(--text-primary); letter-spacing: -0.4px;
}
.page-sub { font-size: var(--fs); color: var(--text-muted); margin-top: 5px; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 财务报表（fin-report）—— 分区小标题的边距（表格保持通栏，不加左右边距） */
.rpt-sub { margin: 14px 0 8px 16px; font-size: var(--fs); font-weight: 600; color: var(--text-primary); }

/* ============================================================
   面板 / 卡片
   ============================================================ */
.panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: var(--t);
}
.panel + .panel { margin-top: 16px; }
.panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.panel-title {
    font-size: var(--fs-md); font-weight: 700;
    color: var(--text-primary);
    display: flex; align-items: center; gap: 8px;
}
.panel-title i { color: var(--brand-light); font-size: var(--fs); }
.panel-body { padding: 18px; }
.panel-body.flush { padding: 0; }
.panel-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* ============================================================
   KPI 卡片
   ============================================================ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.kpi-grid.cols-5 {
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 1fr;
}
.kpi-grid.cols-5 .kpi { display: flex; flex-direction: column; justify-content: space-between; }

/* 工作台页面模块间距统一（参考 KPI 卡片间距 14px） */
.page > .panel { margin-bottom: 14px; }
.page > .panel:last-child { margin-bottom: 0; }
.page > .field-row { margin-bottom: 14px; }
.kpi {
    position: relative;
    overflow: hidden;
    padding: 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: var(--t);
}
.kpi::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px; background: var(--grad-brand);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--t);
}
.kpi:hover {
    transform: translateY(-4px);
    border-color: var(--border-brand);
    box-shadow: 0 0 30px rgba(15, 82, 186, 0.15), var(--shadow-lg);
}
.kpi:hover::before { transform: scaleX(1); }
.kpi-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.kpi-label {
    font-size: var(--fs-sm); color: var(--text-muted);
    font-weight: 500; letter-spacing: 0.2px;
}
.kpi-icon {
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    background: var(--brand-bg);
    color: var(--brand-light);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-md);
    transition: var(--t-fast);
}
.kpi:hover .kpi-icon { background: var(--grad-brand); color: var(--white); transform: scale(1.08); }
.kpi-value {
    font-family: var(--mono);
    font-size: 26px; font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -1px; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.kpi-value .unit { font-size: var(--fs); font-weight: 600; color: var(--text-muted); margin-left: 3px; }
.kpi-foot {
    margin-top: 9px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    display: flex; align-items: center; gap: 5px;
}
.kpi-delta { font-weight: 700; font-family: var(--mono); display: inline-flex; align-items: center; gap: 3px; }
/* 中国习惯：涨红跌绿 */
.kpi-delta.up { color: var(--danger); }
.kpi-delta.down { color: var(--ok); }
.kpi-delta.flat { color: var(--text-muted); }

/* 语义化 KPI 顶条 */
.kpi.k-ok::before { background: var(--ok); }
.kpi.k-warn::before { background: var(--warn); }
.kpi.k-danger::before { background: var(--danger); }
.kpi.k-ok .kpi-icon { background: var(--ok-bg); color: var(--ok); }
.kpi.k-warn .kpi-icon { background: var(--warn-bg); color: var(--warn); }
.kpi.k-danger .kpi-icon { background: var(--danger-bg); color: var(--danger); }
.kpi.k-ok:hover .kpi-icon { background: var(--ok); color: var(--bg-deep); }
.kpi.k-warn:hover .kpi-icon { background: var(--warn); color: var(--bg-deep); }
.kpi.k-danger:hover .kpi-icon { background: var(--danger); color: var(--bg-deep); }

/* 工作台快捷入口卡片（跳转手机端操作页） */
.kpi-link { cursor: pointer; }
.kpi-link .kpi-value { display: flex; align-items: center; gap: 6px; }
.mobile-ops .kpi-link .kpi-value { font-size: 18px; font-weight: 700; }

/* ============================================================
   工具栏
   ============================================================ */
.toolbar {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.toolbar-spacer { flex: 1; }
.search-box { position: relative; }
.search-box .ic {
    position: absolute; left: 11px; top: 50%;
    transform: translateY(-50%);
    font-size: var(--fs); color: var(--text-dim);
    pointer-events: none;
}
.search-box input { padding-left: 32px !important; width: 240px; }
.filter-item { display: flex; align-items: center; gap: 6px; }
.filter-label { font-size: var(--fs-sm); color: var(--text-dim); white-space: nowrap; }

/* 筛选按钮 */
#btnFilter.filter-active {
    background: var(--brand-bg-strong);
    border-color: var(--border-brand);
    color: var(--brand-light);
}
.filter-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: var(--r-full);
    background: var(--brand);
    color: var(--white);
    font-size: 10px; font-weight: 700;
    font-family: var(--mono);
}

/* ============================================================
   弹窗筛选面板
   ============================================================ */
.filter-headline {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.filter-headline .filter-logic {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    background: var(--brand-bg);
    border: 1px solid var(--border-brand);
    border-radius: var(--r-sm);
    color: var(--brand-light);
    font-weight: 600;
    cursor: default;
}
.filter-list { display: flex; flex-direction: column; gap: 10px; }
.filter-empty-tip {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-md);
    border: 1px dashed var(--border-light);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.02);
}
.filter-empty-tip .ic { display: block; margin: 0 auto 10px; font-size: 28px; color: var(--text-dim); }
.filter-line {
    display: grid;
    grid-template-columns: 170px 120px 1fr 32px;
    gap: 10px;
    align-items: center;
}
.filter-line .sel,
.filter-line .inp { height: 36px; }
.filter-value-cell { min-width: 0; }
.filter-value-cell .filter-empty { padding-left: 4px; }
.filter-add {
    margin-top: 12px;
    width: auto;
    align-self: flex-start;
}
.filter-summary {
    margin-top: 14px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* ============================================================
   表单控件
   ============================================================ */
.field { margin-bottom: 16px; }
.field-label {
    display: block;
    font-size: var(--fs); font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 7px;
}
.field-label .req { color: var(--danger); margin-left: 3px; }
.field-hint { font-size: var(--fs-sm); color: var(--text-dim); margin-top: 5px; }
.field-err { font-size: var(--fs-sm); color: var(--danger); margin-top: 5px; display: none; }
.field.invalid .field-err { display: block; }
.field.invalid .inp,
.field.invalid .sel { border-color: var(--danger); }

.inp, .sel, textarea.inp {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    color: var(--text-primary);
    font-size: var(--fs-md);
    font-family: inherit;
    transition: var(--t-fast);
    outline: none;
}
textarea.inp { height: auto; min-height: 84px; padding: 9px 12px; resize: vertical; line-height: 1.6; }
.inp::placeholder, textarea.inp::placeholder { color: var(--text-dim); }
.inp:hover, .sel:hover { border-color: rgba(255, 255, 255, 0.2); }
.inp:focus, .sel:focus, textarea.inp:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(15, 82, 186, 0.15);
    background: var(--bg-surface);
}
.inp:disabled, .sel:disabled, textarea.inp:disabled {
    opacity: 0.45; cursor: not-allowed; background: var(--bg-dark);
}
.field.locked .field-label::after {
    content: '（已锁定）';
    color: var(--text-dim);
    font-size: var(--fs-sm);
    font-weight: 400;
    margin-left: 6px;
}
.inp[readonly] { background: var(--bg-dark); color: var(--text-secondary); user-select: none; cursor: default; }
.inp.mono, .inp.num { font-family: var(--mono); }
.inp.text-right { text-align: right; }

.sel {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 30px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-opacity='0.48' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}
.sel::-ms-expand { display: none; }
.sel option { background: var(--bg-elevated); color: var(--text-primary); }
/* 原生下拉统一强制隐藏浏览器默认箭头，仅保留 .sel 自定义箭头（避免箭头重复） */
select.sel,
select.inp.sel { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

/* 可搜索下拉 combobox（复用 .inp 视觉 token） */
.combobox { position: relative; width: 100%; }
.combobox-ctrl {
    display: flex; align-items: center;
    height: 36px; padding: 0 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    transition: var(--t-fast);
    cursor: pointer;
}
.combobox .combobox-input,
.combobox .combobox-input[readonly] {
    flex: 1; min-width: 0; height: 100%;
    border: none; outline: none; background: transparent;
    color: var(--text-primary); font-size: var(--fs-md); font-family: inherit; padding: 0;
    caret-color: transparent; cursor: pointer;
    background-image: none;
}
.combobox-input::placeholder { color: var(--text-dim); opacity: 1; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
.combobox-caret {
    display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
    color: var(--text-primary); pointer-events: none; transition: transform var(--t-fast);
}
.combobox-caret svg { display: block; }
.combobox.open .combobox-caret { transform: rotate(180deg); }
.combobox.open .combobox-ctrl {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(15, 82, 186, 0.15);
    background: var(--bg-surface);
}
.combobox-panel {
    position: fixed; z-index: 3000; top: 0; left: 0;
    max-height: 320px; overflow-y: auto;
    min-width: 120px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 4px;
}
.combobox-search {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 8px; margin: -4px -4px 4px -4px;
    border-bottom: 1px solid var(--border-light);
}
.combobox-search-icon { color: var(--text-dim); display: flex; align-items: center; }
.combobox-search-input {
    flex: 1 1 auto; min-width: 0;
    background: transparent; border: none; outline: none;
    color: var(--text-primary); font-size: var(--fs-md);
}
.combobox-search-input::placeholder { color: var(--text-dim); opacity: 1; }
.combobox-list { list-style: none; margin: 0; padding: 0; }
.combobox-opt {
    padding: 8px 10px; border-radius: var(--r-sm);
    font-size: var(--fs-md); color: var(--text-secondary);
    cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combobox-opt:hover, .combobox-opt.active { background: var(--bg-elevated); color: var(--text-primary); }
.combobox-empty { padding: 10px; text-align: center; color: var(--text-dim); font-size: var(--fs-sm); }
[data-theme="light"] .combobox-panel { background: var(--bg-surface); border-color: var(--border); }
[data-theme="light"] .combobox-opt { color: var(--text-secondary); }
[data-theme="light"] .combobox-opt:hover,
[data-theme="light"] .combobox-opt.active { background: var(--bg-elevated); color: var(--text-primary); }
.combobox.is-disabled .combobox-ctrl { opacity: 0.45; cursor: not-allowed; background: var(--bg-dark); }

.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 16px;
}
.field-row.c2 { grid-template-columns: repeat(2, 1fr); }
.field-row.c3 { grid-template-columns: repeat(3, 1fr); }
.field-row.c4 { grid-template-columns: repeat(4, 1fr); }
.field-row .full { grid-column: 1 / -1; }

/* 采购订单明细区间距（table.tb 无下边距，需手动补足层级感） */
#itemsZone #addItem { margin-top: 12px; }
/* 采购订单明细合计行（与 .field 16px 节奏一致，避免紧贴「添加明细」按钮） */
.po-total {
    margin-top: 16px;
    text-align: right;
    font-size: var(--fs-md);
    color: var(--text-secondary);
}
.po-total b { color: var(--text-primary); font-size: var(--fs-lg); font-weight: 700; }

/* 表单分区标题（基础信息 / 收货信息 / 销售明细） */
.form-sec {
  margin: 18px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: .02em;
  padding-left: 10px;
  border-left: 3px solid var(--border-brand);
}

/* 表单行：标签与控件的分隔与间距（系统设置 / 审批详情等复用） */
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-row .lbl { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.form-row .inp { width: 100%; }
.form-row .form-val { font-size: var(--fs-md); color: var(--text-primary); padding: 2px 0; }
/* 横向布局：窄屏以下自动改为纵向堆叠 */
.form-row.inline { flex-direction: row; align-items: center; gap: 12px; }
.form-row.inline .lbl { width: 96px; flex-shrink: 0; }
.form-row.inline .inp { flex: 1; width: auto; }

/* 采购明细导入弹窗 */
.imp-note { font-size: var(--fs-sm); color: var(--text-secondary); margin: 4px 0 12px 10px; line-height: 1.6; }
.imp-note b { color: var(--text-primary); font-weight: 600; }
.imp-actions { display: flex; gap: 8px; margin: 4px 0; }
.ta { width: 100%; min-height: 120px; resize: vertical; font-family: inherit; line-height: 1.55; }
.imp-preview { max-height: 300px; overflow: auto; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-light); }
.imp-summary { margin-bottom: 8px; font-size: var(--fs-sm); color: var(--text-secondary); }
.row-bad { background: var(--danger-bg); }

/* 勾选 / 单选 */
.check {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; user-select: none;
    font-size: var(--fs-md); color: var(--text-secondary);
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-box {
    width: 16px; height: 16px; flex-shrink: 0;
    border: 1.5px solid var(--border-light);
    border-radius: 4px;
    background: var(--bg-elevated);
    display: flex; align-items: center; justify-content: center;
    transition: var(--t-fast);
}
.check-box::after {
    content: '';
    width: 8px; height: 4px;
    border-left: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    transform: rotate(-45deg) scale(0);
    transition: transform var(--t-fast);
    margin-top: -2px;
}
.check:hover .check-box { border-color: var(--brand-light); }
.check input:checked ~ .check-box {
    background: var(--brand); border-color: var(--brand);
}
.check input:checked ~ .check-box::after { transform: rotate(-45deg) scale(1); }
.check input:indeterminate ~ .check-box { background: var(--brand); border-color: var(--brand); }
.check input:indeterminate ~ .check-box::after {
    width: 8px; height: 0;
    border-left: none; border-bottom: 2px solid var(--white);
    transform: rotate(0) scale(1); margin-top: 0;
}
.check input:disabled ~ .check-box { opacity: 0.4; cursor: not-allowed; }

/* 开关 */
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
    width: 34px; height: 19px; flex-shrink: 0;
    border-radius: var(--r-full);
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    position: relative;
    transition: var(--t-fast);
}
.switch-track::after {
    content: '';
    position: absolute; top: 2px; left: 2px;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: var(--t-fast);
}
.switch input:checked ~ .switch-track {
    background: var(--brand); border-color: var(--brand);
}
.switch input:checked ~ .switch-track::after {
    transform: translateX(15px);
    background: var(--white);
}
.switch-label { font-size: var(--fs); color: var(--text-secondary); }

/* ============================================================
   按钮（补充 style.css 的 .btn 体系，尺寸更紧凑）
   ============================================================ */
.b {
    height: 34px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: var(--fs-md);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    transition: var(--t-fast);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}
.b i { font-size: var(--fs); }
.b:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.b-sm { height: 28px; padding: 0 10px; font-size: var(--fs); }
.b-lg { height: 42px; padding: 0 24px; font-size: var(--fs-lg); }
.b-block { width: 100%; }

.b-primary {
    background: var(--grad-brand);
    color: var(--white);
    box-shadow: var(--shadow-brand);
}
.b-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-brand-lg); }
.b-primary:active { transform: translateY(0); }

.b-ghost {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-light);
    color: var(--text-secondary);
    backdrop-filter: blur(8px);
}
.b-ghost:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.b-text {
    background: transparent;
    color: var(--text-secondary);
    padding: 0 8px;
}
.b-text:hover { color: var(--brand-light); background: var(--brand-bg); }

.b-danger {
    background: var(--danger-bg);
    border-color: rgba(255, 123, 114, 0.3);
    color: var(--danger);
}
.b-danger:hover { background: var(--danger); color: var(--bg-deep); border-color: var(--danger); }

.b-danger-ghost {
    background: transparent;
    border-color: var(--danger);
    color: var(--danger);
}
.b-danger-ghost:hover { background: var(--danger); color: var(--bg-deep); }

.b-warn {
    background: var(--warn-bg);
    border-color: rgba(255, 166, 87, 0.3);
    color: var(--warn);
}
.b-warn:hover { background: var(--warn); color: var(--bg-deep); border-color: var(--warn); }

.b-ok {
    background: var(--ok-bg);
    border-color: rgba(126, 232, 160, 0.3);
    color: var(--ok);
}
.b-ok:hover { background: var(--ok); color: var(--bg-deep); border-color: var(--ok); }

.b-icon { width: 30px; height: 30px; padding: 0; }
.b-icon.b-sm { width: 26px; height: 26px; }

.b-loading { color: transparent !important; pointer-events: none; }
.b-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.b-group { display: inline-flex; gap: 6px; }

/* ============================================================
   数据表格
   ============================================================ */
.table-wrap { overflow-x: auto; }
table.tb {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-md);
}
table.tb.process-tbl { table-layout: fixed; }
table.tb thead th {
    position: sticky; top: 0; z-index: 5;
    background: var(--bg-elevated);
    padding: 10px 14px;
    text-align: left;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-light);
    user-select: none;
}
table.tb thead th.sortable { cursor: pointer; transition: var(--t-fast); }
table.tb thead th.sortable:hover { color: var(--text-primary); }
table.tb thead th .sort-i { margin-left: 5px; font-size: 9px; opacity: 0.4; }
table.tb thead th.sorted-asc .sort-i,
table.tb thead th.sorted-desc .sort-i { opacity: 1; color: var(--brand-light); }

table.tb tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    vertical-align: middle;
}
table.tb tbody tr { transition: background var(--t-fast); }
table.tb tbody tr:hover td { background: rgba(255, 255, 255, 0.028); }
table.tb tbody tr.selected td { background: var(--brand-bg); }
table.tb tbody tr.row-zero td { background: var(--danger-bg); }
table.tb tbody tr:last-child td { border-bottom: none; }
table.tb tbody tr.clickable { cursor: pointer; }

table.tb .td-main { color: var(--text-primary); font-weight: 600; }
table.tb .td-ellipsis { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.tb .td-code {
    font-family: var(--mono);
    font-size: var(--fs);
    color: var(--brand-light);
    letter-spacing: -0.2px;
}
table.tb .td-c { text-align: center; padding-left: 0; padding-right: 0; }
/* 生产退料明细：固定列宽（选择框30px固定 + 其余百分比，合计100%分配给剩余宽度） */
table.tb.sm.mfg-rt-items { table-layout: fixed; }
table.tb.sm.mfg-rt-items td, table.tb.sm.mfg-rt-items th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 物料列含编码+名称，允许换行避免被压成一团（其余数字/短文本保持 nowrap） */
table.tb.sm.mfg-rt-items td:nth-child(2) { white-space: normal; word-break: break-all; }
table.tb.sm.mfg-rt-items .td-act { white-space: nowrap; }
table.tb .td-num {
    font-family: var(--mono);
    text-align: right;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
table.tb .td-dim { color: var(--text-muted); font-size: var(--fs); }
table.tb .td-unit { color: var(--text-secondary); font-size: var(--fs); white-space: nowrap; }
table.tb .td-act { text-align: right; white-space: nowrap; }
/* 生产入库页：操作列右对齐（覆盖 #tbl 的居中规则） */
table.tb.qm-stockin-tbl tbody td.td-act,
table.tb.qm-stockin-tbl thead th.td-act { text-align: center; }
/* 操作列内的图标按钮组随列右对齐（td-act 的 text-align 对 flex 子元素无效，需 justify-content） */
table.tb tbody td.td-act .row-acts { justify-content: flex-end; }
/* 库存查询「查看」列：单图标按钮，居中而非右对齐 */
table.tb#tbl thead th.th-act,
table.tb#tbl tbody td.td-act { text-align: center; }
table.tb .td-nowrap { white-space: nowrap; }
table.tb .col-check { width: 40px; text-align: center; }
/* 库存明细弹框：仓库/库位分布表固定列宽（仓库15/库位15/数量15/锁定15/含税单价20/含税总额20，合计100%） */
table.tb.sm.stock-dist { table-layout: fixed; }
table.tb.sm.stock-dist thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.sm.stock-dist tbody td:not(.td-act) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* BOM 物料清单列表：固定百分比列宽（物料编码10/物料名称40/版本10/子项10/设计工时10/状态10/操作10，合计100%） */
table.tb.bom-list { table-layout: fixed; }
table.tb.bom-list thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.bom-list tbody td:not(.td-act) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.wh-warehouse { table-layout: fixed; }
table.tb.wh-warehouse thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.wh-warehouse tbody td:not(.td-act) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb .col-idx { width: 52px; color: var(--text-dim); font-family: var(--mono); font-size: var(--fs); }

/* 销售出库列表：固定百分比列宽（出库单号12/销售单号12/客户22/出库仓库12/出库日期12/数量10/状态10/操作10） */
table.tb.iss-tbl { table-layout: fixed; }
table.tb.iss-tbl thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.iss-tbl tbody td:not(.td-act) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 入库/出入库流水列表：固定百分比列宽（业务时间14/单据号8/类型8/物料编码8/物料名称26/仓库6/库位6/变动数量5/结存数量5/单价8） */
table.tb.led-tbl { table-layout: fixed; }
table.tb.led-tbl thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.led-tbl tbody td:not(.td-act) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 采购订单列表：固定百分比列宽（采购单号7/供应商20/预计到货7/采购物料25/数量8/含税合计8/状态12/操作13）
   状态列标签强制单行，避免双标签换行导致行高不统一、行分割线错位 */
table.tb.pur-tbl { table-layout: fixed; }
table.tb.pur-tbl thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.pur-tbl tbody td:not(.td-act):not(.status-cell) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.pur-tbl tbody td.status-cell { display: table-cell; white-space: nowrap; vertical-align: middle; }
table.tb.pur-tbl tbody td.status-cell .tag { margin-right: 4px; }
table.tb.pur-tbl tbody td.status-cell .tag:last-child { margin-right: 0; }

/* 销售订单列表：固定百分比列宽（多选4/单号7/客户15/预计交货7/物料27/数量6/含税合计10/状态8/操作16）
   状态列标签强制单行，避免双标签换行导致行高不统一、行分割线错位 */
table.tb.sal-tbl { table-layout: fixed; }
table.tb.sal-tbl thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.sal-tbl tbody td:not(.td-act):not(.status-cell) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.sal-tbl tbody td.status-cell { display: table-cell; white-space: nowrap; vertical-align: middle; }
table.tb.sal-tbl tbody td.status-cell .tag { margin-right: 4px; }
table.tb.sal-tbl tbody td.status-cell .tag:last-child { margin-right: 0; }

/* 劳动合同列表（与 sal-tbl 保持一致） */
table.tb.hr-tbl { table-layout: fixed; }
table.tb.hr-tbl thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.hr-tbl tbody td:not(.td-act):not(.status-cell) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.hr-tbl tbody td.status-cell { display: table-cell; white-space: nowrap; vertical-align: middle; }
table.tb.hr-tbl tbody td.status-cell .tag { margin-right: 4px; }
table.tb.hr-tbl tbody td.status-cell .tag:last-child { margin-right: 0; }

table.tb.dense tbody td { padding: 7px 12px; }
/* 采购订单详情：采购明细固定列宽（物料编码10/物料名称33/单位5/缺料8/数量8/不含税单价10/税率8/含税金额10/价格变动8，合计100%）
   仅作用于 detail 明细表，不影响共用 .tb.sm 的其他表格 */
table.tb.sm.pur-dtl-items { table-layout: fixed; }
table.tb.sm.pur-dtl-items thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.sm.pur-dtl-items tbody td:not(.td-act) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.dense thead th { padding: 7px 12px; }
/* 库位管理弹框：库位列表固定列宽（编码20/名称40/库区40；操作列自适应，不加 width）。仅作用于 loc-tbl */
table.tb.dense.loc-tbl { table-layout: fixed; }
table.tb.dense.loc-tbl thead th:not(.td-act) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.dense.loc-tbl tbody td:not(.td-act) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 行内操作按钮：默认淡出，hover 行时点亮 */
table.tb tbody tr .row-acts { opacity: 0.55; transition: opacity var(--t-fast); }
table.tb tbody tr:hover .row-acts { opacity: 1; }

/* ============================================================
   状态徽章
   ============================================================ */
.tag {
    display: inline-flex; align-items: center; gap: 5px;
    vertical-align: middle;
    height: 21px;
    padding: 0 9px;
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.tag::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.tag.no-dot::before { display: none; }
.tag-ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(126, 232, 160, 0.22); }
.tag-warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(255, 166, 87, 0.22); }
.tag-danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(255, 123, 114, 0.22); }
.tag-info { background: var(--info-bg); color: var(--info); border-color: rgba(121, 192, 255, 0.22); }
.tag-pending { background: var(--pending-bg); color: var(--pending); border-color: rgba(227, 179, 65, 0.22); }

/* 列表状态列：业务状态 + 发票标签并排展示；table-cell 避免 fixed 表格中 flex td 行高错位 */
.tb td.status-cell { display: table-cell; white-space: nowrap; vertical-align: middle; }
.tb td.status-cell .tag { margin-right: 4px; }
.tb td.status-cell .tag:last-child { margin-right: 0; }
.tag-special { background: var(--special-bg); color: var(--special); border-color: rgba(210, 168, 255, 0.22); }
.tag-brand { background: var(--brand-bg); color: var(--brand-light); border-color: var(--border-brand); }
.tag-mute { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); border-color: var(--border-light); }
/* 停用：红色 + 禁止符号（圆环+斜杠），比纯圆点更贴合「禁用/停用」语义 */
.tag-stop { background: var(--danger-bg); color: var(--danger); border-color: rgba(255, 123, 114, 0.22); }
.tag-stop .tag-ico { width: 9px; height: 9px; flex-shrink: 0; }

/* 供应商列表：严格按比例列宽（编码8% 名字32% 税号15% 联系人8% 联系电话12% 评级5% 状态10% 操作15%） */
table.tb.wh-supplier { table-layout: fixed; }
table.tb.wh-supplier thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.wh-supplier tbody td:not(.td-act):not(.status-cell) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.wh-supplier tbody td.status-cell { white-space: nowrap; }

/* 客户列表：严格按比例列宽（编码8% 名字30% 税号15% 联系人8% 联系电话11% 评级8% 状态8% 操作17%） */
table.tb.wh-customer { table-layout: fixed; }
table.tb.wh-customer thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.wh-customer tbody td:not(.td-act):not(.status-cell) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.wh-customer tbody td.status-cell { white-space: nowrap; }

/* 缺料分析(MRP)列表：严格按比例列宽（勾选4% 编码8% 名称32% 来源7% 单位7% 缺料7% 毛需求7% 库存7% 在途7% 可用7% 货期7%） */
table.tb.mrp-tbl { table-layout: fixed; }
table.tb.mrp-tbl thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.tb.mrp-tbl tbody td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   分页
   ============================================================ */
.pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 12px 16px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.pager-info { font-size: var(--fs); color: var(--text-muted); }
.pager-info b { color: var(--text-primary); font-family: var(--mono); font-weight: 700; }
.pager-ctrl { display: flex; align-items: center; gap: 5px; }
.pg {
    min-width: 28px; height: 28px;
    padding: 0 7px;
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--fs);
    font-family: var(--mono);
    cursor: pointer;
    transition: var(--t-fast);
    display: inline-flex; align-items: center; justify-content: center;
}
.pg:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-light); background: var(--brand-bg); }
.pg.active {
    background: var(--grad-brand);
    border-color: transparent;
    color: var(--white);
    font-weight: 700;
    box-shadow: var(--shadow-brand);
}
.pg:disabled { opacity: 0.3; cursor: not-allowed; }
.pg-dots { color: var(--text-dim); padding: 0 3px; font-size: var(--fs); }
.pager .sel {
  width: auto; height: 28px; font-size: var(--fs); padding: 0 26px 0 9px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}

/* 分页：每页条数自定义下拉（根本解决 Windows Chrome/Edge 原生 select 箭头无法隐藏问题） */
.ps-select { position: relative; display: inline-block; vertical-align: middle; }
.pager .ps-select-trigger.sel {
  width: auto; min-width: 66px; height: 28px;
  padding: 0 26px 0 9px;
  font-size: var(--fs);
  text-align: left;
  display: inline-flex; align-items: center;
  background-color: var(--bg-elevated);
}
.pager .ps-select-trigger.sel:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15, 82, 186, 0.15); background: var(--bg-surface); }
.ps-select-menu {
  position: absolute; bottom: calc(100% + 4px); right: 0;
  min-width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  z-index: 100;
  overflow: hidden;
}
.ps-select-item {
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: var(--fs);
  white-space: nowrap;
}
.ps-select-item:hover { background: var(--brand-bg); color: var(--brand-light); }
.ps-select-item[data-selected] { background: var(--brand-bg-strong); color: var(--brand-light); font-weight: 700; }

/* ============================================================
   Tab
   ============================================================ */
.tabs {
    display: flex; gap: 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
    overflow-x: auto;
}
.tab {
    padding: 9px 16px;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    transition: var(--t-fast);
    white-space: nowrap;
    background: transparent; border: none;
    font-family: inherit;
}
.tab::after {
    content: '';
    position: absolute; bottom: -1px; left: 0; right: 0;
    height: 2px; background: var(--grad-brand);
    transform: scaleX(0);
    transition: transform var(--t-fast);
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--brand-light); }
.tab.active::after { transform: scaleX(1); }
.tab-count {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.08);
    font-size: 10px;
    font-family: var(--mono);
}
.tab.active .tab-count { background: var(--brand-bg-strong); color: var(--brand-light); }

/* ============================================================
   模态框
   ============================================================ */
.mask {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0;
    animation: maskIn 0.22s var(--ease-out-quart) forwards;
}
@keyframes maskIn { to { opacity: 1; } }
.mask.closing { animation: maskOut 0.18s var(--ease-out-quart) forwards; }
@keyframes maskOut { to { opacity: 0; } }

.modal {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 48px);
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xl);
    display: flex; flex-direction: column;
    transform: translateY(16px) scale(0.98);
    animation: modalIn 0.3s var(--ease-out-expo) forwards;
}
@keyframes modalIn { to { transform: translateY(0) scale(1); } }
.mask.closing .modal { animation: modalOut 0.18s var(--ease-out-quart) forwards; }
@keyframes modalOut { to { transform: translateY(10px) scale(0.98); opacity: 0; } }

.modal-w { max-width: 760px; }
.modal-xw { max-width: 1080px; }
.modal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.modal-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); }
.modal-close {
    width: 28px; height: 28px;
    border: none; border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--fs-md);
    display: flex; align-items: center; justify-content: center;
    transition: var(--t-fast);
}
.modal-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
/* 弹框内所有文字统一白色（功能性语义色：必填星号/错误/状态标签除外） */
.modal-body { color: var(--white); }
.modal-body .field-label,
.modal-body .field-hint,
.modal-body .inp[readonly],
.modal-body .inp::placeholder,
.modal-body .combobox-empty,
.modal-body table.tb thead th,
.modal-body table.tb tbody td,
.modal-body .td-dim,
.modal-body .td-code,
.modal-body .col-idx,
.modal-body .con-meta,
.modal-body .con-empty,
.modal-body .modal-close {
  color: var(--white);
}
/* 明细列表（弹框内）表头：半透明毛玻璃底色，避免滚动时与内容重叠看不清
   sticky 表头若不遮挡，内容会从下方透出造成叠加。用 rgba 半透明 + backdrop-filter 模糊营造质感，
   深色底 #1C2333→rgba(28,35,51,.72)，白天底 #F2F5FA→rgba(242,245,250,.72)。 */
.modal-body table.tb thead th {
  background: rgba(28, 35, 51, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
[data-theme="light"] .modal-body table.tb thead th {
  background: rgba(242, 245, 250, 0.72);
}
.modal-body table.tb thead th { box-shadow: 0 1px 0 var(--border-light); }
/* 明细表：列间距收窄 50%（水平内边距 14px → 7px，垂直内边距不变） */
.modal-body table.tb thead th { padding-left: 7px; padding-right: 7px; }
.modal-body table.tb tbody td { padding-left: 7px; padding-right: 7px; }
/* 弹框内日期字段输入框右对齐 */
.modal-body .date-field { text-align: left; }
.date-wrap { position: relative; display: block; }
.date-wrap > input[type="date"] { width: 100%; }
.date-overlay {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--text-dim); font-size: var(--fs-md);
    pointer-events: none; user-select: none;
    transition: opacity var(--t-fast);
    z-index: 1;
}
/* 隐藏 Chrome 原生日期段（年/月/日），空值时始终透明，让 yyyy/mm/dd overlay 不被重叠 */
.date-wrap.is-empty input[type="date"]::-webkit-datetime-edit,
.date-wrap.is-empty input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.date-wrap.is-empty input[type="date"]::-webkit-datetime-edit-text,
.date-wrap.is-empty input[type="date"]::-webkit-datetime-edit-year-field,
.date-wrap.is-empty input[type="date"]::-webkit-datetime-edit-month-field,
.date-wrap.is-empty input[type="date"]::-webkit-datetime-edit-day-field { color: transparent; opacity: 0; }
/* overlay 显隐由 JS inline style 控制（onchange/onfocus/onblur），CSS 仅负责定位与样式 */
.modal-foot {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 9px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.modal-foot.between { justify-content: space-between; }

/* 确认框图标 */
.confirm-body { display: flex; gap: 14px; align-items: flex-start; }
.confirm-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: var(--r-full);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-lg);
}
.confirm-icon.warn { background: var(--warn-bg); color: var(--warn); }
.confirm-icon.danger { background: var(--danger-bg); color: var(--danger); }
.confirm-icon.info { background: var(--brand-bg); color: var(--brand-light); }
.confirm-text h4 { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); margin-bottom: 5px; }
.confirm-text p { font-size: var(--fs); color: var(--text-secondary); line-height: 1.65; }

/* ============================================================
   抽屉
   ============================================================ */
.drawer-mask { align-items: stretch; justify-content: flex-end; padding: 0; }
.drawer {
    width: 100%;
    max-width: 520px;
    height: 100vh;
    max-height: 100vh;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-light);
    border-radius: 0;
    box-shadow: var(--shadow-xl);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    animation: drawerIn 0.35s var(--ease-out-expo) forwards;
}
@keyframes drawerIn { to { transform: translateX(0); } }
.mask.closing .drawer { animation: drawerOut 0.22s var(--ease-out-quart) forwards; }
@keyframes drawerOut { to { transform: translateX(100%); } }
.drawer-w { max-width: 760px; }

/* ============================================================
   下拉菜单
   ============================================================ */
.dd { position: relative; display: inline-block; }
.dd-menu {
    position: absolute;
    top: calc(100% + 6px); right: 0;
    min-width: 172px;
    padding: 5px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-lg);
    z-index: 1500;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity var(--t-fast), transform var(--t-fast);
}
.dd.open .dd-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dd-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px;
    border-radius: 5px;
    font-size: var(--fs-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--t-fast);
    white-space: nowrap;
}
.dd-item i { width: 14px; font-size: var(--fs); text-align: center; }
.dd-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }
.dd-item.danger { color: var(--danger); }
.dd-item.danger:hover { background: var(--danger-bg); }
.dd-sep { height: 1px; background: var(--border); margin: 5px 0; }
.dd-label {
    padding: 7px 10px 4px;
    font-size: var(--fs-xs);
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
}

/* ============================================================
   空状态 / 加载
   ============================================================ */
.empty {
    padding: 56px 20px;
    text-align: center;
}
.empty-icon {
    width: 60px; height: 60px;
    margin: 0 auto 16px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    color: var(--text-dim);
}
.empty h4 { font-size: var(--fs-md); font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.empty p { font-size: var(--fs); color: var(--text-dim); margin-bottom: 18px; }

.skeleton {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.03) 25%,
        rgba(255, 255, 255, 0.07) 50%,
        rgba(255, 255, 255, 0.03) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: var(--r-sm);
    height: 14px;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.loading-line {
    position: fixed; top: 0; left: 0; right: 0;
    height: 2px; z-index: 3000;
    background: transparent;
    overflow: hidden;
    display: none;
}
.loading-line.on { display: block; }
.loading-line::after {
    content: '';
    position: absolute;
    left: -40%; width: 40%; height: 100%;
    background: var(--grad-brand);
    animation: bar 1s var(--ease-out-quart) infinite;
}
@keyframes bar {
    0% { left: -40%; }
    100% { left: 100%; }
}

/* ============================================================
   Toast
   ============================================================ */
.toast-wrap {
    position: fixed;
    top: 68px; left: 50%; right: auto;
    transform: translateX(-50%);
    z-index: 4000;
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    pointer-events: none;
}
.toast {
    min-width: 260px; max-width: 380px;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    background: rgba(28, 35, 51, 0.92);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-glass);
    pointer-events: auto;
    transform: translateY(-120%);
    animation: toastIn 0.4s var(--ease-out-expo) forwards;
}
@keyframes toastIn { to { transform: translateY(0); } }
.toast.out { animation: toastOut 0.25s var(--ease-out-quart) forwards; }
@keyframes toastOut { to { transform: translateY(-120%); opacity: 0; } }
.toast-icon { font-size: var(--fs-md); flex-shrink: 0; margin-top: 1px; }
.toast-msg { flex: 1; font-size: var(--fs-md); color: var(--text-primary); line-height: 1.5; }
.toast-msg small { display: block; color: var(--text-muted); font-size: var(--fs); margin-top: 3px; }
.toast.ok { border-left: 2px solid var(--ok); }
.toast.ok .toast-icon { color: var(--ok); }
.toast.err { border-left: 2px solid var(--danger); }
.toast.err .toast-icon { color: var(--danger); }
.toast.warn { border-left: 2px solid var(--warn); }
.toast.warn .toast-icon { color: var(--warn); }
.toast.info { border-left: 2px solid var(--brand-light); }
.toast.info .toast-icon { color: var(--brand-light); }

/* ---------- 表单内嵌联系人列表（供应商/客户） ---------- */
#contactsList { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.con-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--r-sm); }
.con-info { min-width: 0; }
.con-name { font-weight: 600; color: var(--text-primary); }
.con-meta { font-size: var(--fs); color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.con-empty { color: var(--text-muted); font-size: var(--fs); padding: 6px 2px; }

/* ============================================================
   审批时间线（为行政审批模块预置）
   ============================================================ */
.timeline { position: relative; padding-left: 26px; }
.timeline::before {
    content: '';
    position: absolute;
    left: 9px; top: 6px; bottom: 6px;
    width: 1px;
    background: var(--border-light);
}
.tl-item { position: relative; padding-bottom: 20px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-node {
    position: absolute;
    left: -26px; top: 2px;
    width: 19px; height: 19px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 2px solid var(--border-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 9px;
    color: var(--text-dim);
    z-index: 1;
}
.tl-item.done .tl-node { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.tl-item.reject .tl-node { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.tl-item.current .tl-node {
    border-color: var(--brand-light);
    color: var(--brand-light);
    background: var(--brand-bg);
    box-shadow: 0 0 0 4px rgba(15, 82, 186, 0.14);
}
.tl-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tl-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); }
.tl-time { font-size: var(--fs-sm); color: var(--text-dim); font-family: var(--mono); }
.tl-body { font-size: var(--fs); color: var(--text-secondary); margin-top: 5px; line-height: 1.65; }
.tl-quote {
    margin-top: 7px;
    padding: 8px 11px;
    background: var(--bg-elevated);
    border-left: 2px solid var(--border-light);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: var(--fs);
    color: var(--text-secondary);
}

/* ============================================================
   描述列表（详情展示）
   ============================================================ */
.desc {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.desc-item {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.desc-k { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 4px; }
.desc-v { font-size: var(--fs-md); color: var(--text-primary); font-weight: 500; word-break: break-all; }
.desc-v.num { font-family: var(--mono); }

/* ============================================================
   工具类
   ============================================================ */
.f { display: flex; }
.fc { display: flex; align-items: center; }
.fb { display: flex; align-items: center; justify-content: space-between; }
.fw { flex-wrap: wrap; }
.g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; } .g12 { gap: 12px; } .g16 { gap: 16px; }
.flex1 { flex: 1; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.mb0 { margin-bottom: 0; } .mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; }
.tr { text-align: right; } .tc { text-align: center; }
.t-dim { color: var(--text-dim); }
.t-mute { color: var(--text-muted); }
.t-sec { color: var(--text-secondary); }
.t-pri { color: var(--text-primary); }
.t-brand { color: var(--brand-light); }
.t-ok { color: var(--ok); } .t-warn { color: var(--warn); } .t-danger { color: var(--danger); } .t-info { color: var(--info); }
.fs-sm { font-size: var(--fs-sm); } .fs-xs { font-size: var(--fs-xs); }
.fw6 { font-weight: 600; } .fw7 { font-weight: 700; }

/* BOM 表单：批量粘贴客户物料号导入区 */
.batch-zone { margin-top: 16px; }
.batch-zone .inp { width: 100%; }
.batch-opt, .batch-actions { flex-wrap: wrap; }
.batch-opt { margin-bottom: 8px; }
.batch-actions { margin-top: 8px; }
.batch-zone .radio { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.vdivider { width: 1px; height: 18px; background: var(--border-light); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1024px) {
    .erp-shell { grid-template-columns: var(--nav-w-mini) 1fr; }
    .erp-shell .nav-name,
    .erp-shell .nav-item .nav-label,
    .erp-shell .nav-badge,
    .erp-shell .nav-collapse span { display: none; }
    .erp-shell .nav-item { justify-content: center; padding: 0; margin: 1px 8px; }
    .erp-shell .nav-group-title { padding: 12px 0 6px; font-size: 0; text-align: center; }
    .erp-shell .nav-group-title::after {
        content: ''; display: block; width: 20px; height: 1px;
        margin: 0 auto; background: var(--border-light);
    }
    .search-box input { width: 180px; }
}
@media (max-width: 768px) {
    :root { --page-pad: 14px; }
    .erp-shell { grid-template-columns: 0 1fr; }
    .erp-nav {
        position: fixed; left: 0; top: 0; bottom: 0;
        width: var(--nav-w); z-index: 1600;
        transform: translateX(-100%);
        transition: transform var(--t);
        box-shadow: var(--shadow-xl);
    }
    .erp-nav.open { transform: translateX(0); }
    .erp-nav .nav-name,
    .erp-nav .nav-item .nav-label,
    .erp-nav .nav-badge,
    .erp-nav .nav-collapse span { display: initial; }
    .erp-nav .nav-item { justify-content: flex-start; padding: 0 12px; margin: 1px 10px; }
    .erp-nav .nav-group-title { padding: 12px 18px 6px; font-size: var(--fs); text-align: left; }
    .erp-nav .nav-group-title::after { display: none; }
    .top-user-meta { display: none; }
    .search-box input { width: 100%; }
    .search-box { flex: 1; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kpi-grid.cols-5 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
    .kpi-grid.cols-5 .kpi { display: block; }
    .kpi-value { font-size: 20px; }
    .field-row, .field-row.c2, .field-row.c3, .field-row.c4 { grid-template-columns: 1fr; }
    .toast-wrap { left: 14px; right: 14px; top: 62px; transform: none; align-items: stretch; }
    .toast { min-width: 0; max-width: none; }
    .modal { max-width: none; }
}

/* ==================== 批量导入 / 条件批量修改 ==================== */
.bulk-tip {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; margin-bottom: 14px;
  background: var(--bg-surface); border: 1px solid var(--border-light); border-left: 3px solid var(--brand);
  border-radius: var(--r-sm); color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.6;
}
.bulk-tip svg { flex: none; margin-top: 2px; color: var(--brand-light); }
.bulk-tip b { color: var(--text-primary); font-weight: 600; }

.bulk-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bulk-spacer { flex: 1; }
.bulk-mode { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-muted); }
.bulk-mode .sel { width: auto; }

.bulk-label { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 6px; }
.bulk-paste {
  width: 100%; min-height: 200px; resize: vertical;
  font-family: var(--mono); font-size: 13px; line-height: 1.5;
}

.bulk-result { margin-top: 14px; }
.bulk-summary {
  padding: 10px 12px; background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7;
}
.bulk-summary b { font-weight: 700; }

.bulk-err-box, .bulk-prev-box {
  margin-top: 10px; padding: 10px 12px; max-height: 220px; overflow: auto;
  background: var(--bg-dark); border: 1px solid var(--border-light); border-radius: var(--r-sm);
}
.bulk-err-title { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 6px; }
.bulk-err-line {
  font-family: var(--mono); font-size: 12.5px; color: var(--danger); padding: 2px 0; line-height: 1.5;
  border-bottom: 1px solid var(--border);
}
.bulk-err-line:last-child { border-bottom: none; }
.bulk-prev-row { font-size: var(--fs-sm); color: var(--text-secondary); padding: 3px 0; border-bottom: 1px solid var(--border); }
.bulk-prev-row:last-child { border-bottom: none; }

/* 批量修改：范围 + 字段值 */
.bulk-range { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer; }
.bulk-range input { width: 16px; height: 16px; accent-color: var(--brand); }

.batch-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.batch-item { display: flex; align-items: center; gap: 10px; }
.batch-item .batch-field { flex: none; width: 180px; }
.batch-item .batch-value { flex: 1; display: flex; }
.batch-item .batch-value .inp, .batch-item .batch-value .sel { width: 100%; }
.batch-item .bval { width: 100%; }
.batch-item .batch-delitem { flex: none; }

/* ============================================================
   白天模式（<html data-theme="light">）补充覆盖
   覆盖 style.css / erp.css 中硬编码的「白色玻璃层」以及登录卡片、
   弹窗强制白字、日期图标反色、下拉箭头、骨架屏 / Toast / 抽屉等浅色化。
   ============================================================ */
[data-theme="light"] body.erp { background: var(--bg-deep); }

/* 顶栏：深色玻璃 → 与主内容区同灰 */
[data-theme="light"] .erp-top {
    background: var(--bg-deep);
    border-bottom-color: rgba(15, 23, 42, 0.10);
}
[data-theme="light"] ::selection { background: rgba(15, 82, 186, 0.15); color: var(--text-primary); }

/* 登录卡片：深色玻璃 → 浅色玻璃 */
[data-theme="light"] .login-card {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 8px 40px rgba(15, 23, 42, 0.12);
}

/* 顶栏 / 用户框 / 幽灵按钮等白色玻璃层 → 浅色层 */
[data-theme="light"] .top-btn,
[data-theme="light"] .top-user,
[data-theme="light"] .b-ghost,
[data-theme="light"] .btn-ghost,
[data-theme="light"] .lang-toggle,
[data-theme="light"] .mobile-menu-btn,
[data-theme="light"] .tag-mute,
[data-theme="light"] .tab-count,
[data-theme="light"] .code-copy:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--text-secondary);
}
[data-theme="light"] .top-btn:hover,
[data-theme="light"] .top-user:hover,
[data-theme="light"] .b-ghost:hover,
[data-theme="light"] .btn-ghost:hover,
[data-theme="light"] .lang-toggle:hover,
[data-theme="light"] .mobile-menu-btn:hover {
  background: rgba(15, 23, 42, 0.08);
  color: var(--text-primary);
}

/* 白天模式：彩色状态标签背景/边框加深，使色彩更明显（由 style.css 白天 code-* 深色变量派生） */
[data-theme="light"] .tag-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
[data-theme="light"] .tag-warn { background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
[data-theme="light"] .tag-danger { background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: color-mix(in srgb, var(--danger) 28%, transparent); }
[data-theme="light"] .tag-info { background: color-mix(in srgb, var(--info) 14%, transparent); border-color: color-mix(in srgb, var(--info) 28%, transparent); }
[data-theme="light"] .tag-pending { background: color-mix(in srgb, var(--pending) 14%, transparent); border-color: color-mix(in srgb, var(--pending) 28%, transparent); }
[data-theme="light"] .tag-special { background: color-mix(in srgb, var(--special) 14%, transparent); border-color: color-mix(in srgb, var(--special) 28%, transparent); }
[data-theme="light"] .tag-brand { background: color-mix(in srgb, var(--brand) 14%, transparent); border-color: var(--border-brand); color: var(--brand); }
[data-theme="light"] .tag-stop { background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: color-mix(in srgb, var(--danger) 28%, transparent); }

[data-theme="light"] .dd-item:hover {
  background: rgba(15, 23, 42, 0.05);
  color: var(--text-primary);
}
[data-theme="light"] .nav-item:hover,
[data-theme="light"] .nav-collapse:hover {
  background: rgba(15, 23, 42, 0.05);
  color: var(--text-primary);
}

/* 表单控件 hover 边框 */
[data-theme="light"] .inp:hover,
[data-theme="light"] .sel:hover { border-color: rgba(15, 23, 42, 0.2); }

/* 表格行 hover / 选中 */
[data-theme="light"] table.tb tbody tr:hover td { background: rgba(15, 23, 42, 0.025); }
[data-theme="light"] table.tb tbody tr.selected td { background: var(--brand-bg); }

/* 筛选空提示 / 骨架屏 */
[data-theme="light"] .filter-empty-tip { background: rgba(15, 23, 42, 0.02); }
[data-theme="light"] .skeleton {
  background: linear-gradient(90deg,
    rgba(15, 23, 42, 0.04) 25%,
    rgba(15, 23, 42, 0.08) 50%,
    rgba(15, 23, 42, 0.04) 75%);
}

/* 弹窗：强制白字 → 深色字（弹窗背景已是浅色 surface） */
[data-theme="light"] .modal { background: #FFFFFF; }
[data-theme="light"] .mask { background: rgba(15, 23, 42, 0.42); backdrop-filter: blur(3px); }
[data-theme="light"] .modal-body { color: var(--text-primary); }
[data-theme="light"] .modal-body .field-label,
[data-theme="light"] .modal-body .field-hint,
[data-theme="light"] .modal-body .inp[readonly],
[data-theme="light"] .modal-body .inp::placeholder,
[data-theme="light"] .modal-body .combobox-empty,
[data-theme="light"] .modal-body table.tb thead th,
[data-theme="light"] .modal-body table.tb tbody td,
[data-theme="light"] .modal-body .td-dim,
[data-theme="light"] .modal-body .td-code,
[data-theme="light"] .modal-body .col-idx,
[data-theme="light"] .modal-body .con-meta,
[data-theme="light"] .modal-body .con-empty,
[data-theme="light"] .modal-body .modal-close {
  color: var(--text-primary);
}

/* 下拉菜单 / 抽屉 / Toast 浅色化 */
[data-theme="light"] .dd-menu { background: #FFFFFF; border-color: rgba(15, 23, 42, 0.12); }
[data-theme="light"] .drawer { background: #FFFFFF; border-left-color: rgba(15, 23, 42, 0.1); }
[data-theme="light"] .toast {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
}
[data-theme="light"] .toast-msg { color: var(--text-primary); }
[data-theme="light"] .toast-msg small { color: var(--text-muted); }

/* 日期图标反色仅在夜晚模式需要 */
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }

/* 下拉箭头：夜晚白 → 白天深 */
[data-theme="light"] .sel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230F172A' stroke-opacity='0.5' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/* 空状态图标 / 加载条底色调浅 */
[data-theme="light"] .empty-icon { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.08); }
[data-theme="light"] .loading-line::after { background: var(--grad-brand); }

/* 红底徽章文字在浅背景下改为白字以保证对比 */

/* 加载动画圈在浅背景下用品牌色 */
[data-theme="light"] .b-loading::after { border-color: rgba(15, 23, 42, 0.25); border-top-color: var(--brand); }

/* ============================================================
 * 一物一码（序列号追溯）辅助布局类（仅尺寸/布局，复用既有变量，不新增色值）
 * ============================================================ */
.scan-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.scan-trace { border-left: 1px solid var(--border); padding-left: 18px; }
@media (max-width: 960px) {
  .scan-layout { grid-template-columns: 1fr; }
  .scan-trace { border-left: none; padding-left: 0; }
}
.scan-col { min-width: 0; }
.scan-input-wrap { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--r); padding: 0 10px; background: var(--bg-elevated); }
.scan-input { flex: 1; border: none; background: transparent; padding: 12px 4px; font-size: 16px; outline: none; color: var(--text-primary); }
.scan-ic { color: var(--text-muted); display: flex; }
.next-panel { margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-elevated); }
.next-panel.next-done { border-color: var(--border-brand); }
.next-panel.next-error { border-color: var(--code-red); }
.next-step { font-size: var(--fs-sm); margin-bottom: 4px; }
.order-card { padding: 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-elevated); }
.order-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 3px 0; font-size: var(--fs-sm); }
.order-steps { margin-top: 8px; }
.stepper { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.step { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--bg-surface); font-size: var(--fs-sm); }
.step-done { border-color: var(--border-brand); }
.step-current { font-weight: 600; border-color: var(--brand); }
.step-dot { width: 18px; height: 18px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; background: var(--bg-elevated); color: var(--text-muted); }
.step-pending .step-dot { background: var(--bg-surface); }
.step-arrow { color: var(--text-dim); }
.step-name { font-size: var(--fs-sm); color: var(--text-secondary); }
.recent-list { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow: auto; }
.sn-list { max-height: 280px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-elevated); padding: 8px; }
.recent-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: var(--fs-sm); background: var(--bg-surface); }
.trace-result { padding: 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-elevated); min-height: 80px; }
.trace-head { margin-bottom: 8px; }
.step-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.step-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--bg-soft, var(--bg-surface));
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.step-idx { width: 24px; height: 24px; flex: 0 0 24px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-muted); }
.step-row .inp[name="step_name"] { flex: 1; min-width: 0; }
.step-code { max-width: 140px; flex: 0 0 140px; }
.step-hint { flex: 0 0 auto; display: inline-flex; align-items: center; min-width: 48px; justify-content: center; }
.step-row [data-rm] { flex: 0 0 auto; }

/* 审批链弹框：条件行 / 审批人行 共用布局 */
.wf-lines { display: flex; flex-direction: column; gap: 8px; }
.wf-line { display: flex; align-items: center; gap: 8px; }
.wf-empty { font-size: var(--fs-sm); color: var(--text-dim); margin: 2px 0; }
.wf-cb-sm { flex: 0 0 116px; min-width: 0; }
.wf-cb-grow { flex: 1; min-width: 0; }

/* 详情弹框只读字段：统一 label/value 紧凑行距 */
.f-label { display: block; font-size: var(--fs-sm); color: var(--text-dim); margin-bottom: 2px; line-height: 1.3; }
.ro-box { min-height: 20px; line-height: 1.4; color: var(--text-primary); }
.sn-title { font-size: 2em; line-height: 1.5; vertical-align: middle; }

/* 系统设置 · Logo 编辑器 */
.logo-edit { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 8px; }
.logo-prev {
  width: 120px; height: 120px; flex-shrink: 0;
  border: 1px dashed var(--border); border-radius: var(--r);
  background: var(--bg-soft); display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.logo-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-empty {
  width: 56px; height: 56px; border-radius: var(--r-sm);
  background: var(--grad-brand); box-shadow: var(--shadow-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 900; color: var(--white); letter-spacing: -0.5px;
}
.logo-side { flex: 1; min-width: 0; }
.row.gap { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }


/* ===== 系统设置 · 系统模式单选卡片 ===== */
.mode-radios { display: flex; gap: 12px; flex-wrap: wrap; }
.mode-card {
  flex: 1 1 220px; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.mode-card:hover { border-color: var(--border-light); }
.mode-card input[type="radio"] { accent-color: var(--brand); width: 16px; height: 16px; flex-shrink: 0; }
.mode-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mode-name { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); }
.mode-desc { font-size: var(--fs-sm); color: var(--text-muted); }
.mode-card:has(input:checked) {
  border-color: var(--border-brand);
  background: var(--brand-bg-strong);
}
/* 系统设置：保存按钮与上方表单（含系统模式卡片）拉开间距 */
.form-actions { margin-top: 24px; }

/* ========== 劳动合同模块 ========== */
.salary-tbl { margin-top: 6px; }
.salary-tbl th, .salary-tbl td { padding: 4px 6px; }
.salary-tbl input.inp { text-align: right; }
.salary-tbl .total-row td { background: var(--brand-bg-strong); font-weight: 700; }
.salary-tbl .total-row input.inp { font-weight: 700; color: var(--text-primary); }
/* 关联面试搜索提示框 */
.combo-hint {
  position: absolute;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  max-height: 240px;
  overflow: auto;
  min-width: 280px;
  margin-top: 2px;
}
.combo-hint .combo-opt { padding: 7px 10px; cursor: pointer; font-size: var(--fs-sm); border-bottom: 1px solid var(--border-light); }
.combo-hint .combo-opt:hover { background: var(--brand-bg-strong); }
.combo-hint .combo-opt.mute { color: var(--text-muted); cursor: default; }
/* 详情查看 */
.view-detail .kv { display: flex; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--border-light); }
.view-detail .kv > span { width: 96px; flex: none; color: var(--text-muted); }
.view-detail .kv > b { font-weight: 500; }

/* ============================================================
   首次部署安装向导（全屏，渲染于应用外壳之外）
   ============================================================ */
.install-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--page-pad);
  background: var(--bg-deep);
}
.install-card {
  width: 100%;
  max-width: 660px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px 32px 24px;
}
.install-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.install-logo {
  width: 48px; height: 48px; border-radius: var(--r-md);
  background: var(--brand); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800;
}
.install-title { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.install-sub { font-size: var(--fs-sm); color: var(--text-muted); }
.install-steps { display: flex; gap: 10px; margin-bottom: 18px; }
.istep {
  flex: 1; display: flex; align-items: center; gap: 6px; justify-content: center;
  font-size: var(--fs-sm); color: var(--text-muted);
  padding: 8px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-elevated);
}
.istep span {
  width: 18px; height: 18px; border-radius: var(--r-full);
  background: var(--brand-bg); color: var(--brand-light);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.install-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; }
.install-tip { margin-top: 12px; font-size: var(--fs-sm); min-height: 18px; color: var(--text-muted); }
.install-tip.ok { color: var(--ok); }
.install-tip.err { color: var(--danger); }
.install-tip.busy { color: var(--brand-light); }
.install-done { text-align: center; padding: 24px 0 8px; }
.install-done-icon {
  width: 56px; height: 56px; border-radius: var(--r-full);
  background: var(--ok-bg); color: var(--ok);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; margin: 0 auto 14px;
}
.install-done h3 { font-size: var(--fs-xl); margin-bottom: 8px; color: var(--text-primary); }
.install-done p { color: var(--text-muted); font-size: var(--fs-sm); }
.install-done-sub { margin: 12px 0 18px; line-height: 1.8; }

/* ===== 经营看板 (Executive Dashboard) ===== */
.page-sub { font-size: 13px; color: var(--text-muted, #888); margin-top: 2px; }
.delta { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 6px; vertical-align: middle; }
.delta.up { color: #0a7d3b; background: rgba(10,125,59,.10); }
.delta.down { color: #c0392b; background: rgba(192,57,43,.10); }
.delta.na { color: #8a8a8a; background: rgba(0,0,0,.05); font-weight: 500; }
.progress { height: 8px; background: var(--bg-elevated); border-radius: 5px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--grad-brand); border-radius: 5px; transition: width .45s ease; }
.kpi.k-bad .kpi-value { color: #c0392b; }