/* ==================================================================
   Work · 基础样式（v0.1 底座）
   风格（用户 2026-10-16 定）：类似金蝶/用友云 ERP ——
   浅色底、蓝色主按钮(var(--brand) 系)、紧凑表格、密集信息、清爽不花哨
   ================================================================== */
* { box-sizing: border-box; }
/* 主题色统一走变量（v0.5.3）：改一处、全站生效，不再东一个蓝西一个蓝 */
:root {
  --brand: #2b7cff;        /* 主色：按钮 / 高亮 / 链接 / 当前菜单 */
  --brand-deep: #1f6fe0;   /* 主色加深：hover / 当前菜单文字 */
  --brand-weak: #eaf3ff;   /* 主色浅底：当前菜单底 / 选中行 */
  --ink: #1c2b3a;          /* 标题深色 */
  --sub: #8a97a6;          /* 次要文字 */
  --line: #e6ecf4;         /* 边框线 */
}
html, body { height: 100%; }
body {
  margin: 0; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-size: 13px; color: #333; background: #f0f2f5;
}
.hidden { display: none !important; }
a { color: var(--brand); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }

/* ---------------- 登录页 ---------------- */
.login-mask {
  position: fixed; inset: 0; z-index: 100;
  background: linear-gradient(135deg, #e8f1ff 0%, #f4f7fb 55%, var(--brand-weak) 100%);
  display: flex; align-items: center; justify-content: center;
}
.login-card {
  width: 360px; background: #fff; border-radius: 10px;
  box-shadow: 0 8px 40px rgba(30, 60, 120, .12);
  padding: 40px 36px 28px;
}
.login-brand {
  font-size: 26px; font-weight: 700; color: #1f2d3d;
  display: flex; align-items: center; gap: 10px;
}
.login-brand .logo {
  width: 38px; height: 38px; border-radius: 9px; background: var(--brand);
  color: #fff; font-size: 20px; display: inline-flex; align-items: center;
  justify-content: center;
}
.login-sub { color: #8a97a6; margin: 6px 0 26px; font-size: 13px; }
.login-card label { display: block; margin: 14px 0 6px; color: #5a6675; font-size: 13px; }
.login-card input {
  width: 100%; height: 40px; border: 1px solid #d9e2ec; border-radius: 6px;
  padding: 0 12px; font-size: 14px; outline: none; transition: border .15s, box-shadow .15s;
}
.login-card input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(43,124,255,.12); }
.lg-err { color: #e64340; font-size: 12px; min-height: 18px; margin-top: 8px; }
.lg-btn {
  width: 100%; height: 42px; margin-top: 6px; border: 0; border-radius: 6px;
  background: var(--brand); color: #fff; font-size: 15px; letter-spacing: 6px; cursor: pointer;
}
.lg-btn:hover { background: var(--brand-deep); }
.lg-hint { text-align: center; color: #a5b0bd; font-size: 12px; margin-top: 18px; }
.lg-net {
  margin-top: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer;
  background: #f2f7ff; border: 1px dashed #b9d2ff; color: #45608a;
  font-size: 12px; line-height: 1.6; text-align: center; word-break: break-all;
}
.lg-net b { color: #1b5fd0; }
.lg-net-tip { display: block; color: #93a3b8; margin-top: 2px; }
.lg-net:empty { display: none; }

/* ---------------- 主框架 ---------------- */
.app { display: flex; flex-direction: column; height: 100vh; }
.topbar {
  height: 48px; background: #fff; border-bottom: 1px solid #e3e8ef;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; flex: 0 0 auto;
}
.tb-left { display: flex; align-items: center; gap: 10px; }
.tb-logo {
  width: 28px; height: 28px; border-radius: 7px; background: var(--brand);
  color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.tb-title { font-size: 17px; font-weight: 700; color: #1f2d3d; }
.tb-env { color: #9aa6b3; font-size: 12px; border-left: 1px solid #e3e8ef; padding-left: 10px; }
.tb-right { display: flex; align-items: center; gap: 16px; }
.tb-user b { color: #1f2d3d; margin-right: 6px; }
.tb-user i { color: #8a97a6; font-style: normal; font-size: 12px; }
.tb-link { color: #5a6675; font-size: 13px; }

.body { display: flex; flex: 1 1 auto; min-height: 0; }
.side {
  width: 226px; background: #fff; border-right: 1px solid #e3e8ef;
  overflow-y: auto; flex: 0 0 auto; padding: 12px 0 34px;
}
.nav-group { padding: 14px 18px 6px; color: #98a4b3; font-size: 12px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9.5px 16px; color: #45505c; cursor: pointer; font-size: 13.5px;
  line-height: 1.45; border-left: 3px solid transparent;
}
.nav-item:hover { background: #f3f7fd; color: var(--brand); }
.nav-item.active {
  background: var(--brand-weak); color: var(--brand-deep); font-weight: 700;
  border-left-color: var(--brand);
}
/* ---------------- 左侧菜单：母目录 / 子目录 / 叶子项，层级一眼可辨 ----------------
   母目录（一级）：整块浅灰标题条，字最大最黑（14.5px / 700）
   子目录（二级）：加粗深灰（13.5px / 600），缩进一档
   叶子页（三级）：常规字重、颜色更浅（13px / 400），再缩进一档 */
.nav-top { border-top: 1px solid #eef2f8; }
.nav-top:first-child { border-top: none; }
.nav-top > .nav-group {
  display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  font-weight: 700; color: #1c2b3a; font-size: 14.5px; letter-spacing: .3px;
  padding: 15px 14px 10px; background: #f7fafd;
}
.nav-top > .nav-group:hover { color: var(--brand); background: #f1f6fd; }
.nav-top > .nav-group .caret {
  color: #8b99a8; font-size: 12px; width: 13px; flex: 0 0 auto;
}
.nav-item.lvl2 { padding-left: 22px; font-weight: 600; color: #2b3742; font-size: 13.5px; }
.nav-item.lvl2 .caret {
  color: #8b99a8; font-size: 12px; width: 13px; flex: 0 0 auto;
}
.nav-item.lvl2.active { font-weight: 700; }
.nav-kids { }
.nav-item.lvl3 { padding-left: 46px; font-weight: 400; color: #5e6b7a; font-size: 13px; }
.nav-item.lvl3 .ico { font-size: 13px; width: 17px; text-align: center; }
.main { flex: 1 1 auto; overflow: auto; padding: 14px; min-width: 0; }

/* ---------------- 内容页（ERP 列表风格） ---------------- */
.page-card { background: #fff; border-radius: 6px; padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(31, 45, 61, .06); }
.page-card + .page-card { margin-top: 12px; }
.page-title { font-size: 15px; font-weight: 700; color: #1f2d3d; margin: 0 0 12px; }

/* 页头：标题 + 右上角操作按钮 */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.page-head .page-title { margin: 0; }
.sub-title { font-size: 13px; font-weight: 600; color: #3b4553; margin: 4px 0 8px; }

/* 搜索区 */
.search-bar {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  padding: 10px 12px; background: #f7f9fc; border: 1px solid #e8eef5; border-radius: 6px;
}
.search-bar .fld { display: flex; align-items: center; gap: 8px; }
.search-bar .fld label { color: #5a6675; white-space: nowrap; }
.search-bar input, .search-bar select {
  height: 30px; border: 1px solid #d9e2ec; border-radius: 4px;
  padding: 0 8px; font-size: 13px; outline: none; min-width: 160px; background: #fff;
}
.search-bar input:focus, .search-bar select:focus { border-color: var(--brand); }

/* 按钮 */
.btn {
  height: 30px; padding: 0 16px; border-radius: 4px; border: 1px solid var(--brand);
  background: var(--brand); color: #fff; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--brand-deep); }
.btn.plain { background: #fff; color: #45505c; border-color: #d0d8e1; }
.btn.plain:hover { color: var(--brand); border-color: var(--brand); }
.btn.ghost { background: #fff; color: #c07f16; border-color: #eccf95; }
.btn.ghost:hover { background: #fdf7ec; border-color: #c07f16; }

/* 操作行 */
.action-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.action-row .stat { color: #8a97a6; font-size: 12px; }
.action-row .spacer { flex: 1; }
/* 识别上传条：弹窗表单顶部那一行「上传合同识别 / 上传明细识别」 */
.ocr-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 0 14px; padding: 9px 13px; background: #f3f8f3;
  border: 1px dashed #b7cdb9; border-radius: 8px; }
.ocr-bar .tip { color: #7b8a7d; font-size: 12px; line-height: 1.5; }
.ocr-bar .op { font-weight: 600; }

/* 表格 */
.table-wrap { overflow: auto; border: 1px solid #e8eef5; border-radius: 4px; }
table.grid { border-collapse: collapse; width: 100%; background: #fff; }
table.grid th, table.grid td {
  border-bottom: 1px solid #eef2f6; padding: 7px 10px; text-align: left;
  white-space: nowrap; font-size: 12.5px;
}
table.grid th {
  background: #f5f8fc; color: #45505c; font-weight: 600;
  position: sticky; top: 0; z-index: 2;
}
table.grid th.sortable { cursor: pointer; user-select: none; }
table.grid th.sortable:hover { color: var(--brand); }
table.grid tbody tr:hover td { background: #f7fbff; }
table.grid td.num, table.grid th.num { text-align: right; }
table.grid .link { color: var(--brand); cursor: pointer; }
table.grid .op a { margin-right: 10px; }
table.grid a.op { color: var(--brand); cursor: pointer; }
table.grid a.op:hover { text-decoration: underline; }
table.grid a.op + a.op { margin-left: 10px; }
.tag {
  display: inline-block; padding: 1px 8px; border-radius: 3px;
  font-size: 12px; line-height: 18px;
}
.tag.blue { background: #e8f1ff; color: var(--brand); }
.tag.green { background: #e7f7ee; color: #21a35d; }
.tag.gray { background: #f0f2f5; color: #8a97a6; }
.tag.amber, .tag.orange { background: #fdf3e3; color: #c07f16; }
.tag.red { background: #fdecec; color: #d9463e; }

/* 草稿行：淡黄底，一眼区分未正式保存的数据 */
tr.row-draft td { background: #fffbf2; }

/* v0.6.88 粮食出入台账：按合同号归组（组头可点，明细展开）
   组头做成一条「合同带」——一眼能看出这个合同几车、多少吨、多少钱 */
tr.lg-grp { cursor: pointer; user-select: none; }
tr.lg-grp td {
  background: #f6f9fd; border-top: 1px solid #e3ecf7; border-bottom: 1px solid #eef3fa;
  padding-top: 9px; padding-bottom: 9px; font-size: 13px; color: #2b3742;
}
tr.lg-grp:hover td { background: #eef5fd; }
tr.lg-grp.on td { background: #eaf3ff; }
tr.lg-grp .lg-caret {
  display: inline-block; width: 15px; color: #6f8db3; font-size: 11px; margin-right: 4px;
}
tr.lg-grp b { font-size: 13.5px; color: #1f2d3d; margin-right: 12px; }
tr.lg-grp .lg-sum { color: #6b7a8a; font-size: 12.5px; margin-right: 14px; }
tr.lg-grp .lg-sum:last-child { margin-right: 0; }
/* v0.6.92 粮款收付组头：收＝绿、付＝红，一眼分清方向合计 */
tr.lg-grp .lg-sum.green { color: #21a35d; font-weight: 600; }
tr.lg-grp .lg-sum.red { color: #d9463e; font-weight: 600; }
/* v0.6.94 发票收开的「开」方向用蓝，跟收 / 付区分开 */
tr.lg-grp .lg-sum.blue { color: #2f6fd0; font-weight: 600; }
/* v0.6.132：四单匹配客户组头的「还差」用橙色（超开超收才用红色） */
tr.lg-grp .lg-sum.orange { color: #c07f16; font-weight: 600; }
/* v0.6.133：物流费用页签（按销售合同录运费 / 运费台账列表） */
.fee-tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.fee-tab {
  padding: 7px 16px; border: 1px solid #d5dfeb; border-radius: 8px; background: #f6f9fd;
  color: #45505c; font-size: 13px; cursor: pointer; user-select: none;
}
.fee-tab:hover { color: var(--brand); border-color: #b9cdee; }
.fee-tab.on { background: #fff; color: #1b5fd9; border-color: #b9cdee; font-weight: 700; }
.fee-tabs .kpi-sub { margin-left: 6px; }
/* 明细行：左侧留一道竖线，跟组头视觉上连着 */
tr.lg-det td:first-child { border-left: 3px solid #cfe0f5; padding-left: 30px; }

/* ---------------- v0.6.127 两级折叠（物流费用：路线 → 采购合同 → 流水） ----------------
   一级组头跟其他台账一致（lg-grp），二级组头浅一档、缩进一格，明细再缩进一格 */
tr.lg-grp2 { cursor: pointer; user-select: none; }
tr.lg-grp2 td {
  background: #fafcff; border-bottom: 1px solid #f1f5fa;
  padding-top: 7px; padding-bottom: 7px; font-size: 12.5px; color: #33414f;
  padding-left: 26px;
}
tr.lg-grp2:hover td { background: #f4f8fd; }
tr.lg-grp2.on td { background: #f2f7ff; }
tr.lg-grp2 .lg-caret {
  display: inline-block; width: 15px; color: #8aa2bd; font-size: 11px; margin-right: 4px;
}
tr.lg-grp2 b { font-size: 12.5px; color: #2b3742; margin-right: 10px; font-weight: 600; }
tr.lg-grp2 .lg-sum { color: #6b7a8a; font-size: 12px; margin-right: 12px; }
tr.lg-grp2 .lg-sum:last-child { margin-right: 0; }
tr.lg-det2 td:first-child { border-left: 3px solid #e2ecf8; padding-left: 46px; }

/* ---------------- v0.6.96 行尾「⋯」小菜单 ----------------
   合同列表一行原来挤 7 个操作，把低频的收进小菜单；点一下弹、点外面即关 */
.op-dots {
  display: inline-block; cursor: pointer; padding: 0 7px; border-radius: 5px;
  color: #6b7a8a; font-weight: 700; font-size: 14px; line-height: 18px;
}
.op-dots:hover { background: #eef3fa; color: #1b5fd9; }
.op-menu-pop {
  position: fixed; z-index: 3000; min-width: 118px; padding: 5px;
  background: #fff; border: 1px solid #e3ecf7; border-radius: 9px;
  box-shadow: 0 8px 24px rgba(20, 40, 80, .14);
}
.op-menu-pop a.op { display: block; padding: 6px 10px; border-radius: 6px; margin: 0; font-size: 12.5px; }
.op-menu-pop a.op:hover { background: #f2f7ff; text-decoration: none; }
.op-menu-pop a.op.danger { color: #cf2e2e; }

/* ---------------- v0.6.90 管理员记事本（工作台） ----------------
   一张大纸的感觉：米黄底、随手写、停 2 秒自动存、置顶的带淡黄底 */
.np-card { border-top: 3px solid var(--brand); }
.np-card .np-hint { color: #a5b1bf; font-size: 12px; font-weight: 400; margin-left: 10px; }
.np-input {
  width: 100%; min-height: 110px; resize: vertical; box-sizing: border-box;
  border: 1px solid #e3ddc8; border-radius: 8px; padding: 12px 14px;
  font: inherit; font-size: 14px; line-height: 1.7; color: #3a3527;
  background: #fffdf3;
}
.np-input:focus { outline: none; border-color: var(--brand); background: #fff; }
.np-bar { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; }
.np-bar .np-st { color: #8a97a6; font-size: 12px; }
.np-bar input {
  height: 30px; width: 180px; border: 1px solid #d9e2ec; border-radius: 4px;
  padding: 0 10px; font-size: 12.5px;
}
.np-list { margin-top: 4px; }
.np-item { border-bottom: 1px dashed #e8eef5; padding: 10px 4px; }
.np-item:last-child { border-bottom: none; }
.np-item.pinned { background: #fffbe8; border-radius: 8px; padding: 10px 10px; }
.np-item .np-c {
  white-space: pre-wrap; word-break: break-word; cursor: pointer;
  font-size: 14px; line-height: 1.7; color: #2b3742;
}
.np-item .np-c:hover { color: var(--brand); }
.np-item .np-meta {
  margin-top: 6px; color: #a5b1bf; font-size: 12px;
  display: flex; gap: 14px; align-items: center;
}
.np-item .np-meta .op { font-size: 12px; }

table.grid a.op.danger { color: #cf2e2e; }

/* 空态 / 提示 */
.empty { text-align: center; color: #98a4b3; padding: 40px 0; }
.toast {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
  background: #1f2d3d; color: #fff; padding: 8px 18px; border-radius: 6px;
  font-size: 13px; z-index: 200; box-shadow: 0 4px 18px rgba(0,0,0,.18);
}
.toast.err { background: #d9463e; }
.toast.ok { background: #21a35d; }
.toast.warn { background: #c67b12; }

/* 弹窗 */
.mask {
  position: fixed; inset: 0; background: rgba(20, 30, 45, .35);
  display: flex; align-items: center; justify-content: center; z-index: 150;
}
.dialog {
  width: 640px; max-height: 94vh; overflow: auto; background: #fff;
  border-radius: 8px; box-shadow: 0 10px 44px rgba(20,30,45,.22);
}
.dialog header {
  padding: 14px 20px; border-bottom: 1px solid #e8eef5;
  font-weight: 700; color: #1f2d3d; font-size: 14px;
  display: flex; justify-content: space-between; align-items: center;
}
.dialog header .x { cursor: pointer; color: #98a4b3; font-size: 18px; line-height: 1; }
.dialog .d-body { padding: 18px 24px; }
.dialog footer {
  padding: 12px 20px; border-top: 1px solid #e8eef5;
  display: flex; justify-content: flex-end; gap: 10px;
  position: sticky; bottom: 0; background: #fff;
}
/* 宽弹窗（录入界面）：字段排三列、明细区更高，批量录入不用来回滚 */
.dialog.wide .form-grid { grid-template-columns: repeat(3, 1fr); }
.dialog.wide .form-grid .wide { grid-column: 1 / -1; }
.dialog.wide .form-grid .span2 { grid-column: span 2; }
.dialog .table-wrap { max-height: 48vh; }
@media (max-width: 1250px) {
  .dialog.wide .form-grid { grid-template-columns: 1fr 1fr; }
  .dialog.wide .form-grid .span2 { grid-column: 1 / -1; }
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.form-grid .wide { grid-column: 1 / -1; }
/* 分组小标题（选项类 / 手工类） */
.form-grid .fld-group {
  grid-column: 1 / -1; font-size: 12.5px; font-weight: 700; color: var(--brand);
  border-left: 3px solid var(--brand); padding-left: 8px; margin-top: 4px;
}
.form-grid label { display: block; margin-bottom: 5px; color: #5a6675; font-size: 12.5px; }
.form-grid label .req { color: #d9463e; margin-left: 3px; }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%; border: 1px solid #d9e2ec; border-radius: 4px;
  padding: 9px 12px; font-size: 13.5px; outline: none; font-family: inherit;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 2px rgba(43,124,255,.1);
}
.form-grid textarea { min-height: 92px; resize: vertical; }
/* 只读格（灰底，自动算） */
.form-grid input.ro, .form-grid .ro {
  background: #f2f4f7 !important; color: #8a97a6; cursor: not-allowed;
}
/* v0.6.69：系统带出、不让手改的格 → 红字（经营主体等，一眼看出「这是带出来的，改不了」） */
.form-grid input.ro-red, .form-grid .ro-red,
.d-body input.ro-red, .d-body select.ro-red {
  background: #fdeceb !important; color: #c0392b !important;
  font-weight: 700; cursor: not-allowed;
}
.d-body table.grid input.ro-red { background: #fdeceb !important; color: #c0392b !important; }
/* 手改过但和合同里带出来的不一致 → 橙色提示（可改，但提醒你核对） */
.form-grid input.ovr, .d-body input.ovr { color: #c07f16 !important; font-weight: 600; }
/* 人工改过的值 → 异色提示（橙） */
.form-grid input.edited, table.grid td.edited { color: #c07f16; font-weight: 600; }
/* 损耗列弱化（灰） */
table.grid td.loss, table.grid .num-in { }
table.grid td.loss { color: #8a97a6; }
.tip { display: block; color: #a5b0bd; font-size: 12px; margin-top: 4px; }
/* 粮源主体 / 销售合同主体（v0.6.5）：两个主体并排摆出来，不一致时整块标黄 = 倒账流水 */
.ent-box {
  grid-column: 1 / -1; padding: 10px 12px; border-radius: 8px;
  border: 1px solid #dfe6ee; background: #fafcfe;
}
.ent-box.ent-diff { border-color: #f0c36d; background: #fffaf0; }
.ent-box .ent-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.ent-box .ent-row b { font-size: 14px; color: var(--brand); }
.ent-box.ent-diff .ent-row b { color: #c07f16; }
.ent-box .ent-mid { color: #cfd8e3; }
.ent-box .ent-none { color: #a5b0bd; }
/* 弹窗内明细表（如采购直发车次）的小输入框 */
.d-body table.grid input {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid #d7dee7; border-radius: 4px; font-size: 13px;
}
.d-body table.grid th, .d-body table.grid td { padding: 9px 10px; }
.d-body table.grid input:focus { border-color: var(--brand); outline: none; }
.d-body table.grid input.ro { background: #f2f4f7; color: #8a97a6; }
/* 物流费用：车次明细面板（逐车填实付运费） */
.rc-cars-wrap .table-wrap { max-height: 46vh; overflow: auto; }
.d-body table.grid.rc-cars th, .d-body table.grid.rc-cars td { padding: 6px 8px; }
.d-body table.grid.rc-cars input { padding: 7px 9px; font-size: 13px; }
.d-body table.grid.rc-cars { font-size: 13px; }
.rc-cars-wrap > .tip { line-height: 1.6; }
/* v0.6.61：一采多销 —— 车次面板顶部的「对应销售合同」筛选条 + 每车的销售合同归属列 */
.rc-cars-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0 8px; margin-bottom: 2px; border-bottom: 1px dashed #e3e8ef; }
.rc-cars-bar label { font-size: 12px; color: #63707f; white-space: nowrap; }
.rc-cars-bar select { min-width: 380px; max-width: 100%; padding: 6px 8px;
  border: 1px solid #d7dee7; border-radius: 6px; font-size: 13px; background: #fff; }
.rc-cars-bar .tip { margin-top: 0; }
.d-body table.grid.rc-cars td.rc-c-sc { font-size: 12px; color: #5b6876; max-width: 190px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==================================================================
   概览 · 总览看板
   ================================================================== */
.kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin-top: 4px;
}
.kpi-card {
  background: linear-gradient(180deg, #f7faff 0%, #fff 100%);
  border: 1px solid #e3ecf7; border-radius: 8px; padding: 14px 16px;
}
.kpi-label { color: #7b8899; font-size: 12px; margin-bottom: 8px; }
.kpi-value { font-size: 22px; font-weight: 700; color: #1f2d3d; line-height: 1.2; }
.kpi-value .kpi-unit { font-size: 13px; font-weight: 500; color: #7b8899; margin-left: 2px; }
.kpi-sub { color: #96a2b2; font-size: 12px; margin-top: 6px; }

/* 客户简称分组 */
.short-block { margin-bottom: 16px; }
.short-block:last-child { margin-bottom: 0; }
.short-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.short-name { font-size: 14px; font-weight: 700; color: #1f2d3d; }
.short-cnt {
  font-size: 12px; color: var(--brand); background: #e8f1ff;
  padding: 1px 8px; border-radius: 10px;
}

/* 执行率进度条 */
.rate-wrap {
  position: relative; height: 14px; background: #eef2f7;
  border-radius: 7px; overflow: hidden; min-width: 100px;
}
.rate-bar { height: 100%; border-radius: 7px; transition: width .3s; }
.rate-txt {
  position: absolute; inset: 0; text-align: center; line-height: 14px;
  font-size: 10px; color: #4a5666; font-weight: 600;
}

/* 履约时间着色 */
.due-over { color: #e64340; font-weight: 600; }
.due-warn { color: #c07f16; font-weight: 600; }
.due-ok { color: #21a35d; }

/* 应收应付双卡 */
.fin-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .fin-row { grid-template-columns: 1fr; } }
.fin-card { border: 1px solid #e3ecf7; border-radius: 8px; padding: 12px 16px; }
.fin-card.recv { background: linear-gradient(180deg, #f4fbf7 0%, #fff 100%); border-color: #d8f0e3; }
.fin-card.pay { background: linear-gradient(180deg, #fef7f6 0%, #fff 100%); border-color: #f7dedb; }
.fin-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.fin-card.recv .fin-title { color: #21a35d; }
.fin-card.pay .fin-title { color: #e64340; }
.fin-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0; border-bottom: 1px dashed #eef2f7;
}
.fin-line:last-child { border-bottom: 0; }
.fin-line span { color: #7b8899; }
.fin-line b { font-size: 15px; color: #1f2d3d; }
.fin-line.clickable { cursor: pointer; border-radius: 4px; padding-left: 6px; padding-right: 2px; }
.fin-line.clickable:hover { background: #f2f7ff; }
.fin-line.clickable:hover b { color: var(--brand); }
/* 应收应付表（实际台账口径：应计 / 已发生 / 差额） */
.fin-card { padding: 10px 12px; }
.fin-table { font-size: 13px; }
.fin-table th { white-space: nowrap; font-weight: 600; }
.fin-table td, .fin-table th { padding: 6px 8px; }
/* 车次批量编辑（v0.6.20）：待补格淡黄、改动行浅蓝、输入框铺满单元格 */
.bx-tb td { padding: 3px 4px; }
.bx-tb .bx-in { width: 100%; box-sizing: border-box; border: 1px solid transparent;
  background: transparent; padding: 4px 6px; border-radius: 4px; font: inherit; color: inherit; }
.bx-tb .bx-in:hover { border-color: #d0d7e2; background: #fff; }
.bx-tb .bx-in:focus { border-color: var(--brand, #3366ff); background: #fff;
  outline: none; box-shadow: 0 0 0 2px rgba(51, 102, 255, .12); }
.bx-tb .bx-hl:placeholder-shown { background: #fff8e1; }
.bx-tb tr.bx-dirty { background: #eef5ff; }
.bx-tb tr.bx-dirty .bx-hl:placeholder-shown { background: #fff3cd; }
.bx-tb .ro-cell { color: #8a94a6; }
.bx-head { background: #f7f9fc; padding: 10px 12px; border-radius: 6px; margin-bottom: 8px; }
.fin-tr.clickable { cursor: pointer; }
.fin-tr.clickable:hover { background: #f2f7ff; }
.fin-got { color: #21a35d; }
.fin-left { color: #e64340; }
.fin-over { color: #d48806; font-size: 12px; }
.fin-arrow { color: #b9c4d1; font-style: normal; margin-left: 6px; }
.fin-note {
  margin-top: 14px; padding: 10px 12px; background: #f7f9fc;
  border-left: 3px solid var(--brand); border-radius: 4px;
  color: #7b8899; font-size: 12px; line-height: 1.7;
}

/* ==================================================================
   响应式：手机端 / 平板 / 窄屏（左侧菜单收为抽屉，表格可横向滚动）
   ================================================================== */
.tb-menu {
  display: none; cursor: pointer; color: #45505c; font-size: 18px;
  margin-right: 4px; padding: 2px 6px; border-radius: 5px;
}
.tb-menu:hover { background: #f2f6fc; color: var(--brand); }
.side-mask { display: none; }

@media (max-width: 820px) {
  .tb-menu { display: inline-flex; }
  .tb-env { display: none; }
  .tb-right { gap: 10px; }

  .side {
    position: fixed; top: 48px; bottom: 0; left: 0; z-index: 130;
    width: 240px; transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 2px 0 14px rgba(20, 30, 45, .14);
  }
  .body.nav-open .side { transform: translateX(0); }
  .body.nav-open .side-mask {
    display: block; position: fixed; top: 48px; left: 0; right: 0; bottom: 0;
    z-index: 120; background: rgba(20, 30, 45, .32);
  }

  .main { padding: 10px; }
  .page-card { padding: 12px; }
  .page-head { flex-wrap: wrap; gap: 8px; }
  .form-grid { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .fin-row { grid-template-columns: 1fr; }
  .dialog { width: calc(100vw - 16px) !important; max-height: 94vh; }
  .search-bar { flex-wrap: wrap; }
  .not-need { display: none; }
}
@media (max-width: 480px) {
  .kpi-row { grid-template-columns: 1fr; }
  .tb-title { font-size: 15px; }
  .tb-user i { display: none; }
}
/* 窄屏下表格不挤压 → 横向滚动 */
@media (max-width: 820px) {
  table.grid th, table.grid td { white-space: nowrap; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
}

/* 汇总分析合计行 */
table.grid tfoot .ana-total td {
  font-weight: 700; color: #1f2d3d; background: #f7faff;
  border-top: 1px solid #e3ecf7;
}
/* 通用合计行（库存总览等） */
table.grid tfoot .total-row td {
  font-weight: 700; color: #1f2d3d; background: #f7faff;
  border-top: 1px solid #e3ecf7;
}

/* 财务台账（运费对账 / 四单匹配 / 期末结存 / 各账户收支余额）：
   差额 >0 = 还欠/还差（橙），<0 = 付多了/超开了（红），0 = 灰 */
table.grid td.fin-due { color: #c07f16; font-weight: 600; }
table.grid td.fin-gap { color: #d9463e; font-weight: 600; }
table.grid td.fin-zero { color: #9aa7b4; }

/* ==================================================================
   v0.5.0：提醒中心 / 经营一页纸 / 打印附件 / 录入即时校验
   ================================================================== */

/* 菜单上的待办红点（提醒中心） */
.nav-item .nav-badge {
  margin-left: 6px; padding: 0 6px; height: 16px; line-height: 16px;
  border-radius: 9px; background: #d9463e; color: #fff;
  font-size: 11px; font-weight: 700;
}

/* 合同列表的进度格：进度条下面跟一行「还差 X 吨」 */
table.grid td.prog-cell { min-width: 150px; }
table.grid td.prog-cell .rate-wrap { min-width: 110px; }

/* 操作列：多个链接排一行不换行太挤，允许换行 */
table.grid td.ops { white-space: nowrap; }
table.grid td.ops .op { margin-right: 8px; }

/* 勾选列（v0.6.28 批量删除）：窄列 + 居中，表头全选框与行内框对齐 */
table.grid th.pick, table.grid td.pick {
  width: 28px; min-width: 28px; text-align: center; padding-left: 6px; padding-right: 0;
}
table.grid th.pick input, table.grid td.pick input { cursor: pointer; margin: 0; vertical-align: middle; }
table.grid tr.row-pick { background: #eef5ff; }
/* v0.6.38 表头可点排序（销售合同按客户排） */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: #e4edff; }
th.sortable .sort-ico { margin-left: 4px; color: var(--brand, #1b5fd9); font-weight: 400; }
/* v0.6.31 分段切换（发运 / 出库：采购直发 ⇄ 库存出库） */
.seg {
  display: inline-flex; gap: 4px; background: #eef2f8; padding: 3px;
  border-radius: 8px; margin: 0 0 12px;
}
.seg a {
  padding: 6px 16px; border-radius: 6px; cursor: pointer; font-size: 13px;
  color: #4a5568; user-select: none;
}
.seg a:hover { color: var(--brand); }
.seg a.on { background: #fff; color: var(--brand); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
/* v0.6.30 退货：行淡红底 + 「退货」红标 + 操作列红字（车次仍留在合同下） */
table.grid tr.row-ret td { background: #fff6f5; }
.tag.ret { background: #fdecea; color: #b42318; border: 1px solid #f5c2bd; margin-left: 4px; }
.ops .op.ret-on { color: #b42318; }
.grp-head .ret-txt { color: #b42318; }
/* v0.6.42：接收合计是合同上录的整批总数（不是逐车加出来的）时，标一下来源 */
.grp-head .recv-batch { color: #0b6bcb; margin-left: 2px; }
.btn.danger { color: #b42318; border-color: #f0b8b2; }
.btn.danger:hover { background: #fdf1f0; }

/* 录入即时校验提示条：不是报错、是提醒，黄底 */
.live-warn {
  margin-top: 8px; padding: 8px 10px; border-radius: 6px;
  background: #fffaf0; border: 1px solid #f3dcb3;
  font-size: 12px; line-height: 1.9; color: #8a5a10;
}
.live-warn:empty, .live-warn[style*="display: none"] { display: none; }

/* 操作日志里的「改前 → 改后」 */
.log-diff {
  margin-top: 4px; padding: 6px 8px; border-left: 3px solid #cfd9e6;
  background: #f8fafc; border-radius: 4px; font-size: 12px; line-height: 1.8;
}
.log-diff s { color: #9aa7b4; margin-right: 6px; }
.log-diff b { color: #1f2d3d; }
.log-diff .kpi-sub { display: inline-block; min-width: 84px; }

/* 打印页（新窗口里的 A4）在屏幕上就别加阴影干扰 */
@media print {
  .nav-badge { display: none; }
}

/* ==================================================================
   首页 · 工作台（登录后落地页，v0.5.2）
   ================================================================== */
.home-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
  background: #fff; border: 1px solid #e6ecf4; border-radius: 8px; padding: 16px 18px;
}
.home-hi { font-size: 17px; font-weight: 700; color: #1c2b3a; }
.home-role {
  margin-left: 8px; padding: 1px 8px; border-radius: 9px;
  background: var(--brand-weak); color: var(--brand-deep); font-size: 12px; font-weight: 600;
}
.home-date { margin-top: 5px; color: #8a97a6; font-size: 12.5px; }
.home-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.home-quick .hq {
  padding: 7px 12px; border: 1px solid #d8e4f3; border-radius: 6px;
  background: #f7fbff; color: var(--brand-deep); font-size: 13px; cursor: pointer;
}
.home-quick .hq:hover { background: var(--brand-weak); border-color: #b9d4f5; }

.home-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-card {
  display: block; background: #fff; border: 1px solid #e6ecf4; border-radius: 8px;
  padding: 14px 16px; cursor: pointer; border-left: 4px solid #cfd9e6;
}
.home-card:hover { background: #fafcff; border-color: #c9dcf5; }
.home-card.tone-red { border-left-color: #d9463e; }
.home-card.tone-blue { border-left-color: var(--brand); }
.home-card.tone-amber { border-left-color: #e0a13b; }
.hc-top { display: flex; align-items: center; gap: 7px; color: #5a6675; font-size: 13px; }
.hc-ico { font-size: 15px; }
.hc-num { margin: 6px 0 3px; font-size: 27px; font-weight: 700; color: #1c2b3a; line-height: 1.1; }
.hc-sub { color: #8a97a6; font-size: 12.5px; }

.home-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  background: #fff; border: 1px solid #e6ecf4; border-radius: 8px;
  padding: 14px 16px; margin: 12px 0;
}
.hk-l { display: block; color: #8a97a6; font-size: 12.5px; margin-bottom: 5px; }
.hk b { font-size: 19px; font-weight: 700; color: #1c2b3a; }
.hk-t { display: block; margin-top: 3px; color: #8a97a6; font-size: 12px; }

.home-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hc-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 700; color: #1c2b3a; margin-bottom: 8px;
}
.hc-head .op { font-weight: 400; font-size: 12.5px; }
.home-li {
  display: flex; align-items: center; gap: 9px; padding: 8px 6px;
  border-top: 1px solid #f1f4f9; cursor: pointer; font-size: 13px;
}
.home-li:hover { background: #f8fbff; }
.home-li .hl-main { color: #2b3742; font-weight: 600; }
.home-li .hl-sub { color: #8a97a6; font-size: 12.5px; }
.home-li .hl-right { margin-left: auto; color: #8a97a6; font-size: 12.5px; }

@media (max-width: 1100px) {
  .home-cards { grid-template-columns: 1fr 1fr; }
  .home-kpis { grid-template-columns: 1fr 1fr; }
  .home-cols { grid-template-columns: 1fr; }
}

/* 待办 / 审批页：顶部口径筛选行 + KPI 卡左侧色条 */
.filter-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 12px; color: #5a6675; font-size: 12.5px;
}
.filter-row select {
  padding: 5px 8px; border: 1px solid #d8e0ea; border-radius: 6px; font-size: 13px;
}
.hk { padding-left: 10px; border-left: 3px solid #e3eaf3; }
.hk.tone-red { border-left-color: #d9463e; }
.hk.tone-amber { border-left-color: #e0a13b; }
.hk.tone-blue { border-left-color: var(--brand); }

/* ============ v0.5.3：分页条 / 数字列排版 / 键盘提示 ============ */
/* 列表数字列：右对齐 + 等宽数字，千位对齐一眼可比 */
table.grid td.num, table.grid th.num {
  text-align: right; font-variant-numeric: tabular-nums; letter-spacing: .2px;
}
/* 分页条：贴在表格下方，弱化样式不抢戏 */
.pager {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 2px 2px; font-size: 12.5px;
}
.pager .pg {
  display: inline-block; min-width: 28px; text-align: center;
  padding: 3px 9px; border: 1px solid #d8e0ea; border-radius: 5px;
  color: #45505c; cursor: pointer; background: #fff; user-select: none;
}
.pager .pg:hover { color: var(--brand); border-color: var(--brand); text-decoration: none; }
.pager .pg.cur { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.pager .pg.dis { color: #b9c2cc; border-color: #e6ecf4; cursor: default; background: #fafbfd; }
.pager .pg-dots { color: #b9c2cc; padding: 0 2px; }
.pager .kpi-sub { margin-right: 6px; }
/* 弹窗底部加一行键盘提示（内部勤录单快） */
.dlg-kbd { margin-top: 6px; color: var(--sub); font-size: 11.5px; }
.dlg-kbd kbd {
  display: inline-block; padding: 0 5px; border: 1px solid #d0d8e1;
  border-bottom-width: 2px; border-radius: 4px; background: #fafbfd;
  font-family: inherit; font-size: 11px; color: #45505c;
}
/* 列表按合同号分组的组头（可折叠，带序号 + 该合同车数） */
tr.grp-head td {
  background: var(--brand-weak, #eef4ff); font-weight: 600; cursor: pointer;
  user-select: none; border-top: 2px solid #d9e4f5;
}
tr.grp-head .grp-arrow { display: inline-block; width: 16px; color: var(--brand-deep, #1b5fd9); }
tr.grp-head .grp-no { color: var(--brand-deep, #1b5fd9); margin-right: 6px; }
tr.grp-head .link { text-decoration: underline dotted; }
tr.grp-head .kpi-sub { margin-left: 12px; font-weight: 400; }
tr.grp-head:hover td { background: #e4edff; }
/* v0.6.29 组头全选框：跟行内框对齐，别把序号挤歪 */
tr.grp-head input.sh-gck { cursor: pointer; margin: 0 6px 0 0; vertical-align: middle; }
tr.grp-head .op.danger { color: #b42318; margin-left: 10px; }
/* v0.6.131：发运/出库一级「销售客户简称」组头（下面挂各合同组） */
tr.cust-head td {
  background: #dde8fb; font-weight: 700; cursor: pointer; user-select: none;
  border-top: 2px solid #b9cdee; color: #17417f;
}
tr.cust-head .grp-arrow { display: inline-block; width: 16px; color: var(--brand-deep, #1b5fd9); }
tr.cust-head .kpi-sub { margin-left: 12px; font-weight: 400; }
tr.cust-head .lg-sum { color: #4a6b96; font-size: 12.5px; margin-left: 14px; font-weight: 600; }
tr.cust-head .lg-sum.green { color: #17834a; }
tr.cust-head .lg-sum.orange { color: #a86a0c; }
tr.cust-head:hover td { background: #d0def9; }
/* 二级合同组头：缩进一档、底色浅一档，一眼看出挂在哪个客户下 */
tr.grp-head.lv2 td { padding-left: 30px; background: #f1f6ff; }
tr.grp-head.lv2:hover td { background: #e6efff; }
/* 合同/批次「明细与汇总」弹窗：每块明细独立成卡，合计行加底色（防数据压叠） */
.cd-sec {
  margin-top: 14px; border: 1px solid #e6ecf4; border-radius: 10px;
  padding: 10px 12px; background: #fff;
}
.cd-title { font-weight: 700; font-size: 13px; color: #2f3b47; margin-bottom: 8px; }
tr.sum-row td {
  background: #f4f7fb; font-weight: 700; border-top: 2px solid #d9e4f5;
  font-variant-numeric: tabular-nums;
}

/* v0.6.10：「输入框 + 候选列表」的兜底选择器（360/IE 内核不支持 datalist 时用） */
.pick-wrap { display: flex; gap: 4px; align-items: stretch; }
.pick-wrap > input { flex: 1 1 auto; min-width: 0; }
.pick-btn {
  flex: 0 0 30px; width: 30px; border: 1px solid #ccd3dc; background: #f5f7fa;
  border-radius: 6px; cursor: pointer; color: #56636f; font-size: 13px; line-height: 1;
  padding: 0;
}
.pick-btn:hover { background: #eaf1fb; border-color: var(--brand); color: var(--brand); }
.pick-panel {
  position: fixed; z-index: 4000; background: #fff; border: 1px solid #d5dbe3;
  border-radius: 8px; box-shadow: 0 10px 28px rgba(15, 30, 50, .18);
  padding: 8px; max-height: 320px; display: flex; flex-direction: column; gap: 6px;
}
.pick-panel .pick-search {
  width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #ccd3dc;
  border-radius: 6px; font-size: 13px;
}
.pick-panel .pick-list { overflow: auto; flex: 1 1 auto; }
.pick-panel .pick-item {
  padding: 6px 8px; border-radius: 6px; cursor: pointer; display: flex; gap: 8px;
  align-items: baseline; font-size: 13px;
}
.pick-panel .pick-item:hover { background: #eef4ff; }
.pick-panel .pick-item b { color: var(--brand); font-weight: 600; white-space: nowrap; }
.pick-panel .pick-item span { color: #6a7683; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-panel .pick-empty { padding: 10px; color: #8b96a3; font-size: 12.5px; text-align: center; }

/* v0.6.12：菜单底部版本号（同事排查「功能怎么没有」第一眼就看这里） */
.app-ver {
  margin: 16px 16px 0; padding-top: 12px; border-top: 1px dashed #e3e8ef;
  color: #9aa5b1; font-size: 12px; letter-spacing: .3px;
}
.app-ver b { color: #6a7683; font-weight: 600; }

/* v0.6.12：页面版本比服务器旧时的提醒条（点一下刷新） */
.ver-tip {
  position: fixed; left: 50%; transform: translateX(-50%); top: 12px; z-index: 5000;
  background: #fff8e6; border: 1px solid #f0d48a; color: #7a5b13;
  padding: 8px 14px; border-radius: 8px; font-size: 13px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(120, 90, 20, .16);
}
.ver-tip b { color: #a5701a; }
.ver-tip a { color: var(--brand); font-weight: 700; margin-left: 6px; text-decoration: underline; }

/* ---------------- v0.6.43：列表页「表头固定 + 横条常驻」 ----------------
   用户反馈：滚轮往下翻，表头（含排序箭头）跟着滚走了，看不到现在排的是哪列；
   表格很宽时，横向滚动条跑到整张表的最底下，得先翻到最后一页才拉得到。
   做法：主内容区改成竖向 flex，列表页那张卡片撑满可视高度；卡片里的 .table-wrap
   变成真正的滚动容器（自己的高度 + overflow:auto）。这样滚轮滚的是表格，
   thead 的 sticky 就生效了；横条也贴在卡片底部，一直在眼前。 */
.main { display: flex; flex-direction: column; }
.main > .page-card { flex: 0 0 auto; min-width: 0; }
.main > .page-card:only-child {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
.main > .page-card:only-child > .table-wrap {
  flex: 1 1 auto; min-height: 160px;
  overflow: auto; overscroll-behavior: contain;
}
/* 表头压在行上面（滚动时不被车次行盖住），加一条细阴影交代“这是固定的” */
.main > .page-card:only-child > .table-wrap > table.grid > thead > tr > th {
  z-index: 3; box-shadow: inset 0 -1px 0 #e2e9f2;
}

/* ===== v0.6.72：粮款收付列表页 =====
   ① 顶部「关联规则 / 三方资金」两块说明折成一行（原来摊开占掉一大截，表格只剩十几行）
   ② 台账长文本列限宽 + 省略号（鼠标悬停看全）、隔行浅底，一行一行分得清 */
.rc-tips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 6px; }
.rc-tips-box { flex: 1 1 380px; min-width: 0; }
.rc-tips-box > summary {
  cursor: pointer; font-size: 12.5px; color: #5b6b7c; padding: 3px 0; user-select: none;
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.rc-tips-box > summary::-webkit-details-marker { display: none; }
.rc-tips-box > summary::before { content: '▸'; color: var(--brand); font-size: 11px; }
.rc-tips-box[open] > summary::before { content: '▾'; }
.rc-tips-box > summary:hover { color: var(--brand); }
.rc-tips-body {
  margin-top: 4px; padding: 7px 10px; background: #f7fbff;
  border: 1px dashed #d7e6f5; border-radius: 6px;
  display: flex; flex-direction: column; gap: 5px; font-size: 12.5px;
}
.rc-tips-body .kpi-sub { display: block; margin-top: 2px; line-height: 1.6; }

table.grid td.cut, table.grid th.cut {
  max-width: 210px; overflow: hidden; text-overflow: ellipsis;
}
table.rc-grid tbody tr:nth-child(even) td { background: #fafcfe; }
table.rc-grid tbody tr:hover td { background: #eef7ff !important; }
table.rc-grid td.ops { white-space: nowrap; }
/* 列多（15 列）→ 压紧字号和留白，别让右边「状态 / 录入人 / 操作」被挤到看不见 */
table.rc-grid th, table.rc-grid td { padding: 6px 7px; font-size: 12px; }
table.rc-grid td.cut, table.rc-grid th.cut { max-width: 150px; }
table.rc-grid td.ops a.op { margin-right: 6px; }

/* v0.6.72：列多时把「操作」列钉在右边 —— 不用横向滚也能点编辑 / 删除 */
table.rc-grid th:last-child, table.rc-grid td.ops {
  position: sticky; right: 0; background: #fff;
  box-shadow: -8px 0 8px -8px rgba(20, 40, 70, .22);
}
table.rc-grid thead th:last-child { background: #f5f8fc; z-index: 4; }
table.rc-grid tbody tr:nth-child(even) td.ops { background: #fafcfe; }
table.rc-grid tbody tr:hover td.ops { background: #eef7ff !important; }
/* 粮款收付 15 列：往来单位 / 合同批次 / 票号 / 账户 / 三方编号 / 赎货吨数 / 备注 各让一点 */
table.rc-grid[data-mod="pay"] th:nth-child(4), table.rc-grid[data-mod="pay"] td:nth-child(4),
table.rc-grid[data-mod="pay"] th:nth-child(5), table.rc-grid[data-mod="pay"] td:nth-child(5),
table.rc-grid[data-mod="pay"] th:nth-child(8), table.rc-grid[data-mod="pay"] td:nth-child(8),
table.rc-grid[data-mod="pay"] th:nth-child(9), table.rc-grid[data-mod="pay"] td:nth-child(9),
table.rc-grid[data-mod="pay"] th:nth-child(10), table.rc-grid[data-mod="pay"] td:nth-child(10),
table.rc-grid[data-mod="pay"] th:nth-child(12), table.rc-grid[data-mod="pay"] td:nth-child(12) {
  overflow: hidden; text-overflow: ellipsis;
}
table.rc-grid[data-mod="pay"] td:nth-child(4) { max-width: 104px; }
table.rc-grid[data-mod="pay"] td:nth-child(5) { max-width: 138px; }
table.rc-grid[data-mod="pay"] td:nth-child(10) { max-width: 130px; }
table.rc-grid[data-mod="pay"] td:nth-child(12) { max-width: 96px; }

/* v0.6.73：「列显示」开关面板 */
.rc-cols-box {
  padding: 8px 10px; margin: 0 0 6px; background: #f7fbff;
  border: 1px dashed #d7e6f5; border-radius: 6px;
}
.rc-cols-list { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; }
.rc-cols-list label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

/* ============ v0.6.100：人员报销 ============
   一批费用 = 十几行明细 + 七八张微信截图，所以录单页要「表格能直接打字」+「截图画成墙」。
   表格里的输入框平时不要边框（像 Excel 一样满格可点），聚焦时才给个边框提示在哪一格。 */
table.grid td input.rb-cell, table.grid td select.rb-cell {
  width: 100%; box-sizing: border-box; border: 1px solid transparent; background: transparent;
  padding: 3px 5px; font-size: 12.5px; border-radius: 4px; color: #1f2d3d;
}
table.grid td input.rb-cell:hover, table.grid td select.rb-cell:hover { border-color: #dfe8f2; }
table.grid td input.rb-cell:focus, table.grid td select.rb-cell:focus {
  border-color: var(--brand); background: #fff; outline: none;
  box-shadow: 0 0 0 2px rgba(11, 107, 203, .08);
}
table.grid td input.rb-money { text-align: right; font-variant-numeric: tabular-nums; }
.rb-lock { font-size: 10.5px; color: #c07f16; margin-left: 3px; }

/* 上传区 */
.rb-drop {
  border: 2px dashed #cfdcea; border-radius: 10px; padding: 18px 14px;
  text-align: center; color: #7b8899; background: #fafcff; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.rb-drop:hover, .rb-drop.hot { border-color: var(--brand); background: #f2f8ff; color: var(--brand); }
.rb-drop kbd {
  background: #eef2f7; border: 1px solid #dbe3ec; border-bottom-width: 2px;
  border-radius: 4px; padding: 0 5px; font-size: 11px; color: #45505c;
}

/* 截图墙 */
.rb-recs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 12px; margin-top: 12px;
}
.rb-rec {
  border: 1px solid #e6edf5; border-radius: 8px; overflow: hidden; background: #fff;
  display: flex; flex-direction: column;
}
.rb-rec-img {
  height: 148px; background: #f4f7fb; display: flex; align-items: center;
  justify-content: center; overflow: hidden; cursor: zoom-in;
}
.rb-rec-img img { max-width: 100%; max-height: 148px; display: block; }
.rb-rec-img:hover { background: #eaf2fb; }
.rb-rec-body { padding: 8px 10px 10px; font-size: 12.5px; display: flex; flex-direction: column; gap: 6px; }
.rb-rec-name { color: #7b8899; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-rec-amt {
  flex: 1; min-width: 0; border: 1px solid #d9e2ec; border-radius: 4px;
  padding: 4px 6px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums;
}
.rb-rec-amt:focus { border-color: var(--brand); outline: none; }
.rb-rec-amt.bad { border-color: #e9a7a0; background: #fff7f6; }
.rb-rec-cands { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: #7b8899; }
.rb-chip {
  background: #eef4ff; color: #0b6bcb; border-radius: 10px; padding: 1px 8px;
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.rb-chip:hover { background: #dce9ff; }
.rb-rec-st { font-size: 11.5px; color: #c07f16; line-height: 1.5; min-height: 0; }
.rb-rec-st:empty { display: none; }

/* 底部合计条：明细 / 截图 / 差额 三个数一眼看全 */
.rb-totalbar {
  display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
  margin-top: 14px; padding: 11px 16px; border-radius: 8px;
  background: #f7f9fc; border: 1px solid #e8eef5; font-size: 13px; color: #45505c;
}
.rb-totalbar b { font-size: 17px; color: #1f2d3d; margin: 0 2px; }
.rb-totalbar b.bad { color: #d9463e; }

/* v0.6.103：批量编辑表的「原发/接收」被压窄，49.42 只显示出 49.4，损耗看着像凭空多出来
   （用户 2026-10-21：容易造成录入错误）。表给最小宽度，弹窗装不下就横向滚动，绝不压缩数字列；
   数字统一右对齐 + 等宽数字，位数一眼可比。 */
.bx-tb { min-width: 1433px; }
.bx-tb .num-in { text-align: right; font-variant-numeric: tabular-nums; }

/* v0.6.105：批量编辑表的列宽还会被浏览器“自动分配”压掉（车/箱/船号被截）。
   改成 table-layout: fixed：列宽就按表头写的算，一格都不会被挤，
   实在装不下由 .table-wrap 横向滚动。 */
.bx-tb { table-layout: fixed; min-width: 1493px; }
.bx-tb td, .bx-tb th { overflow: hidden; }
/* v0.6.106：日期控件自带日历图标，左右内边距再收一点，160px 的列能完整显示 2026/10/19 */
.bx-tb input[type="date"] { padding: 4px 2px; }

/* v0.6.107：左侧目录三级各一种颜色（用户 2026-10-21 要求）——
   一级（分区标题）深藏蓝：压得住，当作大分区；
   二级（模块）钢蓝：比一级亮一档，一眼分辨"这是某个模块"；
   三级（具体页面）灰蓝：最轻，长时间盯着不累，也能看出还在第二级下面。
   选中的那一项统一用品牌深蓝 + 浅底 + 左竖条：层级颜色让位给"我现在在哪一页"。 */
.nav-top > .nav-group { color: #123a63; background: #f2f7fd; }
.nav-top > .nav-group:hover { color: #0b5cb0; background: #eaf3fd; }
.nav-top > .nav-group .caret { color: #7f9dbe; }
.nav-item.lvl2 { color: #1a6cb4; }
.nav-item.lvl2 .caret { color: #8fb2d6; }
.nav-item.lvl2:hover { color: #0b5cb0; }
.nav-item.lvl3 { color: #6f7d8b; }
.nav-item.lvl3:hover { color: #0b5cb0; }
.nav-item.lvl2.active, .nav-item.lvl3.active { color: var(--brand-deep); }

/* v0.6.108：三级目录拉开区分度（用户 2026-10-21：「颜色区分再大一点」）——
   上一版是同一套蓝的深浅，扫起来还是糊。这次换成三个**不同色相**：
     一级 深海军蓝 #0f3c69 —— 分区，压得住
     二级 青绿     #0b7f6d —— 模块，和蓝系明显分开
     三级 紫灰     #6b5ca5 —— 具体页面，和上面两个都不会混
   选中项仍是品牌蓝 + 浅底 + 左竖条，一眼能找到"当前页"。 */
.nav-top > .nav-group { color: #0f3c69; background: #e8f1fb; }
.nav-top > .nav-group:hover { color: #0b60b8; background: #dfecfb; }
.nav-top > .nav-group .caret { color: #6f93ba; }
.nav-item.lvl2 { color: #0b7f6d; }
.nav-item.lvl2 .caret { color: #63b3a6; }
.nav-item.lvl2:hover { color: #096a5b; background: #eaf7f4; }
.nav-item.lvl3 { color: #6b5ca5; }
.nav-item.lvl3:hover { color: #574a8c; background: #f1eefb; }
.nav-item.lvl2.active, .nav-item.lvl3.active { color: var(--brand-deep); background: var(--brand-weak); }

/* v0.6.109：三级目录改黑色（用户 2026-10-21）—— 叶子页面用正黑，最清楚；
   悬停给淡灰底，当前页仍是品牌蓝 + 浅底 + 左竖条。 */
.nav-item.lvl3 { color: #111111; }
.nav-item.lvl3:hover { color: #000000; background: #f2f4f7; }

/* ==================================================================
   v0.6.115：手机端深度适配（用户 2026-10-22：手机登录后界面不适配）
   原则：① 输入字号 ≥16px（否则 iOS 聚焦时整页自动放大）
        ② 触控目标加大（按钮 / 菜单 / 表格里的操作链接）
        ③ 宽表格横向滑动，不挤压列
        ④ 弹窗贴边全宽、底部按钮够按
   只收窄屏（≤820px / ≤480px），电脑端完全不受影响。
   ================================================================== */
@media (max-width: 820px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  button, .op, .nav-item, a { -webkit-tap-highlight-color: transparent; }

  /* iOS Safari：输入框字号 <16px 聚焦时页面会自动放大且缩不回来 → 全部提到 16px */
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
  select, textarea { font-size: 16px !important; }

  /* 整体高度用 dvh：避开手机浏览器地址栏伸缩导致的底部被截 */
  .app { height: 100vh; height: 100dvh; }
  .topbar { padding: 0 12px; position: sticky; top: 0; z-index: 140; }
  .tb-left { gap: 8px; }

  .main { padding: 8px; }
  .page-card { padding: 10px; border-radius: 8px; }
  .page-head .page-title { font-size: 16.5px; }

  /* 触控目标加大 */
  .btn { padding: 9px 16px; font-size: 14px; }
  .nav-item { padding: 12px 16px; font-size: 14.5px; }
  .nav-item.lvl2 { padding-left: 24px; }
  .nav-item.lvl3 { padding-left: 36px; }
  .search-bar input, .search-bar select { padding: 8px 10px; }
  .search-bar .btn { padding: 8px 14px; }
  table.grid a.op { padding: 4px 3px; }

  /* 搜索栏字段自动换行、占满整行的一半，不再挤成一团 */
  .search-bar { gap: 8px 10px; }
  .search-bar .fld { flex: 1 1 46%; min-width: 0; }
  .search-bar .fld > input, .search-bar .fld > select { flex: 1; min-width: 0; }

  /* 宽表格横向滑动顺滑 */
  .table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

  /* 弹窗：贴边全宽；底部按钮加大；键盘快捷键提示（Ctrl+Enter 之类）在手机上没意义，藏掉 */
  .dialog { width: calc(100vw - 14px) !important; max-height: 94vh; max-height: 94dvh; }
  .dialog .d-body { padding: 14px; }
  .dialog header { padding: 12px 14px; position: sticky; top: 0; background: #fff; z-index: 2; }
  .dialog footer { padding: 10px 12px; }
  .dialog footer .btn { padding: 10px 18px; font-size: 14.5px; }
  .dlg-kbd { display: none !important; }
  .dialog.wide .form-grid { grid-template-columns: 1fr; }
  .dialog .table-wrap { max-height: 42vh; }

  /* 登录卡：小屏贴边不溢出 */
  .login-card { width: min(360px, calc(100vw - 28px)); padding: 30px 24px 22px; }
}
@media (max-width: 480px) {
  /* 更窄的机器：搜索字段整行放 */
  .search-bar .fld { flex: 1 1 100%; }
  .btn { padding: 10px 16px; }
}

/* ===== v0.6.116：宽表格顶部同步横向滚动条 =====
   表格一宽，滚动条在最底下，每次拉动都得把鼠标挪到页面底部。
   头顶加一条「镜子滚动条」，和表格的 scrollLeft 双向同步。 */
.twin-scroll {
  overflow-x: auto; overflow-y: hidden; height: 16px;
  margin: 0 0 6px; border-radius: 4px; background: #f5f7fa;
}
.twin-scroll .twin-pad { height: 1px; }
.twin-scroll::-webkit-scrollbar { height: 14px; }
.twin-scroll::-webkit-scrollbar-track { background: #f0f3f7; border-radius: 7px; }
.twin-scroll::-webkit-scrollbar-thumb {
  background: #c3cfdd; border-radius: 7px; border: 3px solid #f0f3f7;
}
.twin-scroll::-webkit-scrollbar-thumb:hover { background: #a8b8ca; }

/* v0.6.134：物流费用「按销售合同录运费」——客户(一级) → 合同(二级) → 车次(三级) 逐级缩进 */
tr.lg-grp[data-cu] td { padding-left: 30px; background: #f4f8ff; }
tr.lg-grp[data-cu]:hover td { background: #e9f1ff; }
tr.fw-row[data-cu] td:first-child { padding-left: 46px; }
tr.fw-row[data-cu] td { background: #fff; }

/* v0.6.135：物流费用工作台 —— 批量填实付工具条 + 合同组头路线标签 + 车次路线列 */
.bulk-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 8px 12px; margin: 0 0 8px; border: 1px solid #dbe6f6; border-radius: 8px;
  background: #f7faff; font-size: 12.5px; color: #33475f;
}
.bulk-bar .bk-title { color: #17417f; }
.bulk-bar .bk { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.bulk-bar input[type=radio] { width: auto; margin: 0; }
.bulk-bar .stat { margin-left: auto; color: #4a6b96; font-weight: 600; }
tr.lg-grp .lg-route {
  display: inline-block; margin: 0 10px 0 8px; padding: 1px 9px; border-radius: 10px;
  background: #eaf1fd; color: #2f6fd0; font-size: 12px; font-weight: 600;
}
tr.fw-row td.ckcell { padding-left: 8px; }
tr.fw-row td.ckcell input { cursor: pointer; }
tr.fw-row td.route-cell { font-size: 12.5px; color: #33475f; }

/* v0.6.141：物流费用车行的「代开物流票」勾 + 税率，勾了右边自动出含税金额和税钱 */
tr.fw-row td.ybd-cell { white-space: nowrap; }
.fw-ybd-lb { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; color: #45505c; cursor: pointer; }
.fw-ybd-lb input { margin: 0; cursor: pointer; }
tr.fw-row td.ybd-cell .fw-rate { width: 54px; }
tr.fw-row td.ybd-cell .fw-rate:disabled { background: #f3f5f8; color: #a5b0bc; }

/* ==================================================================
   v0.6.144：列表页「表头常驻 + 上下双横条 + 录入界面重做」
   用户 2026-10-23：① 物流费用录入页全部展开后往下拉，抬头（表头）跟着滚走
        ② 其他页面也要抬头固定 ③ 上下都要有横向拉动条 ④ 录入界面太简陋
   根因：只有「整页就一张卡」才把表格做成滚动容器，而物流费用 / 粮款收付的
        卡片里还挂着 <datalist> 之类的兄弟节点，卡片没撑满高度，表格就不滚，
        thead 的 sticky 等于没开。
   做法：JS 给「唯一一张列表卡」加 .card-fit —— 卡片撑满可视高度，
        表格自己成为滚动容器（with 底部横条），表头 sticky；
        头顶再挂一条镜像横条（work.js attachTwinScrolls），上下都能拉。
   ================================================================== */

/* ① 卡片撑满 + 表格自己滚（表格底部横条因此常驻在眼前）
      fit-chain：卡片外面还包着页签容器（物流费用 / 粮款收付）时，
      从容器到卡片一层层把高度传下去 */
.main .fit-chain {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
.page-card.card-fit {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.page-card.card-fit > .table-wrap {
  flex: 1 1 auto; min-height: 140px;
  overflow: auto; overscroll-behavior: contain;
  border: 1px solid #e6edf7; border-radius: 10px;
}
.page-card.card-fit > .table-wrap > table.grid > thead > tr > th {
  position: sticky; top: 0; z-index: 6;
}
/* 兜底：没有 JS 加类时，只有一张卡（同类型元素）也按上面这套走 */
.main > .page-card:only-of-type {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.main > .page-card:only-of-type > .table-wrap {
  flex: 1 1 auto; min-height: 140px; overflow: auto; overscroll-behavior: contain;
}
/* 手机上不锁高度（键盘一弹可视区太矮），仍旧整页滚、表格横向滑 */
@media (max-width: 820px) {
  .main .fit-chain, .page-card.card-fit { display: block; min-height: 0; }
  .main > .page-card.card-fit, .main > .page-card:only-of-type { display: block; min-height: 0; }
  .page-card.card-fit > .table-wrap,
  .main > .page-card:only-of-type > .table-wrap { min-height: 0; max-height: none; }
}

/* ② 滚动条：横向 13px、竖向 11px，上下左右都看得见（默认太细，同事说找不到） */
.table-wrap::-webkit-scrollbar { width: 11px; height: 13px; }
.table-wrap::-webkit-scrollbar-track { background: #f4f7fb; border-radius: 7px; }
.table-wrap::-webkit-scrollbar-thumb {
  background: #c8d5e5; border-radius: 7px; border: 2px solid #f4f7fb;
}
.table-wrap::-webkit-scrollbar-thumb:hover { background: #a9bcd2; }
.table-wrap::-webkit-scrollbar-corner { background: #f4f7fb; }

/* ③ 表头：浅蓝渐变 + 底线 + 常驻投影，滚动时一眼看出「这是抬头」 */
table.grid thead th {
  background: linear-gradient(180deg, #f9fbfe 0%, #edf3fb 100%);
  color: #52657b; font-weight: 700; font-size: 12px; letter-spacing: .2px;
  border-bottom: 1px solid #dde7f4;
  padding-top: 8px; padding-bottom: 8px;
}
.main > .page-card.card-fit > .table-wrap > table.grid > thead > tr > th,
.main > .page-card:only-of-type > .table-wrap > table.grid > thead > tr > th {
  box-shadow: 0 1px 0 #dbe6f3, 0 4px 10px -6px rgba(28, 58, 100, .28);
}

/* ④ 单元格输入框：平时淡底无边框（像 Excel 满格可点），悬停描边、聚焦发蓝 */
table.grid td .cell-in {
  height: 28px; padding: 3px 8px; border: 1px solid transparent; border-radius: 6px;
  background: #f7fafd; font-size: 12.5px; color: #22303f;
  font-family: inherit; transition: border-color .14s, background .14s, box-shadow .14s;
}
table.grid td .cell-in:hover:not(:disabled):not([readonly]) {
  background: #fff; border-color: #d3e2f4;
}
table.grid td .cell-in:focus {
  background: #fff; border-color: var(--brand); outline: none;
  box-shadow: 0 0 0 3px rgba(43, 124, 255, .12);
}
table.grid td .cell-in:disabled, table.grid td .cell-in[readonly] {
  background: #f3f6fa; color: #93a1b1;
}
table.grid td .cell-in::placeholder { color: #b3c0cf; }
table.grid td .cell-in.num-in, table.grid td input.cell-in[type=text] { text-align: left; }
table.grid td.num .cell-in { text-align: right; font-variant-numeric: tabular-nums; }

/* ⑤ 录入行：分隔线更淡、悬停整行浅蓝、正在改的那行淡黄 */
tr.fw-row td, tr.pw-row td, tr.pw-new td { border-bottom: 1px solid #eef3f9; }
table.grid tbody tr.fw-row[data-cu]:hover td,
table.grid tbody tr.fw-row:hover td { background: #f3f9ff !important; }
table.grid tbody tr.fw-row[data-editing] td { background: #fffdf2 !important; }
table.grid tbody tr.fw-row[data-editing]:hover td { background: #fff9e6 !important; }
table.grid tbody tr.pw-new td { background: #fbfdff; }
table.grid tbody tr.pw-new:hover td { background: #f3f9ff; }

/* ⑥ 组头升级：客户＝品牌蓝细条 + 渐变底；合同＝白底细线；操作做成小胶囊 */
tr.cust-head td {
  background: linear-gradient(180deg, #eff6ff 0%, #e7f0fe 100%) !important;
  border-top: 1px solid #d9e8fb; border-bottom: 1px solid #d9e8fb;
  box-shadow: inset 3px 0 0 var(--brand);
  padding-top: 10px; padding-bottom: 10px;
}
tr.cust-head:hover td { background: linear-gradient(180deg, #e9f2ff 0%, #e0ecfd 100%) !important; }
tr.cust-head b { font-size: 14px; letter-spacing: .2px; }
tr.lg-grp[data-cu] td {
  background: #fcfdff !important;
  box-shadow: inset 3px 0 0 #cfe2f9;
  border-bottom: 1px solid #eaf1fa;
}
tr.lg-grp[data-cu]:hover td { background: #f6fafe !important; }
tr.lg-grp[data-cu].on td { background: #f4f9ff !important; }
tr.lg-grp .link { font-weight: 700; font-size: 13px; letter-spacing: .2px; }
tr.lg-grp a.op, tr.cust-head a.op {
  display: inline-block; padding: 2px 10px; margin-left: 8px;
  border: 1px solid #cddff5; border-radius: 999px; background: #fff;
  font-size: 12px; color: #2f6fd0; line-height: 18px;
}
tr.lg-grp a.op:hover, tr.cust-head a.op:hover {
  background: #eaf3ff; border-color: #a9c9f2; text-decoration: none;
}
tr.lg-grp a.op[data-fw-save], tr.lg-grp a.op[data-save] {
  background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600;
}
tr.lg-grp a.op[data-fw-save]:hover, tr.lg-grp a.op[data-save]:hover { background: var(--brand-deep); }
tr.lg-grp select.fw-inv, tr.lg-grp select.cell-in {
  height: 24px; border: 1px solid #dbe6f5; border-radius: 6px; background: #fff;
  font-size: 12px; color: #33475f; padding: 0 4px;
}

/* ⑦ 页头：标题 + 一行要点 + 「录入说明」胶囊（说明改成浮层，不占表格高度） */
.page-head { align-items: center; gap: 12px; flex-wrap: wrap; }
.page-head .head-hint {
  flex: 1 1 320px; min-width: 0; color: #8b9aab; font-size: 12.5px; line-height: 1.6;
}
.page-head .head-hint b { color: #5b7c9e; }
.head-note { position: relative; flex: 0 0 auto; }
.head-note > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px 5px 10px; border: 1px solid #dbe6f5; border-radius: 999px;
  background: #f7fbff; color: #3f6ea8; font-size: 12.5px; white-space: nowrap;
}
.head-note > summary::-webkit-details-marker { display: none; }
.head-note > summary::before {
  content: 'i'; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: #dcebfd; color: #2b7cff; font-size: 10.5px; font-weight: 700; font-style: italic;
}
.head-note > summary:hover { background: #fff; border-color: #b9d2f2; }
.head-note[open] > summary { background: #fff; border-color: #b9d2f2; }
.head-note .head-note-body {
  position: absolute; right: 0; top: 34px; z-index: 40;
  width: min(820px, 72vw); max-height: 46vh; overflow: auto;
  padding: 13px 16px; background: #fff;
  border: 1px solid #e2ebf7; border-radius: 12px;
  box-shadow: 0 18px 46px rgba(18, 44, 80, .18);
  font-size: 12.5px; line-height: 1.85; color: #5b6b7c;
  text-align: left; font-weight: 400;
}
.head-note .head-note-body b { color: #2b3f57; }

/* ⑧ 批量条：分段选择 + 分组竖线，像一条真正的工具条 */
.bulk-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 9px 12px; margin: 0 0 10px;
  border: 1px solid #e3ecf8; border-radius: 10px;
  background: linear-gradient(180deg, #fcfdff 0%, #f6faff 100%);
  box-shadow: 0 1px 2px rgba(30, 60, 110, .04);
  font-size: 12.5px; color: #33475f;
}
.bulk-bar .bk-title { color: #17417f; font-size: 12.5px; font-weight: 700; }
.bulk-bar .bk-grp { display: flex; align-items: center; gap: 7px; }
.bulk-bar .bk-grp + .bk-grp { padding-left: 12px; border-left: 1px dashed #dbe6f5; }
.bulk-bar .bk-in, .bulk-bar input[type=date], .bulk-bar select {
  height: 30px; border: 1px solid #dbe5f1; border-radius: 7px; padding: 0 9px;
  background: #fff; font-size: 12.5px; color: #2b3a4b; font-family: inherit;
}
.bulk-bar .bk-in:focus, .bulk-bar input[type=date]:focus, .bulk-bar select:focus {
  border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(43, 124, 255, .1);
}
.bulk-bar .stat { margin-left: auto; color: #2f6fd0; font-weight: 700; }
.seg { display: inline-flex; padding: 2px; background: #edf3fa; border-radius: 8px; }
.seg label { position: relative; cursor: pointer; margin: 0; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: block; padding: 4px 12px; font-size: 12.5px; color: #5a6b7e;
  border-radius: 6px; white-space: nowrap; transition: .14s;
}
.seg label:hover span { color: #2f6fd0; }
.seg input:checked + span {
  background: #fff; color: #1b5fd9; font-weight: 700;
  box-shadow: 0 1px 3px rgba(30, 60, 110, .14);
}

/* ⑨ 口径说明：默认收成一行「口径说明 ▸」，点开在浮层里看，不占表格高度 */
details.fin-note {
  margin-top: 8px; padding: 0; background: transparent;
  border-left: none; border-radius: 0; color: #8b9aab; font-size: 12px;
}
details.fin-note > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 7px; color: #8b9aab; user-select: none;
}
details.fin-note > summary::-webkit-details-marker { display: none; }
details.fin-note > summary::before { content: '▸'; font-size: 10px; color: #9fb0c3; }
details.fin-note[open] > summary::before { content: '▾'; }
details.fin-note > summary:hover { background: #f4f8fd; color: #4a6b96; }
details.fin-note > .fn-body {
  margin-top: 6px; padding: 10px 13px; background: #f8fafd;
  border: 1px solid #eef3fa; border-radius: 8px;
  max-height: 24vh; overflow: auto; line-height: 1.8;
}
details.fin-note > .fn-body b { color: #5b6b7c; }

/* ⑩ 卡片本身：圆角柔化、阴影轻一点（整体观感不那么「框」） */
.page-card {
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(31, 45, 61, .05), 0 10px 24px -18px rgba(31, 45, 61, .28);
}
.page-title { letter-spacing: .2px; }

/* ⑪ 物流费用：实付四格（金额 / 日期 / 车队 / 账户）整列淡蓝底，扫一眼就知道往哪填 */
table.fw-grid thead th:nth-child(n+9):nth-child(-n+12) {
  background: linear-gradient(180deg, #f1f8ff 0%, #e3effe 100%);
  color: #2364c0;
}
table.fw-grid tbody td:nth-child(n+9):nth-child(-n+12) { background: #fbfdff; }
table.fw-grid tbody tr.fw-row[data-editing] td:nth-child(n+9):nth-child(-n+12) { background: #fffdf2; }
table.fw-grid tbody tr.fw-row:hover td:nth-child(n+9):nth-child(-n+12) { background: #f3f9ff; }

/* 批量条小标签 */
.bulk-bar .bk-lab { color: #7b8a9d; font-size: 12px; }
/* 搜索栏 / 批量条里的勾选框：不吃文本框的 30px 高度（v0.6.144 截图发现被拉成大方块） */
.search-bar input[type=checkbox], .bulk-bar input[type=checkbox] {
  width: 15px !important; height: 15px !important; min-width: 0; margin: 0;
  vertical-align: middle; accent-color: var(--brand); cursor: pointer;
}

/* 收 / 付 页签做成胶囊 */
.fee-tabs { gap: 6px; margin-bottom: 10px; }
.fee-tab {
  padding: 8px 18px; border-radius: 999px; background: #f2f6fc; border-color: #e2eaf5;
}
.fee-tab:hover { background: #fff; }
.fee-tab.on {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 4px 12px -4px rgba(43, 124, 255, .5);
}
.fee-tab.on:hover { color: #fff; }