/* ========================================================================
 * 网页版样式（桌面优先）· V37 深青主题
 * ------------------------------------------------------------------------
 * 视觉方向：Flat / enterprise（扁平企业后台，按业务方给的样图重做）
 *   深青实色顶栏（**全宽**，品牌落在顶栏左侧）+ 白色侧栏 + 浅灰工作区 +
 *   白卡片（1px 细边线、去投影）。层级靠「留白 + 细分隔线」表达。
 *
 * 与上一版（V34 灰蓝 + 深色侧栏）的差别只有三点，其余一律没动：
 *   ① 主色 由灰蓝改为深青（具体取值见下方令牌，旧色不再出现于本文件）；
 *   ② 侧栏 深色全高 → **白底**；品牌区从侧栏上移到顶栏（顶栏因此变成全宽）；
 *   ③ 卡片 圆角 + 投影 → **细边线、去投影**（样图是扁平风格）。
 *   路由、权限、组件结构、所有业务文案均未改动。
 *
 * 与小程序端的关系：
 *   两端**品牌色不同**是刻意为之 —— 小程序沿用国网绿（已提审、不宜改动），
 *   网页版按业务方指定的深青主色重做，只影响 web/ 与共享的 WEB_APP 品牌字段。
 *
 * 尺寸按桌面习惯用 px（小程序端 rpx 按 750 基准换算：1rpx ≈ 0.5px）。
 * ====================================================================== */

:root {
  /* ---- 主色：深青（样图的顶栏色与主操作用色） ---- */
  --c-primary: #0f5c5f;
  --c-primary-dark: #0a4345;
  --c-primary-light: #e8f1f1;
  /* 主色光晕（登录页顶部一抹）：与主色同源。
     做成令牌是因为"换主色时最容易漏掉带透明度的那一处"——
     上一版换色后就漏了这里，登录页在深青主题下还留着灰蓝光晕。 */
  --c-primary-glow: rgba(15, 92, 95, 0.12);

  /* ---- 顶栏（深青实色、全宽） ---- */
  --c-top: #0f5c5f;
  --c-top-text: rgba(255, 255, 255, 0.82);
  --c-top-text-on: #ffffff;
  --c-top-line: rgba(255, 255, 255, 0.18);
  --c-top-hover: rgba(255, 255, 255, 0.12);

  /* ---- 侧栏（白底） ---- */
  --c-side-bg: #ffffff;
  --c-side-text: #4e5969;
  --c-side-line: #eef0f3;
  --c-side-hover: #f5f7f9;
  --c-side-active-bg: #e8f1f1;

  /* ---- 语义色 ---- */
  --c-danger: #d9534f;
  --c-danger-light: #fdeded;
  --c-warn: #d98a1f;
  --c-warn-light: #fdf4e6;
  --c-success: #2f9e6f;
  --c-info: #2b8a9e;

  /* ---- 文本与背景（灰阶对齐样图） ---- */
  --c-text: #1d2129;
  --c-text-sub: #4e5969;
  --c-text-muted: #86909c;
  --c-border: #e5e6eb;
  --c-border-strong: #d9dce1;
  --c-bg: #f2f3f5;
  --c-bg-soft: #f7f8fa;
  --c-card: #ffffff;

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  /* 阴影只留给浮层（弹窗 / 对话框 / toast / 抽屉）；卡片改用 1px 边线 */
  --shadow-card: 0 1px 2px rgba(29, 33, 41, 0.04), 0 10px 24px -16px rgba(29, 33, 41, 0.18);
  --shadow-pop: 0 10px 30px -12px rgba(29, 33, 41, 0.26);

  --side-w: 216px;
  --top-h: 56px;
}

* { box-sizing: border-box; }

/* ------------------------------------------------------------------
 * hidden 属性必须真的隐藏
 * 下方 .topbar/.sidebar/.modal-host 都设了 display:flex，
 * 其优先级高于浏览器默认的 [hidden]{display:none}，会导致"隐藏"失效
 * （未登录也显示退出登录按钮、并且弹出一个空白弹窗）
 * ------------------------------------------------------------------ */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  /* 中文优先的命名字体栈：后台系统不引入 Web 字体（中文包 5~10MB，
     与「纯静态托管、秒开」的部署模型冲突），改用各平台最优的中文字体；
     数字与编号另用等宽数字字型，保证表格列对齐。 */
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
    "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* 数字（金额 / 数量 / 单号）统一等宽字形，避免逐行跳动 */
.num, .stat-value, .table td[style*="right"], .sum-bar b, .lc-sum-v {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ========================================================================
 * 应用骨架：全宽深青顶栏（品牌在左） + 白色侧栏 + 工作区
 * ====================================================================== */
.app { display: flex; flex-direction: column; min-height: 100vh; }
/* 顶栏之下的一行：侧栏 + 工作区（未登录时两者都 hidden，只剩登录页） */
.body { flex: 1; display: flex; min-width: 0; }

/* ---------------------------- 顶栏（全宽，深青实色） ---------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--top-h);
  padding: 0 16px;
  flex-shrink: 0;
  background: var(--c-top);
  color: var(--c-top-text);
}

/* 品牌区：logo（彩色 → 白色剪影）+ 产品名 + 副标题，横排贴左 */
.top-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* 彩色 logo 在深青底上不可读 → 转白色剪影；登录页（白底）用彩色原版。
   横版 3.74:1：顶栏高 56px，取 104px 宽 → 高约 28px，中文可辨 */
.top-logo {
  width: 104px;
  height: auto;
  display: block;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: .95;
}
.top-brand-text { display: flex; flex-direction: column; min-width: 0; }
.top-brand-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-top-text-on);
  letter-spacing: .01em;
  /* 顶栏空间不足时截断品牌文字，而不是把页标题/身份区挤出屏幕 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-brand-sub {
  font-size: 10.5px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 品牌与页标题之间的竖分隔 */
.top-sep { width: 1px; height: 22px; flex-shrink: 0; background: var(--c-top-line); }

/* ---------------------------- 侧栏（白底，从顶栏下方开始） ---------------------------- */
.sidebar {
  width: var(--side-w);
  flex-shrink: 0;
  position: sticky;
  top: var(--top-h);
  height: calc(100vh - var(--top-h));
  display: flex;
  flex-direction: column;
  background: var(--c-side-bg);
  border-right: 1px solid var(--c-border);
}

.nav { flex: 1; overflow-y: auto; padding: 10px 10px 12px; }
/* 细滚动条（浅底用中性灰，别出现亮色轨道） */
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: rgba(134, 144, 156, 0.28); border-radius: 3px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin-bottom: 2px;
  border-radius: var(--r-sm);
  color: var(--c-side-text);
  font-size: 13.5px;
  position: relative;
  transition: background .15s ease, color .15s ease;
}
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .72; }
/* 菜单名过长时截断，不要把侧栏顶宽（图标固定、文字可省略） */
.nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background: var(--c-side-hover); color: var(--c-primary); }
.nav-item:hover svg { opacity: .9; }
.nav-item.active {
  background: var(--c-side-active-bg);
  color: var(--c-primary);
  font-weight: 600;
}
.nav-item.active svg { opacity: 1; color: var(--c-primary); }
/* 激活项左侧主色指示条 */
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 16px;
  border-radius: 0 3px 3px 0;
  background: var(--c-primary);
}

.nav-tip {
  margin: 10px 4px 0;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  line-height: 1.5;
  color: #8a5a10;
  background: var(--c-warn-light);
  border: 1px solid rgba(217, 138, 31, 0.24);
}

.side-foot {
  padding: 10px 14px 14px;
  border-top: 1px solid var(--c-side-line);
}
.side-env {
  font-size: 11px;
  line-height: 1.5;
  color: var(--c-text-muted);
  word-break: break-all;
}

/* ---------------------------- 工作区 ---------------------------- */
.shell { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* 移动端汉堡按钮：深青底上改用半透明白描边（顶栏本身的样式见上方骨架段） */
.nav-toggle {
  display: none;                                   /* 桌面端隐藏，断点里开启 */
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--c-top-line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-top-text-on);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--c-top-hover); }
.nav-toggle svg { width: 17px; height: 17px; }

/* 页标题：白色竖条 + 中文标题 + 英文小字（深青底上） */
.titlebar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.titlebar-bar {
  width: 3px; height: 18px; border-radius: 2px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.45);
}
.titlebar-text { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
/* 注意：只作用于顶栏，避免影响页面内容里的 .page-title（pageHead 用的是同一个类） */
#topbar .page-title { font-size: 16px; font-weight: 600; color: var(--c-top-text-on); white-space: nowrap; }
#topbar .page-sub {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.58);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.service-text { font-size: 12.5px; color: rgba(255, 255, 255, 0.7); }
.user-box { display: flex; align-items: center; gap: 8px; }
.user-name { font-size: 13.5px; font-weight: 600; color: var(--c-top-text-on); }
.user-role, .tag {
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);
}
.tag { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.78); }
.net-tag { font-size: 12px; color: #ffd8d6; }
.net-tag.warn { padding: 2px 9px; border-radius: 999px; background: rgba(217, 83, 79, 0.3); color: #ffe3e2; }

/* 退出入口：按样图放在顶栏右侧的用户区（原来在侧栏底部） */
.top-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--c-top-text);
  background: transparent;
  border: 1px solid var(--c-top-line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.top-logout svg { width: 14px; height: 14px; }
.top-logout:hover { background: rgba(217, 83, 79, 0.24); border-color: rgba(255, 255, 255, 0.3); color: #fff; }

.content { flex: 1; display: flex; flex-direction: column; }

.main { flex: 1; padding: 20px 24px 40px; min-width: 0; }
/* 未登录（登录页）不继承工作区内边距 —— 否则 100vh 的登录页会多出一条滚动条 */
body.is-guest .main { padding: 0; }

/* ---------------------------- 页头与卡片 ---------------------------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.page-title { margin: 0; font-size: 20px; }
.page-desc { margin: 4px 0 0; color: var(--c-text-sub); font-size: 13px; }
.page-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* 扁平卡片：1px 细边线、去投影（样图风格；阴影只留给浮层） */
.card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-lg); margin-bottom: 16px; overflow: hidden; }
.card-head { padding: 14px 18px; border-bottom: 1px solid var(--c-border); }
.card-head h3 { margin: 0; font-size: 15px; }
.card-body { padding: 16px 18px; }

/* ---------------------------- 统计卡 ---------------------------- */
/* 最小列宽 168px 是**算出来的**：一个 15 字符的金额（「¥167,577,805.00」）
   在降档后的 15px 下约 135px，加左右内边距 32px ≈ 167px —— 小于这个宽度就必然折行。
   宁可在宽屏上少排一列，也不要让金额断行。 */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-bottom: 16px; }
/* min-width:0 是网格子项的必要声明：默认 min-width:auto 会让卡片不肯缩到内容之下，
   长数值就会把整行网格顶宽、文字溢出卡片 */
.stat-card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 14px 16px; min-width: 0; }
.stat-label { font-size: 12px; color: var(--c-text-muted); }
/* line-height 与 overflow-wrap 是兜底：字号降档后仍放不下时换行，
   绝不让数字溢出卡片（溢出会被相邻卡片盖住，看起来像数据错了） */
.stat-value { font-size: 22px; font-weight: 700; margin-top: 4px; line-height: 1.3; overflow-wrap: anywhere; }
/* 长数值降档（由 ui.statCards 按字符数加类，见该函数注释） */
.stat-value.long { font-size: 15px; }
.stat-value.xlong { font-size: 13px; }
.stat-value.tone-primary { color: var(--c-primary); }
.stat-value.tone-danger { color: var(--c-danger); }
.stat-sub { font-size: 12px; color: var(--c-text-muted); }

/* ---------------------------- 表单控件 ---------------------------- */
.filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--c-text-sub); min-width: 150px; }
.field.grow { flex: 1; min-width: 220px; }
.field-row { display: flex; gap: 8px; }
.field input, .field select {
  height: 36px;
  padding: 0 10px;
  font-size: 14px;
  color: var(--c-text);
  background: #fff;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  outline: none;
}
.field input:focus, .field select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-light); }
.field-row input { flex: 1; }

.btn {
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  background: #fff;
  color: var(--c-text);
  transition: filter .15s ease, background .15s ease;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-block { display: block; width: 100%; margin-top: 12px; }
.btn-primary { background: var(--c-primary); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(35, 81, 120, 0.28); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.05); }
.btn-ghost { background: #f2f5f7; border-color: var(--c-border-strong); color: var(--c-text-sub); }
.btn-plain { background: var(--c-primary-light); color: var(--c-primary-dark); }
.btn-danger { background: var(--c-danger-light); color: var(--c-danger); }

/* ---------------------------- 表格 ---------------------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--c-border); text-align: left; }
.table th { background: #f7fafb; color: var(--c-text-sub); font-weight: 600; position: sticky; top: 0; }
.table tbody tr:hover { background: #fafcfd; }
.table .num, .table td[style*="right"] { font-variant-numeric: tabular-nums; }

.tag-in { color: var(--c-primary-dark); background: var(--c-primary-light); padding: 1px 8px; border-radius: 999px; font-size: 12px; }
.tag-out { color: #9a6212; background: var(--c-warn-light); padding: 1px 8px; border-radius: 999px; font-size: 12px; }
.tag-danger { color: var(--c-danger); font-weight: 600; }

.result-bar { margin: 0 0 10px; color: var(--c-text-sub); font-size: 13px; }
.result-bar b { color: var(--c-text); }

/* ---------------------------- 分页 / 空态 / 加载 ---------------------------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.pager-info { font-size: 13px; color: var(--c-text-sub); }
.empty { padding: 40px 0; text-align: center; color: var(--c-text-muted); }
.empty-icon { font-size: 28px; }
.empty-text { margin-top: 6px; color: var(--c-text-sub); }
.empty-desc { font-size: 12px; }
.loading { padding: 32px 0; text-align: center; color: var(--c-text-muted); }
.error-box { background: var(--c-danger-light); border: 1px solid #f7c9cb; border-radius: var(--r-md); padding: 16px 18px; color: #8c2b2f; }
.error-box h3 { margin: 0 0 6px; }
.error-box pre { white-space: pre-wrap; word-break: break-all; }
.muted { color: var(--c-text-muted); }

/* ---------------------------- toast / modal ---------------------------- */
.toast-host { position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: rgba(31, 42, 48, 0.9); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); font-size: 13px; box-shadow: var(--shadow-card); animation: toast-in .18s ease; }
.toast.out { opacity: 0; transition: opacity .2s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.modal-host { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.modal-mask { position: absolute; inset: 0; background: rgba(17, 24, 28, 0.45); }
.modal-panel { position: relative; width: min(420px, 90vw); background: #fff; border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-card); }
.modal-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.modal-content { color: var(--c-text-sub); white-space: pre-wrap; }
.modal-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---------------------------- 登录页 ---------------------------- */
.login-wrap {
  display: flex;
  flex-direction: column;        /* 卡片 + 卡片外的环境提示纵向排布 */
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 100vh;
  padding: 24px;
  /* 顶部一抹主色光晕，避免纯灰底的平铺感（走令牌，换主色不会漏） */
  background:
    radial-gradient(80% 50% at 50% 0%, var(--c-primary-glow) 0%, transparent 70%),
    var(--c-bg);
}
.login-card {
  width: min(392px, 100%);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 34px 30px 26px;
  box-shadow: var(--shadow-pop);
}
/* 品牌区：竖排居中 —— 横版 logo 缩小后中文仍清晰，下方产品名 + 副标题。
   视觉上只回答"这是什么"，说明性文案一律不进卡片。 */
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 26px;
}
/* 白底卡片上用彩色原版 logo：84px 宽 → 高约 22px，克制不抢戏 */
.login-logo { width: 84px; height: auto; display: block; margin-bottom: 10px; }
.login-brand-name { font-size: 18px; font-weight: 700; color: var(--c-text); letter-spacing: .01em; }
.login-brand-sub { font-size: 11px; color: var(--c-text-muted); letter-spacing: .12em; }

/* 登录页控件比后台表单略高一点，留出呼吸感 */
.login-card .field { margin-bottom: 12px; }
.login-card .field input { height: 42px; border-radius: 10px; background: #fbfcfd; }
.login-card .field-row .btn { height: 42px; border-radius: 10px; }
.login-card .btn-block { height: 42px; margin-top: 8px; border-radius: 10px; font-size: 15px; }

/* 合规告知：一行浅色小字，居中弱化（触发校验时会替换成错误文案） */
.login-tip {
  margin-top: 16px;
  font-size: 11.5px;
  line-height: 1.65;
  text-align: center;
  color: var(--c-text-muted);
}
.login-tip.warn { color: #9a6212; }
.login-tip.error { color: var(--c-danger); }

/* 卡片外的本地演示模式提示（仅 ?mock=1 且未开 DEV_MODE 时出现） */
.login-note {
  max-width: min(392px, 100%);
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
  color: var(--c-text-muted);
}

/* ---------------------------- 自诊断面板 ---------------------------- */
.dg-host { position: fixed; inset: 0; z-index: 99; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(17, 24, 28, 0.55); }
.dg-panel { width: min(860px, 100%); max-height: 86vh; display: flex; flex-direction: column; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.dg-head { padding: 16px 20px; font-size: 16px; font-weight: 600; background: linear-gradient(90deg, var(--c-primary), var(--c-primary-dark)); color: #fff; }
.dg-live { padding: 10px 20px; font-size: 13px; background: #f7fafb; border-bottom: 1px solid var(--c-border); color: var(--c-text-sub); }
.dg-live.ok { color: var(--c-primary-dark); font-weight: 600; }
.dg-live.bad { color: var(--c-danger); font-weight: 600; }
.dg-body { padding: 16px 20px; overflow: auto; font-size: 13px; line-height: 1.9; }
.dg-sec { margin: 14px 0 6px; font-weight: 600; color: var(--c-text); border-left: 3px solid var(--c-primary); padding-left: 8px; }
.dg-sec:first-child { margin-top: 0; }
.dg-line { word-break: break-all; color: var(--c-text-sub); }
.dg-line.bad { color: var(--c-danger); }
.dg-hint { margin: 8px 0; padding: 8px 10px; background: var(--c-warn-light); border-radius: var(--r-sm); color: #9a6212; }
.dg-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--c-border); }

/* ========================================================================
 * 二期新增：多级页面布局 / 表单栅格 / 对话框 / 明细编辑器
 * 说明：布局全部用 flex + grid，尺寸以 minmax/百分比为主，
 *       只在断点处切换列数，因此桌面→平板→手机都能自适应。
 * ====================================================================== */

/* ---------------------------- 内容列与面包屑 ---------------------------- */
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 24px 0; font-size: 13px; color: var(--c-text-sub);
}
.crumb .crumb-link { color: var(--c-primary-dark); cursor: pointer; }
.crumb .crumb-link:hover { text-decoration: underline; }
.crumb .crumb-sep { color: var(--c-text-muted); }
.crumb .crumb-cur { color: var(--c-text); font-weight: 600; }
.crumb .crumb-back {
  margin-right: 4px; padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--c-border-strong); background: #fff; cursor: pointer;
  font-size: 12px; color: var(--c-text-sub);
}
.crumb .crumb-back:hover { border-color: var(--c-primary); color: var(--c-primary-dark); }

/* ---------------------------- 手机端抽屉 ---------------------------- */
.nav-toggle {
  display: none;                                   /* 桌面端隐藏，断点里开启 */
  align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-right: 2px;
  border: 1px solid rgba(255, 255, 255, 0.45); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 16px; cursor: pointer;
}
/* 抽屉遮罩：从顶栏下方开始 —— 顶栏保持可点（否则手机端开了抽屉就没法点 ☰ 收起） */
.nav-mask { position: fixed; top: var(--top-h); left: 0; right: 0; bottom: 0; z-index: 35; background: rgba(29, 33, 41, 0.45); }

/* 侧栏分组标题 */
/* 导航分组标题：深色侧栏下用低对比灰，弱化但不消失 */
.nav-group {
  margin: 14px 0 6px;
  padding: 0 12px;
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(148, 163, 184, 0.6);
}
.nav-group:first-child { margin-top: 0; }

/* ---------------------------- 表单栅格 ---------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fld.span2 { grid-column: 1 / -1; }
.fld-label { font-size: 12px; color: var(--c-text-sub); }
.fld .req { color: var(--c-danger); font-style: normal; margin-left: 2px; }
.fld-hint { font-size: 12px; color: var(--c-text-muted); }
.fld input, .fld select, .fld textarea {
  width: 100%; padding: 0 10px; font-size: 14px; color: var(--c-text); background: #fff;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); outline: none;
  font-family: inherit;
}
.fld input, .fld select { height: 36px; }
.fld textarea { padding: 8px 10px; line-height: 1.6; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-light);
}
.fld.is-locked input, .fld.is-locked select { background: #f6f8f9; color: var(--c-text-sub); }

/* ---------------------------- 通用对话框 ---------------------------- */
.dlg-host { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dlg-mask { position: absolute; inset: 0; background: rgba(17, 24, 28, 0.45); }
.dlg-panel {
  position: relative; display: flex; flex-direction: column;
  width: min(520px, 100%); max-height: 88vh;
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden;
}
.dlg-panel.wide { width: min(860px, 100%); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--c-border); }
.dlg-title { font-size: 16px; font-weight: 600; }
.dlg-x { width: 28px; height: 28px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-text-sub); font-size: 20px; line-height: 1; cursor: pointer; }
.dlg-x:hover { background: #f2f5f7; }
.dlg-body { padding: 16px 18px; overflow: auto; }
.dlg-text { margin: 0; color: var(--c-text-sub); }
.dlg-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--c-border); }
.dlg-err { flex: 1; min-width: 0; font-size: 12px; color: var(--c-danger); }

/* ---------------------------- 状态标签 ---------------------------- */
.st { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.st-pending { background: var(--c-warn-light); color: #9a6212; }
.st-approved { background: var(--c-primary-light); color: var(--c-primary-dark); }
.st-rejected { background: var(--c-danger-light); color: var(--c-danger); }
.st-canceled { background: #f0f3f5; color: var(--c-text-muted); }
.st-plain { background: #f0f3f5; color: var(--c-text-sub); }

/* ---------------------------- 详情 ---------------------------- */
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; }
.detail-item { min-width: 0; }
.detail-item.span2 { grid-column: span 2; }
.detail-label { font-size: 12px; color: var(--c-text-muted); }
.detail-value { font-size: 14px; word-break: break-all; }

/* ---------------------------- 工具条与行内按钮 ---------------------------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.banner { margin-bottom: 12px; padding: 10px 14px; border-radius: var(--r-sm); font-size: 13px; }
.banner-info { background: var(--c-primary-light); color: var(--c-primary-dark); }
.banner-warn { background: var(--c-warn-light); color: #9a6212; }
.banner-danger { background: var(--c-danger-light); color: #8c2b2f; }
.row-actions { display: inline-flex; gap: 10px; }
.link-btn { border: 0; background: transparent; padding: 0; font-size: 13px; color: var(--c-primary-dark); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.link-btn.danger { color: var(--c-danger); }
.link-btn:disabled { color: var(--c-text-muted); cursor: not-allowed; text-decoration: none; }

/* ---------------------------- 明细行编辑器 ---------------------------- */
.row-editor { margin-top: 4px; }

/* V35 单据表格导入面板（入库 / 出库明细区上方，虚线框与表格区分） */
.imp-panel {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px dashed var(--c-border);
  border-radius: var(--r-sm);
  background: #fafbfc;
}
.imp-panel textarea { width: 100%; box-sizing: border-box; font-family: inherit; }
.doc-table { white-space: nowrap; }
.doc-table input, .doc-table select {
  width: 100%; min-width: 92px; height: 32px; padding: 0 8px; font-size: 13px;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); outline: none; background: #fff;
}
.doc-table input:focus, .doc-table select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-light); }
.doc-table .cell-text { font-size: 13px; }
.doc-table .col-op { width: 64px; text-align: right; }
.add-row { margin-top: 10px; }

/* 表格内的就地编辑输入框（如库位名称 / 备注） */
.cell-input {
  width: 100%; height: 30px; padding: 0 8px; font-size: 13px;
  color: var(--c-text); background: #fff;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); outline: none;
  font-family: inherit;
}
.cell-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-light); }

/* ---------------------------- 标签页 ---------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tab {
  padding: 6px 14px; border: 1px solid var(--c-border-strong); border-radius: 999px;
  background: #fff; color: var(--c-text-sub); font-size: 13px; cursor: pointer;
}
.tab:hover { border-color: var(--c-primary); color: var(--c-primary-dark); }
.tab.active { background: var(--c-primary-light); border-color: var(--c-primary); color: var(--c-primary-dark); font-weight: 600; }
.tab-count { margin-left: 6px; font-size: 12px; color: inherit; opacity: .75; }

/* ---------------------------- 全局 loading / 图片查看 ---------------------------- */
.global-loading { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(17, 24, 28, 0.28); }
.global-loading-box {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-card); font-size: 14px;
}
.spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--c-primary-light); border-top-color: var(--c-primary);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.img-viewer { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.85); padding: 24px; }
.img-viewer-pic { max-width: 100%; max-height: 100%; border-radius: var(--r-sm); }
.img-viewer-close {
  position: absolute; top: 16px; right: 20px; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.2); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}

/* ---------------------------- 汇总条 ---------------------------- */
.sum-bar { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; font-size: 13px; color: var(--c-text-sub); }
.sum-bar b { color: var(--c-text); font-variant-numeric: tabular-nums; }
.sum-bar b.danger { color: var(--c-danger); }
.sum-bar b.ok { color: var(--c-primary-dark); }

/* ---------------------------- 多选网格（项目分配 / 模板选择 / 抄送） ---------------------------- */
.pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px; max-height: 320px; overflow: auto; padding: 2px;
}
.pick-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
  background: #fff; cursor: pointer; font-size: 13px; min-width: 0;
}
.pick-item:hover { border-color: var(--c-primary); background: var(--c-primary-light); }
.pick-item input { flex-shrink: 0; }
.pick-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-item.wide { flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; }
.pick-item.wide .pick-title { font-weight: 600; }
.pick-item.wide .muted { white-space: normal; font-size: 12px; }
.pick-item.wide.active { border-color: var(--c-primary); background: var(--c-primary-light); }
/* 多选清单工具栏（V36）：检索框 + 「已选 n / 共 m」计数 —— 项目多时不必逐格滚动 */
.pick-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.pick-search {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--c-text);
  background: #fff;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  outline: none;
}
.pick-search:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-light); }
.pick-count { flex-shrink: 0; font-size: 12px; color: var(--c-text-muted); white-space: nowrap; }
.pick-actions { display: flex; gap: 8px; margin-top: 10px; }
.cc-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cc-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--c-border-strong); border-radius: 999px;
  background: #fff; font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s;
}
.cc-item:hover { border-color: var(--c-primary); }
.cc-item.on { border-color: var(--c-primary); background: var(--c-primary-light); }
.cc-name { white-space: nowrap; }
.cc-role { font-size: 11px; color: var(--c-text-muted); white-space: nowrap; }
.cc-count { margin-left: 8px; font-weight: 400; font-size: 12px; color: var(--c-primary); }
/* 检索框（与表单输入同风格，独立于草稿字段） */
.cc-q {
  margin: 6px 0 8px; max-width: 320px; width: 100%;
  height: 30px; padding: 0 10px; font-size: 13px;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
  outline: none; background: #fff;
}
.cc-q:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-light); }
/* 自绘勾选框：原生 checkbox 在高 DPI 屏上过大，统一为 16px 方框 */
#sd-foot .cc-item input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; margin: 0; flex-shrink: 0; position: relative;
  border: 1.5px solid var(--c-border-strong); border-radius: 4px;
  background: #fff; cursor: pointer;
}
#sd-foot .cc-item input[type=checkbox]:checked { background: var(--c-primary); border-color: var(--c-primary); }
#sd-foot .cc-item input[type=checkbox]:checked::after {
  content: '✓'; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}

/* ---------------------------- 纯 CSS 横条图（报表用，不引图表库） ---------------------------- */
.bar-row { display: flex; flex-direction: column; gap: 3px; }
.bar-track { height: 7px; border-radius: 999px; background: #eef2f5; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--c-primary); transition: width .25s ease; }
.bar-fill.in { background: var(--c-primary); }
.bar-fill.out { background: var(--c-warn); }
.bar-fill.primary { background: var(--c-info); }

/* ---------------------------- 盘点差异着色 ---------------------------- */
.diff-up { color: var(--c-primary-dark); font-weight: 600; }
.diff-down { color: var(--c-danger); font-weight: 600; }

/* ---------------------------- 可检索下拉（combobox） ----------------------------
 * 结构：可见输入框 + 隐藏值输入框 + 悬浮候选面板（见 forms.searchSelect）
 * 输入框的尺寸/边框沿用 .fld input / .field input，这里只补箭头与面板。
 * -------------------------------------------------------------------------- */
.ssel { position: relative; display: block; width: 100%; }
.ssel input[type=hidden] { display: none; }
.ssel .ssel-input { padding-right: 30px; }
.ssel-caret {
  position: absolute; right: 3px; top: 3px; width: 26px; height: 30px;
  border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--c-text-muted); font-size: 11px; line-height: 30px;
  cursor: pointer;
}
.ssel-caret:hover { background: var(--c-primary-light); color: var(--c-primary-dark); }
.ssel.is-disabled .ssel-input { background: #f6f8f9; color: var(--c-text-sub); }
.ssel-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 31;
  /* 窄输入框也要能看清候选文本（项目名通常很长） */
  min-width: 220px;
  max-height: 264px; overflow: auto;
  /* V38：列表滚到底后不要把滚动"接力"给页面 —— 页面一滚面板就会收起，
     用户正低头找候选，面板却在滚到底的瞬间消失（表现为"闪退"） */
  overscroll-behavior: contain;
  background: #fff; border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm); box-shadow: var(--shadow-card);
}
.ssel-opt { padding: 8px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssel-opt:hover, .ssel-opt.active { background: var(--c-primary-light); color: var(--c-primary-dark); }
.ssel-empty { padding: 10px 12px; font-size: 13px; color: var(--c-text-muted); }

/* ---------------------------- 表单内的即时操作行 ----------------------------
 * 用于「货架不足时旁边就能新建」这类补充动作：紧贴表单，不再被推到卡片底部 */
.loc-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--c-border);
  font-size: 12px;
}

/* ========================================================================
 * 响应式断点
 *   ≥1025px 桌面：固定侧栏 + 两列表单 + 三列详情
 *   ≤1024px 平板：侧栏变抽屉 + 两列表单
 *   ≤640px  手机：单列表单 + 顶栏精简 + 统计卡两列
 * ====================================================================== */
@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; }
  .sidebar {
    /* 平板及以下：侧栏改为抽屉，从顶栏下方滑入（白底 + 右侧边线） */
    position: fixed; top: var(--top-h); bottom: 0; left: 0; width: 264px;
    height: auto; z-index: 40; min-height: 0;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 0 0 24px rgba(29, 33, 41, 0.14);
  }
  .sidebar.open { transform: none; }
  .main { padding: 16px 16px 36px; }
  .crumb { padding: 10px 16px 0; }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  /* 顶栏矮一点，抽屉与遮罩的起始位置都跟着这个变量走 */
  :root { --top-h: 52px; }
  .topbar { padding: 0 12px; gap: 10px; }
  .topbar-right { gap: 8px; }
  /* 手机端顶栏紧张：品牌文字 / 英文小字 / 服务信息让位（logo 本身已含品牌名），
     只保留 logo + 中文页标题 + 身份 + 退出图标 */
  .top-brand-text { display: none; }
  .top-sep { display: none; }
  #topbar .page-sub { display: none; }
  .service-text { display: none; }
  .top-logout { padding: 0 8px; }
  .top-logout span { display: none; }
  .user-name { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-role { display: none; }                     /* 手机端顶栏空间紧张，角色在首页展示 */

  .main { padding: 12px 12px 32px; }
  .page-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-actions { justify-content: flex-start; flex-wrap: wrap; }
  .page-title { font-size: 18px; }

  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .fld.span2 { grid-column: auto; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-item.span2 { grid-column: auto; }

  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-value { font-size: 18px; }

  .card-body { padding: 14px; }
  .dlg-host { padding: 0; align-items: flex-end; }
  .dlg-panel, .dlg-panel.wide { width: 100%; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* 窄屏下表格保持横向滚动（宽表是桌面端优势，手机上不强行压缩列宽） */
@media (max-width: 640px) {
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .table { font-size: 12px; }
  .table th, .table td { padding: 8px 10px; }
}

/* 打印：只保留内容区，便于把详情页另存为 PDF 存档 */
@media print {
  .topbar, .sidebar, .crumb, .nav-mask, .toast-host, .page-actions, .toolbar { display: none !important; }
  .main { padding: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}